@ccheever/exact-renderer 0.1.0

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

@@ -0,0 +1,135 @@
+import { afterEach, describe, expect, it } from 'vitest';
+
+import {
+  resolveThemeAwareImageSource,
+  resolveImageSourceForDOM,
+  resolveImageSourceForNative,
+  thumbhashStringToDataUrl,
+} from '../image-source.js';
+import {
+  resolveImageSourceForNative as resolveImageSourceForNativeRuntime,
+  thumbhashStringToDataUrl as thumbhashStringToDataUrlNativeRuntime,
+} from '../image-source.native.js';
+
+describe('image-source DOM ThumbHash', () => {
+  it('decodes a known demo ThumbHash to a PNG data URL', () => {
+    const url = thumbhashStringToDataUrl('3OcRJYB4d3h/iIeHeEh3eIhw+j3A');
+    expect(url).toMatch(/^data:image\/png;base64,/);
+  });
+
+  it('resolves ThumbHash objects for the DOM path', () => {
+    const resolved = resolveImageSourceForDOM({
+      thumbhash: '3OcRJYB4d3h/iIeHeEh3eIhw+j3A',
+    });
+    expect(resolved?.src).toMatch(/^data:image\/png;base64,/);
+    expect(resolved?.pictureSources).toEqual([]);
+  });
+
+  it('resolves ThumbHash objects for the native path to a data URL', () => {
+    const resolved = resolveImageSourceForNative({
+      thumbhash: '3OcRJYB4d3h/iIeHeEh3eIhw+j3A',
+    });
+    expect(resolved).toMatch(/^data:image\/png;base64,/);
+  });
+
+  it('keeps the native startup decoder byte-compatible with the shared helper', () => {
+    const thumbhash = '3OcRJYB4d3h/iIeHeEh3eIhw+j3A';
+    expect(thumbhashStringToDataUrlNativeRuntime(thumbhash)).toBe(
+      thumbhashStringToDataUrl(thumbhash),
+    );
+    expect(resolveImageSourceForNativeRuntime({ thumbhash })).toBe(
+      resolveImageSourceForNative({ thumbhash }),
+    );
+  });
+});
+
+describe('theme-aware image sources', () => {
+  it('resolves explicit light and dark sources for native consumers', () => {
+    const source = {
+      light: '/assets/graph.light.png',
+      dark: '/assets/graph.dark.png',
+      fallback: '/assets/graph.png',
+    };
+
+    expect(resolveImageSourceForNative(source, 'light')).toBe('/assets/graph.light.png');
+    expect(resolveImageSourceForNative(source, 'dark')).toBe('/assets/graph.dark.png');
+  });
+
+  it('falls back when a scheme-specific source is missing', () => {
+    const source = {
+      dark: '/assets/graph.dark.png',
+      fallback: '/assets/graph.png',
+    };
+
+    expect(resolveThemeAwareImageSource(source, 'light')).toBe('/assets/graph.png');
+    expect(resolveImageSourceForNative(source, 'dark')).toBe('/assets/graph.dark.png');
+  });
+
+  it('carries theme source metadata for DOM/static controllers', () => {
+    const resolved = resolveImageSourceForDOM({
+      light: '/assets/graph.light.png',
+      dark: '/assets/graph.dark.png',
+    }, 'light');
+
+    expect(resolved?.src).toBe('/assets/graph.light.png');
+    expect(resolved?.themeSources).toEqual({
+      light: '/assets/graph.light.png',
+      dark: '/assets/graph.dark.png',
+    });
+  });
+});
+
+describe('image-source native width-bucket candidates', () => {
+  const g = globalThis as {
+    exact?: { screenWidth?: number; screenScale?: number };
+    devicePixelRatio?: number;
+  };
+
+  afterEach(() => {
+    delete g.exact;
+    delete g.devicePixelRatio;
+  });
+
+  it('picks the smallest variant that covers the estimated decode width', () => {
+    g.exact = { screenWidth: 390 };
+    g.devicePixelRatio = 2;
+    const uri = resolveImageSourceForNative([
+      { uri: 'https://cdn.example/w300', width: 300 },
+      { uri: 'https://cdn.example/w600', width: 600 },
+      { uri: 'https://cdn.example/w1200', width: 1200 },
+    ]);
+    expect(uri).toBe('https://cdn.example/w600');
+  });
+
+  it('falls back to the largest variant when the viewport is very wide', () => {
+    g.exact = { screenWidth: 900 };
+    g.devicePixelRatio = 3;
+    const uri = resolveImageSourceForNative([
+      { uri: 'https://cdn.example/w300', width: 300 },
+      { uri: 'https://cdn.example/w600', width: 600 },
+      { uri: 'https://cdn.example/w1200', width: 1200 },
+    ]);
+    expect(uri).toBe('https://cdn.example/w1200');
+  });
+
+  it('still uses density scoring when pixelDensity is present', () => {
+    g.exact = { screenWidth: 390 };
+    g.devicePixelRatio = 2;
+    const uri = resolveImageSourceForNative([
+      { uri: 'https://cdn.example/a', pixelDensity: 1 },
+      { uri: 'https://cdn.example/b', pixelDensity: 2 },
+      { uri: 'https://cdn.example/c', pixelDensity: 3 },
+    ]);
+    expect(uri).toBe('https://cdn.example/b');
+  });
+
+  it('falls back to exact.screenScale when devicePixelRatio is not globally exposed', () => {
+    g.exact = { screenWidth: 390, screenScale: 2 };
+    const uri = resolveImageSourceForNative([
+      { uri: 'https://cdn.example/w300', width: 300 },
+      { uri: 'https://cdn.example/w600', width: 600 },
+      { uri: 'https://cdn.example/w1200', width: 1200 },
+    ]);
+    expect(uri).toBe('https://cdn.example/w600');
+  });
+});

