@react-perfscope/ui 0.1.1 → 0.3.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

@@ -132,6 +132,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",
@@ -220,6 +222,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 +832,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 +1737,7 @@ function TooltipContent({ s, startedAt }) {
           s.duration.toFixed(2),
           "ms"
         ] }),
+        (s.count ?? 1) > 1 ? ` \xD7${s.count}` : "",
         " ",
         at
       ] });
@@ -2008,7 +2015,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 +2100,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 +2409,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 +2418,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 +2443,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 +2464,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 +2507,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") {
@@ -2855,7 +2879,9 @@ 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] : []
+          ),
           onSelect: () => {
             setGroupMode({ ...groupMode, render: "component" });
             setExpandedKey(null);