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

package/.discoveryrc.js

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

package/README.md

@@ -4,7 +4,7 @@
 > Currently, everything is in a very early stage. The project is not yet ready for use.
 
 
-<img width="800" alt="" src="./assets/img.png" />
+<img width="800" src="https://github.com/user-attachments/assets/211145d4-8fe7-499b-a372-9d752e878772" />
 
 ### Setup:
 
@@ -25,7 +25,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,31 +37,7 @@ 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
@@ -69,8 +45,7 @@ npx react-native-bundle-discovery metro-stats.json
 - https://github.com/statoscope/statoscope
 - https://github.com/relative-ci/bundle-stats/tree/master/packages/cli
 
---- 
 
-**Built using Discovery.js:**
+**Links:**
 - 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,52 +1,35 @@
 #!/usr/bin/env node
-const fs = require("fs");
 const path = require("path");
-const chalk = require("chalk");
-const { createServer } = require("@discoveryjs/cli");
+const discovery = require("@discoveryjs/cli");
 const config = require("../.discoveryrc.js");
 
 const filePath = process.argv[2];
 
 if (!filePath) {
   console.error(
-    `Usage: '${chalk.green("npx react-native-bundle-discovery <path-to-file>")}', Please provide a path to a JSON file.`,
+    "Usage: `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 fullJsonPath;
+let data;
 
 try {
-  fullJsonPath = require.resolve(jsonFilePath);
+  data = require(jsonFilePath);
 } catch (err) {
-  console.error(`Error loading file: ${chalk.red(jsonFilePath)}`);
+  console.error(`Error loading file: ${jsonFilePath}`);
   console.error(err.message);
   process.exit(1);
 }
 
 const PORT = process.env.PORT || 8079;
 
-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}`)}`),
-  ),
-);
+discovery
+  .createServer({ ...config, data: () => data })
+  .then((server) =>
+    server.listen(PORT, () =>
+      console.log(`Server listen on http://localhost:${this.address().port}`),
+    ),
+  );

package/lib/customSerializer.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-discovery",
-  "version": "1.0.0-rc.13",
+  "version": "1.0.0-rc.9",
   "main": "index.js",
   "bin": "lib/bin.js",
   "repository": "git@github.com:retyui/react-native-bundle-discovery.git",
@@ -12,10 +12,7 @@
     "build": "npx discovery-build --config .discoveryrc.js --output build --serve-only-assets --single-file"
   },
   "dependencies": {
-    "@discoveryjs/cli": "2.14.2",
-    "@discoveryjs/discovery": "1.0.0-beta.93",
-    "chalk": "^4.1.2",
-    "highcharts": "12.2.0"
+    "@discoveryjs/cli": "2.14.2"
   },
   "peerDependencies": {
     "metro": "*"
@@ -31,12 +28,13 @@
     "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/views/foamtree.js

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

package/prepare.js

@@ -1,105 +0,0 @@
-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

@@ -1,327 +0,0 @@
-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

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