@react-perfscope/ui 0.7.0 → 0.7.1

package/dist/index.js

@@ -357,7 +357,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
@@ -1903,6 +1903,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 +1974,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 +2030,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 +2043,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 +2868,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"
@@ -3263,7 +3265,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);
@@ -3312,6 +3315,11 @@ function App(props) {
 import { jsx as jsx11 } from "preact/jsx-runtime";
 function mount(opts) {
   const { recorder, position = "bottom-right", host = document.body, 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 }