react-native-bundle-discovery 1.0.0-rc.9 → 1.0.0

package/.discoveryrc.js

@@ -1,19 +1,21 @@
+const path = require("path");
+
 module.exports = {
   name: "react-native-bundle-discovery",
   data: () => require("./tmp/before_metro-stats.json"),
-  setup: "./setup.js",
+  setup: path.resolve(__dirname, "setup.js"),
   view: {
     assets: [
       // Global styles
-      "views/global.css",
+      path.resolve(__dirname, "views/global.css"),
       // Pages
-      "pages/default.js",
-      "pages/module.js",
-      "pages/package.js",
+      path.resolve(__dirname, "pages/default.js"),
+      path.resolve(__dirname, "pages/module.js"),
+      path.resolve(__dirname, "pages/package.js"),
       // Custom views
-      "views/highcharts.css",
-      "views/highcharts.js",
-      "views/foamtree.js",
+      path.resolve(__dirname, "views/highcharts.css"),
+      path.resolve(__dirname, "views/highcharts.js"),
+      path.resolve(__dirname, "views/foamtree.js"),
     ],
   },
 };

package/README.md

@@ -4,7 +4,10 @@
 > Currently, everything is in a very early stage. The project is not yet ready for use.
 
 
-<img width="800" src="https://github.com/user-attachments/assets/211145d4-8fe7-499b-a372-9d752e878772" />
+A simple package that helps developers visualize and analyze the bundle size of React Native apps.
+With this tool, you can easily explore your app's codebase, identify large or heavy packages, and inspect the structure of modules and code within your project.
+
+<img width="800" alt="" src="./assets/img.png" />
 
 ### Setup:
 
@@ -25,7 +28,7 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 +  projectRoot: __dirname, 
 +   //^^^ ⚠️ WARNING: In a monorepo setup, this should point to the monorepo root,
 +   //                not the individual package directory.
