@ccheever/exact-renderer 0.1.0

package/src/__tests__/paragraph-lowering.test.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { Text } from '../components.js';
+import { hostConfig } from '../host-config.js';
+import { createInstance } from '../host-ops.js';
+import { lowerTextPropsToParagraphSpec } from '../text/paragraph-lowering.js';
+
+describe('lowerTextPropsToParagraphSpec', () => {
+  it('flattens nested spans that do not change text style', () => {
+    const props = {
+      style: { fontSize: 18, color: '#221a14' },
+      children: [
+        'Hello ',
+        React.createElement(Text, null, 'world'),
+        '!',
+      ],
+    };
+
+    expect(lowerTextPropsToParagraphSpec(props)?.spec.spans).toEqual([
+      {
+        type: 'text',
+        text: 'Hello world!',
+        style: {
+          color: '#221a14',
+          fontSize: 18,
+        },
+      },
+    ]);
+  });
+
+  it('resolves inherited inline text styles across nested Text spans', () => {
+    const props = {
+      style: { fontSize: 18, color: '#221a14' },
+      children: [
+        'Hello ',
+        React.createElement(
+          Text,
+          { style: { fontWeight: '700' } },
+          'bold ',
+          React.createElement(Text, { style: { color: '#b4542d' } }, 'accent'),
+        ),
+        ' again.',
+      ],
+    };
+
+    expect(lowerTextPropsToParagraphSpec(props)?.spec.spans).toEqual([
+      {
+        type: 'text',
+        text: 'Hello ',
+        style: {
+          color: '#221a14',
+          fontSize: 18,
+        },
+      },
+      {
+        type: 'text',
+        text: 'bold ',
+        style: {
+          color: '#221a14',
+          fontSize: 18,
+          fontWeight: '700',
+        },
+      },
+      {
+        type: 'text',
+        text: 'accent',
+        style: {
+          color: '#b4542d',
+          fontSize: 18,
+          fontWeight: '700',
+        },
+      },
+      {
+        type: 'text',
+        text: ' again.',
+        style: {
+          color: '#221a14',
+          fontSize: 18,
+        },
+      },
+    ]);
+  });
+});
+
+describe('text paragraph lowering integration', () => {
+  it('stores the lowered paragraph on text instances', () => {
+    const props = {
+      style: { fontSize: 16, color: '#112233' },
+      children: [
+        'Release ',
+        React.createElement(Text, { style: { fontWeight: '700' } }, 'helper'),
+      ],
+    };
+
+    const instance = createInstance('Text', props);
+    const lowered = lowerTextPropsToParagraphSpec(props);
+
+    expect(instance.paragraphKey).toBe(lowered?.key ?? null);
+    expect(instance.paragraphSpec).toEqual(lowered?.spec ?? null);
+    expect(instance.props.textContent).toBe('Release helper');
+  });
+
+  it('treats nested span style changes as a parent text update', () => {
+    const oldProps = {
+      style: { fontSize: 16, color: '#112233' },
+      children: [
+        'Release ',
+        React.createElement(Text, { style: { fontWeight: '700' } }, 'helper'),
+      ],
+    };
+    const newProps = {
+      style: { fontSize: 16, color: '#112233' },
+      children: [
+        'Release ',
+        React.createElement(Text, { style: { fontWeight: '700', color: '#b4542d' } }, 'helper'),
+      ],
+    };
+    const instance = createInstance('Text', oldProps);
+
+    // react-reconciler 0.33: commitUpdate(instance, type, oldProps, newProps, fiber)
+    hostConfig.commitUpdate(instance, 'Text', oldProps, newProps, {} as never);
+
+    expect(instance.paragraphSpec?.spans).toEqual([
+      {
+        type: 'text',
+        text: 'Release ',
+        style: {
+          color: '#112233',
+          fontSize: 16,
+        },
+      },
+      {
+        type: 'text',
+        text: 'helper',
+        style: {
+          color: '#b4542d',
+          fontSize: 16,
+          fontWeight: '700',
+        },
+      },
+    ]);
+  });
+});

package/src/__tests__/props.test.ts

