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

package/dist/client/views/compare.js

@@ -110,7 +110,7 @@ function renderWarnings({ transformOptionsDiff, summary }) {
   if (items.length === 0) return "";
   return `
     <div class="cmp-warning">
-      ⚠️ The reports were built with different options, so sizes are not directly comparable: ${items.join(", ")}
+      The reports were built with different options, so sizes are not directly comparable: ${items.join(", ")}
     </div>`;
 }
 function render({ comparison: c, modulePaths }) {
@@ -165,7 +165,7 @@ function render({ comparison: c, modulePaths }) {
     return row({
       name: pkg.id,
       href: packageHref(name),
-      badge: ` ${require_views__html.chip("deprecated", "warn")}`,
+      badge: ` ${require_views__html.chip("deprecated", "deprecated")}`,
       detail: require_views__html.escapeHTML(pkg.reason ?? ""),
       delta: 0,
     });
@@ -209,7 +209,7 @@ function render({ comparison: c, modulePaths }) {
     </div>
     ${renderWarnings(c)}
     ${renderCards(c)}
-    ${hasChanges ? "" : `<div class="dup-empty cmp-empty">✅ No differences between the reports</div>`}
+    ${hasChanges ? "" : `<div class="dup-empty cmp-empty">No differences between the reports.</div>`}
     <div class="cmp-sections">
       ${section("Biggest growth", "by package / folder", contributors)}
       ${section("Package version changes", require_views__html.plural(versionChanges.length, "package"), versionChanges)}

package/dist/client/views/importGraph.js

@@ -118,7 +118,7 @@ function createGraph(host, data) {
       svg("circle", {
         r: radius(point),
         fill: nodeColor(point.data),
-        stroke: dark ? "#111" : "#fff",
+        stroke: dark ? "#161618" : "#f1f1ef",
         "stroke-width": 1.5,
       }),
     );

package/dist/client/views/insights.js

@@ -1,3 +1,4 @@
+require("../sizeHeat.js");
 const require_views__html = require("./_html.js");
 //#region src/client/views/insights.ts
 function topList(title, items, page, badge) {
@@ -7,10 +8,10 @@ function topList(title, items, page, badge) {
       <div class="mo-card-label">${title}</div>
       ${items
         .map(
-          (item) => `
+          (item, index) => `
       <a class="in-row" href="${require_views__html.escapeHTML(discovery.encodePageHash(page, item.name))}">
         <span class="in-row-name" title="${require_views__html.escapeHTML(item.name)}">${require_views__html.escapeHTML(item.name)}${badge ? badge(item) : ""}</span>
-        <span class="in-row-size">${require_views__html.formatBytes(item.size)}</span>
+        <span class="in-row-size${index < 3 && item.size > 716800 ? ` size-heat size-heat-${3 - index}` : ""}">${require_views__html.formatBytes(item.size)}</span>
         <span class="in-row-share">${require_views__html.formatPercent(item.share)}</span>
         <span class="in-row-bar"><span style="width:${Math.max(item.bar * 100, 1).toFixed(2)}%"></span></span>
       </a>`,

package/dist/client/views/moduleOverview.js

@@ -15,7 +15,7 @@ function renderHeader(o) {
       ? require_views__html.chip(`Injected by ${o.injectedBy}`, "warn")
       : "",
     o.pkg?.metadata?.deprecated
-      ? require_views__html.chip("Deprecated", "danger")
+      ? require_views__html.chip("Deprecated", "deprecated")
       : "",
     o.pkg?.metadata && !o.pkg.metadata.isLatest && o.pkg.metadata.latestVersion
       ? require_views__html.chip(
@@ -30,7 +30,7 @@ function renderHeader(o) {
   ].join("");
   return `
     <div class="mo-header">
-      <span class="mo-ext" style="background:${extColor(o.ext)}">${require_views__html.escapeHTML(o.ext)}</span>
+      <span class="mo-ext">${require_views__html.escapeHTML(o.ext)}</span>
       <div class="mo-title">
         <div class="mo-dir">${require_views__html.escapeHTML(o.dir)}</div>
         <div class="mo-file">${require_views__html.escapeHTML(o.file)}</div>
@@ -38,18 +38,6 @@ function renderHeader(o) {
       </div>
     </div>`;
 }
-function extColor(ext) {
-  const colors = {
-    js: "#f1e05a",
-    ts: "#3178c6",
-    tsx: "#3178c6",
-    json: "#e34c26",
-    svg: "#e69f0d",
-    css: "#563d7c",
-    png: "#e44b23",
-  };
-  return `${colors[ext] ?? colors.js}55`;
-}
 function renderCards(o) {
   const delta = o.sourceSize ? o.outputSize / o.sourceSize - 1 : 0;
   const deltaText =

package/dist/client/views/packageOverview.js

@@ -17,7 +17,9 @@ function renderHeader(o) {
         "pkg",
       ),
     ),
-    o.deprecated.length ? require_views__html.chip("Deprecated", "danger") : "",
+    o.deprecated.length
+      ? require_views__html.chip("Deprecated", "deprecated")
+      : "",
     o.isOutdated && o.latestVersion
       ? require_views__html.chip(
           `Latest v${require_views__html.escapeHTML(o.latestVersion)}`,

package/dist/client/views/reportBar.js

@@ -18,6 +18,9 @@ function chip(text, kind, title) {
 }
 function renderBuild(s) {
   const chips = [
+    s.kind && s.kind !== "metro"
+      ? chip(require_views__html.escapeHTML(s.kind), "platform", "Report kind")
+      : "",
     s.platform
       ? chip(
           require_views__html.escapeHTML(platformName(s.platform)),
@@ -28,7 +31,7 @@ function renderBuild(s) {
   if (s.dev === true)
     chips.push(
       chip(
-        "⚠ Dev bundle",
+        "Dev bundle",
         "warn",
         "__DEV__ is true: the bundle has dev-only code, so sizes are bigger than in production. Build with --dev false.",
       ),
@@ -38,7 +41,7 @@ function renderBuild(s) {
   if (s.minify === false)
     chips.push(
       chip(
-        "⚠ Not minified",
+        "Not minified",
         "warn",
         "Minify is off: sizes are bigger than in a release build. Build with --minify true.",
       ),

package/dist/client/views/treemap.js

@@ -67,7 +67,7 @@ const HUE_SHIFT_STEPS = [8, 4];
 const MIN_SHADED_SIZE = 6;
 const HEADER_HEIGHT = 16;
 const BREADCRUMB_HEIGHT = 26;
-const FONT = "11px system-ui, -apple-system, sans-serif";
+const FONT = '11px "Geist Mono", ui-monospace, monospace';
 const MAX_SCALE = 64;
 const COLOR_BY_OPTIONS = [
   {

package/dist/discoveryrc.js

@@ -20,6 +20,7 @@ const config = {
   setup: node_path.default.resolve(__dirname, "client/setup.js"),
   view: {
     assets: [
+      node_path.default.resolve(__dirname, "client/fonts.js"),
       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"),

package/dist/rsdoctor.js

@@ -1,5 +1,22 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-Bp8pPQrQ.js");
+const require_src = require("./src-B0s7wyFp.js");
+//#region src/rsdoctor.ts
+/** Loads a report for the generated discovery.js config and adds recommendations */
+function loadReport({ path, rsdoctor, esbuild, compare }) {
+  const data = require(path);
+  const report = require_src.withRecommendations(
+    rsdoctor
+      ? require_src.transformRSDoctorData(data)
+      : esbuild
+        ? require_src.transformEsbuildMetafile(data, path)
+        : data,
+  );
+  return compare
+    ? require_src.withComparison(report, require(compare), compare)
+    : report;
+}
+//#endregion
+exports.loadReport = loadReport;
 exports.transformEsbuildMetafile = require_src.transformEsbuildMetafile;
 exports.transformRSDoctorData = require_src.transformRSDoctorData;
 exports.withComparison = require_src.withComparison;

package/dist/{src-Bp8pPQrQ.js → src-B0s7wyFp.js}

@@ -193,6 +193,7 @@ const transformEsbuildMetafile = (metafile, reportPath) => {
     };
   });
   return {
+    kind: "esbuild",
     date: Date.now(),
     entryPoint: entryPoint ? toAbsolute(entryPoint) : "",
     rootFolder,
@@ -289,6 +290,7 @@ const transformRSDoctorData = (rsdoctorData) => {
   const tmpDependenciesMap = getDependenciesMap(rsdoctorData);
   const firstConfig = rsdoctorData.data.configs[0];
   return {
+    kind: "rsdoctor",
     date: Date.now(),
     entryPoint: getEntryFile(rsdoctorData),
     rootFolder: firstConfig.root,
@@ -406,7 +408,9 @@ const recommendation$14 = {
     const details = deprecatedPackages
       .map(({ id, reason, latestVersion }) => {
         const latest = latestVersion ? ` (latest: ${latestVersion})` : "";
-        return reason ? ` - ${id}${latest}: ${reason}` : ` - ${id}${latest}`;
+        return reason
+          ? ` - \`${id}\`${latest}: ${reason}`
+          : ` - \`${id}\`${latest}`;
       })
       .join("\n");
     return {
@@ -854,7 +858,7 @@ const recommendation$12 = {
     );
     if (bundledDevPackages.length === 0) return null;
     return {
-      message: `Detected dev-only packages in the production bundle: ${bundledDevPackages.join(", ")}. 
+      message: `Detected dev-only packages in the production bundle: ${bundledDevPackages.map((id) => `\`${id}\``).join(", ")}. 
 
 Move debug-only imports/usage behind \`__DEV__\` checks so Metro can exclude them from release builds, see example below:
 
@@ -1029,7 +1033,7 @@ const recommendation$9 = {
     if (outdatedPackages.length === 0) return null;
     const details = outdatedPackages
       .map(({ id, createdAt, ageInYears, latestVersion }) => {
-        return ` - ${id} (${`published ${createdAt.slice(0, 10)}, ${ageInYears.toFixed(1)} years ago`}${latestVersion ? `, latest: ${latestVersion}` : ""})`;
+        return ` - \`${id}\` (${`published ${createdAt.slice(0, 10)}, ${ageInYears.toFixed(1)} years ago`}${latestVersion ? `, latest: ${latestVersion}` : ""})`;
       })
       .join("\n");
     return {
@@ -1339,13 +1343,13 @@ const recommendation$2 = {
   id: "rn-issue-promise-polyfill",
   title: "Remove Promise polyfills",
   check: (report) => {
-    if (report.kind === "webpack") return null;
     const packages = report.packages;
     const modules = report.modules;
     const reactNativeVersion = getReactNativeVersion(packages);
-    const deadPromiseModules = modules.filter((module) =>
-      module?.path?.includes(deadCode),
-    );
+    const deadPromiseModules =
+      report.kind === "metro"
+        ? modules.filter((module) => module?.path?.includes(deadCode))
+        : [];
     const hasDeadPromiseModule = deadPromiseModules.length > 0;
     const removablePolyfills = [];
     const removableModules = [...deadPromiseModules];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-discovery-ui",
-  "version": "2.9.0",
+  "version": "2.9.2",
   "description": "Browser UI for React Native bundle reports",
   "repository": {
     "type": "git",
@@ -13,17 +13,17 @@
   "bin": "./dist/bin.js",
   "files": [
     "dist",
-    "!dist/.tmp.js",
+    "!dist/.tmp*.js",
     "assets"
   ],
   "scripts": {
-    "build": "run -T tsdown && run -T prettier --write --log-level warn --ignore-path= \"dist/**/*.js\"",
+    "build": "run -T tsdown && node scripts/fonts.mjs && 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",
+    "dev": "run -T tsdown && node scripts/fonts.mjs && NODE_ENV=development discovery --config dist/discoveryrc.js",
     "prepack": "cp ../../README.md README.md"
   },
   "dependencies": {
-    "@discoveryjs/cli": "2.14.7",
+    "@discoveryjs/cli": "2.15.0",
     "@discoveryjs/discovery": "1.0.0-beta.99",
     "chalk": "^4.1.2",
     "d3-hierarchy": "^3.1.2",
@@ -32,6 +32,8 @@
     "prettier": "^3.9.6"
   },
   "devDependencies": {
+    "@fontsource-variable/geist": "^5.3.0",
+    "@fontsource-variable/geist-mono": "^5.3.0",
     "@react-native-bundle-discovery/shared": "0.0.0",
     "@types/d3-hierarchy": "^3.1.7",
     "@types/minimist": "^1.2.5"