package/src/__tests__/liquid-glass.test.ts

@@ -0,0 +1,72 @@
+/**
+ * Liquid Glass spec composition.
+ *
+ * The Contract `glass` / `glassVariant` / `glassTint` / `glassInteractive`
+ * attrs lower to host props that normalizeProps composes into a single
+ * `glassEffect` value carried on PropId.GlassEffect — a plain boolean for the
+ * bare case (so the native toggle's truthy check and the boolean prop contract
+ * survive) and a spec string when refined. The native host parses the spec.
+ */
+
+import { describe, it, expect } from 'vitest';
+
+import { normalizeProps } from '../props/normalize.js';
+
+describe('Liquid Glass spec composition', () => {
+  it('keeps a bare container glass enable a plain boolean', () => {
+    const result = normalizeProps('view', { glassEffect: true }, false);
+    expect(result.glassEffect).toBe(true);
+  });
+
+  it('encodes the clear variant', () => {
+    const result = normalizeProps('view', { glassEffect: true, glassVariant: 'clear' }, false);
+    expect(result.glassEffect).toBe('clear');
+  });
+
+  it('encodes variant + tint + interactive into one spec', () => {
+    const result = normalizeProps(
+      'view',
+      { glassEffect: true, glassVariant: 'regular', glassTint: '#7c4dffaa', glassInteractive: true },
+      false,
+    );
+    expect(result.glassEffect).toBe('regular;tint=#7c4dffaa;interactive');
+  });
+
+  it('treats a string enable (glass="clear") as both enable and variant', () => {
+    const result = normalizeProps('view', { glassEffect: 'clear' }, false);
+    expect(result.glassEffect).toBe('clear');
+  });
+
+  it('defaults the variant to regular when only a tint is given', () => {
+    const result = normalizeProps('view', { glassEffect: true, glassTint: '#11d6c0aa' }, false);
+    expect(result.glassEffect).toBe('regular;tint=#11d6c0aa');
+  });
+
+  it('lets an explicit off win even when a variant is present', () => {
+    const result = normalizeProps('view', { glassEffect: false, glassVariant: 'clear' }, false);
+    // The explicit "false" spec must hit the wire (not be dropped): the
+    // protocol has no prop-removal op, so omitting the prop would leave a
+    // previously glassy node's stale spec live on native (ENG-22484).
+    expect(result.glassEffect).toBe('false');
+  });
+
+  it('emits the explicit off for the glass alias too', () => {
+    const result = normalizeProps('view', { glass: false }, false);
+    expect(result.glassEffect).toBe('false');
+  });
+
+  it('ignores an empty tint string', () => {
+    const result = normalizeProps('view', { glassEffect: true, glassTint: '' }, false);
+    expect(result.glassEffect).toBe(true);
+  });
+
+  it('leaves a node with no glass untouched', () => {
+    const result = normalizeProps('view', { testId: 'plain' }, false);
+    expect(result.glassEffect).toBeUndefined();
+  });
+
+  it('keeps the native toggle glass a boolean (truthy "true" on the wire)', () => {
+    const result = normalizeProps('toggle', { glassEffect: true }, false);
+    expect(result.glassEffect).toBe(true);
+  });
+});

