@buoy-gg/highlight-updates 7.0.27 → 7.0.29

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isHostViewName = isHostViewName;
+exports.isNamedComposite = isNamedComposite;
+/**
+ * Host views (RCTView / View / Text) drown the Highlight Updates list.
+ * Named composites are what you actually want when asking "what re-rendered?"
+ */
+
+const HOST_NAMES = new Set(["View", "RCTView", "Text", "RCTText", "RawText", "RCTRawText", "VirtualText", "RCTVirtualText", "ScrollView", "RCTScrollView", "RCTScrollContentView", "SafeAreaView", "RCTSafeAreaView", "Pressable", "TouchableOpacity", "Image", "RCTImageView"]);
+
+/**
+ * Fiber names that look like identity but are list chrome / RN internals.
+ * Only provably-anonymous names belong here — real components (CopyButton,
+ * a user's `Copy`…) must stay visible. "Comp Copy"-style truncated
+ * placeholders are handled by the regex in isNamedComposite instead.
+ */
+const PLACEHOLDER_NAMES = new Set(["Unknown", "Anonymous", "CellRenderer", "NativeComponent"]);
+/**
+ * True when this row is a named user composite (or has a testID). Host views
+ * and anonymous "Comp Copy" wrappers return false.
+ */
+function isNamedComposite(r) {
+  if (r.testID && r.testID.trim()) return true;
+  const name = (r.componentName ?? "").trim();
+  if (!name) return false;
+  if (HOST_NAMES.has(name)) return false;
+  if (PLACEHOLDER_NAMES.has(name)) return false;
+  const view = (r.viewType ?? "").trim();
+  if (view && HOST_NAMES.has(view) && name === view) return false;
+  // "Comp Copy" / "1x" style placeholders — no real component identity.
+  if (/^comp(\s|$)/i.test(name)) return false;
+  if (name.startsWith("_")) return false;
+  return true;
+}
+function isHostViewName(name) {
+  return !!name && HOST_NAMES.has(name);
+}

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

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hookStateChanged = hookStateChanged;
+exports.ownStateChanged = ownStateChanged;
+/**
+ * "Did this component's own state actually change?" — one implementation.
+ *
+ * This package classifies render causes twice, on purpose. `RenderCauseDetector`
+ * serves the overlay and rides React DevTools' `traceUpdates`, which hands it
+ * fibers at an ambiguous moment — hence its WeakMap fallbacks and fiber-swap
+ * detection. `CommitProfiler` serves Bench's render capture from inside
+ * `onCommitFiberRoot`, where `fiber` is current and `fiber.alternate` is
+ * previous by definition, and where it runs on every composite fiber of every
+ * commit and so counts allocations. Those are genuinely different problems and
+ * the two classifiers should stay separate.
+ *
+ * This ONE question is not different between them, and it is the question they
+ * both got wrong:
+ *
+ *   `prev.memoizedState !== next.memoizedState`
+ *
+ * For a function component `memoizedState` is the head of the hook linked list,
+ * and React rebuilds that list on every update — `updateWorkInProgressHook`
+ * clones each node — so the head is a fresh object whether or not a single
+ * hook's value moved. Read as "state changed" it makes "state"/"hooks" the
+ * answer for every component that uses ANY hook (a lone `useEffect` is enough)
+ * and leaves "parent" reachable only by the vanishingly rare component that
+ * uses none.
+ *
+ * That is the one distinction in either tool a developer acts on: "parent"
+ * means memoize it or lift the state, "state" means it genuinely updated and
+ * should be left alone. Backwards, it sends you to optimise the thing that was
+ * already fine — and in Bench it also silently shrank `wastedRenders`, the
+ * number that says whether there is anything to fix at all.
+ *
+ * Both tools reached that wrong line independently, which is exactly why the
+ * answer lives here now rather than in two places that happen to agree.
+ */
+
+/** React work tag for a class component — its `memoizedState` IS the state. */
+const CLASS_COMPONENT = 1;
+
+/** Guardrail on the hook-list walk; deep hook lists are pathological. */
+const MAX_HOOKS_WALKED = 64;
+
+/** Does this look like React's hook linked list rather than class state? */
+function isHookList(head) {
+  return !!head && typeof head === "object" && ("next" in head || "queue" in head || "memoizedState" in head);
+}
+
+/**
+ * True when a STATE hook's value actually moved between two hook-list heads.
+ *
+ * `queue` is the marker: `useState` and `useReducer` — and everything built on
+ * them — own one; effects, memos, callbacks and refs do not. An effect's
+ * `memoizedState` is a brand-new object on every single render, which is the
+ * specific thing that broke the identity check.
+ *
+ * Note that a `useRef` mutation is deliberately NOT a state change here. It
+ * cannot cause a render, so a render attributed to one is a render blamed on
+ * something that did not do it.
+ *
+ * Conservative where it cannot tell: a class component, or a `memoizedState`
+ * that is not a recognisable hook list, falls back to the identity comparison.
+ * There the identity IS meaningful (or is the best signal available), so the
+ * old behaviour is the right behaviour.
+ *
+ * Takes the HEADS rather than the fibers because only one of the two callers
+ * has a previous fiber to hand — the overlay may be working from a WeakMap
+ * snapshot of the previous `memoizedState` instead. Use `ownStateChanged` when
+ * you do have both fibers.
+ */
+function hookStateChanged(prevHead, nextHead, options) {
+  if (prevHead === nextHead) return false;
+  if (options?.isClassComponent) return true;
+  if (!isHookList(nextHead)) return true;
+  let p = prevHead;
+  let n = nextHead;
+  for (let depth = 0; n != null && depth < MAX_HOOKS_WALKED; depth++) {
+    if (n.queue != null) {
+      // A hook the previous render did not have is a real change.
+      if (p == null) return true;
+      if (!Object.is(p.memoizedState, n.memoizedState)) return true;
+    }
+    n = n.next;
+    p = p != null ? p.next : null;
+  }
+  return false;
+}
+
+/**
+ * `hookStateChanged` for callers holding both fibers — the common case inside
+ * `onCommitFiberRoot`, where `fiber.alternate` is the previous fiber by
+ * definition.
+ */
+function ownStateChanged(prev, next) {
+  return hookStateChanged(prev?.memoizedState, next?.memoizedState, {
+    isClassComponent: next?.tag === CLASS_COMPONENT
+  });
+}

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.describeScreen = describeScreen;
 exports.tapElement = tapElement;
 var _reactNative = require("react-native");
