@pyreon/compiler 0.14.0 → 0.15.0

package/src/tests/runtime/control-flow.test.ts

@@ -0,0 +1,159 @@
+// @vitest-environment happy-dom
+/// <reference lib="dom" />
+import { For, h, Show } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { describe, expect, it } from 'vitest'
+import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
+
+/**
+ * Compiler-runtime tests — control-flow primitives.
+ *
+ * These tests verify `<For>` and `<Show>` integrate correctly with the
+ * Pyreon mount path. They use direct `h()` calls instead of JSX because
+ * the harness's `compileAndMount` runs only the template-optimization
+ * pass of `@pyreon/compiler` — the bundler-level JSX → `h()` transform
+ * (normally done by Vite's esbuild) does NOT run in the harness, so JSX
+ * containing components like `<For>` would be left raw and unparseable.
+ *
+ * `<Match>`, `<Suspense>`, `<ErrorBoundary>` are deferred to Phase C1
+ * because they need real Chromium for the async / boundary shapes.
+ */
+
+describe('compiler-runtime — control flow (h() form)', () => {
+  it('<For> renders each item and reacts to signal updates', async () => {
+    const items = signal([
+      { id: 1, name: 'a' },
+      { id: 2, name: 'b' },
+    ])
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'root' },
+        h(For, {
+          each: items,
+          by: (i: { id: number; name: string }) => i.id,
+          children: (i: { name: string }) => h('span', null, i.name),
+        }),
+      ),
+    )
+    const root = container.querySelector('#root')!
+    expect(root.querySelectorAll('span').length).toBe(2)
+    expect(root.textContent).toBe('ab')
+    items.set([
+      { id: 1, name: 'a' },
+      { id: 2, name: 'b' },
+      { id: 3, name: 'c' },
+    ])
+    await flush()
+    expect(root.querySelectorAll('span').length).toBe(3)
+    expect(root.textContent).toBe('abc')
+    unmount()
+  })
+
+  it('<For> handles removal correctly', async () => {
+    const items = signal([
+      { id: 1, name: 'a' },
+      { id: 2, name: 'b' },
+      { id: 3, name: 'c' },
+    ])
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'root' },
+        h(For, {
+          each: items,
+          by: (i: { id: number; name: string }) => i.id,
+          children: (i: { name: string }) => h('span', null, i.name),
+        }),
+      ),
+    )
+    const root = container.querySelector('#root')!
+    expect(root.querySelectorAll('span').length).toBe(3)
+    items.set([{ id: 2, name: 'b' }])
+    await flush()
+    expect(root.querySelectorAll('span').length).toBe(1)
+    expect(root.textContent).toBe('b')
+    unmount()
+  })
+
+  it('<Show> conditionally renders based on signal', async () => {
+    const visible = signal(true)
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'root' },
+        h(Show, { when: () => visible(), children: h('span', { id: 'x' }, 'visible') }),
+      ),
+    )
+    const root = container.querySelector('#root')!
+    expect(root.querySelector('#x')).not.toBeNull()
+    visible.set(false)
+    await flush()
+    expect(root.querySelector('#x')).toBeNull()
+    visible.set(true)
+    await flush()
+    expect(root.querySelector('#x')).not.toBeNull()
+    unmount()
+  })
+
+  it('<Show> with fallback renders fallback when condition is false', async () => {
+    const flag = signal(false)
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'root' },
+        h(Show, {
+          when: () => flag(),
+          fallback: h('span', { id: 'fb' }, 'fallback'),
+          children: h('span', { id: 'x' }, 'visible'),
+        }),
+      ),
+    )
+    const root = container.querySelector('#root')!
+    expect(root.querySelector('#fb')).not.toBeNull()
+    expect(root.querySelector('#x')).toBeNull()
+    flag.set(true)
+    await flush()
+    expect(root.querySelector('#fb')).toBeNull()
+    expect(root.querySelector('#x')).not.toBeNull()
+    unmount()
+  })
+
+  it('<Show> with value prop (not accessor) accepts boolean', () => {
+    // Per #352's `<Show>` defensive normalization fix — `when` accepts
+    // both `() => boolean` accessor AND raw boolean (for static cases +
+    // signal auto-call edge case).
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'root' },
+        h(Show, { when: true, children: h('span', { id: 'x' }, 'on') }),
+      ),
+    )
+    expect(container.querySelector('#x')).not.toBeNull()
+    unmount()
+  })
+
+  it('nested control flow: <Show> inside <For>', async () => {
+    const items = signal([
+      { id: 1, name: 'a', visible: true },
+      { id: 2, name: 'b', visible: false },
+      { id: 3, name: 'c', visible: true },
+    ])
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'root' },
+        h(For, {
+          each: items,
+          by: (i: { id: number }) => i.id,
+          children: (i: { name: string; visible: boolean }) =>
+            h(Show, { when: () => i.visible, children: h('span', null, i.name) }),
+        }),
+      ),
+    )
+    const root = container.querySelector('#root')!
+    expect(root.textContent).toBe('ac')
+    unmount()
+  })
+})

