react-native-bundle-discovery-ui 2.6.0 → 2.7.0

package/{pages → dist/client/pages}/package.js

@@ -1,17 +1,11 @@
-const { externalLinkHtml } = require("./_common.js");
-const {
-  getTreeModule,
-  getPackage,
-  getPackageList,
-  getCopyToClipboardButton,
-} = require("./_common");
-
+const require_pages__common = require("./_common.js");
+//#region src/client/pages/package.ts
 discovery.page.define("package", {
   view: "context",
   data: `
     // Tmp variables
     $currentPkgName: #.id;
-    ${getPackage(`$pkg: modules.filter(=> path has "node_modules" and path has $currentPkgName)`)}[0];
+    ${require_pages__common.getPackage(`$pkg: modules.filter(=> path has "node_modules" and path has $currentPkgName)`)}[0];
     $copies: $pkg.pkgInstances.size() - 1;
     $ver: $pkg.pkgInstances[0].version;
 
@@ -31,12 +25,6 @@ discovery.page.define("package", {
     }
   `,
   content: [
-    // TODO uncomment for debugging
-    // {
-    //   view: "struct",
-    //   data: "$.currentPkg",
-    // },
-
     {
       view: "block",
       content: [
@@ -76,13 +64,12 @@ discovery.page.define("package", {
             color: "rgba(255, 165, 0, 0.35)"
           }`,
         },
-        getCopyToClipboardButton({
+        require_pages__common.getCopyToClipboardButton({
           textToCopy: `$.currentPkg.pkgName`,
           className: "m-l-0_5em",
         }),
       ],
     },
-
     {
       when: "$.currentPkgDeprecated",
       view: "list",
@@ -96,9 +83,7 @@ discovery.page.define("package", {
         ],
       },
     },
-
     "html: '<br>'",
-
     {
       view: "block",
       content: [
@@ -109,7 +94,7 @@ discovery.page.define("package", {
           data: `{ href: "https://www.npmjs.com/package/" + currentPkgWithUniqVerNpm }`,
           content: [
             "text: 'npmjs.com'",
-            `html: '<span class="my-icon-inline my-icon-12">${externalLinkHtml}</span>'`,
+            `html: '<span class="my-icon-inline my-icon-12">${require_pages__common.externalLinkHtml}</span>'`,
           ],
         },
         "text: ' '",
@@ -119,7 +104,7 @@ discovery.page.define("package", {
           data: `{ href: "https://bundlephobia.com/package/" + currentPkgWithUniqVer }`,
           content: [
             "text: 'bundlephobia.com'",
-            `html: '<span class="my-icon-inline my-icon-12">${externalLinkHtml}</span>'`,
+            `html: '<span class="my-icon-inline my-icon-12">${require_pages__common.externalLinkHtml}</span>'`,
           ],
         },
         "text: ' '",
@@ -129,7 +114,7 @@ discovery.page.define("package", {
           data: `{ href: "https://packagephobia.com/result?p=" + currentPkgWithUniqVer }`,
           content: [
             "text: 'packagephobia.com'",
-            `html: '<span class="my-icon-inline my-icon-12">${externalLinkHtml}</span>'`,
+            `html: '<span class="my-icon-inline my-icon-12">${require_pages__common.externalLinkHtml}</span>'`,
           ],
         },
         {
@@ -145,7 +130,6 @@ discovery.page.define("package", {
         },
       ],
     },
-
     {
       when: "$.currentPkgInstancesWithMetadata",
       view: "block",
@@ -155,7 +139,10 @@ discovery.page.define("package", {
           view: "table",
           data: "$.currentPkgInstancesWithMetadata",
           cols: [
-            { header: "Path", content: "text: pkgName" },
+            {
+              header: "Path",
+              content: "text: pkgName",
+            },
             {
               header: "Version",
               content: "pill-badge:{ text: 'v' + version, color: '#0af' }",
@@ -205,51 +192,16 @@ discovery.page.define("package", {
         },
       ],
     },
-
     "html: '<hr>'",
-
     {
       view: "block",
-      content: getPackageList({
+      content: require_pages__common.getPackageList({
         data: "$.currentPkg",
         itemPkgName: "text: pkgName",
         showCopiesBadge: false,
         expanded: true,
       }),
-
-      /*[
-        {
-          view: "list",
-          data: "$.currentPkg",
-          item: {
-            view: "tree",
-            expanded: true,
-            itemConfig: {
-              content: [
-                "text: pkgName",
-                "text: ' '",
-                "pill-badge:{ text: size.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
-              ],
-              children: `$.pkgInstances`,
-              itemConfig: {
-                view: "tree-leaf",
-                content: [
-                  //
-                  "text:pkgName",
-                  "text:' '",
-                  "pill-badge:{ text: 'v' + version, color: '#0af' }",
-                  "pill-badge:{ text: size.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
-                ],
-                children: `$.modules`,
-                itemConfig: {
-                  view: "tree-leaf",
-                  content: getTreeModule({ hasPercent: false }),
-                },
-              },
-            },
-          },
-        },
-      ]*/
     },
   ],
 });
+//#endregion

package/dist/client/prepare.js

@@ -0,0 +1,63 @@
+//#region src/client/prepare.ts
+function getDuplicateId(path) {
+  const uniqueNodeModulePath = path.split("node_modules/").pop();
+  const ids = [uniqueNodeModulePath];
+  if (
+    uniqueNodeModulePath.startsWith("lodash.") ||
+    uniqueNodeModulePath.startsWith("lodash-es/")
+  ) {
+    const uniqueLodashPath = uniqueNodeModulePath
+      .replace("lodash-es/", "lodash/")
+      .replace("lodash.", "lodash/")
+      .replace("/index.js", ".js");
+    ids.push(uniqueLodashPath);
+  }
+  return ids;
+}
+function prepare(input) {
+  const data = input;
+  const moduleMap = /* @__PURE__ */ new Map();
+  const duplicatesMap = /* @__PURE__ */ new Map();
+  const allLodashModules = /* @__PURE__ */ new Set();
+  data.packages.forEach((pkg) => {
+    pkg.path = pkg.absolutePath.replace(`${data.rootFolder}/`, "");
+  });
+  data.modules.forEach((m) => {
+    m.absolutePath = m.path;
+    if (m.absolutePath === data.entryPoint) m.isEntry = true;
+    m.path = m.path.replace(`${data.rootFolder}/`, "");
+    m.dependencies.forEach((d) => {
+      d.path = d.absolutePath.replace(`${data.rootFolder}/`, "");
+    });
+    m._tmp_ids = getDuplicateId(m.path);
+    m.duplicates = [];
+    m._tmp_ids.forEach((id) => {
+      if (!duplicatesMap.has(id)) duplicatesMap.set(id, []);
+      duplicatesMap.get(id).push(m);
+    });
+    if (m.path.includes("node_modules/lodash")) allLodashModules.add(m);
+    m.dependents = [];
+    moduleMap.set(m.absolutePath, m);
+    if (m.path === "__prelude__")
+      m.source.code = m.source.code
+        .replaceAll(";", ";\n\n")
+        .replaceAll(",", ",\n    ");
+  });
+  data.modules.forEach((m) => {
+    m._tmp_ids.forEach((id) => {
+      const duplicates = duplicatesMap.get(id);
+      if (duplicates.length > 1)
+        m.duplicates.push(...duplicates.filter((d) => d !== m));
+    });
+    if (m.path.endsWith("node_modules/lodash/index.js"))
+      m.duplicates.push(...allLodashModules);
+    delete m._tmp_ids;
+    m.dependencies.forEach((dependency) => {
+      const dependentModule = moduleMap.get(dependency.absolutePath);
+      if (dependentModule) dependentModule.dependents.push(m);
+    });
+  });
+  return data;
+}
+//#endregion
+module.exports = prepare;

package/{queryHelpers.js → dist/client/queryHelpers.js}

@@ -1,14 +1,12 @@
+//#region src/client/queryHelpers.ts
 const helpers = {
-  prettifyMap: new Map(),
+  prettifyMap: /* @__PURE__ */ new Map(),
   prettifyJS(sourceStr) {
-    if (helpers.prettifyMap.has(sourceStr)) {
+    if (helpers.prettifyMap.has(sourceStr))
       return helpers.prettifyMap.get(sourceStr);
-    }
-
     const prettier = require("prettier/standalone");
     const prettierPluginBabel = require("prettier/plugins/babel");
     const prettierPluginEstree = require("prettier/plugins/estree");
-
     return prettier
       .format(sourceStr, {
         parser: "babel",
@@ -23,15 +21,14 @@ const helpers = {
       });
   },
   askChatGPTAboutPackages() {
-    const prompt = `I have a list of JavaScript packages from my React Native bundle (see below). I want to optimize bundle size by identifying similar or redundant packages — such as multiple versions of similar libraries (e.g., lodash, lodash-es, underscore, etc.), duplicate utilities, or overlapping functionality (e.g., date libraries like moment, dayjs, date-fns).
+    return `https://chat.openai.com/?prompt=${encodeURIComponent(`I have a list of JavaScript packages from my React Native bundle (see below). I want to optimize bundle size by identifying similar or redundant packages — such as multiple versions of similar libraries (e.g., lodash, lodash-es, underscore, etc.), duplicate utilities, or overlapping functionality (e.g., date libraries like moment, dayjs, date-fns).
 
 Please do the following:
 
 1. Group similar or overlapping packages together.
 2. For each group, suggest which one to keep and which ones to consider removing.
 3. For each group, provide a regex string that can be used to filter those packages from the list (e.g., in grep, find, or search tools).
-4. Keep the output concise and copy-paste friendly.`;
-    return `https://chat.openai.com/?prompt=${encodeURIComponent(prompt)}`;
+4. Keep the output concise and copy-paste friendly.`)}`;
   },
   plural(count, [singular, plural]) {
     return count === 1 ? singular : plural;
@@ -47,11 +44,8 @@ Please do the following:
   },
   getModulesName(path) {
     const modules = path.split("node_modules/");
-    const lastModule = modules[modules.length - 1];
-    const [folder, subFolder] = lastModule.split("/");
-    if (folder.startsWith("@")) {
-      return `${folder}/${subFolder}`;
-    }
+    const [folder, subFolder] = modules[modules.length - 1].split("/");
+    if (folder.startsWith("@")) return `${folder}/${subFolder}`;
     return folder;
   },
   getBestNetworkGraphSize(module, params) {
@@ -74,60 +68,55 @@ Please do the following:
     module,
     { maxParentDepth = 2, omitVisitedModules = true } = {},
   ) {
-    const queue = [{ module, parentId: "", level: 0 }];
-    const visited = new Set();
+    const queue = [
+      {
+        module,
+        parentId: "",
+        level: 0,
+      },
+    ];
+    const visited = /* @__PURE__ */ new Set();
     const result = [];
     let entryPointPath = null;
     const data = [];
-
     while (queue.length > 0) {
       const { module: currentModule, parentId, level } = queue.shift();
-
-      if (level >= Number(maxParentDepth)) {
-        break;
-      }
-
+      if (level >= Number(maxParentDepth)) break;
       const id = currentModule.path;
-
       if (omitVisitedModules) {
-        if (visited.has(id)) {
-          continue;
-        }
+        if (visited.has(id)) continue;
         visited.add(id);
       }
-
       if (parentId) {
         const isEntryPoint = currentModule.dependents.length === 0;
-        result.push({ isEntryPoint, id, parentId });
+        result.push({
+          isEntryPoint,
+          id,
+          parentId,
+        });
         data.push([parentId, id]);
-        if (isEntryPoint) {
-          entryPointPath = id;
-        }
+        if (isEntryPoint) entryPointPath = id;
       }
-
-      if (Array.isArray(currentModule.dependents)) {
-        for (const dependentModule of currentModule.dependents) {
+      if (Array.isArray(currentModule.dependents))
+        for (const dependentModule of currentModule.dependents)
           queue.push({
             module: dependentModule,
             parentId: id,
             level: level + 1,
           });
-        }
-      }
     }
-
     if (!entryPointPath) {
-      for (const item of result) {
+      for (const item of result)
         if (item.isEntryPoint) {
           entryPointPath = item.id;
           break;
         }
-      }
     }
-
-    return { entryPointPath, data };
+    return {
+      entryPointPath,
+      data,
+    };
   },
-
   getExtColor(extName) {
     const colors = {
       js: "#f1e05a50",
@@ -138,20 +127,18 @@ Please do the following:
       css: "#563d7c50",
       png: "#e44b2350",
     };
-    return colors[extName] ?? colors["js"];
+    return colors[extName] ?? colors.js;
   },
   getFileExtension(filename) {
     const idx = filename.lastIndexOf(".");
     return idx === -1 ? "js" : filename.slice(idx + 1);
   },
-  // "2022-06-14T19:46:38.369Z" -> "2022-06-14"
   formatDate(isoDate) {
     return isoDate ? new Date(isoDate).toISOString().slice(0, 10) : "";
   },
-  // "2022-06-14T19:46:38.369Z" -> "3 years ago"
   timeAgo(isoDate) {
     if (!isoDate) return "";
-    const days = Math.floor((Date.now() - new Date(isoDate)) / 86_400_000);
+    const days = Math.floor((Date.now() - new Date(isoDate).getTime()) / 864e5);
     const [count, unit] =
       days >= 365
         ? [Math.floor(days / 365), ["year", "years"]]
@@ -166,7 +153,7 @@ Please do the following:
     return Number(value).toFixed(fractionDigits);
   },
   percent(value, fractionDigits = 2) {
-    return (100 * value).toFixed(fractionDigits) + "%";
+    return `${(100 * value).toFixed(fractionDigits)}%`;
   },
   formatBytes(bytes, decimals) {
     if (bytes == 0) return "0 Bytes";
@@ -174,87 +161,76 @@ Please do the following:
       dm = decimals || 2,
       sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
       i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+    return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
   },
   isPackageImport(moduleName) {
     return moduleName?.[0] !== ".";
   },
   transformFilesList(files, rootFolder, type) {
-    const nodeModulesMap = { children: {}, size: 0 };
-    const sourceCodeMap = { children: {}, size: 0 };
-
+    const nodeModulesMap = {
+      children: {},
+      size: 0,
+    };
+    const sourceCodeMap = {
+      children: {},
+      size: 0,
+    };
     files.forEach(({ path, size }) => {
-      if (path === "__prelude__") {
-        path = "node_modules/__prelude__";
-      }
-      if (path === "__runtime__") {
-        path = "node_modules/__runtime__";
-      }
-
-      const shortPath = path.replace(rootFolder + "/", "");
+      if (path === "__prelude__") path = "node_modules/__prelude__";
+      if (path === "__runtime__") path = "node_modules/__runtime__";
+      const shortPath = path.replace(`${rootFolder}/`, "");
       const isNodeModule = shortPath.includes("node_modules/");
       const parts = shortenPath(shortPath, nodeModulesMap).split("/");
       let current = (isNodeModule ? nodeModulesMap : sourceCodeMap).children;
-
       parts.forEach((part, index) => {
-        // console.log((" --- xdebug " + index + " ".repeat(50)).substr(0, 40), {
-        //   part,
-        //   parts,
-        // });
-        if (!current[part]) {
-          current[part] = { size: 0, children: {} };
-        }
-
+        if (!current[part])
+          current[part] = {
+            size: 0,
+            children: {},
+          };
         if (index === parts.length - 1) {
           current[part].size = size;
           current[part].path = shortPath;
           current[part].fullPath = path;
         }
-
         current = current[part].children;
       });
     });
-
     if (type === "foamtree") {
       sumSizes(nodeModulesMap);
       sumSizes(sourceCodeMap);
-
       const sourceCodeGroup = toGroups(sourceCodeMap, "Source Code");
       const nodeModulesGroup = nodeModulesMap?.children?.node_modules
         ? toGroups(nodeModulesMap.children.node_modules, "node_modules")
         : {};
-
-      if (!sourceCodeGroup.groups) {
-        return nodeModulesGroup;
-      }
-      if (!nodeModulesGroup.groups) {
-        return sourceCodeGroup;
-      }
-
+      if (!sourceCodeGroup.groups) return nodeModulesGroup;
+      if (!nodeModulesGroup.groups) return sourceCodeGroup;
       const topLevelNode = { groups: [sourceCodeGroup, nodeModulesGroup] };
       topLevelNode.weight = topLevelNode.groups.reduce(
         (acc, group) => acc + group.weight,
         0,
       );
-
       return topLevelNode;
     }
-
     if (type === "highcharts-treemap") {
       const ROOT_ID_1 = "~";
       const ROOT_ID_2 = ".";
       return [
-        { id: ROOT_ID_1, name: "node_modules" },
-        { id: ROOT_ID_2, name: "Source Code" },
+        {
+          id: ROOT_ID_1,
+          name: "node_modules",
+        },
+        {
+          id: ROOT_ID_2,
+          name: "Source Code",
+        },
       ]
         .concat(flattenTree(nodeModulesMap.children.node_modules, ROOT_ID_1))
         .concat(flattenTree(sourceCodeMap, ROOT_ID_2));
     }
-
-    throw new Error("Unsupported type: " + type);
+    throw new Error(`Unsupported type: ${type}`);
   },
 };
-
 function flattenTree(
   node,
   parentId,
@@ -264,10 +240,9 @@ function flattenTree(
   overrideParentId,
 ) {
   const nodeChildrenCount = Object.keys(node.children);
-
   for (const key of nodeChildrenCount) {
     const childNode = node.children[key];
-    const childId = parentId + "/" + key;
+    const childId = `${parentId}/${key}`;
     const childrenCount = Object.keys(childNode.children).length;
     const hasChildren = childrenCount > 0;
     const item = {
@@ -275,34 +250,21 @@ function flattenTree(
       name: prevWasSkipped ? parentId : key,
       parent: overrideParentId ?? parentId,
     };
-
-    if (!hasChildren) {
-      item.value = childNode.size;
-    }
-
-    if (lvl === 0) {
-      item.color = Highcharts.getOptions().colors[randomInt(0, 9)];
-    }
-
+    if (!hasChildren) item.value = childNode.size;
+    if (lvl === 0) item.color = Highcharts.getOptions().colors[randomInt(0, 9)];
     const skipThisNode = nodeChildrenCount.length === 1 && childrenCount === 1;
-
-    if (!skipThisNode) {
-      result.push(item);
-    }
-
+    if (!skipThisNode) result.push(item);
     flattenTree(
       childNode,
       childId,
       skipThisNode,
       lvl + 1,
       result,
-      skipThisNode ? (overrideParentId ?? parentId) : undefined,
+      skipThisNode ? (overrideParentId ?? parentId) : void 0,
     );
   }
-
   return result;
 }
-
 function sumSizes(node) {
   const isFile = Object.keys(node.children).length === 0;
   let totalFiles = isFile ? 1 : 0;
@@ -315,12 +277,13 @@ function sumSizes(node) {
   node.type = isFile ? "file" : "folder";
   node.size = totalSize;
   node.files = totalFiles;
-  return { totalSize, totalFiles };
+  return {
+    totalSize,
+    totalFiles,
+  };
 }
-
 function toGroups(node, label) {
   const keys = Object.keys(node.children);
-
   const common = {
     label,
     weight: node.size,
@@ -329,47 +292,33 @@ function toGroups(node, label) {
     type: node.type,
     size: helpers.formatBytes(node.size),
   };
-
-  if (keys.length === 0) {
-    // File
-    return common;
-  }
-
-  // Folder
+  if (keys.length === 0) return common;
   return Object.assign(common, {
     groups: keys.map((key) => toGroups(node.children[key], key)),
   });
 }
-
 function randomInt(min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
-
 const nm = "node_modules/";
 function shortenPath(path, nodeModulesMap) {
-  if (path.startsWith(nm + ".pnpm/")) {
-    path = path.replaceAll(nm + ".pnpm/", "");
-  }
-  let index = path.lastIndexOf(nm);
-
+  if (path.startsWith(`${nm}.pnpm/`)) path = path.replaceAll(`${nm}.pnpm/`, "");
+  const index = path.lastIndexOf(nm);
   if (index > 0) {
     const pathWithoutNestedNM = path.slice(index);
-    // Find the package name after "node_modules/"
     const firstSlash = pathWithoutNestedNM.indexOf("/");
     const secondSlash = pathWithoutNestedNM.indexOf("/", firstSlash + 1);
     const pkgName =
       secondSlash === -1
         ? pathWithoutNestedNM.slice(firstSlash + 1)
         : pathWithoutNestedNM.slice(firstSlash + 1, secondSlash);
-
     if (nodeModulesMap?.children?.node_modules?.children?.[pkgName]) {
       const parentPackage = helpers.getModulesName(path.slice(0, index));
-      return nm + parentPackage + " ~ " + pathWithoutNestedNM.slice(nm.length);
+      return `${nm + parentPackage} ~ ${pathWithoutNestedNM.slice(13)}`;
     }
-
     return pathWithoutNestedNM;
   }
   return path;
 }
-
+//#endregion
 module.exports = helpers;

package/dist/client/setup.js

@@ -0,0 +1,9 @@
+const require_prepare = require("./prepare.js");
+const require_queryHelpers = require("./queryHelpers.js");
+//#region src/client/setup.ts
+function setup({ addQueryHelpers, setPrepare }) {
+  addQueryHelpers(require_queryHelpers);
+  setPrepare(require_prepare);
+}
+//#endregion
+module.exports = setup;

package/dist/client/views/_theme.js

@@ -0,0 +1,18 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/client/views/_theme.ts
+function isDark() {
+  const isSystemDarkMode = window?.matchMedia?.(
+    "(prefers-color-scheme: dark)",
+  )?.matches;
+  const userMode = localStorage.getItem("discoveryjs:color-scheme");
+  return userMode === "auto" ? isSystemDarkMode : userMode === "dark";
+}
+function doTheming(el) {
+  const dark = isDark();
+  el.classList.add("highcharts-light");
+  el.classList[!dark ? "add" : "remove"]("my-light");
+  el.classList[dark ? "add" : "remove"]("highcharts-dark");
+}
+if (isDark()) require("../../../vendors/high-contrast-dark.js");
+//#endregion
+exports.doTheming = doTheming;