react-native-bundle-discovery-ui 2.7.0 → 2.9.0

package/dist/client/views/codeDiff.js

@@ -0,0 +1,66 @@
+const require_views__html = require("./_html.js");
+let diff = require("diff");
+//#region src/client/views/codeDiff.ts
+const CONTEXT = 3;
+function toLines(before, after) {
+  const lines = [];
+  let oldNo = 1;
+  let newNo = 1;
+  (0, diff.diffLines)(before, after).forEach((part) => {
+    const kind = part.added ? "add" : part.removed ? "del" : "same";
+    part.value
+      .replace(/\n$/, "")
+      .split("\n")
+      .forEach((text) => {
+        lines.push({
+          kind,
+          text,
+          oldNo: kind === "add" ? null : oldNo++,
+          newNo: kind === "del" ? null : newNo++,
+        });
+      });
+  });
+  return lines;
+}
+function lineHTML({ kind, text, oldNo, newNo }) {
+  return `<div class="cd-line cd-${kind}"><span class="cd-no">${oldNo ?? ""}</span><span class="cd-no">${newNo ?? ""}</span><span class="cd-sign">${kind === "add" ? "+" : kind === "del" ? "−" : " "}</span><span class="cd-text">${require_views__html.escapeHTML(text)}</span></div>`;
+}
+function render(lines) {
+  const added = lines.filter((line) => line.kind === "add").length;
+  const removed = lines.filter((line) => line.kind === "del").length;
+  if (added + removed === 0)
+    return `<div class="cd-empty">No differences</div>`;
+  const visible = lines.map((_, i) =>
+    lines
+      .slice(Math.max(0, i - CONTEXT), i + CONTEXT + 1)
+      .some((line) => line.kind !== "same"),
+  );
+  let html = "";
+  let i = 0;
+  while (i < lines.length) {
+    if (visible[i]) {
+      html += lineHTML(lines[i]);
+      i++;
+      continue;
+    }
+    const start = i;
+    while (i < lines.length && !visible[i]) i++;
+    const folded = lines.slice(start, i);
+    html += `<button type="button" class="cd-fold">⋯ ${folded.length} unchanged ${folded.length === 1 ? "line" : "lines"}</button><div class="cd-folded" hidden>${folded.map(lineHTML).join("")}</div>`;
+  }
+  return `
+    <div class="cd-stats"><span class="cd-stat-add">+${added}</span> <span class="cd-stat-del">−${removed}</span> lines</div>
+    <div class="cd-code">${html}</div>`;
+}
+discovery.view.define("code-diff", async (el, _config, data) => {
+  const { before, after } = data;
+  const root = el;
+  root.innerHTML = render(toLines(await before, await after));
+  root.addEventListener("click", (event) => {
+    const button = event.target.closest(".cd-fold");
+    if (!button) return;
+    button.nextElementSibling?.removeAttribute("hidden");
+    button.remove();
+  });
+});
+//#endregion

package/dist/client/views/compare.js

