@react-perfscope/ui 0.2.0 → 0.4.0

package/README.md

@@ -27,13 +27,12 @@ const unmount = mount({ recorder })
 
 Click any row to expand its detail. Each signal kind shows different info:
 
-- **forced-reflow** — call stack showing where layout was forced
+- **forced-reflow** — call stack showing where layout was forced; reads in one turn are coalesced into a single entry carrying its read count
 - **layout-shift** — CLS value + each source rect
 - **long-task** — start/end/duration, plus call stack if captured
 - **network** — full URL, transfer size, render-blocking flag
-- **paint** — paint name (first-paint / first-contentful-paint)
 - **web-vital** — metric name, value, rating per [Google thresholds](https://web.dev/vitals/)
-- **render** — component, reason, duration, timestamp
+- **render** — one entry per commit, showing the cascade root and every component that re-rendered
 
 The header has a **Save** button that downloads the full recording as JSON. The `render` tab offers **Group by component** and the `forced-reflow` tab offers **Group by source**.
 
@@ -79,13 +78,12 @@ const unmount = mount({ recorder })
 
 신호 row를 클릭하면 디테일이 펼쳐진다. 종류별로 다른 정보를 보여준다:
 
-- **forced-reflow** — 레이아웃을 강제한 호출 스택
+- **forced-reflow** — 레이아웃을 강제한 호출 스택. 한 턴에 일어난 읽기는 읽기 횟수를 담은 한 항목으로 합쳐진다
 - **layout-shift** — CLS 값 + 각 source rect
 - **long-task** — 시작/끝/duration, 캡처된 스택이 있으면 같이 표시
 - **network** — 전체 URL, transfer size, render-blocking 여부
-- **paint** — paint 이름 (first-paint / first-contentful-paint)
 - **web-vital** — 메트릭 이름, 값, [Google 기준](https://web.dev/vitals/)에 따른 등급
-- **render** — 컴포넌트, reason, duration, 타임스탬프
+- **render** — 커밋당 한 항목. 캐스케이드 루트와 그 커밋에서 리렌더된 모든 컴포넌트를 보여준다
 
 헤더의 **Save** 버튼으로 전체 recording을 JSON으로 받을 수 있다. `render` 탭에는 **Group by component**, `forced-reflow` 탭에는 **Group by source** 옵션이 있다.
 

package/dist/index.cjs

@@ -105,6 +105,9 @@ var en = {
   sort: "Sort",
   sortChronological: "chronological",
   sortSeverity: "severity (worst first)",
+  filterPlaceholder: "Filter\u2026",
+  filterAria: "Filter signals",
+  filterNoMatches: "No signals match the filter.",
   groupBy: "Group by",
   groupChronological: "chronological",
   groupComponent: "component",
@@ -132,6 +135,8 @@ var en = {
   blocking: "blocking",
   sourceCount: (n) => `${n} source(s)`,
   moreItems: (n) => `+ ${n} more`,
+  coalescedReads: (n) => `${n} reads`,
+  cascadeComponents: (n) => `${n} components`,
   startRecording: "Start recording",
   stopRecording: "Stop recording",
   rec: "rec",
@@ -193,6 +198,9 @@ var ko = {
   sort: "\uC815\uB82C",
   sortChronological: "\uC2DC\uAC04\uC21C",
   sortSeverity: "\uC2EC\uAC01\uB3C4\uC21C (\uB192\uC740 \uAC83\uBD80\uD130)",
+  filterPlaceholder: "\uD544\uD130\u2026",
+  filterAria: "\uC2DC\uADF8\uB110 \uD544\uD130",
+  filterNoMatches: "\uD544\uD130\uC640 \uC77C\uCE58\uD558\uB294 \uC2DC\uADF8\uB110\uC774 \uC5C6\uC5B4\uC694.",
   groupBy: "\uADF8\uB8F9\uD654",
   groupChronological: "\uC2DC\uAC04\uC21C",
   groupComponent: "\uCEF4\uD3EC\uB10C\uD2B8",
@@ -220,6 +228,8 @@ var ko = {
   blocking: "\uCC28\uB2E8",
   sourceCount: (n) => `\uC18C\uC2A4 ${n}\uAC1C`,
   moreItems: (n) => `\uC678 ${n}\uAC1C \uB354`,
+  coalescedReads: (n) => `\uC77D\uAE30 ${n}\uD68C`,
+  cascadeComponents: (n) => `\uCEF4\uD3EC\uB10C\uD2B8 ${n}\uAC1C`,
   startRecording: "\uB179\uD654 \uC2DC\uC791",
   stopRecording: "\uB179\uD654 \uC885\uB8CC",
   rec: "\uB179\uD654",
@@ -828,8 +838,10 @@ function renderBreakdown(members) {
   const counts = /* @__PURE__ */ new Map();
   for (const s of members) {
     if (s.kind !== "render") continue;
-    if (!counts.has(s.component)) order.push(s.component);
-    counts.set(s.component, (counts.get(s.component) ?? 0) + 1);
+    for (const m of s.members ?? [s]) {
+      if (!counts.has(m.component)) order.push(m.component);
+      counts.set(m.component, (counts.get(m.component) ?? 0) + 1);
+    }
   }
   return order.map((c) => ({ component: c, count: counts.get(c) }));
 }
@@ -1731,6 +1743,7 @@ function TooltipContent({ s, startedAt }) {
           s.duration.toFixed(2),
           "ms"
         ] }),
+        (s.count ?? 1) > 1 ? ` \xD7${s.count}` : "",
         " ",
         at
       ] });
@@ -1880,6 +1893,45 @@ function RenderInsights({ signals, onSelect }) {
   );
 }
 