package/src/__tests__/multi-root.test.ts

@@ -0,0 +1,118 @@
+/**
+ * Multi-Root Tests
+ *
+ * Tests for the multi-root support in nodes, buffer writer, and reconciler.
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import {
+  NodeKind,
+  createRootNode,
+  _resetNodeIdCounter,
+} from '../nodes/index.js';
+import { BufferWriter } from '@exact/core/protocol/buffer-writer';
+import {
+  PROTOCOL_VERSION_2,
+  PROTOCOL_VERSION_3,
+  BUFFER_HEADER_V3_SIZE,
+} from '@exact/core/protocol/opcodes';
+
+// Reset node ID counter before each test
+beforeEach(() => {
+  _resetNodeIdCounter();
+});
+
+describe('createRootNode multi-root', () => {
+  it('should create root with id=0 and rootId=0 by default', () => {
+    const root = createRootNode();
+    expect(root.kind).toBe(NodeKind.Root);
+    expect(root.id).toBe(0);
+    expect(root.rootId).toBe(0);
+    expect(root.parent).toBeNull();
+    expect(root.children).toEqual([]);
+  });
+
+  it('should create root with id=0 when rootId=0 explicitly', () => {
+    const root = createRootNode(0);
+    expect(root.id).toBe(0);
+    expect(root.rootId).toBe(0);
+  });
+
+  it('should allocate new id when rootId > 0', () => {
+    const root = createRootNode(3);
+    expect(root.id).toBe(1); // first allocated id
+    expect(root.rootId).toBe(3);
+  });
+
+  it('should allocate different ids for different roots', () => {
+    const root1 = createRootNode(1);
+    const root2 = createRootNode(2);
+    expect(root1.id).not.toBe(root2.id);
+    expect(root1.rootId).toBe(1);
+    expect(root2.rootId).toBe(2);
+  });
+});
+
+describe('BufferWriter rootId', () => {
+  it('should produce 8-byte v2 header with rootId=0 (default)', () => {
+    const writer = new BufferWriter(1024, 1, 0);
+    writer.createView(1, 0);
+    const arr = writer.getUint8Array();
+    const view = new DataView(arr.buffer, arr.byteOffset, arr.byteLength);
+
+    // Protocol version should be v2
+    expect(view.getUint16(6, true)).toBe(PROTOCOL_VERSION_2);
+
+    // Op count should be 1
+    expect(view.getUint16(4, true)).toBe(1);
+
+    // First op should start at offset 8 (v2 header size)
+    expect(arr[8]).toBe(0x01); // CreateView opcode
+  });
+
+  it('should produce 12-byte v3 header with rootId=5', () => {
+    const writer = new BufferWriter(1024, 1, 5);
+    writer.createView(1, 0);
+    const arr = writer.getUint8Array();
+    const view = new DataView(arr.buffer, arr.byteOffset, arr.byteLength);
+
+    // Protocol version should be v3
+    expect(view.getUint16(6, true)).toBe(PROTOCOL_VERSION_3);
+
+    // Root ID at offset 8
+    expect(view.getUint32(8, true)).toBe(5);
+
+    // Op count should be 1
+    expect(view.getUint16(4, true)).toBe(1);
+
+    // First op should start at offset 12 (v3 header size)
+    expect(arr[12]).toBe(0x01); // CreateView opcode
+  });
+
+  it('should produce correct v3 header size', () => {
+    const writer = new BufferWriter(1024, 1, 42);
+    const arr = writer.getUint8Array();
+
+    // With no ops, should just be the 12-byte header
+    expect(arr.byteLength).toBe(BUFFER_HEADER_V3_SIZE);
+  });
+
+  it('should reset correctly with v3 header', () => {
+    const writer = new BufferWriter(1024, 1, 7);
+    writer.createView(1, 0);
+    writer.createView(2, 0);
+    expect(writer.getOpCount()).toBe(2);
+
+    writer.reset();
+    expect(writer.getOpCount()).toBe(0);
+
+    writer.createView(3, 0);
+    const arr = writer.getUint8Array();
+    const view = new DataView(arr.buffer, arr.byteOffset, arr.byteLength);
+
+    // Should still be v3 after reset
+    expect(view.getUint16(6, true)).toBe(PROTOCOL_VERSION_3);
+    expect(view.getUint32(8, true)).toBe(7);
+    expect(view.getUint16(4, true)).toBe(1);
+  });
+});

package/src/__tests__/native-view-events.test.ts

@@ -0,0 +1,102 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  _resetNativeViewEventBridgeForTests,
+  registerNativeViewEventHandler,
+  unregisterNativeViewEventHandler,
+} from '../native-view-events.js';
+
+interface NativeViewEventTestGlobals {
+  __exactModuleEvent?: (
+    moduleName: string,
+    eventName: string,
+    nodeIdOrPayload?: unknown,
+    payloadMaybe?: unknown,
+  ) => void;
+}
+
+function encodeMessagePackMap(entries: Record<string, number>): Uint8Array {
+  const key = Object.keys(entries)[0]!;
+  const value = entries[key]!;
+  const keyBytes = new TextEncoder().encode(key);
+
+  const bytes = new Uint8Array(2 + keyBytes.length + 1);
+  bytes[0] = 0x81; // fixmap with one entry
+  bytes[1] = 0xa0 | keyBytes.length; // fixstr key
+  bytes.set(keyBytes, 2);
+  bytes[2 + keyBytes.length] = value; // positive fixint payload
+  return bytes;
+}
+
+beforeEach(() => {
+  _resetNativeViewEventBridgeForTests();
+});
+
+afterEach(() => {
+  _resetNativeViewEventBridgeForTests();
+});
+
+describe('native-view-events', () => {
+  it('routes instance-scoped module events by node id and decodes MessagePack payloads', () => {
+    const handler = vi.fn().mockReturnValue(true);
+    const globals = globalThis as typeof globalThis & NativeViewEventTestGlobals;
+
+    registerNativeViewEventHandler(42, 'exact.slider', (eventName, payload) => {
+      handler(eventName, payload);
+      return true;
+    });
+
+    globals.__exactModuleEvent?.(
+      'exact.slider',
+      'change',
+      42,
+      encodeMessagePackMap({ value: 55 }),
+    );
+
+    expect(handler).toHaveBeenCalledWith('change', {
+      value: 55,
+    });
+  });
+
+  it('preserves a pre-existing module dispatcher for non-native-view events', () => {
+    const existingDispatcher = vi.fn();
+    const globals = globalThis as typeof globalThis & NativeViewEventTestGlobals;
+    globals.__exactModuleEvent = existingDispatcher;
+
+    registerNativeViewEventHandler(7, 'exact.slider', () => false);
+
+    globals.__exactModuleEvent?.('exact.analytics', 'ready', {
+      healthy: true,
+    });
+
+    expect(existingDispatcher).toHaveBeenCalledWith('exact.analytics', 'ready', {
+      healthy: true,
+    });
+  });
+
+  it('forwards unhandled four-argument events to opt-in dispatchers that understand node ids', () => {
+    const globals = globalThis as typeof globalThis & NativeViewEventTestGlobals;
+    const calls: unknown[][] = [];
+    const existingDispatcher = (
+      moduleName: string,
+      eventName: string,
+      nodeId: unknown,
+      payload: unknown,
+    ) => {
+      calls.push([moduleName, eventName, nodeId, payload]);
+    };
+    globals.__exactModuleEvent = existingDispatcher;
+
+    registerNativeViewEventHandler(99, 'exact.slider', () => false);
+    unregisterNativeViewEventHandler(99);
+
+    globals.__exactModuleEvent?.('exact.slider', 'change', 99, new Uint8Array([0xc0]));
+
+    expect(calls).toEqual([[
+      'exact.slider',
+      'change',
+      99,
+      new Uint8Array([0xc0]),
+    ]]);
+  });
+});