@react-perfscope/ui 0.7.0 → 1.0.0

package/dist/index.cjs

@@ -90,7 +90,8 @@ function mountShadow(vnode, opts = {}) {
 }
 
 // src/app.tsx
-var import_hooks4 = require("preact/hooks");
+var import_preact4 = require("preact");
+var import_hooks6 = require("preact/hooks");
 
 // src/i18n.ts
 var import_preact2 = require("preact");
@@ -288,8 +289,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 {
@@ -306,11 +307,11 @@ function I18nProvider({ children }) {
   const [lang, setLangState] = (0, import_hooks.useState)(() => readStoredLang());
   const setLang = (0, import_hooks.useCallback)((l) => {
     setLangState(l);
-    if (typeof localStorage !== "undefined") {
-      try {
+    try {
+      if (typeof localStorage !== "undefined") {
         localStorage.setItem(STORAGE_KEY, l);
-      } catch {
       }
+    } catch {
     }
   }, []);
   const value = (0, import_hooks.useMemo)(() => ({ lang, setLang, t: STRINGS[lang] }), [lang, setLang]);
@@ -390,7 +391,7 @@ function Widget(props) {
 }
 
 // src/panel.tsx
-var import_hooks3 = require("preact/hooks");
+var import_hooks5 = require("preact/hooks");
 var import_core4 = require("@react-perfscope/core");
 
 // src/overlay.ts
@@ -443,12 +444,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;
@@ -530,7 +531,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";
@@ -591,15 +592,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__ */ (0, import_jsx_runtime2.jsxs)(
     "span",
     {
@@ -631,10 +632,7 @@ function VitalChip({ s }) {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { style: { color: "#e6e6e6" }, children: s.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { style: { color }, children: [
-          formatVitalValue(s.name, s.value),
-          unit !== "s" ? unit : ""
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color }, children: formatVitalValue(s.name, s.value) })
       ]
     }
   );
@@ -1936,6 +1934,7 @@ function RenderInsights({ signals, onSelect }) {
 }
 
 // src/inp-episode.tsx
+var import_hooks3 = require("preact/hooks");
 var import_core2 = require("@react-perfscope/core");
 
 // src/episode-shared.tsx
@@ -2006,7 +2005,7 @@ function phaseMs(episode, phase) {
 }
 function InpEpisode({ signals }) {
   const { t } = useI18n();
-  const episode = worstInteractionEpisode(signals);
+  const episode = (0, import_hooks3.useMemo)(() => worstInteractionEpisode(signals), [signals]);
   if (!episode || episode.anchor.kind !== "interaction") return null;
   const a = episode.anchor;
   const target = a.target ? ` on ${a.target}` : "";
@@ -2062,6 +2061,7 @@ function InpEpisode({ signals }) {
 }
 
 // src/long-task-episode.tsx
+var import_hooks4 = require("preact/hooks");
 var import_core3 = require("@react-perfscope/core");
 var import_jsx_runtime8 = require("preact/jsx-runtime");
 function worstLongTaskEpisode(signals) {
@@ -2074,7 +2074,7 @@ function worstLongTaskEpisode(signals) {
 }
 function LongTaskEpisode({ signals }) {
   const { t } = useI18n();
-  const episode = worstLongTaskEpisode(signals);
+  const episode = (0, import_hooks4.useMemo)(() => worstLongTaskEpisode(signals), [signals]);
   if (!episode || episode.anchor.kind !== "long-task") return null;
   if (episode.members.length === 0) return null;
   const a = episode.anchor;
@@ -2413,9 +2413,9 @@ function StackFrames({
 }) {
   const { t } = useI18n();
   const original = raw.slice(0, limit);
-  const [frames, setFrames] = (0, import_hooks3.useState)(original);
-  const [resolving, setResolving] = (0, import_hooks3.useState)(false);
-  (0, import_hooks3.useEffect)(() => {
+  const [frames, setFrames] = (0, import_hooks5.useState)(original);
+  const [resolving, setResolving] = (0, import_hooks5.useState)(false);
+  (0, import_hooks5.useEffect)(() => {
     if (!resolveFrame || original.length === 0) return;
     let cancelled = false;
     setResolving(true);
@@ -2454,8 +2454,8 @@ function HotFunctions({
   resolveFrame
 }) {
   const { t } = useI18n();
-  const [frames, setFrames] = (0, import_hooks3.useState)(attribution.map((a) => a.frame));
-  (0, import_hooks3.useEffect)(() => {
+  const [frames, setFrames] = (0, import_hooks5.useState)(attribution.map((a) => a.frame));
+  (0, import_hooks5.useEffect)(() => {
     if (!resolveFrame) return;
     let cancelled = false;
     Promise.all(attribution.map((a) => resolveFrame(a.frame))).then((resolved) => {
@@ -2899,21 +2899,21 @@ function LanguageToggle() {
 function Panel(props) {
   const { result, onClose, position = "bottom-right", resolveFrame } = props;
   const { t } = useI18n();
-  const grouped = (0, import_hooks3.useMemo)(() => groupByKind(result.signals), [result.signals]);
+  const grouped = (0, import_hooks5.useMemo)(() => groupByKind(result.signals), [result.signals]);
   const kindsPresent = KIND_ORDER.filter((k) => grouped[k].length > 0);
-  const unsupported = (0, import_hooks3.useMemo)(() => (0, import_core4.unsupportedKinds)(), []);
+  const unsupported = (0, import_hooks5.useMemo)(() => (0, import_core4.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] = (0, import_hooks3.useState)(
+  const [activeTab, setActiveTab] = (0, import_hooks5.useState)(
     kindsPresent[0] ?? "forced-reflow"
   );
   const activeKind = activeTab === "timeline" ? null : activeTab;
   const setActiveKind = (k) => setActiveTab(k);
-  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(), []);
+  const [expandedKey, setExpandedKey] = (0, import_hooks5.useState)(null);
+  const [groupMode, setGroupMode] = (0, import_hooks5.useState)({});
+  const [sortMode, setSortMode] = (0, import_hooks5.useState)({});
+  const [filterText, setFilterText] = (0, import_hooks5.useState)({});
+  const activeOverlayCount = (0, import_hooks5.useRef)(0);
+  (0, import_hooks5.useEffect)(() => () => hideAllOverlays(), []);
   function handleHover(signal) {
     if (!signal) {
       for (let i = 0; i < activeOverlayCount.current; i++) {
@@ -3282,21 +3282,81 @@ function Panel(props) {
 
 // src/app.tsx
 var import_jsx_runtime10 = require("preact/jsx-runtime");
+var PanelErrorBoundary = class extends import_preact4.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__ */ (0, import_jsx_runtime10.jsxs)(
+      "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__ */ (0, import_jsx_runtime10.jsx)("span", { children: "react-perfscope panel crashed \u2014 see console" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "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] = (0, import_hooks4.useState)(false);
-  const [result, setResult] = (0, import_hooks4.useState)(null);
-  const [elapsedMs, setElapsedMs] = (0, import_hooks4.useState)(0);
-  const startedAtRef = (0, import_hooks4.useRef)(0);
-  const rafRef = (0, import_hooks4.useRef)(null);
-  const resultTokenRef = (0, import_hooks4.useRef)(0);
-  (0, import_hooks4.useEffect)(() => {
+  const [recording, setRecording] = (0, import_hooks6.useState)(false);
+  const [result, setResult] = (0, import_hooks6.useState)(null);
+  const [elapsedMs, setElapsedMs] = (0, import_hooks6.useState)(0);
+  const startedAtRef = (0, import_hooks6.useRef)(0);
+  const rafRef = (0, import_hooks6.useRef)(null);
+  const resultTokenRef = (0, import_hooks6.useRef)(0);
+  (0, import_hooks6.useEffect)(() => {
     if (!recording) {
       if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
       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);
@@ -3309,12 +3369,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) => {
@@ -3337,14 +3408,36 @@ function App(props) {
         position
       }
     ),
-    result !== null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Panel, { result, position, onClose, resolveFrame })
+    result !== null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PanelErrorBoundary, { onClose, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Panel, { result, position, onClose, resolveFrame }) })
   ] });
 }
 
 // src/mount.tsx
 var import_jsx_runtime11 = require("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__ */ (0, import_jsx_runtime11.jsx)(App, { recorder, position, resolveFrame, finalize }),
     { parent: host }