@ccheever/exact-renderer 0.1.0

package/package.json

@@ -0,0 +1,118 @@
+{
+  "name": "@ccheever/exact-renderer",
+  "version": "0.1.0",
+  "description": "Renderer internals and primitives for Exact",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./classname-resolve": {
+      "import": "./src/classname-resolve.ts",
+      "types": "./src/classname-resolve.ts"
+    },
+    "./classname-contract": {
+      "import": "./src/classname-contract.ts",
+      "types": "./src/classname-contract.ts"
+    },
+    "./adapter-contract": {
+      "import": "./src/adapter-contract.ts",
+      "types": "./src/adapter-contract.ts"
+    },
+    "./dom-shim": {
+      "import": "./src/dom-shim.ts",
+      "types": "./src/dom-shim.ts"
+    },
+    "./dom-mirror": {
+      "import": "./src/dom-mirror.ts",
+      "types": "./src/dom-mirror.ts"
+    },
+    "./web-host": {
+      "import": "./src/web-host.ts",
+      "types": "./src/web-host.ts"
+    },
+    "./host-ops": {
+      "import": "./src/host-ops.ts",
+      "types": "./src/host-ops.ts"
+    },
+    "./inspector": {
+      "import": "./src/inspector.ts",
+      "types": "./src/inspector.ts"
+    },
+    "./native-primitives": {
+      "import": "./src/native-primitives.ts",
+      "types": "./src/native-primitives.ts"
+    },
+    "./primitives": {
+      "native": "./src/native-primitives.ts",
+      "import": "./src/primitives.ts",
+      "types": "./src/primitives.ts"
+    },
+    "./runtime": {
+      "import": "./src/runtime.ts",
+      "types": "./src/runtime.ts"
+    },
+    "./style": {
+      "import": "./src/style/index.ts",
+      "types": "./src/style/index.ts"
+    },
+    "./text/paragraph-lowering": {
+      "import": "./src/text/paragraph-lowering.ts",
+      "types": "./src/text/paragraph-lowering.ts"
+    },
+    "./solid": {
+      "import": "./src/solid.ts",
+      "types": "./src/solid.ts"
+    },
+    "./svelte": {
+      "import": "./src/svelte.ts",
+      "types": "./src/svelte.ts"
+    },
+    "./types": {
+      "import": "./src/types.ts",
+      "types": "./src/types.ts"
+    },
+    "./vue": {
+      "import": "./src/vue.ts",
+      "types": "./src/vue.ts"
+    }
+  },
+  "dependencies": {
+    "@exact/core": "npm:@ccheever/exact-core@0.1.0",
+    "@exact/text": "npm:@ccheever/exact-text@0.1.0",
+    "@exact/runtime-js": "npm:@ccheever/exact-runtime-js@0.1.0",
+    "react-reconciler": "^0.33.0",
+    "thumbhash": "^0.1.1"
+  },
+  "peerDependencies": {
+    "@vue/runtime-core": "^3.5.0",
+    "react": "^19.0.0",
+    "solid-js": "^1.9.0",
+    "svelte": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/runtime-core": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-reconciler": "^0.32.3",
+    "@vue/runtime-core": "^3.5.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "solid-js": "^1.9.0",
+    "svelte": "^5.0.0",
+    "happy-dom": "^20.8.4"
+  }
+}

package/src/__tests__/adapter-window-state.test.tsx

