@qwik.dev/devtools 0.2.8 → 0.3.0-beta.3

package/dist/ui/packages/devtools/ui/src/features/Performance/components/HookDetailsPanel.qwik.mjs

@@ -0,0 +1,95 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _fnSignal } from "@qwik.dev/core";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+import { computeEventRows } from "../computePerfViewModel.qwik.mjs";
+import { formatMs } from "../utils/formatMs.qwik.mjs";
+const _hf0 = (p0) => p0.row.eventName;
+const _hf1 = (p0) => p0.row.calls;
+const _hf2 = (p0) => p0.component.componentName;
+const _hf3 = (p0) => p0.component.calls;
+const HookRow = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => /* @__PURE__ */ _jsxSorted("div", null, {
+  class: "grid grid-cols-3 px-3 py-2 text-sm"
+}, [
+  /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "truncate"
+  }, _fnSignal(_hf0, [
+    _rawProps
+  ]), 1, null),
+  /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "text-right"
+  }, formatMs(_rawProps.row.time), 1, null),
+  /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "text-right"
+  }, _fnSignal(_hf1, [
+    _rawProps
+  ]), 1, null)
+], 1, "Tx_0"), "HookRow_component_lEGVvl0yq4c"));
+const HookDetailsPanel = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  const rows = computeEventRows(_rawProps.component.csrItems);
+  return /* @__PURE__ */ _jsxSorted(Fragment, null, null, [
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "border-glass-border flex items-center justify-between border-b p-4"
+    }, [
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "min-w-0"
+      }, [
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "truncate text-base font-semibold"
+        }, [
+          _fnSignal(_hf2, [
+            _rawProps
+          ]),
+          " Hook Details"
+        ], 1, null),
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "text-muted-foreground mt-1 text-xs"
+        }, [
+          "Total: ",
+          formatMs(_rawProps.component.totalTime),
+          " • ",
+          _fnSignal(_hf3, [
+            _rawProps
+          ]),
+          " calls"
+        ], 1, null)
+      ], 1, null),
+      /* @__PURE__ */ _jsxSorted("button", {
+        "q-e:click": _rawProps.onClose$
+      }, {
+        "aria-label": "close",
+        class: "text-muted-foreground hover:text-foreground rounded p-2 transition-colors"
+      }, "✕", 2, null)
+    ], 1, null),
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "min-h-0 flex-1 overflow-y-auto p-4"
+    }, /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "border-border bg-card-item-bg rounded-lg border"
+    }, [
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "border-border grid grid-cols-3 border-b px-3 py-2 text-xs font-medium"
+      }, [
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "text-muted-foreground"
+        }, "HOOK NAME", 3, null),
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "text-muted-foreground text-right"
+        }, "TIME", 3, null),
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "text-muted-foreground text-right"
+        }, "CALLS", 3, null)
+      ], 3, null),
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "divide-glass-border divide-y"
+      }, [
+        rows.map((row) => /* @__PURE__ */ _jsxSorted(HookRow, {
+          row
+        }, null, null, 3, row.eventName)),
+        rows.length === 0 && /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "text-muted-foreground px-3 py-4 text-center text-sm"
+        }, "No CSR records for this component.", 3, "Tx_1")
+      ], 1, null)
+    ], 1, null), 1, null)
+  ], 1, "Tx_2");
+}, "HookDetailsPanel_component_8uC9a2UU5yo"));
+export {
+  HookDetailsPanel
+};

package/dist/ui/packages/devtools/ui/src/features/Performance/components/PerformanceOverview.qwik.mjs

