react-native-bundle-discovery 1.3.1 → 2.0.0-rc.2

package/README.md

@@ -30,7 +30,7 @@ There are two ways to install the package:
 #### 1. Install (independent tool)
 
 ```bash
-yarn add -D react-native-bundle-discovery
+yarn add -D react-native-bundle-discovery react-native-bundle-discovery-ui
 ```
 
 Add to your `metro.config.js`:
@@ -117,7 +117,7 @@ npx react-native bundle \
 Run webserver to view the report:
 
 ```bash
-npx react-native-bundle-discovery server metro-stats.json [--port <port>]
+npx react-native-bundle-discovery-ui server metro-stats.json [--port <port>]
 ```
 
 ##### 4.2 Build the HTML report
@@ -125,7 +125,7 @@ npx react-native-bundle-discovery server metro-stats.json [--port <port>]
 Run the following command to generate an HTML report from the JSON file:
 
 ```bash
-npx react-native-bundle-discovery build metro-stats.json
+npx react-native-bundle-discovery-ui build metro-stats.json
 ```
 
 

package/index.js

@@ -1 +1,240 @@
-module.exports = require("./lib/customSerializer");
+const { parse, resolve } = require("path");
+const { writeFileSync, existsSync } = require("fs");
+const { Buffer } = require("buffer");
+const chalk = require("chalk");
+
+const NAME = require("./package.json").name;
+
+function getDefault(module) {
+  return module.__esModule ? module.default : module;
+}
+
+function getDefaultSerializer() {
+  const metroPath = parse(require.resolve("metro/package.json")).dir;
+  const bundleToString = getDefault(
+    require(`${metroPath}/src/lib/bundleToString.js`),
+  );
+  const baseJSBundle = getDefault(
+    require(`${metroPath}/src/DeltaBundler/Serializers/baseJSBundle.js`),
+  );
+
+  return function defaultSerializer(entryPoint, preModules, graph, options) {
+    let bundle = baseJSBundle(entryPoint, preModules, graph, options);
+
+    // Sentry support
+    // https://docs.sentry.io/platforms/react-native/manual-setup/metro/#wrap-your-custom-serializer
+    if (typeof options?.sentryBundleCallback === "function") {
+      bundle = options.sentryBundleCallback(bundle);
+    }
+
+    return bundleToString(bundle).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?.() ?? [])
+      .filter((e) => e.absolutePath)
+      .map((e) => ({
+        absolutePath: e.absolutePath,
+        name: e.data.name,
+      })),
+  };
+}
+
+function createJsonReport({
+  graph,
+  entryPoint,
+  includeEnvs,
+  preModules,
+  includeCode,
+  outputJsonPath,
+  rootFolder,
+  silent,
+  options,
+}) {
+  const { processModuleFilter = () => true } = options || {};
+  const dependencies = Array.from(graph.dependencies.values()).filter(
+    processModuleFilter,
+  );
+
+  const stats = {
+    date: Date.now(),
+    entryPoint,
+    transformOptions: graph.transformOptions,
+    envs: includeEnvs.reduce((acc, envName) => {
+      acc[envName] = process.env[envName];
+      return acc;
+    }, {}),
+    rootFolder,
+    packages: toPackages(preModules).concat(toPackages(dependencies)),
+    modules: preModules
+      .map((m) => toModuleStruct(m, includeCode))
+      .concat(dependencies.map((m) => toModuleStruct(m, includeCode))),
+  };
+
+  writeFileSync(outputJsonPath, JSON.stringify(stats));
+
+  if (!silent) {
+    console.log(
+      `${chalk.yellow(`[${NAME}]`)}: Saved stats to ${chalk.green(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,
+  silent = false,
+  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,
+      silent,
+      options,
+    });
+
+    return code;
+  }
+
+  return customSerializer;
+}
+
+const createProcessModuleFilter =
+  ({
+    removePromisePolyfill = false, // Remove useless polyfill (Hermes already has Promise)
+    removeOldRenderer = false, // Should be true when new ARCH is enabled
+    removeNewRenderer = false, // Should be true when new ARCH is disabled
+    removeUTFSequence = false, // Remove useless code
+  } = {}) =>
+  (module) => {
+    if (
+      removePromisePolyfill &&
+      module.path.endsWith("/react-native/Libraries/Promise.js")
+    ) {
+      return false;
+    }
+    if (
+      removeOldRenderer &&
+      module.path.endsWith(
+        "/react-native/Libraries/Renderer/shims/ReactNative.js",
+      )
+    ) {
+      return false;
+    }
+    if (
+      removeNewRenderer &&
+      module.path.endsWith(
+        "/react-native/Libraries/Renderer/shims/ReactFabric.js",
+      )
+    ) {
+      return false;
+    }
+    if (
+      removeUTFSequence &&
+      module.path.endsWith("/react-native/Libraries/UTFSequence.js")
+    ) {
+      return false;
+    }
+
+    return true;
+  };
+
+module.exports = { createSerializer, createProcessModuleFilter };

package/package.json

@@ -1,22 +1,15 @@
 {
   "name": "react-native-bundle-discovery",
-  "version": "1.3.1",
+  "version": "2.0.0-rc.2",
   "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"
+    "prepublishOnly": "cp ../README.md README.md"
   },
   "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"
+    "chalk": "^4.1.2"
   },
   "peerDependencies": {
     "metro": "*"
@@ -27,15 +20,6 @@
     }
   },
   "files": [
-    "vendors",
-    "lib",
-    "views",
-    "pages",
-    "index.js",
-    "setup.js",
-    "prepare.js",
-    "queryHelpers.js",
-    ".discoveryrc.js"
-  ],
-  "packageManager": "yarn@4.13.0"
+    "index.js"
+  ]
 }

package/.discoveryrc.js

@@ -1,22 +0,0 @@
-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/lib/bin.js

@@ -1,87 +0,0 @@
-#!/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

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