react-native-bundle-discovery 1.0.0-rc.8 → 1.0.0

package/.discoveryrc.js

@@ -0,0 +1,21 @@
+const path = require("path");
+
+module.exports = {
+  name: "react-native-bundle-discovery",
+  data: () => require("./tmp/before_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/highcharts.js"),
+      path.resolve(__dirname, "views/foamtree.js"),
+    ],
+  },
+};

package/README.md

@@ -4,7 +4,10 @@
 > Currently, everything is in a very early stage. The project is not yet ready for use.
 
 
-<img width="800" src="https://github.com/user-attachments/assets/211145d4-8fe7-499b-a372-9d752e878772" />
+A simple package that helps developers visualize and analyze the bundle size of React Native apps.
+With this tool, you can easily explore your app's codebase, identify large or heavy packages, and inspect the structure of modules and code within your project.
+
+<img width="800" alt="" src="./assets/img.png" />
 
 ### Setup:
 
@@ -25,7 +28,7 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 +  projectRoot: __dirname, 
 +   //^^^ ⚠️ WARNING: In a monorepo setup, this should point to the monorepo root,
 +   //                not the individual package directory.
-+})
++});
 
 -const config = {};
 +const config = {
@@ -37,7 +40,31 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 module.exports = mergeConfig(getDefaultConfig(__dirname), config);
 ```
 
+#### 3. Build the app
+
+As example, for iOS you can run the following command, and it will generate the `metro-stats.json` file in the root of your project:
+
+```bash
+npx react-native bundle \
+  --entry-file index.js \
+  --platform ios \
+  --dev false \
+  --bundle-output ios/main.jsbundle \
+  --assets-dest ios/assets
+```
+
+#### 4. View the report
+
+Run webserver to view the report:
+
+```bash
+npx react-native-bundle-discovery metro-stats.json
+```
+
+---
+
 **Similar projects:**
+
 - https://github.com/expo/atlas
 - https://github.com/v3ron/expo-atlas-without-expo
 - https://github.com/callstack/react-native-bundle-visualizer
@@ -45,7 +72,8 @@ module.exports = mergeConfig(getDefaultConfig(__dirname), config);
 - https://github.com/statoscope/statoscope
 - https://github.com/relative-ci/bundle-stats/tree/master/packages/cli
 
+--- 
 
-**Links:**
+**Built using Discovery.js:**
 - Build blocks for pages: https://discoveryjs.github.io/discovery/#views-showcase
 - Jora syntax: https://discoveryjs.github.io/jora/#article:jora-syntax-operators

package/lib/bin.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+const chalk = require("chalk");
+const { createServer } = require("@discoveryjs/cli");
+const config = require("../.discoveryrc.js");
+
+const filePath = process.argv[2];
+
+if (!filePath) {
+  console.error(
+    `Usage: '${chalk.green("npx react-native-bundle-discovery <path-to-file>")}', Please provide a path to a JSON file.`,
+  );
+  process.exit(1);
+}
+
+const jsonFilePath = path.resolve(process.cwd(), filePath);
+
+let fullJsonPath;
+
+try {
+  fullJsonPath = require.resolve(jsonFilePath);
+} catch (err) {
+  console.error(`Error loading file: ${chalk.red(jsonFilePath)}`);
+  console.error(err.message);
+  process.exit(1);
+}
+
+const PORT = process.env.PORT || 8079;
+
+const configFile = path.resolve(__dirname, "./.tmp.js");
+
+fs.writeFileSync(
+  configFile,
+  `module.exports = ${JSON.stringify(
+    { ...config, data: "<tmp>" },
+    null,
+    1,
+  ).replace(`"<tmp>"`, `() => require("${fullJsonPath}")`)};`,
+);
+
+createServer({
+  cache: false,
+  minify: true,
+  dev: false,
+  config: configFile,
+  configFile,
+}).then((server) =>
+  server.listen(PORT, () =>
+    console.log(`Server listen on ${chalk.green(`http://localhost:${PORT}`)}`),
+  ),
+);

package/lib/customSerializer.js

@@ -1,6 +1,7 @@
-const { writeFileSync, existsSync } = require("node:fs");
-const { resolve } = require("node:path");
-const { Buffer } = require("node:buffer");
+const { writeFileSync, existsSync } = require("fs");
+const { resolve } = require("path");
+const { Buffer } = require("buffer");
+const chalk = require("chalk");
 
 const NAME = require("../package.json").name;
 
@@ -113,7 +114,9 @@ function createJsonReport({
 
   writeFileSync(outputJsonPath, JSON.stringify(stats));
 
-  console.log(`[${NAME}]: Saved stats to`, outputJsonPath);
+  console.log(
+    `${chalk.yellow(`[${NAME}]`)}: Saved stats to ${chalk.green(outputJsonPath)}`,
+  );
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-discovery",
-  "version": "1.0.0-rc.8",
+  "version": "1.0.0",
   "main": "index.js",
   "bin": "lib/bin.js",
   "repository": "git@github.com:retyui/react-native-bundle-discovery.git",
@@ -9,10 +9,13 @@
   "scripts": {
     "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",
-    "postbuild": "yarn print-size",
-    "print-size": "npx @delucis/filesize-cli build/index.html",
-    "postinstall": "yarn patch-package"
+    "build": "npx discovery-build --config .discoveryrc.js --output build --serve-only-assets --single-file"
+  },
+  "dependencies": {
+    "@discoveryjs/cli": "2.14.2",
+    "@discoveryjs/discovery": "1.0.0-beta.93",
+    "chalk": "^4.1.2",
+    "highcharts": "12.2.0"
   },
   "peerDependencies": {
     "metro": "*"
@@ -23,17 +26,17 @@
     }
   },
   "files": [
+    "vendors",
     "lib",
-    "index.js"
+    "views",
+    "pages",
+    "index.js",
+    "setup.js",
+    "prepare.js",
+    "queryHelpers.js",
+    ".discoveryrc.js"
   ],
   "devDependencies": {
-    "@carrotsearch/foamtree": "3.5.1",
-    "@discoveryjs/cli": "2.14.2",
-    "@discoveryjs/discovery": "1.0.0-beta.93",
-    "highcharts": "12.2.0",
-    "lodash": "4.17.21",
-    "patch-package": "8.0.0",
     "prettier": "3.5.3"
-  },
-  "packageManager": "yarn@4.6.0"
+  }
 }

package/pages/_common.js

@@ -0,0 +1,266 @@
+const platformColor = `transformOptions.platform = 'android' ? 'rgba(194, 239, 116, .4)' : 'rgba(119, 31, 218, .4)'`;
+
+function getPackage(entry) {
+  return `
+  $packages: $.packages;
+  $totalSize: $.modules.sum(=>output.sizeInBytes);
+  $toModule: => {
+    ext:  $.path.getFileExtension(),
+    name: $.path, 
+    size: $.output.sizeInBytes.formatBytes(), 
+    percent: ($.output.sizeInBytes / $totalSize).percent(3),
+  };
+
+  ${entry}.group(=> path.getModulesName())
+     .map(=> ({ 
+        $pkgName: $.key;
+        pkgName: $pkgName, // example: lodash
+        size: $.value.sum(=>output.sizeInBytes),
+        pkgInstances: $.value
+          .group(=> path.split($pkgName).pick(0) + $pkgName)
+          .map(=> {
+             $pkgNameWithPath: $.key;
+             pkgName: $pkgNameWithPath, // example: node_modules/lodash
+             version: $packages.[path = $pkgNameWithPath][0].version,
+             size: $.value.sum(=> output.sizeInBytes),
+             modules: $.value.map(=> $.$toModule()),
+          }),
+     }))`;
+}
+
+function getPackageList({
+  data,
+  itemPkgName,
+  showCopiesBadge,
+  expanded,
+  limit,
+  subLimit,
+}) {
+  return {
+    view: "list",
+    data,
+    emptyText: "⚠️ No packages found",
+    limit,
+    item: {
+      view: "tree",
+      expanded,
+      itemConfig: {
+        content: [
+          itemPkgName,
+          "text: ' '",
+          "pill-badge:{ text: size.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
+          showCopiesBadge
+            ? {
+                view: "pill-badge",
+                when: "pkgInstances.size() > 1",
+                data: "(pkgInstances.size() - 1).pluralBadge(['copy','copies'], '+')",
+                color: "rgba(255, 0, 0, 0.35)",
+              }
+            : null,
+          {
+            view: "pill-badge",
+            data: "pkgInstances.modules.size().pluralBadge(['file','files'])",
+          },
+        ].filter(Boolean),
+        children: `$.pkgInstances`,
+        itemConfig: {
+          view: "tree-leaf",
+          limit: subLimit,
+          content: [
+            //
+            "text:pkgName",
+            "text:' '",
+            "pill-badge:{ text: 'v' + version, color: '#0af' }",
+            "pill-badge:{ text: size.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
+            {
+              view: "pill-badge",
+              data: "modules.size().pluralBadge(['file','files'])",
+            },
+          ],
+          children: `$.modules`,
+          itemConfig: {
+            view: "tree-leaf",
+            content: getTreeModule({ hasPercent: true }),
+          },
+        },
+      },
+    },
+  };
+}
+
+function getTreeModule({ hasTextMatch = false, hasPercent = false } = {}) {
+  return [
+    "pill-badge:{ text: ext, color: ext.getExtColor() }",
+    hasTextMatch
+      ? {
+          view: "link",
+          content: hasTextMatch ? "text-match" : "text",
+          data: `{
+          href: name.pageLink("module", {}),
+          text: name,
+          match: #.filterByPathStr
+        }`,
+        }
+      : {
+          view: "link",
+          data: `{ href: $.name.pageLink("module", {}), text: $.name }`,
+        },
+    "text:' '",
+    {
+      view: "badge",
+      when: "isEntry",
+      text: "Entrypoint",
+      color: "gold",
+      textColor: "black",
+    },
+    "pill-badge:{ text: size, color: 'rgba(120, 177, 9, 0.35)' }",
+    hasPercent
+      ? "pill-badge:{ text: percent, color: 'rgba(120, 177, 9, 0.35)' }"
+      : null,
+  ].filter(Boolean);
+}
+function getModulesTree({ data, limit }) {
+  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: `
+            [
+               {
+                 title:'Imported by modules',
+                 data: $.reasons,
+                 type: 'reasons',
+               },
+               {
+                 title:'Similar copies',
+                 data: $.duplicates,
+                 type: 'duplicates',
+               }
+            ].filter(=> $.data.size() > 0)
+          `,
+          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: getTreeModule(),
+                  },
+                },
+              },
+              {
+                when: 'type="duplicates"',
+                content: {
+                  view: "tree-leaf",
+                  content: [
+                    "text:title",
+                    "text:' '",
+                    "badge:{ text: $.data.size() }",
+                  ],
+                  children: `$.data`,
+                  itemConfig: {
+                    view: "tree-leaf",
+                    content: getTreeModule(),
+                  },
+                },
+              },
+            ],
+          },
+        },
+      },
+    },
+  };
+}
+
+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 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 getCopyToClipboardButton({ textToCopy, className }) {
+  return {
+    view: "button",
+    className: `${className ?? ""} copy-to-clipboard`,
+    data: `{ textToCopy: ${textToCopy} }`,
+    onClick(elm, data) {
+      clearTimeout(elm.__timer);
+      navigator.clipboard
+        .writeText(data.textToCopy)
+        .then(() => {
+          elm.classList.add("done");
+          elm.__timer = setTimeout(() => elm.classList.remove("done"), 2000);
+        })
+        .catch(() => {
+          elm.classList.add("err");
+          elm.__timer = setTimeout(() => elm.classList.remove("err"), 2000);
+        });
+    },
+  };
+}
+
+module.exports = {
+  getCopyToClipboardButton,
+  getPackage,
+  getPackageList,
+  externalLinkHtml,
+  getTreeModule,
+  getModulesTree,
+  metadata,
+};

package/pages/default.js

@@ -0,0 +1,194 @@
+const {
+  metadata,
+  getModulesTree,
+  getPackage,
+  getPackageList,
+} = require("./_common");
+
+const topMetaData = [
+  metadata.platform,
+  metadata.size,
+  metadata.source_code_size,
+  metadata.node_modules_size,
+  metadata.is_dev,
+  metadata.is_minified,
+];
+
+const TABS = {
+  TREEMAP_FOAMTREE: "treemap-foamtree",
+  MODULES: "modules",
+  PACKAGES: "packages",
+  DUPLICATES: "duplicates",
+};
+
+function parseHashRef(url = window.location.href) {
+  return new URL(url).hash.split(":")?.[1];
+}
+
+discovery.page.define("default", [
+  ...topMetaData,
+
+  {
+    view: "tabs",
+    name: "mainTabs",
+    className: "main-tabs",
+    value: parseHashRef() ?? TABS.TREEMAP_FOAMTREE,
+    tabs: [
+      {
+        value: TABS.TREEMAP_FOAMTREE,
+        text: "Treemap chart",
+        className: `main-tabs-${TABS.TREEMAP_FOAMTREE}`,
+      },
+      {
+        value: TABS.PACKAGES,
+        className: `main-tabs-${TABS.PACKAGES}`,
+        content: [
+          "text:'Packages '",
+          `pill-badge: modules.filter(=> path has "node_modules").group(=> path.getModulesName(), => 0).size()`,
+        ],
+      },
+      {
+        value: TABS.MODULES,
+        className: `main-tabs-${TABS.MODULES}`,
+        content: ["text:'Modules '", "pill-badge: modules.size()"],
+      },
+      {
+        value: TABS.DUPLICATES,
+        className: `main-tabs-${TABS.DUPLICATES}`,
+        content: [
+          "text:'Duplicate modules '",
+          "pill-badge: modules.filter(=> duplicates).size()",
+        ],
+      },
+    ],
+    content: {
+      view: "switch",
+      context(data, context) {
+        // FIXME - common nobody handle navigation in such way :(
+        const isHashChangeEvent = new Error("").stack.includes("Promise.all");
+        discovery.overridePageHashStateWithAnchor({
+          id: "default",
+          ref: isHashChangeEvent ? discovery.pageRef : context.mainTabs,
+        });
+        discovery.cancelScheduledRender();
+
+        const id = discovery.pageRef ?? TABS.TREEMAP_FOAMTREE;
+
+        setTimeout(() => {
+          discovery.dom.root
+            .querySelectorAll(".main-tabs>div>.onclick")
+            .forEach((e) => e.classList.remove("active"));
+          discovery.dom.root
+            .querySelectorAll(`.main-tabs .main-tabs-${id}`)
+            .forEach((e) => e.classList.add("active"));
+        }, 50);
+
+        return {
+          ...context,
+          id,
+        };
+      },
+      content: [
+        {
+          when: `#.id="${TABS.TREEMAP_FOAMTREE}"`,
+          content: {
+            view: "content-filter",
+            name: "filterByPathStr",
+            debounce: 300,
+            className: "foamtree-filter",
+            content: {
+              view: "foamtree",
+              data: `
+              $root: $.rootFolder;
+              $applyFilter: => #.filterByPathStr ? $.modules.filter(=> $.path ~= #.filterByPathStr) : $.modules;
+              $dataObject: $.$applyFilter()
+                .map(=> {path, size: $.output.sizeInBytes})
+                .transformFilesList($root, "foamtree");
+
+              {
+                options: { 
+                  dataObject: $dataObject,
+                  descriptionGroupSize: 0.05,
+                  descriptionGroupMinHeight: 30,
+                }
+              }
+              `,
+            },
+          },
+        },
+        {
+          when: `#.id="${TABS.MODULES}"`,
+          content: getModulesTree({
+            limit: 200,
+            data: `
+              $entryPoint: $.entryPointPath;
+              $totalSize: modules.sum(=>output.sizeInBytes);
+              $toModule: => {
+                ext:  $.path.getFileExtension(),
+                name: $.path, 
+                size: $.output.sizeInBytes.formatBytes(), 
+                percent: ($.output.sizeInBytes / $totalSize).percent(3),
+              };
+              modules.map(=> { 
+                ...$.$toModule(),
+                isEntry: $.isEntry,
+                reasons: $.dependents.map(=> $.$toModule()),
+                duplicates: $.duplicates.map(=> $.$toModule()),
+              })
+            `,
+          }),
+        },
+        {
+          when: `#.id="${TABS.PACKAGES}"`,
+          content: [
+            {
+              view: "content-filter",
+              data: `${getPackage(`modules.filter(=> path has "node_modules")`)}.sort(pkgInstances desc, size desc)`,
+              name: "filterByPathStr",
+              content: getPackageList({
+                showCopiesBadge: true,
+                expanded: false,
+                limit: 200,
+                subLimit: 50,
+                data: ".[pkgName ~= #.filterByPathStr]",
+                itemPkgName: {
+                  view: "link",
+                  content: "text-match",
+                  data: `{
+                          href: pkgName.pageLink("package", {}),
+                          text: pkgName,
+                          match: #.filterByPathStr
+                        }`,
+                },
+              }),
+            },
+          ],
+        },
+        {
+          when: `#.id="${TABS.DUPLICATES}"`,
+          content: getModulesTree({
+            data: `
+              // values
+              $duplicatesOnly: modules.filter(=> duplicates);
+              $totalSize: $duplicatesOnly.sum(=>output.sizeInBytes);
+              $toModule: => {
+                ext:  $.path.getFileExtension(),
+                name: $.path, 
+                size: $.output.sizeInBytes.formatBytes(), 
+                percent: ($.output.sizeInBytes / $totalSize).percent(3),
+              };
+              // return
+              $duplicatesOnly.map(=> { 
+                ...$.$toModule(),
+                reasons: $.dependents.map(=> $.$toModule()),
+                duplicates: $.duplicates.map(=> $.$toModule()),
+              })
+            `,
+          }),
+        },
+      ],
+    },
+  },
+
+  // END
+]);