react-native-bundle-discovery-ui 2.6.0 → 2.7.0

package/{views → dist/client/views}/foamtree.js

@@ -1,58 +1,39 @@
-const { FoamTree } = require("../vendors/foamtree.js");
-
+let vendors_foamtree_js = require("../../../vendors/foamtree.js");
+//#region src/client/views/foamtree.ts
 function injectTooltip(root) {
   const t = root.querySelector(".tooltip");
   if (t) return t;
-
   const tooltip = document.createElement("div");
   tooltip.className = "tooltip";
   tooltip.id = "foamtree-tooltip";
   root.appendChild(tooltip);
   return tooltip;
 }
-
 function prependDuplicateTo(label) {
-  if (label.includes(" ~ ")) {
-    return "<b class='i-duplicate'>Duplicate</b> " + label.split(" ~ ")[1];
-  }
+  if (label.includes(" ~ "))
+    return `<b class='i-duplicate'>Duplicate</b> ${label.split(" ~ ")[1]}`;
   return label;
 }
-
-// Based on https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/master/client/components/Treemap.jsx
-discovery.view.define("foamtree", function (el, config, rawData, context) {
-  if (Array.isArray(rawData?.options?.series)) {
+discovery.view.define("foamtree", (el, _config, rawData, context) => {
+  if (Array.isArray(rawData?.options?.series))
     rawData.options.series.forEach((e) => {
-      if (e.data?.[0]?.value !== undefined) {
-        // mutate data by link
+      if (e.data?.[0]?.value !== void 0)
         e.data = e.data.map((d) => d.value ?? null);
-      }
     });
-  }
-
-  // console.log({ rawData });
-
-  // Render after element will be added to the DOM
-  // to avoid "FoamTree: element has zero dimensions: 0 x 0" error
   setTimeout(() => {
     try {
-      // Dirty hack to fix shadow DOM issue, xd
       window.__el = el;
-
       const root = el.closest(".discovery-root");
       const tooltip = injectTooltip(root);
-
       window.addEventListener("resize", () => ft.resize(), { passive: true });
-
       root.addEventListener(
         "mousemove",
         (event) => {
           if (tooltip.style.display === "none") return;
-          tooltip.style.left = event.pageX + 10 + "px";
-          tooltip.style.top = event.pageY + 10 + "px";
-        },
-        {
-          passive: true,
+          tooltip.style.left = `${event.pageX + 10}px`;
+          tooltip.style.top = `${event.pageY + 10}px`;
         },
+        { passive: true },
       );
       el.addEventListener("mouseover", () => {
         tooltip.style.display = "block";
@@ -60,8 +41,7 @@ discovery.view.define("foamtree", function (el, config, rawData, context) {
       el.addEventListener("mouseout", () => {
         tooltip.style.display = "none";
       });
-
-      const ft = new FoamTree({
+      const ft = new vendors_foamtree_js.FoamTree({
         element: el,
         layout: "squarified",
         stacking: "flattened",
@@ -85,14 +65,10 @@ discovery.view.define("foamtree", function (el, config, rawData, context) {
         },
         onGroupDoubleClick: (e) => e.preventDefault(),
         onGroupHover(event) {
-          // Ignoring hovering on `FoamTree` branding group and the root group
-          if (event.group && event.group === rawData.options.dataObject) {
+          if (event.group && event.group === rawData.options.dataObject)
             return event.preventDefault();
-          }
-
           const { group } = event;
-
-          if (group && group.type) {
+          if (group?.type) {
             const htmlContent = [
               `<b class="tooltip-name">${group.type}</b>: ${prependDuplicateTo(group.label)}`,
               `<b>Size</b>: ${group.size}`,
@@ -101,22 +77,12 @@ discovery.view.define("foamtree", function (el, config, rawData, context) {
             ]
               .filter((e) => !!e)
               .join("<br/>");
-
             tooltip.style.display = "block";
             tooltip.innerHTML = htmlContent;
           } else {
             tooltip.style.display = "none";
             tooltip.innerHTML = "";
           }
-
-          // if (group) {
-          //   this.setState({
-          //     showTooltip: true,
-          //     tooltipContent: this.getTooltipContent(group)
-          //   });
-          // } else {
-          //   this.setState({showTooltip: false});
-          // }
         },
         ...rawData.options,
       });
@@ -134,3 +100,4 @@ discovery.view.define("foamtree", function (el, config, rawData, context) {
     }
   }, 0);
 });
+//#endregion

package/dist/client/views/highcharts.js

@@ -0,0 +1,33 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_views__theme = require("./_theme.js");
+let vendors_highcharts_js = require("../../../vendors/highcharts.js");
+vendors_highcharts_js = require_runtime.__toESM(vendors_highcharts_js);
+require("../../../vendors/highcharts-networkgraph.js");
+require("../../../vendors/highcharts-exporting.js");
+//#region src/client/views/highcharts.ts
+discovery.view.define("highcharts", (el, _config, rawData, context) => {
+  require_views__theme.doTheming(el);
+  if (Array.isArray(rawData?.options?.series))
+    rawData.options.series.forEach((e) => {
+      if (e.data?.[0]?.value !== void 0)
+        e.data = e.data.map((d) => d.value ?? null);
+    });
+  try {
+    vendors_highcharts_js.default.chart(
+      el,
+      vendors_highcharts_js.default.merge({}, rawData.options),
+    );
+  } catch (e) {
+    console.error(e, rawData);
+    discovery.view.render(
+      el,
+      {
+        view: "alert-danger",
+        data: '"Error rendering chart, please check the console for more information."',
+      },
+      rawData,
+      context,
+    );
+  }
+});
+//#endregion

package/{views → dist/client/views}/prettify.js

@@ -1,3 +1,4 @@
+//#region src/client/views/prettify.ts
 discovery.view.define(
   "source-prettify",
   async function renderPrettify(el, config, data, context) {
@@ -15,3 +16,4 @@ discovery.view.define(
     );
   },
 );
+//#endregion

package/dist/discoveryrc.js

@@ -0,0 +1,26 @@
+const require_rolldown_runtime = require("./rolldown-runtime-VH7oDXx4.js");
+let node_path = require("node:path");
+node_path = require_rolldown_runtime.__toESM(node_path);
+//#region src/discoveryrc.ts
+const config = {
+  name: "react-native-bundle-discovery",
+  data: () =>
+    require(
+      node_path.default.resolve(__dirname, "../../../tmp/metro-stats.json"),
+    ),
+  setup: node_path.default.resolve(__dirname, "client/setup.js"),
+  view: {
+    assets: [
+      node_path.default.resolve(__dirname, "../assets/global.css"),
+      node_path.default.resolve(__dirname, "client/pages/default.js"),
+      node_path.default.resolve(__dirname, "client/pages/module.js"),
+      node_path.default.resolve(__dirname, "client/pages/package.js"),
+      node_path.default.resolve(__dirname, "../assets/highcharts.css"),
+      node_path.default.resolve(__dirname, "client/views/prettify.js"),
+      node_path.default.resolve(__dirname, "client/views/highcharts.js"),
+      node_path.default.resolve(__dirname, "client/views/foamtree.js"),
+    ],
+  },
+};
+//#endregion
+module.exports = config;

package/dist/rolldown-runtime-VH7oDXx4.js

@@ -0,0 +1,42 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if ((from && typeof from === "object") || typeof from === "function")
+    for (
+      var keys = __getOwnPropNames(from), i = 0, n = keys.length, key;
+      i < n;
+      i++
+    ) {
+      key = keys[i];
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, {
+          get: ((k) => from[k]).bind(null, key),
+          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable,
+        });
+    }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (
+  (target = mod != null ? __create(__getProtoOf(mod)) : {}),
+  __copyProps(
+    isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default")
+      ? __defProp(target, "default", {
+          value: mod,
+          enumerable: true,
+        })
+      : target,
+    mod,
+  )
+);
+//#endregion
+Object.defineProperty(exports, "__toESM", {
+  enumerable: true,
+  get: function () {
+    return __toESM;
+  },
+});

package/{lib → dist}/rsdoctor.js

@@ -1,5 +1,7 @@
-const { resolve } = require("path");
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./src-BSLX-He2.js");
+let node_path = require("node:path");
+//#region ../shared/src/rsdoctor.ts
 const possibleEntryFiles = [
   "index.js",
   "index.jsx",
@@ -8,91 +10,61 @@ const possibleEntryFiles = [
   "index.mjs",
   "index.cjs",
 ];
-
 const doStructureCheck = (rsdoctorData) => {
   if (!(
     Array.isArray(rsdoctorData?.data?.configs) &&
     rsdoctorData.data.configs.length === 1
-  )) {
+  ))
     throw new Error(
       `Unexpected number of "data.configs[]" in rsdoctor-data.json. Work only with single config. Found: ${rsdoctorData?.data?.configs?.length}`,
     );
-  }
-
-  if (!Array.isArray(rsdoctorData?.data?.packageGraph?.packages)) {
+  if (!Array.isArray(rsdoctorData?.data?.packageGraph?.packages))
     throw new Error(
       `Unexpected "data.packageGraph.packages[]" in rsdoctor-data.json. Expected array. Found: ${typeof rsdoctorData?.data?.packageGraph?.packages}`,
     );
-  }
-
   const firstConfig = rsdoctorData.data.configs[0];
-
-  if (!(firstConfig.name === "rspack" || firstConfig.name === "webpack")) {
+  if (!(firstConfig.name === "rspack" || firstConfig.name === "webpack"))
     throw new Error(
       `Unsupported bundler: ${firstConfig.name}@${firstConfig.version}. Only 'rspack' and 'webpack' are supported.`,
     );
-  }
 };
-
 const getDependenciesMap = (rsdoctorData) => {
-  const depsMap = new Map(
+  return new Map(
     rsdoctorData.data.moduleGraph.dependencies.map((dep) => [dep.id, dep]),
   );
-  return depsMap;
 };
-
 const getEntryFile = (rsdoctorData) => {
-  const firstConfig = rsdoctorData?.data?.configs?.[0];
-  const entry = firstConfig?.config?.entry;
+  const firstConfig = rsdoctorData.data.configs[0];
+  const main = firstConfig.config.entry?.main;
   const entryFile =
-    typeof entry?.main === "string"
-      ? entry.main
-      : typeof entry?.main?.import === "string"
-        ? entry.main.import
-        : entry?.main.import[0];
-
-  if (entryFile) {
-    return resolve(firstConfig.root, entryFile);
-  }
-
+    typeof main === "string"
+      ? main
+      : typeof main?.import === "string"
+        ? main.import
+        : main?.import[0];
+  if (entryFile) return (0, node_path.resolve)(firstConfig.root, entryFile);
   const pathsToCheck = possibleEntryFiles.map((f) =>
-    resolve(firstConfig.root, f),
+    (0, node_path.resolve)(firstConfig.root, f),
   );
   const indexFile = rsdoctorData.data.moduleGraph.modules.find((mdl) =>
     pathsToCheck.some((entry) => mdl.path === entry),
   );
-
-  if (indexFile && indexFile.imported?.length === 0) {
-    return indexFile.path;
-  }
-
+  if (indexFile && indexFile.imported?.length === 0) return indexFile.path;
   return `${firstConfig.root}/index.js`;
 };
-
 const transformRSDoctorData = (rsdoctorData) => {
   doStructureCheck(rsdoctorData);
   const tmpDependenciesMap = getDependenciesMap(rsdoctorData);
   const firstConfig = rsdoctorData.data.configs[0];
   return {
-    date: Date.now(), // no info in rspack report
+    date: Date.now(),
     entryPoint: getEntryFile(rsdoctorData),
     rootFolder: firstConfig.root,
-    // envs: {},
     transformOptions: {
-      // customTransformOptions: {},
       dev: firstConfig.config.mode !== "production",
       minify: firstConfig.config.optimization?.minimize ?? false,
       platform: firstConfig.config.name ?? "ios",
-      // type: "module",
-      // unstable_transformProfile: "default",
     },
-    // Example of package:
-    // {
-    //   name: "@react-native/js-polyfills",
-    //   absolutePath:
-    //     "/Users/xd/tmp/RN84/node_modules/@react-native/js-polyfills",
-    //   version: "0.84.1",
-    // }
     packages: rsdoctorData.data.packageGraph.packages.map((pkg) => ({
       name: pkg.name,
       absolutePath: pkg.root,
@@ -100,31 +72,11 @@ const transformRSDoctorData = (rsdoctorData) => {
       source: { sizeInBytes: pkg.size?.sourceSize ?? 1 },
       output: { sizeInBytes: pkg.size?.parsedSize ?? 1 },
     })),
-    // Example of module:
-    // {
-    //   "path": "/Users/xd/tmp/RN84/node_modules/react-native/Libraries/BatchedBridge/BatchedBridge.js",
-    //   "source": {
-    //     "code": "",
-    //     "lineCount": 32,
-    //     "sizeInBytes": 954
-    //   },
-    //   "output": {
-    //     "code": "",
-    //     "lineCount": 1,
-    //     "sizeInBytes": 219
-    //   },
-    //   "dependencies": [
-    //     {
-    //       "absolutePath": "/Users/xd/tmp/RN84/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js",
-    //       "name": "./MessageQueue"
-    //     }
-    //   ]
-    // },
     modules: rsdoctorData.data.moduleGraph.modules.map((mdl) => ({
       path: mdl.path,
       source: {
-        code: "", // no code in rspack report
-        lineCount: 0, // no code to count lines in rspack report
+        code: "",
+        lineCount: 0,
         sizeInBytes: mdl.size?.sourceSize ?? 0,
       },
       output: {
@@ -136,14 +88,15 @@ const transformRSDoctorData = (rsdoctorData) => {
         .map((depNumId) => {
           const dep = tmpDependenciesMap.get(depNumId);
           return dep
-            ? { absolutePath: dep.resolvedRequest, name: dep.request }
+            ? {
+                absolutePath: dep.resolvedRequest,
+                name: dep.request,
+              }
             : null;
         })
         .filter((e) => e !== null),
     })),
   };
 };
-
-module.exports = {
-  transformRSDoctorData,
-};
+//#endregion
+exports.transformRSDoctorData = transformRSDoctorData;

package/{lib/isRsdoctorReport.js → dist/src-BSLX-He2.js}

@@ -1,14 +1,7 @@
-const chalk = require("chalk");
-
-const isRsdoctorReportPath = (reportPath) => {
-  try {
-    const reportJson = require(reportPath);
-    return isRsdoctorReport(reportJson, reportPath);
-  } catch {
-    return false;
-  }
-};
-
+const require_rolldown_runtime = require("./rolldown-runtime-VH7oDXx4.js");
+let chalk = require("chalk");
+chalk = require_rolldown_runtime.__toESM(chalk);
+//#region ../shared/src/isRsdoctorReport.ts
 const isRsdoctorReport = (reportJson, reportPath, noLogs) => {
   try {
     if (
@@ -17,7 +10,7 @@ const isRsdoctorReport = (reportJson, reportPath, noLogs) => {
     ) {
       !noLogs &&
         console.info(
-          `Detected ${chalk.red("rsdoctor")} format in the input file: ${chalk.green(reportPath)}`,
+          `Detected ${chalk.default.red("rsdoctor")} format in the input file: ${chalk.default.green(reportPath)}`,
         );
       return true;
     }
@@ -26,8 +19,18 @@ const isRsdoctorReport = (reportJson, reportPath, noLogs) => {
     return false;
   }
 };
-
-module.exports = {
-  isRsdoctorReport,
-  isRsdoctorReportPath,
+const isRsdoctorReportPath = (reportPath) => {
+  try {
+    const reportJson = require(reportPath);
+    return isRsdoctorReport(reportJson, reportPath);
+  } catch {
+    return false;
+  }
 };
+//#endregion
+Object.defineProperty(exports, "isRsdoctorReportPath", {
+  enumerable: true,
+  get: function () {
+    return isRsdoctorReportPath;
+  },
+});

package/package.json

@@ -1,18 +1,27 @@
 {
   "name": "react-native-bundle-discovery-ui",
-  "version": "2.6.0",
-  "main": "lib/bin.js",
-  "bin": "lib/bin.js",
-  "repository": "git@github.com:retyui/react-native-bundle-discovery.git",
+  "version": "2.7.0",
+  "description": "Browser UI for React Native bundle reports",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/retyui/react-native-bundle-discovery.git",
+    "directory": "packages/ui"
+  },
   "author": "David <4661784+retyui@users.noreply.github.com>",
   "license": "MIT",
+  "main": "./dist/bin.js",
+  "bin": "./dist/bin.js",
+  "files": [
+    "dist",
+    "!dist/.tmp.js",
+    "assets",
+    "vendors"
+  ],
   "scripts": {
-    "srv": "node ./lib/bin.js server",
-    "analyze": "node ./_cli/bin.js analyze",
-    "tmp": "yarn srv /Users/davyd.narbutovich/tmp/RNDiscovery/metro-stats.json",
-    "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"
+    "build": "run -T tsdown && run -T prettier --write --log-level warn --ignore-path= \"dist/**/*.js\"",
+    "typecheck": "run -T tsc -p tsconfig.json && run -T tsc -p src/client/tsconfig.json",
+    "dev": "run -T tsdown && NODE_ENV=development discovery --config dist/discoveryrc.js",
+    "prepack": "cp ../../README.md README.md"
   },
   "dependencies": {
     "@discoveryjs/cli": "2.14.7",
@@ -21,29 +30,19 @@
     "minimist": "^1.2.8",
     "prettier": "^3.9.6"
   },
+  "devDependencies": {
+    "@react-native-bundle-discovery/shared": "0.0.0",
+    "@types/minimist": "^1.2.5"
+  },
   "peerDependencies": {
-    "metro": "*"
+    "metro": ">=0.68.0"
   },
   "peerDependenciesMeta": {
     "metro": {
       "optional": true
     }
   },
-  "files": [
-    "vendors",
-    "lib",
-    "!lib/.tmp.js",
-    "views",
-    "pages",
-    "index.js",
-    "setup.js",
-    "prepare.js",
-    "queryHelpers.js",
-    ".discoveryrc.js"
-  ],
-  "packageManager": "yarn@4.18.0",
-  "devDependencies": {
-    "acorn": "^8.18.0",
-    "acorn-walk": "^8.3.5"
+  "publishConfig": {
+    "access": "public"
   }
-}
+}

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,94 +0,0 @@
-#!/usr/bin/env node
-const minimist = require("minimist");
-
-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 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];
-const isServerCommand = command === "server";
-const isBuildCommand = command === "build";
-const isImplicitServerCommand =
-  Boolean(command) && !isServerCommand && !isBuildCommand;
-
-if (argv.help || !command) {
-  printHelp();
-  process.exit(0);
-}
-
-if (isServerCommand || isImplicitServerCommand) {
-  const file = isImplicitServerCommand ? argv._[0] : argv._[1];
-  if (!file) {
-    fail("Missing required argument: <file>");
-  }
-
-  const rawPort =
-    argv.port ?? (isImplicitServerCommand ? argv._[1] : 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 (isBuildCommand) {
-  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}`);