react-native-bundle-discovery-ui 2.8.0 → 2.9.0

package/dist/bin.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 const require_rolldown_runtime = require("./rolldown-runtime-VH7oDXx4.js");
-const require_src = require("./src-DPAqywOJ.js");
+const require_src = require("./src-Bp8pPQrQ.js");
 const require_discoveryrc = require("./discoveryrc.js");
 let minimist = require("minimist");
 minimist = require_rolldown_runtime.__toESM(minimist);
@@ -12,8 +12,23 @@ let _discoveryjs_cli = require("@discoveryjs/cli");
 let chalk = require("chalk");
 chalk = require_rolldown_runtime.__toESM(chalk);
 let _discoveryjs_cli_lib_shared_utils_js = require("@discoveryjs/cli/lib/shared/utils.js");
+//#region src/withCompare.ts
+/** Wraps a report expression of the generated discovery.js config with a "before" report diff */
+function withCompare(reportExpression, beforeJsonPath) {
+  return beforeJsonPath
+    ? `withComparison(${reportExpression}, require("${beforeJsonPath}"), "${beforeJsonPath}")`
+    : reportExpression;
+}
+//#endregion
 //#region src/build.ts
-function buildHtmlPage(filePath, output, clean, singleFile, verbose) {
+function buildHtmlPage(
+  filePath,
+  output,
+  clean,
+  singleFile,
+  verbose,
+  compareFilePath,
+) {
   if (verbose)
     console.info(
       `Building HTML page from file: ${chalk.default.green(filePath)} options: ${JSON.stringify(
@@ -47,6 +62,22 @@ function buildHtmlPage(filePath, output, clean, singleFile, verbose) {
     console.error(err.message);
     process.exit(1);
   }
+  let fullCompareJsonPath = null;
+  if (compareFilePath) {
+    const compareJsonPath = node_path.default.resolve(
+      process.cwd(),
+      compareFilePath,
+    );
+    try {
+      fullCompareJsonPath = require.resolve(compareJsonPath);
+    } catch (err) {
+      console.error(
+        `❌Error loading file: ${chalk.default.red(compareJsonPath)}\n\n`,
+      );
+      console.error(err.message);
+      process.exit(1);
+    }
+  }
   const configFile = node_path.default.resolve(__dirname, "./.tmp.js");
   if (verbose)
     console.info(
@@ -55,7 +86,7 @@ function buildHtmlPage(filePath, output, clean, singleFile, verbose) {
   const transformRcdoctor = node_path.default.join(__dirname, "rsdoctor.js");
   node_fs.default.writeFileSync(
     configFile,
-    `const {transformRSDoctorData, transformEsbuildMetafile} = require("${transformRcdoctor}");
+    `const {transformRSDoctorData, transformEsbuildMetafile, withComparison, withRecommendations} = require("${transformRcdoctor}");
 module.exports = ${JSON.stringify(
       {
         ...require_discoveryrc,
@@ -65,11 +96,7 @@ module.exports = ${JSON.stringify(
       1,
     ).replace(
       `"<tmp>"`,
-      require_src.isRsdoctorReportPath(fullJsonPath)
-        ? `() => transformRSDoctorData(require("${fullJsonPath}"))`
-        : require_src.isEsbuildMetafilePath(fullJsonPath)
-          ? `() => transformEsbuildMetafile(require("${fullJsonPath}"), "${fullJsonPath}")`
-          : `() => require("${fullJsonPath}")`,
+      `() => ${withCompare(require_src.isRsdoctorReportPath(fullJsonPath) ? `withRecommendations(transformRSDoctorData(require("${fullJsonPath}")))` : require_src.isEsbuildMetafilePath(fullJsonPath) ? `withRecommendations(transformEsbuildMetafile(require("${fullJsonPath}"), "${fullJsonPath}"))` : `withRecommendations(require("${fullJsonPath}"))`, fullCompareJsonPath)}`,
     )};`,
   );
   if (verbose)
@@ -122,7 +149,7 @@ module.exports = ${JSON.stringify(
 }
 //#endregion
 //#region src/server.ts
-function serve(filePath, port, verbose) {
+function serve(filePath, port, verbose, compareFilePath) {
   const PORT = process.env.PORT || port;
   if (verbose)
     console.info(
@@ -149,6 +176,22 @@ function serve(filePath, port, verbose) {
     console.error(err.message);
     process.exit(1);
   }
+  let fullCompareJsonPath = null;
+  if (compareFilePath) {
+    const compareJsonPath = node_path.default.resolve(
+      process.cwd(),
+      compareFilePath,
+    );
+    try {
+      fullCompareJsonPath = require.resolve(compareJsonPath);
+    } catch (err) {
+      console.error(
+        `❌Error loading file: ${chalk.default.red(compareJsonPath)}\n\n`,
+      );
+      console.error(err.message);
+      process.exit(1);
+    }
+  }
   const configFile = node_path.default.resolve(__dirname, "./.tmp.js");
   if (verbose)
     console.info(
@@ -157,7 +200,7 @@ function serve(filePath, port, verbose) {
   const transformRcdoctor = node_path.default.join(__dirname, "rsdoctor.js");
   node_fs.default.writeFileSync(
     configFile,
-    `const {transformRSDoctorData, transformEsbuildMetafile} = require("${transformRcdoctor}");
+    `const {transformRSDoctorData, transformEsbuildMetafile, withComparison, withRecommendations} = require("${transformRcdoctor}");
 module.exports = ${JSON.stringify(
       {
         ...require_discoveryrc,
@@ -167,11 +210,7 @@ module.exports = ${JSON.stringify(
       1,
     ).replace(
       `"<tmp>"`,
-      require_src.isRsdoctorReportPath(fullJsonPath)
-        ? `() => transformRSDoctorData(require("${fullJsonPath}"))`
-        : require_src.isEsbuildMetafilePath(fullJsonPath)
-          ? `() => transformEsbuildMetafile(require("${fullJsonPath}"), "${fullJsonPath}")`
-          : `() => require("${fullJsonPath}")`,
+      `() => ${withCompare(require_src.isRsdoctorReportPath(fullJsonPath) ? `withRecommendations(transformRSDoctorData(require("${fullJsonPath}")))` : require_src.isEsbuildMetafilePath(fullJsonPath) ? `withRecommendations(transformEsbuildMetafile(require("${fullJsonPath}"), "${fullJsonPath}"))` : `withRecommendations(require("${fullJsonPath}"))`, fullCompareJsonPath)}`,
     )};`,
   );
   if (verbose)
@@ -200,10 +239,10 @@ function printHelp() {
   console.log(`react-native-bundle-discovery-ui
 
 Usage:
-  react-native-bundle-discovery-ui <file> [port] [--verbose] # <- server can be omitted
-  react-native-bundle-discovery-ui server <file> [port] [--verbose]
+  react-native-bundle-discovery-ui <file> [port] [--compare <file>] [--verbose] # <- server can be omitted
+  react-native-bundle-discovery-ui server <file> [port] [--compare <file>] [--verbose]
 
-  react-native-bundle-discovery-ui build <file> [--output <path>] [--clean] [--single-file] [--verbose]
+  react-native-bundle-discovery-ui build <file> [--compare <file>] [--output <path>] [--clean] [--single-file] [--verbose]
 
 Commands:
   server <file> [port]  Run a web server to show a Metro bundler stat report
@@ -215,6 +254,7 @@ Options:
   -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)
+  --compare <file>       A "before" report to compare <file> with (adds the Compare tab)
   -h, --help             Show help
 `);
 }
@@ -234,7 +274,7 @@ function main() {
       p: "port",
     },
     boolean: ["verbose", "help", "clean", "single-file"],
-    string: ["output"],
+    string: ["output", "compare"],
     default: {
       clean: true,
       "single-file": true,
@@ -256,7 +296,7 @@ function main() {
       argv.port ?? (isImplicitServerCommand ? argv._[1] : argv._[2]) ?? 8079;
     const port = Number(rawPort);
     if (!Number.isFinite(port)) fail(`Invalid port: ${rawPort}`);
-    return serve(file, port, Boolean(argv.verbose));
+    return serve(file, port, Boolean(argv.verbose), argv.compare);
   }
   if (isBuildCommand) {
     const file = argv._[1];
@@ -267,6 +307,7 @@ function main() {
       argv.clean,
       argv["single-file"],
       Boolean(argv.verbose),
+      argv.compare,
     );
   }
   fail(`Unknown command: ${command}`);

package/dist/client/issues.js

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/client/issues.ts
+const DUPLICATE_ISSUE = "Duplicate module";
+//#endregion
+exports.DUPLICATE_ISSUE = DUPLICATE_ISSUE;

package/dist/client/pages/_common.js

@@ -1,6 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/client/pages/_common.ts
-const platformColor = `transformOptions.platform = 'android' ? 'rgba(194, 239, 116, .4)' : 'rgba(119, 31, 218, .4)'`;
 function getPackage(entry) {
   return `
   $packages: $.packages;
@@ -30,6 +29,86 @@ function getPackage(entry) {
           }),
      }))`;
 }
+function renderSortToggleGroup(el, config, options) {
+  let current = null;
+  const label = document.createElement("div");
+  label.className = "view-toggle-group-before";
+  label.textContent = "Sort by:";
+  el.classList.add("view-toggle-group", "sort-toggle-group");
+  el.append(label);
+  const toggles = options.map(({ value, text }) => {
+    const toggle = document.createElement("div");
+    toggle.className = "view-toggle onclick";
+    toggle.textContent = text;
+    toggle.addEventListener("click", () => {
+      current = current === value ? null : value;
+      toggles.forEach((t, i) => {
+        t.classList.toggle("checked", options[i].value === current);
+      });
+      config.onChange?.(current, config.name);
+    });
+    return el.appendChild(toggle);
+  });
+  config.onInit?.(current, config.name);
+}
+function getSortableContentFilter({
+  data,
+  className,
+  nameField,
+  sizeField,
+  duplicatesCount,
+  defaultSort,
+  content,
+}) {
+  const filtered = `.[${nameField} ~= #.filterByPathStr]`;
+  return {
+    view: "block",
+    data,
+    className: `view-content-filter sortable-content-filter ${className ?? ""}`,
+    content: {
+      view: "context",
+      modifiers: [
+        {
+          view: renderSortToggleGroup,
+          name: "sortBy",
+          data: `
+            $hasDuplicates: .[${duplicatesCount} > 0];
+            [
+              { value: 'size', text: 'Size' },
+              { value: 'name', text: 'Name' },
+              { value: 'duplicates', text: 'Duplicates' },
+            ].[value != 'duplicates' or $hasDuplicates]
+          `,
+        },
+        {
+          view: "persisted-filter-input",
+          persistKey: `${className}:${nameField}`,
+          name: "filterByPathStr",
+          placeholder: "Filter",
+        },
+      ],
+      content: [
+        {
+          view: "badge",
+          when: `#.filterByPathStr and ${filtered}`,
+          className: "filtered-size",
+          data: `{ text: 'Filtered size: ' + ${filtered}.sum(=> ${sizeField}).formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }`,
+        },
+        {
+          view: "block",
+          className: "content",
+          content: content(`
+            $filtered: ${filtered};
+            #.sortBy = 'name' ? $filtered.sort(${nameField} asc)
+            : #.sortBy = 'duplicates' ? $filtered.sort(${duplicatesCount} desc, ${sizeField} desc)
+            : #.sortBy = 'size' ? $filtered.sort(${sizeField} desc)
+            : ${defaultSort ? `$filtered.sort(${defaultSort})` : "$filtered"}
+          `),
+        },
+      ],
+    },
+  };
+}
 const metadataTooltip = {
   view: "text",
   when: "metadata.createdAt",
@@ -170,23 +249,19 @@ function getTreeModule({ hasTextMatch = false, hasPercent = false } = {}) {
       : null,
   ].filter(Boolean);
 }
-function getModulesTree({ data, limit }) {
+function getModulesTree({ data, limit, sortable }) {
   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: `
+  const getList = (listData) => ({
+    view: "list",
+    limit,
+    data: listData,
+    emptyText: "⚠️ No modules found",
+    item: {
+      view: "tree",
+      expanded: false,
+      itemConfig: {
+        content: getTreeModule({ hasTextMatch: true }),
+        children: `
             [
                {
                  title:'Imported by modules',
@@ -200,86 +275,183 @@ function getModulesTree({ data, limit }) {
                }
             ].filter(=> $.data.size() > 0)
           `,
-          itemConfig: {
-            view: "switch",
-            content: [
-              {
-                when: 'type="reasons"',
-                content: {
+        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: [
-                    "text:title",
-                    "text:' '",
-                    "badge:{ text: $.data.size() }",
-                  ],
-                  children: `$.data`,
-                  itemConfig: {
-                    view: "tree-leaf",
-                    content: getTreeModule(),
-                  },
+                  content: getTreeModule(),
                 },
               },
-              {
-                when: 'type="duplicates"',
-                content: {
+            },
+            {
+              when: 'type="duplicates"',
+              content: {
+                view: "tree-leaf",
+                content: [
+                  "text:title",
+                  "text:' '",
+                  "badge:{ text: $.data.size() }",
+                ],
+                children: `$.data`,
+                itemConfig: {
                   view: "tree-leaf",
-                  content: [
-                    "text:title",
-                    "text:' '",
-                    "badge:{ text: $.data.size() }",
-                  ],
-                  children: `$.data`,
-                  itemConfig: {
-                    view: "tree-leaf",
-                    content: getTreeModule(),
-                  },
+                  content: getTreeModule(),
                 },
               },
-            ],
-          },
+            },
+          ],
         },
       },
     },
+  });
+  if (sortable)
+    return getSortableContentFilter({
+      data,
+      nameField: "name",
+      sizeField: "sizeInBytes",
+      duplicatesCount: "duplicates.size()",
+      content: getList,
+    });
+  return {
+    view: "content-filter",
+    data,
+    name: "filterByPathStr",
+    content: getList(".[name ~= #.filterByPathStr]"),
   };
 }
-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 findingItem = {
+  view: "expand",
+  className: "='in-finding in-finding-' + severity",
+  header: [
+    {
+      view: "pill-badge",
+      className: "in-severity",
+      data: `{
+  text: severity = 'high' ? 'High impact' : severity = 'medium' ? 'Saves size' : 'Advice',
+  color: severity = 'high' ? 'rgba(220, 50, 60, 0.3)' : severity = 'medium' ? 'rgba(255, 165, 0, 0.35)' : 'rgba(0, 170, 255, 0.25)',
+}`,
+    },
+    "text: title",
+    {
+      view: "pill-badge",
+      when: "savings",
+      data: "{ text: '~' + savings.formatBytes(), postfix: savingsShare.percent(2), color: 'rgba(120, 177, 9, 0.35)' }",
+      tooltip: "text: 'Estimated savings: size and share of the bundle'",
+    },
+    {
+      view: "inline-list",
+      className: "in-packages",
+      when: "packageNames",
+      data: "packageNames",
+      item: {
+        view: "link",
+        className: "mo-chip mo-chip-pkg",
+        data: `{ href: $.pageLink("package", {}), text: $ }`,
+      },
+    },
+  ],
+  content: {
+    view: "block",
+    className: "in-finding-content",
+    content: [
+      {
+        view: "markdown",
+        data: "message",
+      },
+      {
+        view: "block",
+        when: "packagesText",
+        className: "in-pre",
+        content: "text: packagesText",
+      },
+      {
+        view: "expand",
+        when: "affected",
+        className: "in-affected",
+        header: [
+          "text: 'Affected modules '",
+          "pill-badge: affected.size()",
+          "pill-badge: { text: affectedSize.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
+        ],
+        content: {
+          view: "list",
+          data: "affected",
+          limit: 20,
+          item: {
+            view: "block",
+            content: getTreeModule(),
+          },
+        },
+      },
+      {
+        view: "block",
+        when: "docsUrls",
+        className: "in-docs",
+        content: [
+          "text: 'Learn more: '",
+          {
+            view: "inline-list",
+            data: "docsUrls",
+            item: {
+              view: "link",
+              external: true,
+              data: "{ href: $, text: $ }",
+            },
+          },
+        ],
+      },
+    ],
   },
 };
-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 getInsightsTab() {
+  return {
+    view: "block",
+    className: "tab-scroll insights",
+    data: "$.bundleInsights()",
+    content: [
+      { view: "bundle-insights" },
+      {
+        view: "h3",
+        className: "in-title",
+        content: [
+          "text: 'Recommendations '",
+          {
+            view: "pill-badge",
+            when: "hasRecommendations",
+            data: "findings.size()",
+          },
+        ],
+      },
+      {
+        view: "alert-warning",
+        when: "not hasRecommendations",
+        content:
+          "html: 'Recommendations are only available for production bundles. Generate the report from a bundle built with <code>--dev false</code> to see them.'",
+      },
+      {
+        view: "alert-success",
+        when: "hasRecommendations and not findings",
+        content: "text: '✅ No recommendations: the bundle looks good!'",
+      },
+      {
+        view: "list",
+        data: "findings",
+        item: findingItem,
+      },
+    ],
+  };
+}
 function getCopyToClipboardButton({ textToCopy, className, text }) {
   return {
     view: "button",
@@ -302,10 +474,10 @@ function getCopyToClipboardButton({ textToCopy, className, text }) {
   };
 }
 //#endregion
-exports.externalLinkHtml = externalLinkHtml;
 exports.getCopyToClipboardButton = getCopyToClipboardButton;
+exports.getInsightsTab = getInsightsTab;
 exports.getModulesTree = getModulesTree;
 exports.getPackage = getPackage;
 exports.getPackageList = getPackageList;
+exports.getSortableContentFilter = getSortableContentFilter;
 exports.getTreeModule = getTreeModule;
-exports.metadata = metadata;