react-native-bundle-discovery 2.4.0 → 2.5.0-rc.1

package/README.md

@@ -24,7 +24,6 @@ There are two ways to install the package:
 1. As in independent tool (UI + CLI)
 2. Or as a [Rozenite](_rozenite/README.md) plugin (see: [_rozenite/README.md](_rozenite/README.md))
 
-
 > 🚀 If you've migrated to [Re.Pack](https://re-pack.dev/), you can still use this package to analyze 📊 JS bundles 📦 generated by Re.Pack.
 >
 > 💡 Learn more: 📖 [Re.Pack.md](./Re.Pack.md)
@@ -90,6 +89,35 @@ npx react-native-bundle-discovery-cli metro-stats.json
 
 # Display all packages in the bundle report
 npx react-native-bundle-discovery-cli packages metro-stats.json [--sort size|name] [--format json|table|default]
+
+# Display the heaviest modules in the bundle report (default limit: 50, --limit 0 shows all)
+# --filter accepts plain text (case-insensitive) or a regexp: --filter '/\.json/i'
+npx react-native-bundle-discovery-cli modules metro-stats.json [--limit 50] [--filter <text|/regexp/>] [--sort size|name] [--format json|table|default]
+
+# Compare two bundle reports: total size, added/removed/changed modules and packages,
+# version changes, new duplicates and new deprecated packages
+npx react-native-bundle-discovery-cli compare --before main-stats.json --after pr-stats.json [--limit 50] [--format json|markdown|default]
+```
+
+##### Bundle size checks in CI
+
+`compare` exits with code `1` when one of the checks fails:
+
+```bash
+# --fail-on-increase: max growth, in bytes (50KB, 0.5MB, 51200) or percent of the "before" size (5%)
+# --max-size:         absolute limit for the "after" bundle
+# --fail-on:          fail when new duplicate or new deprecated packages appear
+npx react-native-bundle-discovery-cli compare --before main-stats.json --after pr-stats.json \
+  --fail-on-increase 50KB \
+  --max-size 3MB \
+  --fail-on new-duplicates,new-deprecated
+```
+
+On GitHub Actions no extra setup is needed: the markdown report is added to the job summary
+and failed checks are shown as error annotations. Use `--format markdown` to get the same report for a PR comment.
+
+```yaml
+- run: npx react-native-bundle-discovery-cli compare --before main-stats.json --after metro-stats.json --fail-on-increase 5%
 ```
 
 #### UI package

package/index.js

@@ -3,6 +3,7 @@ const { writeFileSync, existsSync } = require("fs");
 const { Buffer } = require("buffer");
 const chalk = require("chalk");
 const BundleDiscoveryPlugin = require("./webpack").BundleDiscoveryPlugin;
+const { withPackagesMetadata } = require("./packageMetadata");
 const NAME = require("./package.json").name;
 
 function getDefault(module) {
@@ -106,7 +107,7 @@ function toModuleStruct(m, includeCode) {
   };
 }
 
-function createJsonReport({
+async function createJsonReport({
   graph,
   entryPoint,
   includeEnvs,
@@ -116,12 +117,30 @@ function createJsonReport({
   rootFolder,
   silent,
   options,
+  fetchPackagesMetadata,
 }) {
   const { processModuleFilter = () => true } = options || {};
   const dependencies = Array.from(graph.dependencies.values()).filter(
     processModuleFilter,
   );
 
+  let packages = toPackages(preModules).concat(toPackages(dependencies));
+  const modules = preModules
+    .map((m) => toModuleStruct(m, includeCode))
+    .concat(dependencies.map((m) => toModuleStruct(m, includeCode)));
+
+  if (fetchPackagesMetadata) {
+    packages = await withPackagesMetadata(packages, {
+      onError: (error, pkg) => {
+        if (!silent) {
+          console.warn(
+            `${chalk.yellow(`[${NAME}]`)}: Failed to fetch metadata for ${pkg.name}@${pkg.version}: ${error.message}`,
+          );
+        }
+      },
+    });
+  }
+
   const stats = {
     date: Date.now(),
     entryPoint,
@@ -131,10 +150,8 @@ function createJsonReport({
       return acc;
     }, {}),
     rootFolder,
-    packages: toPackages(preModules).concat(toPackages(dependencies)),
-    modules: preModules
-      .map((m) => toModuleStruct(m, includeCode))
-      .concat(dependencies.map((m) => toModuleStruct(m, includeCode))),
+    packages,
+    modules,
   };
 
   writeFileSync(outputJsonPath, JSON.stringify(stats));
@@ -156,6 +173,7 @@ function createJsonReport({
  * @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.
+ * @param {boolean} [options.fetchPackagesMetadata=true] - Whether to fetch packages metadata (publish date, deprecation, latest version) from the npm registry.
  * @returns {Function} - A custom serializer function to be used by Metro.
  * @throws {Error} - Throws an error if the project root does not exist.
  */
@@ -166,6 +184,7 @@ function createSerializer({
   includeCode = true,
   silent = false,
   includeEnvs = [],
+  fetchPackagesMetadata = true,
 } = {}) {
   const mySerializer = serializer || getDefaultSerializer();
 
@@ -179,6 +198,12 @@ function createSerializer({
   function customSerializer(entryPoint, preModules, graph, options) {
     const code = mySerializer(entryPoint, preModules, graph, options);
 
+    // Keeps the Node.js process alive until the report is written
+    // (otherwise it can exit while metadata requests are still pending)
+    const keepAlive = setInterval(() => {}, 1000);
+
+    // Graph/modules are read synchronously before the first `await`,
+    // so the report is not affected by later Metro graph mutations
     createJsonReport({
       graph,
       entryPoint,
@@ -189,7 +214,8 @@ function createSerializer({
       rootFolder: projectRoot,
       silent,
       options,
-    });
+      fetchPackagesMetadata,
+    }).finally(() => clearInterval(keepAlive));
 
     return code;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-discovery",
-  "version": "2.4.0",
+  "version": "2.5.0-rc.1",
   "main": "index.js",
   "repository": "git@github.com:retyui/react-native-bundle-discovery.git",
   "author": "David <4661784+retyui@users.noreply.github.com>",

package/packageMetadata.js

@@ -0,0 +1,155 @@
+const DEFAULT_REGISTRY = "https://registry.npmjs.org";
+const DEFAULT_TIMEOUT_MS = 1_000;
+const DEFAULT_CONCURRENCY = 8;
+
+// Simple in-memory cache: `${registry}|${name}` -> Promise<packument summary | null>
+// Keeps promises (not values) so concurrent lookups of the same package share one request,
+// and different versions of the same package share one packument.
+const cache = new Map();
+
+/**
+ * `@babel/runtime` -> `@babel%2fruntime`
+ */
+function encodePackageName(name) {
+  return name.startsWith("@") ? `@${encodeURIComponent(name.slice(1))}` : name;
+}
+
+async function fetchJson(url, timeoutMs) {
+  const res = await fetch(url, {
+    headers: { Accept: "application/json" },
+    signal: AbortSignal.timeout(timeoutMs),
+  });
+  if (res.status === 404) {
+    return null;
+  }
+  if (!res.ok) {
+    throw new Error(`${res.status} ${res.statusText} (${url})`);
+  }
+  return res.json();
+}
+
+/**
+ * The version manifest (`/<name>/<version>`) has no publish date,
+ * so the packument is fetched once and only the fields we need are kept.
+ */
+async function fetchPackageSummary(name, { registry, timeoutMs }) {
+  const packument = await fetchJson(
+    `${registry}/${encodePackageName(name)}`,
+    timeoutMs,
+  );
+
+  if (!packument) {
+    return null;
+  }
+
+  const versions = {};
+  for (const [version, manifest] of Object.entries(packument.versions ?? {})) {
+    versions[version] = {
+      createdAt: packument.time?.[version] ?? null,
+      deprecated: manifest.deprecated || false,
+    };
+  }
+
+  return {
+    latestVersion: packument["dist-tags"]?.latest ?? null,
+    versions,
+  };
+}
+
+function getPackageSummary(name, { registry, timeoutMs }) {
+  const key = `${registry}|${name}`;
+
+  if (!cache.has(key)) {
+    const promise = fetchPackageSummary(name, { registry, timeoutMs }).catch(
+      (error) => {
+        // Don't cache failures (network issues, timeouts), retry on next report
+        cache.delete(key);
+        throw error;
+      },
+    );
+    cache.set(key, promise);
+  }
+
+  return cache.get(key);
+}
+
+/**
+ * Returns metadata of a specific (installed) package version, not the latest one.
+ *
+ * @returns {Promise<{createdAt: string|null, deprecated: string|false, isLatest: boolean, latestVersion: string|null} | null>}
+ *   `null` when the package/version is not found in the registry.
+ */
+async function getPackageMetadata(
+  name,
+  version,
+  { registry = DEFAULT_REGISTRY, timeoutMs = DEFAULT_TIMEOUT_MS } = {},
+) {
+  const summary = await getPackageSummary(name, { registry, timeoutMs });
+  const info = summary?.versions[version];
+
+  if (!info) {
+    return null;
+  }
+
+  return {
+    createdAt: info.createdAt,
+    deprecated: info.deprecated,
+    isLatest: summary.latestVersion === version,
+    latestVersion: summary.latestVersion,
+  };
+}
+
+async function mapWithConcurrency(items, limit, fn) {
+  const results = new Array(items.length);
+  let index = 0;
+
+  async function worker() {
+    while (index < items.length) {
+      const i = index++;
+      results[i] = await fn(items[i], i);
+    }
+  }
+
+  await Promise.all(
+    Array.from({ length: Math.min(limit, items.length) }, worker),
+  );
+
+  return results;
+}
+
+/**
+ * Adds a `metadata` field to every package of the report.
+ * Failed lookups result in `metadata: null` and are passed to `onError`.
+ *
+ * @param {Array<{name: string, version: string}>} packages
+ */
+async function withPackagesMetadata(
+  packages,
+  {
+    registry = DEFAULT_REGISTRY,
+    timeoutMs = DEFAULT_TIMEOUT_MS,
+    concurrency = DEFAULT_CONCURRENCY,
+    onError = () => {},
+  } = {},
+) {
+  return mapWithConcurrency(packages, concurrency, async (pkg) => {
+    if (!pkg.version) {
+      return { ...pkg, metadata: null };
+    }
+    try {
+      const metadata = await getPackageMetadata(pkg.name, pkg.version, {
+        registry,
+        timeoutMs,
+      });
+      return { ...pkg, metadata };
+    } catch (error) {
+      onError(error, pkg);
+      return { ...pkg, metadata: null };
+    }
+  });
+}
+
+module.exports = {
+  getPackageMetadata,
+  withPackagesMetadata,
+};

package/webpack.js

@@ -4,6 +4,7 @@ const path = require("node:path");
 const chalk = require("chalk");
 
 const { parseBundle } = require("./parseUtils.js");
+const { withPackagesMetadata } = require("./packageMetadata.js");
 const NAME = require("./package.json").name;
 const packageRegex = /(?:^|\/)node_modules\/((?:@[^\/]+\/)?[^\/]+)/g;
 
@@ -13,10 +14,11 @@ const packageRegex = /(?:^|\/)node_modules\/((?:@[^\/]+\/)?[^\/]+)/g;
  *   to metro-stats.json format used by `react-native-bundle-discovery`
  */
 class BundleDiscoveryPlugin {
-  constructor({ filename, options, enabled } = {}) {
+  constructor({ filename, options, enabled, fetchPackagesMetadata } = {}) {
     this.options = options;
     this.filename = filename || "metro-stats.json";
     this.enabled = enabled ?? true;
+    this.fetchPackagesMetadata = fetchPackagesMetadata ?? true;
   }
 
   extractSizesFromJsBundle(statAsset, options) {
@@ -59,16 +61,39 @@ class BundleDiscoveryPlugin {
       );
       // Write the formatted stats to the specified output file
       const outputPath = path.resolve(compiler.options.context, this.filename);
-      fs.writeFileSync(outputPath, JSON.stringify(statsJson, null, 2));
 
-      console.log(
-        `${chalk.yellow(`[${NAME}]`)}: Saved stats to ${chalk.green(
-          outputPath,
-        )}`,
-      );
+      // Keeps the Node.js process alive until the report is written
+      // (otherwise it can exit while metadata requests are still pending)
+      const keepAlive = setInterval(() => {}, 1000);
+
+      this.writeReport(statsJson, outputPath)
+        .catch((error) => {
+          console.error(
+            `${chalk.yellow(`[${NAME}]`)}: Failed to create JSON report: ${error.message}`,
+          );
+        })
+        .finally(() => clearInterval(keepAlive));
     });
   }
 
+  async writeReport(statsJson, outputPath) {
+    if (this.fetchPackagesMetadata) {
+      statsJson.packages = await withPackagesMetadata(statsJson.packages, {
+        onError: (error, pkg) => {
+          console.warn(
+            `${chalk.yellow(`[${NAME}]`)}: Failed to fetch metadata for ${pkg.name}@${pkg.version}: ${error.message}`,
+          );
+        },
+      });
+    }
+
+    fs.writeFileSync(outputPath, JSON.stringify(statsJson, null, 2));
+
+    console.log(
+      `${chalk.yellow(`[${NAME}]`)}: Saved stats to ${chalk.green(outputPath)}`,
+    );
+  }
+
   readSource(filePath) {
     const fallback = { code: "", lineCount: 0, sizeInBytes: 0 };
     try {
@@ -93,8 +118,9 @@ class BundleDiscoveryPlugin {
 
       const lastPnpmFolder = matches[matches.length - 1][1];
 
-      // Match the version pattern `@<version>` right before optional peer dep suffix (`_`) or string end
-      const versionMatch = lastPnpmFolder.match(/@([^/_]+)(?:_|$)/);
+      // Folder format is `<name>@<version>[_<peers>]`, where `<name>` may be scoped
+      // (`@scope+name`, `@scope_name`), so skip the leading `@` of the scope
+      const versionMatch = lastPnpmFolder.match(/^@?[^@]+@([^_]+)/);
 
       return versionMatch ? versionMatch[1] : null;
     } catch {