react-native-bundle-discovery 1.0.0 → 1.1.0

package/.discoveryrc.js

@@ -2,7 +2,7 @@ const path = require("path");
 
 module.exports = {
   name: "react-native-bundle-discovery",
-  data: () => require("./tmp/before_metro-stats.json"),
+  data: () => require("./tmp/rainbow-metro-stats.json"),
   setup: path.resolve(__dirname, "setup.js"),
   view: {
     assets: [
@@ -14,6 +14,7 @@ module.exports = {
       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/README.md

@@ -1,17 +1,25 @@
 # react-native-bundle-discovery
 
-> [!WARNING]
-> Currently, everything is in a very early stage. The project is not yet ready for use.
-
-
 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" />
 
+
+### What you should consider when analyzing your bundle
+
+1. if you use **React 19** then it's time to remove a `prop-types` package from your bundle.
+2. Search for `development|debug|dev` modules in your production JS bundle (it's a dead code that should not be there).
+3. Also check polyfills duplicates (search example:  `url|fetch|crypto|buffer|base-?64`).
+4. Verify that you don't have any similar packages in your bundle (search example: `object|just-|debounce|ramda|lodash|underscore`). I often see that devs use both `lodash/debounce`, `lodash.debounce` and `debounce` in their projects. Or mix `ramda`, `underscore` and `lodash`._
+5. Try to find `package.json$` files in your bundle. They are often used to get only the package `version/name` but all other fields are not needed in the bundle.
+6. Please provide your ideas soo other devs can benefit from them :)
+
+
 ### Setup:
 
 #### 1. Install
+
 ```bash
 yarn add -D react-native-bundle-discovery
 ```
@@ -23,9 +31,9 @@ yarn add -D react-native-bundle-discovery
 const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 +const {createSerializer} = require('react-native-bundle-discovery');
 
-+const mySerializer = createSerializer({  
++const mySerializer = createSerializer({
 +  includeCode: true, // Useful if you want to compare source/bundle code (but a report file will be larger)
-+  projectRoot: __dirname, 
++  projectRoot: __dirname,
 +   //^^^ ⚠️ WARNING: In a monorepo setup, this should point to the monorepo root,
 +   //                not the individual package directory.
 +});
@@ -63,6 +71,21 @@ npx react-native-bundle-discovery metro-stats.json
 
 ---
 
+### `createSerializer(optiosn: Options)`
+
+| Prop                   | Default value             | Description                                                                                                                              |
+| ---------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| serializer: Function   | Default serializer        | A custom serializer function. If not provided, a default serializer is used.                                                             |
+| projectRoot: string    | Required                  | The root directory of the project. ⚠️ In a monorepo setup, this should point to the monorepo root, not the individual package directory. |
+| outputJsonPath: string | `<root>/metro-stats.json` | The path where the JSON report will be saved. Defaults to `metro-stats.json` in project root.                                            |
+| includeCode: boolean   | `true`                    | Whether to include the source and output code in the JSON report.                                                                        |
+
+### Financial Contributors
+
+Become a financial contributor at [OpenCollective](https://opencollective.com/react-native-bundle-discovery) or [GitHub Sponsors](https://github.com/sponsors/retyui)
+
+### Other
+
 **Similar projects:**
 
 - https://github.com/expo/atlas
@@ -72,8 +95,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](https://github.com/discoveryjs/discovery):**
 
-**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/customSerializer.js

@@ -106,7 +106,7 @@ function createJsonReport({
       return acc;
     }, {}),
     rootFolder,
-    packages: toPackages(dependencies),
+    packages: toPackages(preModules).concat(toPackages(dependencies)),
     modules: preModules
       .map((m) => toModuleStruct(m, includeCode))
       .concat(dependencies.map((m) => toModuleStruct(m, includeCode))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-discovery",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "index.js",
   "bin": "lib/bin.js",
   "repository": "git@github.com:retyui/react-native-bundle-discovery.git",
@@ -12,10 +12,12 @@
     "build": "npx discovery-build --config .discoveryrc.js --output build --serve-only-assets --single-file"
   },
   "dependencies": {
+    "@babel/parser": "^7.0.0",
     "@discoveryjs/cli": "2.14.2",
     "@discoveryjs/discovery": "1.0.0-beta.93",
     "chalk": "^4.1.2",
-    "highcharts": "12.2.0"
+    "highcharts": "12.2.0",
+    "prettier": "^3.5.3"
   },
   "peerDependencies": {
     "metro": "*"
@@ -35,8 +37,5 @@
     "prepare.js",
     "queryHelpers.js",
     ".discoveryrc.js"
-  ],
-  "devDependencies": {
-    "prettier": "3.5.3"
-  }
+  ]
 }

package/pages/_common.js

@@ -234,10 +234,11 @@ const metadata = {
 
 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 }) {
+function getCopyToClipboardButton({ textToCopy, className, text }) {
   return {
     view: "button",
     className: `${className ?? ""} copy-to-clipboard`,
+    text,
     data: `{ textToCopy: ${textToCopy} }`,
     onClick(elm, data) {
       clearTimeout(elm.__timer);

package/pages/default.js

@@ -3,6 +3,7 @@ const {
   getModulesTree,
   getPackage,
   getPackageList,
+  getCopyToClipboardButton,
 } = require("./_common");
 
 const topMetaData = [
@@ -141,9 +142,25 @@ discovery.page.define("default", [
         {
           when: `#.id="${TABS.PACKAGES}"`,
           content: [
+            getCopyToClipboardButton({
+              text: "Copy list",
+              className: "copy-before-ask-chatgpt",
+              textToCopy: `"- " + modules.filter(=> path has "node_modules").group(=> path.getModulesName()).map(=> $.key).join("\\n- ")`,
+            }),
+            {
+              view: "link",
+              className: "ask-chatgpt view-button",
+              text: "and Ask ChatGPT",
+              external: true,
+              data: `{
+                  href: $.askChatGPTAboutPackages()
+                }`,
+            },
             {
               view: "content-filter",
+              //
               data: `${getPackage(`modules.filter(=> path has "node_modules")`)}.sort(pkgInstances desc, size desc)`,
+              className: "packages-content",
               name: "filterByPathStr",
               content: getPackageList({
                 showCopiesBadge: true,

package/pages/module.js

@@ -119,11 +119,29 @@ discovery.page.define("module", {
                     view: "block",
                     className: "width-50p",
                     content: [
-                      "h5: 'Output'",
                       {
-                        view: "source",
-                        syntax: "ts",
-                        source: "=$.currentModule.output.code",
+                        view: "h5",
+                        content: 'text:"Output"',
+                      },
+                      {
+                        view: "context",
+                        modifiers: [
+                          {
+                            view: "checkbox",
+                            name: "prettify",
+                            checked: true,
+                            className: "prettify-checkbox",
+                            content: 'text:"Prettify"',
+                          },
+                        ],
+                        content: [
+                          {
+                            view: "source-prettify",
+                            syntax: "ts",
+                            source:
+                              "=(#.prettify ? $.currentModule.output.code.prettifyJS() : $.currentModule.output.code)",
+                          },
+                        ],
                       },
                     ],
                   },

package/prepare.js

@@ -66,9 +66,6 @@ function prepare(data) {
       m.source.code = m.source.code
         .replaceAll(";", ";\n\n")
         .replaceAll(",", ",\n    ");
-      m.output.code = m.output.code
-        .replaceAll(";", ";\n\n")
-        .replaceAll(",", ",\n    ");
     }
   });
 

package/queryHelpers.js

@@ -1,4 +1,35 @@
 const helpers = {
+  prettifyMap: new Map(),
+  prettifyJS(sourceStr) {
+    if (helpers.prettifyMap.has(sourceStr)) {
+      return helpers.prettifyMap.get(sourceStr);
+    }
+
+    const prettier = require("prettier/standalone");
+    const prettierPluginBabel = require("prettier/plugins/babel");
+    const prettierPluginEstree = require("prettier/plugins/estree");
+
+    return prettier
+      .format(sourceStr, {
+        parser: "babel",
+        plugins: [prettierPluginBabel, prettierPluginEstree],
+      })
+      .then((formatted) => {
+        helpers.prettifyMap.set(sourceStr, formatted);
+        return formatted;
+      });
+  },
+  askChatGPTAboutPackages() {
+    const prompt = `I have a list of JavaScript packages from my React Native bundle (see below). I want to optimize bundle size by identifying similar or redundant packages — such as multiple versions of similar libraries (e.g., lodash, lodash-es, underscore, etc.), duplicate utilities, or overlapping functionality (e.g., date libraries like moment, dayjs, date-fns).
+
+Please do the following:
+
+1. Group similar or overlapping packages together.
+2. For each group, suggest which one to keep and which ones to consider removing.
+3. For each group, provide a regex string that can be used to filter those packages from the list (e.g., in grep, find, or search tools).
+4. Keep the output concise and copy-paste friendly.`;
+    return `https://chat.openai.com/?prompt=${encodeURIComponent(prompt)}`;
+  },
   plural(count, [singular, plural]) {
     return count === 1 ? singular : plural;
   },

package/views/global.css

@@ -125,3 +125,40 @@ hr{
     background: red;
     opacity: 1;
 }
+.prettify-checkbox{
+    position: absolute;
+    right: 31px;
+    margin-top: -26px;
+    z-index: 1;
+}
+.ask-chatgpt{
+    color: var(--discovery-view-button-color, #000);
+    text-decoration: none;
+    vertical-align: middle;
+    position: absolute;
+    z-index: 9;
+    margin-top: 12px;
+    margin-left: 105px !important;
+    height: 35px;
+}
+.ask-chatgpt::before {
+    content: '”';
+    font-size: 2em;
+    vertical-align: middle;
+    font-family: math;
+    margin-right: 0.2em;
+    display: inline-block;
+    height: 15px;
+}
+.packages-content>.view-input{
+    padding-left: 265px;
+}
+.copy-before-ask-chatgpt{
+    width: 95px;
+    background-position: left center;
+    padding-left: 25px;
+    position: absolute;
+    z-index: 9;
+    margin-top: 12px;
+    height: 35px;
+}

package/views/prettify.js

@@ -0,0 +1,17 @@
+discovery.view.define(
+  "source-prettify",
+  async function renderPrettify(el, config, data, context) {
+    await this.render(
+      el,
+      this.composeConfig([
+        {
+          ...config,
+          source: await config.source,
+          view: "source",
+        },
+      ]),
+      data,
+      context,
+    );
+  },
+);