react-native-bundle-discovery 1.0.0-rc.10

package/.discoveryrc.js

@@ -0,0 +1,21 @@
+const path = require("path");
+
+module.exports = {
+  name: "react-native-bundle-discovery",
+  data: () => require("./tmp/before_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/highcharts.js"),
+      path.resolve(__dirname, "views/foamtree.js"),
+    ],
+  },
+};

package/README.md

@@ -0,0 +1,51 @@
+# react-native-bundle-discovery
+
+> [!WARNING]
+> Currently, everything is in a very early stage. The project is not yet ready for use.
+
+
+<img width="800" src="https://github.com/user-attachments/assets/211145d4-8fe7-499b-a372-9d752e878772" />
+
+### Setup:
+
+#### 1. Install
+```bash
+yarn add -D react-native-bundle-discovery
+```
+
+#### 2. 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);
+```
+
+**Similar projects:**
+- https://github.com/expo/atlas
+- https://github.com/v3ron/expo-atlas-without-expo
+- 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
+
+
+**Links:**
+- 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,52 @@
+#!/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 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}`)}`),
+  ),
+);

package/lib/customSerializer.js

@@ -0,0 +1,167 @@
+const { writeFileSync, existsSync } = require("node:fs");
+const { resolve } = require("node:path");
+const { Buffer } = require("node:buffer");
+
+const NAME = require("../package.json").name;
+
+function getDefaultSerializer() {
+  const bundleToString = require("metro/src/lib/bundleToString");
+  const baseJSBundle = require("metro/src/DeltaBundler/Serializers/baseJSBundle");
+
+  return (entryPoint, preModules, graph, options) =>
+    bundleToString(baseJSBundle(entryPoint, preModules, graph, options)).code;
+}
+
+function getStringSizeInBytes(str) {
+  return Buffer.byteLength(str, "utf8");
+}
+
+/**
+ * `/Users/i/app/node_modules/metro/node_modules/@babel/runtime/helpers/createClass.js` -> `@babel/runtime`
+ * `/Users/i/app/node_modules/react/jsx-runtime.js` -> `react`
+ */
+function getPackageNameFromPath(path) {
+  const parts = path.split("node_modules/");
+  const lastPart = parts[parts.length - 1];
+  if (lastPart.startsWith("@")) {
+    return lastPart.split("/").slice(0, 2).join("/");
+  }
+  return lastPart.split("/")[0];
+}
+
+/**
+ * `/Users/i/app/node_modules/metro/node_modules/@babel/runtime/helpers/createClass.js` -> `/Users/i/app/node_modules/metro/node_modules/@babel/runtime`
+ * `/Users/i/app/node_modules/react/jsx-runtime.js` -> `/Users/i/app/node_modules/react`
+ */
+function getPackageAbsolutePath(path, pkgName) {
+  const parts = path.split("node_modules/");
+  parts[parts.length - 1] = pkgName;
+  return parts.join("node_modules/");
+}
+
+function toPackages(modules) {
+  const packages = new Map();
+  modules.forEach((module) => {
+    if (!module.path.includes("node_modules/")) {
+      return;
+    }
+
+    const pkgName = getPackageNameFromPath(module.path);
+    const absolutePkgPath = getPackageAbsolutePath(module.path, pkgName);
+
+    if (!packages.has(absolutePkgPath)) {
+      packages.set(absolutePkgPath, {
+        name: pkgName,
+        absolutePath: absolutePkgPath,
+        version: require(resolve(absolutePkgPath, "package.json")).version,
+      });
+    }
+  });
+
+  return Array.from(packages.values()).sort((a, b) =>
+    a.name.localeCompare(b.name),
+  );
+}
+
+function toModuleStruct(m, includeCode) {
+  const sourceCode = m.getSource().toString("utf8");
+  const outputCode = m.output[0].data.code;
+  return {
+    path: m.path,
+    source: {
+      code: includeCode ? sourceCode : "",
+      lineCount: sourceCode.split("\n").length,
+      sizeInBytes: getStringSizeInBytes(sourceCode),
+    },
+    output: {
+      code: includeCode ? outputCode : "",
+      lineCount: m.output[0].data.lineCount,
+      sizeInBytes: getStringSizeInBytes(outputCode),
+    },
+    dependencies: Array.from(m?.dependencies?.values?.() ?? []).map((e) => ({
+      absolutePath: e.absolutePath,
+      name: e.data.name,
+    })),
+  };
+}
+
+function createJsonReport({
+  graph,
+  entryPoint,
+  includeEnvs,
+  preModules,
+  includeCode,
+  outputJsonPath,
+  rootFolder,
+}) {
+  const dependencies = Array.from(graph.dependencies.values());
+
+  const stats = {
+    date: Date.now(),
+    entryPoint,
+    transformOptions: graph.transformOptions,
+    envs: includeEnvs.reduce((acc, envName) => {
+      acc[envName] = process.env[envName];
+      return acc;
+    }, {}),
+    rootFolder,
+    packages: toPackages(dependencies),
+    modules: preModules
+      .map((m) => toModuleStruct(m, includeCode))
+      .concat(dependencies.map((m) => toModuleStruct(m, includeCode))),
+  };
+
+  writeFileSync(outputJsonPath, JSON.stringify(stats));
+
+  console.log(`[${NAME}]: Saved stats to`, outputJsonPath);
+}
+
+/**
+ * Creates a custom serializer function for Metro bundler, which generates a JSON report
+ * and optionally modifies the serialization process.
+ *
+ * @param {Object} options - Configuration options for the serializer.
+ * @param {Function} [options.serializer] - A custom serializer function. If not provided, a default serializer is used.
+ * @param {string} options.projectRoot - The root directory of the project. Must exist.
+ * @param {string} [options.outputJsonPath] - The path where the JSON report will be saved. Defaults to "metro-stats.json" in the project root.
+ * @param {boolean} [options.includeCode=true] - Whether to include the source and output code in the JSON report.
+ * @param {string[]} [options.includeEnvs=[]] - A list of environment variable names to include in the JSON report.
+ * @returns {Function} - A custom serializer function to be used by Metro.
+ * @throws {Error} - Throws an error if the project root does not exist.
+ */
+function createSerializer({
+  serializer,
+  projectRoot,
+  outputJsonPath,
+  includeCode = true,
+  includeEnvs = [],
+} = {}) {
+  const mySerializer = serializer || getDefaultSerializer();
+
+  if (!existsSync(projectRoot)) {
+    throw new Error(`[${NAME}]: Project root does not exist: ${projectRoot}`);
+  }
+
+  const myOutputJsonPath =
+    outputJsonPath ?? resolve(projectRoot, "metro-stats.json");
+
+  function customSerializer(entryPoint, preModules, graph, options) {
+    const code = mySerializer(entryPoint, preModules, graph, options);
+
+    createJsonReport({
+      graph,
+      entryPoint,
+      includeEnvs,
+      preModules,
+      includeCode,
+      outputJsonPath: myOutputJsonPath,
+      rootFolder: projectRoot,
+    });
+
+    return code;
+  }
+
+  return customSerializer;
+}
+
+module.exports = { createSerializer };

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "react-native-bundle-discovery",
+  "version": "1.0.0-rc.10",
+  "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.2",
+    "@discoveryjs/discovery": "1.0.0-beta.93",
+    "chalk": "^5.4.1",
+    "highcharts": "12.2.0"
+  },
+  "peerDependencies": {
+    "metro": "*"
+  },
+  "peerDependenciesMeta": {
+    "metro": {
+      "optional": true
+    }
+  },
+  "files": [
+    "vendors",
+    "lib",
+    "views",
+    "pages",
+    "index.js",
+    "setup.js",
+    "prepare.js",
+    "queryHelpers.js",
+    ".discoveryrc.js"
+  ],
+  "devDependencies": {
+    "prettier": "3.5.3"
+  },
+  "packageManager": "yarn@4.6.0"
+}

package/pages/_common.js

@@ -0,0 +1,266 @@
+const platformColor = `transformOptions.platform = 'android' ? 'rgba(194, 239, 116, .4)' : 'rgba(119, 31, 218, .4)'`;
+
+function getPackage(entry) {
+  return `
+  $packages: $.packages;
+  $totalSize: $.modules.sum(=>output.sizeInBytes);
+  $toModule: => {
+    ext:  $.path.getFileExtension(),
+    name: $.path, 
+    size: $.output.sizeInBytes.formatBytes(), 
+    percent: ($.output.sizeInBytes / $totalSize).percent(3),
+  };
+
+  ${entry}.group(=> path.getModulesName())
+     .map(=> ({ 
+        $pkgName: $.key;
+        pkgName: $pkgName, // example: lodash
+        size: $.value.sum(=>output.sizeInBytes),
+        pkgInstances: $.value
+          .group(=> path.split($pkgName).pick(0) + $pkgName)
+          .map(=> {
+             $pkgNameWithPath: $.key;
+             pkgName: $pkgNameWithPath, // example: node_modules/lodash
+             version: $packages.[path = $pkgNameWithPath][0].version,
+             size: $.value.sum(=> output.sizeInBytes),
+             modules: $.value.map(=> $.$toModule()),
+          }),
+     }))`;
+}
+
+function getPackageList({
+  data,
+  itemPkgName,
+  showCopiesBadge,
+  expanded,
+  limit,
+  subLimit,
+}) {
+  return {
+    view: "list",
+    data,
+    emptyText: "⚠️ No packages found",
+    limit,
+    item: {
+      view: "tree",
+      expanded,
+      itemConfig: {
+        content: [
+          itemPkgName,
+          "text: ' '",
+          "pill-badge:{ text: size.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
+          showCopiesBadge
+            ? {
+                view: "pill-badge",
+                when: "pkgInstances.size() > 1",
+                data: "(pkgInstances.size() - 1).pluralBadge(['copy','copies'], '+')",
+                color: "rgba(255, 0, 0, 0.35)",
+              }
+            : null,
+          {
+            view: "pill-badge",
+            data: "pkgInstances.modules.size().pluralBadge(['file','files'])",
+          },
+        ].filter(Boolean),
+        children: `$.pkgInstances`,
+        itemConfig: {
+          view: "tree-leaf",
+          limit: subLimit,
+          content: [
+            //
+            "text:pkgName",
+            "text:' '",
+            "pill-badge:{ text: 'v' + version, color: '#0af' }",
+            "pill-badge:{ text: size.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
+            {
+              view: "pill-badge",
+              data: "modules.size().pluralBadge(['file','files'])",
+            },
+          ],
+          children: `$.modules`,
+          itemConfig: {
+            view: "tree-leaf",
+            content: getTreeModule({ hasPercent: true }),
+          },
+        },
+      },
+    },
+  };
+}
+
+function getTreeModule({ hasTextMatch = false, hasPercent = false } = {}) {
+  return [
+    "pill-badge:{ text: ext, color: ext.getExtColor() }",
+    hasTextMatch
+      ? {
+          view: "link",
+          content: hasTextMatch ? "text-match" : "text",
+          data: `{
+          href: name.pageLink("module", {}),
+          text: name,
+          match: #.filterByPathStr
+        }`,
+        }
+      : {
+          view: "link",
+          data: `{ href: $.name.pageLink("module", {}), text: $.name }`,
+        },
+    "text:' '",
+    {
+      view: "badge",
+      when: "isEntry",
+      text: "Entrypoint",
+      color: "gold",
+      textColor: "black",
+    },
+    "pill-badge:{ text: size, color: 'rgba(120, 177, 9, 0.35)' }",
+    hasPercent
+      ? "pill-badge:{ text: percent, color: 'rgba(120, 177, 9, 0.35)' }"
+      : null,
+  ].filter(Boolean);
+}
+function getModulesTree({ data, limit }) {
+  if (!data) {
+    throw new Error("[getModulesTree]: data is required");
+  }
+  return {
+    view: "content-filter",
+    data,
+    name: "filterByPathStr",
+    content: {
+      view: "list",
+      limit,
+      data: ".[name ~= #.filterByPathStr]",
+      emptyText: "⚠️ No modules found",
+      item: {
+        view: "tree",
+        expanded: false,
+        itemConfig: {
+          content: getTreeModule({ hasTextMatch: true }),
+          children: `
+            [
+               {
+                 title:'Imported by modules',
+                 data: $.reasons,
+                 type: 'reasons',
+               },
+               {
+                 title:'Similar copies',
+                 data: $.duplicates,
+                 type: 'duplicates',
+               }
+            ].filter(=> $.data.size() > 0)
+          `,
+          itemConfig: {
+            view: "switch",
+            content: [
+              {
+                when: 'type="reasons"',
+                content: {
+                  view: "tree-leaf",
+                  content: [
+                    "text:title",
+                    "text:' '",
+                    "badge:{ text: $.data.size() }",
+                  ],
+                  children: `$.data`,
+                  itemConfig: {
+                    view: "tree-leaf",
+                    content: getTreeModule(),
+                  },
+                },
+              },
+              {
+                when: 'type="duplicates"',
+                content: {
+                  view: "tree-leaf",
+                  content: [
+                    "text:title",
+                    "text:' '",
+                    "badge:{ text: $.data.size() }",
+                  ],
+                  children: `$.data`,
+                  itemConfig: {
+                    view: "tree-leaf",
+                    content: getTreeModule(),
+                  },
+                },
+              },
+            ],
+          },
+        },
+      },
+    },
+  };
+}
+
+const metadata = {
+  platform: {
+    when: "transformOptions.platform",
+    view: "badge",
+    data: `{ prefix: 'Platform: ', text: transformOptions.platform, color: ${platformColor} }`,
+  },
+  size: {
+    when: "modules.filter(=> $.path has 'node_modules').size()",
+    view: "badge",
+    data: `{ prefix: 'Size: ', text: modules.sum(=>output.sizeInBytes).formatBytes(), color: ${platformColor} }`,
+  },
+  node_modules_size: {
+    when: "modules.filter(=> $.path has 'node_modules').size()",
+    view: "badge",
+    data: "{ prefix: 'node_modules: ', text: modules.filter(=> $.path has 'node_modules').sum(=>output.sizeInBytes).formatBytes(), color: 'rgba(255, 0, 0, 0.35)' }",
+  },
+  source_code_size: {
+    when: "modules.filter(=> $.path has 'node_modules').size()",
+    view: "badge",
+    data: `
+        // vars
+        $totalSize: modules.sum(=>output.sizeInBytes);
+        $thirdPartySize: modules.filter(=> $.path has 'node_modules').sum(=>output.sizeInBytes);
+        // return data
+        { prefix: 'Source code: ', text: ($totalSize - $thirdPartySize).formatBytes(), color: 'rgba(148, 111, 234, 0.5)' }`,
+  },
+  is_dev: {
+    when: "transformOptions.dev != null",
+    view: "badge",
+    data: "{ prefix: '__DEV__: ', text: transformOptions.dev }",
+  },
+  is_minified: {
+    when: "transformOptions.minify != null",
+    view: "badge",
+    data: "{ prefix: 'Minify: ', text: transformOptions.minify }",
+  },
+};
+
+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 }) {
+  return {
+    view: "button",
+    className: `${className ?? ""} copy-to-clipboard`,
+    data: `{ textToCopy: ${textToCopy} }`,
+    onClick(elm, data) {
+      clearTimeout(elm.__timer);
+      navigator.clipboard
+        .writeText(data.textToCopy)
+        .then(() => {
+          elm.classList.add("done");
+          elm.__timer = setTimeout(() => elm.classList.remove("done"), 2000);
+        })
+        .catch(() => {
+          elm.classList.add("err");
+          elm.__timer = setTimeout(() => elm.classList.remove("err"), 2000);
+        });
+    },
+  };
+}
+
+module.exports = {
+  getCopyToClipboardButton,
+  getPackage,
+  getPackageList,
+  externalLinkHtml,
+  getTreeModule,
+  getModulesTree,
+  metadata,
+};