@react-perfscope/ui 0.2.0 → 0.3.0

package/dist/index.js

@@ -99,6 +99,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",
@@ -187,6 +189,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",
@@ -795,8 +799,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) }));
 }
@@ -1698,6 +1704,7 @@ function TooltipContent({ s, startedAt }) {
           s.duration.toFixed(2),
           "ms"
         ] }),
+        (s.count ?? 1) > 1 ? ` \xD7${s.count}` : "",
         " ",
         at
       ] });
@@ -1975,7 +1982,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" };
@@ -2060,6 +2067,25 @@ function WebVitalDetail({ s }) {
 }
 function RenderDetail({ s }) {
   const { t } = useI18n();
+  if (s.members && s.members.length > 0) {
+    return /* @__PURE__ */ jsxs5("div", { style: { paddingLeft: "12px" }, children: [
+      /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.duration }),
+        /* @__PURE__ */ jsxs5("span", { children: [
+          s.duration.toFixed(3),
+          "ms"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
+        /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.at }),
+        /* @__PURE__ */ jsxs5("span", { children: [
+          s.at.toFixed(2),
+          "ms"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx5("div", { style: { marginTop: "6px" }, children: /* @__PURE__ */ jsx5(CascadeMembers, { members: s.members }) })
+    ] });
+  }
   return /* @__PURE__ */ jsxs5("div", { style: { paddingLeft: "12px" }, children: [
     /* @__PURE__ */ jsxs5("div", { style: detailRowStyle, children: [
       /* @__PURE__ */ jsx5("span", { style: detailLabelStyle, children: t.component }),
@@ -2350,6 +2376,7 @@ function SummaryLine({ signal }) {
     ] });
   }
   if (signal.kind === "forced-reflow") {
+    const count = signal.count ?? 1;
     return /* @__PURE__ */ jsxs5("span", { children: [
       "@ ",
       signal.at.toFixed(1),
@@ -2358,6 +2385,10 @@ function SummaryLine({ signal }) {
       /* @__PURE__ */ jsxs5("span", { style: { color }, children: [
         signal.duration.toFixed(2),
         "ms"
+      ] }),
+      count > 1 && /* @__PURE__ */ jsxs5("span", { style: { color: "#888" }, children: [
+        " \u2022 ",
+        t.coalescedReads(count)
       ] })
     ] });
   }
@@ -2379,7 +2410,8 @@ function SummaryLine({ signal }) {
       /* @__PURE__ */ jsxs5("span", { style: { color }, children: [
         signal.duration.toFixed(2),
         "ms"
-      ] })
+      ] }),
+      signal.count && signal.count > 1 && /* @__PURE__ */ jsx5("span", { style: { color: "#888" }, children: t.cascadeComponents(signal.count) })
     ] });
   }
   if (signal.kind === "network") {
@@ -2399,9 +2431,6 @@ function SummaryLine({ signal }) {
   }
   return /* @__PURE__ */ jsx5("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";
 }
@@ -2445,22 +2474,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") {
@@ -2822,7 +2846,9 @@ function Panel(props) {
       activeKind === "render" && activeTab !== "timeline" && /* @__PURE__ */ jsx5(
         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);