package/src/tests/runtime/dom-properties.test.ts

@@ -0,0 +1,138 @@
+// @vitest-environment happy-dom
+/// <reference lib="dom" />
+import { signal } from '@pyreon/reactivity'
+import { describe, expect, it } from 'vitest'
+import { flush } from '@pyreon/test-utils/browser'
+import { compileAndMount } from './harness'
+
+/**
+ * Compiler-runtime tests — DOM-property assignment.
+ *
+ * The #352 DOM-property bug used `setAttribute("value", v)` instead of
+ * `el.value = v` for IDL properties whose live value diverges from the
+ * content attribute. The fix added a `DOM_PROPS` set covering: value,
+ * checked, selected, disabled, multiple, readOnly, indeterminate. This
+ * file pins down each property + asserts the compiled output uses
+ * property assignment so the live state reflects updates correctly.
+ *
+ * Note: happy-dom's `.value` getter follows the attribute even in
+ * static cases, so for `value` specifically the assertion verifies
+ * the post-update read works (which would also work via setAttribute
+ * in happy-dom — the real differentiator is in real Chromium after a
+ * user types). For `checked` / `disabled` / etc., happy-dom DOES
+ * differentiate property vs attribute, so those assertions are robust.
+ */
+
+describe('compiler-runtime — DOM properties', () => {
+  it('value property reflects signal updates via .value', async () => {
+    const text = signal('initial')
+    const { container, unmount } = compileAndMount(
+      `<div><input id="i" value={() => text()} /></div>`,
+      { text },
+    )
+    const input = container.querySelector<HTMLInputElement>('#i')!
+    expect(input.value).toBe('initial')
+    text.set('updated')
+    await flush()
+    expect(input.value).toBe('updated')
+    text.set('')
+    await flush()
+    expect(input.value).toBe('')
+    unmount()
+  })
+
+  it('checked property reflects via .checked (not boolean attribute)', async () => {
+    const isOn = signal(true)
+    const { container, unmount } = compileAndMount(
+      `<div><input id="c" type="checkbox" checked={() => isOn()} /></div>`,
+      { isOn },
+    )
+    const cb = container.querySelector<HTMLInputElement>('#c')!
+    expect(cb.checked).toBe(true)
+    isOn.set(false)
+    await flush()
+    expect(cb.checked).toBe(false)
+    isOn.set(true)
+    await flush()
+    expect(cb.checked).toBe(true)
+    unmount()
+  })
+
+  it('disabled property reflects via .disabled', async () => {
+    const off = signal(false)
+    const { container, unmount } = compileAndMount(
+      `<div><button id="b" disabled={() => off()}>x</button></div>`,
+      { off },
+    )
+    const btn = container.querySelector<HTMLButtonElement>('#b')!
+    expect(btn.disabled).toBe(false)
+    off.set(true)
+    await flush()
+    expect(btn.disabled).toBe(true)
+    off.set(false)
+    await flush()
+    expect(btn.disabled).toBe(false)
+    unmount()
+  })
+
+  it('selected on <option> reflects via .selected', async () => {
+    // Need a sibling option so the browser's "at least one option must
+    // be selected" auto-selection doesn't pick our option after we
+    // unselect it.
+    const sel = signal(false)
+    const { container, unmount } = compileAndMount(
+      `<div><select><option>first</option><option id="o" selected={() => sel()}>a</option></select></div>`,
+      { sel },
+    )
+    const opt = container.querySelector<HTMLOptionElement>('#o')!
+    expect(opt.selected).toBe(false)
+    sel.set(true)
+    await flush()
+    expect(opt.selected).toBe(true)
+    unmount()
+  })
+
+  it('multiple on <select> reflects via .multiple', async () => {
+    const multi = signal(true)
+    const { container, unmount } = compileAndMount(
+      `<div><select id="s" multiple={() => multi()}><option>a</option></select></div>`,
+      { multi },
+    )
+    const sel = container.querySelector<HTMLSelectElement>('#s')!
+    expect(sel.multiple).toBe(true)
+    multi.set(false)
+    await flush()
+    expect(sel.multiple).toBe(false)
+    unmount()
+  })
+
+  it('readOnly on <input> reflects via .readOnly', async () => {
+    const ro = signal(false)
+    const { container, unmount } = compileAndMount(
+      `<div><input id="i" readOnly={() => ro()} /></div>`,
+      { ro },
+    )
+    const input = container.querySelector<HTMLInputElement>('#i')!
+    expect(input.readOnly).toBe(false)
+    ro.set(true)
+    await flush()
+    expect(input.readOnly).toBe(true)
+    unmount()
+  })
+
+  it('non-DOM-prop attributes still go through setAttribute', async () => {
+    // `placeholder` is a real HTML attribute, not a DOM IDL property
+    // that diverges. Should still flow through setAttribute (not break).
+    const placeholder = signal('type here')
+    const { container, unmount } = compileAndMount(
+      `<div><input id="i" placeholder={() => placeholder()} /></div>`,
+      { placeholder },
+    )
+    const input = container.querySelector<HTMLInputElement>('#i')!
+    expect(input.getAttribute('placeholder')).toBe('type here')
+    placeholder.set('changed')
+    await flush()
+    expect(input.getAttribute('placeholder')).toBe('changed')
+    unmount()
+  })
+})

