@ccheever/exact-renderer 0.1.0

package/src/__tests__/protocol-fixture-bytes.test.ts

@@ -0,0 +1,41 @@
+// @tactical @ref LLP 0150 idea 1 — TS encoder vs kernel conformance-fixture byte parity.
+//
+// The kernel's CommandBufferBuilder generates the committed binary fixture
+// tests/protocol/fixtures/multi-root-batch-v3.bin (regenerated with
+// `EXACT_REGEN_PROTOCOL_FIXTURES=1 cargo test -p exact-kernel -- protocol_fixture`).
+// This test encodes the same logical ops through the TS BufferWriter — the
+// byte-emitting core under packages/exact-renderer/src/protocol/encoder.ts —
+// and asserts the output is byte-for-byte identical. If this fails, either
+// the TS encoder or the Rust builder changed the wire encoding: treat it as
+// an ABI change and reconcile both sides before regenerating the fixture.
+import { describe, expect, it } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { BufferWriter } from '../../../exact-core/src/protocol/buffer-writer.js';
+import { NodeType, PropId } from '../../../exact-core/src/protocol/opcodes.js';
+
+const repoRoot = join(dirname(fileURLToPath(import.meta.url)), '..', '..', '..', '..');
+const fixturePath = join(repoRoot, 'tests', 'protocol', 'fixtures', 'multi-root-batch-v3.bin');
+
+describe('protocol fixture byte parity (LLP 0150 idea 1)', () => {
+  it('BufferWriter reproduces multi-root-batch-v3.bin byte-for-byte', () => {
+    const expected = new Uint8Array(readFileSync(fixturePath));
+
+    // Same logical ops as build_multi_root_batch_v3_fixture() in
+    // kernel/src/protocol/mod.rs: sequence 1, root 42, v3 header.
+    const writer = new BufferWriter(1024, 1, 42);
+    writer.createView(1, NodeType.View);
+    writer.createView(2, NodeType.Text);
+    writer.createView(3, NodeType.View);
+    writer.setPropString(2, PropId.TextContent, 'hello exact');
+    writer.setStyleSize(1, 320, 200);
+    writer.setChildren(1, [2, 3]);
+    writer.computeLayout(1, 320, 200);
+    const actual = new Uint8Array(writer.build());
+
+    expect(actual.length).toBe(expected.length);
+    expect(Array.from(actual)).toEqual(Array.from(expected));
+  });
+});

package/src/__tests__/reconciler.test.tsx

