react-native-bundle-discovery-ui 2.2.0 → 2.3.0

package/README.md

@@ -15,6 +15,8 @@ With this tool, you can easily explore your app's codebase, identify large or he
 - `react-native-bundle-discovery-cli` - CLI to analyze the bundle report.
 - `react-native-bundle-discovery-rozenite-plugin` - Rozenite plugin to integrate UI tool to [React Native DevTools](https://reactnative.dev/docs/react-native-devtools).
 
+---
+
 ### Setup:
 
 There are two ways to install the package:
@@ -22,6 +24,11 @@ There are two ways to install the package:
 1. As in independent tool (UI + CLI)
 2. Or as a [Rozenite](_rozenite/README.md) plugin (see: [_rozenite/README.md](_rozenite/README.md))
 
+
+> 🚀 If you've migrated to [Re.Pack](https://re-pack.dev/), you can still use this package to analyze 📊 JS bundles 📦 generated by Re.Pack.
+>
+> 💡 Learn more: 📖 [Re.Pack.md](./Re.Pack.md)
+
 #### 1. Install (independent tool)
 
 ```bash
@@ -60,7 +67,7 @@ See: [_rozenite/README.md](_rozenite/README.md)
 
 ### 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:
+For 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 \

package/lib/build.js

@@ -3,6 +3,7 @@ const path = require("path");
 const chalk = require("chalk");
 const { build } = require("@discoveryjs/cli");
 const config = require("../.discoveryrc.js");
+const { isRsdoctorReportPath } = require("./isRsdoctorReport.js");
 
 function buildHtmlPage(filePath, output, clean, singleFile, verbose) {
   if (verbose) {
@@ -46,13 +47,20 @@ function buildHtmlPage(filePath, output, clean, singleFile, verbose) {
       `Creating temporary config file at: ${chalk.green(configFile)}, for discovery.js`,
     );
   }
+  const transformRcdoctor = require.resolve("./rsdoctor.js");
   fs.writeFileSync(
     configFile,
-    `module.exports = ${JSON.stringify(
+    `const {transformRSDoctorData} = require("${transformRcdoctor}");
+module.exports = ${JSON.stringify(
       { ...config, data: "<tmp>" },
       null,
       1,
-    ).replace(`"<tmp>"`, `() => require("${fullJsonPath}")`)};`,
+    ).replace(
+      `"<tmp>"`,
+      isRsdoctorReportPath(fullJsonPath)
+        ? `() => transformRSDoctorData(require("${fullJsonPath}"))`
+        : `() => require("${fullJsonPath}")`,
+    )};`,
   );
 
   if (verbose) {

package/lib/isRsdoctorReport.js

@@ -0,0 +1,33 @@
+const chalk = require("chalk");
+
+const isRsdoctorReportPath = (reportPath) => {
+  try {
+    const reportJson = require(reportPath);
+    return isRsdoctorReport(reportJson, reportPath);
+  } catch {
+    return false;
+  }
+};
+
+const isRsdoctorReport = (reportJson, reportPath, noLogs) => {
+  try {
+    if (
+      Array.isArray(reportJson?.data?.moduleGraph?.modules) ||
+      Array.isArray(reportJson?.data?.packageGraph?.packages)
+    ) {
+      !noLogs &&
+        console.info(
+          `Detected ${chalk.red("rsdoctor")} format in the input file: ${chalk.green(reportPath)}`,
+        );
+      return true;
+    }
+    return false;
+  } catch {
+    return false;
+  }
+};
+
+module.exports = {
+  isRsdoctorReport,
+  isRsdoctorReportPath,
+};

package/lib/rsdoctor.js

@@ -0,0 +1,149 @@
+const { resolve } = require("path");
+
+const possibleEntryFiles = [
+  "index.js",
+  "index.jsx",
+  "index.ts",
+  "index.tsx",
+  "index.mjs",
+  "index.cjs",
+];
+
+const doStructureCheck = (rsdoctorData) => {
+  if (!(
+    Array.isArray(rsdoctorData?.data?.configs) &&
+    rsdoctorData.data.configs.length === 1
+  )) {
+    throw new Error(
+      `Unexpected number of "data.configs[]" in rsdoctor-data.json. Work only with single config. Found: ${rsdoctorData?.data?.configs?.length}`,
+    );
+  }
+
+  if (!Array.isArray(rsdoctorData?.data?.packageGraph?.packages)) {
+    throw new Error(
+      `Unexpected "data.packageGraph.packages[]" in rsdoctor-data.json. Expected array. Found: ${typeof rsdoctorData?.data?.packageGraph?.packages}`,
+    );
+  }
+
+  const firstConfig = rsdoctorData.data.configs[0];
+
+  if (!(firstConfig.name === "rspack" || firstConfig.name === "webpack")) {
+    throw new Error(
+      `Unsupported bundler: ${firstConfig.name}@${firstConfig.version}. Only 'rspack' and 'webpack' are supported.`,
+    );
+  }
+};
+
+const getDependenciesMap = (rsdoctorData) => {
+  const depsMap = new Map(
+    rsdoctorData.data.moduleGraph.dependencies.map((dep) => [dep.id, dep]),
+  );
+  return depsMap;
+};
+
+const getEntryFile = (rsdoctorData) => {
+  const firstConfig = rsdoctorData?.data?.configs?.[0];
+  const entry = firstConfig?.config?.entry;
+  const entryFile =
+    typeof entry?.main === "string"
+      ? entry.main
+      : typeof entry?.main?.import === "string"
+        ? entry.main.import
+        : entry?.main.import[0];
+
+  if (entryFile) {
+    return resolve(firstConfig.root, entryFile);
+  }
+
+  const pathsToCheck = possibleEntryFiles.map((f) =>
+    resolve(firstConfig.root, f),
+  );
+  const indexFile = rsdoctorData.data.moduleGraph.modules.find((mdl) =>
+    pathsToCheck.some((entry) => mdl.path === entry),
+  );
+
+  if (indexFile && indexFile.imported?.length === 0) {
+    return indexFile.path;
+  }
+
+  return `${firstConfig.root}/index.js`;
+};
+
+const transformRSDoctorData = (rsdoctorData) => {
+  doStructureCheck(rsdoctorData);
+  const tmpDependenciesMap = getDependenciesMap(rsdoctorData);
+  const firstConfig = rsdoctorData.data.configs[0];
+  return {
+    date: Date.now(), // no info in rspack report
+    entryPoint: getEntryFile(rsdoctorData),
+    rootFolder: firstConfig.root,
+    // envs: {},
+    transformOptions: {
+      // customTransformOptions: {},
+      dev: firstConfig.config.mode !== "production",
+      minify: firstConfig.config.optimization?.minimize ?? false,
+      platform: firstConfig.config.name ?? "ios",
+      // type: "module",
+      // unstable_transformProfile: "default",
+    },
+    // Example of package:
+    // {
+    //   name: "@react-native/js-polyfills",
+    //   absolutePath:
+    //     "/Users/xd/tmp/RN84/node_modules/@react-native/js-polyfills",
+    //   version: "0.84.1",
+    // }
+    packages: rsdoctorData.data.packageGraph.packages.map((pkg) => ({
+      name: pkg.name,
+      absolutePath: pkg.root,
+      version: pkg.version,
+      source: { sizeInBytes: pkg.size?.sourceSize ?? 1 },
+      output: { sizeInBytes: pkg.size?.parsedSize ?? 1 },
+    })),
+    // Example of module:
+    // {
+    //   "path": "/Users/xd/tmp/RN84/node_modules/react-native/Libraries/BatchedBridge/BatchedBridge.js",
+    //   "source": {
+    //     "code": "",
+    //     "lineCount": 32,
+    //     "sizeInBytes": 954
+    //   },
+    //   "output": {
+    //     "code": "",
+    //     "lineCount": 1,
+    //     "sizeInBytes": 219
+    //   },
+    //   "dependencies": [
+    //     {
+    //       "absolutePath": "/Users/xd/tmp/RN84/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js",
+    //       "name": "./MessageQueue"
+    //     }
+    //   ]
+    // },
+    modules: rsdoctorData.data.moduleGraph.modules.map((mdl) => ({
+      path: mdl.path,
+      source: {
+        code: "", // no code in rspack report
+        lineCount: 0, // no code to count lines in rspack report
+        sizeInBytes: mdl.size?.sourceSize ?? 0,
+      },
+      output: {
+        code: "",
+        lineCount: 0,
+        sizeInBytes: mdl.size?.parsedSize ?? 0,
+      },
+      dependencies: mdl.dependencies
+        .map((depNumId) => {
+          const dep = tmpDependenciesMap.get(depNumId);
+          return dep
+            ? { absolutePath: dep.resolvedRequest, name: dep.request }
+            : null;
+        })
+        .filter((e) => e !== null),
+    })),
+  };
+};
+
+module.exports = {
+  transformRSDoctorData,
+};

package/lib/server.js

@@ -4,6 +4,7 @@ const chalk = require("chalk");
 const { createServer } = require("@discoveryjs/cli");
 const { silent } = require("@discoveryjs/cli/lib/shared/utils.js");
 const config = require("../.discoveryrc.js");
+const { isRsdoctorReportPath } = require("./isRsdoctorReport.js");
 
 function serve(filePath, port, verbose) {
   const PORT = process.env.PORT || port;
@@ -45,13 +46,20 @@ function serve(filePath, port, verbose) {
       `Creating temporary config file at: ${chalk.green(configFile)}, for discovery.js`,
     );
   }
+  const transformRcdoctor = require.resolve("./rsdoctor.js");
   fs.writeFileSync(
     configFile,
-    `module.exports = ${JSON.stringify(
+    `const {transformRSDoctorData} = require("${transformRcdoctor}");
+module.exports = ${JSON.stringify(
       { ...config, data: "<tmp>" },
       null,
       1,
-    ).replace(`"<tmp>"`, `() => require("${fullJsonPath}")`)};`,
+    ).replace(
+      `"<tmp>"`,
+      isRsdoctorReportPath(fullJsonPath)
+        ? `() => transformRSDoctorData(require("${fullJsonPath}"))`
+        : `() => require("${fullJsonPath}")`,
+    )};`,
   );
 
   if (verbose) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-discovery-ui",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "main": "lib/bin.js",
   "bin": "lib/bin.js",
   "repository": "git@github.com:retyui/react-native-bundle-discovery.git",
@@ -38,5 +38,9 @@
     "queryHelpers.js",
     ".discoveryrc.js"
   ],
-  "packageManager": "yarn@4.18.0"
+  "packageManager": "yarn@4.18.0",
+  "devDependencies": {
+    "acorn": "^8.18.0",
+    "acorn-walk": "^8.3.5"
+  }
 }

package/queryHelpers.js

@@ -17,6 +17,9 @@ const helpers = {
       .then((formatted) => {
         helpers.prettifyMap.set(sourceStr, formatted);
         return formatted;
+      })
+      .catch(() => {
+        return sourceStr;
       });
   },
   askChatGPTAboutPackages() {