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

package/dist/client/views/treemap.js

@@ -0,0 +1,598 @@
+require("../issues.js");
+const require_views__colorScheme = require("./_colorScheme.js");
+let d3_hierarchy = require("d3-hierarchy");
+//#region src/client/views/treemap.ts
+const PALETTE = [
+  {
+    h: 205,
+    s: 71,
+    l: 41,
+  },
+  {
+    h: 28,
+    s: 100,
+    l: 53,
+  },
+  {
+    h: 120,
+    s: 57,
+    l: 40,
+  },
+  {
+    h: 360,
+    s: 69,
+    l: 50,
+  },
+  {
+    h: 271,
+    s: 39,
+    l: 57,
+  },
+  {
+    h: 10,
+    s: 30,
+    l: 42,
+  },
+  {
+    h: 318,
+    s: 66,
+    l: 68,
+  },
+  {
+    h: 0,
+    s: 0,
+    l: 50,
+  },
+  {
+    h: 60,
+    s: 70,
+    l: 44,
+  },
+  {
+    h: 186,
+    s: 80,
+    l: 45,
+  },
+];
+const TONE = {
+  blue: PALETTE[0],
+  orange: PALETTE[1],
+  green: PALETTE[2],
+  red: PALETTE[3],
+  purple: PALETTE[4],
+  olive: PALETTE[8],
+};
+const LIGHT_LABEL_BELOW = 52;
+const HUE_SHIFT_STEPS = [8, 4];
+const MIN_SHADED_SIZE = 6;
+const HEADER_HEIGHT = 16;
+const BREADCRUMB_HEIGHT = 26;
+const FONT = "11px system-ui, -apple-system, sans-serif";
+const MAX_SCALE = 64;
+const COLOR_BY_OPTIONS = [
+  {
+    value: "package",
+    text: "Package",
+  },
+  {
+    value: "type",
+    text: "File type",
+  },
+  {
+    value: "issues",
+    text: "Issues",
+  },
+];
+const TYPE_TONES = [
+  {
+    text: "js",
+    exts: ["js", "jsx", "mjs", "cjs"],
+    tone: TONE.olive,
+  },
+  {
+    text: "ts",
+    exts: ["ts", "tsx"],
+    tone: TONE.blue,
+  },
+  {
+    text: "json",
+    exts: ["json"],
+    tone: TONE.orange,
+  },
+  {
+    text: "images",
+    exts: ["png", "jpg", "jpeg", "gif", "webp", "svg"],
+    tone: TONE.purple,
+  },
+  {
+    text: "other",
+    exts: [],
+    tone: null,
+  },
+];
+const ISSUE_TONES = [
+  {
+    text: "Duplicate",
+    tone: TONE.red,
+  },
+  {
+    text: "Can be removed",
+    tone: TONE.orange,
+  },
+  {
+    text: "No issues",
+    tone: null,
+  },
+];
+let colorBy = "package";
+function getTypeTone(name) {
+  const dot = name.lastIndexOf(".");
+  const ext = dot === -1 ? "js" : name.slice(dot + 1).toLowerCase();
+  return (
+    TYPE_TONES.find((t) => t.exts.includes(ext)) ??
+    TYPE_TONES[TYPE_TONES.length - 1]
+  ).tone;
+}
+function getIssueTone(issues) {
+  if (!issues?.length) return null;
+  return issues.includes("Duplicate module")
+    ? ISSUE_TONES[0].tone
+    : ISSUE_TONES[1].tone;
+}
+function shade(tone, depth, dark) {
+  const lift = Math.min(depth * 1.5, 6);
+  return dark
+    ? {
+        h: tone.h,
+        s: Math.max(tone.s - 6, 0),
+        l: tone.l - 10 + lift / 2,
+      }
+    : {
+        h: tone.h,
+        s: tone.s,
+        l: tone.l + lift,
+      };
+}
+function escapeHTML(str) {
+  return str.replace(
+    /[&<>"']/g,
+    (c) =>
+      ({
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#39;",
+      })[c],
+  );
+}
+function prependDuplicateTo(label) {
+  if (label.includes(" ~ "))
+    return `<b class='i-duplicate'>Duplicate</b> ${escapeHTML(label.split(" ~ ")[1])}`;
+  return escapeHTML(label);
+}
+function tooltipHTML(node) {
+  if (!node.type) return "";
+  return [
+    `<b>${node.type === "folder" ? "Folder" : "File"}</b>: ${prependDuplicateTo(node.name)}`,
+    `<b>Size</b>: ${node.size}`,
+    node.type === "folder"
+      ? `<b>Files</b>: ${node.files}`
+      : `<b>Path</b>: ${escapeHTML(node.fullPath ?? "")}`,
+    node.issues?.length
+      ? `<b>Issues</b>: ${node.issues.map(escapeHTML).join(", ")}`
+      : "",
+  ]
+    .filter(Boolean)
+    .join("<br/>");
+}
+function assignTones(roots) {
+  const tones = /* @__PURE__ */ new Map();
+  const inherit = (node, tone, level = 0) => {
+    tones.set(node, tone);
+    const step = HUE_SHIFT_STEPS[level] ?? 0;
+    (node.children ?? []).forEach((child, index) => {
+      inherit(
+        child,
+        {
+          ...tone,
+          h: tone.h + ((index % 5) - 2) * step,
+        },
+        level + 1,
+      );
+    });
+  };
+  roots
+    .flatMap((root) => {
+      let node = root;
+      while (node.children?.length === 1) node = node.children[0];
+      return node.children ?? [];
+    })
+    .sort((a, b) => (b.value ?? 0) - (a.value ?? 0))
+    .forEach((node, i) => {
+      inherit(node, PALETTE[i % PALETTE.length]);
+    });
+  return tones;
+}
+function truncate(ctx, text, maxWidth) {
+  if (ctx.measureText(text).width <= maxWidth) return text;
+  let len = Math.min(text.length - 1, Math.floor(maxWidth / 6));
+  while (len > 0 && ctx.measureText(`${text.slice(0, len)}…`).width > maxWidth)
+    len--;
+  return len > 0 ? `${text.slice(0, len)}…` : "";
+}
+function createTreemap(host, roots) {
+  const dark = require_views__colorScheme.isDark();
+  let tones = /* @__PURE__ */ new Map();
+  const fullRoot = {
+    name: "Bundle",
+    children: roots,
+  };
+  host.style.position = "relative";
+  host.innerHTML = "";
+  const base = document.createElement("canvas");
+  const overlay = document.createElement("canvas");
+  for (const canvas of [base, overlay]) {
+    canvas.style.position = "absolute";
+    canvas.style.left = "0";
+    canvas.style.top = `${BREADCRUMB_HEIGHT}px`;
+  }
+  overlay.style.cursor = "pointer";
+  overlay.style.touchAction = "none";
+  const header = document.createElement("div");
+  header.className = "treemap-header";
+  const breadcrumb = document.createElement("div");
+  breadcrumb.className = "treemap-breadcrumb";
+  const controls = document.createElement("div");
+  controls.className = "treemap-controls";
+  header.append(breadcrumb, controls);
+  const tooltip = document.createElement("div");
+  tooltip.className = "treemap-tooltip";
+  host.append(header, base, overlay, tooltip);
+  let focusPath = [fullRoot];
+  let root = null;
+  let rects = [];
+  let hovered = null;
+  let width = 0;
+  let height = 0;
+  let scale = 1;
+  let offsetX = 0;
+  let offsetY = 0;
+  function getTone(node) {
+    if (colorBy === "package") return tones.get(node.data);
+    if (node.children) return void 0;
+    return (
+      (colorBy === "type"
+        ? getTypeTone(node.data.name)
+        : getIssueTone(node.data.issues)) ?? void 0
+    );
+  }
+  function fillLightness(node) {
+    const tone = getTone(node);
+    if (!tone) return dark ? 18 + node.depth * 4 : 88 - node.depth * 4;
+    return shade(tone, node.depth, dark).l;
+  }
+  function fill(node, delta = 0) {
+    const tone = getTone(node);
+    if (!tone) return `hsl(0 0% ${fillLightness(node) + delta}%)`;
+    const { h, s, l } = shade(tone, node.depth, dark);
+    return `hsl(${h} ${s}% ${l + delta}%)`;
+  }
+  function cushion(ctx, node) {
+    const w = node.x1 - node.x0;
+    const h = node.y1 - node.y0;
+    if (w < MIN_SHADED_SIZE || h < MIN_SHADED_SIZE) return fill(node);
+    const gradient = ctx.createLinearGradient(
+      node.x0,
+      node.y0,
+      node.x1,
+      node.y1,
+    );
+    gradient.addColorStop(0, fill(node, 7));
+    gradient.addColorStop(1, fill(node, -7));
+    return gradient;
+  }
+  function buildHierarchy() {
+    const focus = focusPath[focusPath.length - 1];
+    tones = assignTones(focusPath.length === 1 ? roots : [focus]);
+    root = (0, d3_hierarchy.hierarchy)(focus)
+      .sum((d) => (d.children?.length ? 0 : (d.value ?? 0)))
+      .sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+  }
+  function layout() {
+    if (!root) return;
+    rects = (0, d3_hierarchy.treemap)()
+      .tile(d3_hierarchy.treemapSquarify)
+      .size([width * scale, height * scale])
+      .paddingInner(1)
+      .paddingOuter(2)
+      .paddingTop((node) =>
+        node.x1 - node.x0 > 40 && node.y1 - node.y0 > 32 ? HEADER_HEIGHT : 2,
+      )
+      .round(true)(root)
+      .descendants()
+      .filter((n) => n.x1 - n.x0 >= 1 && n.y1 - n.y0 >= 1);
+  }
+  function draw() {
+    const dpr = window.devicePixelRatio || 1;
+    const ctx = base.getContext("2d");
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, width, height);
+    ctx.translate(offsetX, offsetY);
+    ctx.font = FONT;
+    ctx.textBaseline = "middle";
+    ctx.strokeStyle = dark ? "rgba(0,0,0,.45)" : "rgba(0,0,0,.18)";
+    ctx.lineWidth = 1;
+    for (const node of rects) {
+      if (
+        node.x1 + offsetX < 0 ||
+        node.y1 + offsetY < 0 ||
+        node.x0 + offsetX > width ||
+        node.y0 + offsetY > height
+      )
+        continue;
+      const w = node.x1 - node.x0;
+      const h = node.y1 - node.y0;
+      ctx.fillStyle = cushion(ctx, node);
+      ctx.fillRect(node.x0, node.y0, w, h);
+      ctx.strokeRect(node.x0 + 0.5, node.y0 + 0.5, w - 1, h - 1);
+      if (w < 30 || h < 12) continue;
+      const isFolder = !!node.children;
+      if (isFolder && h <= 32) continue;
+      const label = truncate(ctx, node.data.name, w - 8);
+      if (!label) continue;
+      ctx.fillStyle =
+        dark || fillLightness(node) < LIGHT_LABEL_BELOW ? "#f4f4f6" : "#16161a";
+      ctx.font = isFolder ? `bold ${FONT}` : FONT;
+      ctx.fillText(label, node.x0 + 4, node.y0 + HEADER_HEIGHT / 2 + 1);
+      ctx.font = FONT;
+    }
+    drawHover();
+    renderBreadcrumb();
+  }
+  function drawHover() {
+    const dpr = window.devicePixelRatio || 1;
+    const ctx = overlay.getContext("2d");
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, width, height);
+    if (!hovered) return;
+    ctx.translate(offsetX, offsetY);
+    ctx.strokeStyle = dark ? "#fff" : "#000";
+    ctx.lineWidth = 2;
+    ctx.strokeRect(
+      hovered.x0 + 1,
+      hovered.y0 + 1,
+      hovered.x1 - hovered.x0 - 2,
+      hovered.y1 - hovered.y0 - 2,
+    );
+  }
+  function swatch(tone) {
+    return `<span class="treemap-swatch" style="background:${tone === null ? (dark ? "hsl(0 0% 30%)" : "hsl(0 0% 78%)") : (({ h, s, l }) => `hsl(${h} ${s}% ${l}%)`)(shade(tone, 2, dark))}"></span>`;
+  }
+  function renderControls() {
+    controls.innerHTML = `
+      <span class="treemap-legend">${(colorBy === "type" ? TYPE_TONES : colorBy === "issues" ? ISSUE_TONES : []).map((item) => `<span>${swatch(item.tone)}${item.text}</span>`).join("")}</span>
+      <span class="treemap-color-by-label">Color by:</span>`;
+    const group = document.createElement("span");
+    group.className = "view-toggle-group treemap-color-by";
+    for (const option of COLOR_BY_OPTIONS) {
+      const toggle = document.createElement("span");
+      toggle.className = `view-toggle onclick${option.value === colorBy ? " checked" : ""}`;
+      toggle.textContent = option.text;
+      toggle.onclick = () => {
+        colorBy = option.value;
+        renderControls();
+        draw();
+      };
+      group.append(toggle);
+    }
+    controls.append(group);
+  }
+  function renderBreadcrumb() {
+    breadcrumb.innerHTML = "";
+    focusPath.forEach((node, index) => {
+      const item = document.createElement("span");
+      item.className = "treemap-breadcrumb-item";
+      item.textContent = node.name;
+      item.onclick = () => zoomTo(focusPath.slice(0, index + 1));
+      breadcrumb.append(item);
+    });
+  }
+  function hitTest(screenX, screenY) {
+    const x = screenX - offsetX;
+    const y = screenY - offsetY;
+    for (let i = rects.length - 1; i >= 0; i--) {
+      const n = rects[i];
+      if (x >= n.x0 && x < n.x1 && y >= n.y0 && y < n.y1) return n;
+    }
+    return null;
+  }
+  function zoomTo(path) {
+    focusPath = path;
+    hovered = null;
+    tooltip.style.display = "none";
+    scale = 1;
+    offsetX = 0;
+    offsetY = 0;
+    buildHierarchy();
+    layout();
+    draw();
+  }
+  function clampOffset() {
+    offsetX = Math.min(0, Math.max(offsetX, width - width * scale));
+    offsetY = Math.min(0, Math.max(offsetY, height - height * scale));
+  }
+  let frame = 0;
+  let needsLayout = false;
+  function scheduleRedraw(relayout) {
+    if (relayout) needsLayout = true;
+    if (frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      if (needsLayout) layout();
+      needsLayout = false;
+      draw();
+    });
+  }
+  overlay.addEventListener(
+    "wheel",
+    (event) => {
+      event.preventDefault();
+      const nextScale = Math.min(
+        MAX_SCALE,
+        Math.max(1, scale * Math.exp(-event.deltaY * 0.002)),
+      );
+      if (nextScale === scale) return;
+      const ratio = nextScale / scale;
+      offsetX = event.offsetX - (event.offsetX - offsetX) * ratio;
+      offsetY = event.offsetY - (event.offsetY - offsetY) * ratio;
+      scale = nextScale;
+      clampOffset();
+      hovered = null;
+      tooltip.style.display = "none";
+      scheduleRedraw(true);
+    },
+    { passive: false },
+  );
+  let drag = null;
+  let suppressClick = false;
+  overlay.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0) return;
+    drag = {
+      x: event.clientX,
+      y: event.clientY,
+      moved: false,
+    };
+    overlay.setPointerCapture(event.pointerId);
+  });
+  overlay.addEventListener("pointerup", () => {
+    suppressClick = !!drag?.moved;
+    drag = null;
+    overlay.style.cursor = "pointer";
+  });
+  overlay.addEventListener("mousemove", (event) => {
+    if (drag) {
+      const dx = event.clientX - drag.x;
+      const dy = event.clientY - drag.y;
+      if (drag.moved || Math.abs(dx) + Math.abs(dy) > 3) {
+        drag.moved = true;
+        drag.x = event.clientX;
+        drag.y = event.clientY;
+        offsetX += dx;
+        offsetY += dy;
+        clampOffset();
+        overlay.style.cursor = "grabbing";
+        tooltip.style.display = "none";
+        scheduleRedraw(false);
+        return;
+      }
+    }
+    const node = hitTest(event.offsetX, event.offsetY);
+    if (node !== hovered) {
+      hovered = node;
+      drawHover();
+      const html = node ? tooltipHTML(node.data) : "";
+      tooltip.innerHTML = html;
+      tooltip.style.display = html ? "block" : "none";
+    }
+    const left = Math.min(event.offsetX + 12, width - tooltip.offsetWidth - 4);
+    const top =
+      event.offsetY + 12 + tooltip.offsetHeight > height
+        ? event.offsetY - tooltip.offsetHeight - 8
+        : event.offsetY + 12;
+    tooltip.style.left = `${Math.max(left, 0)}px`;
+    tooltip.style.top = `${Math.max(top, 0) + BREADCRUMB_HEIGHT}px`;
+  });
+  overlay.addEventListener("mouseleave", () => {
+    hovered = null;
+    drawHover();
+    tooltip.style.display = "none";
+  });
+  overlay.addEventListener("click", (event) => {
+    if (suppressClick) {
+      suppressClick = false;
+      return;
+    }
+    let node = hitTest(event.offsetX, event.offsetY);
+    if (node && !node.children) node = node.parent;
+    if (!node || node.depth === 0) return;
+    zoomTo([
+      ...focusPath,
+      ...node
+        .ancestors()
+        .reverse()
+        .slice(1)
+        .map((n) => n.data),
+    ]);
+  });
+  overlay.addEventListener("contextmenu", (event) => {
+    if (focusPath.length === 1) return;
+    event.preventDefault();
+    zoomTo(focusPath.slice(0, -1));
+  });
+  return {
+    resize(w, h) {
+      width = w;
+      height = Math.max(h - BREADCRUMB_HEIGHT, 0);
+      const dpr = window.devicePixelRatio || 1;
+      for (const canvas of [base, overlay]) {
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+      }
+      if (!root) {
+        buildHierarchy();
+        renderControls();
+      }
+      clampOffset();
+      layout();
+      draw();
+    },
+  };
+}
+let current = null;
+discovery.view.define("treemap", (el, _config, data, context) => {
+  current?.dispose();
+  const host = el;
+  let chart = null;
+  let frame = 0;
+  const observer = new ResizeObserver(() => {
+    if (!host.isConnected) {
+      self.dispose();
+      return;
+    }
+    cancelAnimationFrame(frame);
+    frame = requestAnimationFrame(() => {
+      const { clientWidth, clientHeight } = host;
+      if (clientWidth === 0 || clientHeight === 0) return;
+      try {
+        chart ??= createTreemap(host, data);
+        chart.resize(clientWidth, clientHeight);
+      } catch (e) {
+        console.error(e, data);
+        self.dispose();
+        discovery.view.render(
+          el,
+          {
+            view: "alert-danger",
+            data: '"Error rendering chart, please check the console for more information."',
+          },
+          data,
+          context,
+        );
+      }
+    });
+  });
+  const self = {
+    dispose() {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+      chart = null;
+      if (current === self) current = null;
+    },
+  };
+  observer.observe(host);
+  current = self;
+});
+//#endregion

