@buoy-gg/image-overlay 7.0.16 → 7.0.18

package/lib/commonjs/imageOverlay/utils/ImageOverlayController.js

@@ -7,6 +7,7 @@ exports.ImageOverlayController = void 0;
 var _reactNative = require("react-native");
 var _componentMeasurement = require("./componentMeasurement");
 var _fiberScanner = require("./fiberScanner");
+var _devtoolsHook = require("./devtoolsHook");
 /**
  * Singleton state manager for the image overlay tool.
  * Bridges the modal (controls) and standalone overlay (rendering).
@@ -89,7 +90,7 @@ async function measureWithFallback(instance, label) {
 function startTraceTracking() {
   if (traceUnsubscribe) return; // already tracking
 
-  const hook = global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  const hook = (0, _devtoolsHook.getDevToolsHook)();
   if (!hook) return;
 
   // Enable trace updates on all renderers (same as highlight-updates)

package/lib/commonjs/imageOverlay/utils/devtoolsHook.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDevToolsHook = getDevToolsHook;
+exports.setDevToolsHookOverride = setDevToolsHookOverride;
+/**
+ * Single accessor for the React DevTools global hook.
+ *
+ * Both the fiber scanner (target discovery) and the controller (auto-track via
+ * traceUpdates) reach for `__REACT_DEVTOOLS_GLOBAL_HOOK__`. Routing both through
+ * here gives embedded hosts — the docs-site live demo, and any future desktop
+ * port — one place to substitute their own hook, so the tool never instruments
+ * the host page's React renderer just because someone flipped Auto Track.
+ *
+ * On device nothing calls setDevToolsHookOverride, so this stays a plain
+ * passthrough to the global.
+ */
+
+let hookOverride = null;
+
+/**
+ * Substitute the hook the tool reads. Pass null to fall back to the global.
+ * The override only needs the parts the tool actually uses:
+ * `getFiberRoots(rendererId)`, and optionally `sub("traceUpdates", fn)` plus
+ * `rendererInterfaces` for auto-track.
+ */
+function setDevToolsHookOverride(hook) {
+  hookOverride = hook ?? null;
+}
+function getDevToolsHook() {
+  if (hookOverride) return hookOverride;
+  if (typeof global === "undefined") return null;
+  return global.__REACT_DEVTOOLS_GLOBAL_HOOK__ ?? null;
+}

package/lib/commonjs/imageOverlay/utils/fiberScanner.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.scanForImageTargets = scanForImageTargets;
+var _devtoolsHook = require("./devtoolsHook");
 /**
  * Fiber tree scanner for discovering image-overlay targets.
  * Finds components tagged with testID="image-target:LabelName".
@@ -16,12 +17,8 @@ const IMAGE_TARGET_PREFIX = "image-target:";
 // Fiber tag constants (from React internals)
 const HostComponent = 5;
 const OffscreenComponent = 22;
-function getReactDevToolsHook() {
-  if (typeof global === "undefined") return null;
-  return global.__REACT_DEVTOOLS_GLOBAL_HOOK__ ?? null;
-}
 function getFiberRoots() {
-  const hook = getReactDevToolsHook();
+  const hook = (0, _devtoolsHook.getDevToolsHook)();
   if (!hook?.getFiberRoots) return [];
   try {
     const rootsSet = hook.getFiberRoots(1);
@@ -84,7 +81,11 @@ function scanForImageTargets() {
   for (const root of roots) {
     traverseFiberTree(root.current, fiber => {
       if (fiber.tag !== HostComponent) return;
-      const testID = fiber.memoizedProps?.testID ?? fiber.pendingProps?.testID;
+
+      // react-native-web rewrites testID to data-testid before it reaches the
+      // host fiber, so read both — otherwise the scanner finds nothing in any
+      // RNW-rendered tree (example-web, the docs-site live demo).
+      const testID = fiber.memoizedProps?.testID ?? fiber.pendingProps?.testID ?? fiber.memoizedProps?.["data-testid"] ?? fiber.pendingProps?.["data-testid"];
       if (!testID || !testID.startsWith(IMAGE_TARGET_PREFIX)) return;
       const label = testID.slice(IMAGE_TARGET_PREFIX.length);
       if (!label) return;

package/lib/commonjs/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "ImageOverlayStandalone", {
     return _ImageOverlayStandalone.ImageOverlayStandalone;
   }
 });
+Object.defineProperty(exports, "ImageOverlayToolView", {
+  enumerable: true,
+  get: function () {
+    return _ImageOverlayModal.ImageOverlayToolView;
+  }
+});
 Object.defineProperty(exports, "createImageOverlayTool", {
   enumerable: true,
   get: function () {
@@ -39,8 +45,15 @@ Object.defineProperty(exports, "scanForImageTargets", {
     return _fiberScanner.scanForImageTargets;
   }
 });
+Object.defineProperty(exports, "setDevToolsHookOverride", {
+  enumerable: true,
+  get: function () {
+    return _devtoolsHook.setDevToolsHookOverride;
+  }
+});
 var _preset = require("./preset");
 var _ImageOverlayModal = require("./imageOverlay/components/ImageOverlayModal");
 var _ImageOverlayStandalone = require("./imageOverlay/components/ImageOverlayStandalone");
 var _ImageOverlayController = require("./imageOverlay/utils/ImageOverlayController");
-var _fiberScanner = require("./imageOverlay/utils/fiberScanner");
+var _fiberScanner = require("./imageOverlay/utils/fiberScanner");
+var _devtoolsHook = require("./imageOverlay/utils/devtoolsHook");