react-native-bundle-discovery 1.0.1 → 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: [

package/README.md

@@ -1,13 +1,21 @@
 # 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-discovery",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "main": "index.js",
   "bin": "lib/bin.js",
   "repository": "git@github.com:retyui/react-native-bundle-discovery.git",

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/queryHelpers.js

@@ -19,6 +19,17 @@ const helpers = {
         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

@@ -131,3 +131,34 @@ hr{
     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;
+}