@react-perfscope/ui 0.7.0 → 0.7.1

package/dist/index.cjs

@@ -90,7 +90,7 @@ function mountShadow(vnode, opts = {}) {
 }
 
 // src/app.tsx
-var import_hooks4 = require("preact/hooks");
+var import_hooks6 = require("preact/hooks");
 
 // src/i18n.ts
 var import_preact2 = require("preact");
@@ -390,7 +390,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
@@ -1936,6 +1936,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 +2007,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 +2063,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 +2076,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 +2415,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 +2456,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 +2901,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++) {
@@ -3284,19 +3286,20 @@ function Panel(props) {
 var import_jsx_runtime10 = require("preact/jsx-runtime");
 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);
@@ -3345,6 +3348,11 @@ function App(props) {
 var import_jsx_runtime11 = require("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__ */ (0, import_jsx_runtime11.jsx)(App, { recorder, position, resolveFrame, finalize }),
     { parent: host }