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

package/.discoveryrc.js

@@ -0,0 +1,22 @@
+const path = require("path");
+
+module.exports = {
+  name: "react-native-bundle-discovery",
+  data: () => require("./tmp/metro-stats.json"),
+  setup: path.resolve(__dirname, "setup.js"),
+  view: {
+    assets: [
+      // Global styles
+      path.resolve(__dirname, "views/global.css"),
+      // Pages
+      path.resolve(__dirname, "pages/default.js"),
+      path.resolve(__dirname, "pages/module.js"),
+      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

@@ -0,0 +1,161 @@
+# react-native-bundle-discovery
+
+[![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" />
+
+
+### 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:
+
+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 react-native-bundle-discovery-ui
+```
+
+Add to your `metro.config.js`:
+
+```diff
+// metro.config.js
+const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
++const {createSerializer} = require('react-native-bundle-discovery');
+
++const mySerializer = createSerializer({
++  includeCode: true, // Useful if you want to compare source/bundle code (but a report file will be larger)
++  projectRoot: __dirname,
++   //^^^ ⚠️ WARNING: In a monorepo setup, this should point to the monorepo root,
++   //                not the individual package directory.
++});
+
+-const config = {};
++const config = {
++  serializer: {
++    customSerializer: mySerializer
++  },
++};
+
+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:
+
+```bash
+npx react-native bundle \
+  --entry-file index.js \
+  --platform ios \
+  --dev false \
+  --bundle-output ios/main.jsbundle \
+  --assets-dest ios/assets
+```
+
+#### 4. CLI
+
+##### 4.1 View the report in the browser
+
+Run webserver to view the report:
+
+```bash
+npx react-native-bundle-discovery-ui 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-ui build metro-stats.json
+```
+
+
+---
+
+### `createSerializer(options: 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:**
+
+- [expo-atlas](https://github.com/expo/atlas) [![expo-atlas downloads](https://badgen.net/npm/dm/expo-atlas)](https://www.npmtrends.com/expo-atlas) [![expo-atlas install size](https://packagephobia.com/badge?p=expo-atlas)](https://packagephobia.com/result?p=expo-atlas)
+- [expo-atlas-without-expo](https://github.com/v3ron/expo-atlas-without-expo) [![expo-atlas-without-expo downloads](https://badgen.net/npm/dm/expo-atlas-without-expo)](https://www.npmtrends.com/expo-atlas-without-expo) [![expo-atlas-without-expo install size](https://packagephobia.com/badge?p=expo-atlas-without-expo)](https://packagephobia.com/result?p=expo-atlas-without-expo)
+- [react-native-bundle-visualizer](https://github.com/callstack/react-native-bundle-visualizer) [![react-native-bundle-visualizer downloads](https://badgen.net/npm/dm/react-native-bundle-visualizer)](https://www.npmtrends.com/react-native-bundle-visualizer)[![react-native-bundle-visualizer install size](https://packagephobia.com/badge?p=react-native-bundle-visualizer)](https://packagephobia.com/result?p=react-native-bundle-visualizer)
+- [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) [![webpack-bundle-analyzer downloads](https://badgen.net/npm/dm/webpack-bundle-analyzer)](https://www.npmtrends.com/webpack-bundle-analyzer)[![webpack-bundle-analyzer install size](https://packagephobia.com/badge?p=webpack-bundle-analyzer)](https://packagephobia.com/result?p=webpack-bundle-analyzer)
+- [bundle-stats](https://github.com/relative-ci/bundle-stats/tree/master/packages/cli#readme) [![bundle-stats downloads](https://badgen.net/npm/dm/bundle-stats)](https://www.npmtrends.com/bundle-stats)[![bundle-stats install size](https://packagephobia.com/badge?p=bundle-stats)](https://packagephobia.com/result?p=bundle-stats)
+- [statoscope](https://github.com/statoscope/statoscope) [![@statoscope/cli downloads](https://badgen.net/npm/dm/@statoscope/cli)](https://www.npmtrends.com/@statoscope/cli)[![@statoscope/cli install size](https://packagephobia.com/badge?p=@statoscope/cli)](https://packagephobia.com/result?p=@statoscope/cli)
+
+**Built using [Discovery.js](https://github.com/discoveryjs/discovery):**
+
+- Build blocks for pages: https://discoveryjs.github.io/discovery/#views-showcase
+- Jora syntax: https://discoveryjs.github.io/jora/#article:jora-syntax-operators

package/index.js

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

package/lib/bin.js

@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+const minimist = require("minimist");
+
+function printHelp() {
+  console.log(`react-native-bundle-discovery
+
+Usage:
+  react-native-bundle-discovery server <file> [port] [--verbose]
+  react-native-bundle-discovery build <file> [--output <path>] [--clean] [--single-file] [--verbose]
+
+Commands:
+  server <file> [port]  Run a web server to show a Metro bundler stat report
+  build <file>          Build a HTML report from the Metro bundler stat file
+
+Options:
+  -v, --verbose          Run with verbose logging
+  -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)
+  -p, --port <port>      Port for server command (same as [port], default: 8079)
+  -h, --help             Show help
+`);
+}
+
+function fail(message) {
+  console.error(message);
+  console.error("Use --help to see usage.");
+  process.exit(1);
+}
+
+const argv = minimist(process.argv.slice(2), {
+  alias: {
+    v: "verbose",
+    h: "help",
+    o: "output",
+    c: "clean",
+    s: "single-file",
+    p: "port",
+  },
+  boolean: ["verbose", "help", "clean", "single-file"],
+  string: ["output"],
+  default: {
+    clean: true,
+    "single-file": true,
+  },
+});
+
+const command = argv._[0];
+
+if (argv.help || !command) {
+  printHelp();
+  process.exit(0);
+}
+
+if (command === "server") {
+  const file = argv._[1];
+  if (!file) {
+    fail("Missing required argument: <file>");
+  }
+
+  const rawPort = argv.port ?? argv._[2] ?? 8079;
+  const port = Number(rawPort);
+  if (!Number.isFinite(port)) {
+    fail(`Invalid port: ${rawPort}`);
+  }
+
+  const { serve } = require("./server.js");
+  return serve(file, port, Boolean(argv.verbose));
+}
+
+if (command === "build") {
+  const file = argv._[1];
+  if (!file) {
+    fail("Missing required argument: <file>");
+  }
+
+  const { buildHtmlPage } = require("./build.js");
+  return buildHtmlPage(
+    file,
+    argv.output,
+    argv.clean,
+    argv["single-file"],
+    Boolean(argv.verbose),
+  );
+}
+
+fail(`Unknown command: ${command}`);

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,
+  };
+  return 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/server.js

@@ -0,0 +1,82 @@
+const fs = require("fs");
+const path = require("path");
+const chalk = require("chalk");
+const { createServer } = require("@discoveryjs/cli");
+const { silent } = require("@discoveryjs/cli/lib/shared/utils.js");
+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)}`);
+  }
+
+  return silent(() =>
+    createServer({
+      cache: false,
+      minify: true,
+      dev: false,
+      config: configFile,
+      configFile,
+    }).then((server) =>
+      server.listen(PORT, () => {
+        console.log(
+          `[react-native-bundle-discovery]: 🚀 Server listen on ${chalk.green.underline(
+            chalk.green(`http://localhost:${PORT}`),
+          )}`,
+        );
+      }),
+    ),
+  );
+}
+
+module.exports = {
+  serve,
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "react-native-bundle-discovery-ui",
+  "version": "2.0.0-rc.1",
+  "main": "index.js",
+  "bin": "lib/bin.js",
+  "repository": "git@github.com:retyui/react-native-bundle-discovery.git",
+  "author": "David <4661784+retyui@users.noreply.github.com>",
+  "license": "MIT",
+  "scripts": {
+    "format": "prettier --write .",
+    "start": "NODE_ENV=development npx discovery --config .discoveryrc.js",
+    "build": "npx discovery-build --config .discoveryrc.js --output build --serve-only-assets --single-file"
+  },
+  "dependencies": {
+    "@discoveryjs/cli": "2.14.7",
+    "@discoveryjs/discovery": "1.0.0-beta.99",
+    "chalk": "^4.1.2",
+    "minimist": "^1.2.8",
+    "prettier": "^3.8.1"
+  },
+  "peerDependencies": {
+    "metro": "*"
+  },
+  "peerDependenciesMeta": {
+    "metro": {
+      "optional": true
+    }
+  },
+  "files": [
+    "vendors",
+    "lib",
+    "views",
+    "pages",
+    "index.js",
+    "setup.js",
+    "prepare.js",
+    "queryHelpers.js",
+    ".discoveryrc.js"
+  ],
+  "packageManager": "yarn@4.13.0"
+}