@@ -0,0 +1,237 @@
+const require_views__html = require("./_html.js");
+//#region src/client/views/compare.ts
+const ROWS_LIMIT = 10;
+function formatDelta(bytes) {
+  if (bytes === 0) return "0 B";
+  return `${bytes > 0 ? "+" : "−"}${require_views__html.formatBytes(Math.abs(bytes))}`;
+}
+function deltaHTML(bytes) {
+  return `<span class="${bytes > 0 ? "mo-bad" : bytes < 0 ? "mo-good" : ""}">${formatDelta(bytes)}</span>`;
+}
+function change(delta, amount, before, from) {
+  const percent = before
+    ? ` · ${((Math.abs(delta) / before) * 100).toFixed(2)}%`
+    : "";
+  return `<span class="cmp-change">${delta === 0 ? `<span class="cmp-pill">= no change</span>` : `<span class="cmp-pill cmp-pill-${delta > 0 ? "up" : "down"}">${delta > 0 ? "▲" : "▼"} ${amount}${percent}</span>`}<span class="cmp-from">from ${from}</span></span>`;
+}
+function countChange(before, after) {
+  const delta = after - before;
+  return change(
+    delta,
+    Math.abs(delta).toLocaleString(),
+    before,
+    before.toLocaleString(),
+  );
+}
+function row({ name, href, badge = "", detail = "", delta }) {
+  const tag = href ? "a" : "div";
+  return `
+    <${tag} class="cmp-row"${href ? ` href="${require_views__html.escapeHTML(href)}"` : ""}>
+      <span class="cmp-row-name" title="${require_views__html.escapeHTML(name)}">${require_views__html.escapeHTML(name)}${badge}</span>
+      <span class="cmp-row-detail">${detail}</span>
+      <span class="cmp-row-delta">${deltaHTML(delta)}</span>
+    </${tag}>`;
+}
+function section(title, total, rows) {
+  if (rows.length === 0) return "";
+  const visible = rows.slice(0, ROWS_LIMIT).join("");
+  const hidden = rows.slice(ROWS_LIMIT).join("");
+  return `
+    <div class="in-top cmp-section">
+      <div class="mo-card-label">${title} · ${total}</div>
+      ${visible}
+      ${
+        hidden
+          ? `<div class="cmp-more" hidden>${hidden}</div>
+             <button type="button" class="cmp-more-btn">Show ${rows.length - ROWS_LIMIT} more</button>`
+          : ""
+      }
+    </div>`;
+}
+function sumDelta(items) {
+  return items.reduce((sum, item) => sum + item.deltaInBytes, 0);
+}
+function renderCards({ summary, packages }) {
+  const { before, after, deltaInBytes } = summary;
+  return `<div class="mo-cards">${[
+    require_views__html.card({
+      label: "Bundle size",
+      value: require_views__html.formatBytes(after.sizeInBytes),
+      sub: change(
+        deltaInBytes,
+        require_views__html.formatBytes(Math.abs(deltaInBytes)),
+        before.sizeInBytes,
+        require_views__html.formatBytes(before.sizeInBytes),
+      ),
+      kind: deltaInBytes > 0 ? "danger" : deltaInBytes < 0 ? "good" : "accent",
+    }),
+    require_views__html.card({
+      label: "Modules",
+      value: after.modules.toLocaleString(),
+      sub: countChange(before.modules, after.modules),
+    }),
+    require_views__html.card({
+      label: "Packages",
+      value: after.packages.toLocaleString(),
+      sub: countChange(before.packages, after.packages),
+    }),
+    require_views__html.card({
+      label: "New duplicates",
+      value: require_views__html.plural(
+        packages.newDuplicates.length,
+        "package",
+      ),
+      sub: "packages bundled more times than before",
+      kind: packages.newDuplicates.length ? "danger" : "",
+    }),
+    require_views__html.card({
+      label: "New deprecated",
+      value: require_views__html.plural(
+        packages.deprecated.added.length,
+        "package",
+      ),
+      sub: countChange(
+        packages.deprecated.beforeCount,
+        packages.deprecated.afterCount,
+      ),
+      kind: packages.deprecated.added.length ? "danger" : "",
+    }),
+  ].join("")}</div>`;
+}
+function renderWarnings({ transformOptionsDiff, summary }) {
+  const items = transformOptionsDiff.map(
+    ({ option, before, after }) =>
+      `<b>${require_views__html.escapeHTML(option)}</b>: ${require_views__html.escapeHTML(before)} → ${require_views__html.escapeHTML(after)}`,
+  );
+  if (summary.before.platform !== summary.after.platform)
+    items.unshift(
+      `<b>platform</b>: ${require_views__html.escapeHTML(summary.before.platform)} → ${require_views__html.escapeHTML(summary.after.platform)}`,
+    );
+  if (items.length === 0) return "";
+  return `
+    <div class="cmp-warning">
+      ⚠️ The reports were built with different options, so sizes are not directly comparable: ${items.join(", ")}
+    </div>`;
+}
+function render({ comparison: c, modulePaths }) {
+  const paths = new Set(modulePaths);
+  const moduleHref = (path) =>
+    paths.has(path) ? discovery.encodePageHash("module", path) : null;
+  const packageHref = (name) => discovery.encodePageHash("package", name);
+  const versions = (list) => require_views__html.escapeHTML(list.join(", "));
+  const contributors = c.biggestContributors.map((item) =>
+    row({
+      name: item.name,
+      detail: item.note ? require_views__html.escapeHTML(item.note) : "",
+      delta: item.deltaInBytes,
+    }),
+  );
+  const versionChanges = c.packages.versionChanges.map((pkg) =>
+    row({
+      name: pkg.name,
+      href: packageHref(pkg.name),
+      detail: `${versions(pkg.beforeVersions)} → ${versions(pkg.afterVersions)}`,
+      delta: pkg.deltaInBytes,
+    }),
+  );
+  const addedPackages = c.packages.added.map((pkg) =>
+    row({
+      name: pkg.name,
+      href: packageHref(pkg.name),
+      detail: versions(pkg.versions),
+      delta: pkg.sizeInBytes,
+    }),
+  );
+  const removedPackages = c.packages.removed.map((pkg) =>
+    row({
+      name: pkg.name,
+      detail: versions(pkg.versions),
+      delta: -pkg.sizeInBytes,
+    }),
+  );
+  const newDuplicates = c.packages.newDuplicates.map((dup) =>
+    row({
+      name: dup.name,
+      href: packageHref(dup.name),
+      badge: ` ${require_views__html.chip(`×${dup.count}`, "danger")}`,
+      detail: require_views__html.escapeHTML(
+        dup.entries.map((entry) => entry.version).join(", "),
+      ),
+      delta: dup.sizeInBytes,
+    }),
+  );
+  const newDeprecated = c.packages.deprecated.added.map((pkg) => {
+    const name = pkg.id.slice(0, pkg.id.lastIndexOf("@"));
+    return row({
+      name: pkg.id,
+      href: packageHref(name),
+      badge: ` ${require_views__html.chip("deprecated", "warn")}`,
+      detail: require_views__html.escapeHTML(pkg.reason ?? ""),
+      delta: 0,
+    });
+  });
+  const addedModules = c.modules.added.map((m) =>
+    row({
+      name: m.path,
+      href: moduleHref(m.path),
+      delta: m.deltaInBytes,
+    }),
+  );
+  const removedModules = c.modules.removed.map((m) =>
+    row({
+      name: m.path,
+      delta: m.deltaInBytes,
+    }),
+  );
+  const changedModules = c.modules.changed.map((m) =>
+    row({
+      name: m.path,
+      href: paths.has(m.path)
+        ? discovery.encodePageHash("module-diff", m.path)
+        : null,
+      detail: `${require_views__html.formatBytes(m.beforeSizeInBytes)} → ${require_views__html.formatBytes(m.afterSizeInBytes)}`,
+      delta: m.deltaInBytes,
+    }),
+  );
+  const hasChanges =
+    c.summary.deltaInBytes !== 0 ||
+    c.modules.added.length +
+      c.modules.removed.length +
+      c.modules.changed.length >
+      0 ||
+    c.packages.versionChanges.length +
+      c.packages.added.length +
+      c.packages.removed.length >
+      0;
+  return `
+    <div class="cmp-title">
+      Compared with ${require_views__html.chip(require_views__html.escapeHTML(c.beforeFile))}
+    </div>
+    ${renderWarnings(c)}
+    ${renderCards(c)}
+    ${hasChanges ? "" : `<div class="dup-empty cmp-empty">✅ No differences between the reports</div>`}
+    <div class="cmp-sections">
+      ${section("Biggest growth", "by package / folder", contributors)}
+      ${section("Package version changes", require_views__html.plural(versionChanges.length, "package"), versionChanges)}
+      ${section("New duplicates", require_views__html.plural(newDuplicates.length, "package"), newDuplicates)}
+      ${section("New deprecated packages", require_views__html.plural(newDeprecated.length, "package"), newDeprecated)}
+      ${section("Added packages", `${require_views__html.plural(addedPackages.length, "package")} · ${formatDelta(c.packages.added.reduce((sum, pkg) => sum + pkg.sizeInBytes, 0))}`, addedPackages)}
+      ${section("Removed packages", `${require_views__html.plural(removedPackages.length, "package")} · ${formatDelta(-c.packages.removed.reduce((sum, pkg) => sum + pkg.sizeInBytes, 0))}`, removedPackages)}
+      ${section("Added modules", `${require_views__html.plural(addedModules.length, "module")} · ${formatDelta(sumDelta(c.modules.added))}`, addedModules)}
+      ${section("Removed modules", `${require_views__html.plural(removedModules.length, "module")} · ${formatDelta(sumDelta(c.modules.removed))}`, removedModules)}
+      ${section("Changed modules", `${require_views__html.plural(changedModules.length, "module")} · net ${formatDelta(sumDelta(c.modules.changed))}`, changedModules)}
+    </div>`;
+}
+discovery.view.define("bundle-compare", (el, _config, data) => {
+  const viewData = data;
+  if (!viewData?.comparison) return;
+  const root = el;
+  root.innerHTML = render(viewData);
+  root.addEventListener("click", (event) => {
+    const button = event.target.closest(".cmp-more-btn");
+    if (!button) return;
+    button.previousElementSibling?.removeAttribute("hidden");
+    button.remove();
+  });
+});
+//#endregion

