@symbiote-native/angular 0.0.0-canary-20260724081123

package/src/renderer/renderer.test.ts

@@ -0,0 +1,203 @@
+// Co-located headless test for the Angular renderer seam. Drives SymbioteRenderer
+// directly — no Angular runtime, no compiler — against the shared fake Fabric slot, proving
+// each Renderer2 method maps onto the engine mutation API and commits a correct Fabric tree.
+// The bootstrap (mount → createComponent) is validated separately on a real host / the AOT
+// example; this isolates the seam, which is the deterministic, framework-free half.
+
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import {
+  clearGlobalStyles,
+  createSurface,
+  disposeRoot,
+  isAnchor,
+  isSymbioteNode,
+  registerStyles,
+} from '@symbiote-native/engine';
+import { installFabric } from '@symbiote-native/test-utils';
+import { SymbioteRenderer, SymbioteRendererFactory } from './index';
+import { registerComposedComponent } from '../anchor-host-registry';
+
+const ROOT_TAG = 707;
+const PROBE_ID = 'probe';
+
+const fabric = installFabric();
+
+// A macrotask boundary drains the engine's coalesced (requestCommit) commit before asserting.
+const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+
+function setup(): { surface: ReturnType<typeof createSurface>; renderer: SymbioteRenderer } {
+  const surface = createSurface(ROOT_TAG);
+  const renderer = new SymbioteRendererFactory(surface).createRenderer(null, null);
+  if (!(renderer instanceof SymbioteRenderer))
+    throw new Error('unreachable: factory built the renderer');
+  return { surface, renderer };
+}
+
+beforeEach(() => fabric.reset());
+afterEach(() => {
+  disposeRoot(ROOT_TAG);
+  clearGlobalStyles();
+});
+
+describe('Angular SymbioteRenderer drives the engine', () => {
+  it('maps createElement / createText / appendChild into a committed Fabric tree', async () => {
+    const { surface, renderer } = setup();
+    const view = renderer.createElement('symbiote-view');
+    const text = renderer.createElement('symbiote-text');
+    const raw = renderer.createText('Hello');
+    renderer.appendChild(text, raw);
+    renderer.appendChild(view, text);
+    renderer.appendChild(surface, view);
+    await tick();
+
+    // The engine wraps surface.children in the synthetic box-none AppContainer root.
+    const root = fabric.appRoot();
+    expect(fabric.serialize(root.children)).toBe('RCTView(RCTText(RCTRawText "Hello"))');
+  });
+
+  it('maps additional symbiote intrinsics through the shared descriptor table', async () => {
+    const { surface, renderer } = setup();
+    const spinner = renderer.createElement('symbiote-activity-indicator');
+    renderer.setProperty(spinner, 'testID', 'spinner');
+    renderer.setProperty(spinner, 'animating', true);
+    const image = renderer.createElement('symbiote-image');
+    renderer.setProperty(image, 'testID', 'image');
+    renderer.setProperty(image, 'source', { uri: 'https://example.invalid/image.png' });
+    renderer.appendChild(surface, spinner);
+    renderer.appendChild(surface, image);
+    await tick();
+
+    const committed = fabric.find(node => node.props.testID === 'spinner');
+    expect(committed?.viewName).toBe('ActivityIndicatorView');
+    expect(committed?.props.animating).toBe(true);
+    const committedImage = fabric.find(node => node.props.testID === 'image');
+    expect(committedImage?.viewName).toBe('RCTImageView');
+    expect(committedImage?.props.source).toEqual({ uri: 'https://example.invalid/image.png' });
+  });
+
+  it('commits setProperty and merges per-key setStyle into one style prop', async () => {
+    const { surface, renderer } = setup();
+    const view = renderer.createElement('symbiote-view');
+    renderer.setProperty(view, 'nativeID', PROBE_ID);
+    renderer.setStyle(view, 'padding', 24);
+    renderer.setStyle(view, 'opacity', 0.5);
+    renderer.appendChild(surface, view);
+    await tick();
+
+    const committed = fabric.find(node => node.props.nativeID === PROBE_ID);
+    expect(committed, 'the probed RCTView committed').toBeDefined();
+    // Angular emits a [style] binding as per-key setStyle; the seam folds them into one style
+    // object, then the engine HOISTS style keys to top-level Fabric props (RN's flat C++ props
+    // contract — style is never a nested key on a committed node).
+    expect(committed?.props).toMatchObject({ nativeID: PROBE_ID, padding: 24, opacity: 0.5 });
+  });
+
+  it('resolves addClass tokens through the shared style registry and lets explicit style win', async () => {
+    registerStyles({ card: { padding: 10, backgroundColor: 'red' } });
+    const { surface, renderer } = setup();
+    const view = renderer.createElement('symbiote-view');
+    renderer.setProperty(view, 'nativeID', PROBE_ID);
+    // Ivy compiles class="card highlight" to one addClass call per token, never a single string.
+    renderer.addClass(view, 'card');
+    renderer.addClass(view, 'highlight');
+    renderer.setStyle(view, 'backgroundColor', 'blue');
+    renderer.appendChild(surface, view);
+    await tick();
+
+    const committed = fabric.find(node => node.props.nativeID === PROBE_ID);
+    // padding comes from the class; backgroundColor is explicit style, so it wins over the
+    // class-derived red — same precedence Vue's class="..."/:style="..." merge guarantees.
+    expect(committed?.props).toMatchObject({ padding: 10, backgroundColor: 'blue' });
+  });
+
+  it('removeClass drops a token and recomputes the resolved style', async () => {
+    registerStyles({ card: { padding: 10 }, highlight: { opacity: 0.5 } });
+    const { surface, renderer } = setup();
+    const view = renderer.createElement('symbiote-view');
+    renderer.setProperty(view, 'nativeID', PROBE_ID);
+    renderer.addClass(view, 'card');
+    renderer.addClass(view, 'highlight');
+    renderer.removeClass(view, 'highlight');
+    renderer.appendChild(surface, view);
+    await tick();
+
+    const committed = fabric.find(node => node.props.nativeID === PROBE_ID);
+    expect(committed?.props.padding).toBe(10);
+    expect(committed?.props.opacity).toBeUndefined();
+  });
+
+  it('removeChild detaches a node from the next commit', async () => {
+    const { surface, renderer } = setup();
+    const keep = renderer.createElement('symbiote-view');
+    const drop = renderer.createElement('symbiote-view');
+    renderer.setProperty(drop, 'nativeID', PROBE_ID);
+    renderer.appendChild(surface, keep);
+    renderer.appendChild(surface, drop);
+    await tick();
+    expect(
+      fabric.find(node => node.props.nativeID === PROBE_ID),
+      'present before remove',
+    ).toBeDefined();
+
+    fabric.reset();
+    renderer.removeChild(surface, drop);
+    await tick();
+    expect(
+      fabric.find(node => node.props.nativeID === PROBE_ID),
+      'gone after remove',
+    ).toBeUndefined();
+  });
+
+  it('createComment yields an anchor the commit walk skips but flattens its children', async () => {
+    const { surface, renderer } = setup();
+    const anchor = renderer.createComment();
+    renderer.appendChild(anchor, renderer.createElement('symbiote-view'));
+    renderer.appendChild(surface, anchor);
+    renderer.appendChild(surface, renderer.createElement('symbiote-text'));
+    await tick();
+
+    // The anchor never reaches Fabric; its child keeps the same sibling position. Angular
+    // composed components use this to make their framework host element disappear.
+    const root = fabric.appRoot();
+    expect(fabric.serialize(root.children)).toBe('RCTViewRCTText');
+  });
+
+  it('listen attaches an explicit event listener and the unlisten fn removes it', () => {
+    const { renderer } = setup();
+    const view = renderer.createElement('symbiote-view');
+    expect(isSymbioteNode(view)).toBe(true);
+    if (!isSymbioteNode(view)) throw new Error('unreachable: createElement returns a node');
+
+    const unlisten = renderer.listen(view, 'press', () => {});
+    expect(view.listeners?.has('press'), 'listener attached under the explicit name').toBe(true);
+    unlisten();
+    expect(view.listeners?.has('press'), 'unlisten removed it').toBe(false);
+  });
+
+  it('listen on a global target (window/document) is an inert no-op', () => {
+    const { renderer } = setup();
+    expect(() => renderer.listen('window', 'resize', () => {})()).not.toThrow();
+  });
+
+  // App/third-party selectors must not be hardcoded into ANCHOR_HOST_COMPONENTS — the owning
+  // package registers itself via registerComposedComponent, same as an adapter-owned composed
+  // component. 'RefApiDemo' names examples/angular's demo component; this test never imports
+  // it, it only proves the renderer treats an unregistered selector as a raw Fabric view name,
+  // not a hardcoded anchor host. MUST run before the registration test below, since
+  // registerComposedComponent mutates the module-level Set for the rest of the file.
+  it('does not anchor-host an app-owned selector unless it self-registers', () => {
+    const { renderer } = setup();
+    const node = renderer.createElement('RefApiDemo');
+    if (!isSymbioteNode(node)) throw new Error('unreachable: createElement returns a node');
+    expect(isAnchor(node), 'falls through to a raw Fabric view, not an anchor').toBe(false);
+    expect(node.component).toBe('RefApiDemo');
+  });
+
+  it('anchor-hosts an app-owned selector once it self-registers via registerComposedComponent', () => {
+    registerComposedComponent('RefApiDemo');
+    const { renderer } = setup();
+    const node = renderer.createElement('RefApiDemo');
+    if (!isSymbioteNode(node)) throw new Error('unreachable: createElement returns a node');
+    expect(isAnchor(node)).toBe(true);
+  });
+});

