@ccheever/exact-renderer 0.1.0

package/src/__tests__/dom-shim.test.ts

@@ -0,0 +1,274 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  emptyKeyboardState,
+  freezeDisplay,
+  freezeInsets,
+  freezePosition,
+  freezeSafeAreaRegions,
+  freezeSize,
+  notifySnapshotListeners,
+  resetWindowStateStoreForTests,
+  setRootWindowId,
+  setWindowSnapshot,
+} from '@exact/core';
+
+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 { createExactDOM } from '../dom-shim.js';
+
+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 getFirstElement(rootId: number = 0): ElementNode {
+  const root = getRootNode(rootId);
+  expect(root).not.toBeNull();
+  expect(root?.children[0]?.kind).toBe(NodeKind.Element);
+
+  const child = root?.children[0];
+  if (!child || child.kind !== NodeKind.Element) {
+    throw new Error(`Expected root ${rootId} to have an element child.`);
+  }
+
+  return child;
+}
+
+function setRootViewport(rootId: number, width: number, height: number): void {
+  const windowId = `window-${rootId}`;
+  const size = freezeSize({ width, height });
+  setRootWindowId(rootId, windowId);
+  setWindowSnapshot(windowId, {
+    size,
+    position: freezePosition({ x: 0, y: 0 }),
+    state: 'normal',
+    isFocused: true,
+    isVisible: true,
+    display: freezeDisplay({
+      id: windowId,
+      size,
+      workArea: {
+        x: 0,
+        y: 0,
+        width,
+        height,
+      },
+      scaleFactor: 1,
+    }),
+    safeAreaInsets: freezeInsets({ top: 0, right: 0, bottom: 0, left: 0 }),
+    safeAreaRegions: freezeSafeAreaRegions({
+      container: { top: 0, right: 0, bottom: 0, left: 0 },
+      displayCutout: { top: 0, right: 0, bottom: 0, left: 0 },
+      gestures: { top: 0, right: 0, bottom: 0, left: 0 },
+    }),
+    keyboardState: emptyKeyboardState(),
+    devicePixelRatio: 1,
+  });
+  notifySnapshotListeners(windowId);
+}
+
+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();
+  resetWindowStateStoreForTests();
+});
+
+afterEach(() => {
+  const globals = globalThis as typeof globalThis & ExactGlobals;
+  delete globals.exact;
+
+  _clearHandlers();
+  _resetNodeIdCounter();
+  _resetHostOpsState();
+  _resetInspectorState();
+  resetWindowStateStoreForTests();
+});
+
+describe('Exact DOM shim', () => {
+  it('supports DOM-style reparenting and fragment insertion', async () => {
+    const dom = createExactDOM();
+    const first = dom.document.createElement('div');
+    const second = dom.document.createElement('div');
+    const label = dom.document.createTextNode('payload');
+    const fragment = dom.document.createDocumentFragment();
+
+    fragment.appendChild(first);
+    fragment.appendChild(second);
+    dom.document.body.appendChild(fragment);
+    second.appendChild(label);
+
+    expect(fragment.childNodes).toHaveLength(0);
+    expect(dom.document.body.childNodes).toHaveLength(2);
+    expect(label.parentNode).toBe(second);
+
+    first.appendChild(label);
+
+    expect(label.parentNode).toBe(first);
+    expect(first.textContent).toBe('payload');
+    expect(second.textContent).toBe('');
+
+    await flushMicrotasks();
+    dom.destroy();
+  });
+
+  it('coalesces class, style, and reflected props into the committed host node', async () => {
+    const dom = createExactDOM();
+    const element = dom.document.createElement('div');
+
+    dom.document.body.appendChild(element);
+    element.classList.add('card', 'primary');
+    element.style.cssText = 'padding-top: 12px; background-color: #123456;';
+    element.tabIndex = 4;
+    element.hidden = true;
+
+    await flushMicrotasks();
+
+    const host = getFirstElement();
+    expect(host.originalProps.className).toBe('card primary');
+    expect(host.originalProps.tabIndex).toBe(4);
+    expect(host.originalProps.hidden).toBe(true);
+    expect((host.originalProps.style as Record<string, unknown>).paddingTop).toBe('12px');
+    expect((host.originalProps.style as Record<string, unknown>).backgroundColor).toBe('#123456');
+
+    dom.destroy();
+  });
+
+  it('promotes checkbox inputs to toggles and syncs checked state from change payloads', async () => {
+    const dom = createExactDOM();
+    const input = dom.document.createElement('input');
+    const events: Array<boolean> = [];
+
+    input.setAttribute('type', 'checkbox');
+    input.addEventListener('change', (event) => {
+      events.push((event.target as typeof input).checked);
+    });
+
+    dom.document.body.appendChild(input);
+    await flushMicrotasks();
+
+    const host = getFirstElement();
+    expect(host.tagType).toBe('toggle');
+
+    dispatchSyntheticEvent(host, EventType.Change, {
+      nativeEvent: {
+        value: true,
+      },
+    });
+
+    expect(input.checked).toBe(true);
+    expect(events).toEqual([true]);
+
+    dom.destroy();
+  });
+
+  it('throws when a node is moved across DOM roots', () => {
+    const domA = createExactDOM({ rootId: 1 });
+    const domB = createExactDOM({ rootId: 2 });
+    const child = domA.document.createElement('div');
+
+    expect(() => {
+      domB.document.body.appendChild(child);
+    }).toThrow(/different DOM roots/);
+
+    domA.destroy();
+    domB.destroy();
+  });
+
+  it('fires resize listeners only when the root viewport dimensions change', async () => {
+    setRootViewport(3, 320, 640);
+    const dom = createExactDOM({ rootId: 3 });
+    const listener = vi.fn();
+
+    dom.window.addEventListener('resize', listener);
+
+    const windowId = 'window-3';
+    const current = freezeSize({ width: 320, height: 640 });
+    setWindowSnapshot(windowId, {
+      size: current,
+      position: freezePosition({ x: 0, y: 0 }),
+      state: 'normal',
+      isFocused: true,
+      isVisible: true,
+      display: freezeDisplay({
+        id: windowId,
+        size: current,
+        workArea: {
+          x: 0,
+          y: 0,
+          width: 320,
+          height: 640,
+        },
+        scaleFactor: 1,
+      }),
+      safeAreaInsets: freezeInsets({ top: 12, right: 0, bottom: 0, left: 0 }),
+      safeAreaRegions: freezeSafeAreaRegions({
+        container: { top: 12, right: 0, bottom: 0, left: 0 },
+        displayCutout: { top: 0, right: 0, bottom: 0, left: 0 },
+        gestures: { top: 0, right: 0, bottom: 0, left: 0 },
+      }),
+      keyboardState: emptyKeyboardState(),
+      devicePixelRatio: 1,
+    });
+    notifySnapshotListeners(windowId);
+    await flushMicrotasks();
+
+    expect(listener).not.toHaveBeenCalled();
+
+    setRootViewport(3, 400, 700);
+    await flushMicrotasks();
+
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(dom.window.innerWidth).toBe(400);
+    expect(dom.window.innerHeight).toBe(700);
+
+    dom.destroy();
+  });
+
+  it('prevents queued dirty work from flushing after destroy()', async () => {
+    const dom = createExactDOM({ rootId: 4 });
+    const element = dom.document.createElement('div');
+
+    dom.document.body.appendChild(element);
+    element.setExactProp('hidden', true);
+    dom.destroy();
+
+    await flushMicrotasks();
+    expect(getRootNode(4)).toBeNull();
+  });
+});

