react-native-bundle-discovery 1.3.1 → 2.0.0-rc.2

package/pages/default.js

@@ -1,211 +0,0 @@
-const {
-  metadata,
-  getModulesTree,
-  getPackage,
-  getPackageList,
-  getCopyToClipboardButton,
-} = 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: [
-            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,
-                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

@@ -1,314 +0,0 @@
-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: [
-                      {
-                        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)",
-                          },
-                        ],
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-          {
-            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

@@ -1,161 +0,0 @@
-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>'`,
-          ],
-        },
-        {
-          view: "link",
-          external: true,
-          data: `{ href: "https://bundlejs.com/?q=" + currentPkgWithUniqVer, q: currentPkgWithUniqVer }`,
-          content: [
-            {
-              view: "html",
-              data: `'<img class="bundlejs-badge-img" src="https://deno.bundlejs.com/?q=' + q + '&badge=detailed" />'`,
-            },
-          ],
-        },
-      ],
-    },
-
-    "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 }),
-                },
-              },
-            },
-          },
-        },
-      ]*/
-    },
-  ],
-});