feat(resolution): mixed iOS / React Native / Expo cross-language bridging (#430)

Implements the design from `docs/design/mixed-ios-and-react-native-bridging.md`. Closes the cross-language flow gap so `trace` / `callers` / `callees` / `impact` connect end-to-end across language boundaries in real iOS, React Native, and Expo codebases. ## Bridges shipped | Boundary | Mechanism | Real-codebase validation | |---|---|---| | **Swift ↔ Objective-C** | Resolver applying Apple's @objc auto-bridging name math + Cocoa preposition prefixes | Charts (S, 269) · realm-swift (M, 369) · wikipedia-ios (L, 1734) | | **React Native legacy bridge** | Resolver parsing `RCT_EXPORT_MODULE` / `RCT_EXPORT_METHOD` / `RCT_REMAP_METHOD` (ObjC) + `@ReactMethod` (Java/Kotlin) | AsyncStorage (S, ~60) · react-native-svg (M, ~700) · react-native-firebase (L, ~1100) | | **React Native TurboModules** | Resolver treating `Native<X>.ts` spec interface as ground truth | via RNSvg + RNFirebase subsets | | **Native → JS events** | Synthesizer matching native `sendEventWithName:`/`emit(...)` to JS `addListener('e', handler)` keyed by literal event name; falls back to enclosing constant/variable for wrapper-API parameter handlers | RNGeolocation (S) · RNFirebase (L) | | **Expo Modules** | Framework extract synthesizes `method` nodes from Swift/Kotlin `Module { Name("X"); Function("y") { ... } }` DSL | expo-haptics (S, 14) · expo-camera (M, 72) · ExpoSweep (L, 332, 7 packages) | | **Fabric + legacy Paper view components** | Extract `component` + `property` nodes from Codegen `codegenNativeComponent<Props>('Name', ...)` specs AND legacy `RCT_EXPORT_VIEW_PROPERTY` / `@ReactProp` macros, then synthesize component → native class by name+suffix convention | react-native-segmented-control (S, legacy) · react-native-screens (M, Codegen) · react-native-skia (L, hybrid monorepo) | ## Bug fixes surfaced along the way - `tree-sitter.ts` message_expression — multi-keyword ObjC call sites now reconstruct `a🅱️` selectors so they resolve to multi-part method definitions (gap discovered post-#165; 0 → 84 call edges to `GET:parameters:...` style methods on AFNetworking). - `src/index.ts` resolver lifecycle — `indexAll()` now re-initializes the resolver after extraction so framework `detect()` sees the populated index. Pre-existing latent bug that affected UIKit and SwiftUI resolvers too. - `src/extraction/index.ts` `buildDetectionContext` — added `listDirectories` so framework detect() can probe monorepo subpackages uniformly (fix needed for react-native-skia detection). ## Regression check on 5 control repos | Repo | Result | |---|---| | Express (small JS) | ✅ unchanged — 266 routes, express framework detected | | Excalidraw (medium TS/React) | ✅ 9284 nodes (CLAUDE.md baseline ~9290); canonical `trace(mutateElement, renderStaticScene)` returns the flow | | Django realworld (Python) | ✅ django framework detected, 16 routes | | Spring petclinic (Java) | ✅ spring framework detected, 17 routes | | Texture (pure ObjC, large) | ✅ exactly matches #165 baseline: 4702 methods, 894 classes, 808/808 file coverage, 913 multi-keyword selectors, 55 protocols, 1036 properties | ## Tests 928 passing (+87 net new bridge tests across the 5 channels); 2 pre-existing skips. The mcp-staleness-banner / watcher parallel flakiness is unchanged by this work (different test fails each run, all pass in isolation; pre-existing on main). ## Documentation - README: new 'Mixed iOS / React Native / Expo bridging' section with the per-boundary table and validation-corpus links. - CHANGELOG `[Unreleased]`: full entry per bridge with measurements. - `docs/design/mixed-ios-and-react-native-bridging.md`: the design doc (§8 measurements filled in across §8a-§8g). - `docs/design/dynamic-dispatch-coverage-playbook.md` §6 coverage matrix: six new rows. - `.claude/skills/agent-eval/corpus.json`: four new sections covering 15 real GitHub repos for the eval harness. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-05-26 02:14:00 -05:00
parent 1821038e4b
commit 4d1a2b3c4d
22 changed files with 3786 additions and 6 deletions
@@ -0,0 +1,144 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import * as os from 'node:os';
+import { CodeGraph } from '../src';
+import { fabricViewResolver } from '../src/resolution/frameworks/fabric';
+
+describe('Fabric view component extractor (codegenNativeComponent specs)', () => {
+  it('extracts a component node + prop nodes from a Native*.ts spec', () => {
+    const source = `
+'use client';
+import { codegenNativeComponent } from 'react-native';
+import type { ViewProps, CodegenTypes as CT, ColorValue } from 'react-native';
+
+type TapEvent = Readonly<{ x: number; y: number }>;
+
+export interface NativeProps extends ViewProps {
+  color?: ColorValue;
+  onTap?: CT.DirectEventHandler<TapEvent>;
+  caption?: string;
+}
+
+export default codegenNativeComponent<NativeProps>('MyView', {});
+`;
+    const result = fabricViewResolver.extract?.('src/MyViewNativeComponent.ts', source);
+    expect(result).toBeDefined();
+    const componentNodes = result!.nodes.filter((n) => n.kind === 'component');
+    const propNodes = result!.nodes.filter((n) => n.kind === 'property');
+    expect(componentNodes).toHaveLength(1);
+    expect(componentNodes[0]?.name).toBe('MyView');
+    expect(propNodes.map((n) => n.name).sort()).toEqual(['caption', 'color', 'onTap']);
+  });
+
+  it('returns nothing for a file without codegenNativeComponent', () => {
+    const source = `export const x = 1;`;
+    const result = fabricViewResolver.extract?.('plain.ts', source);
+    expect(result?.nodes).toHaveLength(0);
+  });
+
+  it('handles a spec with no NativeProps interface (rare but valid)', () => {
+    const source = `
+import { codegenNativeComponent } from 'react-native';
+export default codegenNativeComponent('BareComponent');
+`;
+    const result = fabricViewResolver.extract?.('Bare.ts', source);
+    // Component node exists; no prop nodes.
+    const components = result!.nodes.filter((n) => n.kind === 'component');
+    const props = result!.nodes.filter((n) => n.kind === 'property');
+    expect(components).toHaveLength(1);
+    expect(components[0]?.name).toBe('BareComponent');
+    expect(props).toHaveLength(0);
+  });
+});
+
+describe('Fabric end-to-end: JSX consumer → Fabric component → native class', () => {
+  let dir: string;
+
+  beforeEach(() => {
+    dir = fs.mkdtempSync(path.join(os.tmpdir(), 'fabric-fixture-'));
+  });
+
+  afterEach(() => {
+    fs.rmSync(dir, { recursive: true, force: true });
+  });
+
+  it('connects <MyView/> JSX to the native ObjC class via Fabric synthesizer', async () => {
+    fs.writeFileSync(
+      path.join(dir, 'package.json'),
+      '{"dependencies":{"react-native":"^0.73"}}'
+    );
+    // Fabric spec.
+    fs.mkdirSync(path.join(dir, 'spec'));
+    fs.writeFileSync(
+      path.join(dir, 'spec', 'MyViewNativeComponent.ts'),
+      `import { codegenNativeComponent } from 'react-native';
+import type { ViewProps } from 'react-native';
+export interface NativeProps extends ViewProps { color?: string; }
+export default codegenNativeComponent<NativeProps>('MyView');`
+    );
+    // Native iOS implementation — class named with the `View` suffix
+    // convention.
+    fs.mkdirSync(path.join(dir, 'ios'));
+    fs.writeFileSync(
+      path.join(dir, 'ios', 'MyView.mm'),
+      `@interface MyViewView : UIView
+@end
+@implementation MyViewView
+- (void)setColor:(NSString *)c { /* … */ }
+@end`
+    );
+    // JSX consumer.
+    fs.mkdirSync(path.join(dir, 'src'));
+    fs.writeFileSync(
+      path.join(dir, 'src', 'App.tsx'),
+      `import React from 'react';
+import MyView from '../spec/MyViewNativeComponent';
+export function App() {
+  return <MyView color="red"/>;
+}`
+    );
+
+    const cg = await CodeGraph.init(dir, { silent: true });
+    await cg.indexAll();
+    const db = (cg as any).db.db;
+
+    // 1. The Fabric component node exists.
+    const componentRows = db
+      .prepare("SELECT id, name, kind FROM nodes WHERE id LIKE 'fabric-component:%' AND name='MyView'")
+      .all();
+    expect(componentRows).toHaveLength(1);
+
+    // 2. The native class node exists.
+    const nativeRows = db
+      .prepare("SELECT id, name FROM nodes WHERE kind='class' AND language='objc' AND name='MyViewView'")
+      .all();
+    expect(nativeRows).toHaveLength(1);
+
+    // 3. Fabric synthesizer bridges component → native class.
+    const bridgeRows = db
+      .prepare(
+        `SELECT s.name comp, t.name native FROM edges e
+         JOIN nodes s ON s.id=e.source JOIN nodes t ON t.id=e.target
+         WHERE json_extract(e.metadata,'$.synthesizedBy')='fabric-native-impl'
+           AND s.name='MyView' AND t.name='MyViewView'`
+      )
+      .all();
+    expect(bridgeRows).toHaveLength(1);
+
+    // 4. JSX synthesizer links the App function → the Fabric component
+    //    (jsx-render edge keyed on the tag name 'MyView').
+    const jsxRows = db
+      .prepare(
+        `SELECT s.name caller, t.name comp FROM edges e
+         JOIN nodes s ON s.id=e.source JOIN nodes t ON t.id=e.target
+         WHERE json_extract(e.metadata,'$.synthesizedBy')='jsx-render'
+           AND t.id LIKE 'fabric-component:%' AND t.name='MyView'`
+      )
+      .all();
+    cg.close?.();
+    expect(jsxRows.length).toBeGreaterThanOrEqual(1);
+    expect(jsxRows[0].caller).toBe('App');
+    // The full flow: App (TSX) → MyView (fabric-component) → MyViewView (ObjC native class)
+  });
+});