@qwik.dev/devtools 0.2.0 → 0.2.2

package/dist/ui/features/Performance/Performance.qwik.mjs

@@ -0,0 +1,307 @@
+import { jsx, jsxs, Fragment } from "@qwik.dev/core/jsx-runtime";
+import { component$, useSignal, useTask$, isBrowser, useComputed$, $ } from "@qwik.dev/core";
+import { computePerfViewModel, computeEventRows } from "./computePerfViewModel.qwik.mjs";
+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`;
+}
+const Performance = component$(() => {
+  const perf = useSignal(null);
+  const selectedComponent = useSignal(null);
+  useTask$(() => {
+    if (!isBrowser) return;
+    perf.value = window.__QWIK_PERF__ || {
+      ssr: [],
+      csr: []
+    };
+  });
+  const vm = useComputed$(() => computePerfViewModel(perf.value));
+  const selectedVm = useComputed$(() => {
+    const name = selectedComponent.value;
+    if (!name) return null;
+    return vm.value.components.find((c) => c.componentName === name) || null;
+  });
+  const onSelect = $((name) => {
+    selectedComponent.value = name;
+  });
+  const clearSelect = $(() => {
+    selectedComponent.value = null;
+  });
+  return /* @__PURE__ */ jsx("div", {
+    class: "h-full w-full flex-1 overflow-hidden",
+    children: !perf.value?.ssr?.length && !perf.value?.csr?.length ? /* @__PURE__ */ jsx("div", {
+      class: "border-border bg-card-item-bg flex h-full items-center justify-center rounded-xl border p-8",
+      children: /* @__PURE__ */ jsxs("div", {
+        class: "text-muted-foreground text-center text-sm",
+        children: [
+          "No performance data found.",
+          /* @__PURE__ */ jsx("div", {
+            class: "mt-1 text-xs",
+            children: "Ensure instrumentation is enabled and interact with the app, then reopen this tab."
+          })
+        ]
+      })
+    }) : /* @__PURE__ */ jsxs("div", {
+      class: "flex h-full min-h-0 flex-col gap-4",
+      children: [
+        /* @__PURE__ */ jsxs("div", {
+          class: "grid grid-cols-1 gap-5 md:grid-cols-4",
+          children: [
+            /* @__PURE__ */ jsx("div", {
+              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",
+              children: /* @__PURE__ */ jsxs("div", {
+                class: "flex-1",
+                children: [
+                  /* @__PURE__ */ jsx("div", {
+                    class: "text-muted-foreground text-xs font-medium",
+                    children: "TOTAL RENDER TIME"
+                  }),
+                  /* @__PURE__ */ jsx("div", {
+                    class: "mt-1 text-3xl font-semibold",
+                    children: formatMs(vm.value.overview.totalRenderTime)
+                  })
+                ]
+              })
+            }),
+            /* @__PURE__ */ jsx("div", {
+              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",
+              children: /* @__PURE__ */ jsxs("div", {
+                class: "flex-1",
+                children: [
+                  /* @__PURE__ */ jsx("div", {
+                    class: "text-muted-foreground text-xs font-medium",
+                    children: "SLOWEST COMPONENT"
+                  }),
+                  /* @__PURE__ */ jsx("div", {
+                    class: "mt-1 text-lg font-semibold",
+                    children: vm.value.overview.slowestComponent?.componentName || "-"
+                  }),
+                  /* @__PURE__ */ jsx("div", {
+                    class: "text-muted-foreground mt-1 text-xs",
+                    children: vm.value.overview.slowestComponent ? `${formatMs(vm.value.overview.slowestComponent.avgTime)} avg` : "-"
+                  })
+                ]
+              })
+            }),
+            /* @__PURE__ */ jsx("div", {
+              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",
+              children: /* @__PURE__ */ jsxs("div", {
+                class: "flex-1",
+                children: [
+                  /* @__PURE__ */ jsx("div", {
+                    class: "text-muted-foreground text-xs font-medium",
+                    children: "AVG TIME"
+                  }),
+                  /* @__PURE__ */ jsx("div", {
+                    class: "mt-1 text-3xl font-semibold",
+                    children: formatMs(vm.value.overview.avgTime)
+                  })
+                ]
+              })
+            }),
+            /* @__PURE__ */ jsx("div", {
+              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",
+              children: /* @__PURE__ */ jsxs("div", {
+                class: "flex-1",
+                children: [
+                  /* @__PURE__ */ jsx("div", {
+                    class: "text-muted-foreground text-xs font-medium",
+                    children: "TOTAL CALLS"
+                  }),
+                  /* @__PURE__ */ jsx("div", {
+                    class: "mt-1 text-3xl font-semibold",
+                    children: vm.value.overview.totalCalls
+                  })
+                ]
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          class: "border-border bg-background flex min-h-0 flex-1 overflow-hidden rounded-md border",
+          children: [
+            /* @__PURE__ */ jsxs("div", {
+              class: "min-h-0 flex-1 overflow-y-auto p-4",
+              children: [
+                /* @__PURE__ */ jsx("div", {
+                  class: "mb-3 flex items-center justify-between",
+                  children: /* @__PURE__ */ jsxs("div", {
+                    children: [
+                      /* @__PURE__ */ jsx("div", {
+                        class: "text-lg font-semibold",
+                        children: "Components"
+                      }),
+                      /* @__PURE__ */ jsxs("div", {
+                        class: "text-muted-foreground text-xs",
+                        children: [
+                          "CSR only • ",
+                          vm.value.components.length,
+                          " total"
+                        ]
+                      })
+                    ]
+                  })
+                }),
+                /* @__PURE__ */ jsx("div", {
+                  class: "grid grid-cols-1 gap-4 md:grid-cols-2",
+                  children: vm.value.components.map((c) => {
+                    const selected = selectedComponent.value === c.componentName;
+                    return /* @__PURE__ */ jsx("button", {
+                      onClick$: () => onSelect(c.componentName),
+                      class: [
+                        "border-border bg-card-item-bg hover:bg-card-item-hover-bg w-full rounded-xl border p-4 text-left transition-all duration-200 hover:-translate-y-0.5",
+                        selected ? "ring-primary-active ring-2" : ""
+                      ].join(" "),
+                      children: /* @__PURE__ */ jsxs("div", {
+                        class: "flex items-start justify-between gap-4",
+                        children: [
+                          /* @__PURE__ */ jsxs("div", {
+                            class: "min-w-0 flex-1",
+                            children: [
+                              /* @__PURE__ */ jsx("div", {
+                                class: "truncate text-base font-semibold",
+                                children: c.componentName
+                              }),
+                              /* @__PURE__ */ jsxs("div", {
+                                class: "text-muted-foreground mt-1 text-xs",
+                                children: [
+                                  "Avg: ",
+                                  formatMs(c.avgTime)
+                                ]
+                              })
+                            ]
+                          }),
+                          /* @__PURE__ */ jsxs("div", {
+                            class: "shrink-0 text-right",
+                            children: [
+                              /* @__PURE__ */ jsx("div", {
+                                class: "text-primary text-lg font-semibold",
+                                children: formatMs(c.totalTime)
+                              }),
+                              /* @__PURE__ */ jsxs("div", {
+                                class: "text-muted-foreground text-xs",
+                                children: [
+                                  "SSR: ",
+                                  typeof c.ssr?.ssrCount === "number" ? c.ssr.ssrCount : "-"
+                                ]
+                              })
+                            ]
+                          })
+                        ]
+                      })
+                    }, c.componentName);
+                  })
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx("div", {
+              class: "border-border border-l"
+            }),
+            /* @__PURE__ */ jsx("div", {
+              class: "flex w-[420px] min-w-[320px] flex-col overflow-hidden",
+              children: selectedVm.value ? /* @__PURE__ */ jsxs(Fragment, {
+                children: [
+                  /* @__PURE__ */ jsxs("div", {
+                    class: "border-border flex items-center justify-between border-b p-4",
+                    children: [
+                      /* @__PURE__ */ jsxs("div", {
+                        class: "min-w-0",
+                        children: [
+                          /* @__PURE__ */ jsxs("div", {
+                            class: "truncate text-base font-semibold",
+                            children: [
+                              selectedVm.value.componentName,
+                              " Hook Details"
+                            ]
+                          }),
+                          /* @__PURE__ */ jsxs("div", {
+                            class: "text-muted-foreground mt-1 text-xs",
+                            children: [
+                              "Total: ",
+                              formatMs(selectedVm.value.totalTime),
+                              " • ",
+                              selectedVm.value.calls,
+                              " calls"
+                            ]
+                          })
+                        ]
+                      }),
+                      /* @__PURE__ */ jsx("button", {
+                        "aria-label": "close",
+                        onClick$: clearSelect,
+                        class: "text-muted-foreground hover:text-foreground rounded p-2 transition-colors",
+                        children: "✕"
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx("div", {
+                    class: "min-h-0 flex-1 overflow-y-auto p-4",
+                    children: /* @__PURE__ */ jsxs("div", {
+                      class: "border-border bg-card-item-bg rounded-lg border",
+                      children: [
+                        /* @__PURE__ */ jsxs("div", {
+                          class: "border-border grid grid-cols-3 border-b px-3 py-2 text-xs font-medium",
+                          children: [
+                            /* @__PURE__ */ jsx("div", {
+                              class: "text-muted-foreground",
+                              children: "HOOK NAME"
+                            }),
+                            /* @__PURE__ */ jsx("div", {
+                              class: "text-muted-foreground text-right",
+                              children: "TIME"
+                            }),
+                            /* @__PURE__ */ jsx("div", {
+                              class: "text-muted-foreground text-right",
+                              children: "CALLS"
+                            })
+                          ]
+                        }),
+                        /* @__PURE__ */ jsxs("div", {
+                          class: "divide-border divide-y",
+                          children: [
+                            computeEventRows(selectedVm.value.csrItems).map((row) => /* @__PURE__ */ jsxs("div", {
+                              class: "grid grid-cols-3 px-3 py-2 text-sm",
+                              children: [
+                                /* @__PURE__ */ jsx("div", {
+                                  class: "truncate",
+                                  children: row.eventName
+                                }),
+                                /* @__PURE__ */ jsx("div", {
+                                  class: "text-right",
+                                  children: formatMs(row.time)
+                                }),
+                                /* @__PURE__ */ jsx("div", {
+                                  class: "text-right",
+                                  children: row.calls
+                                })
+                              ]
+                            }, row.eventName)),
+                            !selectedVm.value.csrItems.length && /* @__PURE__ */ jsx("div", {
+                              class: "text-muted-foreground px-3 py-4 text-center text-sm",
+                              children: "No CSR records for this component."
+                            })
+                          ]
+                        })
+                      ]
+                    })
+                  })
+                ]
+              }) : /* @__PURE__ */ jsx("div", {
+                class: "flex h-full items-center justify-center p-8",
+                children: /* @__PURE__ */ jsx("div", {
+                  class: "text-muted-foreground text-center text-sm",
+                  children: "Select a component to view hook details."
+                })
+              })
+            })
+          ]
+        })
+      ]
+    })
+  });
+});
+export {
+  Performance
+};

package/dist/ui/features/Performance/computePerfViewModel.qwik.mjs

@@ -0,0 +1,101 @@
+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 computePerfViewModel(perf) {
+  const safe = perf || {
+    ssr: [],
+    csr: []
+  };
+  const components = [];
+  if (safe.ssr?.length) {
+    const grouped = groupCsrBySsr(safe);
+    for (const ssrItem of safe.ssr) {
+      const componentName = parseComponentAndEventName(ssrItem.component).componentName;
+      const csrItems = grouped.get(ssrItem) || [];
+      components.push(computeComponentVmFromCsr(componentName, csrItems, ssrItem));
+    }
+  } else if (safe.csr?.length) {
+    const byName = /* @__PURE__ */ new Map();
+    for (const csrItem of safe.csr) {
+      const parsed = parseComponentAndEventName(csrItem.component);
+      const list = byName.get(parsed.componentName) || [];
+      list.push({
+        ...csrItem,
+        ...parsed
+      });
+      byName.set(parsed.componentName, list);
+    }
+    for (const [componentName, csrItems] of byName.entries()) {
+      components.push(computeComponentVmFromCsr(componentName, csrItems));
+    }
+  }
+  components.sort((a, b) => b.totalTime - a.totalTime);
+  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);
+  const overview = {
+    totalRenderTime,
+    totalCalls,
+    avgTime,
+    slowestComponent: slowest ? {
+      componentName: slowest.componentName,
+      avgTime: slowest.avgTime,
+      totalTime: slowest.totalTime,
+      calls: slowest.calls
+    } : void 0
+  };
+  return {
+    overview,
+    components
+  };
+}
+export {
+  computeEventRows,
+  computePerfViewModel
+};

package/dist/ui/features/Performance/transformPerformanceData.qwik.mjs

@@ -0,0 +1,34 @@
+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
+};