react-native-bundle-discovery-ui 2.3.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/package.json

@@ -1,12 +1,15 @@
 {
   "name": "react-native-bundle-discovery-ui",
-  "version": "2.3.0",
+  "version": "2.5.0-rc.1",
   "main": "lib/bin.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": {
+    "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"

package/pages/_common.js

@@ -17,17 +17,56 @@ function getPackage(entry) {
         pkgName: $pkgName, // example: lodash
         size: $.value.sum(=>output.sizeInBytes),
         pkgInstances: $.value
-          .group(=> path.split($pkgName).pick(0) + $pkgName)
+          .group(=> path.split('node_modules/' + $pkgName).pick(0) + 'node_modules/' + $pkgName)
           .map(=> {
              $pkgNameWithPath: $.key;
+             $pkgInfo: $packages.[path = $pkgNameWithPath][0];
              pkgName: $pkgNameWithPath, // example: node_modules/lodash
-             version: $packages.[path = $pkgNameWithPath][0].version,
+             version: $pkgInfo.version,
+             metadata: $pkgInfo.metadata,
              size: $.value.sum(=> output.sizeInBytes),
              modules: $.value.map(=> $.$toModule()),
           }),
      }))`;
 }
 
+const metadataTooltip = {
+  view: "text",
+  when: "metadata.createdAt",
+  data: "'Published ' + metadata.createdAt.formatDate() + ' (' + metadata.createdAt.timeAgo() + ')'",
+};
+const outdatedColor = "rgba(255, 165, 0, 0.35)";
+
+// Compact npm metadata badges (`metadata` from the report)
+function getMetadataBadges({
+  deprecated,
+  outdated,
+  latestVersion,
+  renderLatestVersion,
+}) {
+  return [
+    {
+      view: "pill-badge",
+      when: deprecated,
+      data: `{ text: '⚠️ deprecated', message: ${deprecated} }`,
+      color: "#cf222e",
+      textColor: "white",
+      darkColor: "#f85149",
+      darkTextColor: "white",
+      tooltip: "text: message",
+    },
+    renderLatestVersion
+      ? {
+          view: "pill-badge",
+          when: outdated,
+          data: `{ text: '↑ v' + ${latestVersion} }`,
+          color: outdatedColor,
+          tooltip: "text: 'Latest version on npm'",
+        }
+      : null,
+  ].filter(Boolean);
+}
+
 function getPackageList({
   data,
   itemPkgName,
@@ -49,6 +88,13 @@ function getPackageList({
           itemPkgName,
           "text: ' '",
           "pill-badge:{ text: size.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
+          // Summary of all instances (visible when the tree is collapsed)
+          ...getMetadataBadges({
+            deprecated: "pkgInstances.metadata.deprecated[0]",
+            outdated: "pkgInstances.[metadata and not metadata.isLatest]",
+            latestVersion: "pkgInstances.metadata.latestVersion[0]",
+            renderLatestVersion: false,
+          }),
           showCopiesBadge
             ? {
                 view: "pill-badge",
@@ -70,12 +116,23 @@ function getPackageList({
             //
             "text:pkgName",
             "text:' '",
-            "pill-badge:{ text: 'v' + version, color: '#0af' }",
+            {
+              view: "pill-badge",
+              data: "{ text: 'v' + version, metadata }",
+              color: "#0af",
+              tooltip: metadataTooltip,
+            },
             "pill-badge:{ text: size.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
             {
               view: "pill-badge",
               data: "modules.size().pluralBadge(['file','files'])",
             },
+            ...getMetadataBadges({
+              deprecated: "metadata.deprecated",
+              outdated: "metadata and not metadata.isLatest",
+              latestVersion: "metadata.latestVersion",
+              renderLatestVersion: true,
+            }),
           ],
           children: `$.modules`,
           itemConfig: {

package/pages/module.js

@@ -11,15 +11,17 @@ function getMetroWarn({ when, href, linkText, content }) {
     className: "m-v-8",
     content: [
       ...content,
-      {
-        view: "link",
-        data: {
-          external: true,
-          href,
-          text: linkText,
-        },
-      },
-    ],
+      linkText && href
+        ? {
+            view: "link",
+            data: {
+              external: true,
+              href,
+              text: linkText,
+            },
+          }
+        : null,
+    ].filter(Boolean),
   };
 }
 
@@ -30,7 +32,8 @@ discovery.page.define("module", {
     ...$, 
     currentModule: $currentModule,
     isEntry: $currentModule.isEntry,
-    isInjectedByMetro: $currentModule.path = '__prelude__' or $currentModule.path has '@react-native/js-polyfills',  
+    isInjectedByMetro: $currentModule.path = '__prelude__' or $currentModule.path has '@react-native/js-polyfills',
+    isWebpackRuntime: $currentModule.path has '__runtime__',
   }`,
   content: [
     {
@@ -57,12 +60,12 @@ discovery.page.define("module", {
         },
         {
           value: "networkGraph",
-          when: "not isInjectedByMetro and not isEntry",
+          when: "not isInjectedByMetro and not isEntry and not isWebpackRuntime",
           text: "Imported by modules",
         },
         {
           value: "mduplicates",
-          when: "not isInjectedByMetro and not isEntry and currentModule.duplicates",
+          when: "not isInjectedByMetro and not isEntry and not isWebpackRuntime and currentModule.duplicates",
           text: "Duplicates",
         },
       ],
@@ -81,6 +84,13 @@ discovery.page.define("module", {
                 href: "https://github.com/facebook/metro/blob/f595e9e1c9021ad372b489be8958cc298eb1e0d9/packages/metro/src/lib/getPreludeCode.js#L25-L33",
                 linkText: "getPreludeCode.js",
               }),
+              getMetroWarn({
+                when: "$.currentModule.path = '__runtime__'",
+                content: [
+                  "html: '<b>__runtime__</b>'",
+                  "text: ' is a special runtime code that was generated by the Webpack/Rspack bundler'",
+                ],
+              }),
               getMetroWarn({
                 when: "$.currentModule.path has '@react-native/js-polyfills'",
                 content: [

package/pages/package.js

@@ -24,6 +24,10 @@ discovery.page.define("package", {
       currentPkgWithUniqVer: $pkg.pkgName + ($copies = 0 ? '@' + $ver : ''),
       currentPkgWithUniqVerNpm: $pkg.pkgName + ($copies = 0 ? '/v/' + $ver : ''),
       currentPkg: $pkg,
+      currentPkgInstancesWithMetadata: $pkg.pkgInstances.[metadata],
+      currentPkgDeprecated: $pkg.pkgInstances.[metadata.deprecated],
+      currentPkgOutdated: $pkg.pkgInstances.[metadata and not metadata.isLatest],
+      currentPkgLatestVersion: $pkg.pkgInstances.metadata.latestVersion[0],
     }
   `,
   content: [
@@ -56,6 +60,22 @@ discovery.page.define("package", {
             }`,
           ],
         },
+        {
+          when: "$.currentPkgDeprecated",
+          view: "h2",
+          className: "inline-block no-margin",
+          content: `badge: { text: 'deprecated', color: "rgba(255, 0, 0, 0.35)" }`,
+        },
+        {
+          when: "$.currentPkgOutdated",
+          view: "h2",
+          className: "inline-block no-margin",
+          content: `badge: {
+            prefix: 'latest',
+            text: 'v' + $.currentPkgLatestVersion,
+            color: "rgba(255, 165, 0, 0.35)"
+          }`,
+        },
         getCopyToClipboardButton({
           textToCopy: `$.currentPkg.pkgName`,
           className: "m-l-0_5em",
@@ -63,6 +83,20 @@ discovery.page.define("package", {
       ],
     },
 
+    {
+      when: "$.currentPkgDeprecated",
+      view: "list",
+      data: "$.currentPkgDeprecated",
+      item: {
+        view: "alert-danger",
+        content: [
+          "html: '<b>Deprecated</b> '",
+          "text: 'v' + version + (#.data.currentPkgHasCopies ? ' (' + pkgName + ')' : '') + ': '",
+          "text: metadata.deprecated",
+        ],
+      },
+    },
+
     "html: '<br>'",
 
     {
@@ -112,6 +146,66 @@ discovery.page.define("package", {
       ],
     },
 
+    {
+      when: "$.currentPkgInstancesWithMetadata",
+      view: "block",
+      content: [
+        "h3: 'Versions'",
+        {
+          view: "table",
+          data: "$.currentPkgInstancesWithMetadata",
+          cols: [
+            { header: "Path", content: "text: pkgName" },
+            {
+              header: "Version",
+              content: "pill-badge:{ text: 'v' + version, color: '#0af' }",
+            },
+            {
+              header: "Published",
+              data: "metadata.createdAt",
+              content: [
+                "text: formatDate()",
+                "text: ' '",
+                "pill-badge:{ text: timeAgo() }",
+              ],
+            },
+            {
+              header: "Latest",
+              content: [
+                {
+                  view: "link",
+                  external: true,
+                  data: `{
+                    href: "https://www.npmjs.com/package/" + #.data.currentPkg.pkgName + "/v/" + metadata.latestVersion,
+                    text: 'v' + metadata.latestVersion,
+                  }`,
+                },
+              ],
+            },
+            {
+              header: "Status",
+              content: {
+                view: "switch",
+                content: [
+                  {
+                    when: "metadata.deprecated",
+                    content: `badge: { text: 'deprecated', color: "rgba(255, 0, 0, 0.35)" }`,
+                  },
+                  {
+                    when: "metadata.isLatest",
+                    content: `badge: { text: 'latest', color: "rgba(120, 177, 9, 0.35)" }`,
+                  },
+                  {
+                    content: `badge: { text: 'outdated', color: "rgba(255, 165, 0, 0.35)" }`,
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      ],
+    },
+
     "html: '<hr>'",
 
     {

package/queryHelpers.js

@@ -144,6 +144,24 @@ Please do the following:
     const idx = filename.lastIndexOf(".");
     return idx === -1 ? "js" : filename.slice(idx + 1);
   },
+  // "2022-06-14T19:46:38.369Z" -> "2022-06-14"
+  formatDate(isoDate) {
+    return isoDate ? new Date(isoDate).toISOString().slice(0, 10) : "";
+  },
+  // "2022-06-14T19:46:38.369Z" -> "3 years ago"
+  timeAgo(isoDate) {
+    if (!isoDate) return "";
+    const days = Math.floor((Date.now() - new Date(isoDate)) / 86_400_000);
+    const [count, unit] =
+      days >= 365
+        ? [Math.floor(days / 365), ["year", "years"]]
+        : days >= 30
+          ? [Math.floor(days / 30), ["month", "months"]]
+          : [days, ["day", "days"]];
+    return count === 0
+      ? "today"
+      : `${helpers.pluralWithCount(count, unit)} ago`;
+  },
   toFixed(value, fractionDigits = 2) {
     return Number(value).toFixed(fractionDigits);
   },
@@ -161,14 +179,6 @@ Please do the following:
   isPackageImport(moduleName) {
     return moduleName?.[0] !== ".";
   },
-  // isRuntimeCode(moduleName) {
-  //   return (
-  //     moduleName === "__prelude__" ||
-  //     moduleName.includes("@babel/runtime") ||
-  //     moduleName.includes("metro-runtime") ||
-  //     moduleName.includes("@react-native/js-polyfills")
-  //   );
-  // },
   transformFilesList(files, rootFolder, type) {
     const nodeModulesMap = { children: {}, size: 0 };
     const sourceCodeMap = { children: {}, size: 0 };
@@ -177,6 +187,9 @@ Please do the following:
       if (path === "__prelude__") {
         path = "node_modules/__prelude__";
       }
+      if (path === "__runtime__") {
+        path = "node_modules/__runtime__";
+      }
 
       const shortPath = path.replace(rootFolder + "/", "");
       const isNodeModule = shortPath.includes("node_modules/");
@@ -195,6 +208,7 @@ Please do the following:
         if (index === parts.length - 1) {
           current[part].size = size;
           current[part].path = shortPath;
+          current[part].fullPath = path;
         }
 
         current = current[part].children;
@@ -310,6 +324,7 @@ function toGroups(node, label) {
   const common = {
     label,
     weight: node.size,
+    fullPath: node.fullPath,
     files: node.files,
     type: node.type,
     size: helpers.formatBytes(node.size),
@@ -332,6 +347,9 @@ function randomInt(min, max) {
 
 const nm = "node_modules/";
 function shortenPath(path, nodeModulesMap) {
+  if (path.startsWith(nm + ".pnpm/")) {
+    path = path.replaceAll(nm + ".pnpm/", "");
+  }
   let index = path.lastIndexOf(nm);
 
   if (index > 0) {