@@ -0,0 +1,36 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _fnSignal } from "@qwik.dev/core";
+import { formatMs } from "../utils/formatMs.qwik.mjs";
+import { StatCard } from "./StatCard.qwik.mjs";
+const _hf0 = (p0) => p0.overview.slowestComponent?.componentName || "-";
+const PerformanceOverview = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "grid grid-cols-1 gap-5 md:grid-cols-4"
+  }, [
+    /* @__PURE__ */ _jsxSorted(StatCard, {
+      value: formatMs(_rawProps.overview.totalRenderTime)
+    }, {
+      label: "TOTAL RENDER TIME"
+    }, null, 3, "BX_0"),
+    /* @__PURE__ */ _jsxSorted(StatCard, {
+      subtitle: _rawProps.overview.slowestComponent ? `${formatMs(_rawProps.overview.slowestComponent.avgTime)} avg` : "-"
+    }, {
+      label: "SLOWEST COMPONENT",
+      value: _fnSignal(_hf0, [
+        _rawProps
+      ])
+    }, null, 3, "BX_1"),
+    /* @__PURE__ */ _jsxSorted(StatCard, {
+      value: formatMs(_rawProps.overview.avgTime)
+    }, {
+      label: "AVG TIME"
+    }, null, 3, "BX_2"),
+    /* @__PURE__ */ _jsxSorted(StatCard, {
+      value: String(_rawProps.overview.totalCalls)
+    }, {
+      label: "TOTAL CALLS"
+    }, null, 3, "BX_3")
+  ], 1, "BX_4");
+}, "PerformanceOverview_component_TcuA6nX9GNo"));
+export {
+  PerformanceOverview
+};

package/dist/ui/packages/devtools/ui/src/features/Performance/components/StatCard.qwik.mjs

@@ -0,0 +1,21 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _wrapProp } from "@qwik.dev/core";
+const StatCard = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "border-border bg-card-item-bg hover:bg-card-item-hover-bg flex items-center gap-4 rounded-xl border p-5 transition-all duration-200"
+  }, /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "flex-1"
+  }, [
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "text-muted-foreground text-xs font-medium"
+    }, _wrapProp(_rawProps, "label"), 1, null),
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "mt-1 text-3xl font-semibold"
+    }, _wrapProp(_rawProps), 1, null),
+    _rawProps.subtitle && /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "text-muted-foreground mt-1 text-xs"
+    }, _wrapProp(_rawProps, "subtitle"), 1, "RV_0")
+  ], 1, null), 1, "RV_1");
+}, "StatCard_component_Uisqt5fvHhk"));
+export {
+  StatCard
+};

package/dist/ui/packages/devtools/ui/src/features/Performance/computePerfViewModel.qwik.mjs