package/dist/client/views/importGraph.js

@@ -0,0 +1,255 @@
+const require_views__colorScheme = require("./_colorScheme.js");
+const require_views__html = require("./_html.js");
+let d3_hierarchy = require("d3-hierarchy");
+//#region src/client/views/importGraph.ts
+const SVG_NS = "http://www.w3.org/2000/svg";
+const ROW_HEIGHT = 24;
+const LEVEL_GAP = 220;
+const MIN_HEIGHT = 240;
+const MAX_HEIGHT = 640;
+const MIN_RADIUS = 4;
+const LABEL_WIDTH = 180;
+const MIN_SCALE = 0.2;
+const MAX_SCALE = 6;
+const COLORS = {
+  current: "#e5484d",
+  root: "#f5b700",
+  own: "#8e6fe0",
+  nodeModule: "#2b9fd8",
+};
+function nodeColor(node) {
+  if (node.isCurrent) return COLORS.current;
+  if (node.isRoot) return COLORS.root;
+  return node.isNodeModule ? COLORS.nodeModule : COLORS.own;
+}
+function basename(path) {
+  return path.slice(path.lastIndexOf("/") + 1);
+}
+function svg(tag, attrs = {}) {
+  const el = document.createElementNS(SVG_NS, tag);
+  for (const [key, value] of Object.entries(attrs))
+    el.setAttribute(key, String(value));
+  return el;
+}
+function legend() {
+  return `${[
+    [COLORS.current, "Current module"],
+    [COLORS.root, "Entry point"],
+    [COLORS.own, "Your code"],
+    [COLORS.nodeModule, "node_modules"],
+  ]
+    .map(
+      ([color, text]) =>
+        `<span><span class="ig-dot" style="background:${color}"></span>${text}</span>`,
+    )
+    .join(
+      "",
+    )}<span class="ig-hint">Arrows point to the imported module · scroll to zoom · drag to pan · click to open</span>`;
+}
+function layout(data) {
+  const parentOf = new Map(data.links.map((l) => [l.source, l.target]));
+  const root = (0, d3_hierarchy.stratify)()
+    .id((d) => d.id)
+    .parentId((d) => parentOf.get(d.id))(data.nodes)
+    .sort((a, b) => b.data.size - a.data.size);
+  return (0, d3_hierarchy.tree)().nodeSize([ROW_HEIGHT, LEVEL_GAP])(root);
+}
+function createGraph(host, data) {
+  const dark = require_views__colorScheme.isDark();
+  const points = layout(data).descendants();
+  const maxSize = Math.max(1, ...points.map((p) => p.data.size));
+  const radius = (p) => MIN_RADIUS + Math.sqrt(p.data.size / maxSize) * 7;
+  const minX = Math.min(...points.map((p) => p.x)) - ROW_HEIGHT;
+  const maxX = Math.max(...points.map((p) => p.x)) + ROW_HEIGHT;
+  const maxY = Math.max(...points.map((p) => p.y)) + LABEL_WIDTH;
+  const height = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, maxX - minX));
+  host.innerHTML = `<div class="ig-legend">${legend()}</div>`;
+  const rootEl = svg("svg", {
+    class: "ig-svg",
+    height,
+  });
+  const defs = svg("defs");
+  const marker = svg("marker", {
+    id: "ig-arrow",
+    viewBox: "0 -4 8 8",
+    refX: 8,
+    refY: 0,
+    markerWidth: 7,
+    markerHeight: 7,
+    orient: "auto",
+  });
+  marker.append(
+    svg("path", {
+      d: "M0,-4L8,0L0,4",
+      class: "ig-arrow",
+    }),
+  );
+  defs.append(marker);
+  const viewport = svg("g");
+  const linksLayer = svg("g", { class: "ig-links" });
+  const nodesLayer = svg("g", { class: "ig-nodes" });
+  viewport.append(linksLayer, nodesLayer);
+  rootEl.append(defs, viewport);
+  const tooltip = document.createElement("div");
+  tooltip.className = "treemap-tooltip";
+  host.append(rootEl, tooltip);
+  const linkEls = /* @__PURE__ */ new Map();
+  for (const point of points) {
+    const parent = point.parent;
+    if (!parent) continue;
+    const startY = point.y - radius(point);
+    const endY = parent.y + radius(parent) + 2;
+    const midY = (startY + endY) / 2;
+    const path = svg("path", {
+      d: `M${startY},${point.x}C${midY},${point.x} ${midY},${parent.x} ${endY},${parent.x}`,
+      "marker-end": "url(#ig-arrow)",
+    });
+    linksLayer.append(path);
+    linkEls.set(point, path);
+  }
+  const nodeEls = /* @__PURE__ */ new Map();
+  const pointByEl = /* @__PURE__ */ new Map();
+  for (const point of points) {
+    const group = svg("g", {
+      class: "ig-node",
+      transform: `translate(${point.y},${point.x})`,
+    });
+    group.append(
+      svg("circle", {
+        r: radius(point),
+        fill: nodeColor(point.data),
+        stroke: dark ? "#111" : "#fff",
+        "stroke-width": 1.5,
+      }),
+    );
+    const label = svg("text", {
+      x: radius(point) + 4,
+      y: 4,
+    });
+    label.textContent = basename(point.data.id);
+    group.append(label);
+    nodesLayer.append(group);
+    nodeEls.set(point, group);
+    pointByEl.set(group, point);
+  }
+  const width = host.clientWidth;
+  let scale = Math.min(
+    1,
+    Math.max(MIN_SCALE, Math.min(width / maxY, height / (maxX - minX))),
+  );
+  let tx = 22 * scale;
+  let ty = (height - (maxX - minX) * scale) / 2 - minX * scale;
+  function applyTransform() {
+    viewport.setAttribute(
+      "transform",
+      `translate(${tx},${ty}) scale(${scale})`,
+    );
+  }
+  applyTransform();
+  function highlight(point) {
+    rootEl.classList.toggle("ig-has-hover", !!point);
+    const active = new Set(
+      point ? [...point.ancestors(), ...(point.children ?? [])] : [],
+    );
+    for (const [p, el] of nodeEls)
+      el.classList.toggle("ig-active", active.has(p));
+    for (const [p, el] of linkEls)
+      el.classList.toggle(
+        "ig-active",
+        active.has(p) && !!p.parent && active.has(p.parent),
+      );
+  }
+  function moveTooltip(event) {
+    const box = host.getBoundingClientRect();
+    const x = event.clientX - box.left;
+    const y = event.clientY - box.top;
+    tooltip.style.left = `${Math.max(0, Math.min(x + 12, box.width - tooltip.offsetWidth - 4))}px`;
+    tooltip.style.top = `${y + 16}px`;
+  }
+  let drag = null;
+  for (const [point, el] of nodeEls) {
+    el.addEventListener("pointerenter", (event) => {
+      if (drag) return;
+      highlight(point);
+      const via = point.depth - 1;
+      tooltip.innerHTML = [
+        `<b>${require_views__html.escapeHTML(point.data.id)}</b>`,
+        `<b>Size</b>: ${require_views__html.formatBytes(point.data.size)}`,
+        point.data.isCurrent
+          ? "Current module"
+          : via === 0
+            ? "Imports it directly"
+            : `Imports it via ${via} ${via === 1 ? "module" : "modules"}`,
+      ].join("<br/>");
+      tooltip.style.display = "block";
+      moveTooltip(event);
+    });
+    el.addEventListener("pointermove", moveTooltip);
+    el.addEventListener("pointerleave", () => {
+      highlight(null);
+      tooltip.style.display = "none";
+    });
+  }
+  rootEl.addEventListener("pointerdown", (event) => {
+    const nodeEl = event.target.closest(".ig-node");
+    drag = {
+      x: event.clientX,
+      y: event.clientY,
+      moved: false,
+      point: nodeEl ? pointByEl.get(nodeEl) : void 0,
+    };
+    rootEl.setPointerCapture(event.pointerId);
+  });
+  rootEl.addEventListener("pointermove", (event) => {
+    if (!drag) return;
+    const dx = event.clientX - drag.x;
+    const dy = event.clientY - drag.y;
+    if (!drag.moved && Math.abs(dx) + Math.abs(dy) < 3) return;
+    drag.moved = true;
+    drag.x = event.clientX;
+    drag.y = event.clientY;
+    tx += dx;
+    ty += dy;
+    tooltip.style.display = "none";
+    applyTransform();
+  });
+  rootEl.addEventListener("pointerup", () => {
+    const current = drag;
+    drag = null;
+    if (current?.point && !current.moved && !current.point.data.isCurrent)
+      window.location.hash = discovery.encodePageHash(
+        "module",
+        current.point.data.id,
+      );
+  });
+  rootEl.addEventListener(
+    "wheel",
+    (event) => {
+      event.preventDefault();
+      const next = Math.min(
+        MAX_SCALE,
+        Math.max(MIN_SCALE, scale * Math.exp(-event.deltaY * 0.002)),
+      );
+      const box = rootEl.getBoundingClientRect();
+      const x = event.clientX - box.left;
+      const y = event.clientY - box.top;
+      tx = x - ((x - tx) * next) / scale;
+      ty = y - ((y - ty) * next) / scale;
+      scale = next;
+      applyTransform();
+    },
+    { passive: false },
+  );
+}
+discovery.view.define("import-graph", (el, _config, data) => {
+  const host = el;
+  const graph = data;
+  if (!graph?.nodes?.length) return;
+  const observer = new ResizeObserver(() => {
+    if (!host.isConnected || host.clientWidth === 0) return;
+    observer.disconnect();
+    createGraph(host, graph);
+  });
+  observer.observe(host);
+});
+//#endregion

