@buoy-gg/highlight-updates 5.0.0 → 6.0.1

package/lib/commonjs/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "COMPONENT_CAUSE_CONFIG", {
     return _RenderCauseBadge.COMPONENT_CAUSE_CONFIG;
   }
 });
+Object.defineProperty(exports, "CommitProfiler", {
+  enumerable: true,
+  get: function () {
+    return _CommitProfiler.CommitProfiler;
+  }
+});
 Object.defineProperty(exports, "HighlightFilterView", {
   enumerable: true,
   get: function () {
@@ -201,6 +207,12 @@ Object.defineProperty(exports, "installProfilerInterceptor", {
     return _ProfilerInterceptor.installProfilerInterceptor;
   }
 });
+Object.defineProperty(exports, "isCapturingBuoyToolRenders", {
+  enumerable: true,
+  get: function () {
+    return _devtoolsComponentNames.isCapturingBuoyToolRenders;
+  }
+});
 Object.defineProperty(exports, "isInterceptorInstalled", {
   enumerable: true,
   get: function () {
@@ -232,6 +244,12 @@ Object.defineProperty(exports, "safeCloneForHistory", {
     return _RenderCauseDetector.safeCloneForHistory;
   }
 });
+Object.defineProperty(exports, "setCaptureBuoyToolRenders", {
+  enumerable: true,
+  get: function () {
+    return _devtoolsComponentNames.setCaptureBuoyToolRenders;
+  }
+});
 Object.defineProperty(exports, "setComparisonCallback", {
   enumerable: true,
   get: function () {
@@ -249,6 +267,9 @@ var _HighlightUpdatesController = _interopRequireDefault(require("./highlight-up
 var _highlightUpdatesSyncAdapter = require("./sync/highlightUpdatesSyncAdapter");
 var _HighlightUpdatesOverlay = require("./highlight-updates/HighlightUpdatesOverlay");
 var _ProfilerInterceptor = require("./highlight-updates/utils/ProfilerInterceptor");
+var _CommitProfiler = require("./highlight-updates/utils/CommitProfiler");
+var _devtoolsComponentNames = require("./highlight-updates/utils/devtoolsComponentNames");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _RenderTracker = require("./highlight-updates/utils/RenderTracker");
 var _RenderCauseDetector = require("./highlight-updates/utils/RenderCauseDetector");
 var _PerformanceLogger = require("./highlight-updates/utils/PerformanceLogger");
@@ -298,6 +319,52 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
 // Profiler interceptor for debugging - captures what DevTools detects
 
+// CommitProfiler — per-component render counts/durations over a capture window
+
+// Bench "profile our own tools" mode: lets a dedicated benchmark screen
+// include Buoy's tool UI in render capture (normally pruned wholesale).
+// Highlight/events + perf-monitor components stay excluded regardless.
+
+// Register the render-capture provider so perf-monitor benchmarks can capture
+// renders without depending on this package. Runs at module scope: whenever
+// this package is installed, FloatingDevTools require()s it (including on the
+// fresh realm after a reload-between-cases batch step), and Metro evaluates
+// module side effects regardless of the package.json "sideEffects" hint.
+
+try {
+  (0, _sharedUi.setRenderCaptureProvider)({
+    isSupported: _CommitProfiler.CommitProfiler.isSupported,
+    start: _CommitProfiler.CommitProfiler.startCapture,
+    stop: _CommitProfiler.CommitProfiler.stopCapture,
+    // Real-time bounding boxes (the Render Highlighter visual) for the span
+    // of a recording. Saves the user's prior overlay state and hands back a
+    // restore fn: previously ON stays ON, silent tracking (events tool) gets
+    // re-suppressed, otherwise fully disabled again.
+    startLiveHighlights: () => {
+      try {
+        const wasEnabled = _HighlightUpdatesController.default.isEnabled();
+        const wasSuppressed = _HighlightUpdatesController.default.getHighlightsSuppressed();
+        _HighlightUpdatesController.default.enable(); // idempotent; clears suppression
+        return () => {
+          try {
+            if (!wasEnabled) {
+              _HighlightUpdatesController.default.disable(); // respects background tracking
+            } else if (wasSuppressed) {
+              _HighlightUpdatesController.default.setHighlightsSuppressed(true);
+            }
+          } catch {
+            // restoring the overlay must never throw into the recorder
+          }
+        };
+      } catch {
+        return null;
+      }
+    }
+  });
+} catch {
+  // shared-ui too old to have the registry — capture is simply unavailable.
+}
+
 // RenderTracker singleton for tracking render history
 
 // Convenience export for unified events integration

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

@@ -9,7 +9,7 @@
  */
 
 import React, { useEffect, useState, useRef, useCallback, useLayoutEffect } from "react";
-import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { View, Text, StyleSheet } from "react-native";
 import { buoyColors } from "@buoy-gg/shared-ui";
 import HighlightUpdatesController from "./utils/HighlightUpdatesController";
 import { PerformanceLogger, markOverlayRendered } from "./utils/PerformanceLogger";
@@ -187,35 +187,31 @@ export function HighlightUpdatesOverlay({
         height: rect.height,
         borderColor: rect.color
       }],
-      children: rect.count > 0 && (hasBadgePressHandler ? /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => handleBadgePress(rect.id),
+      children: rect.count > 0 && /*#__PURE__*/_jsx(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__*/_jsx(Text, {
           style: styles.badgeText,
           nativeID: `__highlight_text_${rect.id}__`,
           children: rect.count
         })
-      }) : /*#__PURE__*/_jsx(View, {
-        style: [styles.badge, {
-          backgroundColor: rect.color
-        }],
-        nativeID: `__highlight_badge_${rect.id}__`,
-        pointerEvents: "none",
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.badgeText,
-          nativeID: `__highlight_text_${rect.id}__`,
-          children: rect.count
-        })
-      }))
+      })
     }, `highlight-${rect.id}`))]
   });
 }

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

@@ -0,0 +1,276 @@
+"use strict";
+
+/**
+ * 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).
+ */
+
+import { isDevToolsComponentName } from "./devtoolsComponentNames";
+
+// 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 (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;
+}
+export const CommitProfiler = {
+  isSupported,
+  isCapturing,
+  startCapture,
+  stopCapture
+};