react-native-bundle-discovery-ui 2.0.0 → 2.1.0-rc.1

package/README.md

@@ -99,6 +99,20 @@ npx react-native-bundle-discovery-ui metro-stats.json [--port <port>]
 npx react-native-bundle-discovery-ui build metro-stats.json
 ```
 
+---
+
+
+### Re.Pack Support
+
+If you've migrated to [Re.Pack](https://re-pack.dev/docs/guides/bundle-analysis), you can still use this package to analyze bundles generated by Re.Pack.
+
+Learn more: [Rsdoctor.md](./Rsdoctor.md)
+
+```bash
+npx react-native-bundle-discovery-ui rsdoctor-report.json --format rsdoctor
+```
+
+
 ---
 
 ### `react-native-bundle-discovery` JS API
@@ -112,8 +126,7 @@ npx react-native-bundle-discovery-ui build metro-stats.json
 | outputJsonPath: string | `<root>/metro-stats.json` | The path where the JSON report will be saved. Defaults to `metro-stats.json` in project root.                                            |
 | includeCode: boolean   | `true`                    | Whether to include the source and output code in the JSON report.                                                                        |
 
-### `createProcessModuleFilter(options: ProcessModuleFilterOptions)`
-
+### `createResolveRequest(options: ResolveRequestOptions)`
 
 | Prop                   | Default value             | Description                   |
 | ---------------------- | ------------------------- | ----------------------------- |
@@ -122,20 +135,20 @@ npx react-native-bundle-discovery-ui build metro-stats.json
 | removeNewRenderer: boolean     | `false` | Whether to remove the new renderer. Set to `true` when New Arch is disabled    |
 | removeUTFSequence: boolean     | `false` | Remove useless undocumented RN module.     |
 
-
-Simple helper that devs can use to filter out unnecessary modules from the bundle report.
+Helper that creates a custom resolve request function to filter out unnecessary modules from the bundle.
 You can get recommendations during the analysis of the bundle report using the CLI tool.
 
 ```js
 // metro.config.js
