react-native-bundle-discovery-ui 2.1.0-rc.2 → 2.2.0

package/README.md

@@ -3,13 +3,11 @@
 [![react-native-bundle-discovery on npm](https://badgen.net/npm/v/react-native-bundle-discovery)](https://www.npmjs.com/package/react-native-bundle-discovery)
 [![react-native-bundle-discovery downloads](https://badgen.net/npm/dm/react-native-bundle-discovery)](https://www.npmtrends.com/react-native-bundle-discovery)
 
-
 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" />
 
-
 ### Packages:
 
 - `react-native-bundle-discovery` - simple JS library to generate a JSON report of the bundle.
@@ -21,7 +19,7 @@ With this tool, you can easily explore your app's codebase, identify large or he
 
 There are two ways to install the package:
 
-1. As in independent tool (UI + CLI) 
+1. As in independent tool (UI + CLI)
 2. Or as a [Rozenite](_rozenite/README.md) plugin (see: [_rozenite/README.md](_rozenite/README.md))
 
 #### 1. Install (independent tool)
@@ -99,20 +97,6 @@ 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-data.json --format rsdoctor
-```
-
-
 ---
 
 ### `react-native-bundle-discovery` JS API
@@ -126,8 +110,6 @@ npx react-native-bundle-discovery-ui rsdoctor-data.json --format rsdoctor
 | 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.                                                                        |
 
-
-
 **⚠️ Be cautious sharing reports with `includeCode` enabled**
 
 Enabling this option significantly increases report size and **embeds the source code** of your assets.
@@ -138,22 +120,19 @@ If your code is proprietary 🔒, share these reports responsibly 🤝!
 
 ### `createResolveRequest(options: ResolveRequestOptions)`
 
-| Prop                   | Default value             | Description                   |
-| ---------------------- | ------------------------- | ----------------------------- |
-| removePromisePolyfill: boolean | `false` | Remove the Promise polyfill as Hermes provide own impl. (issue: [#57702](https://github.com/react/react-native/issues/57702)) |
-| removeOldRenderer: boolean     | `false` | Whether to remove the old renderer. Set to `true` when New Arch is enabled    |
-| 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.     |
+| Prop                           | Default value | Description                                                                                                                   |
+| ------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| removePromisePolyfill: boolean | `false`       | Remove the Promise polyfill as Hermes provide own impl. (issue: [#57702](https://github.com/react/react-native/issues/57702)) |
+| removeUTFSequence: boolean     | `false`       | Remove useless undocumented RN module.                                                                                        |
 
 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 {createResolveRequest} = require('react-native-bundle-discovery');
+const { createResolveRequest } = require("react-native-bundle-discovery");
 const resolveRequest = createResolveRequest({
   removePromisePolyfill: true,
-  removeOldRenderer: true,
   removeUTFSequence: true,
 });
 const config = {

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] [--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 <file> [port] [--verbose] # <- server can be omitted
+  react-native-bundle-discovery-ui server <file> [port] [--verbose]
 
-  react-native-bundle-discovery-ui build <file> [--output <path>] [--clean] [--single-file] [--format <rsdoctor|metro>] [--verbose]
+  react-native-bundle-discovery-ui build <file> [--output <path>] [--clean] [--single-file] [--verbose]
 
 Commands:
   server <file> [port]  Run a web server to show a Metro bundler stat report
@@ -19,7 +19,6 @@ 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
 `);
@@ -38,24 +37,16 @@ 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", "format"],
+  string: ["output"],
   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";
@@ -81,7 +72,7 @@ if (isServerCommand || isImplicitServerCommand) {
   }
 
   const { serve } = require("./server.js");
-  return serve(file, port, format, Boolean(argv.verbose));
+  return serve(file, port, Boolean(argv.verbose));
 }
 
 if (isBuildCommand) {
@@ -96,7 +87,6 @@ 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, format, verbose) {
+function buildHtmlPage(filePath, output, clean, singleFile, verbose) {
   if (verbose) {
     console.info(
       `Building HTML page from file: ${chalk.green(filePath)} options: ${JSON.stringify(
@@ -46,20 +46,13 @@ function buildHtmlPage(filePath, output, clean, singleFile, format, verbose) {
       `Creating temporary config file at: ${chalk.green(configFile)}, for discovery.js`,
     );
   }
-  const transformRcdoctor = require.resolve("./rsdoctor.js");
   fs.writeFileSync(
     configFile,
-    `const {transformRSDoctorData} = require("${transformRcdoctor}");
-module.exports = ${JSON.stringify(
+    `module.exports = ${JSON.stringify(
       { ...config, data: "<tmp>" },
       null,
       1,
-    ).replace(
-      `"<tmp>"`,
-      format === "rsdoctor"
-        ? `() => transformRSDoctorData(require("${fullJsonPath}"))`
-        : `() => require("${fullJsonPath}")`,
-    )};`,
+    ).replace(`"<tmp>"`, `() => require("${fullJsonPath}")`)};`,
   );
 
   if (verbose) {

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, format, verbose) {
+function serve(filePath, port, verbose) {
   const PORT = process.env.PORT || port;
 
   if (verbose) {
@@ -45,21 +45,13 @@ function serve(filePath, port, format, verbose) {
       `Creating temporary config file at: ${chalk.green(configFile)}, for discovery.js`,
     );
   }
-  const transformRcdoctor = require.resolve("./rsdoctor.js");
   fs.writeFileSync(
     configFile,
-    `const {transformRSDoctorData} = require("${transformRcdoctor}");
-module.exports = ${JSON.stringify(
+    `module.exports = ${JSON.stringify(
       { ...config, data: "<tmp>" },
       null,
       1,
-    ).replace(
-      `"<tmp>"`,
-
-      format === "rsdoctor"
-        ? `() => transformRSDoctorData(require("${fullJsonPath}"))`
-        : `() => require("${fullJsonPath}")`,
-    )};`,
+    ).replace(`"<tmp>"`, `() => require("${fullJsonPath}")`)};`,
   );
 
   if (verbose) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-discovery-ui",
-  "version": "2.1.0-rc.2",
+  "version": "2.2.0",
   "main": "lib/bin.js",
   "bin": "lib/bin.js",
   "repository": "git@github.com:retyui/react-native-bundle-discovery.git",

package/lib/rsdoctor.js

@@ -1,149 +0,0 @@
-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' 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,
-};