@mdxui/terminal 2.0.0

package/src/__tests__/core/compiler.test.ts

@@ -0,0 +1,986 @@
+/**
+ * @mdxui/terminal JSX → UINode Compiler Tests (RED phase)
+ *
+ * TDD RED Phase: These tests define the contract for the JSX compiler that
+ * converts React element trees into UINode trees for terminal rendering.
+ *
+ * The compiler must handle:
+ * - Simple component elements
+ * - Props extraction and transformation
+ * - Children flattening and normalization
+ * - Nested component trees
+ * - React Fragment handling
+ * - Key preservation for reconciliation
+ * - Null/undefined children filtering
+ *
+ * NOTE: These tests are expected to FAIL until implementation is complete.
+ * Run: pnpm --filter @mdxui/terminal test -- --run src/__tests__/core/compiler.test.ts
+ */
+import { describe, it, expect } from 'vitest'
+import React from 'react'
+import type { UINode } from '../../core/types'
+
+// ============================================================================
+// Import the compiler function that will be implemented
+// ============================================================================
+// NOTE: This import will fail until src/core/compiler.ts is created
+import { compileJSX } from '../../core/compiler'
+
+// ============================================================================
+// Test Utilities
+// ============================================================================
+
+/**
+ * Helper to create JSX elements for testing
+ */
+const el = React.createElement
+
+/**
+ * Helper to verify UINode structure
+ */
+function assertUINode(node: unknown): asserts node is UINode {
+  if (
+    typeof node !== 'object' ||
+    node === null ||
+    !('type' in node) ||
+    !('props' in node)
+  ) {
+    throw new Error('Invalid UINode structure')
+  }
+}
+
+// ============================================================================
+// Simple Element Compilation Tests
+// ============================================================================
+
+describe('JSX Compiler - Simple Elements', () => {
+  it('compiles simple self-closing component', () => {
+    const jsx = el('Box')
+    const result = compileJSX(jsx)
+
+    expect(result).toEqual({
+      type: 'Box',
+      props: {},
+    })
+    assertUINode(result)
+  })
+
+  it('compiles component with uppercase name as component type', () => {
+    const jsx = el('Text')
+    const result = compileJSX(jsx)
+
+    expect(result.type).toBe('Text')
+    expect(result.props).toEqual({})
+  })
+
+  it('compiles intrinsic lowercase element name as type', () => {
+    const jsx = el('div')
+    const result = compileJSX(jsx)
+
+    expect(result.type).toBe('div')
+    expect(result.props).toEqual({})
+  })
+
+  it('returns object with type and props properties', () => {
+    const jsx = el('Button')
+    const result = compileJSX(jsx)
+
+    expect(result).toHaveProperty('type')
+    expect(result).toHaveProperty('props')
+    expect(typeof result.type).toBe('string')
+    expect(typeof result.props).toBe('object')
+  })
+})
+
+// ============================================================================
+// Props Extraction Tests
+// ============================================================================
+
+describe('JSX Compiler - Props Extraction', () => {
+  it('extracts boolean props', () => {
+    const jsx = el('Text', { bold: true })
+    const result = compileJSX(jsx)
+
+    expect(result.props.bold).toBe(true)
+  })
+
+  it('extracts multiple boolean props', () => {
+    const jsx = el('Text', { bold: true, italic: true, underline: false })
+    const result = compileJSX(jsx)
+
+    expect(result.props.bold).toBe(true)
+    expect(result.props.italic).toBe(true)
+    expect(result.props.underline).toBe(false)
+  })
+
+  it('extracts string props', () => {
+    const jsx = el('Box', { title: 'My Box' })
+    const result = compileJSX(jsx)
+
+    expect(result.props.title).toBe('My Box')
+  })
+
+  it('extracts numeric props', () => {
+    const jsx = el('Box', { padding: 2, margin: 4 })
+    const result = compileJSX(jsx)
+
+    expect(result.props.padding).toBe(2)
+    expect(result.props.margin).toBe(4)
+  })
+
+  it('excludes React children prop from extracted props', () => {
+    // children should be handled specially, not in props
+    const jsx = el('Box', { children: 'test' })
+    const result = compileJSX(jsx)
+
+    // children should either be in props or in children field, not both
+    // This test documents the expected behavior
+    expect(result).toHaveProperty('type')
+  })
+
+  it('extracts array prop values', () => {
+    const jsx = el('List', { items: ['a', 'b', 'c'] })
+    const result = compileJSX(jsx)
+
+    expect(Array.isArray(result.props.items)).toBe(true)
+    expect(result.props.items).toEqual(['a', 'b', 'c'])
+  })
+
+  it('extracts object prop values', () => {
+    const jsx = el('Component', { config: { debug: true, level: 3 } })
+    const result = compileJSX(jsx)
+
+    expect(typeof result.props.config).toBe('object')
+    expect(result.props.config.debug).toBe(true)
+    expect(result.props.config.level).toBe(3)
+  })
+
+  it('preserves null prop values', () => {
+    const jsx = el('Component', { value: null })
+    const result = compileJSX(jsx)
+
+    expect(result.props.value).toBe(null)
+  })
+
+  it('handles component with empty props object', () => {
+    const jsx = el('Text', {})
+    const result = compileJSX(jsx)
+
+    expect(result.props).toEqual({})
+  })
+
+  it('handles component with no props argument', () => {
+    const jsx = el('Button')
+    const result = compileJSX(jsx)
+
+    expect(result.props).toEqual({})
+  })
+})
+
+// ============================================================================
+// String Children Tests
+// ============================================================================
+
+describe('JSX Compiler - String Children', () => {
+  it('converts text children to children array with single string node', () => {
+    const jsx = el('Text', null, 'Hello')
+    const result = compileJSX(jsx)
+
+    expect(result.children).toBeDefined()
+    expect(Array.isArray(result.children)).toBe(true)
+    expect(result.children).toHaveLength(1)
+    expect(result.children![0]).toBe('Hello')
+  })
+
+  it('preserves multiple text nodes as separate children', () => {
+    const jsx = el('Box', null, 'Hello', ' ', 'World')
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(3)
+    expect(result.children![0]).toBe('Hello')
+    expect(result.children![1]).toBe(' ')
+    expect(result.children![2]).toBe('World')
+  })
+
+  it('converts string children with JSX props', () => {
+    const jsx = el('Text', { bold: true }, 'Bold text')
+    const result = compileJSX(jsx)
+
+    expect(result.props.bold).toBe(true)
+    expect(result.children).toHaveLength(1)
+    expect(result.children![0]).toBe('Bold text')
+  })
+})
+
+// ============================================================================
+// Children Flattening Tests
+// ============================================================================
+
+describe('JSX Compiler - Children Flattening', () => {
+  it('flattens single nested element child', () => {
+    const jsx = el('Box', null, el('Text', null, 'Child'))
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(1)
+    expect(result.children![0]).toHaveProperty('type', 'Text')
+    expect(result.children![0]).toHaveProperty('props')
+  })
+
+  it('flattens multiple element children', () => {
+    const jsx = el(
+      'Box',
+      null,
+      el('Text', null, 'First'),
+      el('Text', null, 'Second'),
+      el('Text', null, 'Third')
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(3)
+    result.children!.forEach((child) => {
+      assertUINode(child)
+      expect(child.type).toBe('Text')
+    })
+  })
+
+  it('handles mixed text and element children', () => {
+    const jsx = el(
+      'Box',
+      null,
+      'Before',
+      el('Text', null, 'Element'),
+      'After'
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(3)
+    expect(result.children![0]).toBe('Before')
+    assertUINode(result.children![1])
+    expect(result.children![2]).toBe('After')
+  })
+
+  it('recursively compiles nested element children', () => {
+    const jsx = el(
+      'Box',
+      null,
+      el('Panel', null, el('Text', null, 'Deeply nested'))
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(1)
+    const panelChild = result.children![0]
+    assertUINode(panelChild)
+    expect(panelChild.type).toBe('Panel')
+    expect(panelChild.children).toHaveLength(1)
+
+    const textChild = panelChild.children![0]
+    assertUINode(textChild)
+    expect(textChild.type).toBe('Text')
+  })
+})
+
+// ============================================================================
+// Nested Component Trees Tests
+// ============================================================================
+
+describe('JSX Compiler - Nested Component Trees', () => {
+  it('compiles deeply nested component tree', () => {
+    const jsx = el(
+      'Root',
+      null,
+      el(
+        'Layout',
+        { type: 'grid' },
+        el(
+          'Section',
+          { id: 'header' },
+          el('Title', null, 'Header')
+        ),
+        el(
+          'Section',
+          { id: 'body' },
+          el('Content', null, 'Body content')
+        )
+      )
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.type).toBe('Root')
+    expect(result.children).toHaveLength(1)
+
+    const layoutNode = result.children![0]
+    assertUINode(layoutNode)
+    expect(layoutNode.type).toBe('Layout')
+    expect(layoutNode.props.type).toBe('grid')
+    expect(layoutNode.children).toHaveLength(2)
+
+    const headerSection = layoutNode.children![0]
+    assertUINode(headerSection)
+    expect(headerSection.type).toBe('Section')
+    expect(headerSection.props.id).toBe('header')
+  })
+
+  it('preserves props at all nesting levels', () => {
+    const jsx = el(
+      'Root',
+      { rootProp: 'root' },
+      el(
+        'Child',
+        { childProp: 'child' },
+        el('Grandchild', { grandchildProp: 'grandchild' })
+      )
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.props.rootProp).toBe('root')
+    const childNode = result.children![0]
+    assertUINode(childNode)
+    expect(childNode.props.childProp).toBe('child')
+
+    const grandchildNode = childNode.children![0]
+    assertUINode(grandchildNode)
+    expect(grandchildNode.props.grandchildProp).toBe('grandchild')
+  })
+
+  it('handles props and children together in nested structures', () => {
+    const jsx = el(
+      'Box',
+      { padding: 2 },
+      el('Header', { bold: true }, 'Title'),
+      el('Body', null, 'Content'),
+      'Footer text'
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.props.padding).toBe(2)
+    expect(result.children).toHaveLength(3)
+
+    const headerNode = result.children![0]
+    assertUINode(headerNode)
+    expect(headerNode.props.bold).toBe(true)
+    expect(headerNode.children![0]).toBe('Title')
+  })
+})
+
+// ============================================================================
+// React Fragment Handling Tests
+// ============================================================================
+
+describe('JSX Compiler - Fragment Handling', () => {
+  it('unwraps Fragment children into parent', () => {
+    const jsx = el(
+      'Box',
+      null,
+      el(React.Fragment, null, el('Text', null, 'A'), el('Text', null, 'B'))
+    )
+    const result = compileJSX(jsx)
+
+    // Fragment should be unwrapped, so children are directly in Box
+    expect(result.children).toHaveLength(2)
+    expect(result.children![0].type).toBe('Text')
+    expect(result.children![1].type).toBe('Text')
+  })
+
+  it('handles multiple Fragments as siblings', () => {
+    const jsx = el(
+      'Box',
+      null,
+      el(React.Fragment, null, el('Text', null, 'A'), el('Text', null, 'B')),
+      el(React.Fragment, null, el('Text', null, 'C'), el('Text', null, 'D'))
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(4)
+    expect(result.children!.map((c: any) => c.type)).toEqual([
+      'Text',
+      'Text',
+      'Text',
+      'Text',
+    ])
+  })
+
+  it('unwraps nested Fragments', () => {
+    const jsx = el(
+      'Box',
+      null,
+      el(
+        React.Fragment,
+        null,
+        el(React.Fragment, null, el('Text', null, 'Nested'))
+      )
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(1)
+    expect(result.children![0].type).toBe('Text')
+  })
+
+  it('handles Fragments with text content', () => {
+    const jsx = el(
+      'Box',
+      null,
+      el(React.Fragment, null, 'Text', el('Element', null, 'Content'))
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(2)
+    expect(result.children![0]).toBe('Text')
+    expect(result.children![1].type).toBe('Element')
+  })
+
+  it('preserves Fragments in nested scenarios', () => {
+    const jsx = el(
+      'Root',
+      null,
+      el(
+        'Container',
+        null,
+        el(
+          React.Fragment,
+          null,
+          el('Item', null, '1'),
+          el('Item', null, '2')
+        )
+      )
+    )
+    const result = compileJSX(jsx)
+
+    const containerNode = result.children![0]
+    assertUINode(containerNode)
+    // Fragment children are flattened into Container
+    expect(containerNode.children).toHaveLength(2)
+    expect(containerNode.children!.map((c: any) => c.type)).toEqual([
+      'Item',
+      'Item',
+    ])
+  })
+})
+
+// ============================================================================
+// Key Preservation Tests
+// ============================================================================
+
+describe('JSX Compiler - Key Preservation', () => {
+  it('preserves key from element props', () => {
+    const jsx = el('Item', { key: 'item-1', id: 'id-1' })
+    const result = compileJSX(jsx)
+
+    expect(result.key).toBe('item-1')
+  })
+
+  it('preserves keys in children', () => {
+    const jsx = el(
+      'List',
+      null,
+      el('Item', { key: 'item-1' }, 'One'),
+      el('Item', { key: 'item-2' }, 'Two'),
+      el('Item', { key: 'item-3' }, 'Three')
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(3)
+    expect(result.children![0].key).toBe('item-1')
+    expect(result.children![1].key).toBe('item-2')
+    expect(result.children![2].key).toBe('item-3')
+  })
+
+  it('handles missing keys gracefully', () => {
+    const jsx = el(
+      'List',
+      null,
+      el('Item', null, 'No key'),
+      el('Item', { key: 'has-key' }, 'Has key')
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(2)
+    expect(result.children![0].key).toBeUndefined()
+    expect(result.children![1].key).toBe('has-key')
+  })
+
+  it('preserves string keys', () => {
+    const jsx = el('Item', { key: 'string-key-123' })
+    const result = compileJSX(jsx)
+
+    expect(result.key).toBe('string-key-123')
+    expect(typeof result.key).toBe('string')
+  })
+
+  it('preserves numeric keys converted to strings', () => {
+    // React keys are typically strings, but numeric keys get converted
+    const jsx = el('Item', { key: 1 })
+    const result = compileJSX(jsx)
+
+    expect(result.key).toBe('1')
+    expect(typeof result.key).toBe('string')
+  })
+
+  it('key not included in regular props', () => {
+    const jsx = el('Item', { key: 'item-1', id: 'id-1' })
+    const result = compileJSX(jsx)
+
+    expect(result.key).toBe('item-1')
+    // key should NOT be in props
+    expect(result.props.key).toBeUndefined()
+  })
+})
+
+// ============================================================================
+// Null/Undefined Children Filtering Tests
+// ============================================================================
+
+describe('JSX Compiler - Null/Undefined Filtering', () => {
+  it('filters out null children', () => {
+    const jsx = el(
+      'Box',
+      null,
+      'Before',
+      null,
+      'After'
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(2)
+    expect(result.children![0]).toBe('Before')
+    expect(result.children![1]).toBe('After')
+  })
+
+  it('filters out undefined children', () => {
+    const jsx = el(
+      'Box',
+      null,
+      'Text',
+      undefined,
+      el('Element', null, 'Content')
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(2)
+    expect(result.children![0]).toBe('Text')
+    assertUINode(result.children![1])
+  })
+
+  it('filters out boolean children (React false)', () => {
+    const jsx = el(
+      'Box',
+      null,
+      'Start',
+      false,
+      true,
+      'End'
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(2)
+    expect(result.children![0]).toBe('Start')
+    expect(result.children![1]).toBe('End')
+  })
+
+  it('handles all null/undefined/false children', () => {
+    const jsx = el(
+      'Box',
+      null,
+      null,
+      undefined,
+      false,
+      true
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.children).toEqual([])
+  })
+
+  it('filters falsy children in nested elements', () => {
+    const jsx = el(
+      'Box',
+      null,
+      el(
+        'Container',
+        null,
+        'Text',
+        null,
+        false,
+        undefined
+      )
+    )
+    const result = compileJSX(jsx)
+
+    const containerNode = result.children![0]
+    assertUINode(containerNode)
+    expect(containerNode.children).toHaveLength(1)
+    expect(containerNode.children![0]).toBe('Text')
+  })
+
+  it('filters null children from Fragments', () => {
+    const jsx = el(
+      'Box',
+      null,
+      el(
+        React.Fragment,
+        null,
+        'A',
+        null,
+        'B'
+      )
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(2)
+    expect(result.children![0]).toBe('A')
+    expect(result.children![1]).toBe('B')
+  })
+})
+
+// ============================================================================
+// Props and Children Interaction Tests
+// ============================================================================
+
+describe('JSX Compiler - Props and Children Together', () => {
+  it('includes both props and children in result', () => {
+    const jsx = el('Text', { bold: true, size: 12 }, 'Hello')
+    const result = compileJSX(jsx)
+
+    expect(result.props.bold).toBe(true)
+    expect(result.props.size).toBe(12)
+    expect(result.children).toHaveLength(1)
+    expect(result.children![0]).toBe('Hello')
+  })
+
+  it('handles component with no props but with children', () => {
+    const jsx = el('Box', null, 'Child content')
+    const result = compileJSX(jsx)
+
+    expect(result.props).toEqual({})
+    expect(result.children).toHaveLength(1)
+  })
+
+  it('handles component with props but no children', () => {
+    const jsx = el('Button', { label: 'Click me' })
+    const result = compileJSX(jsx)
+
+    expect(result.props.label).toBe('Click me')
+    expect(result.children).toBeUndefined()
+  })
+
+  it('handles component with neither props nor children', () => {
+    const jsx = el('Empty')
+    const result = compileJSX(jsx)
+
+    expect(result.props).toEqual({})
+    expect(result.children).toBeUndefined()
+  })
+
+  it('complex real-world structure', () => {
+    const jsx = el(
+      'Panel',
+      { title: 'Settings', collapsible: true },
+      el(
+        'Section',
+        { id: 'general' },
+        el('Label', null, 'Username'),
+        el('Input', { type: 'text', placeholder: 'Enter name' })
+      ),
+      el(
+        'Section',
+        { id: 'advanced' },
+        el('Checkbox', { label: 'Enable debug mode' }),
+        el('Checkbox', { label: 'Enable logging' })
+      )
+    )
+    const result = compileJSX(jsx)
+
+    expect(result.type).toBe('Panel')
+    expect(result.props.title).toBe('Settings')
+    expect(result.props.collapsible).toBe(true)
+    expect(result.children).toHaveLength(2)
+
+    const firstSection = result.children![0]
+    assertUINode(firstSection)
+    expect(firstSection.type).toBe('Section')
+    expect(firstSection.props.id).toBe('general')
+    expect(firstSection.children).toHaveLength(2)
+  })
+})
+
+// ============================================================================
+// Edge Cases Tests
+// ============================================================================
+
+describe('JSX Compiler - Edge Cases', () => {
+  it('handles empty string children', () => {
+    const jsx = el('Text', null, '')
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(1)
+    expect(result.children![0]).toBe('')
+  })
+
+  it('handles whitespace-only children', () => {
+    const jsx = el('Text', null, '   ')
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(1)
+    expect(result.children![0]).toBe('   ')
+  })
+
+  it('handles numeric children as strings', () => {
+    const jsx = el('Counter', null, 42)
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(1)
+    expect(result.children![0]).toBe('42')
+  })
+
+  it('handles zero as child', () => {
+    const jsx = el('Box', null, 0)
+    const result = compileJSX(jsx)
+
+    expect(result.children).toHaveLength(1)
+    expect(result.children![0]).toBe('0')
+  })
+
+  it('handles empty array children prop', () => {
+    const jsx = el('List', { items: [] })
+    const result = compileJSX(jsx)
+
+    expect(result.props.items).toEqual([])
+  })
+
+  it('converts number zero prop correctly', () => {
+    const jsx = el('Component', { count: 0 })
+    const result = compileJSX(jsx)
+
+    expect(result.props.count).toBe(0)
+  })
+
+  it('converts false prop correctly', () => {
+    const jsx = el('Component', { disabled: false })
+    const result = compileJSX(jsx)
+
+    expect(result.props.disabled).toBe(false)
+  })
+
+  it('handles very long prop names', () => {
+    const longPropName = 'a'.repeat(1000)
+    const jsx = el('Component', { [longPropName]: 'value' })
+    const result = compileJSX(jsx)
+
+    expect(result.props[longPropName]).toBe('value')
+  })
+
+  it('handles props with special characters in names', () => {
+    const jsx = el('Component', { 'data-test-id': 'test', 'aria-label': 'label' })
+    const result = compileJSX(jsx)
+
+    expect(result.props['data-test-id']).toBe('test')
+    expect(result.props['aria-label']).toBe('label')
+  })
+})
+
+// ============================================================================
+// Type and Structure Validation Tests
+// ============================================================================
+
+describe('JSX Compiler - Output Structure Validation', () => {
+  it('always returns UINode-compatible object', () => {
+    const jsx = el('Component')
+    const result = compileJSX(jsx)
+
+    assertUINode(result)
+  })
+
+  it('result type is always a string', () => {
+    const jsx = el('MyComponent')
+    const result = compileJSX(jsx)
+
+    expect(typeof result.type).toBe('string')
+  })
+
+  it('result props is always an object', () => {
+    const jsx = el('Component', { any: 'prop' })
+    const result = compileJSX(jsx)
+
+    expect(typeof result.props).toBe('object')
+    expect(result.props !== null).toBe(true)
+    expect(!Array.isArray(result.props)).toBe(true)
+  })
+
+  it('children field is array or undefined', () => {
+    const withChildren = el('Box', null, 'text')
+    const resultWith = compileJSX(withChildren)
+    expect(resultWith.children === undefined || Array.isArray(resultWith.children)).toBe(true)
+
+    const noChildren = el('Box')
+    const resultWithout = compileJSX(noChildren)
+    expect(resultWithout.children === undefined || Array.isArray(resultWithout.children)).toBe(true)
+  })
+
+  it('key field is string or undefined', () => {
+    const withKey = el('Item', { key: 'test' })
+    const resultWith = compileJSX(withKey)
+    expect(resultWith.key === undefined || typeof resultWith.key === 'string').toBe(true)
+
+    const noKey = el('Item')
+    const resultWithout = compileJSX(noKey)
+    expect(resultWithout.key === undefined || typeof resultWithout.key === 'string').toBe(true)
+  })
+})
+
+// ============================================================================
+// Deep Tree Compiler Tests (compileJSXDeep)
+// ============================================================================
+
+// Import the deep tree compiler for testing
+import { compileJSXDeep } from '../../core/compiler'
+
+describe('JSX Compiler - Deep Tree Optimization (compileJSXDeep)', () => {
+  it('compiles simple elements identically to compileJSX', () => {
+    const jsx = el('Box', { padding: 2 })
+    const regularResult = compileJSX(jsx)
+    const deepResult = compileJSXDeep(jsx)
+
+    expect(deepResult).toEqual(regularResult)
+  })
+
+  it('compiles elements with string children', () => {
+    const jsx = el('Text', { bold: true }, 'Hello World')
+    const regularResult = compileJSX(jsx)
+    const deepResult = compileJSXDeep(jsx)
+
+    expect(deepResult).toEqual(regularResult)
+  })
+
+  it('compiles nested elements', () => {
+    const jsx = el(
+      'Box',
+      { padding: 2 },
+      el('Text', null, 'First'),
+      el('Text', null, 'Second')
+    )
+    const regularResult = compileJSX(jsx)
+    const deepResult = compileJSXDeep(jsx)
+
+    expect(deepResult).toEqual(regularResult)
+  })
+
+  it('handles Fragments correctly', () => {
+    const jsx = el(
+      'Box',
+      null,
+      el(React.Fragment, null, el('Text', null, 'A'), el('Text', null, 'B'))
+    )
+    const regularResult = compileJSX(jsx)
+    const deepResult = compileJSXDeep(jsx)
+
+    expect(deepResult).toEqual(regularResult)
+  })
+
+  it('preserves keys', () => {
+    const jsx = el(
+      'List',
+      null,
+      el('Item', { key: 'item-1' }, 'One'),
+      el('Item', { key: 'item-2' }, 'Two')
+    )
+    const regularResult = compileJSX(jsx)
+    const deepResult = compileJSXDeep(jsx)
+
+    expect(deepResult).toEqual(regularResult)
+  })
+
+  it('filters null/undefined/boolean children', () => {
+    const jsx = el(
+      'Box',
+      null,
+      'Before',
+      null,
+      undefined,
+      false,
+      true,
+      'After'
+    )
+    const regularResult = compileJSX(jsx)
+    const deepResult = compileJSXDeep(jsx)
+
+    expect(deepResult).toEqual(regularResult)
+  })
+
+  it('converts numeric children to strings', () => {
+    const jsx = el('Box', null, 'Count:', 42, 0)
+    const regularResult = compileJSX(jsx)
+    const deepResult = compileJSXDeep(jsx)
+
+    expect(deepResult).toEqual(regularResult)
+  })
+
+  it('handles deeply nested trees without stack overflow', () => {
+    // Build a tree with 500 levels of nesting
+    // This is enough to potentially cause issues with unoptimized recursion
+    let deepElement: React.ReactElement = el('Leaf', null, 'content')
+    for (let i = 0; i < 500; i++) {
+      deepElement = el('Wrapper', { level: i }, deepElement)
+    }
+
+    // Should not throw
+    const result = compileJSXDeep(deepElement)
+
+    // Verify structure
+    expect(result.type).toBe('Wrapper')
+    expect(result.props.level).toBe(499)
+
+    // Traverse to the leaf
+    let current: UINode = result
+    let depth = 0
+    while (current.children && current.children.length > 0) {
+      const child = current.children[0]
+      if (typeof child === 'string') break
+      current = child
+      depth++
+    }
+
+    expect(depth).toBe(500)
+    expect(current.type).toBe('Leaf')
+  })
+
+  it('handles mixed content at all depths', () => {
+    const jsx = el(
+      'Root',
+      { rootProp: 'root' },
+      'Text before',
+      el(
+        'Child',
+        { childProp: 'child' },
+        el('Grandchild', { grandchildProp: 'grandchild' }, 'Deep text')
+      ),
+      'Text after'
+    )
+    const regularResult = compileJSX(jsx)
+    const deepResult = compileJSXDeep(jsx)
+
+    expect(deepResult).toEqual(regularResult)
+  })
+
+  it('handles nested Fragments', () => {
+    const jsx = el(
+      'Box',
+      null,
+      el(
+        React.Fragment,
+        null,
+        el(React.Fragment, null, el('Text', null, 'Deeply nested'))
+      )
+    )
+    const regularResult = compileJSX(jsx)
+    const deepResult = compileJSXDeep(jsx)
+
+    expect(deepResult).toEqual(regularResult)
+  })
+
+  it('handles empty children array', () => {
+    const jsx = el('Box', { children: [] })
+    const regularResult = compileJSX(jsx)
+    const deepResult = compileJSXDeep(jsx)
+
+    expect(deepResult).toEqual(regularResult)
+  })
+})