@razz21/vue-scan/dist/canvas/offscreen-canvas.worker.js

Track and visualize Vue 3 component renders

const a = `function T({
  canvas: e,
  ctx: o,
  activeRects: n,
  dpr: l,
  duration: r,
  color: s
}) {
  o.clearRect(0, 0, e.width / l, e.height / l);
  const t = performance.now();
  return n.forEach((c, f) => {
    const { lastUpdated: g } = c, w = t - g;
    if (w > 1e3) {
      n.delete(f);
      return;
    }
    $({
      ctx: o,
      color: s,
      opacity: 1 - w / r,
      rect: c.rect,
      title: c.title
    });
  }), n.size > 0;
}
function $({
  ctx: e,
  rect: o,
  color: n,
  title: l,
  opacity: r
}) {
  const { left: s, top: t, width: c, height: f } = o;
  e.fillStyle = \`rgba(\${n},\${r * 0.6})\`, e.strokeStyle = \`rgba(\${n},\${r})\`, e.lineWidth = 2, e.fillRect(s, t, c, f), e.strokeRect(s, t, c, f), e.font = "12px Consolas, monospace";
  const g = 16;
  e.fillStyle = \`rgba(\${n},\${Math.min(r + 0.2, 0.6)})\`, e.fillRect(s, t - g, c, g), e.fillStyle = \`rgba(255, 255, 255, \${r})\`, e.fillText(l, s + 4, t - 4);
}
let a = null, d = null, i = 1;
const u = /* @__PURE__ */ new Map();
let h = null, p = "65, 184, 131", C = 500;
const m = () => {
  if (!a || !d) return;
  if (!T({
    canvas: a,
    ctx: d,
    activeRects: u,
    dpr: i,
    duration: C,
    color: p
  }) && h) {
    cancelAnimationFrame(h), h = null;
    return;
  }
  h = requestAnimationFrame(m);
};
addEventListener("message", (e) => {
  const { type: o } = e.data;
  if (o === "init") {
    const {
      canvas: n,
      width: l,
      height: r,
      dpr: s,
      color: t,
      duration: c
    } = e.data;
    a = n, d = a.getContext("2d"), i = s, a.width = l * i, a.height = r * i, p = t, C = c, d && (d.resetTransform(), d.scale(i, i));
  }
  if (!(!a || !d)) {
    if (o === "highlight") {
      const { rects: n } = e.data;
      for (let l = 0; l < n.length; l++) {
        const r = n[l], s = {
          ...r,
          renderCount: 1,
          lastUpdated: performance.now(),
          title: \`\${r.name} x1\`
        }, t = u.get(r.uid);
        t ? (t.renderCount = t.renderCount + 1, t.title = \`\${t.name} x\${t.renderCount}\`, t.lastUpdated = performance.now(), t.rect = r.rect) : u.set(r.uid, s);
      }
      h || (h = requestAnimationFrame(m));
      return;
    }
    if (o === "resize") {
      const { width: n, height: l, dpr: r } = e.data;
      i = r, a.width = n * i, a.height = l * i, d.resetTransform(), d.scale(i, i), m();
      return;
    }
    if (o === "delete") {
      const { uid: n } = e.data;
      u.delete(n);
      return;
    }
    if (o === "clear") {
      h && (cancelAnimationFrame(h), h = null), u.clear(), d.clearRect(0, 0, a.width / i, a.height / i);
      return;
    }
  }
});
//# sourceMappingURL=offscreen-canvas.worker-1eDF5ilE.js.map
`, r = typeof self < "u" && self.Blob && new Blob(["URL.revokeObjectURL(import.meta.url);", a], { type: "text/javascript;charset=utf-8" });
function o(t) {
  let n;
  try {
    if (n = r && (self.URL || self.webkitURL).createObjectURL(r), !n) throw "";
    const e = new Worker(n, {
      type: "module",
      name: t?.name
    });
    return e.addEventListener("error", () => {
      (self.URL || self.webkitURL).revokeObjectURL(n);
    }), e;
  } catch {
    return new Worker(
      "data:text/javascript;charset=utf-8," + encodeURIComponent(a),
      {
        type: "module",
        name: t?.name
      }
    );
  }
}
export {
  o as default
};
//# sourceMappingURL=offscreen-canvas.worker.js.map