2 Commits

Author	SHA1	Message	Date
Ignacy Łątka	b5fc1f2a50	fix(tool-server): key Fabric component-tree measurement by nativeTag so tap coords don't collapse to 0.5,0.5 (#286) ... ## Problem `debugger-component-tree` returned **every** element with the same tap coordinate — `(tap: 0.50,0.50)` — on the New Architecture (Fabric/bridgeless), making the tool's primary output (per-element tap coordinates) unusable. Reproduced live on an RN 0.81.5 Fabric app; the tree walk, skip stats, and screen size were all correct, only the coordinates collapsed. ## Root cause The injected script (`utils/debugger/scripts/component-tree.ts`) batch-measures host views and caches each rect under a per-host key built as `(hi.f ? 'f' : 'p') + hi.n`. On **Fabric**, `getHostInfo` returns the shadow **node object** as `hi.n` (`{ f: true, n: fiber.stateNode.node }`), so the key stringifies to `"f[object Object]"` for *every* host. All hosts collapsed to a single cache entry → only the first (root) view was measured → every component inherited the root's full-screen rect → `(x + w/2)/screenW, (y + h/2)/screenH = 0.5, 0.5` for all. Paper/old-arch was unaffected because there `hi.n` is already a numeric `nativeTag`. ## Fix Key the cache by a primitive `nativeTag` on Fabric (`fiber.stateNode.canonical.nativeTag`, the same field the Paper branch already uses), with a `WeakMap`-by-identity fallback so distinct shadow nodes can never share a key even if `nativeTag` were ever absent. `getHostInfo` now carries an explicit `key`, and the three cache-key derivations use it. Paper/old-arch behavior is unchanged. ## Testing **Live (first-hand), on a running RN 0.81 Fabric app** — walking the live fiber tree: | | Fabric host nodes | distinct measure keys | |---|---|---| | old key (`'f' + node`) | 2140 | **1** (`"f[object Object]"`) | | new key (`'f' + nativeTag`) | 2140 | **2140** | **Unit** — adds `test/debugger/component-tree-script.test.ts`, which evaluates the injected script against a mocked Fabric tree (the existing `component-tree.test.ts` only covered the pure post-processor with pre-filled rects, which is why this shipped). The collapse is exercised on both Fabric measure paths with **tagless** hosts (no numeric `nativeTag`), so the cache key is forced onto the new `WeakMap`-by-identity fallback — with a numeric tag the buggy `'f' + node` key was already distinct and never collapsed. `vitest run` → 6/6 pass with the fix; reverting `component-tree.ts` to `main` fails both collapse tests with `{ y: 100 }` where `{ y: 300 }` is expected (the second component inheriting the first's rect — exactly the collapse).	2026-06-18 11:49:53 +02:00
Alexander Brokking	232762ebd0	fix(tool-server): make debugger-component-tree work on New Arch / multi-renderer apps (#316) ... ## Summary `debugger-component-tree` returns **"No visible components found on screen"** on React Native **New Architecture (Fabric / bridgeless)** apps that also use a secondary React reconciler such as `react-native-skia` — even when the app is fully rendered and CDP is connected. This PR fixes the two root causes so the tool returns the real component tree with names, testIDs, and accurate tap coordinates. ## Root cause The injected fiber-walk script (`packages/tool-server/src/utils/debugger/scripts/component-tree.ts`) made two assumptions that don't hold on modern RN: 1. **Hardcoded renderer id.** `hook.getFiberRoots(1)` assumes the React Native renderer is DevTools renderer id `1`. Libraries that ship their own React reconciler (`react-native-skia`, `react-native-svg`, `react-three-fiber`, …) register a renderer too and frequently take id `1`. On such apps `getFiberRoots(1)` returns only that library's roots (e.g. Skia shapes), so the walk never reaches the app UI → `No visible components`. 2. **`nativeFabricUIManager.measure` under bridgeless.** Layout was read via `nativeFabricUIManager.measure(stateNode.node, …)`. Under bridgeless, `globalThis.nativeFabricUIManager` is an **empty object** (no `.measure`), so every measure threw and all rects became `null` — components were then filtered out (and the few kept by testID reported no usable rect). ## Fix - **Renderer-agnostic root selection:** enumerate `hook.renderers`, collect roots from every renderer, and walk the mounted root with the largest fiber subtree (the real app UI) instead of hardcoding id 1. - **Fabric layout via the public host instance:** measure through `stateNode.canonical.publicInstance.measureInWindow()` (a `ReactNativeElement`) — the **same approach this repo's `inspect-at-point.ts` already uses** — falling back to `nativeFabricUIManager.measure(shadowNode, …)` when that global is functional (non-bridgeless). - **Hang guard:** a per-measure 1200 ms timeout so `Promise.all` can't stall on a measure callback that never fires (detached / off-screen nodes). No change to the output schema or the Paper (old-architecture) path. ## How to reproduce On a Fabric + bridgeless RN app that also renders `react-native-skia`: ``` argent run debugger-connect --device_id <udid> --port <metro> argent run debugger-component-tree --device_id <udid> --port <metro> # before: "No visible components found on screen." ``` The DevTools hook reports multiple renderers — e.g. `getFiberRoots(1)` is the Skia reconciler (only canvas nodes), while the real app UI lives in a different react-native renderer that the hardcoded id never reaches. ## Testing - Full `npm run build` (`tsc --build`, project references) passes; the modified file typechecks under `strict`. - Verified live against a **React 19.2.0 / Fabric (bridgeless)** app whose DevTools hook exposes 3 renderers (id 1 = `react-native-skia` `0.0.1`; id 3 = `react-native` `19.2.0` holding the real ~2,900-fiber UI tree). Before (unpatched): `No visible components found on screen.` — even with `--includeSkipped` and after forcing a fresh commit. After (this change) — names + testIDs + accurate coords (example genericized): ``` Screen: 440x956 OnboardingQuestion "<question text>" (tap: 0.50,0.17) SelectableCard [testID=onboarding.option.yes] (tap: 0.50,0.84) Text "Yes" (tap: 0.50,0.84) SelectableCard [testID=onboarding.option.no] (tap: 0.50,0.93) Pressable [testID=screen.back-button] (tap: 0.09,0.09) ← top-left ✓ TouchableOpacity [testID=dev-settings.trigger] (tap: 0.06,0.97) ← bottom-left ✓ ``` Coordinates were spot-checked against the visible layout (back button top-left, an off-screen/hidden trigger bottom-left). ## Notes `inspect-at-point.ts` has the same hardcoded `getFiberRoots(1)` / `renderers[0]` renderer assumption (its Fabric layout path already uses `publicInstance`, which is what motivated this fix). I scoped this PR to `component-tree`; happy to follow up on the inspect path separately. --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: Filip131311 <contact@filipkaminski.com> Co-authored-by: filip131311 <159789821+filip131311@users.noreply.github.com>	2026-06-10 12:34:47 +02:00