@buoy-gg/highlight-updates 5.0.0 → 6.0.0

package/lib/commonjs/highlight-updates/HighlightUpdatesOverlay.js

@@ -194,35 +194,31 @@ function HighlightUpdatesOverlay({
         height: rect.height,
         borderColor: rect.color
       }],
-      children: rect.count > 0 && (hasBadgePressHandler ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        onPress: () => handleBadgePress(rect.id),
+      children: rect.count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.badge, {
           backgroundColor: rect.color
         }],
-        activeOpacity: 0.7,
+        nativeID: `__highlight_badge_${rect.id}__`,
+        pointerEvents: hasBadgePressHandler ? "auto" : "none",
         hitSlop: {
           top: 8,
           bottom: 8,
           left: 8,
           right: 8
         },
+        onStartShouldSetResponder: () => !!hasBadgePressHandler
+        // Fire on touch-DOWN: on churning screens the badge views are
+        // torn down and recreated between finger-down and finger-up
+        // (every highlight event rebuilds the boxes), which kills the
+        // responder before a release can fire. Grant fires immediately.
+        ,
+        onResponderGrant: () => handleBadgePress(rect.id),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.badgeText,
           nativeID: `__highlight_text_${rect.id}__`,
           children: rect.count
         })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.badge, {
-          backgroundColor: rect.color
-        }],
-        nativeID: `__highlight_badge_${rect.id}__`,
-        pointerEvents: "none",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.badgeText,
-          nativeID: `__highlight_text_${rect.id}__`,
-          children: rect.count
-        })
-      }))
+      })
     }, `highlight-${rect.id}`))]
   });
 }

package/lib/commonjs/highlight-updates/utils/CommitProfiler.js