@@ -0,0 +1,241 @@
+import React, { act } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { Pressable, Text } from '../components.js';
+import { _clearHandlers } from '../host-config.js';
+import { EventType } from '../host-ops.js';
+import { NodeKind, _resetNodeIdCounter } from '../nodes/index.js';
+import {
+  _getRootContainer,
+  prepareForBundleReplacement,
+  render,
+  reset,
+} from '../reconciler.js';
+
+interface ExactRuntimeMock {
+  dispatch: ReturnType<typeof vi.fn>;
+  screenWidth: number;
+  screenHeight: number;
+}
+
+interface ExactGlobals {
+  exact?: ExactRuntimeMock;
+  __exactDispatchEvent?: (handlerId: number, payload: unknown) => void;
+  __exactViewportChanged?: (width?: number, height?: number) => void;
+  IS_REACT_ACT_ENVIRONMENT?: boolean;
+}
+
+function getTextElement(): {
+  kind: NodeKind.Element;
+  props: Record<string, unknown>;
+} {
+  const root = _getRootContainer();
+  expect(root).not.toBeNull();
+
+  const child = root!.children[0];
+  expect(child).toBeDefined();
+  expect(child?.kind).toBe(NodeKind.Element);
+
+  if (!child || child.kind !== NodeKind.Element) {
+    throw new Error('Expected root child to be an element.');
+  }
+
+  return child;
+}
+
+function getPressableBindingHandlerId(): number {
+  const root = _getRootContainer();
+  expect(root).not.toBeNull();
+
+  const child = root!.children[0];
+  expect(child).toBeDefined();
+  expect(child?.kind).toBe(NodeKind.Element);
+
+  if (!child || child.kind !== NodeKind.Element) {
+    throw new Error('Expected root child to be a Pressable element.');
+  }
+
+  const binding = child.events.get(EventType.Press);
+  expect(binding).toBeDefined();
+
+  return binding!.handlerId;
+}
+
+function getNestedTextContent(): string | undefined {
+  const root = _getRootContainer();
+  expect(root).not.toBeNull();
+
+  const pressable = root!.children[0];
+  expect(pressable).toBeDefined();
+  expect(pressable?.kind).toBe(NodeKind.Element);
+
+  if (!pressable || pressable.kind !== NodeKind.Element) {
+    throw new Error('Expected root child to be a Pressable element.');
+  }
+
+  const text = pressable.children[0];
+  expect(text).toBeDefined();
+  expect(text?.kind).toBe(NodeKind.Element);
+
+  if (!text || text.kind !== NodeKind.Element) {
+    throw new Error('Expected Pressable child to be a Text element.');
+  }
+
+  return text.props.textContent as string | undefined;
+}
+
+describe('reconciler commit flushing', () => {
+  let dispatch: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    dispatch = vi.fn();
+
+    const globals = globalThis as typeof globalThis & ExactGlobals;
+    globals.IS_REACT_ACT_ENVIRONMENT = true;
+    globals.exact = {
+      dispatch,
+      screenWidth: 393,
+      screenHeight: 852,
+    };
+
+    _resetNodeIdCounter();
+    _clearHandlers();
+    reset();
+  });
+
+  afterEach(() => {
+    reset();
+    _clearHandlers();
+    _resetNodeIdCounter();
+    vi.useRealTimers();
+
+    const globals = globalThis as typeof globalThis & ExactGlobals;
+    delete globals.exact;
+    delete globals.IS_REACT_ACT_ENVIRONMENT;
+  });
+
+  it('dispatches a fresh native commit for timer-driven state updates', async () => {
+    function TimerCounter(): React.ReactElement {
+      const [label, setLabel] = React.useState('initial');
+
+      React.useEffect(() => {
+        const timeoutId = setTimeout(() => {
+          setLabel('updated');
+        }, 10);
+
+        return () => clearTimeout(timeoutId);
+      }, []);
+
+      return <Text>{label}</Text>;
+    }
+
+    await act(async () => {
+      render(<TimerCounter />);
+    });
+
+    expect(dispatch).toHaveBeenCalledTimes(1);
+    expect(getTextElement().props.textContent).toBe('initial');
+
+    await act(async () => {
+      vi.advanceTimersByTime(10);
+    });
+
+    expect(dispatch).toHaveBeenCalledTimes(2);
+    expect(getTextElement().props.textContent).toBe('updated');
+  });
+
+  it('dispatches a fresh native commit for state updates from native press events', async () => {
+    function PressCounter(): React.ReactElement {
+      const [count, setCount] = React.useState(0);
+
+      return (
+        <Pressable onPress={() => setCount((value) => value + 1)}>
+          <Text>{`Count: ${count}`}</Text>
+        </Pressable>
+      );
+    }
+
+    await act(async () => {
+      render(<PressCounter />);
+    });
+
+    expect(dispatch).toHaveBeenCalledTimes(1);
+    expect(getNestedTextContent()).toBe('Count: 0');
+
+    const globals = globalThis as typeof globalThis & ExactGlobals;
+    const dispatchEvent = globals.__exactDispatchEvent;
+    expect(dispatchEvent).toBeTypeOf('function');
+
+    await act(async () => {
+      dispatchEvent!(getPressableBindingHandlerId(), {
+        nativeEvent: {
+          timestamp: Date.now(),
+        },
+      });
+    });
+
+    expect(dispatch).toHaveBeenCalledTimes(2);
+    expect(getNestedTextContent()).toBe('Count: 1');
+  });
+
+  it('batches multiple React updates from one native event into one native commit', async () => {
+    function PressCounter(): React.ReactElement {
+      const [count, setCount] = React.useState(0);
+      const [armed, setArmed] = React.useState(false);
+
+      return (
+        <Pressable
+          onPress={() => {
+            setCount((value) => value + 1);
+            setArmed((value) => !value);
+          }}
+        >
+          <Text>{`Count: ${count} ${armed ? 'armed' : 'idle'}`}</Text>
+        </Pressable>
+      );
+    }
+
+    await act(async () => {
+      render(<PressCounter />);
+    });
+
+    expect(dispatch).toHaveBeenCalledTimes(1);
+
+    const globals = globalThis as typeof globalThis & ExactGlobals;
+    const dispatchEvent = globals.__exactDispatchEvent;
+    expect(dispatchEvent).toBeTypeOf('function');
+
+    await act(async () => {
+      dispatchEvent!(getPressableBindingHandlerId(), {
+        nativeEvent: {
+          timestamp: Date.now(),
+        },
+      });
+    });
+
+    expect(dispatch).toHaveBeenCalledTimes(2);
+    expect(getNestedTextContent()).toBe('Count: 1 armed');
+  });
+
+  it('clears renderer state for bundle replacement without sending a teardown batch', async () => {
+    await act(async () => {
+      render(<Text>first</Text>);
+    });
+
+    expect(dispatch).toHaveBeenCalledTimes(1);
+    expect(getTextElement().props.textContent).toBe('first');
+
+    prepareForBundleReplacement();
+
+    expect(dispatch).toHaveBeenCalledTimes(1);
+    expect(_getRootContainer()).toBeNull();
+
+    await act(async () => {
+      render(<Text>second</Text>);
+    });
+
+    expect(dispatch).toHaveBeenCalledTimes(2);
+    expect(getTextElement().props.textContent).toBe('second');
+  });
+});

