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

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 }),
+                },
+              },
+            },
+          },
+        },
+      ]*/
+    },
+  ],
+});

package/prepare.js

@@ -0,0 +1,105 @@
+function getDuplicateId(path) {
+  const uniqueNodeModulePath = path.split("node_modules/").pop();
+  const ids = [uniqueNodeModulePath];
+
+  // Special case for lodash
+  if (
+    uniqueNodeModulePath.startsWith("lodash.") ||
+    uniqueNodeModulePath.startsWith("lodash-es/")
+  ) {
+    // node_modules/lodash.debounce/index.js => node_modules/lodash/debounce.js
+    // node_modules/lodash-es/get.js         => node_modules/lodash/get.js
+    const uniqueLodashPath = uniqueNodeModulePath
+      .replace("lodash-es/", "lodash/")
+      .replace("lodash.", "lodash/")
+      .replace("/index.js", ".js");
+
+    ids.push(uniqueLodashPath);
+  }
+
+  return ids;
+}
+
+function prepare(data) {
+  // data.modules = data.modules.slice(875, 880); TODO for debugging a formtree chart
+  let moduleMap = new Map();
+  let duplicatesMap = new Map();
+  let allLodashModules = new Set();
+
+  data.packages.forEach((pkg) => {
+    pkg.path = pkg.absolutePath.replace(data.rootFolder + "/", "");
+  });
+  data.modules.forEach((m) => {
+    // 0. Data transformation
+    m.absolutePath = m.path;
+    if (m.absolutePath === data.entryPoint) {
+      m.isEntry = true;
+    }
+    m.path = m.path.replace(data.rootFolder + "/", "");
+    m.dependencies.forEach((d) => {
+      d.path = d.absolutePath.replace(data.rootFolder + "/", "");
+    });
+
+    // 1. Duplicates
+    m._tmp_ids = getDuplicateId(m.path);
+    m.duplicates = [];
+    m._tmp_ids.forEach((id) => {
+      if (!duplicatesMap.has(id)) {
+        duplicatesMap.set(id, []);
+      }
+      duplicatesMap.get(id).push(m);
+    });
+    // lodash/*
+    // lodash-es/*
+    // lodash.*
+    if (m.path.includes("node_modules/lodash")) {
+      allLodashModules.add(m);
+    }
+
+    // 2. Dependencies
+    m.dependents = [];
+    moduleMap.set(m.absolutePath, m);
+
+    // 3. Other
+    // 3.1 Format prelude
+    if (m.path === "__prelude__") {
+      m.source.code = m.source.code
+        .replaceAll(";", ";\n\n")
+        .replaceAll(",", ",\n    ");
+      m.output.code = m.output.code
+        .replaceAll(";", ";\n\n")
+        .replaceAll(",", ",\n    ");
+    }
+  });
+
+  data.modules.forEach((m) => {
+    // 1. Duplicates
+    m._tmp_ids.forEach((id) => {
+      const duplicates = duplicatesMap.get(id);
+      if (duplicates.length > 1) {
+        m.duplicates.push(...duplicates.filter((d) => d !== m));
+      }
+    });
+
+    // lodash/index.js is a special case (as index.js includes all lodash functions)
+    if (m.path.endsWith("node_modules/lodash/index.js")) {
+      m.duplicates.push(...allLodashModules);
+    }
+    delete m._tmp_ids;
+
+    // 2. Dependencies
+    m.dependencies.forEach((dependency) => {
+      const dependentModule = moduleMap.get(dependency.absolutePath);
+      if (dependentModule) {
+        dependentModule.dependents.push(m); //add to the dependent module directly
+      }
+    });
+  });
+
+  allLodashModules = null;
+  moduleMap = null;
+  duplicatesMap = null;
+  return data;
+}
+
+module.exports = prepare;