@react-perfscope/ui 0.7.0 → 1.0.0

package/dist/index.js

@@ -57,6 +57,7 @@ function mountShadow(vnode, opts = {}) {
 }
 
 // src/app.tsx
+import { Component } from "preact";
 import { useState as useState4, useRef as useRef3, useEffect as useEffect2 } from "preact/hooks";
 
 // src/i18n.ts
@@ -255,8 +256,8 @@ function isLang(v) {
   return v === "en" || v === "ko";
 }
 function readStoredLang() {
-  if (typeof localStorage === "undefined") return "en";
   try {
+    if (typeof localStorage === "undefined") return "en";
     const v = localStorage.getItem(STORAGE_KEY);
     return isLang(v) ? v : "en";
   } catch {
@@ -273,11 +274,11 @@ function I18nProvider({ children }) {
   const [lang, setLangState] = useState(() => readStoredLang());
   const setLang = useCallback((l) => {
     setLangState(l);
-    if (typeof localStorage !== "undefined") {
-      try {
+    try {
+      if (typeof localStorage !== "undefined") {
         localStorage.setItem(STORAGE_KEY, l);
-      } catch {
       }
+    } catch {
     }
   }, []);
   const value = useMemo(() => ({ lang, setLang, t: STRINGS[lang] }), [lang, setLang]);
@@ -357,7 +358,7 @@ function Widget(props) {
 }
 
 // src/panel.tsx
-import { useState as useState3, useMemo as useMemo3, useEffect, useRef as useRef2 } from "preact/hooks";
+import { useState as useState3, useMemo as useMemo5, useEffect, useRef as useRef2 } from "preact/hooks";
 import { unsupportedKinds } from "@react-perfscope/core";
 
 // src/overlay.ts
@@ -410,12 +411,12 @@ function showArrow(id, from, to, color = DEFAULT_BORDER) {
   const minX = Math.min(from.x, to.x);
   const minY = Math.min(from.y, to.y);
   const w = Math.max(2, Math.abs(to.x - from.x));
-  const h3 = Math.max(2, Math.abs(to.y - from.y));
+  const h4 = Math.max(2, Math.abs(to.y - from.y));
   svg.style.left = `${minX}px`;
   svg.style.top = `${minY}px`;
   svg.setAttribute("width", `${w}`);
-  svg.setAttribute("height", `${h3}`);
-  svg.setAttribute("viewBox", `0 0 ${w} ${h3}`);
+  svg.setAttribute("height", `${h4}`);
+  svg.setAttribute("viewBox", `0 0 ${w} ${h4}`);
   svg.style.opacity = "1";
   while (svg.firstChild) svg.removeChild(svg.firstChild);
   const fx = from.x - minX;
@@ -497,7 +498,7 @@ var WEB_VITAL_THRESHOLDS = {
   TTFB: [800, 1800]
 };
 function webVitalRating(name, value) {
-  const [good, needs] = WEB_VITAL_THRESHOLDS[name];
+  const [good, needs] = WEB_VITAL_THRESHOLDS[name] ?? [Infinity, Infinity];
   if (value <= good) return "good";
   if (value <= needs) return "needs";
   return "poor";
@@ -558,15 +559,15 @@ var WEB_VITAL_UNIT = {
   TTFB: "ms"
 };
 function formatVitalValue(name, value) {
-  if (name === "CLS") return value.toFixed(3);
+  const unit = WEB_VITAL_UNIT[name] ?? "ms";
+  if (unit !== "ms") return value.toFixed(3);
   if (value >= 1e3) return (value / 1e3).toFixed(2) + "s";
-  return value.toFixed(0);
+  return value.toFixed(0) + "ms";
 }
 function VitalChip({ s }) {
   const { t } = useI18n();
   const rating = webVitalRating(s.name, s.value);
   const color = RATING_COLOR[rating];
-  const unit = WEB_VITAL_UNIT[s.name];
   return /* @__PURE__ */ jsxs2(
     "span",
     {
@@ -598,10 +599,7 @@ function VitalChip({ s }) {
           }
         ),
         /* @__PURE__ */ jsx2("strong", { style: { color: "#e6e6e6" }, children: s.name }),
-        /* @__PURE__ */ jsxs2("span", { style: { color }, children: [
-          formatVitalValue(s.name, s.value),
-          unit !== "s" ? unit : ""
-        ] })
+        /* @__PURE__ */ jsx2("span", { style: { color }, children: formatVitalValue(s.name, s.value) })
       ]
     }
   );
@@ -1903,6 +1901,7 @@ function RenderInsights({ signals, onSelect }) {
 }
 
 // src/inp-episode.tsx
+import { useMemo as useMemo3 } from "preact/hooks";
 import { correlate } from "@react-perfscope/core";
 
 // src/episode-shared.tsx
@@ -1973,7 +1972,7 @@ function phaseMs(episode, phase) {
 }
 function InpEpisode({ signals }) {
   const { t } = useI18n();
-  const episode = worstInteractionEpisode(signals);
+  const episode = useMemo3(() => worstInteractionEpisode(signals), [signals]);
   if (!episode || episode.anchor.kind !== "interaction") return null;
   const a = episode.anchor;
   const target = a.target ? ` on ${a.target}` : "";
@@ -2029,6 +2028,7 @@ function InpEpisode({ signals }) {
 }
 
 // src/long-task-episode.tsx
+import { useMemo as useMemo4 } from "preact/hooks";
 import { correlate as correlate2 } from "@react-perfscope/core";
 import { jsx as jsx8, jsxs as jsxs8 } from "preact/jsx-runtime";
 function worstLongTaskEpisode(signals) {
@@ -2041,7 +2041,7 @@ function worstLongTaskEpisode(signals) {
 }
 function LongTaskEpisode({ signals }) {
   const { t } = useI18n();
-  const episode = worstLongTaskEpisode(signals);
+  const episode = useMemo4(() => worstLongTaskEpisode(signals), [signals]);
   if (!episode || episode.anchor.kind !== "long-task") return null;
   if (episode.members.length === 0) return null;
   const a = episode.anchor;
@@ -2866,9 +2866,9 @@ function LanguageToggle() {
 function Panel(props) {
   const { result, onClose, position = "bottom-right", resolveFrame } = props;
   const { t } = useI18n();
-  const grouped = useMemo3(() => groupByKind(result.signals), [result.signals]);
+  const grouped = useMemo5(() => groupByKind(result.signals), [result.signals]);
   const kindsPresent = KIND_ORDER.filter((k) => grouped[k].length > 0);
-  const unsupported = useMemo3(() => unsupportedKinds(), []);
+  const unsupported = useMemo5(() => unsupportedKinds(), []);
   const hasTimelineSignals = result.signals.some((s) => s.kind !== "web-vital") || (result.heapSamples?.length ?? 0) > 0 || (result.frames?.length ?? 0) > 0 || (result.leakSuspects?.length ?? 0) > 0;
   const [activeTab, setActiveTab] = useState3(
     kindsPresent[0] ?? "forced-reflow"
@@ -3249,6 +3249,65 @@ function Panel(props) {
 
 // src/app.tsx
 import { jsx as jsx10, jsxs as jsxs10 } from "preact/jsx-runtime";
+var PanelErrorBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error) {
+    console.warn("[react-perfscope] panel crashed:", error);
+  }
+  render() {
+    if (this.state.error === null) return this.props.children;
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        role: "alert",
+        style: {
+          position: "fixed",
+          bottom: "16px",
+          right: "16px",
+          zIndex: 2147483647,
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          padding: "8px 12px",
+          background: "#141414",
+          border: "1px solid #ff3b30",
+          borderRadius: "8px",
+          color: "#e6e6e6",
+          fontSize: "12px",
+          fontFamily: "SF Mono, Menlo, Consolas, monospace"
+        },
+        children: [
+          /* @__PURE__ */ jsx10("span", { children: "react-perfscope panel crashed \u2014 see console" }),
+          /* @__PURE__ */ jsx10(
+            "button",
+            {
+              "aria-label": "Close panel",
+              onClick: () => {
+                this.setState({ error: null });
+                this.props.onClose();
+              },
+              style: {
+                background: "none",
+                border: "1px solid #444",
+                borderRadius: "4px",
+                color: "#e6e6e6",
+                cursor: "pointer",
+                padding: "2px 8px"
+              },
+              children: "\xD7"
+            }
+          )
+        ]
+      }
+    );
+  }
+};
 function App(props) {
   const { recorder, position = "bottom-right", resolveFrame, finalize } = props;
   const [recording, setRecording] = useState4(false);
@@ -3263,7 +3322,8 @@ function App(props) {
       return;
     }
     const tick = () => {
-      setElapsedMs(performance.now() - startedAtRef.current);
+      const elapsed = performance.now() - startedAtRef.current;
+      setElapsedMs(Math.floor(elapsed / 1e3) * 1e3);
       rafRef.current = requestAnimationFrame(tick);
     };
     rafRef.current = requestAnimationFrame(tick);
@@ -3276,12 +3336,23 @@ function App(props) {
       startedAtRef.current = performance.now();
       setElapsedMs(0);
       setResult(null);
-      recorder.start();
+      try {
+        recorder.start();
+      } catch (err) {
+        console.warn("[react-perfscope] failed to start recording:", err);
+        return;
+      }
       setRecording(true);
     } else {
-      const r = recorder.stop();
-      const token = ++resultTokenRef.current;
       setRecording(false);
+      let r;
+      try {
+        r = recorder.stop();
+      } catch (err) {
+        console.warn("[react-perfscope] failed to stop recording:", err);
+        return;
+      }
+      const token = ++resultTokenRef.current;
       setResult(r);
       if (finalize) {
         finalize(r).then((enriched) => {
@@ -3304,14 +3375,36 @@ function App(props) {
         position
       }
     ),
-    result !== null && /* @__PURE__ */ jsx10(Panel, { result, position, onClose, resolveFrame })
+    result !== null && /* @__PURE__ */ jsx10(PanelErrorBoundary, { onClose, children: /* @__PURE__ */ jsx10(Panel, { result, position, onClose, resolveFrame }) })
   ] });
 }
 
 // src/mount.tsx
 import { jsx as jsx11 } from "preact/jsx-runtime";
 function mount(opts) {
-  const { recorder, position = "bottom-right", host = document.body, resolveFrame, finalize } = opts;
+  if (!opts.host && !document.body) {
+    let torn = false;
+    let unmount = null;
+    const onReady = () => {
+      if (torn || !document.body) return;
+      unmount = mountNow(opts, document.body);
+    };
+    document.addEventListener("DOMContentLoaded", onReady, { once: true });
+    return () => {
+      torn = true;
+      document.removeEventListener("DOMContentLoaded", onReady);
+      unmount?.();
+    };
+  }
+  return mountNow(opts, opts.host ?? document.body);
+}
+function mountNow(opts, host) {
+  const { recorder, position = "bottom-right", resolveFrame, finalize } = opts;
+  if (host.querySelector("[data-perfscope-host]")) {
+    console.warn("[react-perfscope] mount(): a widget is already mounted here \u2014 ignoring this call");
+    return () => {
+    };
+  }
   return mountShadow(
     /* @__PURE__ */ jsx11(App, { recorder, position, resolveFrame, finalize }),
     { parent: host }