@pyreon/compiler 0.24.5 → 0.24.6

package/src/tests/reactivity-lens.test.ts

@@ -1,170 +0,0 @@
-import { transformJSX_JS } from '../jsx'
-import { analyzeReactivity, formatReactivityLens } from '../reactivity-lens'
-import type { ReactivityFinding } from '../reactivity-lens'
-
-/**
- * Reactivity Lens — unit + drift gate.
- *
- * The load-bearing correctness contract: a lens span is a FAITHFUL RECORD of
- * a codegen decision, never an approximation. Two invariants are gated here:
- *
- *  1. **Additive** — collecting the lens does NOT change emitted `code`
- *     (kill-criterion a). Bisect: if a future edit makes lens collection
- *     mutate codegen, `additive` fails.
- *  2. **Drift** — every positive `reactive*` span's OUTPUT carries the
- *     matching codegen token (`_bind`/`_bindText`/`_rp`), and every
- *     `static-text` span's text is NOT reactively bound (kill-criterion b).
- *     Bisect: reverting the `lens(...)` call at any instrumented site drops
- *     the corresponding span and the matching `expect(kinds).toContain(...)`
- *     fails — documented per-fixture below.
- */
-
-function kindsAt(code: string): string[] {
-  return analyzeReactivity(code).findings.map((f) => f.kind)
-}
-function find(code: string, kind: string): ReactivityFinding[] {
-  return analyzeReactivity(code).findings.filter((f) => f.kind === kind)
-}
-function sliceFinding(code: string, f: ReactivityFinding): string {
-  // Re-derive the byte slice from line/col for a human-readable assertion.
-  const lines = code.split('\n')
-  const line = lines[f.line - 1] ?? ''
-  return f.endLine === f.line
-    ? line.slice(f.column, f.endColumn)
-    : line.slice(f.column)
-}
-
-describe('reactivity-lens — additive contract (kill-criterion a)', () => {
-  const FIXTURES = [
-    `function C(){ return <div>{count()}</div> }`,
-    `function C(p){ return <span>{p.label}</span> }`,
-    `function C(){ return <Box title={n()} /> }`,
-    `function C(){ return <div class="static">hi</div> }`,
-    `function C(){ return <a class={() => cls()}>x</a> }`,
-    `const x = 1; function C(){ const {a}=props; return <i>{a}</i> }`,
-  ]
-
-  it('lens collection NEVER changes emitted code (byte-identical)', () => {
-    for (const src of FIXTURES) {
-      const off = transformJSX_JS(src, 'f.tsx').code
-      const on = transformJSX_JS(src, 'f.tsx', { reactivityLens: true }).code
-      expect(on).toBe(off)
-    }
-  })
-
-  it('lens field is absent unless opted in', () => {
-    const r = transformJSX_JS(FIXTURES[0]!, 'f.tsx')
-    expect(r.reactivityLens).toBeUndefined()
-    const r2 = transformJSX_JS(FIXTURES[0]!, 'f.tsx', { reactivityLens: true })
-    expect(Array.isArray(r2.reactivityLens)).toBe(true)
-  })
-})
-
-describe('reactivity-lens — drift gate (positive claim = codegen record)', () => {
-  it('reactive text: {count()} → reactive span + _bind in output', () => {
-    const src = `function C(){ return <div>{count()}</div> }`
-    const reactive = find(src, 'reactive')
-    expect(reactive.length).toBe(1)
-    expect(sliceFinding(src, reactive[0]!)).toBe('count()')
-    // Drift proof: the codegen actually emitted a reactive binding.
-    const out = transformJSX_JS(src, 'f.tsx').code
-    expect(out).toMatch(/_bind(Text|Direct)?\(/)
-    expect(kindsAt(src)).not.toContain('static-text')
-  })
-
-  it('static text: {p.x}-free plain identifier → static-text, NOT reactive', () => {
-    const src = `function C(){ const label = "hi"; return <div>{label}</div> }`
-    const k = kindsAt(src)
-    expect(k).toContain('static-text')
-    expect(k).not.toContain('reactive')
-    const st = find(src, 'static-text')[0]!
-    expect(sliceFinding(src, st)).toBe('label')
-    // Drift proof: codegen baked it (no reactive binding helper for this).
-    const out = transformJSX_JS(src, 'f.tsx').code
-    expect(out).not.toMatch(/_bind\(\(\) => \{ \w+\.data = label \}/)
-  })
-
-  it('reactive prop: <Box title={n()} /> → reactive-prop + _rp in output', () => {
-    const src = `function C(){ return <Box title={n()} /> }`
-    const rp = find(src, 'reactive-prop')
-    expect(rp.length).toBe(1)
-    expect(sliceFinding(src, rp[0]!)).toBe('n()')
-    expect(transformJSX_JS(src, 'f.tsx').code).toContain('_rp(() =>')
-  })
-
-  it('hoisted static: static JSX in a non-template position → hoisted-static + module preamble', () => {
-    // A top-level returned static element becomes a `_tpl()` clone (template
-    // path) — that's not a hoist, and the lens correctly stays silent (no
-    // span = "not asserted"). maybeHoist only fires for static JSX in an
-    // expression slot of a non-DOM (component) parent; that's the faithful
-    // trigger and what the lens records.
-    const src = `function C(){ return <Comp>{<b class="x">hi</b>}</Comp> }`
-    const hs = find(src, 'hoisted-static')
-    expect(hs.length).toBeGreaterThanOrEqual(1)
-    expect(transformJSX_JS(src, 'f.tsx').code).toMatch(/const _\$h\d+ =/)
-  })
-
-  it('reactive attr: class={() => cls()} → reactive-attr', () => {
-    const src = `function C(){ return <a class={() => cls()}>x</a> }`
-    const ra = find(src, 'reactive-attr')
-    expect(ra.length).toBe(1)
-    expect(ra[0]!.detail).toContain('class')
-  })
-})
-
-describe('reactivity-lens — footgun merge (existing detectPyreonPatterns)', () => {
-  it('param-destructured props surface a footgun finding with the detector code', () => {
-    // detectPyreonPatterns catches the PARAMETER-destructure shape
-    // `({ name })`. The body-scope `const {x}=props` shape is the static
-    // layer's known cliff (doc-only anti-pattern, no reliable AST detector)
-    // — the lens's structural `static-text`/`reactive` signals are what
-    // compensate for that downstream. This asserts the merge surfaces
-    // whatever the existing detector finds, faithfully.
-    const src = `function C({ name }){ return <div>{name}</div> }`
-    const fg = find(src, 'footgun')
-    expect(fg.length).toBeGreaterThanOrEqual(1)
-    expect(fg.some((f) => f.code === 'props-destructured')).toBe(true)
-  })
-
-  it('findings are sorted by (line, column)', () => {
-    const src = [
-      `function C(props){`,
-      `  const { a } = props`,
-      `  return <div>{count()}</div>`,
-      `}`,
-    ].join('\n')
-    const { findings } = analyzeReactivity(src)
-    for (let i = 1; i < findings.length; i++) {
-      const prev = findings[i - 1]!
-      const cur = findings[i]!
-      expect(
-        prev.line < cur.line ||
-          (prev.line === cur.line && prev.column <= cur.column),
-      ).toBe(true)
-    }
-  })
-})
-
-describe('reactivity-lens — zero false "live" on idiomatic code (kill-criterion b)', () => {
-  it('purely static component yields no reactive* findings', () => {
-    const src = `function Card(){ return <div class="card"><h2>Title</h2><p>Body</p></div> }`
-    const k = kindsAt(src)
-    expect(k).not.toContain('reactive')
-    expect(k).not.toContain('reactive-prop')
-    expect(k).not.toContain('reactive-attr')
-  })
-
-  it('parse failure → empty, never throws', () => {
-    const r = analyzeReactivity(`function C( { return <div`)
-    expect(Array.isArray(r.findings)).toBe(true)
-  })
-})
-
-describe('reactivity-lens — formatter', () => {
-  it('renders annotated source with kind badges', () => {
-    const src = `function C(){ return <div>{count()}</div> }`
-    const out = formatReactivityLens(src, analyzeReactivity(src))
-    expect(out).toContain('live')
-    expect(out).toContain('1 |')
-  })
-})

package/src/tests/rocketstyle-collapse.test.ts

@@ -1,208 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { rocketstyleCollapseKey, transformJSX } from '../jsx'
-
-// Layer 4: the compiler DETECTS a literal-prop rocketstyle call site
-// (bail catalogue — RFC decision 3) and EMITS the collapsed
-// `_rsCollapse(...)` + once-per-module idempotent `injectRules`, when
-// the Vite plugin supplies an SSR-resolved `sites` entry. It never runs
-// the rocketstyle chain itself. These tests stub the resolved `sites`
-// map directly (no Vite) — the real SSR resolution is proven in
-// @pyreon/vite-plugin's resolver test; the end-to-end byte-parity is
-// proven by the ui-showcase e2e gate (Phase 4).
-
-const SITE = {
-  templateHtml: '<button data-x="1"><span class="inner">Save</span></button>',
-  lightClass: 'pyr-L1 pyr-L2',
-  darkClass: 'pyr-D1 pyr-D2',
-  rules: ['.pyr-L1{color:red}', '.pyr-D1{color:blue}'],
-  ruleKey: 'bundleA',
-}
-
-function collapseOpt(candidates: string[], sites: Record<string, typeof SITE>) {
-  return {
-    collapseRocketstyle: {
-      candidates: new Set(candidates),
-      sites: new Map(Object.entries(sites)),
-      mode: { name: 'useMode', source: '@pyreon/ui-core' },
-    },
-  }
-}
-
-describe('rocketstyleCollapseKey — stable + order-independent', () => {
-  it('same component+props+text ⇒ same key regardless of attr order', () => {
-    const a = rocketstyleCollapseKey('Button', { state: 'primary', size: 'md' }, 'Save')
-    const b = rocketstyleCollapseKey('Button', { size: 'md', state: 'primary' }, 'Save')
-    expect(a).toBe(b)
-    expect(a).not.toBe(rocketstyleCollapseKey('Button', { state: 'secondary' }, 'Save'))
-    expect(a).not.toBe(rocketstyleCollapseKey('Button', { state: 'primary', size: 'md' }, 'Go'))
-  })
-})
-
-describe('compiler — collapsible call site emission', () => {
-  it('emits _rsCollapse + dual-emit mode thunk + once-per-module injectRules', () => {
-    const key = rocketstyleCollapseKey('Button', { state: 'primary', size: 'medium' }, 'Save')
-    const src = `
-import { Button } from '@pyreon/ui-components'
-export function App() {
-  return <Button state="primary" size="medium">Save</Button>
-}`
-    const { code } = transformJSX(src, 'App.tsx', collapseOpt(['Button'], { [key]: SITE }))
-    // collapsed call replaces the JSX
-    expect(code).toContain(
-      '__rsCollapse("<button data-x=\\"1\\"><span class=\\"inner\\">Save</span></button>", "pyr-L1 pyr-L2", "pyr-D1 pyr-D2", () => __pyrMode() === "dark")',
-    )
-    // dual-emit mode accessor imported from the configured source
-    expect(code).toContain('import { useMode as __pyrMode } from "@pyreon/ui-core";')
-    // runtime helper + styler sheet imports
-    expect(code).toContain('import { _rsCollapse as __rsCollapse } from "@pyreon/runtime-dom";')
-    expect(code).toContain('import { sheet as __rsSheet } from "@pyreon/styler";')
-    // once-per-module idempotent rule injection, keyed by ruleKey
-    expect(code).toContain('__rsSheet.injectRules(')
-    expect(code).toContain(JSON.stringify(SITE.rules))
-    expect(code).toContain('"bundleA")')
-    // the original <Button …> JSX is gone
-    expect(code).not.toContain('<Button')
-  })
-
-  it('two identical sites in one module emit ONE injectRules (deduped by ruleKey)', () => {
-    const key = rocketstyleCollapseKey('Button', { state: 'primary' }, 'X')
-    const src = `
-import { Button } from '@pyreon/ui-components'
-export const A = () => <Button state="primary">X</Button>
-export const B = () => <Button state="primary">X</Button>`
-    const { code } = transformJSX(src, 'M.tsx', collapseOpt(['Button'], { [key]: SITE }))
-    const injCount = code.split('__rsSheet.injectRules(').length - 1
-    expect(injCount).toBe(1)
-    const callCount = code.split('__rsCollapse(').length - 1
-    // 2 call sites (the `_rsCollapse as __rsCollapse` import alias has
-    // no trailing `(`, so it doesn't count)
-    expect(callCount).toBe(2)
-  })
-})
-
-describe('compiler — bail catalogue (RFC decision 3): NO collapse', () => {
-  const key = rocketstyleCollapseKey('Button', { state: 'primary' }, 'Save')
-  const sites = { [key]: SITE }
-
-  function noCollapse(src: string, opt = collapseOpt(['Button'], sites)) {
-    const { code } = transformJSX(src, 'B.tsx', opt)
-    expect(code).not.toContain('__rsCollapse')
-    return code
-  }
-
-  it('bails on a non-literal (signal/expr) dimension prop', () => {
-    noCollapse(`
-import { Button } from '@pyreon/ui-components'
-export const A = (p) => <Button state={p.s}>Save</Button>`)
-  })
-
-  it('bails on a JSX spread attribute', () => {
-    noCollapse(`
-import { Button } from '@pyreon/ui-components'
-export const A = (p) => <Button state="primary" {...p}>Save</Button>`)
-  })
-
-  it('bails on an element child (non-static-text children)', () => {
-    noCollapse(`
-import { Button } from '@pyreon/ui-components'
-export const A = () => <Button state="primary"><i>Save</i></Button>`)
-  })
-
-  it('bails on an expression child', () => {
-    noCollapse(`
-import { Button } from '@pyreon/ui-components'
-export const A = (p) => <Button state="primary">{p.label}</Button>`)
-  })
-
-  it('bails when the component is not a registered candidate', () => {
-    noCollapse(
-      `
-import { Card } from '@pyreon/ui-components'
-export const A = () => <Card state="primary">Save</Card>`,
-      collapseOpt(['Button'], sites),
-    )
-  })
-
-  it('bails when there is no resolved site for the key (resolver bailed / not data)', () => {
-    noCollapse(
-      `
-import { Button } from '@pyreon/ui-components'
-export const A = () => <Button state="zzz">Save</Button>`,
-      collapseOpt(['Button'], sites),
-    )
-  })
-
-  it('does nothing when collapseRocketstyle option is absent (default OFF)', () => {
-    const { code } = transformJSX(
-      `
-import { Button } from '@pyreon/ui-components'
-export const A = () => <Button state="primary">Save</Button>`,
-      'Off.tsx',
-      {},
-    )
-    expect(code).not.toContain('__rsCollapse')
-  })
-})
-
-describe('bisect: collapse forces the JS path', () => {
-  it('emits the collapse even though a native binary may be present', () => {
-    // transformJSX must short-circuit to transformJSX_JS when
-    // collapseRocketstyle is set (the Rust binary doesn't implement it).
-    // If the force-JS guard were removed and a native binary were
-    // loaded, this would emit no __rsCollapse — proving the guard is
-    // load-bearing. With the guard, JS path always runs.
-    const key = rocketstyleCollapseKey('Button', {}, 'Hi')
-    const { code } = transformJSX(
-      `
-import { Button } from '@pyreon/ui-components'
-export const A = () => <Button>Hi</Button>`,
-      'J.tsx',
-      collapseOpt(['Button'], { [key]: SITE }),
-    )
-    expect(code).toContain('__rsCollapse(')
-  })
-})
-
-describe('scanCollapsibleSites — plugin scanner == compiler detection', () => {
-  it('finds the collapsible site with the SAME key the compiler looks up', async () => {
-    const { scanCollapsibleSites } = await import('../jsx')
-    const src = `
-import { Button as Btn } from '@pyreon/ui-components'
-import { useState } from 'somewhere'
-export const A = () => <Btn state="primary" size="medium">Save</Btn>
-export const B = (p) => <Btn state={p.s}>x</Btn>
-export const C = () => <div state="primary">not a candidate</div>`
-    const sites = scanCollapsibleSites(src, 'A.tsx', new Set(['@pyreon/ui-components']))
-    // only the literal-prop, static-text <Btn> collapses; the {expr}
-    // one and the <div> are bailed (catalogue) / non-candidate.
-    expect(sites).toHaveLength(1)
-    const s = sites[0]!
-    expect(s.componentName).toBe('Btn') // LOCAL alias — key uses this
-    expect(s.importedName).toBe('Button') // resolver imports this
-    expect(s.source).toBe('@pyreon/ui-components')
-    expect(s.props).toEqual({ state: 'primary', size: 'medium' })
-    expect(s.childrenText).toBe('Save')
-    // The key the plugin computes here MUST equal the key the compiler
-    // recomputes from the JSX node — proven by feeding a sites map
-    // keyed by s.key and asserting the compiler collapses.
-    const { code } = transformJSX(src, 'A.tsx', {
-      collapseRocketstyle: {
-        candidates: new Set(['Btn']),
-        sites: new Map([[s.key, SITE]]),
-        mode: { name: 'useMode', source: '@pyreon/ui-core' },
-      },
-    })
-    // exactly the literal-prop site collapsed; the {expr} <Btn> bailed
-    // and remains as JSX (1 collapse call, 1 surviving <Btn).
-    expect(code.split('__rsCollapse(').length - 1).toBe(1)
-    expect(code).toContain('<Btn state={')
-  })
-
-  it('skips a component imported from a non-collapsible source', async () => {
-    const { scanCollapsibleSites } = await import('../jsx')
-    const src = `
-import { Button } from './local-button'
-export const A = () => <Button state="primary">Save</Button>`
-    expect(scanCollapsibleSites(src, 'A.tsx', new Set(['@pyreon/ui-components']))).toHaveLength(0)
-  })
-})

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

@@ -1,159 +0,0 @@
-// @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

@@ -1,138 +0,0 @@
-// @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()
-  })
-})