+// src/filter.ts
+function signalSearchText(signal) {
+  switch (signal.kind) {
+    case "render": {
+      const parts = [signal.component];
+      if (signal.changedProps) parts.push(...signal.changedProps);
+      if (signal.members) for (const m of signal.members) parts.push(m.component);
+      return parts.join(" ").toLowerCase();
+    }
+    case "network":
+      return signal.url.toLowerCase();
+    case "web-vital":
+      return signal.name.toLowerCase();
+    case "interaction":
+      return [signal.eventType, signal.target ?? ""].join(" ").toLowerCase();
+    case "forced-reflow": {
+      const f = signal.stack[0];
+      return f ? [f.fnName ?? "", f.file].join(" ").toLowerCase() : "";
+    }
+    case "long-task": {
+      const parts = [];
+      if (signal.scripts)
+        for (const s of signal.scripts) parts.push(s.sourceFunctionName, s.invoker, s.sourceURL);
+      if (signal.attribution)
+        for (const a of signal.attribution) parts.push(a.frame.fnName ?? "", a.frame.file);
+      return parts.join(" ").toLowerCase();
+    }
+    case "layout-shift":
+      return "layout-shift";
+    default:
+      return "";
+  }
+}
+function signalMatchesFilter(signal, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  return signalSearchText(signal).includes(q);
+}
+
 // src/panel.tsx
 var import_jsx_runtime5 = require("preact/jsx-runtime");
 var RENDER_REASON_COLOR = {
@@ -2008,7 +2060,7 @@ function summary(s) {
     case "web-vital":
       return `${s.name}: ${s.value.toFixed(2)}`;
     case "render":
-      return `${s.component} \u2022 ${s.reason} \u2022 ${s.duration.toFixed(2)}ms`;
+      return `${s.component} \u2022 ${s.reason} \u2022 ${s.duration.toFixed(2)}ms${s.count && s.count > 1 ? ` \u2022 ${s.count} components` : ""}`;
   }
 }
 var detailLabelStyle = { color: "#888", marginRight: "6px" };
@@ -2093,6 +2145,25 @@ function WebVitalDetail({ s }) {
 }
 function RenderDetail({ s }) {
   const { t } = useI18n();
+  if (s.members && s.members.length > 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.duration }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+          s.duration.toFixed(3),
+          "ms"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.at }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+          s.at.toFixed(2),
+          "ms"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CascadeMembers, { members: s.members }) })
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: detailRowStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: detailLabelStyle, children: t.component }),
@@ -2383,6 +2454,7 @@ function SummaryLine({ signal }) {
     ] });
   }
   if (signal.kind === "forced-reflow") {
+    const count = signal.count ?? 1;
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
       "@ ",
       signal.at.toFixed(1),
@@ -2391,6 +2463,10 @@ function SummaryLine({ signal }) {
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color }, children: [
         signal.duration.toFixed(2),
         "ms"
+      ] }),
+      count > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color: "#888" }, children: [
+        " \u2022 ",
+        t.coalescedReads(count)
       ] })
     ] });
   }
@@ -2412,7 +2488,8 @@ function SummaryLine({ signal }) {
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { color }, children: [
         signal.duration.toFixed(2),
         "ms"
-      ] })
+      ] }),
+      signal.count && signal.count > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: "#888" }, children: t.cascadeComponents(signal.count) })
     ] });
   }
   if (signal.kind === "network") {
@@ -2432,9 +2509,6 @@ function SummaryLine({ signal }) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: summary(signal) });
 }
-function cascadeRootOf(list) {
-  return list.find((s) => s.reason === "state") ?? list.find((s) => s.reason === "mount") ?? [...list].sort((a, b) => a.depth - b.depth)[0];
-}
 function tabSupportsGrouping(kind) {
   return kind === "render" || kind === "forced-reflow";
 }