@@ -0,0 +1,279 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CommitProfiler = void 0;
+var _devtoolsComponentNames = require("./devtoolsComponentNames");
+/**
+ * CommitProfiler — per-component render counts + durations across a capture
+ * window, React-DevTools-profiler style, without React DevTools attached.
+ *
+ * Wraps `__REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot` (the callback React
+ * invokes after every commit) and, while a capture is active, walks the
+ * committed fiber tree collecting composite fibers that performed work this
+ * commit. Self duration follows React's convention: `actualDuration` minus the
+ * sum of direct children's `actualDuration` (profiling timers are enabled in
+ * dev builds, where Buoy runs).
+ *
+ * This is intentionally separate from the traceUpdates flow the highlight
+ * overlay uses — traceUpdates emits host views with no timing data.
+ *
+ * Consumed by perf-monitor benchmarks via the shared-ui render-capture
+ * registry (see the registration in this package's index.tsx).
+ */
+
+// React work tags for components that render user code.
+const FunctionComponent = 0;
+const ClassComponent = 1;
+const ForwardRef = 11;
+const MemoComponent = 14;
+const SimpleMemoComponent = 15;
+
+// React fiber flag: this fiber rendered (performed work) in the last commit.
+// Stable value 0b1 across React 16-19 (effectTag pre-18, flags after).
+const PerformedWork = 0b1;
+
+/** Overhead guardrail: stop walking a commit past this many visited fibers. */
+const MAX_FIBERS_PER_COMMIT = 10_000;
+
+/** Bound on distinct component names tracked; overflow still counts in totals. */
+const MAX_TRACKED_NAMES = 300;
+
+/** Components returned in the summary. */
+const TOP_COMPONENTS_CAP = 20;
+let hookInstalled = false;
+let active = false;
+let sawDurations = false;
+let totalCommits = 0;
+let totalRenders = 0;
+let totalRenderMs = 0;
+let buckets = new Map();
+function getHook() {
+  if (typeof global === "undefined") return null;
+  return global.__REACT_DEVTOOLS_GLOBAL_HOOK__ ?? null;
+}
+function getFlags(fiber) {
+  const f = fiber.flags ?? fiber.effectTag;
+  return typeof f === "number" ? f : 0;
+}
+function isCompositeTag(tag) {
+  return tag === FunctionComponent || tag === ClassComponent || tag === ForwardRef || tag === MemoComponent || tag === SimpleMemoComponent;
+}
+
+/** Resolve a composite fiber's display name (DevTools conventions). */
+function getComponentName(fiber) {
+  const type = fiber.type;
+  try {
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ClassComponent:
+        return type?.displayName || type?.name || "Anonymous";
+      case ForwardRef:
+        return type?.displayName || type?.render?.displayName || type?.render?.name || "ForwardRef";
+      case MemoComponent:
+      case SimpleMemoComponent:
+        {
+          const inner = type?.type ?? fiber.elementType?.type;
+          return type?.displayName || inner?.displayName || inner?.name || "Memo";
+        }
+      default:
+        return "Anonymous";
+    }
+  } catch {
+    return "Anonymous";
+  }
+}
+
+/**
+ * Self duration = own actualDuration minus direct children's. React's
+ * bubbleProperties adds every direct child's actualDuration into the parent,
+ * so subtracting them all back out is symmetric and exact.
+ */
+function computeSelfMs(fiber) {
+  const actual = fiber.actualDuration;
+  if (typeof actual !== "number") return null;
+  let self = actual;
+  for (let child = fiber.child; child != null; child = child.sibling) {
+    if (typeof child.actualDuration === "number") self -= child.actualDuration;
+  }
+  return self > 0 ? self : 0;
+}
+
+// React Native framework wrapper components. Their renders are real work
+// but the actionable signal lives on the OWNING component (a Touchable
+// re-rendering is already visible as its parent re-rendering), so they're
+// folded into the capture totals and kept OUT of the per-component list.
+// This is a report-level filter only — unlike isDevToolsComponentName it
+// must NOT prune subtrees (their children are user components).
+const FRAMEWORK_WRAPPER_NAMES = new Set(["View", "Text", "Image", "ImageBackground", "ScrollView", "FlatList", "SectionList", "SafeAreaView", "KeyboardAvoidingView", "StatusBar", "ActivityIndicator", "RefreshControl", "Modal", "Switch", "Pressable", "PlatformPressable", "TouchableOpacity", "TouchableHighlight", "TouchableWithoutFeedback", "TouchableNativeFeedback", "PressabilityDebugView", "AnimatedComponent", "Wrapper"]);
+const FRAMEWORK_WRAPPER_PREFIXES = ["Animated(",
+// Animated(View), Animated(Text), Animated(FlatList), …
+"Pressability", "Virtualized",
+// VirtualizedList + its context providers
+"CellRenderer"];
+function isFrameworkWrapperName(name) {
+  if (FRAMEWORK_WRAPPER_NAMES.has(name)) return true;
+  for (let i = 0; i < FRAMEWORK_WRAPPER_PREFIXES.length; i++) {
+    if (name.startsWith(FRAMEWORK_WRAPPER_PREFIXES[i])) return true;
+  }
+  return false;
+}
+function recordRender(fiber) {
+  const name = getComponentName(fiber);
+  const selfMs = computeSelfMs(fiber);
+  if (selfMs !== null) sawDurations = true;
+  const ms = selfMs ?? 0;
+  totalRenders += 1;
+  totalRenderMs += ms;
+
+  // Framework wrappers count toward totals but never surface as a row.
+  if (isFrameworkWrapperName(name)) return;
+  let bucket = buckets.get(name);
+  if (!bucket) {
+    // Bounded map: overflow renders still count toward the totals above.
+    if (buckets.size >= MAX_TRACKED_NAMES) return;
+    bucket = {
+      renders: 0,
+      totalSelfMs: 0,
+      maxSelfMs: 0
+    };
+    buckets.set(name, bucket);
+  }
+  bucket.renders += 1;
+  bucket.totalSelfMs += ms;
+  if (ms > bucket.maxSelfMs) bucket.maxSelfMs = ms;
+}
+
+/**
+ * Iterative walk (child → sibling → return) of the committed tree. Never
+ * throws upward — a broken walk must not break React's commit.
+ */
+function handleCommit(root) {
+  const start = root?.current;
+  if (!start) return;
+  const rendersBefore = totalRenders;
+  let visited = 0;
+  let fiber = start;
+  while (fiber != null) {
+    visited += 1;
+    if (visited > MAX_FIBERS_PER_COMMIT) break;
+    let skipSubtree = false;
+    const composite = isCompositeTag(fiber.tag);
+    if (composite) {
+      // Prune Buoy's own devtools UI wholesale.
+      if ((0, _devtoolsComponentNames.isDevToolsComponentName)(getComponentName(fiber))) {
+        skipSubtree = true;
+      } else if ((getFlags(fiber) & PerformedWork) !== 0) {
+        // PerformedWork is the only trustworthy "rendered this commit"
+        // signal — actualDuration is stale on bailed-out fibers.
+        recordRender(fiber);
+      }
+    }
+    if (!skipSubtree) {
+      // Prune subtrees with no work. subtreeFlags only exists on React 18+;
+      // when absent, always descend.
+      const subtreeFlags = fiber.subtreeFlags;
+      const noSubtreeWork = typeof subtreeFlags === "number" && (subtreeFlags & PerformedWork) === 0 && (getFlags(fiber) & PerformedWork) === 0;
+      if (!noSubtreeWork && fiber.child != null) {
+        fiber = fiber.child;
+        continue;
+      }
+    }
+
+    // No descend: advance to sibling, climbing up as needed.
+    while (fiber != null) {
+      if (fiber === start) return finalizeCommit(rendersBefore);
+      if (fiber.sibling != null) {
+        fiber = fiber.sibling;
+        break;
+      }
+      fiber = fiber.return;
+    }
+  }
+  finalizeCommit(rendersBefore);
+}
+function finalizeCommit(rendersBefore) {
+  if (totalRenders > rendersBefore) totalCommits += 1;
+}
+
+/**
+ * Install the onCommitFiberRoot wrapper once and never restore it — the
+ * `active` flag gates all work, and never restoring avoids clobber races if
+ * something else (e.g. React DevTools attaching mid-session) wraps the hook
+ * after us. The wrapper dies with the JS realm on reload.
+ */
+function ensureHookInstalled() {
+  if (hookInstalled) return true;
+  const hook = getHook();
+  if (!hook) return false;
+  const original = hook.onCommitFiberRoot;
+  hook.onCommitFiberRoot = function (rendererID, root, ...rest) {
+    if (active) {
+      try {
+        handleCommit(root);
+      } catch {
+        // Capture must never break React's commit path.
+      }
+    }
+    return typeof original === "function" ? original.call(hook, rendererID, root, ...rest) : undefined;
+  };
+  hookInstalled = true;
+  return true;
+}
+function isSupported() {
+  if (typeof __DEV__ !== "undefined" && !__DEV__) return false;
+  const hook = getHook();
+  return Boolean(hook && hook.renderers && hook.renderers.size > 0);
+}
+function isCapturing() {
+  return active;
+}
+
+/** Begin a capture window, discarding any previous unclaimed data. */
+function startCapture() {
+  if (!ensureHookInstalled()) return;
+  buckets = new Map();
+  sawDurations = false;
+  totalCommits = 0;
+  totalRenders = 0;
+  totalRenderMs = 0;
+  active = true;
+}
+
+/** End the window and return the aggregate (null if never started). */
+function stopCapture() {
+  if (!active && totalRenders === 0 && buckets.size === 0) return null;
+  active = false;
+  const topComponents = Array.from(buckets.entries()).sort((a, b) => {
+    const byMs = b[1].totalSelfMs - a[1].totalSelfMs;
+    return byMs !== 0 ? byMs : b[1].renders - a[1].renders;
+  }).slice(0, TOP_COMPONENTS_CAP).map(([name, b]) => ({
+    name,
+    renders: b.renders,
+    totalMs: round2(b.totalSelfMs),
+    maxMs: round2(b.maxSelfMs),
+    avgMs: b.renders > 0 ? round2(b.totalSelfMs / b.renders) : 0
+  }));
+  const summary = {
+    totalCommits,
+    totalRenders,
+    capturedDurations: sawDurations,
+    totalRenderMs: round2(totalRenderMs),
+    topComponents
+  };
+  buckets = new Map();
+  totalCommits = 0;
+  totalRenders = 0;
+  totalRenderMs = 0;
+  return summary;
+}
+function round2(n) {
+  return Math.round(n * 100) / 100;
+}
+const CommitProfiler = exports.CommitProfiler = {
+  isSupported,
+  isCapturing,
+  startCapture,
+  stopCapture
+};