-+})
++});
 
 -const config = {};
 +const config = {
@@ -37,7 +40,31 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 module.exports = mergeConfig(getDefaultConfig(__dirname), config);
 ```
 
+#### 3. Build the app
+
+As example, for iOS you can run the following command, and it will generate the `metro-stats.json` file in the root of your project:
+
+```bash
+npx react-native bundle \
+  --entry-file index.js \
+  --platform ios \
+  --dev false \
+  --bundle-output ios/main.jsbundle \
+  --assets-dest ios/assets
+```
+
+#### 4. View the report
+
+Run webserver to view the report:
+
+```bash
+npx react-native-bundle-discovery metro-stats.json
+```
+
+---
+
 **Similar projects:**
+
 - https://github.com/expo/atlas
 - https://github.com/v3ron/expo-atlas-without-expo
 - https://github.com/callstack/react-native-bundle-visualizer
@@ -45,7 +72,8 @@ module.exports = mergeConfig(getDefaultConfig(__dirname), config);
 - https://github.com/statoscope/statoscope
 - https://github.com/relative-ci/bundle-stats/tree/master/packages/cli
 
+--- 
 
-**Links:**
+**Built using Discovery.js:**
 - Build blocks for pages: https://discoveryjs.github.io/discovery/#views-showcase
 - Jora syntax: https://discoveryjs.github.io/jora/#article:jora-syntax-operators

package/lib/bin.js

@@ -1,35 +1,52 @@
 #!/usr/bin/env node
+const fs = require("fs");
 const path = require("path");
-const discovery = require("@discoveryjs/cli");
+const chalk = require("chalk");
+const { createServer } = require("@discoveryjs/cli");
 const config = require("../.discoveryrc.js");
 
 const filePath = process.argv[2];
 
 if (!filePath) {
   console.error(
-    "Usage: `npx react-native-bundle-discovery <path-to-file>`, Please provide a path to a JSON file.",
+    `Usage: '${chalk.green("npx react-native-bundle-discovery <path-to-file>")}', Please provide a path to a JSON file.`,
   );
   process.exit(1);
 }
 
 const jsonFilePath = path.resolve(process.cwd(), filePath);
 
-let data;
+let fullJsonPath;
 
 try {
-  data = require(jsonFilePath);
+  fullJsonPath = require.resolve(jsonFilePath);
 } catch (err) {
-  console.error(`Error loading file: ${jsonFilePath}`);
+  console.error(`Error loading file: ${chalk.red(jsonFilePath)}`);
   console.error(err.message);
   process.exit(1);
 }
 
 const PORT = process.env.PORT || 8079;
 
-discovery
-  .createServer({ ...config, data: () => data })
-  .then((server) =>
-    server.listen(PORT, () =>
-      console.log(`Server listen on http://localhost:${this.address().port}`),
-    ),
-  );
+const configFile = path.resolve(__dirname, "./.tmp.js");
+
+fs.writeFileSync(
+  configFile,
+  `module.exports = ${JSON.stringify(
+    { ...config, data: "<tmp>" },
+    null,
+    1,
+  ).replace(`"<tmp>"`, `() => require("${fullJsonPath}")`)};`,
+);
+
+createServer({
+  cache: false,
+  minify: true,
+  dev: false,
+  config: configFile,
+  configFile,
+}).then((server) =>
+  server.listen(PORT, () =>
+    console.log(`Server listen on ${chalk.green(`http://localhost:${PORT}`)}`),
+  ),
+);

package/lib/customSerializer.js

@@ -1,6 +1,7 @@
-const { writeFileSync, existsSync } = require("node:fs");
-const { resolve } = require("node:path");
-const { Buffer } = require("node:buffer");
+const { writeFileSync, existsSync } = require("fs");
+const { resolve } = require("path");
+const { Buffer } = require("buffer");
+const chalk = require("chalk");
 
 const NAME = require("../package.json").name;
 
@@ -113,7 +114,9 @@ function createJsonReport({
 
   writeFileSync(outputJsonPath, JSON.stringify(stats));
 
-  console.log(`[${NAME}]: Saved stats to`, outputJsonPath);
+  console.log(
+    `${chalk.yellow(`[${NAME}]`)}: Saved stats to ${chalk.green(outputJsonPath)}`,
+  );
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-discovery",
-  "version": "1.0.0-rc.9",
+  "version": "1.0.0",
   "main": "index.js",
   "bin": "lib/bin.js",
   "repository": "git@github.com:retyui/react-native-bundle-discovery.git",
@@ -12,7 +12,10 @@
     "build": "npx discovery-build --config .discoveryrc.js --output build --serve-only-assets --single-file"
   },
   "dependencies": {
-    "@discoveryjs/cli": "2.14.2"
+    "@discoveryjs/cli": "2.14.2",
+    "@discoveryjs/discovery": "1.0.0-beta.93",
+    "chalk": "^4.1.2",
+    "highcharts": "12.2.0"
   },
   "peerDependencies": {
     "metro": "*"
@@ -28,13 +31,12 @@
     "views",
     "pages",
     "index.js",
+    "setup.js",
+    "prepare.js",
+    "queryHelpers.js",
     ".discoveryrc.js"
   ],
   "devDependencies": {
-    "@discoveryjs/discovery": "1.0.0-beta.93",
-    "highcharts": "12.2.0",
-    "lodash": "4.17.21",
     "prettier": "3.5.3"
-  },
-  "packageManager": "yarn@4.6.0"
+  }
 }

package/prepare.js