@@ -0,0 +1,190 @@
+import React, { act } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { View } from '../components.js';
+import { getRootNode } from '../inspector.js';
+import { _resetNodeIdCounter, NodeKind, type ElementNode } from '../nodes/index.js';
+import {
+  render as renderReact,
+  reset as resetReact,
+} from '../reconciler.js';
+import {
+  createApp as createVueApp,
+  h,
+  nextTick,
+  ref,
+  reset as resetVue,
+  render as renderVue,
+} from '../vue.js';
+import {
+  createElement as createSolidElement,
+  render as renderSolid,
+  reset as resetSolid,
+  setProp as setSolidProp,
+} from '../solid.js';
+import { _clearHandlers } from '../host-config.js';
+import { _resetHostOpsState } from '../host-ops.js';
+import { _resetInspectorState } from '../inspector.js';
+import { _resetWindowRuntimeForTests } from '../../../../js/src/window-management.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;
+  __exactSafeAreaInsetsChanged?: (
+    top?: number,
+    right?: number,
+    bottom?: number,
+    left?: number,
+  ) => void;
+  IS_REACT_ACT_ENVIRONMENT?: boolean;
+}
+
+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 getFirstTextValue(rootId: number = 0): string | undefined {
+  const element = getFirstElement(rootId);
+  const child = element.children[0];
+
+  if (!child || child.kind !== NodeKind.Text) {
+    return undefined;
+  }
+
+  return child.text;
+}
+
+beforeEach(async () => {
+  const globals = globalThis as typeof globalThis & ExactGlobals;
+  globals.IS_REACT_ACT_ENVIRONMENT = true;
+  globals.exact = {
+    dispatch: vi.fn(),
+    screenWidth: 393,
+    screenHeight: 852,
+    screenScale: 2,
+    safeAreaInsets: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+  };
+
+  _resetNodeIdCounter();
+  _clearHandlers();
+  _resetHostOpsState();
+  _resetInspectorState();
+  _resetWindowRuntimeForTests();
+  await act(async () => {
+    resetReact();
+  });
+  resetSolid();
+  resetVue();
+});
+
+afterEach(async () => {
+  await act(async () => {
+    resetReact();
+  });
+  resetSolid();
+  resetVue();
+  _clearHandlers();
+  _resetNodeIdCounter();
+  _resetHostOpsState();
+  _resetInspectorState();
+  _resetWindowRuntimeForTests();
+
+  const globals = globalThis as typeof globalThis & ExactGlobals;
+  delete globals.exact;
+  delete globals.IS_REACT_ACT_ENVIRONMENT;
+});
+
+describe('adapter window-state integration', () => {
+  it('React re-resolves safe-area styles when the host insets change', async () => {
+    await act(async () => {
+      renderReact(<View safeArea="container" />);
+    });
+
+    expect(getFirstElement().safeAreaState?.appliedInsets.top).toBe(0);
+
+    await act(async () => {
+      globalThis.__exactSafeAreaInsetsChanged?.(12, 0, 18, 0);
+    });
+
+    const child = getFirstElement();
+    expect(child.safeAreaState?.appliedInsets.top).toBe(12);
+    expect(child.safeAreaState?.appliedInsets.bottom).toBe(18);
+    expect(child.style.paddingTop).toEqual({ type: 'points', value: 12 });
+    expect(child.style.paddingBottom).toEqual({ type: 'points', value: 18 });
+  });
+
+  it('Solid re-resolves safe-area styles when the host insets change', () => {
+    renderSolid(() => {
+      const node = createSolidElement('View');
+      setSolidProp(node, 'safeArea', 'container');
+      return node;
+    });
+
+    expect(getFirstElement().safeAreaState?.appliedInsets.top).toBe(0);
+
+    globalThis.__exactSafeAreaInsetsChanged?.(14, 0, 22, 0);
+
+    const child = getFirstElement();
+    expect(child.safeAreaState?.appliedInsets.top).toBe(14);
+    expect(child.safeAreaState?.appliedInsets.bottom).toBe(22);
+    expect(child.style.paddingTop).toEqual({ type: 'points', value: 14 });
+    expect(child.style.paddingBottom).toEqual({ type: 'points', value: 22 });
+  });
+
+  it('Vue re-resolves safe-area styles when the host insets change', () => {
+    renderVue(h('View', { safeArea: 'container' }));
+
+    expect(getFirstElement().safeAreaState?.appliedInsets.top).toBe(0);
+
+    globalThis.__exactSafeAreaInsetsChanged?.(10, 0, 24, 0);
+
+    const child = getFirstElement();
+    expect(child.safeAreaState?.appliedInsets.top).toBe(10);
+    expect(child.safeAreaState?.appliedInsets.bottom).toBe(24);
+    expect(child.style.paddingTop).toEqual({ type: 'points', value: 10 });
+    expect(child.style.paddingBottom).toEqual({ type: 'points', value: 24 });
+  });
+
+  it('Vue createApp keeps component reactivity without a manual raw effect wrapper', async () => {
+    const count = ref(0);
+    const app = createVueApp({
+      setup() {
+        return () => h('Text', {}, String(count.value));
+      },
+    });
+
+    app.mount();
+    expect(getFirstTextValue()).toBe('0');
+
+    count.value = 7;
+    await nextTick();
+
+    expect(getFirstTextValue()).toBe('7');
+  });
+});