+var _tapMatch = require("./tapMatch");
 /**
  * On-device screen element discovery + in-JS tap.
  *
@@ -499,9 +500,10 @@ async function describeScreen() {
     if (r) {
       const cx = r.x + r.width / 2;
       const cy = r.y + r.height / 2;
-      // Skip elements entirely off-screen.
+      // Drop previous Expo Router screens (centers well outside the window).
+      // Keep a 10% slack so the floating menu / home-indicator-clipped rows stay.
       if (cy < -screenH * 0.1 || cy > screenH * 1.1 || cx < -screenW * 0.1 || cx > screenW * 1.1) {
-        if (!c.testID) continue;
+        continue;
       }
       tap = {
         x: round2(cx / screenW),
@@ -554,20 +556,24 @@ function round2(n) {
 
 // --- tapElement -----------------------------------------------------------
 
+function fieldsOf(c) {
+  return {
+    nativeTag: c.nativeTag,
+    testID: c.testID,
+    label: c.label,
+    text: c.text,
+    name: c.name
+  };
+}
 function matchScore(c, params) {
-  if (params.nativeTag != null && c.nativeTag === params.nativeTag) return 1000;
-  const q = (params.query ?? params.testID ?? "").trim().toLowerCase();
-  if (!q) return 0;
-  const fields = [c.testID, c.label, c.text, c.name].filter(Boolean).map(s => s.toLowerCase());
-  let best = 0;
-  for (const f of fields) {
-    if (f === q) best = Math.max(best, 100);else if (f.startsWith(q)) best = Math.max(best, 50);else if (f.includes(q)) best = Math.max(best, 25);
-  }
-  // testID exact match should win over a fuzzy name hit.
-  if (params.testID && c.testID && c.testID.toLowerCase() === params.testID.toLowerCase()) {
-    best = Math.max(best, 200);
-  }
-  return best;
+  return (0, _tapMatch.scoreTapMatch)(fieldsOf(c), params);
+}
+function tapPoint(rect, screenW, screenH) {
+  if (!rect || !screenW || !screenH) return undefined;
+  return {
+    x: (rect.x + rect.width / 2) / screenW,
+    y: (rect.y + rect.height / 2) / screenH
+  };
 }
 function makeSyntheticPressEvent(rect) {
   const pageX = rect ? rect.x + rect.width / 2 : 0;
@@ -623,7 +629,28 @@ async function tapElement(params) {
       }))
     };
   }
-  const target = ranked.find(r => isInteractive(r.c)) ?? ranked[0];
+
+  // Measure the top matches so an on-screen DialIcon beats an off-screen nav
+  // chip whose testID happens to contain the same substring.
+  const win = _reactNative.Dimensions.get("window");
+  const screenW = win.width || 1;
+  const screenH = win.height || 1;
+  const top = ranked.slice(0, 15);
+  await Promise.all(top.map(async r => {
+    if (r.c.instance && !r.c.rect) r.c.rect = await measureInstance(r.c.instance);
+  }));
+  for (const r of top) {
+    r.score = (0, _tapMatch.scoreTapMatch)({
+      ...fieldsOf(r.c),
+      tap: tapPoint(r.c.rect, screenW, screenH)
+    }, params);
+  }
+  top.sort((a, b) => b.score - a.score);
+
+  // Fall back to the FULL ranked list for an interactive match — the top-15
+  // re-score is only a tiebreak, and on a busy screen the pressable match can
+  // sit below 15 text-score peers.
+  const target = top.find(r => isInteractive(r.c)) ?? ranked.find(r => isInteractive(r.c)) ?? top[0];
   const c = target.c;
   if (!isInteractive(c)) {
     return {
@@ -642,20 +669,18 @@ async function tapElement(params) {
 
   // Measure the target so we can decide whether to scroll it on-screen (and,
   // for a press, give the synthetic event real coordinates).
-  if (c.instance) c.rect = await measureInstance(c.instance);
+  if (c.instance && !c.rect) c.rect = await measureInstance(c.instance);
 
   // Bring it into view if it's off-screen and scrolling is wanted. The action
   // doesn't NEED this (handlers are invoked directly), but it keeps the element
   // visible for the human watching / a follow-up describe.
   let scrolled = false;
-  if (params.scrollIntoView !== false && c.instance) {
-    const win = _reactNative.Dimensions.get("window");
-    const centerY = c.rect ? c.rect.y + c.rect.height / 2 : null;
-    const offScreen = c.rect == null || centerY < 0 || centerY > win.height;
-    if (offScreen) {
-      scrolled = await scrollIntoView(c.fiber, c.instance, c.stateNode, 80);
-      if (scrolled) c.rect = await measureInstance(c.instance); // fresh coords
-    }
+  // A failed measure (rect == null) counts as off-screen: the node may be in
+  // a virtualized list that hasn't materialized it, and scrolling can help.
+  const offScreen = c.rect == null || !(0, _tapMatch.isRectCenterOnScreen)(c.rect, screenW, screenH);
+  if (offScreen && params.scrollIntoView !== false && c.instance) {
+    scrolled = await scrollIntoView(c.fiber, c.instance, c.stateNode, 80);
+    if (scrolled) c.rect = await measureInstance(c.instance); // fresh coords
   }
   const base = {
     nativeTag: c.nativeTag,

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

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isOnScreenTap = isOnScreenTap;
+exports.isRectCenterOnScreen = isRectCenterOnScreen;
+exports.scoreTapMatch = scoreTapMatch;
+/**
+ * Shared tap-target scoring for describe_screen / tap_element.
+ *
+ * Ranking used to be substring-on-testID only, so `tap: "ASSETS"` preferred
+ * `nav-assets-tool-test` (score 25) over a visible dial icon, and off-screen
+ * Expo Router screens (y > 1) stayed in the candidate list.
+ */
+
+/** True when the measured center is inside the window (10% slack for home-indicator / portal hosts). */
+function isOnScreenTap(tap) {
+  if (!tap) return false;
+  return tap.x >= -0.1 && tap.x <= 1.1 && tap.y >= -0.1 && tap.y <= 1.1;
+}
+
+/**
+ * Point-in-window test in *points* (measureInWindow coords), with slack so
+ * the floating menu and rows clipped at the home indicator still count.
+ * Previous Expo Router screens typically measure at y > 1.2× window height.
+ */
+function isRectCenterOnScreen(rect, screenW, screenH) {
+  if (!rect || screenW <= 0 || screenH <= 0) return false;
+  const cx = rect.x + rect.width / 2;
+  const cy = rect.y + rect.height / 2;
+  const slackX = screenW * 0.1;
+  const slackY = screenH * 0.1;
+  return cx >= -slackX && cx <= screenW + slackX && cy >= -slackY && cy <= screenH + slackY;
+}
+function scoreTapMatch(c, params) {
+  if (params.nativeTag != null && c.nativeTag === params.nativeTag) return 1000;
+  const q = (params.query ?? params.testID ?? "").trim().toLowerCase();
+  if (!q) return 0;
+  const fields = [c.testID, c.label, c.text, c.name].filter(Boolean).map(s => s.toLowerCase());
+  let best = 0;
+  for (const f of fields) {
+    if (f === q) best = Math.max(best, 100);else if (f.startsWith(q)) best = Math.max(best, 50);else if (f.includes(q)) best = Math.max(best, 25);
+  }
+  if (params.testID && c.testID && c.testID.toLowerCase() === params.testID.toLowerCase()) {
+    best = Math.max(best, 200);
+  }
+  if (best === 0) return 0;
+  const id = (c.testID ?? "").toLowerCase();
+  // Dial icons are the thing agents mean when they tap a tool name. (No
+  // penalties for app testID patterns — this ships in the library, and we
+  // don't know consumer apps' naming conventions.)
+  if (id.startsWith("buoy-dial-")) best += 40;
+  if (c.tap) {
+    if (isOnScreenTap(c.tap)) best += 20;else best -= 40;
+  }
+  return best;
+}

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

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.detectedItemTestID = detectedItemTestID;
+exports.identifierSlug = identifierSlug;
+exports.patternChipTestID = patternChipTestID;
+exports.renderRowTestID = renderRowTestID;
+exports.settingTestID = settingTestID;
+/**
+ * Stable e2e handles for the Render Highlighter (highlight-updates).
+ *
+ * This tool's list is the hardest thing in Buoy to address, because the thing
+ * it lists is a NATIVE VIEW and the only key it has for one is the fiber's
+ * `nativeTag` — a per-session counter that changes on every launch, on every
+ * remount, and (on a dynamic screen) between two runs of the same test. A
+ * handle built from it would name a different component every time.
+ *
+ * So rows are addressed by their IDENTIFIER, in exactly the priority the list
+ * item itself uses to label them: testID → nativeID → component name →
+ * accessibility label → nativeTag. That is the same string the developer sees
+ * on the row, it is stable as long as the component is, and it is what a test
+ * can name up front. `nativeTag` remains the last resort for an anonymous host
+ * view, which no test should be naming anyway.
+ *
+ * Slug rules are mirrored in `example-dev-build/utils/renderBench.js` so the
+ * fixture and the tool agree about what a row is called; the suite's
+ * `fixture.js` spot-checks that they still do.
+ */
+
+/** Any identifier string → a testID-safe slug. */
+function identifierSlug(value) {
+  return String(value).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "unknown";
+}
+
+/**
+ * `buoy-highlight-row-<slug>` for one row of the render list.
+ *
+ * Sub-handles hang off it: `-name`, `-count`, `-type`, `-cause`, `-identifier`,
+ * `-time`. The count is the tool's whole claim, so it gets its own handle
+ * rather than living inside the row's merged label.
+ */
+function renderRowTestID(identifier) {
+  return `buoy-highlight-row-${identifierSlug(identifier)}`;
+}
+
+/**
+ * `buoy-highlight-detected-<type>-<slug>` for one chip in DETECTED ITEMS.
+ *
+ * The type is in the handle because the same string legitimately appears under
+ * two categories — a component called `Pressable` and a viewType called
+ * `Pressable` are different filters with the same name, and a suite that added
+ * the wrong one would still see "a pattern was added".
+ */
+function detectedItemTestID(type, value) {
+  return `buoy-highlight-detected-${identifierSlug(type)}-${identifierSlug(value)}`;
+}
+
+/** `buoy-highlight-<mode>-chip-<type>-<slug>` for an active filter pattern. */
+function patternChipTestID(mode, type, value) {
+  return `buoy-highlight-${mode}-chip-${identifierSlug(type)}-${identifierSlug(value)}`;
+}
+
+/** `buoy-highlight-setting-<key>` for a settings row's control. */
+function settingTestID(key) {
+  return `buoy-highlight-setting-${key}`;
+}

