@qwik.dev/devtools 0.2.1 → 0.2.2

package/dist/ui/features/Packages/components/DependencyCard/DependencyCard.qwik.mjs

@@ -49,13 +49,13 @@ const DependencyCard = component$(({ pkg }) => {
                 class: "min-w-0 flex-1",
                 children: [
                   /* @__PURE__ */ jsx("h3", {
-                    class: "mb-1.5 cursor-pointer truncate text-base font-bold text-foreground transition-colors hover:text-primary",
+                    class: "text-foreground hover:text-primary mb-1.5 cursor-pointer truncate text-base font-bold transition-colors",
                     onClick$: handlePackageClick,
                     title: pkg.name,
                     children: pkg.name
                   }),
                   /* @__PURE__ */ jsxs("span", {
-                    class: "bg-primary/10 border-primary/20 inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-medium text-primary",
+                    class: "bg-primary/10 border-primary/20 text-primary inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-medium",
                     children: [
                       /* @__PURE__ */ jsx("svg", {
                         class: "h-3 w-3",
@@ -78,7 +78,7 @@ const DependencyCard = component$(({ pkg }) => {
             ]
           }),
           /* @__PURE__ */ jsx("p", {
-            class: "line-clamp-2 min-h-[2.5rem] text-sm leading-relaxed text-muted-foreground",
+            class: "text-muted-foreground line-clamp-2 min-h-[2.5rem] text-sm leading-relaxed",
             children: pkg.description || "No description available"
           }),
           /* @__PURE__ */ jsx("div", {
@@ -95,14 +95,14 @@ const DependencyCard = component$(({ pkg }) => {
                     onClick$: handleAuthorClick,
                     title: `Contact ${pkg.author.name}`,
                     children: /* @__PURE__ */ jsx("span", {
-                      class: "text-[10px] font-semibold text-accent",
+                      class: "text-accent text-[10px] font-semibold",
                       children: pkg.author.name.split(" ").map((n) => n.charAt(0)).join("").substring(0, 2).toUpperCase()
                     })
                   }),
                   /* @__PURE__ */ jsx("span", {
-                    class: "truncate text-xs text-muted-foreground",
+                    class: "text-muted-foreground truncate text-xs",
                     children: /* @__PURE__ */ jsx("span", {
-                      class: "font-medium text-foreground",
+                      class: "text-foreground font-medium",
                       children: pkg.author.name
                     })
                   })
@@ -115,7 +115,7 @@ const DependencyCard = component$(({ pkg }) => {
                 children: [
                   pkg.homepage && /* @__PURE__ */ jsx("button", {
                     onClick$: handleHomepageClick,
-                    class: "hover:bg-primary/10 group/btn rounded-lg p-1.5 text-muted-foreground transition-all duration-200 hover:text-primary",
+                    class: "hover:bg-primary/10 group/btn text-muted-foreground hover:text-primary rounded-lg p-1.5 transition-all duration-200",
                     title: "Homepage",
                     children: /* @__PURE__ */ jsx("svg", {
                       class: "h-4 w-4",
@@ -132,7 +132,7 @@ const DependencyCard = component$(({ pkg }) => {
                   }),
                   pkg.repository && /* @__PURE__ */ jsx("button", {
                     onClick$: handleRepositoryClick,
-                    class: "hover:bg-primary/10 group/btn rounded-lg p-1.5 text-muted-foreground transition-all duration-200 hover:text-primary",
+                    class: "hover:bg-primary/10 group/btn text-muted-foreground hover:text-primary rounded-lg p-1.5 transition-all duration-200",
                     title: "Repository",
                     children: /* @__PURE__ */ jsx("svg", {
                       class: "h-4 w-4",
@@ -145,7 +145,7 @@ const DependencyCard = component$(({ pkg }) => {
                   }),
                   pkg.npmUrl && /* @__PURE__ */ jsx("button", {
                     onClick$: handlePackageClick,
-                    class: "hover:bg-primary/10 group/btn rounded-lg p-1.5 text-muted-foreground transition-all duration-200 hover:text-primary",
+                    class: "hover:bg-primary/10 group/btn text-muted-foreground hover:text-primary rounded-lg p-1.5 transition-all duration-200",
                     title: "npm",
                     children: /* @__PURE__ */ jsx("svg", {
                       class: "h-4 w-4",

package/dist/ui/features/Packages/components/PackageIcon/PackageIcon.qwik.mjs

@@ -8,7 +8,7 @@ const PackageIcon = component$(({ packageName, iconUrl }) => {
   const fallbackInitial = packageName.split("/").pop()?.charAt(0).toUpperCase() || packageName.charAt(0).toUpperCase();
   if (!iconUrl || iconError.value) {
     return /* @__PURE__ */ jsx("span", {
-      class: "text-sm font-bold text-primary",
+      class: "text-primary text-sm font-bold",
       children: fallbackInitial
     });
   }

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
+};