@@ -0,0 +1,118 @@
+import { groupCsrBySsr, parseComponentAndEventName } from "./transformPerformanceData.qwik.mjs";
+function getCallsFromCsr(item) {
+  return typeof item.renderCount === "number" ? item.renderCount : 1;
+}
+function computeEventRows(csrItems) {
+  const byEvent = /* @__PURE__ */ new Map();
+  for (const item of csrItems) {
+    const eventName = item.eventName || "render";
+    const prev = byEvent.get(eventName) || {
+      time: 0,
+      calls: 0
+    };
+    prev.time += item.duration || 0;
+    prev.calls += getCallsFromCsr(item);
+    byEvent.set(eventName, prev);
+  }
+  return [
+    ...byEvent.entries()
+  ].map(([eventName, v]) => ({
+    eventName,
+    time: v.time,
+    calls: v.calls
+  })).sort((a, b) => b.time - a.time);
+}
+function computeComponentVmFromCsr(componentName, csrItems, ssr) {
+  let totalTime = 0;
+  let calls = 0;
+  for (const item of csrItems) {
+    totalTime += item.duration || 0;
+    calls += getCallsFromCsr(item);
+  }
+  const avgTime = calls > 0 ? totalTime / calls : 0;
+  return {
+    componentName,
+    totalTime,
+    calls,
+    avgTime,
+    ssr,
+    csrItems
+  };
+}
+function groupComponentsBySsr(safe) {
+  const grouped = groupCsrBySsr(safe);
+  const result = [];
+  for (const raw of safe.ssr) {
+    const ssrItem = {
+      ...raw,
+      phase: "ssr"
+    };
+    const componentName = parseComponentAndEventName(ssrItem.component).componentName;
+    const csrItems = grouped.get(raw) || [];
+    result.push(computeComponentVmFromCsr(componentName, csrItems, ssrItem));
+  }
+  return result;
+}
+function groupComponentsByName(csrRaw) {
+  const byName = /* @__PURE__ */ new Map();
+  for (const entry of csrRaw) {
+    const csrItem = {
+      ...entry,
+      phase: "csr"
+    };
+    const parsed = parseComponentAndEventName(csrItem.component);
+    const list = byName.get(parsed.componentName) || [];
+    list.push({
+      ...csrItem,
+      ...parsed
+    });
+    byName.set(parsed.componentName, list);
+  }
+  const result = [];
+  for (const [componentName, csrItems] of byName.entries()) {
+    result.push(computeComponentVmFromCsr(componentName, csrItems));
+  }
+  return result;
+}
+function computeOverview(components) {
+  let totalRenderTime = 0;
+  let totalCalls = 0;
+  for (const c of components) {
+    totalRenderTime += c.totalTime;
+    totalCalls += c.calls;
+  }
+  const avgTime = totalCalls > 0 ? totalRenderTime / totalCalls : 0;
+  const slowest = components.filter((c) => c.calls > 0).reduce((acc, cur) => {
+    if (!acc) {
+      return cur;
+    }
+    return cur.avgTime > acc.avgTime ? cur : acc;
+  }, void 0);
+  return {
+    totalRenderTime,
+    totalCalls,
+    avgTime,
+    slowestComponent: slowest ? {
+      componentName: slowest.componentName,
+      avgTime: slowest.avgTime,
+      totalTime: slowest.totalTime,
+      calls: slowest.calls
+    } : void 0
+  };
+}
+function computePerfViewModel(perf) {
+  const safe = perf || {
+    ssr: [],
+    csr: []
+  };
+  const components = safe.ssr?.length ? groupComponentsBySsr(safe) : safe.csr?.length ? groupComponentsByName(safe.csr) : [];
+  components.sort((a, b) => b.totalTime - a.totalTime);
+  return {
+    overview: computeOverview(components),
+    components
+  };
+}
+export {
+  computeEventRows,
+  computePerfViewModel
+};

package/dist/ui/packages/devtools/ui/src/features/Performance/transformPerformanceData.qwik.mjs

@@ -0,0 +1,36 @@
+function parseComponentAndEventName(component) {
+  const componentName = (component?.split("_component_")[0] ?? component) || "";
+  const rest = component.includes("_component_") ? component.split("_component_")[1] ?? "" : "";
+  const parts = rest.split("_").filter(Boolean);
+  const eventName = parts.find((p) => /^use[A-Z_]/.test(p) || /^on[A-Z_]/.test(p));
+  return {
+    componentName,
+    eventName
+  };
+}
+function groupCsrBySsr(data) {
+  const ssrByName = /* @__PURE__ */ new Map();
+  for (const ssrItem of data.ssr) {
+    ssrByName.set(parseComponentAndEventName(ssrItem.component).componentName, ssrItem);
+  }
+  const result = /* @__PURE__ */ new WeakMap();
+  for (const ssrItem of data.ssr) {
+    result.set(ssrItem, []);
+  }
+  for (const csrItem of data.csr) {
+    const parsed = parseComponentAndEventName(csrItem.component);
+    const ssrItem = ssrByName.get(parsed.componentName);
+    if (!ssrItem) {
+      continue;
+    }
+    result.get(ssrItem).push({
+      ...csrItem,
+      ...parsed
+    });
+  }
+  return result;
+}
+export {
+  groupCsrBySsr,
+  parseComponentAndEventName
+};

package/dist/ui/packages/devtools/ui/src/features/Performance/utils/formatMs.qwik.mjs

@@ -0,0 +1,15 @@
+function formatMs(ms) {
+  if (!Number.isFinite(ms)) {
+    return "-";
+  }
+  if (ms >= 1e3) {
+    return `${(ms / 1e3).toFixed(2)}s`;
+  }
+  if (ms >= 10) {
+    return `${ms.toFixed(0)}ms`;
+  }
+  return `${ms.toFixed(2)}ms`;
+}
+export {
+  formatMs
+};