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

package/README.md

@@ -4,7 +4,7 @@
 > Currently, everything is in a very early stage. The project is not yet ready for use.
 
 
-<img width="800" alt="" src="./assets/img.png" />
+<img width="800" src="https://github.com/user-attachments/assets/211145d4-8fe7-499b-a372-9d752e878772" />
 
 ### Setup:
 
@@ -25,7 +25,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,31 +37,7 @@ 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
@@ -69,8 +45,7 @@ npx react-native-bundle-discovery metro-stats.json
 - https://github.com/statoscope/statoscope
 - https://github.com/relative-ci/bundle-stats/tree/master/packages/cli
 
---- 
 
-**Built using Discovery.js:**
+**Links:**
 - 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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-discovery",
-  "version": "1.0.0-rc.13",
+  "version": "1.0.0-rc.8",
   "main": "index.js",
   "bin": "lib/bin.js",
   "repository": "git@github.com:retyui/react-native-bundle-discovery.git",
@@ -9,13 +9,10 @@
   "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"
-  },
-  "dependencies": {
-    "@discoveryjs/cli": "2.14.2",
-    "@discoveryjs/discovery": "1.0.0-beta.93",
-    "chalk": "^4.1.2",
-    "highcharts": "12.2.0"
+    "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"
   },
   "peerDependencies": {
     "metro": "*"
@@ -26,17 +23,17 @@
     }
   },
   "files": [
-    "vendors",
     "lib",
-    "views",
-    "pages",
-    "index.js",
-    "setup.js",
-    "prepare.js",
-    "queryHelpers.js",
-    ".discoveryrc.js"
+    "index.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/.discoveryrc.js

@@ -1,21 +0,0 @@
-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/pages/_common.js

@@ -1,266 +0,0 @@
-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

@@ -1,194 +0,0 @@
-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
-]);