package/src/__tests__/svelte-adapter.test.ts

@@ -0,0 +1,166 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { getRootNode } from '../inspector.js';
+import { _resetNodeIdCounter, NodeKind, type ElementNode } from '../nodes/index.js';
+import { EventType, dispatchSyntheticEvent } from '../host-ops.js';
+import { _clearHandlers } from '../host-config.js';
+import { _resetHostOpsState } from '../host-ops.js';
+import { _resetInspectorState } from '../inspector.js';
+import { flushSync, mount, reset } from '../svelte.js';
+
+import Counter from './fixtures/SvelteCounter.svelte';
+import Input from './fixtures/SvelteInput.svelte';
+
+interface ExactRuntimeMock {
+  dispatch: ReturnType<typeof vi.fn>;
+  screenWidth: number;
+  screenHeight: number;
+  screenScale?: number;
+  safeAreaInsets?: {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
+}
+
+interface ExactGlobals {
+  exact?: ExactRuntimeMock;
+}
+
+function flushMicrotasks(): Promise<void> {
+  return Promise.resolve().then(() => Promise.resolve());
+}
+
+function getElementByTag(rootId: number, tagType: string): ElementNode {
+  const root = getRootNode(rootId);
+  expect(root).not.toBeNull();
+
+  const find = (nodes: ElementNode['children']): ElementNode | null => {
+    for (const child of nodes) {
+      if (child.kind !== NodeKind.Element) {
+        continue;
+      }
+      if (child.originalTag === tagType) {
+        return child;
+      }
+
+      const nested = find(child.children);
+      if (nested) {
+        return nested;
+      }
+    }
+
+    return null;
+  };
+
+  const match = find(root?.children ?? []);
+  if (!match) {
+    throw new Error(`Expected root ${rootId} to contain <${tagType}>.`);
+  }
+
+  return match;
+}
+
+function getTextContent(rootId: number = 0): string {
+  const root = getRootNode(rootId);
+  expect(root).not.toBeNull();
+
+  const collect = (node: ElementNode): string =>
+    node.children
+      .map((child) => {
+        if (child.kind === NodeKind.Text) {
+          return child.text;
+        }
+        if (child.kind === NodeKind.Element) {
+          return collect(child);
+        }
+        return '';
+      })
+      .join('');
+
+  const firstElement = root?.children.find(
+    (child): child is ElementNode => child.kind === NodeKind.Element,
+  );
+
+  if (!firstElement) {
+    return '';
+  }
+
+  return collect(firstElement);
+}
+
+beforeEach(() => {
+  const globals = globalThis as typeof globalThis & ExactGlobals;
+  globals.exact = {
+    dispatch: vi.fn(),
+    screenWidth: 393,
+    screenHeight: 852,
+    screenScale: 2,
+    safeAreaInsets: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+  };
+
+  _resetNodeIdCounter();
+  _clearHandlers();
+  _resetHostOpsState();
+  _resetInspectorState();
+});
+
+afterEach(async () => {
+  await reset();
+
+  const globals = globalThis as typeof globalThis & ExactGlobals;
+  delete globals.exact;
+
+  _clearHandlers();
+  _resetNodeIdCounter();
+  _resetHostOpsState();
+  _resetInspectorState();
+});
+
+describe('Exact Svelte adapter', () => {
+  it('mounts a real Svelte component and handles direct click listeners', async () => {
+    mount(Counter);
+    await flushMicrotasks();
+
+    expect(getTextContent()).toContain('Count 0');
+
+    const button = getElementByTag(0, 'button');
+    dispatchSyntheticEvent(button, EventType.Press, {
+      nativeEvent: {
+        locationX: 0,
+        locationY: 0,
+        timestamp: Date.now(),
+      },
+    });
+
+    flushSync();
+    await flushMicrotasks();
+
+    expect(getTextContent()).toContain('Count 1');
+  });
+
+  it('supports bind:value through the DOM shim input event translation', async () => {
+    mount(Input);
+    await flushMicrotasks();
+
+    expect(getTextContent()).toContain('hi');
+
+    const input = getElementByTag(0, 'input');
+    dispatchSyntheticEvent(input, EventType.Change, {
+      nativeEvent: {
+        text: 'updated',
+      },
+    });
+
+    flushSync();
+    await flushMicrotasks();
+
+    expect(getTextContent()).toContain('updated');
+  });
+});

package/src/__tests__/svg-source.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest';
+
+import { asset } from '../../../exact-core/src/assets-fonts-state.js';
+import {
+  coerceImageSourceToSvgSource,
+  filterSvgColors,
+  isInlineSvgSource,
+  resolveSvgSourceForFetch,
+  resolveSvgSourceForNative,
+} from '../svg-source.js';
+
+describe('svg source helpers', () => {
+  it('detects inline SVG markup', () => {
+    expect(isInlineSvgSource('<svg viewBox="0 0 24 24"></svg>')).toBe(true);
+    expect(isInlineSvgSource('<?xml version="1.0"?><svg></svg>')).toBe(true);
+    expect(isInlineSvgSource('https://example.com/icon.svg')).toBe(false);
+  });
+
+  it('decodes data URL SVG markup for fetch-backed rendering', () => {
+    const resolved = resolveSvgSourceForFetch('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%2F%3E');
+    expect(resolved).toEqual({
+      markup: '<svg viewBox="0 0 24 24"/>',
+    });
+  });
+
+  it('wraps inline SVG markup as a data URI for the native image pipeline', () => {
+    const native = resolveSvgSourceForNative('<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/></svg>');
+    expect(native).toBe(
+      'data:image/svg+xml,' +
+        encodeURIComponent('<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/></svg>'),
+    );
+    // Round-trips back to the original markup through the fetch resolver.
+    expect(resolveSvgSourceForFetch(native!)).toEqual({
+      markup: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/></svg>',
+    });
+  });
+
+  it('passes URL / asset / data SVG sources through to native unchanged', () => {
+    expect(resolveSvgSourceForNative('https://cdn.example.com/icon.svg')).toBe(
+      'https://cdn.example.com/icon.svg',
+    );
+    expect(resolveSvgSourceForNative({ uri: 'https://cdn.example.com/icon.svg' })).toBe(
+      'https://cdn.example.com/icon.svg',
+    );
+    expect(resolveSvgSourceForNative('data:image/svg+xml,%3Csvg%2F%3E')).toBe(
+      'data:image/svg+xml,%3Csvg%2F%3E',
+    );
+    expect(resolveSvgSourceForNative(undefined)).toBeUndefined();
+    expect(resolveSvgSourceForNative('')).toBeUndefined();
+  });
+
+  it('filters color overrides to CSS custom properties', () => {
+    expect(filterSvgColors({
+      '--primary': '#007aff',
+      fill: '#111111',
+    })).toEqual({
+      '--primary': '#007aff',
+    });
+  });
+
+  it('coerces SVG-like image sources for auto-delegation', () => {
+    expect(coerceImageSourceToSvgSource('https://cdn.example.com/icon.svg')).toBe('https://cdn.example.com/icon.svg');
+    expect(coerceImageSourceToSvgSource(asset('./icons/logo.svg'))).toEqual(asset('./icons/logo.svg'));
+    expect(coerceImageSourceToSvgSource([
+      { uri: 'https://cdn.example.com/hero.svg', type: 'image/svg+xml' },
+      { uri: 'https://cdn.example.com/hero@2x.svg', type: 'image/svg+xml' },
+    ])).toEqual({ uri: 'https://cdn.example.com/hero.svg', headers: undefined, cacheKey: undefined });
+    expect(coerceImageSourceToSvgSource({ thumbhash: 'abc123' })).toBeUndefined();
+    expect(coerceImageSourceToSvgSource('https://cdn.example.com/photo.png')).toBeUndefined();
+  });
+});