package/lib/commonjs/index.js

@@ -141,6 +141,12 @@ Object.defineProperty(exports, "detectRenderCause", {
     return _RenderCauseDetector.detectRenderCause;
   }
 });
+Object.defineProperty(exports, "detectedItemTestID", {
+  enumerable: true,
+  get: function () {
+    return _testIDs.detectedItemTestID;
+  }
+});
 Object.defineProperty(exports, "disableProfilerLogging", {
   enumerable: true,
   get: function () {
@@ -207,6 +213,12 @@ Object.defineProperty(exports, "highlightUpdatesSyncAdapter", {
     return _highlightUpdatesSyncAdapter.highlightUpdatesSyncAdapter;
   }
 });
+Object.defineProperty(exports, "identifierSlug", {
+  enumerable: true,
+  get: function () {
+    return _testIDs.identifierSlug;
+  }
+});
 Object.defineProperty(exports, "installProfilerInterceptor", {
   enumerable: true,
   get: function () {
@@ -238,12 +250,24 @@ Object.defineProperty(exports, "isLoggingEnabled", {
   }
 });
 exports.onRenderEvent = void 0;
+Object.defineProperty(exports, "patternChipTestID", {
+  enumerable: true,
+  get: function () {
+    return _testIDs.patternChipTestID;
+  }
+});
 Object.defineProperty(exports, "removeRenderCauseState", {
   enumerable: true,
   get: function () {
     return _RenderCauseDetector.removeRenderCauseState;
   }
 });
+Object.defineProperty(exports, "renderRowTestID", {
+  enumerable: true,
+  get: function () {
+    return _testIDs.renderRowTestID;
+  }
+});
 Object.defineProperty(exports, "safeCloneForHistory", {
   enumerable: true,
   get: function () {
@@ -262,6 +286,12 @@ Object.defineProperty(exports, "setComparisonCallback", {
     return _ProfilerInterceptor.setComparisonCallback;
   }
 });
+Object.defineProperty(exports, "settingTestID", {
+  enumerable: true,
+  get: function () {
+    return _testIDs.settingTestID;
+  }
+});
 Object.defineProperty(exports, "uninstallProfilerInterceptor", {
   enumerable: true,
   get: function () {
@@ -287,6 +317,7 @@ var _HighlightFilterView = require("./highlight-updates/components/HighlightFilt
 var _RenderCauseBadge = require("./highlight-updates/components/RenderCauseBadge");
 var _RenderHistoryViewer = require("./highlight-updates/components/RenderHistoryViewer");
 var _renderExportFormatter = require("./highlight-updates/utils/renderExportFormatter");
+var _testIDs = require("./highlight-updates/utils/testIDs");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * @buoy-gg/highlight-updates
@@ -392,4 +423,7 @@ const onRenderEvent = callback => {
 // footer) instead of inside a JsModal — for hosts that show tools in a panel.
 
 // Simple JSON export for renders
+
+// e2e handle builders — exported so the example app's fixture can derive the
+// same row handles the tool renders instead of hardcoding a second copy.
 exports.onRenderEvent = onRenderEvent;