react-native-bundle-discovery 1.0.0 → 1.1.0-rc.14

package/.discoveryrc.js

@@ -2,7 +2,7 @@ const path = require("path");
 
 module.exports = {
   name: "react-native-bundle-discovery",
-  data: () => require("./tmp/before_metro-stats.json"),
+  data: () => require("./tmp/rainbow-metro-stats.json"),
   setup: path.resolve(__dirname, "setup.js"),
   view: {
     assets: [
@@ -14,6 +14,7 @@ module.exports = {
       path.resolve(__dirname, "pages/package.js"),
       // Custom views
       path.resolve(__dirname, "views/highcharts.css"),
+      path.resolve(__dirname, "views/prettify.js"),
       path.resolve(__dirname, "views/highcharts.js"),
       path.resolve(__dirname, "views/foamtree.js"),
     ],

package/README.md

@@ -1,17 +1,25 @@
 # react-native-bundle-discovery
 
-> [!WARNING]
-> Currently, everything is in a very early stage. The project is not yet ready for use.
-
-
 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" />
 
+
+### What you should consider when analyzing your bundle
+
+1. if you use **React 19** then it's time to remove a `prop-types` package from your bundle.
+2. Search for `development|debug|dev|storybook` modules in your production JS bundle (it's a dead code that should not be there).
+3. Also check polyfills duplicates (search example:  `url|fetch|crypto|buffer|base-?64`).
+4. Verify that you don't have any similar packages in your bundle (search example: `object|just-|debounce|ramda|lodash|underscore`). I often see that devs use both `lodash/debounce`, `lodash.debounce` and `debounce` in their projects. Or mix `ramda`, `underscore` and `lodash`._
+5. Try to find `package.json$` files in your bundle. They are often used to get only the package `version/name` but all other fields are not needed in the bundle.
+6. Please provide your ideas soo other devs can benefit from them :)
+
+
 ### Setup:
 
 #### 1. Install
+
 ```bash
 yarn add -D react-native-bundle-discovery
 ```
@@ -23,9 +31,9 @@ yarn add -D react-native-bundle-discovery
 const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 +const {createSerializer} = require('react-native-bundle-discovery');
 
-+const mySerializer = createSerializer({  
++const mySerializer = createSerializer({
 +  includeCode: true, // Useful if you want to compare source/bundle code (but a report file will be larger)
-+  projectRoot: __dirname, 
++  projectRoot: __dirname,
 +   //^^^ ⚠️ WARNING: In a monorepo setup, this should point to the monorepo root,
 +   //                not the individual package directory.
 +});
@@ -53,16 +61,40 @@ npx react-native bundle \
   --assets-dest ios/assets
 ```
 
-#### 4. View the report
+#### 4. View the report in the browser
 
 Run webserver to view the report:
 
 ```bash
-npx react-native-bundle-discovery metro-stats.json
+npx react-native-bundle-discovery server metro-stats.json [--port <port>]
+```
+
+#### 4. Build the HTML report
+
+Run the following command to generate an HTML report from the JSON file:
+
+```bash
+npx react-native-bundle-discovery build metro-stats.json
 ```
 
+
 ---
 
+### `createSerializer(optiosn: Options)`
+
+| Prop                   | Default value             | Description                                                                                                                              |
+| ---------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| serializer: Function   | Default serializer        | A custom serializer function. If not provided, a default serializer is used.                                                             |
+| projectRoot: string    | Required                  | The root directory of the project. ⚠️ In a monorepo setup, this should point to the monorepo root, not the individual package directory. |
+| 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.                                                                        |
+
+### Financial Contributors
+
+Become a financial contributor at [OpenCollective](https://opencollective.com/react-native-bundle-discovery) or [GitHub Sponsors](https://github.com/sponsors/retyui)
+
+### Other
+
 **Similar projects:**
 
 - https://github.com/expo/atlas
@@ -72,8 +104,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](https://github.com/discoveryjs/discovery):**
 
-**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/.tmp.js

@@ -0,0 +1,17 @@
+module.exports = {
+ "name": "react-native-bundle-discovery",
+ "data": () => require("/Users/davyd.narbutovich/open-source/bundle-discovery/tmp/rocket-chat-metro-stats.json"),
+ "setup": "/Users/davyd.narbutovich/open-source/bundle-discovery/setup.js",
+ "view": {
+  "assets": [
+   "/Users/davyd.narbutovich/open-source/bundle-discovery/views/global.css",
+   "/Users/davyd.narbutovich/open-source/bundle-discovery/pages/default.js",
+   "/Users/davyd.narbutovich/open-source/bundle-discovery/pages/module.js",
+   "/Users/davyd.narbutovich/open-source/bundle-discovery/pages/package.js",
+   "/Users/davyd.narbutovich/open-source/bundle-discovery/views/highcharts.css",
+   "/Users/davyd.narbutovich/open-source/bundle-discovery/views/prettify.js",
+   "/Users/davyd.narbutovich/open-source/bundle-discovery/views/highcharts.js",
+   "/Users/davyd.narbutovich/open-source/bundle-discovery/views/foamtree.js"
+  ]
+ }
+};

package/lib/bin.js

@@ -1,52 +1,74 @@
 #!/usr/bin/env node
-const fs = require("fs");
-const path = require("path");
-const chalk = require("chalk");
-const { createServer } = require("@discoveryjs/cli");
-const config = require("../.discoveryrc.js");
+const yargs = require("yargs");
+const { hideBin } = require("yargs/helpers");
 
-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.`,
-  );
-  process.exit(1);
-}
-
-const jsonFilePath = path.resolve(process.cwd(), filePath);
-
-let fullJsonPath;
-
-try {
-  fullJsonPath = require.resolve(jsonFilePath);
-} catch (err) {
-  console.error(`Error loading file: ${chalk.red(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}`)}`),
-  ),
-);
+yargs(hideBin(process.argv))
+  .command(
+    "server <file> [port]",
+    "🚀 Run a web server to show a Metro bundler stat report",
+    (yargs) => {
+      return yargs
+        .positional("file", {
+          describe: "Path to the Metro bundler report json file",
+          type: "string",
+          demandOption: true,
+        })
+        .positional("port", {
+          describe:
+            "🔌 Port to start the server on (also can be set with PORT env. var.)",
+          type: "number",
+          default: 8079,
+        });
+    },
+    (argv) => {
+      const { serve } = require("./server.js");
+      serve(argv.file, argv.port, argv.verbose);
+    },
+  )
+  .command(
+    "build <file>",
+    "📦 Build a HTML report from the Metro bundler stat file",
+    (yargs) => {
+      return yargs
+        .positional("file", {
+          describe: "Path to the Metro bundler report json file",
+          type: "string",
+          demandOption: true,
+        })
+        .option("output", {
+          alias: "o",
+          describe: "Path for a build result",
+          type: "string",
+          default: ".bundle-discovery",
+        })
+        .option("clean", {
+          alias: "c",
+          describe: "Clean the output directory before emit a build files",
+          type: "boolean",
+          default: true,
+        })
+        .option("single-file", {
+          alias: "s",
+          describe: "Output a report build as a single HTML file",
+          type: "boolean",
+          default: false,
+        });
+    },
+    (argv) => {
+      const { buildHtmlPage } = require("./build.js");
+      buildHtmlPage(
+        argv.file,
+        argv.output,
+        argv.clean,
+        argv.singleFile,
+        argv.verbose,
+      );
+    },
+  )
+  .option("verbose", {
+    alias: "v",
+    type: "boolean",
+    description: "Run with verbose logging",
+  })
+  .help()
+  .parse();

package/lib/build.js

@@ -0,0 +1,130 @@
+const fs = require("fs");
+const path = require("path");
+const chalk = require("chalk");
+const { build } = require("@discoveryjs/cli");
+const config = require("../.discoveryrc.js");
+
+function buildHtmlPage(filePath, output, clean, singleFile, verbose) {
+  if (verbose) {
+    console.info(
+      `Building HTML page from file: ${chalk.green(filePath)} options: ${JSON.stringify(
+        { output, clean, singleFile },
+        null,
+        2,
+      )}`,
+    );
+  }
+
+  if (!filePath) {
+    console.error(
+      `Usage: '${chalk.green("npx react-native-bundle-discovery build <path-to-file>")}', Please provide a path to a JSON file.`,
+    );
+    process.exit(1);
+  }
+
+  const jsonFilePath = path.resolve(process.cwd(), filePath);
+  if (verbose) {
+    console.info(
+      `Loading JSON file from: ${chalk.green(jsonFilePath)}, base directory: ${chalk.green(process.cwd())}`,
+    );
+  }
+
+  let fullJsonPath;
+
+  try {
+    fullJsonPath = require.resolve(jsonFilePath);
+  } catch (err) {
+    console.error(`Error loading file: ${chalk.red(jsonFilePath)}`);
+    console.error(err.message);
+    process.exit(1);
+  }
+
+  const configFile = path.resolve(__dirname, "./.tmp.js");
+
+  if (verbose) {
+    console.info(
+      `Creating temporary config file at: ${chalk.green(configFile)}, for discovery.js`,
+    );
+  }
+  fs.writeFileSync(
+    configFile,
+    `module.exports = ${JSON.stringify(
+      { ...config, data: "<tmp>" },
+      null,
+      1,
+    ).replace(`"<tmp>"`, `() => require("${fullJsonPath}")`)};`,
+  );
+
+  if (verbose) {
+    console.info(`Building HTML page with options:`, {
+      output,
+      clean,
+      singleFile,
+    });
+  }
+
+  const _config = {
+    name: "Bundle Discovery",
+    // version: null,
+    // description: null,
+    mode: "single",
+    // models: [ [Object] ],
+    colorScheme: "auto",
+    download: true,
+    upload: false,
+    embed: false,
+    encodings: false,
+    // view: {
+    //   inspector: true,
+    //   router: true,
+    //   noscript: null,
+    //   serveOnlyAssets: [],
+    //   // assets: [],
+    //   bundles: null,
+    //   // warnings: []
+    // },
+    // favicon: '/Users/davyd.narbutovich/open-source/bb-recap/node_modules/@discoveryjs/discovery/lib/favicon.png',
+    // icon: '/Users/davyd.narbutovich/open-source/bb-recap/node_modules/@discoveryjs/discovery/lib/logo.svg',
+    // routers: []
+  };
+  const _options = {
+    singleFile,
+    clean,
+    output,
+    //
+    cache: true,
+    // cachedir: '/Users/davyd.narbutovich/open-source/bb-recap/.discoveryjs-cache',
+    checkCacheTtl: false,
+    minify: true,
+    dataCompression: true,
+    sourcemap: false,
+    embed: "by-config",
+    experimentalJsonxl: false,
+    // output: '/Users/davyd.narbutovich/open-source/bb-recap/build',
+    scriptFormat: "esm",
+    scriptExternal: [],
+    // singleFile: true,
+    // clean: false,
+    data: true,
+    excludeModelOnDataFail: false,
+    prettyData: false,
+    modelDownload: false,
+    modelDataUpload: true,
+    modelResetCache: false,
+    serveOnlyAssets: true,
+    dev: true,
+    config: configFile,
+    configFile: configFile,
+  };
+  build(_options, _config, configFile).then((result) => {
+    console.log(
+      `✅ HTML page built successfully at: ${chalk.green(
+        path.resolve(output, "index.html").replace(process.cwd() + "/", ""),
+      )}`,
+    );
+  });
+}
+
+module.exports = {
+  buildHtmlPage,
+};

package/lib/customSerializer.js

@@ -106,7 +106,7 @@ function createJsonReport({
       return acc;
     }, {}),
     rootFolder,
-    packages: toPackages(dependencies),
+    packages: toPackages(preModules).concat(toPackages(dependencies)),
     modules: preModules
       .map((m) => toModuleStruct(m, includeCode))
       .concat(dependencies.map((m) => toModuleStruct(m, includeCode))),

package/lib/server.js

@@ -0,0 +1,77 @@
+const fs = require("fs");
+const path = require("path");
+const chalk = require("chalk");
+const { createServer } = require("@discoveryjs/cli");
+const config = require("../.discoveryrc.js");
+
+function serve(filePath, port, verbose) {
+  const PORT = process.env.PORT || port;
+
+  if (verbose) {
+    console.info(
+      `start server with file: ${filePath} on port: ${port} ${process.env.PORT ? `(${chalk.yellow("PORT")} env)` : ""}`,
+    );
+  }
+
+  if (!filePath) {
+    console.error(
+      `Usage: '${chalk.green("npx react-native-bundle-discovery server <path-to-file>")}', Please provide a path to a JSON file.`,
+    );
+    process.exit(1);
+  }
+
+  const jsonFilePath = path.resolve(process.cwd(), filePath);
+  if (verbose) {
+    console.info(
+      `Loading JSON file from: ${chalk.green(jsonFilePath)}, base directory: ${chalk.green(process.cwd())}`,
+    );
+  }
+
+  let fullJsonPath;
+
+  try {
+    fullJsonPath = require.resolve(jsonFilePath);
+  } catch (err) {
+    console.error(`❌ Error loading file: ${chalk.red(jsonFilePath)}`);
+    console.error(err.message);
+    process.exit(1);
+  }
+
+  const configFile = path.resolve(__dirname, "./.tmp.js");
+
+  if (verbose) {
+    console.info(
+      `Creating temporary config file at: ${chalk.green(configFile)}, for discovery.js`,
+    );
+  }
+  fs.writeFileSync(
+    configFile,
+    `module.exports = ${JSON.stringify(
+      { ...config, data: "<tmp>" },
+      null,
+      1,
+    ).replace(`"<tmp>"`, `() => require("${fullJsonPath}")`)};`,
+  );
+
+  if (verbose) {
+    console.info(`Running server with config: ${chalk.green(configFile)}`);
+  }
+
+  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}`)}`,
+      ),
+    ),
+  );
+}
+
+module.exports = {
+  serve,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-discovery",
-  "version": "1.0.0",
+  "version": "1.1.0-rc.14",
   "main": "index.js",
   "bin": "lib/bin.js",
   "repository": "git@github.com:retyui/react-native-bundle-discovery.git",
@@ -12,10 +12,13 @@
     "build": "npx discovery-build --config .discoveryrc.js --output build --serve-only-assets --single-file"
   },
   "dependencies": {
+    "@babel/parser": "^7.0.0",
     "@discoveryjs/cli": "2.14.2",
     "@discoveryjs/discovery": "1.0.0-beta.93",
     "chalk": "^4.1.2",
-    "highcharts": "12.2.0"
+    "highcharts": "12.2.0",
+    "prettier": "^3.5.3",
+    "yargs": "^17.7.2"
   },
   "peerDependencies": {
     "metro": "*"
@@ -35,8 +38,5 @@
     "prepare.js",
     "queryHelpers.js",
     ".discoveryrc.js"
-  ],
-  "devDependencies": {
-    "prettier": "3.5.3"
-  }
+  ]
 }

package/pages/_common.js

@@ -234,10 +234,11 @@ const metadata = {
 
 const externalLinkHtml = `<svg class="my-icon my-icon-link" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3"></path></svg>`;
 
-function getCopyToClipboardButton({ textToCopy, className }) {
+function getCopyToClipboardButton({ textToCopy, className, text }) {
   return {
     view: "button",
     className: `${className ?? ""} copy-to-clipboard`,
+    text,
     data: `{ textToCopy: ${textToCopy} }`,
     onClick(elm, data) {
       clearTimeout(elm.__timer);

package/pages/default.js

@@ -3,6 +3,7 @@ const {
   getModulesTree,
   getPackage,
   getPackageList,
+  getCopyToClipboardButton,
 } = require("./_common");
 
 const topMetaData = [
@@ -141,9 +142,25 @@ discovery.page.define("default", [
         {
           when: `#.id="${TABS.PACKAGES}"`,
           content: [
+            getCopyToClipboardButton({
+              text: "Copy list",
+              className: "copy-before-ask-chatgpt",
+              textToCopy: `"- " + modules.filter(=> path has "node_modules").group(=> path.getModulesName()).map(=> $.key).join("\\n- ")`,
+            }),
+            {
+              view: "link",
+              className: "ask-chatgpt view-button",
+              text: "and Ask ChatGPT",
+              external: true,
+              data: `{
+                  href: $.askChatGPTAboutPackages()
+                }`,
+            },
             {
               view: "content-filter",
+              //
               data: `${getPackage(`modules.filter(=> path has "node_modules")`)}.sort(pkgInstances desc, size desc)`,
+              className: "packages-content",
               name: "filterByPathStr",
               content: getPackageList({
                 showCopiesBadge: true,

package/pages/module.js

@@ -119,11 +119,29 @@ discovery.page.define("module", {
                     view: "block",
                     className: "width-50p",
                     content: [
-                      "h5: 'Output'",
                       {
-                        view: "source",
-                        syntax: "ts",
-                        source: "=$.currentModule.output.code",
+                        view: "h5",
+                        content: 'text:"Output"',
+                      },
+                      {
+                        view: "context",
+                        modifiers: [
+                          {
+                            view: "checkbox",
+                            name: "prettify",
+                            checked: true,
+                            className: "prettify-checkbox",
+                            content: 'text:"Prettify"',
+                          },
+                        ],
+                        content: [
+                          {
+                            view: "source-prettify",
+                            syntax: "ts",
+                            source:
+                              "=(#.prettify ? $.currentModule.output.code.prettifyJS() : $.currentModule.output.code)",
+                          },
+                        ],
                       },
                     ],
                   },

package/pages/package.js

@@ -98,6 +98,17 @@ discovery.page.define("package", {
             `html: '<span class="my-icon-inline my-icon-12">${externalLinkHtml}</span>'`,
           ],
         },
+        {
+          view: "link",
+          external: true,
+          data: `{ href: "https://bundlejs.com/?q=" + currentPkgWithUniqVer, q: currentPkgWithUniqVer }`,
+          content: [
+            {
+              view: "html",
+              data: `'<img class="bundlejs-badge-img" src="https://deno.bundlejs.com/?q=' + q + '&badge=detailed" />'`,
+            },
+          ],
+        },
       ],
     },
 

package/prepare.js

@@ -66,9 +66,6 @@ function prepare(data) {
       m.source.code = m.source.code
         .replaceAll(";", ";\n\n")
         .replaceAll(",", ",\n    ");
-      m.output.code = m.output.code
-        .replaceAll(";", ";\n\n")
-        .replaceAll(",", ",\n    ");
     }
   });
 

package/queryHelpers.js

@@ -1,4 +1,35 @@
 const helpers = {
+  prettifyMap: new Map(),
+  prettifyJS(sourceStr) {
+    if (helpers.prettifyMap.has(sourceStr)) {
+      return helpers.prettifyMap.get(sourceStr);
+    }
+
+    const prettier = require("prettier/standalone");
+    const prettierPluginBabel = require("prettier/plugins/babel");
+    const prettierPluginEstree = require("prettier/plugins/estree");
+
+    return prettier
+      .format(sourceStr, {
+        parser: "babel",
+        plugins: [prettierPluginBabel, prettierPluginEstree],
+      })
+      .then((formatted) => {
+        helpers.prettifyMap.set(sourceStr, formatted);
+        return formatted;
+      });
+  },
+  askChatGPTAboutPackages() {
+    const prompt = `I have a list of JavaScript packages from my React Native bundle (see below). I want to optimize bundle size by identifying similar or redundant packages — such as multiple versions of similar libraries (e.g., lodash, lodash-es, underscore, etc.), duplicate utilities, or overlapping functionality (e.g., date libraries like moment, dayjs, date-fns).
+
+Please do the following:
+
+1. Group similar or overlapping packages together.
+2. For each group, suggest which one to keep and which ones to consider removing.
+3. For each group, provide a regex string that can be used to filter those packages from the list (e.g., in grep, find, or search tools).
+4. Keep the output concise and copy-paste friendly.`;
+    return `https://chat.openai.com/?prompt=${encodeURIComponent(prompt)}`;
+  },
   plural(count, [singular, plural]) {
     return count === 1 ? singular : plural;
   },

package/views/global.css

@@ -125,3 +125,45 @@ hr{
     background: red;
     opacity: 1;
 }
+.prettify-checkbox{
+    position: absolute;
+    right: 31px;
+    margin-top: -26px;
+    z-index: 1;
+}
+.ask-chatgpt{
+    color: var(--discovery-view-button-color, #000);
+    text-decoration: none;
+    vertical-align: middle;
+    position: absolute;
+    z-index: 9;
+    margin-top: 12px;
+    margin-left: 105px !important;
+    height: 35px;
+}
+.ask-chatgpt::before {
+    content: '”';
+    font-size: 2em;
+    vertical-align: middle;
+    font-family: math;
+    margin-right: 0.2em;
+    display: inline-block;
+    height: 15px;
+}
+.packages-content>.view-input{
+    padding-left: 265px;
+}
+.copy-before-ask-chatgpt{
+    width: 95px;
+    background-position: left center;
+    padding-left: 25px;
+    position: absolute;
+    z-index: 9;
+    margin-top: 12px;
+    height: 35px;
+}
+.bundlejs-badge-img{
+    line-height: 0;
+    margin-bottom: -5px;
+    margin-left: 10px;
+}

package/views/prettify.js

@@ -0,0 +1,17 @@
+discovery.view.define(
+  "source-prettify",
+  async function renderPrettify(el, config, data, context) {
+    await this.render(
+      el,
+      this.composeConfig([
+        {
+          ...config,
+          source: await config.source,
+          view: "source",
+        },
+      ]),
+      data,
+      context,
+    );
+  },
+);