react-native-bundle-discovery-ui 2.7.0 → 2.9.0

package/dist/client/pages/_module.js

@@ -0,0 +1,347 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_pages__common = require("./_common.js");
+//#region src/client/pages/_module.ts
+function getMetroWarn({ when, href, linkText, content }) {
+  return {
+    view: "alert-warning",
+    when,
+    className: "m-v-8",
+    content: [
+      ...content,
+      linkText && href
+        ? {
+            view: "link",
+            data: {
+              external: true,
+              href,
+              text: linkText,
+            },
+          }
+        : null,
+    ].filter(Boolean),
+  };
+}
+function getCodePanes() {
+  return {
+    view: "hstack",
+    className: "flex-no-wrap",
+    content: [
+      {
+        view: "block",
+        when: "not isImageOrFontAsset",
+        className: "width-50p",
+        content: [
+          {
+            view: "h5",
+            className: "mo-pane-title",
+            content: [
+              "text: 'Source'",
+              "text: ' · ' + overview.sourceLines.pluralWithCount(['line', 'lines']) + ' · ' + overview.sourceSize.formatBytes()",
+            ],
+          },
+          {
+            view: "source",
+            syntax: "ts",
+            source: "=$.currentModule.source.code",
+          },
+        ],
+      },
+      {
+        view: "block",
+        className: (data) => (data.isImageOrFontAsset ? "" : "width-50p"),
+        content: [
+          {
+            view: "h5",
+            className: "mo-pane-title",
+            content: [
+              "text: 'Output'",
+              "text: ' · ' + overview.outputLines.pluralWithCount(['line', 'lines']) + ' · ' + overview.outputSize.formatBytes()",
+            ],
+          },
+          {
+            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)",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+}
+/** Module page config, shared by the "module" and "module-diff" pages */
+function getModulePage({
+  codeTabText = "Code",
+  extraData = "",
+  codeContent = getCodePanes(),
+} = {}) {
+  return {
+    view: "context",
+    data: `{
+    $currentModule: $.modules.[path = #.id].pick(0); 
+    ...$, 
+    currentModule: $currentModule,
+    overview: $.moduleOverview(#.id),
+    isEntry: $currentModule.isEntry,
+    isInjectedByMetro: $currentModule.path = '__prelude__' or $currentModule.path has '@react-native/js-polyfills',
+    isWebpackRuntime: $currentModule.path has '__runtime__',
+    // Keep in sync with IMAGE_FONT_ASSET_RE in packages/serializer
+    isImageOrFontAsset: $currentModule.path ~= /\\.(png|jpe?g|gif|webp|bmp|psd|tiff?|ico|heic|avif|ttf|otf|woff2?|eot)$/i,
+    ${extraData}
+  }`,
+    content: [
+      {
+        view: "block",
+        className: "mo-wrap",
+        content: [
+          {
+            view: "module-overview",
+            data: "overview",
+          },
+          require_pages__common.getCopyToClipboardButton({
+            textToCopy: `$.currentModule.path`,
+            className: "mo-copy",
+          }),
+        ],
+      },
+      {
+        view: "tabs",
+        name: "tabs",
+        className: "mo-tabs",
+        tabs: [
+          {
+            value: "mcontent",
+            text: codeTabText,
+          },
+          {
+            value: "mimports",
+            when: "overview.imports",
+            content: ["text:'Imports '", "pill-badge: overview.imports.size()"],
+          },
+          {
+            value: "networkGraph",
+            when: "not isInjectedByMetro and not isEntry and not isWebpackRuntime",
+            content: ["text:'Imported by '", "pill-badge: overview.importedBy"],
+          },
+          {
+            value: "mduplicates",
+            when: "not isInjectedByMetro and not isEntry and not isWebpackRuntime and currentModule.duplicates",
+            content: ["text:'Duplicates '", "pill-badge: overview.duplicates"],
+          },
+        ],
+        content: {
+          view: "switch",
+          content: [
+            {
+              when: '#.tabs="mcontent"',
+              content: [
+                getMetroWarn({
+                  when: "$.currentModule.path = '__prelude__'",
+                  content: [
+                    "html: '<b>__prelude__</b>'",
+                    "text: ' is a special runtime code that was generated by the Metro bundler, see: '",
+                  ],
+                  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: [
+                    "html: '<b>@react-native/js-polyfills/*</b>'",
+                    "text: ' is a special package that was injected by the Metro bundler, see: '",
+                  ],
+                  href: "https://github.com/facebook/react-native/blob/198c6fc81cda67a46fff457cc39eb2a297eddc01/packages/metro-config/src/index.flow.js#L61",
+                  linkText: "rn/metro-config/index.js",
+                }),
+                getMetroWarn({
+                  when: "$.currentModule.path has 'metro-runtime'",
+                  content: [
+                    "html: '<b>metro-runtime/*</b>'",
+                    "text: ' is a special package that was injected by the Metro bundler, see: '",
+                  ],
+                  href: "https://github.com/facebook/metro/blob/f595e9e1c9021ad372b489be8958cc298eb1e0d9/packages/metro-config/src/defaults/defaults.js#L61-L63",
+                  linkText: "metro-config/index.js",
+                }),
+                codeContent,
+              ],
+            },
+            {
+              when: '#.tabs="mimports"',
+              content: {
+                view: "content-filter",
+                data: "overview.imports",
+                name: "filterByPathStr",
+                content: {
+                  view: "list",
+                  data: ".[name ~= #.filterByPathStr or specifier ~= #.filterByPathStr]",
+                  emptyText: "This module doesn't import anything",
+                  item: {
+                    view: "block",
+                    className: "mo-import",
+                    content: [
+                      {
+                        view: "text-match",
+                        className: "mo-import-specifier",
+                        data: "{ text: specifier, match: #.filterByPathStr }",
+                      },
+                      "html: '<span class=\"mo-arrow\">→</span>'",
+                      {
+                        view: "switch",
+                        content: [
+                          {
+                            when: "missing",
+                            content: [
+                              "text: name",
+                              "badge: { text: 'not in bundle', color: 'rgba(128,128,128,.25)' }",
+                            ],
+                          },
+                          {
+                            content: require_pages__common.getTreeModule({
+                              hasTextMatch: true,
+                            }),
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+            {
+              when: '#.tabs="networkGraph"',
+              content: {
+                view: "context",
+                context: `{ ...#, maxParentDepth: $.currentModule.getBestNetworkGraphSize() }`,
+                modifiers: [
+                  "html: '<br/>'",
+                  "text:'Max parent depth: '",
+                  {
+                    view: "input",
+                    name: "maxParentDepth",
+                    className: "inline-block",
+                    htmlType: "number",
+                    htmlMin: 1,
+                    htmlMax: 10,
+                  },
+                ],
+                content: [
+                  {
+                    view: "context",
+                    data: `{
+                    // Vars
+                    $tmp: $.currentModule.getNetworkGraph({ maxParentDepth: #.maxParentDepth });
+                    $limit: 150;
+                    // Return data
+                    currentModule: $.currentModule,                      
+                    entryPointPath: $tmp.entryPointPath,
+                    limit: $limit,
+                    data: $tmp.data,
+                    graph: { nodes: $tmp.nodes, links: $tmp.links },
+                    isGraphTooBig: $tmp.data.size() > $limit,
+                  }`,
+                    content: [
+                      {
+                        when: "isGraphTooBig",
+                        view: "block",
+                        className: "m-v-8",
+                        content: [
+                          {
+                            view: "alert-warning",
+                            data: '"Amount of dependencies "+$.data.size()+" (limit: "+$.limit+") are too big to display as a graph :("',
+                          },
+                        ],
+                      },
+                      {
+                        view: "hstack",
+                        className: "flex-no-wrap two-column",
+                        content: [
+                          {
+                            when: "not isGraphTooBig",
+                            view: "import-graph",
+                            className: "ig",
+                            data: "graph",
+                          },
+                          {
+                            view: "block",
+                            content: [
+                              "h4: 'Modules that import this file: ' + $.currentModule.path",
+                              {
+                                view: "list",
+                                data: `
+                                $totalSize: modules.sum(=>output.sizeInBytes);
+                                $toModule: => {
+                                  $deepIdx: $$ + 1;
+                                  ext:  $.path.getFileExtension(),
+                                  name: $.path,
+                                  size: $.output.sizeInBytes.formatBytes(),
+                                  percent: ($.output.sizeInBytes / $totalSize).percent(3),
+                                  children: $deepIdx < 2 ? $.dependents.map(=> $.$toModule()) : null,
+                                };
+                                $.currentModule.dependents.map(=> $.$toModule(0))
+                              `,
+                                emptyText: "⚠️ No importing modules found",
+                                item: {
+                                  view: "tree",
+                                  expanded: false,
+                                  itemConfig: {
+                                    content:
+                                      require_pages__common.getTreeModule({
+                                        hasTextMatch: true,
+                                      }),
+                                    children: `$.children`,
+                                  },
+                                },
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            },
+            {
+              when: '#.tabs="mduplicates"',
+              content: require_pages__common.getModulesTree({
+                data: `
+              $totalSize: modules.sum(=>output.sizeInBytes);
+              $toModule: => {
+                ext:  $.path.getFileExtension(),
+                name: $.path, 
+                size: $.output.sizeInBytes.formatBytes(), 
+                percent: ($.output.sizeInBytes / $totalSize).percent(3),
+              };
+              currentModule.duplicates.map(=> $.$toModule())
+            `,
+              }),
+            },
+          ],
+        },
+      },
+    ],
+  };
+}
+//#endregion
+exports.getModulePage = getModulePage;

package/dist/client/pages/default.js

@@ -1,34 +1,44 @@
 const require_pages__common = require("./_common.js");
 //#region src/client/pages/default.ts
-const topMetaData = [
-  require_pages__common.metadata.platform,
-  require_pages__common.metadata.size,
-  require_pages__common.metadata.source_code_size,
-  require_pages__common.metadata.node_modules_size,
-  require_pages__common.metadata.is_dev,
-  require_pages__common.metadata.is_minified,
-];
 const TABS = {
-  TREEMAP_FOAMTREE: "treemap-foamtree",
+  INSIGHTS: "insights",
+  TREEMAP: "treemap",
   MODULES: "modules",
   PACKAGES: "packages",
   DUPLICATES: "duplicates",
+  COMPARE: "compare",
 };
 function parseHashRef(url = window.location.href) {
   return new URL(url).hash.split(":")?.[1];
 }
 discovery.page.define("default", [
-  ...topMetaData,
+  {
+    view: "report-bar",
+    className: "report-bar",
+    data: "$.reportSummary()",
+  },
   {
     view: "tabs",
     name: "mainTabs",
     className: "main-tabs",
-    value: parseHashRef() ?? TABS.TREEMAP_FOAMTREE,
+    value: parseHashRef() ?? TABS.INSIGHTS,
     tabs: [
       {
-        value: TABS.TREEMAP_FOAMTREE,
+        value: TABS.INSIGHTS,
+        className: `main-tabs-${TABS.INSIGHTS}`,
+        content: [
+          "text:'Insights '",
+          {
+            view: "pill-badge",
+            when: "recommendations",
+            data: "recommendations.size()",
+          },
+        ],
+      },
+      {
+        value: TABS.TREEMAP,
         text: "Treemap chart",
-        className: `main-tabs-${TABS.TREEMAP_FOAMTREE}`,
+        className: `main-tabs-${TABS.TREEMAP}`,
       },
       {
         value: TABS.PACKAGES,
@@ -45,12 +55,28 @@ discovery.page.define("default", [
       },
       {
         value: TABS.DUPLICATES,
+        when: "modules.filter(=> duplicates)",
         className: `main-tabs-${TABS.DUPLICATES}`,
         content: [
-          "text:'Duplicate modules '",
+          "text:'Duplicates '",
           "pill-badge: modules.filter(=> duplicates).size()",
         ],
       },
+      {
+        value: TABS.COMPARE,
+        when: "comparison",
+        className: `main-tabs-${TABS.COMPARE}`,
+        content: [
+          "text:'Compare '",
+          {
+            view: "pill-badge",
+            data: "comparison.summary.deltaInBytes",
+            className: (delta) =>
+              `cmp-tab-delta-${delta > 0 ? "bad" : delta < 0 ? "good" : "ok"}`,
+            text: `=($ > 0 ? '+' : $ < 0 ? '−' : '') + ($ < 0 ? -$ : $).formatBytes()`,
+          },
+        ],
+      },
     ],
     content: {
       view: "switch",
@@ -63,7 +89,7 @@ discovery.page.define("default", [
           ref: isHashChangeEvent ? discovery.pageRef : context.mainTabs,
         });
         discovery.cancelScheduledRender();
-        const id = discovery.pageRef ?? TABS.TREEMAP_FOAMTREE;
+        const id = discovery.pageRef ?? TABS.INSIGHTS;
         setTimeout(() => {
           discovery.dom.root
             .querySelectorAll(".main-tabs>div>.onclick")
@@ -83,28 +109,24 @@ discovery.page.define("default", [
       },
       content: [
         {
-          when: `#.id="${TABS.TREEMAP_FOAMTREE}"`,
+          when: `#.id="${TABS.INSIGHTS}"`,
+          content: require_pages__common.getInsightsTab(),
+        },
+        {
+          when: `#.id="${TABS.TREEMAP}"`,
           content: {
             view: "content-filter",
             name: "filterByPathStr",
             debounce: 300,
-            className: "foamtree-filter",
+            className: "treemap-filter",
             content: {
-              view: "foamtree",
+              view: "treemap",
               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,
-                }
-              }
+              $.$applyFilter()
+                .map(=> {path, size: $.output.sizeInBytes, issues})
+                .transformFilesList($root, "treemap")
               `,
             },
           },
@@ -113,6 +135,7 @@ discovery.page.define("default", [
           when: `#.id="${TABS.MODULES}"`,
           content: require_pages__common.getModulesTree({
             limit: 200,
+            sortable: true,
             data: `
               $entryPoint: $.entryPointPath;
               $totalSize: modules.sum(=>output.sizeInBytes);
@@ -124,6 +147,7 @@ discovery.page.define("default", [
               };
               modules.map(=> { 
                 ...$.$toModule(),
+                sizeInBytes: $.output.sizeInBytes,
                 isEntry: $.isEntry,
                 reasons: $.dependents.map(=> $.$toModule()),
                 duplicates: $.duplicates.map(=> $.$toModule()),
@@ -134,48 +158,94 @@ discovery.page.define("default", [
         {
           when: `#.id="${TABS.PACKAGES}"`,
           content: [
-            require_pages__common.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: `${require_pages__common.getPackage(`modules.filter(=> path has "node_modules")`)}.sort(pkgInstances desc, size desc)`,
+            require_pages__common.getSortableContentFilter({
+              data: require_pages__common.getPackage(
+                `modules.filter(=> path has "node_modules")`,
+              ),
               className: "packages-content",
-              name: "filterByPathStr",
-              content: require_pages__common.getPackageList({
-                showCopiesBadge: true,
-                expanded: false,
-                limit: 200,
-                subLimit: 50,
-                data: ".[pkgName ~= #.filterByPathStr]",
-                itemPkgName: {
-                  view: "link",
-                  content: "text-match",
-                  data: `{
+              nameField: "pkgName",
+              sizeField: "size",
+              duplicatesCount: "(pkgInstances.size() - 1)",
+              defaultSort: "pkgInstances desc, size desc",
+              content: (listData) =>
+                require_pages__common.getPackageList({
+                  showCopiesBadge: true,
+                  expanded: false,
+                  limit: 200,
+                  subLimit: 50,
+                  data: listData,
+                  itemPkgName: {
+                    view: "link",
+                    content: "text-match",
+                    data: `{
                           href: pkgName.pageLink("package", {}),
                           text: pkgName,
                           match: #.filterByPathStr
                         }`,
-                },
-              }),
-            },
+                  },
+                }),
+            }),
           ],
         },
         {
           when: `#.id="${TABS.DUPLICATES}"`,
-          content: require_pages__common.getModulesTree({
+          content: {
+            view: "block",
+            className: "tab-scroll",
             data: `
+              $allPackages: (${require_pages__common.getPackage(`modules.filter(=> path has "node_modules")`)});
+              {
+                ...$,
+                duplicatePackages: $allPackages
+                  .[pkgInstances.size() > 1]
+                  // Keeping only the heaviest copy saves the rest
+                  .({ ...$, savings: size - pkgInstances.sort(size desc)[0].size })
+                  .sort(savings desc),
+              }
+            `,
+            content: [
+              {
+                view: "h3",
+                className: "dup-title",
+                content: [
+                  "text: 'Duplicate packages '",
+                  "pill-badge: duplicatePackages.size()",
+                  {
+                    view: "pill-badge",
+                    when: "duplicatePackages",
+                    data: "{ text: '~' + duplicatePackages.sum(=> savings).formatBytes(), postfix: 'can be saved', color: 'rgba(120, 177, 9, 0.35)' }",
+                  },
+                ],
+              },
+              {
+                view: "context",
+                when: "duplicatePackages",
+                content: require_pages__common.getPackageList({
+                  showCopiesBadge: true,
+                  expanded: false,
+                  data: "duplicatePackages",
+                  itemPkgName: {
+                    view: "link",
+                    data: `{ href: pkgName.pageLink("package", {}), text: pkgName }`,
+                  },
+                }),
+              },
+              {
+                view: "text",
+                when: "not duplicatePackages",
+                className: "dup-empty",
+                data: "'✅ Every package is bundled only once'",
+              },
+              {
+                view: "h3",
+                className: "dup-title",
+                content: [
+                  "text: 'Duplicate modules '",
+                  "pill-badge: modules.filter(=> duplicates).size()",
+                ],
+              },
+              require_pages__common.getModulesTree({
+                data: `
               // values
               $duplicatesOnly: modules.filter(=> duplicates);
               $totalSize: $duplicatesOnly.sum(=>output.sizeInBytes);
@@ -192,7 +262,20 @@ discovery.page.define("default", [
                 duplicates: $.duplicates.map(=> $.$toModule()),
               })
             `,
-          }),
+              }),
+            ],
+          },
+        },
+        {
+          when: `#.id="${TABS.COMPARE}"`,
+          content: {
+            view: "block",
+            className: "tab-scroll compare",
+            content: {
+              view: "bundle-compare",
+              data: "{ comparison, modulePaths: modules.path }",
+            },
+          },
         },
       ],
     },