package/src/services/color-scheme.service.ts

@@ -0,0 +1,27 @@
+import { DestroyRef, inject, Injectable, signal } from '@angular/core';
+import { Appearance, type IColorSchemeName } from '@symbiote-native/engine';
+
+/**
+ * Angular twin of React's `useColorScheme` and Vue's `useColorScheme` composable. The service
+ * holds a Signal that tracks the device color scheme; consumers read it via `inject`:
+ *
+ *   readonly colorScheme = inject(ColorSchemeService).colorScheme;
+ *
+ * State and lifecycle live in DI, not in a function closure.
+ */
+@Injectable({ providedIn: 'root' })
+export class ColorSchemeService {
+  readonly colorScheme = signal<IColorSchemeName | null>(Appearance.getColorScheme());
+
+  constructor() {
+    const destroyRef = inject(DestroyRef);
+
+    const subscription = Appearance.addChangeListener(preferences => {
+      this.colorScheme.set(preferences.colorScheme);
+    });
+
+    destroyRef.onDestroy(() => {
+      subscription.remove();
+    });
+  }
+}

package/src/services/index.ts

@@ -0,0 +1,2 @@
+export { ColorSchemeService } from './color-scheme.service';
+export { WindowDimensionsService } from './window-dimensions.service';

package/src/services/services.test.ts