@@ -2478,22 +2552,17 @@ function groupSignals(signals, mode, kind) {
     const byName = /* @__PURE__ */ new Map();
     for (const s of signals) {
       if (s.kind !== "render") continue;
-      const k = s.component;
-      if (!byName.has(k)) byName.set(k, []);
-      byName.get(k).push(s);
+      for (const m of s.members ?? [s]) {
+        if (!byName.has(m.component)) byName.set(m.component, []);
+        byName.get(m.component).push(m);
+      }
     }
     return Array.from(byName.entries()).sort((a, b) => b[1].length - a[1].length).map(([label, list]) => ({ label, count: list.length, signals: list }));
   }
   if (mode === "commit" && kind === "render") {
-    const byCommit = /* @__PURE__ */ new Map();
-    for (const s of signals) {
-      if (s.kind !== "render") continue;
-      if (!byCommit.has(s.commitId)) byCommit.set(s.commitId, []);
-      byCommit.get(s.commitId).push(s);
-    }
-    return Array.from(byCommit.entries()).sort((a, b) => a[0] - b[0]).map(([id, list]) => {
-      const root = cascadeRootOf(list);
-      return { label: root?.component ?? `commit ${id}`, count: list.length, signals: list };
+    return signals.filter((s) => s.kind === "render").sort((a, b) => a.commitId - b.commitId).map((s) => {
+      const list = s.members ?? [s];
+      return { label: s.component, count: list.length, signals: list };
     });
   }
   if (mode === "source" && kind === "forced-reflow") {
@@ -2628,6 +2697,7 @@ function Panel(props) {
   const [expandedKey, setExpandedKey] = (0, import_hooks3.useState)(null);
   const [groupMode, setGroupMode] = (0, import_hooks3.useState)({});
   const [sortMode, setSortMode] = (0, import_hooks3.useState)({});
+  const [filterText, setFilterText] = (0, import_hooks3.useState)({});
   const activeOverlayCount = (0, import_hooks3.useRef)(0);
   (0, import_hooks3.useEffect)(() => () => hideAllOverlays(), []);
   function handleHover(signal) {
@@ -2834,7 +2904,21 @@ function Panel(props) {
               ]
             }
           )
-        ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            type: "text",
+            "aria-label": t.filterAria,
+            placeholder: t.filterPlaceholder,
+            value: filterText[activeKind] ?? "",
+            onInput: (e) => {
+              setFilterText({ ...filterText, [activeKind]: e.target.value });
+              setExpandedKey(null);
+            },
+            style: { marginLeft: "auto", background: "#1a1a1a", color: "#e6e6e6", border: "1px solid #2a2a2a", borderRadius: "4px", padding: "2px 6px", fontSize: "11px", width: "120px" }
+          }
+        )
       ] }),
       activeTab === "timeline" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flexGrow: 1, overflowY: "auto", paddingTop: "4px", paddingBottom: "24px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         Timeline,
@@ -2855,7 +2939,7 @@ function Panel(props) {
       activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         RenderInsights,
         {
-          signals: grouped.render.filter((s) => s.kind === "render"),
+          signals: grouped.render.flatMap((s) => s.kind === "render" ? s.members ?? [s] : []).filter((s) => signalMatchesFilter(s, filterText.render ?? "")),
           onSelect: () => {
             setGroupMode({ ...groupMode, render: "component" });
             setExpandedKey(null);
@@ -2878,7 +2962,10 @@ function Panel(props) {
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { style: { listStyle: "none", margin: 0, padding: 0, overflowY: "auto", flexGrow: 1, display: activeTab === "timeline" ? "none" : void 0 }, children: activeKind && (() => {
-        const baseSignals = (sortMode[activeKind] ?? "chronological") === "severity" ? sortSignalsBySeverity(grouped[activeKind]) : grouped[activeKind];
+        const filtered = grouped[activeKind].filter(
+          (s) => signalMatchesFilter(s, filterText[activeKind] ?? "")
+        );
+        const baseSignals = (sortMode[activeKind] ?? "chronological") === "severity" ? sortSignalsBySeverity(filtered) : filtered;
         return groupSignals(baseSignals, groupMode[activeKind] ?? "chronological", activeKind);
       })().map((g, gi) => {
         const currentMode = groupMode[activeKind] ?? "chronological";
@@ -2936,7 +3023,8 @@ function Panel(props) {
           },
           key
         );
-      }) })
+      }) }),
+      activeKind && activeTab !== "timeline" && (filterText[activeKind] ?? "").trim() !== "" && grouped[activeKind].length > 0 && grouped[activeKind].every((s) => !signalMatchesFilter(s, filterText[activeKind] ?? "")) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { padding: "12px 8px", fontSize: "11px", color: "#888" }, children: t.filterNoMatches })
     ] })
   ] });
 }