react-native-bundle-discovery 1.0.0-rc.10

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
+]);

package/pages/module.js

@@ -0,0 +1,296 @@
+const {
+  getModulesTree,
+  getTreeModule,
+  getCopyToClipboardButton,
+} = require("./_common");
+
+function getMetroWarn({ when, href, linkText, content }) {
+  return {
+    view: "alert-warning",
+    when,
+    className: "m-v-8",
+    content: [
+      ...content,
+      {
+        view: "link",
+        data: {
+          external: true,
+          href,
+          text: linkText,
+        },
+      },
+    ],
+  };
+}
+
+discovery.page.define("module", {
+  view: "context",
+  data: `{
+    $currentModule: $.modules.[path = #.id].pick(0); 
+    ...$, 
+    currentModule: $currentModule,
+    isEntry: $currentModule.isEntry,
+    isInjectedByMetro: $currentModule.path = '__prelude__' or $currentModule.path has '@react-native/js-polyfills',  
+  }`,
+  content: [
+    {
+      view: "h2",
+      content: [
+        //
+        'text: "Module: "',
+        "text: $.currentModule.path",
+        getCopyToClipboardButton({
+          textToCopy: `$.currentModule.path`,
+          className: "m-l-0_5em",
+        }),
+      ],
+    },
+
+    {
+      view: "tabs",
+      name: "tabs",
+      // value: "networkGraph", //FIXME
+      tabs: [
+        {
+          value: "mcontent",
+          text: "Module content",
+        },
+        {
+          value: "networkGraph",
+          when: "not isInjectedByMetro and not isEntry",
+          text: "Imported by modules",
+        },
+        {
+          value: "mduplicates",
+          when: "not isInjectedByMetro and not isEntry and currentModule.duplicates",
+          text: "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 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",
+              }),
+              {
+                view: "hstack",
+                className: "flex-no-wrap",
+                content: [
+                  {
+                    view: "block",
+                    className: "width-50p",
+                    content: [
+                      "h5: 'Source'",
+                      {
+                        view: "source",
+                        syntax: "ts",
+                        source: "=$.currentModule.source.code",
+                      },
+                    ],
+                  },
+                  {
+                    view: "block",
+                    className: "width-50p",
+                    content: [
+                      "h5: 'Output'",
+                      {
+                        view: "source",
+                        syntax: "ts",
+                        source: "=$.currentModule.output.code",
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            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,
+                    isGraphTooBig: $tmp.data.size() > $limit,
+                  }`,
+                  content: [
+                    // TODO use for debugging
+                    // {
+                    //   view: "struct",
+                    //   expanded: 2,
+                    // },
+                    {
+                      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: "highcharts",
+                          data: `{
+                        options: {
+                          chart: {
+                            type: "networkgraph",
+                            height: "500px",
+                          },
+                          title: {
+                            text: "Import Dependency Graph",
+                            align: "left",
+                          },
+                          subtitle: {
+                            text: "It shows which modules import this file (Red - current module, Gold - entry point)",
+                            align: "left",
+                          },
+                          plotOptions: {
+                            networkgraph: {
+                              keys: ["from", "to"],
+                              layoutAlgorithm: {
+                                enableSimulation: true,
+                                friction: -0.9,
+                                gravitationalConstant: 0.06,
+                              },
+                            },
+                          },
+                          series: [
+                            {
+                              accessibility: {
+                                enabled: false,
+                              },
+                              dataLabels: {
+                                enabled: true,
+                                linkFormat: "",
+                                style: {
+                                  fontSize: "0.8em",
+                                  fontWeight: "normal",
+                                },
+                              },
+                              id: "lang-tree",
+                              data: $.data,
+                              nodes:[
+                                { id: $.currentModule.path, marker: { radius: 15, fillColor: 'red' }, },
+                                { id: $.entryPointPath, marker: { radius: 15, fillColor: 'gold' } }
+                              ].filter(=> id),
+                            },
+                          ],
+                        },
+                      }`,
+                        },
+
+                        {
+                          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: getTreeModule({
+                                    hasTextMatch: true,
+                                  }),
+                                  children: `$.children`,
+                                },
+                              },
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+          {
+            when: '#.tabs="mduplicates"',
+            content: 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())
+            `,
+            }),
+          },
+        ],
+      },
+    },
+  ],
+});

package/pages/package.js

