react-native-bundle-discovery 1.1.0 → 1.2.1

package/README.md

@@ -9,7 +9,7 @@ With this tool, you can easily explore your app's codebase, identify large or he
 ### 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` modules in your production JS bundle (it's a dead code that should not be there).
+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.
@@ -18,13 +18,18 @@ With this tool, you can easily explore your app's codebase, identify large or he
 
 ### Setup:
 
-#### 1. Install
+There are two ways to install the package:
+
+1. As in independent tool 
+2. Or as a [Rozenite](https://www.rozenite.dev/) plugin (see below).
+
+#### 1. Install (independent tool)
 
 ```bash
 yarn add -D react-native-bundle-discovery
 ```
 
-#### 2. Add to your metro.config.js
+Add to your `metro.config.js`:
 
 ```diff
 // metro.config.js
@@ -48,6 +53,46 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 module.exports = mergeConfig(getDefaultConfig(__dirname), config);
 ```
 
+---
+
+#### 2. Install as a Rozenite plugin (OPTIONAL)
+
+
+```bash
+yarn dlx rozenite@latest init # init rozenite in your project (from: https://www.rozenite.dev/docs/getting-started)
+yarn add -D react-native-bundle-discovery-rozenite-plugin # add the plugin to your project
+```
+
+Then in the `metro.config.js` file add the following:
+
+```diff
+const { withRozenite } = require('@rozenite/metro');
++const { withRozeniteBundleDiscoveryPlugin } = require('react-native-bundle-discovery-rozenite-plugin');
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+/**
+ * Metro configuration
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('@react-native/metro-config').MetroConfig}
+ */
+const config = {};
+
+module.exports = withRozenite(
+  mergeConfig(getDefaultConfig(__dirname), config),
+  {
++    enhanceMetroConfig: config => withRozeniteBundleDiscoveryPlugin(config, { /* Your Bundle Discovery Options */ }),
+    enabled: true,
+  },
+);
+```
+
+Now you can run `yarn start` and open [React Native DevTools](https://reactnative.dev/docs/react-native-devtools)
+
+
+---
+
+
 #### 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:
@@ -61,14 +106,25 @@ npx react-native bundle \
   --assets-dest ios/assets
 ```
 
-#### 4. View the report
+#### 4. CLI
+
+##### 4.1 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.2 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)`
@@ -93,7 +149,7 @@ Become a financial contributor at [OpenCollective](https://opencollective.com/re
 - https://github.com/callstack/react-native-bundle-visualizer
 - https://github.com/webpack-contrib/webpack-bundle-analyzer
 - https://github.com/statoscope/statoscope
-- https://github.com/relative-ci/bundle-stats/tree/master/packages/cli
+- [https://github.com/relative-ci/bundle-stats/tree/master/packages/cli](https://github.com/relative-ci/bundle-stats/tree/master/packages/cli#readme)
 
 **Built using [Discovery.js](https://github.com/discoveryjs/discovery):**
 

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/dtv-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: true,
+        });
+    },
+    (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,115 @@
+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)}\n\n`);
+    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",
+    mode: "single",
+    // models: [ [Object] ],
+    colorScheme: "auto",
+    download: true,
+    upload: false,
+    embed: false,
+    encodings: false,
+  };
+  const _options = {
+    singleFile,
+    clean,
+    output,
+    //
+    cache: true,
+    cachedir: path.resolve(__dirname, "./.discoveryjs-cache"),
+    checkCacheTtl: false,
+    minify: true,
+    dataCompression: true,
+    sourcemap: false,
+    embed: "by-config",
+    experimentalJsonxl: false,
+    scriptFormat: "esm",
+    scriptExternal: [],
+    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(`========================================`);
+    console.log(
+      `✅ HTML page built successfully at: ${chalk.green(
+        path.resolve(output, "index.html").replace(process.cwd() + "/", ""),
+      )}`,
+    );
+    console.log(`========================================`);
+  });
+}
+
+module.exports = {
+  buildHtmlPage,
+};

package/lib/customSerializer.js

@@ -94,6 +94,7 @@ function createJsonReport({
   includeCode,
   outputJsonPath,
   rootFolder,
+  silent,
 }) {
   const dependencies = Array.from(graph.dependencies.values());
 
@@ -114,9 +115,11 @@ function createJsonReport({
 
   writeFileSync(outputJsonPath, JSON.stringify(stats));
 
-  console.log(
-    `${chalk.yellow(`[${NAME}]`)}: Saved stats to ${chalk.green(outputJsonPath)}`,
-  );
+  if (!silent) {
+    console.log(
+      `${chalk.yellow(`[${NAME}]`)}: Saved stats to ${chalk.green(outputJsonPath)}`,
+    );
+  }
 }
 
 /**
@@ -137,6 +140,7 @@ function createSerializer({
   projectRoot,
   outputJsonPath,
   includeCode = true,
+  silent = false,
   includeEnvs = [],
 } = {}) {
   const mySerializer = serializer || getDefaultSerializer();
@@ -159,6 +163,7 @@ function createSerializer({
       includeCode,
       outputJsonPath: myOutputJsonPath,
       rootFolder: projectRoot,
+      silent,
     });
 
     return code;

package/lib/server.js

@@ -0,0 +1,81 @@
+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)}\n\n`);
+    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(`========================================`);
+      console.log(
+        `🚀 Server listen on ${chalk.green.underline(
+          chalk.green(`http://localhost:${PORT}`),
+        )}`,
+      );
+      console.log(`========================================`);
+    }),
+  );
+}
+
+module.exports = {
+  serve,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-discovery",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "main": "index.js",
   "bin": "lib/bin.js",
   "repository": "git@github.com:retyui/react-native-bundle-discovery.git",
@@ -17,7 +17,8 @@
     "@discoveryjs/discovery": "1.0.0-beta.93",
     "chalk": "^4.1.2",
     "highcharts": "12.2.0",
-    "prettier": "^3.5.3"
+    "prettier": "^3.5.3",
+    "yargs": "^17.7.2"
   },
   "peerDependencies": {
     "metro": "*"

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/views/global.css

@@ -162,3 +162,8 @@ hr{
     margin-top: 12px;
     height: 35px;
 }
+.bundlejs-badge-img{
+    line-height: 0;
+    margin-bottom: -5px;
+    margin-left: 10px;
+}