package/src/tests/runtime/events.test.ts

@@ -0,0 +1,301 @@
+// @vitest-environment happy-dom
+/// <reference lib="dom" />
+import { signal } from '@pyreon/reactivity'
+import { describe, expect, it } from 'vitest'
+import { compileAndMount } from './harness'
+
+/**
+ * Compiler-runtime tests — event handler emission.
+ *
+ * Coverage matrix: delegated (single-word common events) vs non-delegated
+ * (multi-word + uncommon) × static handler ref vs inline arrow × event
+ * dispatch hits the handler. The #352 event-name casing bug surfaced
+ * because non-delegated events used the wrong casing; this file locks in
+ * each shape independently.
+ */
+
+describe('compiler-runtime — events', () => {
+  // ── Delegated events (single-word, common) ──────────────────────────
+  it('onClick fires on bubbled click', () => {
+    let fired = 0
+    const handler = () => {
+      fired++
+    }
+    const { container, unmount } = compileAndMount(
+      `<div><button id="b" onClick={handler}>x</button></div>`,
+      { handler },
+    )
+    container.querySelector<HTMLButtonElement>('#b')!.click()
+    expect(fired).toBe(1)
+    unmount()
+  })
+
+  it('onClick with inline arrow handler fires', () => {
+    const count = signal(0)
+    const { container, unmount } = compileAndMount(
+      `<div><button id="b" onClick={() => count.set(count() + 1)}>x</button></div>`,
+      { count },
+    )
+    const btn = container.querySelector<HTMLButtonElement>('#b')!
+    btn.click()
+    btn.click()
+    expect(count()).toBe(2)
+    unmount()
+  })
+
+  it('onInput fires on real input event', () => {
+    let value = ''
+    const handler = (e: Event) => {
+      value = (e.target as HTMLInputElement).value
+    }
+    const { container, unmount } = compileAndMount(
+      `<div><input id="i" onInput={handler} /></div>`,
+      { handler },
+    )
+    const input = container.querySelector<HTMLInputElement>('#i')!
+    input.value = 'hello'
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+    expect(value).toBe('hello')
+    unmount()
+  })
+
+  it('onChange fires on real change event', () => {
+    let changed = 0
+    const handler = () => {
+      changed++
+    }
+    const { container, unmount } = compileAndMount(
+      `<div><input id="i" onChange={handler} /></div>`,
+      { handler },
+    )
+    container
+      .querySelector<HTMLInputElement>('#i')!
+      .dispatchEvent(new Event('change', { bubbles: true }))
+    expect(changed).toBe(1)
+    unmount()
+  })
+
+  it('onSubmit fires on form submit', () => {
+    let submitted = 0
+    const handler = (e: Event) => {
+      e.preventDefault()
+      submitted++
+    }
+    const { container, unmount } = compileAndMount(
+      `<div><form id="f" onSubmit={handler}><button type="submit">go</button></form></div>`,
+      { handler },
+    )
+    const form = container.querySelector<HTMLFormElement>('#f')!
+    form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+    expect(submitted).toBe(1)
+    unmount()
+  })
+
+  it('onFocus fires on focus event', () => {
+    let focused = 0
+    const handler = () => {
+      focused++
+    }
+    const { container, unmount } = compileAndMount(
+      `<div><input id="i" onFocus={handler} /></div>`,
+      { handler },
+    )
+    container
+      .querySelector<HTMLInputElement>('#i')!
+      .dispatchEvent(new Event('focus', { bubbles: true }))
+    expect(focused).toBe(1)
+    unmount()
+  })
+
+  it('onBlur fires on blur event', () => {
+    let blurred = 0
+    const handler = () => {
+      blurred++
+    }
+    const { container, unmount } = compileAndMount(
+      `<div><input id="i" onBlur={handler} /></div>`,
+      { handler },
+    )
+    container
+      .querySelector<HTMLInputElement>('#i')!
+      .dispatchEvent(new Event('blur', { bubbles: true }))
+    expect(blurred).toBe(1)
+    unmount()
+  })
+
+  // ── Non-delegated events (multi-word — were broken pre-#352) ────────
+  it('onKeyDown fires (multi-word event-name lowercase regression)', () => {
+    let key = ''
+    const handler = (e: KeyboardEvent) => {
+      key = e.key
+    }
+    const { container, unmount } = compileAndMount(
+      `<div><input id="i" onKeyDown={handler} /></div>`,
+      { handler },
+    )
+    container
+      .querySelector<HTMLInputElement>('#i')!
+      .dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }))
+    expect(key).toBe('Tab')
+    unmount()
+  })
+
+  it('onKeyUp fires (multi-word event-name lowercase regression)', () => {
+    let key = ''
+    const handler = (e: KeyboardEvent) => {
+      key = e.key
+    }
+    const { container, unmount } = compileAndMount(
+      `<div><input id="i" onKeyUp={handler} /></div>`,
+      { handler },
+    )
+    container
+      .querySelector<HTMLInputElement>('#i')!
+      .dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter', bubbles: true }))
+    expect(key).toBe('Enter')
+    unmount()
+  })
+
+  it('onMouseEnter fires (non-bubbling event)', () => {
+    let entered = 0
+    const handler = () => {
+      entered++
+    }
+    const { container, unmount } = compileAndMount(
+      `<div><span id="s" onMouseEnter={handler}>hover</span></div>`,
+      { handler },
+    )
+    container
+      .querySelector<HTMLSpanElement>('#s')!
+      .dispatchEvent(new MouseEvent('mouseenter'))
+    expect(entered).toBe(1)
+    unmount()
+  })
+
+  it('onPointerLeave fires (non-bubbling event)', () => {
+    let left = 0
+    const handler = () => {
+      left++
+    }
+    const { container, unmount } = compileAndMount(
+      `<div><span id="s" onPointerLeave={handler}>hover</span></div>`,
+      { handler },
+    )
+    container
+      .querySelector<HTMLSpanElement>('#s')!
+      .dispatchEvent(new PointerEvent('pointerleave'))
+    expect(left).toBe(1)
+    unmount()
+  })
+
+  // Locks in the React→DOM event-name mapping for `onDoubleClick` →
+  // `dblclick`. The mapping lives in BOTH compiler backends:
+  //   - JS fallback: packages/core/compiler/src/jsx.ts (doubleclick → dblclick)
+  //   - Rust native: packages/core/compiler/native/src/lib.rs (same shape)
+  // `onContextMenu` lowercases correctly (contextmenu) — no remap needed.
+  it('onDoubleClick fires (multi-word + delegated)', () => {
+    let dbl = 0
+    const handler = () => {
+      dbl++
+    }
+    const { container, unmount } = compileAndMount(
+      `<div><button id="b" onDoubleClick={handler}>x</button></div>`,
+      { handler },
+    )
+    container
+      .querySelector<HTMLButtonElement>('#b')!
+      .dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    expect(dbl).toBe(1)
+    unmount()
+  })
+
+  it('onContextMenu fires (multi-word, lowercases to contextmenu)', () => {
+    let menu = 0
+    const handler = () => {
+      menu++
+    }
+    const { container, unmount } = compileAndMount(
+      `<div><button id="b" onContextMenu={handler}>x</button></div>`,
+      { handler },
+    )
+    container
+      .querySelector<HTMLButtonElement>('#b')!
+      .dispatchEvent(new MouseEvent('contextmenu', { bubbles: true }))
+    expect(menu).toBe(1)
+    unmount()
+  })
+
+  // Audit: every multi-word React event-prop in the official component-prop
+  // list either (a) has an entry in REACT_EVENT_REMAP, OR (b) lowercases
+  // correctly to the DOM event name. This sweep exercises the most common
+  // multi-word events from across the family categories (mouse, pointer,
+  // keyboard, drag, touch, animation, transition, media, composition, form)
+  // to lock in that lowercasing alone is the right rule for all of them.
+  // If a new React event-prop is added in a future release with a non-trivial
+  // mismatch, this sweep won't catch it — but the runtime test for the
+  // specific event will. Keep this sweep as the structural audit.
+  const lowercaseSweep: ReadonlyArray<{ prop: string; event: string }> = [
+    { prop: 'onKeyDown', event: 'keydown' },
+    { prop: 'onKeyUp', event: 'keyup' },
+    { prop: 'onMouseDown', event: 'mousedown' },
+    { prop: 'onMouseUp', event: 'mouseup' },
+    { prop: 'onMouseEnter', event: 'mouseenter' },
+    { prop: 'onMouseLeave', event: 'mouseleave' },
+    { prop: 'onMouseMove', event: 'mousemove' },
+    { prop: 'onMouseOut', event: 'mouseout' },
+    { prop: 'onMouseOver', event: 'mouseover' },
+    { prop: 'onPointerDown', event: 'pointerdown' },
+    { prop: 'onPointerMove', event: 'pointermove' },
+    { prop: 'onPointerUp', event: 'pointerup' },
+    { prop: 'onPointerCancel', event: 'pointercancel' },
+    { prop: 'onPointerEnter', event: 'pointerenter' },
+    { prop: 'onPointerLeave', event: 'pointerleave' },
+    { prop: 'onPointerOver', event: 'pointerover' },
+    { prop: 'onPointerOut', event: 'pointerout' },
+    { prop: 'onGotPointerCapture', event: 'gotpointercapture' },
+    { prop: 'onLostPointerCapture', event: 'lostpointercapture' },
+    { prop: 'onDragStart', event: 'dragstart' },
+    { prop: 'onDragEnd', event: 'dragend' },
+    { prop: 'onDragEnter', event: 'dragenter' },
+    { prop: 'onDragLeave', event: 'dragleave' },
+    { prop: 'onDragOver', event: 'dragover' },
+    { prop: 'onTouchStart', event: 'touchstart' },
+    { prop: 'onTouchEnd', event: 'touchend' },
+    { prop: 'onTouchMove', event: 'touchmove' },
+    { prop: 'onTouchCancel', event: 'touchcancel' },
+    { prop: 'onAnimationStart', event: 'animationstart' },
+    { prop: 'onAnimationEnd', event: 'animationend' },
+    { prop: 'onAnimationIteration', event: 'animationiteration' },
+    { prop: 'onTransitionEnd', event: 'transitionend' },
+    { prop: 'onCompositionStart', event: 'compositionstart' },
+    { prop: 'onCompositionEnd', event: 'compositionend' },
+    { prop: 'onCompositionUpdate', event: 'compositionupdate' },
+    { prop: 'onContextMenu', event: 'contextmenu' },
+    { prop: 'onBeforeInput', event: 'beforeinput' },
+    { prop: 'onTimeUpdate', event: 'timeupdate' },
+    { prop: 'onVolumeChange', event: 'volumechange' },
+    { prop: 'onCanPlayThrough', event: 'canplaythrough' },
+    { prop: 'onLoadedData', event: 'loadeddata' },
+    { prop: 'onLoadedMetadata', event: 'loadedmetadata' },
+    { prop: 'onLoadStart', event: 'loadstart' },
+    { prop: 'onRateChange', event: 'ratechange' },
+    { prop: 'onDurationChange', event: 'durationchange' },
+  ]
+  for (const { prop, event } of lowercaseSweep) {
+    it(`${prop} → ${event} (lowercase, no remap)`, () => {
+      let fired = 0
+      const handler = () => {
+        fired++
+      }
+      const { container, unmount } = compileAndMount(
+        `<div><button id="b" ${prop}={handler}>x</button></div>`,
+        { handler },
+      )
+      container
+        .querySelector<HTMLButtonElement>('#b')!
+        .dispatchEvent(new Event(event, { bubbles: true }))
+      expect(fired).toBe(1)
+      unmount()
+    })
+  }
+})