@@ -0,0 +1,150 @@
+const { externalLinkHtml } = require("./_common.js");
+const {
+  getTreeModule,
+  getPackage,
+  getPackageList,
+  getCopyToClipboardButton,
+} = require("./_common");
+
+discovery.page.define("package", {
+  view: "context",
+  data: `
+    // Tmp variables
+    $currentPkgName: #.id;
+    ${getPackage(`$pkg: modules.filter(=> path has "node_modules" and path has $currentPkgName)`)}[0];
+    $copies: $pkg.pkgInstances.size() - 1;
+    $ver: $pkg.pkgInstances[0].version;
+
+    // Return value
+    { 
+      ...$, 
+      currentPkgHasCopies: $copies > 0,
+      currentPkgCopiesCount: $copies,
+      currentPkgVersion: $ver,
+      currentPkgWithUniqVer: $pkg.pkgName + ($copies = 0 ? '@' + $ver : ''),
+      currentPkgWithUniqVerNpm: $pkg.pkgName + ($copies = 0 ? '/v/' + $ver : ''),
+      currentPkg: $pkg,
+    }
+  `,
+  content: [
+    // TODO uncomment for debugging
+    // {
+    //   view: "struct",
+    //   data: "$.currentPkg",
+    // },
+
+    {
+      view: "block",
+      content: [
+        {
+          view: "h1",
+          className: "inline-block no-margin",
+          content: `badge: {
+            text: $.currentPkgWithUniqVer,
+            color: "#fffb5a",
+          }`,
+        },
+        {
+          when: "$.currentPkgCopiesCount > 0",
+          view: "h2",
+          className: "inline-block no-margin",
+          content: [
+            `badge: {
+              text: '+' + $.currentPkgCopiesCount, 
+              postfix: $.currentPkgCopiesCount = 1 ? 'copy' : 'copies',
+              color: "rgba(255, 0, 0, 0.35)"
+            }`,
+          ],
+        },
+        getCopyToClipboardButton({
+          textToCopy: `$.currentPkg.pkgName`,
+          className: "m-l-0_5em",
+        }),
+      ],
+    },
+
+    "html: '<br>'",
+
+    {
+      view: "block",
+      content: [
+        "text: 'Links: '",
+        {
+          view: "link",
+          external: true,
+          data: `{ href: "https://www.npmjs.com/package/" + currentPkgWithUniqVerNpm }`,
+          content: [
+            "text: 'npmjs.com'",
+            `html: '<span class="my-icon-inline my-icon-12">${externalLinkHtml}</span>'`,
+          ],
+        },
+        "text: ' '",
+        {
+          view: "link",
+          external: true,
+          data: `{ href: "https://bundlephobia.com/package/" + currentPkgWithUniqVer }`,
+          content: [
+            "text: 'bundlephobia.com'",
+            `html: '<span class="my-icon-inline my-icon-12">${externalLinkHtml}</span>'`,
+          ],
+        },
+        "text: ' '",
+        {
+          view: "link",
+          external: true,
+          data: `{ href: "https://packagephobia.com/result?p=" + currentPkgWithUniqVer }`,
+          content: [
+            "text: 'packagephobia.com'",
+            `html: '<span class="my-icon-inline my-icon-12">${externalLinkHtml}</span>'`,
+          ],
+        },
+      ],
+    },
+
+    "html: '<hr>'",
+
+    {
+      view: "block",
+      content: getPackageList({
+        data: "$.currentPkg",
+        itemPkgName: "text: pkgName",
+        showCopiesBadge: false,
+        expanded: true,
+      }),
+
+      /*[
+        {
+          view: "list",
+          data: "$.currentPkg",
+          item: {
+            view: "tree",
+            expanded: true,
+            itemConfig: {
+              content: [
+                "text: pkgName",
+                "text: ' '",
+                "pill-badge:{ text: size.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
+              ],
+              children: `$.pkgInstances`,
+              itemConfig: {
+                view: "tree-leaf",
+                content: [
+                  //
+                  "text:pkgName",
+                  "text:' '",
+                  "pill-badge:{ text: 'v' + version, color: '#0af' }",
+                  "pill-badge:{ text: size.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
+                ],
+                children: `$.modules`,
+                itemConfig: {
+                  view: "tree-leaf",
+                  content: getTreeModule({ hasPercent: false }),
+                },
+              },
+            },
+          },
+        },
+      ]*/
+    },
+  ],
+});