@@ -0,0 +1,518 @@
+/**
+ * Prop Normalization Tests
+ *
+ * Tests for the prop normalization utilities.
+ */
+
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { asset } from '../../../exact-core/src/assets-fonts-state.js';
+import {
+  extractTextContent,
+  extractWebImageSource,
+  extractRNImageSource,
+  extractResizeMode,
+  normalizeProps,
+  propsEqual,
+} from '../props/normalize.js';
+
+describe('extractTextContent', () => {
+  it('should extract string content', () => {
+    expect(extractTextContent('Hello')).toBe('Hello');
+  });
+
+  it('should convert numbers to strings', () => {
+    expect(extractTextContent(42)).toBe('42');
+    expect(extractTextContent(3.14)).toBe('3.14');
+  });
+
+  it('should return undefined for booleans', () => {
+    expect(extractTextContent(true)).toBeUndefined();
+    expect(extractTextContent(false)).toBeUndefined();
+  });
+
+  it('should return undefined for null/undefined', () => {
+    expect(extractTextContent(null)).toBeUndefined();
+    expect(extractTextContent(undefined)).toBeUndefined();
+  });
+
+  it('should concatenate array children', () => {
+    expect(extractTextContent(['Hello', ' ', 'World'])).toBe('Hello World');
+    expect(extractTextContent(['Count: ', 42])).toBe('Count: 42');
+  });
+
+  it('should filter out non-text array children', () => {
+    expect(extractTextContent(['Hello', true, 'World'])).toBe('HelloWorld');
+  });
+
+  it('should return undefined for empty array', () => {
+    expect(extractTextContent([])).toBeUndefined();
+  });
+
+  it('should recurse through nested element children', () => {
+    expect(
+      extractTextContent([
+        'Hello ',
+        React.createElement('span', null, 'world'),
+        '!',
+      ])
+    ).toBe('Hello world!');
+  });
+});
+
+describe('extractWebImageSource', () => {
+  it('should extract src prop', () => {
+    const props = { src: 'https://example.com/image.png' };
+    expect(extractWebImageSource(props)).toBe('https://example.com/image.png');
+  });
+
+  it('should return undefined for missing src', () => {
+    expect(extractWebImageSource({})).toBeUndefined();
+  });
+
+  it('should return undefined for empty src', () => {
+    expect(extractWebImageSource({ src: '' })).toBeUndefined();
+  });
+
+  it('should return undefined for non-string src', () => {
+    expect(extractWebImageSource({ src: 123 })).toBeUndefined();
+  });
+
+  it('should extract asset refs for native rendering paths', () => {
+    expect(extractWebImageSource({ src: asset('./images/logo.png') })).toBe('./images/logo.png');
+  });
+
+  it('should resolve theme-aware src props for web-style image nodes', () => {
+    expect(extractWebImageSource({
+      src: '/images/graph.png',
+      lightSrc: '/images/graph.light.png',
+      darkSrc: '/images/graph.dark.png',
+    })).toBe('/images/graph.light.png');
+  });
+});
+
+describe('extractRNImageSource', () => {
+  it('should extract string shorthand sources', () => {
+    const props = { source: 'https://example.com/image.png' };
+    expect(extractRNImageSource(props)).toBe('https://example.com/image.png');
+  });
+
+  it('should extract uri from source object', () => {
+    const props = { source: { uri: 'https://example.com/image.png' } };
+    expect(extractRNImageSource(props)).toBe('https://example.com/image.png');
+  });
+
+  it('should extract asset refs', () => {
+    const props = { source: asset('./images/logo.png') };
+    expect(extractRNImageSource(props)).toBe('./images/logo.png');
+  });
+
+  it('should return undefined for missing source', () => {
+    expect(extractRNImageSource({})).toBeUndefined();
+  });
+
+  it('should return undefined for empty uri', () => {
+    expect(extractRNImageSource({ source: { uri: '' } })).toBeUndefined();
+  });
+
+  it('should return undefined for numeric source (local asset)', () => {
+    // Local assets are not supported yet
+    expect(extractRNImageSource({ source: 42 })).toBeUndefined();
+  });
+});
+
+describe('extractResizeMode', () => {
+  describe('RN style', () => {
+    it('should extract resizeMode', () => {
+      expect(extractResizeMode({ resizeMode: 'cover' }, true)).toBe('cover');
+      expect(extractResizeMode({ resizeMode: 'contain' }, true)).toBe('contain');
+      expect(extractResizeMode({ resizeMode: 'stretch' }, true)).toBe('stretch');
+      expect(extractResizeMode({ resizeMode: 'center' }, true)).toBe('center');
+    });
+
+    it('should return undefined for invalid resizeMode', () => {
+      expect(extractResizeMode({ resizeMode: 'invalid' }, true)).toBeUndefined();
+    });
+
+    it('should accept objectFit on the Image component API', () => {
+      expect(extractResizeMode({ objectFit: 'contain' }, true)).toBe('contain');
+    });
+  });
+
+  describe('web style', () => {
+    it('should map objectFit to resizeMode', () => {
+      expect(extractResizeMode({ objectFit: 'cover' }, false)).toBe('cover');
+      expect(extractResizeMode({ objectFit: 'contain' }, false)).toBe('contain');
+      expect(extractResizeMode({ objectFit: 'fill' }, false)).toBe('stretch');
+      expect(extractResizeMode({ objectFit: 'none' }, false)).toBe('center');
+      expect(extractResizeMode({ objectFit: 'scale-down' }, false)).toBe('contain');
+    });
+  });
+});
+
+describe('normalizeProps', () => {
+  describe('text elements', () => {
+    it('should extract text content from children', () => {
+      const result = normalizeProps('text', { children: 'Hello' }, false);
+      expect(result.textContent).toBe('Hello');
+    });
+
+    it('should preserve explicit textContent when children are absent', () => {
+      const result = normalizeProps('text', { textContent: 'Hello' }, false);
+      expect(result.textContent).toBe('Hello');
+    });
+
+    it('should concatenate array children', () => {
+      const result = normalizeProps('text', { children: ['Hello', ' ', 'World'] }, false);
+      expect(result.textContent).toBe('Hello World');
+    });
+
+    it('should include nested element text in text content', () => {
+      const result = normalizeProps(
+        'text',
+        {
+          children: [
+            'Hello ',
+            React.createElement('span', null, 'world'),
+            '!',
+          ],
+        },
+        false,
+      );
+      expect(result.textContent).toBe('Hello world!');
+    });
+
+    it('should preserve selectable modes', () => {
+      expect(normalizeProps('text', { selectable: 'all' }, false).selectable).toBe('all');
+      expect(normalizeProps('text', { selectable: 'contain' }, false).selectable).toBe('contain');
+      expect(normalizeProps('text', { selectable: false }, false).selectable).toBe(false);
+    });
+  });
+
+  describe('shared selectable props', () => {
+    it('should normalize selectable on container elements', () => {
+      expect(normalizeProps('view', { selectable: false }, false).selectable).toBe(false);
+    });
+
+    it('normalizes non-empty lang props', () => {
+      expect(normalizeProps('view', { lang: ' ar-EG ' }, false).lang).toBe('ar-EG');
+      expect(normalizeProps('view', { lang: '   ' }, false).lang).toBeUndefined();
+    });
+
+    it('should preserve selectionCopyText including empty strings', () => {
+      expect(normalizeProps('view', { selectionCopyText: '' }, false).selectionCopyText).toBe('');
+      expect(normalizeProps('view', { selectionCopyText: '[Chart]' }, false).selectionCopyText).toBe('[Chart]');
+    });
+
+    it('normalizes controlled TextInput selection ranges', () => {
+      expect(
+        normalizeProps('input', {
+          selection: { start: 2, end: 5 },
+        }, false),
+      ).toMatchObject({
+        selectionStart: 2,
+        selectionEnd: 5,
+      });
+
+      expect(
+        normalizeProps('input', {
+          selection: { start: -1, end: 5 },
+        }, false).selectionStart,
+      ).toBeUndefined();
+    });
+  });
+
+  describe('image elements', () => {
+    it('should extract web image source', () => {
+      const result = normalizeProps('image', { src: 'https://example.com/img.png' }, false);
+      expect(result.imageSource).toBe('https://example.com/img.png');
+    });
+
+    it('should extract RN image source', () => {
+      const result = normalizeProps('image', { source: { uri: 'https://example.com/img.png' } }, true);
+      expect(result.imageSource).toBe('https://example.com/img.png');
+    });
+
+    it('should extract string shorthand Image sources', () => {
+      const result = normalizeProps('image', { source: 'https://example.com/img.png' }, true);
+      expect(result.imageSource).toBe('https://example.com/img.png');
+    });
+
+    it('should resolve an inline svgSource glyph to a data URI for native', () => {
+      const markup = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/></svg>';
+      const result = normalizeProps('image', { svgSource: markup, tintColor: '#5b6cf5' }, false);
+      expect(result.imageSource).toBe(`data:image/svg+xml,${encodeURIComponent(markup)}`);
+      expect(result.tintColor).toBe('#5b6cf5');
+    });
+
+    it('should let a raster src win over an inline svgSource', () => {
+      const result = normalizeProps(
+        'image',
+        { src: 'https://example.com/img.png', svgSource: '<svg/>' },
+        false,
+      );
+      expect(result.imageSource).toBe('https://example.com/img.png');
+    });
+
+    it('should extract resize mode', () => {
+      const webResult = normalizeProps('image', { objectFit: 'cover' }, false);
+      expect(webResult.resizeMode).toBe('cover');
+
+      const rnResult = normalizeProps('image', { resizeMode: 'contain' }, true);
+      expect(rnResult.resizeMode).toBe('contain');
+    });
+
+    it('should map objectFit on the Image component to resizeMode', () => {
+      const result = normalizeProps('image', { objectFit: 'scale-down' }, true);
+      expect(result.resizeMode).toBe('contain');
+    });
+
+    it('should normalize color placeholders for native image props', () => {
+      const result = normalizeProps('image', {
+        source: 'https://example.com/img.png',
+        placeholder: { color: '#123456' },
+      }, true);
+
+      expect(result.placeholder).toBe('color:#123456');
+    });
+
+    it('should normalize ThumbHash placeholders for native image props', () => {
+      const result = normalizeProps('image', {
+        source: 'https://example.com/img.png',
+        placeholder: { thumbhash: '3OcRJYB4d3h/iIeHeEh3eIhw+j3A' },
+      }, true);
+
+      expect(result.placeholder).toMatch(/^data:image\/png;base64,/);
+    });
+
+    it('should normalize image-source placeholders for native image props', () => {
+      const result = normalizeProps('image', {
+        source: 'https://example.com/img.png',
+        placeholder: asset('./images/preview.png'),
+      }, true);
+
+      expect(result.placeholder).toBe('./images/preview.png');
+    });
+
+    it('should treat decorative images as intentionally unlabeled', () => {
+      const result = normalizeProps('image', { decorative: true, alt: 'ignored' }, true);
+      expect(result.accessibilityLabel).toBe('');
+    });
+  });
+
+  describe('svg elements', () => {
+    it('should extract SVG-specific props', () => {
+      const result = normalizeProps('svg', {
+        source: asset('./icons/logo.svg'),
+        objectFit: 'contain',
+        objectPosition: 'left top',
+        tintColor: '#ff3b30',
+        pixelDensity: 2,
+        colors: {
+          '--primary': '#007aff',
+          fill: '#000000',
+        },
+        alt: 'Exact logo',
+      }, true);
+
+      expect(result.svgSource).toBe('./icons/logo.svg');
+      expect(result.resizeMode).toBe('contain');
+      expect(result.svgObjectPosition).toBe('left top');
+      expect(result.tintColor).toBe('#ff3b30');
+      expect(result.svgPixelDensity).toBe('2');
+      expect(result.svgColors).toBe(JSON.stringify({ '--primary': '#007aff' }));
+      expect(result.accessibilityLabel).toBe('Exact logo');
+    });
+
+    it('should omit invalid SVG color overrides', () => {
+      const result = normalizeProps('svg', {
+        source: '<svg viewBox="0 0 24 24"></svg>',
+        colors: {
+          fill: '#111111',
+        },
+      }, true);
+
+      expect(result.svgColors).toBeUndefined();
+    });
+  });
+
+  describe('input elements', () => {
+    it('should extract value', () => {
+      const result = normalizeProps('input', { value: 'hello' }, false);
+      expect(result.value).toBe('hello');
+    });
+
+    it('should extract defaultValue when value is not present', () => {
+      const result = normalizeProps('input', { defaultValue: 'default' }, false);
+      expect(result.value).toBe('default');
+    });
+
+    it('should prefer value over defaultValue', () => {
+      const result = normalizeProps('input', { value: 'value', defaultValue: 'default' }, false);
+      expect(result.value).toBe('value');
+    });
+
+    it('should extract placeholder', () => {
+      const result = normalizeProps('input', { placeholder: 'Enter text...' }, false);
+      expect(result.placeholder).toBe('Enter text...');
+    });
+
+    it('should extract input-specific props', () => {
+      const result = normalizeProps('input', {
+        editable: false,
+        multiline: true,
+        maxLength: 100,
+        secureTextEntry: true,
+      }, false);
+
+      expect(result.editable).toBe(false);
+      expect(result.multiline).toBe(true);
+      expect(result.maxLength).toBe(100);
+      expect(result.secureTextEntry).toBe(true);
+    });
+  });
+
+  describe('scroll elements', () => {
+    it('should extract horizontal', () => {
+      const result = normalizeProps('scroll', { horizontal: true }, false);
+      expect(result.horizontal).toBe(true);
+    });
+
+    it('should extract scroll indicator visibility', () => {
+      const result = normalizeProps('scroll', {
+        showsVerticalScrollIndicator: false,
+        showsHorizontalScrollIndicator: false,
+      }, false);
+      expect(result.showsScrollIndicator).toBe(false);
+    });
+  });
+
+  describe('common props', () => {
+    it('should extract accessibilityLabel', () => {
+      const result = normalizeProps('view', { accessibilityLabel: 'Close button' }, false);
+      expect(result.accessibilityLabel).toBe('Close button');
+    });
+
+    it('should use alt as accessibilityLabel for images', () => {
+      const result = normalizeProps('image', { alt: 'A cat' }, false);
+      expect(result.accessibilityLabel).toBe('A cat');
+    });
+
+    it('should preserve Exact interaction metadata for inspector serialization', () => {
+      const result = normalizeProps('button', { __exactInteractionState: 'idle' }, false);
+      expect(result.__exactInteractionState).toBe('idle');
+    });
+
+    it('preserves Contract overlay metadata for inspector serialization', () => {
+      const result = normalizeProps(
+        'view',
+        {
+          __exactPresencePhase: 'entered',
+          __exactDismissableLayer: true,
+          __exactDismissAction: 'close',
+          __exactFocusRestore: true,
+          __exactAnchorTarget: 'trigger',
+          __exactAnchorPlacement: 'bottom-start',
+          __exactAnchorStrategy: 'fixed',
+          __exactAnchorOffset: 8,
+        },
+        false,
+      );
+
+      expect(result.__exactPresencePhase).toBe('entered');
+      expect(result.__exactDismissableLayer).toBe(true);
+      expect(result.__exactDismissAction).toBe('close');
+      expect(result.__exactFocusRestore).toBe(true);
+      expect(result.__exactAnchorTarget).toBe('trigger');
+      expect(result.__exactAnchorPlacement).toBe('bottom-start');
+      expect(result.__exactAnchorStrategy).toBe('fixed');
+      expect(result.__exactAnchorOffset).toBe(8);
+    });
+
+    it('should serialize renderer-local agent semantics metadata', () => {
+      const result = normalizeProps(
+        'view',
+        {
+          agentSemantics: {
+            kind: 'navigation',
+            label: 'Profile',
+            to: '/profile',
+            disabledReason: 'Sign in first',
+          },
+        },
+        false,
+      );
+      expect(result.agentSemantics).toBe(
+        JSON.stringify({
+          kind: 'navigation',
+          label: 'Profile',
+          to: '/profile',
+          disabledReason: 'Sign in first',
+        }),
+      );
+    });
+
+    it('should normalize test ids, accessibility actions, and text scaling props', () => {
+      const result = normalizeProps(
+        'text',
+        {
+          testID: 'hero-title',
+          accessibilityActions: [
+            { name: 'archive', label: 'Archive item' },
+            { name: 'share' },
+          ],
+          accessibilityOrder: ['price', 'title'],
+          tabIndex: 2,
+          allowFontScaling: true,
+          maxFontSizeMultiplier: 1.8,
+          minimumFontSize: 14,
+          accessibilityHeadingLevel: 2,
+        },
+        false,
+      );
+
+      expect(result.testId).toBe('hero-title');
+      expect(result.accessibilityActions).toBe(
+        JSON.stringify([
+          { name: 'archive', label: 'Archive item' },
+          { name: 'share', label: undefined },
+        ]),
+      );
+      expect(result.accessibilityOrder).toBe(JSON.stringify(['price', 'title']));
+      expect(result.tabIndex).toBe(2);
+      expect(result.allowFontScaling).toBe(true);
+      expect(result.maxFontSizeMultiplier).toBe(1.8);
+      expect(result.minimumFontSize).toBe(14);
+      expect(result.accessibilityHeadingLevel).toBe(2);
+    });
+  });
+});
+
+describe('propsEqual', () => {
+  it('should return true for identical objects', () => {
+    const props = { textContent: 'Hello' };
+    expect(propsEqual(props, props)).toBe(true);
+  });
+
+  it('should return true for equal props', () => {
+    const a = { textContent: 'Hello', imageSource: 'test.png' };
+    const b = { textContent: 'Hello', imageSource: 'test.png' };
+    expect(propsEqual(a, b)).toBe(true);
+  });
+
+  it('should return false for different props', () => {
+    const a = { textContent: 'Hello' };
+    const b = { textContent: 'World' };
+    expect(propsEqual(a, b)).toBe(false);
+  });
+
+  it('should return false for different key counts', () => {
+    const a = { textContent: 'Hello' };
+    const b = { textContent: 'Hello', imageSource: 'test.png' };
+    expect(propsEqual(a, b)).toBe(false);
+  });
+
+  it('should return true for empty props', () => {
+    expect(propsEqual({}, {})).toBe(true);
+  });
+});