react-native-bundle-discovery-ui 2.8.0 → 2.9.1

package/dist/client/pages/_common.js

@@ -1,6 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/client/pages/_common.ts
-const platformColor = `transformOptions.platform = 'android' ? 'rgba(194, 239, 116, .4)' : 'rgba(119, 31, 218, .4)'`;
 function getPackage(entry) {
   return `
   $packages: $.packages;
@@ -30,12 +29,91 @@ function getPackage(entry) {
           }),
      }))`;
 }
+function renderSortToggleGroup(el, config, options) {
+  let current = null;
+  const label = document.createElement("div");
+  label.className = "view-toggle-group-before";
+  label.textContent = "Sort by:";
+  el.classList.add("view-toggle-group", "sort-toggle-group");
+  el.append(label);
+  const toggles = options.map(({ value, text }) => {
+    const toggle = document.createElement("div");
+    toggle.className = "view-toggle onclick";
+    toggle.textContent = text;
+    toggle.addEventListener("click", () => {
+      current = current === value ? null : value;
+      toggles.forEach((t, i) => {
+        t.classList.toggle("checked", options[i].value === current);
+      });
+      config.onChange?.(current, config.name);
+    });
+    return el.appendChild(toggle);
+  });
+  config.onInit?.(current, config.name);
+}
+function getSortableContentFilter({
+  data,
+  className,
+  nameField,
+  sizeField,
+  duplicatesCount,
+  defaultSort,
+  content,
+}) {
+  const filtered = `.[${nameField} ~= #.filterByPathStr]`;
+  return {
+    view: "block",
+    data,
+    className: `view-content-filter sortable-content-filter ${className ?? ""}`,
+    content: {
+      view: "context",
+      modifiers: [
+        {
+          view: renderSortToggleGroup,
+          name: "sortBy",
+          data: `
+            $hasDuplicates: .[${duplicatesCount} > 0];
+            [
+              { value: 'size', text: 'Size' },
+              { value: 'name', text: 'Name' },
+              { value: 'duplicates', text: 'Duplicates' },
+            ].[value != 'duplicates' or $hasDuplicates]
+          `,
+        },
+        {
+          view: "persisted-filter-input",
+          persistKey: `${className}:${nameField}`,
+          name: "filterByPathStr",
+          placeholder: "Filter",
+        },
+      ],
+      content: [
+        {
+          view: "badge",
+          when: `#.filterByPathStr and ${filtered}`,
+          className: "filtered-size",
+          data: `{ text: 'Filtered size: ' + ${filtered}.sum(=> ${sizeField}).formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }`,
+        },
+        {
+          view: "block",
+          className: "content",
+          content: content(`
+            $filtered: ${filtered};
+            #.sortBy = 'name' ? $filtered.sort(${nameField} asc)
+            : #.sortBy = 'duplicates' ? $filtered.sort(${duplicatesCount} desc, ${sizeField} desc)
+            : #.sortBy = 'size' ? $filtered.sort(${sizeField} desc)
+            : ${defaultSort ? `$filtered.sort(${defaultSort})` : "$filtered"}
+          `),
+        },
+      ],
+    },
+  };
+}
 const metadataTooltip = {
   view: "text",
   when: "metadata.createdAt",
   data: "'Published ' + metadata.createdAt.formatDate() + ' (' + metadata.createdAt.timeAgo() + ')'",
 };