@@ -0,0 +1,163 @@
+import '@angular/compiler';
+import { Component, inject } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Appearance, Dimensions } from '@symbiote-native/engine';
+import { installFabric } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../render';
+import { ColorSchemeService } from './color-scheme.service';
+import { WindowDimensionsService } from './window-dimensions.service';
+
+const ROOT_TAG = 900;
+const fabric = installFabric();
+
+let capturedColorSchemeService: ColorSchemeService | undefined;
+let capturedWindowDimensionsService: WindowDimensionsService | undefined;
+
+@Component({
+  selector: 'symbiote-color-scheme-consumer',
+  standalone: true,
+  providers: [ColorSchemeService],
+  template: '',
+})
+class ColorSchemeConsumer {
+  readonly service = inject(ColorSchemeService);
+  constructor() {
+    capturedColorSchemeService = this.service;
+  }
+}
+
+@Component({
+  selector: 'symbiote-window-dimensions-consumer',
+  standalone: true,
+  providers: [WindowDimensionsService],
+  template: '',
+})
+class WindowDimensionsConsumer {
+  readonly service = inject(WindowDimensionsService);
+  constructor() {
+    capturedWindowDimensionsService = this.service;
+  }
+}
+
+@Component({
+  selector: 'symbiote-root-window-dimensions-consumer',
+  standalone: true,
+  template: '',
+})
+class RootWindowDimensionsConsumer {
+  readonly service = inject(WindowDimensionsService);
+  constructor() {
+    capturedWindowDimensionsService = this.service;
+  }
+}
+
+beforeEach(() => {
+  capturedColorSchemeService = undefined;
+  capturedWindowDimensionsService = undefined;
+});
+
+afterEach(() => {
+  unmount(ROOT_TAG);
+  fabric.reset();
+  vi.restoreAllMocks();
+});
+
+describe('Angular DI services over engine modules', () => {
+  it('ColorSchemeService subscribes to Appearance and cleans up on unmount', async () => {
+    type IGenericListener = (...args: unknown[]) => void;
+    const activeListeners = new Set<IGenericListener>();
+    let emitToListeners: (preferences: { colorScheme: 'light' | 'dark' | null }) => void = () => {};
+
+    vi.spyOn(Appearance, 'getColorScheme').mockReturnValue('light');
+    vi.spyOn(Appearance, 'addChangeListener').mockImplementation(listener => {
+      activeListeners.add(listener as IGenericListener);
+      emitToListeners = preferences => {
+        for (const l of activeListeners) l(preferences);
+      };
+      return {
+        remove: () => {
+          activeListeners.delete(listener as IGenericListener);
+        },
+      };
+    });
+
+    mount(ROOT_TAG, ColorSchemeConsumer);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const service = capturedColorSchemeService;
+    if (!service) throw new Error('ColorSchemeService was not captured');
+
+    expect(service.colorScheme()).toBe('light');
+    expect(Appearance.addChangeListener).toHaveBeenCalledOnce();
+
+    emitToListeners({ colorScheme: 'dark' });
+    expect(service.colorScheme()).toBe('dark');
+
+    emitToListeners({ colorScheme: 'light' });
+    expect(service.colorScheme()).toBe('light');
+
+    unmount(ROOT_TAG);
+    expect(activeListeners.size).toBe(0);
+
+    // After unmount, the signal must stop reacting to further events.
+    emitToListeners({ colorScheme: 'dark' });
+    expect(service.colorScheme()).toBe('light');
+  });
+
+  it('provides WindowDimensionsService from the Symbiote root injector', async () => {
+    const initialMetrics = { width: 100, height: 200, scale: 1, fontScale: 1 };
+    vi.spyOn(Dimensions, 'get').mockReturnValue(initialMetrics);
+    vi.spyOn(Dimensions, 'addEventListener').mockReturnValue({ remove: vi.fn() });
+
+    mount(ROOT_TAG, RootWindowDimensionsConsumer);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    expect(capturedWindowDimensionsService?.dimensions()).toEqual(initialMetrics);
+  });
+
+  it('WindowDimensionsService subscribes to Dimensions and ignores no-op updates', async () => {
+    const remove = vi.fn();
+    let capturedListener:
+      | ((set: {
+          window: { width: number; height: number; scale: number; fontScale: number };
+          screen: { width: number; height: number; scale: number; fontScale: number };
+        }) => void)
+      | undefined;
+
+    const initialMetrics = { width: 100, height: 200, scale: 1, fontScale: 1 };
+    vi.spyOn(Dimensions, 'get').mockReturnValue(initialMetrics);
+    vi.spyOn(Dimensions, 'addEventListener').mockImplementation((_type, listener) => {
+      capturedListener = set =>
+        listener(set as { window: typeof initialMetrics; screen: typeof initialMetrics });
+      return { remove };
+    });
+
+    mount(ROOT_TAG, WindowDimensionsConsumer);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const service = capturedWindowDimensionsService;
+    if (!service) throw new Error('WindowDimensionsService was not captured');
+
+    const initial = service.dimensions();
+    expect(initial).toEqual(initialMetrics);
+    expect(Dimensions.addEventListener).toHaveBeenCalledOnce();
+
+    // Same metrics: signal identity must be preserved (equality guard).
+    capturedListener?.({
+      window: { width: 100, height: 200, scale: 1, fontScale: 1 },
+      screen: { width: 100, height: 200, scale: 1, fontScale: 1 },
+    });
+    expect(service.dimensions()).toBe(initial);
+
+    // Different metrics: signal updates.
+    capturedListener?.({
+      window: { width: 300, height: 400, scale: 2, fontScale: 2 },
+      screen: { width: 300, height: 400, scale: 2, fontScale: 2 },
+    });
+    expect(service.dimensions()).toEqual({ width: 300, height: 400, scale: 2, fontScale: 2 });
+
+    unmount(ROOT_TAG);
+    expect(remove).toHaveBeenCalledOnce();
+  });
+});