package/dist/discoveryrc.js

@@ -4,21 +4,40 @@ node_path = require_rolldown_runtime.__toESM(node_path);
 //#region src/discoveryrc.ts
 const config = {
   name: "react-native-bundle-discovery",
-  data: () =>
-    require(
-      node_path.default.resolve(__dirname, "../../../tmp/metro-stats.json"),
-    ),
+  data: () => {
+    const { withComparison, withRecommendations } = require(
+      node_path.default.resolve(__dirname, "rsdoctor.js"),
+    );
+    const report = withRecommendations(
+      require(
+        node_path.default.resolve(__dirname, "../../../tmp/metro-stats.json"),
+      ),
+    );
+    const before =
+      process.env.COMPARE && node_path.default.resolve(process.env.COMPARE);
+    return before ? withComparison(report, require(before), before) : report;
+  },
   setup: node_path.default.resolve(__dirname, "client/setup.js"),
   view: {
     assets: [
       node_path.default.resolve(__dirname, "../assets/global.css"),
       node_path.default.resolve(__dirname, "client/pages/default.js"),
       node_path.default.resolve(__dirname, "client/pages/module.js"),
+      node_path.default.resolve(__dirname, "client/pages/moduleDiff.js"),
       node_path.default.resolve(__dirname, "client/pages/package.js"),
-      node_path.default.resolve(__dirname, "../assets/highcharts.css"),
       node_path.default.resolve(__dirname, "client/views/prettify.js"),
-      node_path.default.resolve(__dirname, "client/views/highcharts.js"),
-      node_path.default.resolve(__dirname, "client/views/foamtree.js"),
+      node_path.default.resolve(__dirname, "client/views/importGraph.js"),
+      node_path.default.resolve(__dirname, "client/views/moduleOverview.js"),
+      node_path.default.resolve(__dirname, "client/views/packageOverview.js"),
+      node_path.default.resolve(__dirname, "client/views/insights.js"),
+      node_path.default.resolve(__dirname, "client/views/compare.js"),
+      node_path.default.resolve(__dirname, "client/views/codeDiff.js"),
+      node_path.default.resolve(__dirname, "client/views/reportBar.js"),
+      node_path.default.resolve(__dirname, "client/views/treemap.js"),
+      node_path.default.resolve(
+        __dirname,
+        "client/views/persistedFilterInput.js",
+      ),
     ],
   },
 };