package/dist/client/views/insights.js

@@ -0,0 +1,80 @@
+const require_views__html = require("./_html.js");
+//#region src/client/views/insights.ts
+function topList(title, items, page, badge) {
+  if (items.length === 0) return "";
+  return `
+    <div class="in-top">
+      <div class="mo-card-label">${title}</div>
+      ${items
+        .map(
+          (item) => `
+      <a class="in-row" href="${require_views__html.escapeHTML(discovery.encodePageHash(page, item.name))}">
+        <span class="in-row-name" title="${require_views__html.escapeHTML(item.name)}">${require_views__html.escapeHTML(item.name)}${badge ? badge(item) : ""}</span>
+        <span class="in-row-size">${require_views__html.formatBytes(item.size)}</span>
+        <span class="in-row-share">${require_views__html.formatPercent(item.share)}</span>
+        <span class="in-row-bar"><span style="width:${Math.max(item.bar * 100, 1).toFixed(2)}%"></span></span>
+      </a>`,
+        )
+        .join("")}
+    </div>`;
+}
+function renderCards(o) {
+  const savingsSub = !o.hasRecommendations
+    ? "production report needed"
+    : o.potentialSavings
+      ? `${require_views__html.formatPercent(o.potentialSavingsShare)} of bundle · ${require_views__html.plural(o.findingsWithSavings, "fix", "fixes")}`
+      : "nothing to remove";
+  return `<div class="mo-cards">${[
+    require_views__html.card({
+      label: "Bundle size",
+      value: require_views__html.formatBytes(o.totalSize),
+      sub: [o.platform, require_views__html.plural(o.modulesCount, "module")]
+        .filter(Boolean)
+        .join(" · "),
+      kind: "accent",
+    }),
+    require_views__html.card({
+      label: "Your code",
+      value: require_views__html.formatBytes(o.sourceSize),
+      sub: `${require_views__html.formatPercent(o.sourceShare)} of bundle · ${require_views__html.plural(o.ownModulesCount, "module")}`,
+      bar: o.sourceShare,
+    }),
+    require_views__html.card({
+      label: "node_modules",
+      value: require_views__html.formatBytes(o.nodeModulesSize),
+      sub: `${require_views__html.formatPercent(o.nodeModulesShare)} of bundle · ${require_views__html.plural(o.packagesCount, "package")}`,
+      bar: o.nodeModulesShare,
+    }),
+    require_views__html.card({
+      label: "Duplicates",
+      value: require_views__html.plural(o.duplicatePackages, "package"),
+      sub: `${require_views__html.plural(o.duplicateModules, "module")} with copies`,
+      kind: o.duplicatePackages ? "danger" : "",
+    }),
+    require_views__html.card({
+      label: "Potential savings",
+      value: o.hasRecommendations
+        ? `~${require_views__html.formatBytes(o.potentialSavings)}`
+        : "–",
+      sub: savingsSub,
+      kind: o.potentialSavings ? "good" : "",
+    }),
+  ].join("")}</div>`;
+}
+function renderTopLists(o) {
+  const copiesBadge = (pkg) =>
+    pkg.copies > 1
+      ? ` <span class="mo-chip mo-chip-danger">×${pkg.copies}</span>`
+      : "";
+  return `
+    <div class="in-tops">
+      ${topList(`Heaviest packages · top 5 = ${require_views__html.formatPercent(o.topPackagesShare)} of bundle`, o.topPackages, "package", copiesBadge)}
+      ${topList("Heaviest modules in your code", o.topOwnModules, "module")}
+    </div>`;
+}
+discovery.view.define("bundle-insights", (el, _config, data) => {
+  const insights = data;
+  if (!insights) return;
+  el.innerHTML = renderCards(insights) + renderTopLists(insights);
+});
+//#endregion