package/src/__tests__/fixtures/SvelteCounter.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  let count = $state(0);
+</script>
+
+<button on:click={() => count += 1}>
+  Count {count}
+</button>

package/src/__tests__/fixtures/SvelteInput.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  let value = $state('hi');
+</script>
+
+<div>
+  <input bind:value />
+  <p>{value}</p>
+</div>

package/src/__tests__/host-config.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'bun:test';
+
+import { hostConfig } from '../host-config.js';
+import { createInstance } from '../host-ops.js';
+
+describe('hostConfig.shouldSetTextContent', () => {
+  it('treats text-only Text children as parent text content', () => {
+    expect(hostConfig.shouldSetTextContent('Text', { children: 'Hello' })).toBe(true);
+    expect(hostConfig.shouldSetTextContent('Text', { children: ['Build ', 42] })).toBe(true);
+  });
+
+  it('does not flatten non-text children into parent text content', () => {
+    expect(
+      hostConfig.shouldSetTextContent('Text', {
+        children: [{ type: 'View', props: {} }],
+      })
+    ).toBe(false);
+  });
+
+  it('does not flatten non-text-container elements', () => {
+    expect(hostConfig.shouldSetTextContent('View', { children: 'Hello' })).toBe(false);
+  });
+});
+
+describe('hostConfig.commitUpdate', () => {
+  it('has no prepareUpdate (removed in react-reconciler 0.33)', () => {
+    expect(hostConfig.prepareUpdate).toBeUndefined();
+  });
+
+  it('applies new props through the 0.33 five-param signature', () => {
+    const instance = createInstance('Pressable', {
+      onPress: () => 'initial',
+    });
+    const nextProps = {
+      onPress: () => 'updated',
+      testId: 'pressable-updated',
+    };
+
+    // react-reconciler 0.33 calls commitUpdate(instance, type, oldProps, newProps, fiber)
+    hostConfig.commitUpdate(
+      instance,
+      'Pressable',
+      instance.originalProps,
+      nextProps,
+      {} as never
+    );
+
+    expect(instance.originalProps).toBe(nextProps);
+    expect(instance.props.testId).toBe('pressable-updated');
+  });
+});