-const outdatedColor = "rgba(255, 165, 0, 0.35)";
 function getMetadataBadges({
   deprecated,
   outdated,
@@ -46,24 +124,22 @@ function getMetadataBadges({
     {
       view: "pill-badge",
       when: deprecated,
-      data: `{ text: '⚠️ deprecated', message: ${deprecated} }`,
-      color: "#cf222e",
-      textColor: "white",
-      darkColor: "#f85149",
-      darkTextColor: "white",
+      className: "badge-deprecated",
+      data: `{ text: 'deprecated', message: ${deprecated} }`,
       tooltip: "text: message",
     },
     renderLatestVersion
       ? {
           view: "pill-badge",
           when: outdated,
+          className: "badge-warn",
           data: `{ text: '↑ v' + ${latestVersion} }`,
-          color: outdatedColor,
           tooltip: "text: 'Latest version on npm'",
         }
       : null,
   ].filter(Boolean);
 }
+const SIZE_HEAT_CLASS = "=sizeHeat ? 'size-heat size-heat-' + sizeHeat : ''";
 function getPackageList({
   data,
   itemPkgName,
@@ -75,7 +151,7 @@ function getPackageList({
   return {
     view: "list",
     data,
-    emptyText: "⚠️ No packages found",
+    emptyText: "No packages found.",
     limit,
     item: {
       view: "tree",
@@ -84,7 +160,11 @@ function getPackageList({
         content: [
           itemPkgName,
           "text: ' '",
-          "pill-badge:{ text: size.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
+          {
+            view: "pill-badge",
+            className: SIZE_HEAT_CLASS,
+            data: "{ text: size.formatBytes(), sizeHeat }",
+          },
           ...getMetadataBadges({
             deprecated: "pkgInstances.metadata.deprecated[0]",
             outdated: "pkgInstances.[metadata and not metadata.isLatest]",
@@ -95,8 +175,8 @@ function getPackageList({
             ? {
                 view: "pill-badge",
                 when: "pkgInstances.size() > 1",
+                className: "badge-danger",
                 data: "(pkgInstances.size() - 1).pluralBadge(['copy','copies'], '+')",
-                color: "rgba(255, 0, 0, 0.35)",
               }
             : null,
           {
@@ -141,7 +221,11 @@ function getPackageList({
 }
 function getTreeModule({ hasTextMatch = false, hasPercent = false } = {}) {
   return [
-    "pill-badge:{ text: ext, color: ext.getExtColor() }",
+    {
+      view: "pill-badge",
+      className: "ext-badge",
+      data: "{ text: ext, color: ext.getExtColor() }",
+    },
     hasTextMatch
       ? {
           view: "link",
@@ -164,29 +248,29 @@ function getTreeModule({ hasTextMatch = false, hasPercent = false } = {}) {
       color: "gold",
       textColor: "black",
     },
-    "pill-badge:{ text: size, color: 'rgba(120, 177, 9, 0.35)' }",
+    {
+      view: "pill-badge",
+      className: SIZE_HEAT_CLASS,
+      data: "{ text: size, sizeHeat }",
+    },
     hasPercent
       ? "pill-badge:{ text: percent, color: 'rgba(120, 177, 9, 0.35)' }"
       : null,
   ].filter(Boolean);
 }
-function getModulesTree({ data, limit }) {
+function getModulesTree({ data, limit, sortable }) {
   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: `
+  const getList = (listData) => ({
+    view: "list",
+    limit,
+    data: listData,
+    emptyText: "No modules found.",
+    item: {
+      view: "tree",
+      expanded: false,
+      itemConfig: {
+        content: getTreeModule({ hasTextMatch: true }),
+        children: `
             [
                {
                  title:'Imported by modules',
@@ -200,86 +284,183 @@ function getModulesTree({ data, limit }) {
                }
             ].filter(=> $.data.size() > 0)
           `,
-          itemConfig: {
-            view: "switch",
-            content: [
-              {
-                when: 'type="reasons"',
-                content: {
+        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: [
-                    "text:title",
-                    "text:' '",
-                    "badge:{ text: $.data.size() }",
-                  ],
-                  children: `$.data`,
-                  itemConfig: {
-                    view: "tree-leaf",
-                    content: getTreeModule(),
-                  },
+                  content: getTreeModule(),
                 },
               },
-              {
-                when: 'type="duplicates"',
-                content: {
+            },
+            {
+              when: 'type="duplicates"',
+              content: {
+                view: "tree-leaf",
+                content: [
+                  "text:title",
+                  "text:' '",
+                  "badge:{ text: $.data.size() }",
+                ],
+                children: `$.data`,
+                itemConfig: {
                   view: "tree-leaf",
-                  content: [
-                    "text:title",
-                    "text:' '",
-                    "badge:{ text: $.data.size() }",
-                  ],
-                  children: `$.data`,
-                  itemConfig: {
-                    view: "tree-leaf",
-                    content: getTreeModule(),
-                  },
+                  content: getTreeModule(),
                 },
               },
-            ],
-          },
+            },
+          ],
         },
       },
     },
+  });
+  if (sortable)
+    return getSortableContentFilter({
+      data,
+      nameField: "name",
+      sizeField: "sizeInBytes",
+      duplicatesCount: "duplicates.size()",
+      content: getList,
+    });
+  return {
+    view: "content-filter",
+    data,
+    name: "filterByPathStr",
+    content: getList(".[name ~= #.filterByPathStr]"),
   };
 }
-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 findingItem = {
+  view: "expand",
+  className: "='in-finding in-finding-' + severity",
+  header: [
+    {
+      view: "pill-badge",
+      className: "in-severity",
+      data: `{
+  text: severity = 'high' ? 'High impact' : severity = 'medium' ? 'Saves size' : 'Advice',
+  color: severity = 'high' ? 'rgba(220, 50, 60, 0.3)' : severity = 'medium' ? 'rgba(255, 165, 0, 0.35)' : 'rgba(0, 170, 255, 0.25)',
+}`,
+    },
+    "text: title",
+    {
+      view: "pill-badge",
+      when: "savings",
+      data: "{ text: '~' + savings.formatBytes(), postfix: savingsShare.percent(2), color: 'rgba(120, 177, 9, 0.35)' }",
+      tooltip: "text: 'Estimated savings: size and share of the bundle'",
+    },
+    {
+      view: "inline-list",
+      className: "in-packages",
+      when: "packageNames",
+      data: "packageNames",
+      item: {
+        view: "link",
+        className: "mo-chip mo-chip-pkg",
+        data: `{ href: $.pageLink("package", {}), text: $ }`,
+      },
+    },
+  ],
+  content: {
+    view: "block",
+    className: "in-finding-content",
+    content: [
+      {
+        view: "markdown",
+        data: "message",
+      },
+      {
+        view: "block",
+        when: "packagesText",
+        className: "in-pre",
+        content: "text: packagesText",
+      },
+      {
+        view: "expand",
+        when: "affected",
+        className: "in-affected",
+        header: [
+          "text: 'Affected modules '",
+          "pill-badge: affected.size()",
+          "pill-badge: { text: affectedSize.formatBytes(), color: 'rgba(120, 177, 9, 0.35)' }",
+        ],
+        content: {
+          view: "list",
+          data: "affected",
+          limit: 20,
+          item: {
+            view: "block",
+            content: getTreeModule(),
+          },
+        },
+      },
+      {
+        view: "block",
+        when: "docsUrls",
+        className: "in-docs",
+        content: [
+          "text: 'Learn more: '",
+          {
+            view: "inline-list",
+            data: "docsUrls",
+            item: {
+              view: "link",
+              external: true,
+              data: "{ href: $, text: $ }",
+            },
+          },
+        ],
+      },
+    ],
   },
 };
-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 getInsightsTab() {
+  return {
+    view: "block",
+    className: "tab-scroll insights",
+    data: "$.bundleInsights()",
+    content: [
+      { view: "bundle-insights" },
+      {
+        view: "h3",
+        className: "in-title",
+        content: [
+          "text: 'Recommendations '",
+          {
+            view: "pill-badge",
+            when: "hasRecommendations",
+            data: "findings.size()",
+          },
+        ],
+      },
+      {
+        view: "alert-warning",
+        when: "not hasRecommendations",
+        content:
+          "html: 'Recommendations are only available for production bundles. Generate the report from a bundle built with <code>--dev false</code> to see them.'",
+      },
+      {
+        view: "alert-success",
+        when: "hasRecommendations and not findings",
+        content: "text: 'No recommendations.'",
+      },
+      {
+        view: "list",
+        data: "findings",
+        item: findingItem,
+      },
+    ],
+  };
+}
 function getCopyToClipboardButton({ textToCopy, className, text }) {
   return {
     view: "button",
@@ -302,10 +483,10 @@ function getCopyToClipboardButton({ textToCopy, className, text }) {
   };
 }
 //#endregion
-exports.externalLinkHtml = externalLinkHtml;
 exports.getCopyToClipboardButton = getCopyToClipboardButton;
+exports.getInsightsTab = getInsightsTab;
 exports.getModulesTree = getModulesTree;
 exports.getPackage = getPackage;
 exports.getPackageList = getPackageList;
+exports.getSortableContentFilter = getSortableContentFilter;
 exports.getTreeModule = getTreeModule;
-exports.metadata = metadata;