@@ -0,0 +1,105 @@
+function getDuplicateId(path) {
+  const uniqueNodeModulePath = path.split("node_modules/").pop();
+  const ids = [uniqueNodeModulePath];
+
+  // Special case for lodash
+  if (
+    uniqueNodeModulePath.startsWith("lodash.") ||
+    uniqueNodeModulePath.startsWith("lodash-es/")
+  ) {
+    // node_modules/lodash.debounce/index.js => node_modules/lodash/debounce.js
+    // node_modules/lodash-es/get.js         => node_modules/lodash/get.js
+    const uniqueLodashPath = uniqueNodeModulePath
+      .replace("lodash-es/", "lodash/")
+      .replace("lodash.", "lodash/")
+      .replace("/index.js", ".js");
+
+    ids.push(uniqueLodashPath);
+  }
+
+  return ids;
+}
+
+function prepare(data) {
+  // data.modules = data.modules.slice(875, 880); TODO for debugging a formtree chart
+  let moduleMap = new Map();
+  let duplicatesMap = new Map();
+  let allLodashModules = new Set();
+
+  data.packages.forEach((pkg) => {
+    pkg.path = pkg.absolutePath.replace(data.rootFolder + "/", "");
+  });
+  data.modules.forEach((m) => {
+    // 0. Data transformation
+    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 + "/", "");
+    });
+
+    // 1. Duplicates
+    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);
+    });
+    // lodash/*
+    // lodash-es/*
+    // lodash.*
+    if (m.path.includes("node_modules/lodash")) {
+      allLodashModules.add(m);
+    }
+
+    // 2. Dependencies
+    m.dependents = [];
+    moduleMap.set(m.absolutePath, m);
+
+    // 3. Other
+    // 3.1 Format prelude
+    if (m.path === "__prelude__") {
+      m.source.code = m.source.code
+        .replaceAll(";", ";\n\n")
+        .replaceAll(",", ",\n    ");
+      m.output.code = m.output.code
+        .replaceAll(";", ";\n\n")
+        .replaceAll(",", ",\n    ");
+    }
+  });
+
+  data.modules.forEach((m) => {
+    // 1. Duplicates
+    m._tmp_ids.forEach((id) => {
+      const duplicates = duplicatesMap.get(id);
+      if (duplicates.length > 1) {
+        m.duplicates.push(...duplicates.filter((d) => d !== m));
+      }
+    });
+
+    // lodash/index.js is a special case (as index.js includes all lodash functions)
+    if (m.path.endsWith("node_modules/lodash/index.js")) {
+      m.duplicates.push(...allLodashModules);
+    }
+    delete m._tmp_ids;
+
+    // 2. Dependencies
+    m.dependencies.forEach((dependency) => {
+      const dependentModule = moduleMap.get(dependency.absolutePath);
+      if (dependentModule) {
+        dependentModule.dependents.push(m); //add to the dependent module directly
+      }
+    });
+  });
+
+  allLodashModules = null;
+  moduleMap = null;
+  duplicatesMap = null;
+  return data;
+}
+
+module.exports = prepare;

package/queryHelpers.js