package/src/services/window-dimensions.service.ts

@@ -0,0 +1,41 @@
+import { DestroyRef, inject, Injectable, signal } from '@angular/core';
+import { Dimensions, type IDimensionsSet, type IDisplayMetrics } from '@symbiote-native/engine';
+
+/**
+ * Angular twin of React's `useWindowDimensions` and Vue's `useWindowDimensions` composable. The
+ * service holds a Signal that tracks window metrics; consumers read it via `inject`:
+ *
+ *   readonly dimensions = inject(WindowDimensionsService).dimensions;
+ *
+ * State and lifecycle live in DI, not in a function closure.
+ */
+@Injectable({ providedIn: 'root' })
+export class WindowDimensionsService {
+  readonly dimensions = signal<IDisplayMetrics>(Dimensions.get('window'));
+
+  constructor() {
+    const destroyRef = inject(DestroyRef);
+
+    const handleChange = (window: IDisplayMetrics): void => {
+      const current = this.dimensions();
+      if (
+        current.width !== window.width ||
+        current.height !== window.height ||
+        current.scale !== window.scale ||
+        current.fontScale !== window.fontScale
+      ) {
+        this.dimensions.set(window);
+      }
+    };
+
+    const subscription = Dimensions.addEventListener('change', (set: IDimensionsSet) => {
+      handleChange(set.window);
+    });
+    // Re-check once after subscribing to close the gap between construction and the listener.
+    handleChange(Dimensions.get('window'));
+
+    destroyRef.onDestroy(() => {
+      subscription.remove();
+    });
+  }
+}

package/tsconfig.angular.base.json

@@ -0,0 +1,30 @@
+{
+  // The original (pre-packaging) example config chain was tsconfig.angular.json → ./tsconfig.json
+  // → @react-native/typescript-config, with tsconfig.angular.json's own compilerOptions (target,
+  // module, noEmit, moduleResolution, allowImportingTsExtensions, types below) overriding the RN
+  // config's conflicting esnext/noEmit:true/jsx settings. Extending it here reproduces that same
+  // precedence for every consumer, not just this repo's examples — a plain Angular+RN app expects
+  // its Angular tsconfig to inherit the RN TS baseline the same way.
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": false,
+    "allowImportingTsExtensions": false,
+    "declaration": false,
+    "sourceMap": true,
+    "lib": ["ES2022", "DOM"],
+    "types": ["node"],
+    "ignoreDeprecations": "6.0",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial",
+    "strictTemplates": true
+  }
+}