react-native-bundle-discovery-ui 2.5.0 → 2.7.0-rc.0

package/pages/_common.js

@@ -1,324 +0,0 @@
-const platformColor = `transformOptions.platform = 'android' ? 'rgba(194, 239, 116, .4)' : 'rgba(119, 31, 218, .4)'`;
-
-function getPackage(entry) {
-  return `
-  $packages: $.packages;
-  $totalSize: $.modules.sum(=>output.sizeInBytes);
-  $toModule: => {
-    ext:  $.path.getFileExtension(),
-    name: $.path, 
-    size: $.output.sizeInBytes.formatBytes(), 
-    percent: ($.output.sizeInBytes / $totalSize).percent(3),
-  };
-
-  ${entry}.group(=> path.getModulesName())
-     .map(=> ({ 
-        $pkgName: $.key;
-        pkgName: $pkgName, // example: lodash
-        size: $.value.sum(=>output.sizeInBytes),
-        pkgInstances: $.value
-          .group(=> path.split('node_modules/' + $pkgName).pick(0) + 'node_modules/' + $pkgName)
-          .map(=> {
-             $pkgNameWithPath: $.key;
-             $pkgInfo: $packages.[path = $pkgNameWithPath][0];
-             pkgName: $pkgNameWithPath, // example: node_modules/lodash
-             version: $pkgInfo.version,
-             metadata: $pkgInfo.metadata,
-             size: $.value.sum(=> output.sizeInBytes),
-             modules: $.value.map(=> $.$toModule()),
-          }),
-     }))`;
-}
-
-const metadataTooltip = {
-  view: "text",
-  when: "metadata.createdAt",
-  data: "'Published ' + metadata.createdAt.formatDate() + ' (' + metadata.createdAt.timeAgo() + ')'",
-};
-const outdatedColor = "rgba(255, 165, 0, 0.35)";
-
-// Compact npm metadata badges (`metadata` from the report)
-function getMetadataBadges({
-  deprecated,
-  outdated,
-  latestVersion,
-  renderLatestVersion,
-}) {
-  return [
-    {
-      view: "pill-badge",
-      when: deprecated,
-      data: `{ text: '⚠️ deprecated', message: ${deprecated} }`,
-      color: "#cf222e",
-      textColor: "white",
-      darkColor: "#f85149",
-      darkTextColor: "white",
-      tooltip: "text: message",
-    },
-    renderLatestVersion
-      ? {
-          view: "pill-badge",
-          when: outdated,
-          data: `{ text: '↑ v' + ${latestVersion} }`,
-          color: outdatedColor,
-          tooltip: "text: 'Latest version on npm'",
-        }
-      : null,
-  ].filter(Boolean);
-}
-
-function getPackageList({
-  data,
-  itemPkgName,
-  showCopiesBadge,
-  expanded,
-  limit,
-  subLimit,
-}) {
-  return {
-    view: "list",
-    data,
-    emptyText: "⚠️ No packages found",
-    limit,
-    item: {
-      view: "tree",
-      expanded,
-      itemConfig: {
-        content: [
-          itemPkgName,
-          "text: ' '",
-          "pill-badge:{ text: size.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
-          // Summary of all instances (visible when the tree is collapsed)
-          ...getMetadataBadges({
-            deprecated: "pkgInstances.metadata.deprecated[0]",
-            outdated: "pkgInstances.[metadata and not metadata.isLatest]",
-            latestVersion: "pkgInstances.metadata.latestVersion[0]",
-            renderLatestVersion: false,
-          }),
-          showCopiesBadge
-            ? {
-                view: "pill-badge",
-                when: "pkgInstances.size() > 1",
-                data: "(pkgInstances.size() - 1).pluralBadge(['copy','copies'], '+')",
-                color: "rgba(255, 0, 0, 0.35)",
-              }
-            : null,
-          {
-            view: "pill-badge",
-            data: "pkgInstances.modules.size().pluralBadge(['file','files'])",
-          },
-        ].filter(Boolean),
-        children: `$.pkgInstances`,
-        itemConfig: {
-          view: "tree-leaf",
-          limit: subLimit,
-          content: [
-            //
-            "text:pkgName",
-            "text:' '",
-            {
-              view: "pill-badge",
-              data: "{ text: 'v' + version, metadata }",
-              color: "#0af",
-              tooltip: metadataTooltip,
-            },
-            "pill-badge:{ text: size.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
-            {
-              view: "pill-badge",
-              data: "modules.size().pluralBadge(['file','files'])",
-            },
-            ...getMetadataBadges({
-              deprecated: "metadata.deprecated",
-              outdated: "metadata and not metadata.isLatest",
-              latestVersion: "metadata.latestVersion",
-              renderLatestVersion: true,
-            }),
-          ],
-          children: `$.modules`,
-          itemConfig: {
-            view: "tree-leaf",
-            content: getTreeModule({ hasPercent: true }),
-          },
-        },
-      },
-    },
-  };
-}
-
-function getTreeModule({ hasTextMatch = false, hasPercent = false } = {}) {
-  return [
-    "pill-badge:{ text: ext, color: ext.getExtColor() }",
-    hasTextMatch
-      ? {
-          view: "link",
-          content: hasTextMatch ? "text-match" : "text",
-          data: `{
-          href: name.pageLink("module", {}),
-          text: name,
-          match: #.filterByPathStr
-        }`,
-        }
-      : {
-          view: "link",
-          data: `{ href: $.name.pageLink("module", {}), text: $.name }`,
-        },
-    "text:' '",
-    {
-      view: "badge",
-      when: "isEntry",
-      text: "Entrypoint",
-      color: "gold",
-      textColor: "black",
-    },
-    "pill-badge:{ text: size, color: 'rgba(120, 177, 9, 0.35)' }",
-    hasPercent
-      ? "pill-badge:{ text: percent, color: 'rgba(120, 177, 9, 0.35)' }"
-      : null,
-  ].filter(Boolean);
-}
-function getModulesTree({ data, limit }) {
-  if (!data) {
-    throw new Error("[getModulesTree]: data is required");
-  }
-  return {
-    view: "content-filter",
-    data,
-    name: "filterByPathStr",
-    content: {
-      view: "list",
-      limit,
-      data: ".[name ~= #.filterByPathStr]",
-      emptyText: "⚠️ No modules found",
-      item: {
-        view: "tree",
-        expanded: false,
-        itemConfig: {
-          content: getTreeModule({ hasTextMatch: true }),
-          children: `
-            [
-               {
-                 title:'Imported by modules',
-                 data: $.reasons,
-                 type: 'reasons',
-               },
-               {
-                 title:'Similar copies',
-                 data: $.duplicates,
-                 type: 'duplicates',
-               }
-            ].filter(=> $.data.size() > 0)
-          `,
-          itemConfig: {
-            view: "switch",
-            content: [
-              {
-                when: 'type="reasons"',
-                content: {
-                  view: "tree-leaf",
-                  content: [
-                    "text:title",
-                    "text:' '",
-                    "badge:{ text: $.data.size() }",
-                  ],
-                  children: `$.data`,
-                  itemConfig: {
-                    view: "tree-leaf",
-                    content: getTreeModule(),
-                  },
-                },
-              },
-              {
-                when: 'type="duplicates"',
-                content: {
-                  view: "tree-leaf",
-                  content: [
-                    "text:title",
-                    "text:' '",
-                    "badge:{ text: $.data.size() }",
-                  ],
-                  children: `$.data`,
-                  itemConfig: {
-                    view: "tree-leaf",
-                    content: getTreeModule(),
-                  },
-                },
-              },
-            ],
-          },
-        },
-      },
-    },
-  };
-}
-
-const metadata = {
-  platform: {
-    when: "transformOptions.platform",
-    view: "badge",
-    data: `{ prefix: 'Platform: ', text: transformOptions.platform, color: ${platformColor} }`,
-  },
-  size: {
-    when: "modules.filter(=> $.path has 'node_modules').size()",
-    view: "badge",
-    data: `{ prefix: 'Size: ', text: modules.sum(=>output.sizeInBytes).formatBytes(), color: ${platformColor} }`,
-  },
-  node_modules_size: {
-    when: "modules.filter(=> $.path has 'node_modules').size()",
-    view: "badge",
-    data: "{ prefix: 'node_modules: ', text: modules.filter(=> $.path has 'node_modules').sum(=>output.sizeInBytes).formatBytes(), color: 'rgba(255, 0, 0, 0.35)' }",
-  },
-  source_code_size: {
-    when: "modules.filter(=> $.path has 'node_modules').size()",
-    view: "badge",
-    data: `
-        // vars
-        $totalSize: modules.sum(=>output.sizeInBytes);
-        $thirdPartySize: modules.filter(=> $.path has 'node_modules').sum(=>output.sizeInBytes);
-        // return data
-        { prefix: 'Source code: ', text: ($totalSize - $thirdPartySize).formatBytes(), color: 'rgba(148, 111, 234, 0.5)' }`,
-  },
-  is_dev: {
-    when: "transformOptions.dev != null",
-    view: "badge",
-    data: "{ prefix: '__DEV__: ', text: transformOptions.dev }",
-  },
-  is_minified: {
-    when: "transformOptions.minify != null",
-    view: "badge",
-    data: "{ prefix: 'Minify: ', text: transformOptions.minify }",
-  },
-};
-
-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, text }) {
-  return {
-    view: "button",
-    className: `${className ?? ""} copy-to-clipboard`,
-    text,
-    data: `{ textToCopy: ${textToCopy} }`,
-    onClick(elm, data) {
-      clearTimeout(elm.__timer);
-      navigator.clipboard
-        .writeText(data.textToCopy)
-        .then(() => {
-          elm.classList.add("done");
-          elm.__timer = setTimeout(() => elm.classList.remove("done"), 2000);
-        })
-        .catch(() => {
-          elm.classList.add("err");
-          elm.__timer = setTimeout(() => elm.classList.remove("err"), 2000);
-        });
-    },
-  };
-}
-
-module.exports = {
-  getCopyToClipboardButton,
-  getPackage,
-  getPackageList,
-  externalLinkHtml,
-  getTreeModule,
-  getModulesTree,
-  metadata,
-};

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