package/src/__tests__/attrs.test.ts

@@ -0,0 +1,157 @@
+/// <reference path="../../../../js/src/types/bun-test.d.ts" />
+// LLP 0201 W0 / LLP 0202 H0: shared semantic DOM attr lowering.
+
+import { describe, expect, it } from 'bun:test';
+
+import { filterDOMProps, lowerHostAttrs } from '../attrs.js';
+
+describe('lowerHostAttrs (Contract web W0)', () => {
+  it('lowers authored heading intent to native heading tags without redundant ARIA', () => {
+    const lowered = lowerHostAttrs({
+      tag: 'Text',
+      props: {
+        accessibilityRole: 'heading',
+        accessibilityHeadingLevel: 2,
+        testID: 'title',
+      },
+    }, undefined, { defaultTag: 'span' });
+
+    expect(lowered.tag).toBe('h2');
+    expect(lowered.attrs).toMatchObject({ 'data-testid': 'title' });
+    expect(lowered.attrs.role).toBeUndefined();
+    expect(lowered.attrs['aria-level']).toBeUndefined();
+  });
+
+  it('lowers landmarks and list semantics to real DOM tags', () => {
+    const nav = lowerHostAttrs({
+      tag: 'View',
+      props: { accessibilityRole: 'navigation', accessibilityLabel: 'Primary navigation' },
+    }, undefined, { defaultTag: 'div' });
+    const main = lowerHostAttrs({ tag: 'View', props: { accessibilityRole: 'main' } }, undefined, {
+      defaultTag: 'div',
+    });
+    const list = lowerHostAttrs({ tag: 'List', props: { accessibilityRole: 'list' } }, undefined, {
+      defaultTag: 'div',
+    });
+    const item = lowerHostAttrs({ tag: 'View', props: { accessibilityRole: 'listitem' } }, undefined, {
+      defaultTag: 'div',
+    });
+
+    expect(nav.tag).toBe('nav');
+    expect(nav.attrs).toMatchObject({ 'aria-label': 'Primary navigation' });
+    expect(nav.attrs.role).toBeUndefined();
+    expect(main.tag).toBe('main');
+    expect(list.tag).toBe('ul');
+    expect(item.tag).toBe('li');
+  });
+
+  it('lowers editorial semantics to native DOM tags', () => {
+    const quote = lowerHostAttrs({
+      tag: 'View',
+      props: { __exactSemanticTag: 'blockquote', testID: 'quote' },
+    }, { tag: 'blockquote' }, { defaultTag: 'div' });
+    const pre = lowerHostAttrs({
+      tag: 'View',
+      props: { __exactSemanticTag: 'pre', testID: 'pre' },
+    }, { tag: 'pre' }, { defaultTag: 'div' });
+    const code = lowerHostAttrs({
+      tag: 'Text',
+      props: { __exactSemanticTag: 'code', testID: 'code' },
+    }, { tag: 'code' }, { defaultTag: 'span' });
+    const rule = lowerHostAttrs({
+      tag: 'View',
+      props: { __exactSemanticTag: 'hr', testID: 'rule' },
+    }, { tag: 'hr' }, { defaultTag: 'div' });
+
+    expect(quote.tag).toBe('blockquote');
+    expect(pre.tag).toBe('pre');
+    expect(code.tag).toBe('code');
+    expect(rule.tag).toBe('hr');
+    expect(quote.attrs).toMatchObject({ 'data-testid': 'quote' });
+    expect(code.attrs.role).toBeUndefined();
+  });
+
+  it('lowers Contract link semantics to real anchors', () => {
+    const link = lowerHostAttrs({
+      tag: 'Pressable',
+      props: {
+        __exactSemanticTag: 'a',
+        accessibilityRole: 'link',
+        accessibilityLabel: 'Facet Contract Lab',
+        href: '/facet-contract-lab',
+        testID: 'route-facet-contract-link',
+      },
+    }, { tag: 'a' }, { defaultTag: 'button' });
+
+    expect(link.tag).toBe('a');
+    expect(link.attrs).toMatchObject({
+      'aria-label': 'Facet Contract Lab',
+      'data-testid': 'route-facet-contract-link',
+      href: '/facet-contract-lab',
+    });
+    expect(link.attrs.role).toBeUndefined();
+  });
+
+  it('preserves label associations, inert semantics, and DOM prop filtering', () => {
+    const label = lowerHostAttrs({
+      tag: 'Text',
+      props: { accessibilityFor: 'email', nativeID: 'email-label' },
+    }, { tag: 'label' }, { defaultTag: 'span' });
+    const input = lowerHostAttrs({
+      tag: 'TextInput',
+      props: { nativeID: 'email', accessibilityLabelledBy: 'email-label' },
+    }, undefined, { defaultTag: 'input' });
+    const inert = lowerHostAttrs({
+      tag: 'View',
+      props: { inert: true, accessibilityRole: 'region', className: 'panel' },
+    }, undefined, { defaultTag: 'section' });
+    const filtered = filterDOMProps({
+      accessibilityRole: 'navigation',
+      accessibilityLabel: 'Primary navigation',
+      onPress: () => undefined,
+    });
+
+    expect(label.tag).toBe('label');
+    expect(label.attrs).toMatchObject({ id: 'email-label', htmlFor: 'email' });
+    expect(label.labelAssociation).toEqual({ for: 'email' });
+    expect(input.tag).toBe('input');
+    expect(input.attrs).toMatchObject({ id: 'email', 'aria-labelledby': 'email-label' });
+    expect(input.labelAssociation).toEqual({ labelledBy: 'email-label' });
+    expect(inert.attrs).toMatchObject({
+      inert: true,
+      'aria-hidden': true,
+      className: 'panel',
+    });
+    expect(filtered).toMatchObject({
+      role: 'navigation',
+      'aria-label': 'Primary navigation',
+    });
+    expect(filtered.onPress).toBeUndefined();
+  });
+
+  it('blocks unsafe DOM attribute passthroughs while preserving function handlers for React', () => {
+    const lowered = lowerHostAttrs({
+      tag: 'Pressable',
+      props: {
+        __exactSemanticTag: 'a',
+        href: 'javascript:alert(1)',
+        srcdoc: '<script>alert(1)</script>',
+        onmouseover: 'alert(1)',
+        onClick: () => undefined,
+        'data-safe': 'ok',
+        'aria-current': 'page',
+        rel: 'noreferrer',
+      },
+    }, { tag: 'a' }, { defaultTag: 'button' });
+
+    expect(lowered.attrs.href).toBeUndefined();
+    expect(lowered.attrs.srcdoc).toBeUndefined();
+    expect(lowered.attrs.onmouseover).toBeUndefined();
+    expect(typeof lowered.attrs.onClick).toBe('function');
+    expect(lowered.attrs).toMatchObject({
+      'data-safe': 'ok',
+      'aria-current': 'page',
+      rel: 'noreferrer',
+    });
+  });
+});