package/src/tests/runtime/harness.ts

@@ -0,0 +1,94 @@
+import { h } from '@pyreon/core'
+import * as reactivity from '@pyreon/reactivity'
+import * as runtimeDom from '@pyreon/runtime-dom'
+import { mountInBrowser } from '@pyreon/test-utils/browser'
+import type { MountInBrowserResult } from '@pyreon/test-utils/browser'
+import { transformJSX } from '../../jsx'
+
+/**
+ * Compiler-runtime test harness.
+ *
+ * Bridges the gap between the compiler's unit tests (which assert on the
+ * generated source string) and the e2e tests (which exercise full apps).
+ * The unit tests in `jsx.test.ts` proved each of PR #352's 4 silent
+ * compiler bugs produced syntactically valid output; nothing in the unit
+ * suite caught that the output was *behaviorally* wrong. This layer
+ * compiles a JSX snippet through the real compiler, drops it into a real
+ * Chromium DOM, and asserts observable behavior — events fire, signals
+ * propagate, props reflect on the right DOM channel.
+ *
+ * ## How it works
+ *
+ * 1. Wrap the snippet as `function App(props) { return ${jsxExpr} }`
+ *    so the compiler emits a `function` declaration with a return.
+ * 2. `transformJSX(source)` produces JS that imports specific helpers
+ *    (`_tpl`, `_bind`, `_bindDirect`, `_bindText`, etc.) from
+ *    `@pyreon/runtime-dom`.
+ * 3. Strip the import statement and the `export` keyword.
+ * 4. Build a `new Function(...args, code)` whose parameter list is the
+ *    union of every runtime-dom export plus the keys of the test's
+ *    `context` object (signals, event handlers). The compiled code uses
+ *    those names directly and `new Function` resolves them via the
+ *    closure-like parameter binding.
+ * 5. Invoke the factory to get the `App` component back, then render
+ *    via `h(App)` + `mountInBrowser`.
+ *
+ * ## Why not Vite / esbuild bundling
+ *
+ * The previous bundle-level treeshake tests (in `flow`, `runtime-dom`,
+ * `styler`) use `vite.build()` — that's the right tool for asserting
+ * tree-shaking but each invocation costs 100-500ms. This harness needs
+ * to scale to ~50 tests in Phase B2; the `new Function` path runs in
+ * single-digit ms per test.
+ *
+ * ## Caveats
+ *
+ * - Snippets must be self-contained JSX expressions (no external imports).
+ * - All non-runtime-dom symbols (signals, handlers, components) must be
+ *   passed in via the `context` parameter.
+ * - The compiler is invoked in JS-fallback mode if the native binary isn't
+ *   available — same as the rest of the test suite.
+ */
+export function compileAndMount(
+  jsxExpr: string,
+  context: Record<string, unknown> = {},
+): MountInBrowserResult {
+  // Wrap as a function so the compiler emits a return statement.
+  const source = `export function App(props) { return ${jsxExpr} }`
+  const compiled = transformJSX(source, 'compile-runtime-test.tsx').code
+
+  // Strip ALL `@pyreon/*` imports — we inject the symbols by name
+  // through `new Function` parameters instead. Both runtime-dom and
+  // reactivity exports are unioned in below, so any compiler-emitted
+  // import (`_tpl`, `_bind`, `_bindDirect`, `_bindText`, `_applyProps`,
+  // etc.) resolves through the parameter binding. Strip the `export`
+  // keyword so `App` is in factory scope.
+  const code = compiled
+    .replace(/^\s*import\s*\{[^}]+\}\s*from\s*["']@pyreon\/[^"']+["'];?\s*$/gm, '')
+    .replace(/export\s+function\s+App/, 'function App')
+
+  // Union of runtime-dom + reactivity exports + test-supplied context,
+  // fed into the factory's parameter list. The compiled code uses these
+  // names directly (e.g. `_tpl(...)`, `_bind(...)`, `sig.set(...)`) —
+  // `new Function` binds them via closure-equivalent parameter resolution.
+  // Same-name overrides resolve in declaration order: later wins. We put
+  // user-supplied context LAST so a test can shadow a runtime export if
+  // it ever needs to (rare).
+  const runtimeKeys = Object.keys(runtimeDom)
+  const reactivityKeys = Object.keys(reactivity).filter((k) => !runtimeKeys.includes(k))
+  const contextKeys = Object.keys(context).filter(
+    (k) => !runtimeKeys.includes(k) && !reactivityKeys.includes(k),
+  )
+  const allKeys = [...runtimeKeys, ...reactivityKeys, ...contextKeys]
+  const allValues = [
+    ...runtimeKeys.map((k) => (runtimeDom as Record<string, unknown>)[k]),
+    ...reactivityKeys.map((k) => (reactivity as Record<string, unknown>)[k]),
+    ...contextKeys.map((k) => context[k]),
+  ]
+
+  // eslint-disable-next-line no-new-func
+  const factory = new Function(...allKeys, `${code}\nreturn App`)
+  const App = factory(...allValues) as (props: object) => unknown
+
+  return mountInBrowser(h(App as never, {}) as never)
+}