@@ -0,0 +1,327 @@
+const helpers = {
+  plural(count, [singular, plural]) {
+    return count === 1 ? singular : plural;
+  },
+  pluralWithCount(count, [singular, plural]) {
+    return `${count} ${helpers.plural(count, [singular, plural])}`;
+  },
+  pluralBadge(count, [singular, plural], prefix = "") {
+    return {
+      text: prefix + count,
+      postfix: helpers.plural(count, [singular, plural]),
+    };
+  },
+  getHighchartsColors() {
+    const Highcharts = require("highcharts");
+    return Highcharts.getOptions().colors;
+  },
+  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}`;
+    }
+    return folder;
+  },
+  getBestNetworkGraphSize(module, params) {
+    let maxParentDepth = 0;
+    let itemsCount = 0;
+    do {
+      maxParentDepth++;
+      itemsCount = helpers.getNetworkGraph(module, {
+        ...params,
+        maxParentDepth,
+      }).data.length;
+      if (itemsCount < 10) {
+        const limit = itemsCount - 1;
+        return limit > 2 ? limit : 2;
+      }
+    } while (maxParentDepth < 6);
+    return maxParentDepth;
+  },
+  getNetworkGraph(
+    module,
+    { maxParentDepth = 2, omitVisitedModules = true } = {},
+  ) {
+    const queue = [{ module, parentId: "", level: 0 }];
+    const visited = 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;
+      }
+
+      const id = currentModule.path;
+
+      if (omitVisitedModules) {
+        if (visited.has(id)) {
+          continue;
+        }
+        visited.add(id);
+      }
+
+      if (parentId) {
+        const isEntryPoint = currentModule.dependents.length === 0;
+        result.push({ isEntryPoint, id, parentId });
+        data.push([parentId, id]);
+        if (isEntryPoint) {
+          entryPointPath = id;
+        }
+      }
+
+      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) {
+        if (item.isEntryPoint) {
+          entryPointPath = item.id;
+          break;
+        }
+      }
+    }
+
+    return { entryPointPath, data };
+  },
+
+  getExtColor(extName) {
+    const colors = {
+      js: "#f1e05a50",
+      ts: "#2b748950",
+      tsx: "#2b748950",
+      json: "#e34c2650",
+      svg: "#e69f0d50",
+      css: "#563d7c50",
+      png: "#e44b2350",
+    };
+    return colors[extName] ?? colors["js"];
+  },
+  getFileExtension(filename) {
+    const idx = filename.lastIndexOf(".");
+    return idx === -1 ? "js" : filename.slice(idx + 1);
+  },
+  toFixed(value, fractionDigits = 2) {
+    return Number(value).toFixed(fractionDigits);
+  },
+  percent(value, fractionDigits = 2) {
+    return (100 * value).toFixed(fractionDigits) + "%";
+  },
+  formatBytes(bytes, decimals) {
+    if (bytes == 0) return "0 Bytes";
+    const k = 1024,
+      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];
+  },
+  isPackageImport(moduleName) {
+    return moduleName?.[0] !== ".";
+  },
+  // isRuntimeCode(moduleName) {
+  //   return (
+  //     moduleName === "__prelude__" ||
+  //     moduleName.includes("@babel/runtime") ||
+  //     moduleName.includes("metro-runtime") ||
+  //     moduleName.includes("@react-native/js-polyfills")
+  //   );
+  // },
+  transformFilesList(files, rootFolder, type) {
+    const nodeModulesMap = { children: {}, size: 0 };
+    const sourceCodeMap = { children: {}, size: 0 };
+
+    files.forEach(({ path, size }) => {
+      if (path === "__prelude__") {
+        path = "node_modules/__prelude__";
+      }
+
+      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 (index === parts.length - 1) {
+          current[part].size = size;
+          current[part].path = shortPath;
+        }
+
+        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 nodeModulesGroup;
+      }
+
+      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" },
+      ]
+        .concat(flattenTree(nodeModulesMap.children.node_modules, ROOT_ID_1))
+        .concat(flattenTree(sourceCodeMap, ROOT_ID_2));
+    }
+
+    throw new Error("Unsupported type: " + type);
+  },
+};
+
+function flattenTree(
+  node,
+  parentId,
+  prevWasSkipped = false,
+  lvl = 0,
+  result = [],
+  overrideParentId,
+) {
+  const nodeChildrenCount = Object.keys(node.children);
+
+  for (const key of nodeChildrenCount) {
+    const childNode = node.children[key];
+    const childId = parentId + "/" + key;
+    const childrenCount = Object.keys(childNode.children).length;
+    const hasChildren = childrenCount > 0;
+    const item = {
+      id: childId,
+      name: prevWasSkipped ? parentId : key,
+      parent: overrideParentId ?? parentId,
+    };
+
+    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);
+    }
+
+    flattenTree(
+      childNode,
+      childId,
+      skipThisNode,
+      lvl + 1,
+      result,
+      skipThisNode ? (overrideParentId ?? parentId) : undefined,
+    );
+  }
+
+  return result;
+}
+
+function sumSizes(node) {
+  const isFile = Object.keys(node.children).length === 0;
+  let totalFiles = isFile ? 1 : 0;
+  let totalSize = node.size || 0;
+  for (const key in node.children) {
+    const result = sumSizes(node.children[key]);
+    totalSize += result.totalSize;
+    totalFiles += result.totalFiles;
+  }
+  node.type = isFile ? "file" : "folder";
+  node.size = totalSize;
+  node.files = totalFiles;
+  return { totalSize, totalFiles };
+}
+
+function toGroups(node, label) {
+  const keys = Object.keys(node.children);
+
+  const common = {
+    label,
+    weight: node.size,
+    files: node.files,
+    type: node.type,
+    size: helpers.formatBytes(node.size),
+  };
+
+  if (keys.length === 0) {
+    // File
+    return common;
+  }
+
+  // Folder
+  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) {
+  let 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 pathWithoutNestedNM;
+  }
+  return path;
+}
+
+module.exports = helpers;

package/setup.js

@@ -0,0 +1,12 @@
+const prepare = require("./prepare");
+const queryHelpers = require("./queryHelpers");
+
+module.exports = function setup({
+  defineObjectMarker,
+  addQueryHelpers,
+  setPrepare,
+}) {
+  // extend queries with custom methods
+  addQueryHelpers(queryHelpers);
+  setPrepare(prepare);
+};

package/views/foamtree.js

@@ -1,4 +1,4 @@
-const FoamTree = require("../vendors/foamtree.js").default;
+const { FoamTree } = require("../vendors/foamtree.js");
 
 function injectTooltip(root) {
   const t = root.querySelector(".tooltip");