-const {createProcessModuleFilter} = require('react-native-bundle-discovery');
+const {createResolveRequest} = require('react-native-bundle-discovery');
+const resolveRequest = createResolveRequest({
+  removePromisePolyfill: true,
+  removeOldRenderer: true,
+  removeUTFSequence: true,
+});
 const config = {
-  serializer: {
-    processModuleFilter: createProcessModuleFilter({
-      removePromisePolyfill: true,
-      removeOldRenderer: true,
-      removeUTFSequence: true,
-    }),
+  resolver: {
+    resolveRequest,
   },
 };
 ```

package/lib/bin.js

@@ -5,10 +5,10 @@ function printHelp() {
   console.log(`react-native-bundle-discovery-ui
 
 Usage:
-  react-native-bundle-discovery-ui <file> [port] [--verbose] # <- server can be omitted
-  react-native-bundle-discovery-ui server <file> [port] [--verbose]
+  react-native-bundle-discovery-ui <file> [port] [--format <rsdoctor|metro>] [--verbose] # <- server can be omitted
+  react-native-bundle-discovery-ui server <file> [port] [--format <rsdoctor|metro>] [--verbose]
 
-  react-native-bundle-discovery-ui build <file> [--output <path>] [--clean] [--single-file] [--verbose]
+  react-native-bundle-discovery-ui build <file> [--output <path>] [--clean] [--single-file] [--format <rsdoctor|metro>] [--verbose]
 
 Commands:
   server <file> [port]  Run a web server to show a Metro bundler stat report
@@ -19,6 +19,7 @@ Options:
   -o, --output <path>    Path for a build result (default: .bundle-discovery)
   -c, --clean            Clean output directory before writing build files (default: true)
   -s, --single-file      Output report build as a single HTML file (default: true)
+  -f, --format <name>    Report format: rsdoctor | metro (default: metro)
   -p, --port <port>      Port for server command (same as [port], default: 8079)
   -h, --help             Show help
 `);
@@ -37,16 +38,24 @@ const argv = minimist(process.argv.slice(2), {
     o: "output",
     c: "clean",
     s: "single-file",
+    f: "format",
     p: "port",
   },
   boolean: ["verbose", "help", "clean", "single-file"],
-  string: ["output"],
+  string: ["output", "format"],
   default: {
     clean: true,
     "single-file": true,
+    format: "metro",
   },
 });
 
+const SUPPORTED_FORMATS = new Set(["rsdoctor", "metro"]);
+const format = argv.format;
+if (!SUPPORTED_FORMATS.has(format)) {
+  fail(`Invalid format: ${format}. Supported formats: rsdoctor | metro`);
+}
+
 const command = argv._[0];
 const isServerCommand = command === "server";
 const isBuildCommand = command === "build";
@@ -72,7 +81,7 @@ if (isServerCommand || isImplicitServerCommand) {
   }
 
   const { serve } = require("./server.js");
-  return serve(file, port, Boolean(argv.verbose));
+  return serve(file, port, format, Boolean(argv.verbose));
 }
 
 if (isBuildCommand) {
@@ -87,6 +96,7 @@ if (isBuildCommand) {
     argv.output,
     argv.clean,
     argv["single-file"],
+    format,
     Boolean(argv.verbose),
   );
 }

package/lib/build.js

@@ -4,7 +4,7 @@ const chalk = require("chalk");
 const { build } = require("@discoveryjs/cli");
 const config = require("../.discoveryrc.js");
 
-function buildHtmlPage(filePath, output, clean, singleFile, verbose) {
+function buildHtmlPage(filePath, output, clean, singleFile, format, verbose) {
   if (verbose) {
     console.info(
       `Building HTML page from file: ${chalk.green(filePath)} options: ${JSON.stringify(
@@ -46,13 +46,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>"`,
+      format === "rsdoctor"
+        ? `() => transformRSDoctorData(require("${fullJsonPath}"))`
+        : `() => require("${fullJsonPath}")`,
+    )};`,
   );
 
   if (verbose) {

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") {
+    throw new Error(
+      `Unsupported bundler: ${firstConfig.name}@${firstConfig.version}. Only 'rspack' is 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

@@ -5,7 +5,7 @@ const { createServer } = require("@discoveryjs/cli");
 const { silent } = require("@discoveryjs/cli/lib/shared/utils.js");
 const config = require("../.discoveryrc.js");
 
-function serve(filePath, port, verbose) {
+function serve(filePath, port, format, verbose) {
   const PORT = process.env.PORT || port;
 
   if (verbose) {
@@ -45,13 +45,21 @@ 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>"`,
+
+      format === "rsdoctor"
+        ? `() => transformRSDoctorData(require("${fullJsonPath}"))`
+        : `() => require("${fullJsonPath}")`,
+    )};`,
   );
 
   if (verbose) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-bundle-discovery-ui",
-  "version": "2.0.0",
-  "main": "index.js",
+  "version": "2.1.0-rc.1",
+  "main": "lib/bin.js",
   "bin": "lib/bin.js",
   "repository": "git@github.com:retyui/react-native-bundle-discovery.git",
   "author": "David <4661784+retyui@users.noreply.github.com>",
@@ -29,6 +29,7 @@
   "files": [
     "vendors",
     "lib",
+    "!lib/.tmp.js",
     "views",
     "pages",
     "index.js",

package/queryHelpers.js

@@ -211,7 +211,7 @@ Please do the following:
         return nodeModulesGroup;
       }
       if (!nodeModulesGroup.groups) {
-        return nodeModulesGroup;
+        return sourceCodeGroup;
       }
 
       const topLevelNode = { groups: [sourceCodeGroup, nodeModulesGroup] };

package/index.js

@@ -1 +0,0 @@
-module.exports = require("./lib/customSerializer");