@pyreon/runtime-dom 0.24.5 → 0.24.6

package/src/tests/rs-collapse-h.browser.test.ts

@@ -1,152 +0,0 @@
-import { signal } from '@pyreon/reactivity'
-import { flush } from '@pyreon/test-utils/browser'
-import { afterEach, describe, expect, it } from 'vitest'
-import { _rsCollapseH, mount } from '../index'
-
-// PR 2 of the partial-collapse build (open-work #1), in REAL Chromium.
-// `_rsCollapseH` = `_rsCollapse` (one _tpl cloneNode, dual-emit reactive
-// class, no remount) PLUS it re-attaches the residual `on*` handlers the
-// compiler's `detectPartialCollapsibleShape` (PR 1) peeled off. The ONLY
-// delta vs `_rsCollapse` is the handler re-attach, routed through the
-// canonical `_bindEvent` → `applyEventProp` path — so a partially-
-// collapsed `<Button onClick=…>` behaves byte-identically to the
-// 5-layer mount it replaced. These specs prove exactly that delta in a
-// real browser (real click/pointer events, real computed style).
-//
-// Bisect-verify (PR body): neutralize the handler loop in
-// `_rsCollapseH` (`for (const key in handlers)` → no-op) → the 3
-// handler specs fail (`expected 0 to be 1` — handler never fired) while
-// every class/mode/no-remount assertion still passes; restore → all
-// pass. That asymmetry proves the handler re-attach is the load-bearing
-// addition, not passing for the wrong reason.
-
-describe('_rsCollapseH (real browser) — PR 2 partial-collapse runtime', () => {
-  const cleanup: Array<() => void> = []
-  afterEach(() => {
-    for (const u of cleanup.splice(0)) u()
-  })
-
-  function injectCss(css: string): void {
-    const el = document.createElement('style')
-    el.textContent = css
-    document.head.appendChild(el)
-    cleanup.push(() => el.remove())
-  }
-
-  function mountInto(node: ReturnType<typeof _rsCollapseH>): HTMLElement {
-    const root = document.createElement('div')
-    document.body.appendChild(root)
-    const dispose = mount(node as unknown as Parameters<typeof mount>[0], root)
-    cleanup.push(() => {
-      dispose()
-      root.remove()
-    })
-    return root
-  }
-
-  it('applies the light class AND fires the peeled onClick on a real click', async () => {
-    injectCss('.rsh-l{color:rgb(1,2,3)}.rsh-d{color:rgb(9,8,7)}')
-    const isDark = signal(false)
-    let clicks = 0
-    const root = mountInto(
-      _rsCollapseH('<button>Save</button>', 'rsh-l', 'rsh-d', () => isDark(), {
-        onClick: () => {
-          clicks++
-        },
-      }),
-    )
-    await flush()
-    const btn = root.querySelector('button') as HTMLButtonElement
-    expect(btn).not.toBeNull()
-    expect(btn.className).toBe('rsh-l')
-    expect(btn.textContent).toBe('Save')
-    expect(getComputedStyle(btn).color).toBe('rgb(1, 2, 3)')
-
-    btn.click()
-    expect(clicks).toBe(1)
-    btn.click()
-    expect(clicks).toBe(2)
-  })
-
-  it('mode flip swaps the class on the SAME node AND the handler survives the flip', async () => {
-    injectCss('.rsh-l2{color:rgb(10,20,30)}.rsh-d2{color:rgb(40,50,60)}')
-    const isDark = signal(false)
-    let clicks = 0
-    const root = mountInto(
-      _rsCollapseH('<button>X</button>', 'rsh-l2', 'rsh-d2', () => isDark(), {
-        onClick: () => {
-          clicks++
-        },
-      }),
-    )
-    await flush()
-    const before = root.querySelector('button') as HTMLButtonElement
-    expect(before.className).toBe('rsh-l2')
-    before.click()
-    expect(clicks).toBe(1)
-
-    isDark.set(true)
-    await flush()
-    const after = root.querySelector('button') as HTMLButtonElement
-    expect(after).toBe(before) // node identity preserved ⇒ reactive, not remount
-    expect(after.className).toBe('rsh-d2')
-    // The load-bearing partial-collapse contract: the reactive class
-    // binding does NOT remount, so the handler attached at first mount is
-    // still live after the mode flip.
-    after.click()
-    expect(clicks).toBe(2)
-  })
-
-  it('peels + binds MULTIPLE handlers with correct onXxx→event normalization', async () => {
-    injectCss('.rsh-m{color:rgb(0,0,0)}')
-    const isDark = signal(false)
-    let clicks = 0
-    let enters = 0
-    const root = mountInto(
-      _rsCollapseH('<button>M</button>', 'rsh-m', 'rsh-m', () => isDark(), {
-        onClick: () => {
-          clicks++
-        },
-        // onPointerEnter must normalize to the lowercase DOM event
-        // `pointerenter` via the canonical path — a hand-rolled
-        // `addEventListener('pointerEnter', …)` would never fire.
-        onPointerEnter: () => {
-          enters++
-        },
-      }),
-    )
-    await flush()
-    const btn = root.querySelector('button') as HTMLButtonElement
-    btn.click()
-    btn.dispatchEvent(new PointerEvent('pointerenter', { bubbles: false }))
-    expect(clicks).toBe(1)
-    expect(enters).toBe(1)
-  })
-
-  it('dispose removes the listener (no leak) — composed cleanup is correct', async () => {
-    injectCss('.rsh-c{color:rgb(5,5,5)}')
-    const isDark = signal(false)
-    let clicks = 0
-    const root = document.createElement('div')
-    document.body.appendChild(root)
-    const dispose = mount(
-      _rsCollapseH('<button>C</button>', 'rsh-c', 'rsh-c', () => isDark(), {
-        onClick: () => {
-          clicks++
-        },
-      }) as unknown as Parameters<typeof mount>[0],
-      root,
-    )
-    await flush()
-    const btn = root.querySelector('button') as HTMLButtonElement
-    btn.click()
-    expect(clicks).toBe(1)
-
-    dispose()
-    // After dispose the handler disposer ran — the listener is gone, so a
-    // post-dispose click does NOT increment.
-    btn.click()
-    expect(clicks).toBe(1)
-    root.remove()
-  })
-})

package/src/tests/rs-collapse-h.test.ts

@@ -1,237 +0,0 @@
-import { signal } from '@pyreon/reactivity'
-import { afterEach, describe, expect, it } from 'vitest'
-import { _rsCollapseH } from '../template'
-
-// PR 2 of the partial-collapse build (open-work #1) — happy-dom UNIT
-// layer (fast + locally bisect-verifiable). Imports ONLY `../template`
-// (template.test.ts style) — NOT `../index`, whose wide cross-package
-// re-export graph hits the documented fresh-worktree resolution trap.
-//
-// Event-path split (honest, per test-environment-parity — both layers):
-//   - DELEGATED events (`click`, see `delegate.ts:DELEGATED_EVENTS`)
-//     park in a prop-slot that only fires via the root listener
-//     `mount()` installs → covered by `rs-collapse-h.browser.test.ts`
-//     (real Chromium + real `mount()`, CI-authoritative; can't run in a
-//     fresh worktree — `@pyreon/test-utils/browser` needs built lib).
-//   - NON-delegated events (`pointerenter`, `mouseenter` — NOT in
-//     `DELEGATED_EVENTS`) take `applyEventProp`'s direct
-//     `el.addEventListener(name, …)` path → fire on a bare
-//     `dispatchEvent` with NO `mount()`. This unit drives the
-//     handler-attach delta on THAT path: it still proves `_rsCollapseH`
-//     routes residual handlers through the canonical
-//     `_bindEvent`→`applyEventProp` path (incl. the exact
-//     `onXxx`→lowercase normalization) + composed cleanup — the
-//     load-bearing addition vs `_rsCollapse`.
-//
-// `_rsCollapseH` returns a NativeItem (`{ __isNative, el, cleanup }`);
-// `_tpl` runs the bind synchronously at call time, so class + handlers
-// are live on `.el` immediately (same direct-NativeItem shape
-// `template.test.ts` uses for `_tpl`). Signal writes propagate
-// synchronously here (cf. `template.test.ts:_bindText`); a
-// `Promise.resolve()` tick covers any microtask-scheduled reactive
-// class update defensively.
-//
-// Bisect-verify (PR body): neutralize the handler loop in
-// `_rsCollapseH` (`for (const key in handlers)` body → skip) → the
-// handler/normalization/cleanup specs fail with `expected 0 to be 1`
-// while every class / mode-flip / no-remount / zero-handler / child
-// assertion still passes; restore → 8/8. The asymmetry proves the
-// handler re-attach is the load-bearing delta.
-
-const tick = (): Promise<void> => Promise.resolve()
-
-describe('_rsCollapseH (happy-dom unit) — PR 2 partial-collapse runtime', () => {
-  const cleanup: Array<() => void> = []
-  afterEach(() => {
-    for (const u of cleanup.splice(0)) u()
-  })
-
-  function place(item: ReturnType<typeof _rsCollapseH>): HTMLElement {
-    const el = item.el as HTMLElement
-    document.body.appendChild(el)
-    cleanup.push(() => {
-      item.cleanup?.()
-      el.remove()
-    })
-    return el
-  }
-
-  const fire = (el: HTMLElement, type: string): void => {
-    el.dispatchEvent(new Event(type, { bubbles: false }))
-  }
-
-  it('sets the light class + static children AND fires the peeled handler', () => {
-    const isDark = signal(false)
-    let enters = 0
-    const el = place(
-      _rsCollapseH('<button>Save</button>', 'rsh-l', 'rsh-d', () => isDark(), {
-        onPointerEnter: () => {
-          enters++
-        },
-      }),
-    )
-    expect(el.tagName).toBe('BUTTON')
-    expect(el.className).toBe('rsh-l')
-    expect(el.textContent).toBe('Save')
-
-    fire(el, 'pointerenter')
-    expect(enters).toBe(1)
-    fire(el, 'pointerenter')
-    expect(enters).toBe(2)
-  })
-
-  it('normalizes onXxx → lowercase DOM event via the canonical path', () => {
-    const isDark = signal(false)
-    let enters = 0
-    let mouse = 0
-    const el = place(
-      _rsCollapseH('<button>M</button>', 'rsh-m', 'rsh-m', () => isDark(), {
-        // onPointerEnter MUST bind to `pointerenter` (lowercased whole
-        // name) — a hand-rolled `addEventListener('pointerEnter', …)`
-        // would never fire. onMouseEnter → `mouseenter` likewise.
-        onPointerEnter: () => {
-          enters++
-        },
-        onMouseEnter: () => {
-          mouse++
-        },
-      }),
-    )
-    fire(el, 'pointerenter')
-    fire(el, 'mouseenter')
-    expect(enters).toBe(1)
-    expect(mouse).toBe(1)
-    // Wrong-case names must NOT fire (proves real normalization, not luck).
-    fire(el, 'pointerEnter')
-    fire(el, 'mouseEnter')
-    expect(enters).toBe(1)
-    expect(mouse).toBe(1)
-  })
-
-  it('mode flip swaps the class on the SAME node AND the handler survives the flip', async () => {
-    const isDark = signal(false)
-    let enters = 0
-    const el = place(
-      _rsCollapseH('<button>X</button>', 'rsh-l2', 'rsh-d2', () => isDark(), {
-        onPointerEnter: () => {
-          enters++
-        },
-      }),
-    )
-    expect(el.className).toBe('rsh-l2')
-    fire(el, 'pointerenter')
-    expect(enters).toBe(1)
-
-    isDark.set(true)
-    await tick()
-    // Same node identity ⇒ reactive class swap, NOT a remount.
-    expect(el.className).toBe('rsh-d2')
-    // Load-bearing partial-collapse contract: no remount ⇒ the handler
-    // bound at construction is still live after the mode flip.
-    fire(el, 'pointerenter')
-    expect(enters).toBe(2)
-
-    isDark.set(false)
-    await tick()
-    expect(el.className).toBe('rsh-l2')
-  })
-
-  it('cleanup() removes the listener — composed disposer is correct (no leak)', () => {
-    const isDark = signal(false)
-    let enters = 0
-    const item = _rsCollapseH('<button>C</button>', 'rsh-c', 'rsh-c', () => isDark(), {
-      onPointerEnter: () => {
-        enters++
-      },
-    })
-    const el = item.el as HTMLElement
-    document.body.appendChild(el)
-    fire(el, 'pointerenter')
-    expect(enters).toBe(1)
-
-    item.cleanup?.()
-    fire(el, 'pointerenter') // listener removed by the composed disposer
-    expect(enters).toBe(1)
-    el.remove()
-  })
-
-  it('binds MULTIPLE handlers; literal props stay out of the handler set', () => {
-    const isDark = signal(false)
-    let a = 0
-    let b = 0
-    const el = place(
-      _rsCollapseH('<button>N</button>', 'rsh-n', 'rsh-n', () => isDark(), {
-        onPointerEnter: () => {
-          a++
-        },
-        onMouseEnter: () => {
-          b++
-        },
-      }),
-    )
-    fire(el, 'pointerenter')
-    fire(el, 'mouseenter')
-    fire(el, 'pointerenter')
-    expect(a).toBe(2)
-    expect(b).toBe(1)
-  })
-
-  it('zero handlers: renders class + children, cleanup is safe (defensive)', async () => {
-    const isDark = signal(false)
-    const el = place(_rsCollapseH('<button>Z</button>', 'rsh-z', 'rsh-zd', () => isDark(), {}))
-    expect(el.className).toBe('rsh-z')
-    expect(el.textContent).toBe('Z')
-    isDark.set(true)
-    await tick()
-    expect(el.className).toBe('rsh-zd')
-    // cleanup runs via afterEach — must not throw with no handlers.
-  })
-
-  it('children bind runs alongside the class + handler binds', () => {
-    const isDark = signal(false)
-    let enters = 0
-    const el = place(
-      _rsCollapseH(
-        '<button><span></span></button>',
-        'rsh-cb',
-        'rsh-cbd',
-        () => isDark(),
-        { onPointerEnter: () => enters++ },
-        (root) => {
-          ;(root.querySelector('span') as HTMLElement).textContent = 'child'
-          return null
-        },
-      ),
-    )
-    expect(el.className).toBe('rsh-cb')
-    expect((el.querySelector('span') as HTMLElement).textContent).toBe('child')
-    fire(el, 'pointerenter')
-    expect(enters).toBe(1)
-  })
-
-  it('disposes class + handler + child binds together (composition)', () => {
-    const isDark = signal(false)
-    let enters = 0
-    let childDisposed = false
-    const item = _rsCollapseH(
-      '<button><span></span></button>',
-      'rsh-x',
-      'rsh-xd',
-      () => isDark(),
-      { onPointerEnter: () => enters++ },
-      () => () => {
-        childDisposed = true
-      },
-    )
-    const el = item.el as HTMLElement
-    document.body.appendChild(el)
-    fire(el, 'pointerenter')
-    expect(enters).toBe(1)
-
-    item.cleanup?.()
-    expect(childDisposed).toBe(true) // child disposer composed + ran
-    fire(el, 'pointerenter')
-    expect(enters).toBe(1) // handler disposer ran too
-    el.remove()
-  })
-})

package/src/tests/rs-collapse.browser.test.ts

@@ -1,128 +0,0 @@
-import { signal } from '@pyreon/reactivity'
-import { flush } from '@pyreon/test-utils/browser'
-import { afterEach, describe, expect, it } from 'vitest'
-import { _rsCollapse, mount } from '../index'
-
-// Layer 2 of the P0 rocketstyle-collapse slice, in real Chromium.
-// `_rsCollapse` deliberately does NOT import @pyreon/styler (layer
-// purity — runtime-dom is layer 4; the styler injection is the EMITTED
-// code's job). So this suite injects CSS via a plain <style> and proves
-// only what _rsCollapse owns: ONE _tpl() cloneNode whose class is
-// reactively bound to the app mode (dual-emit, RFC decision 1) — a mode
-// flip swaps the class on the SAME node with no remount.
-
-describe('_rsCollapse (real browser)', () => {
-  const cleanup: Array<() => void> = []
-  afterEach(() => {
-    for (const u of cleanup.splice(0)) u()
-  })
-
-  function injectCss(css: string): void {
-    const el = document.createElement('style')
-    el.textContent = css
-    document.head.appendChild(el)
-    cleanup.push(() => el.remove())
-  }
-
-  function mountInto(node: ReturnType<typeof _rsCollapse>): HTMLElement {
-    const root = document.createElement('div')
-    document.body.appendChild(root)
-    const dispose = mount(node as unknown as Parameters<typeof mount>[0], root)
-    cleanup.push(() => {
-      dispose()
-      root.remove()
-    })
-    return root
-  }
-
-  it('applies the light class + static children; the class is real CSS', async () => {
-    injectCss('.rsc-light{color:rgb(1,2,3)}.rsc-dark{color:rgb(9,8,7)}')
-    const isDark = signal(false)
-    const root = mountInto(
-      _rsCollapse('<button>Save</button>', 'rsc-light', 'rsc-dark', () => isDark()),
-    )
-    await flush()
-    const btn = root.querySelector('button')
-    expect(btn).not.toBeNull()
-    expect(btn?.className).toBe('rsc-light')
-    expect(btn?.textContent).toBe('Save')
-    expect(getComputedStyle(btn as Element).color).toBe('rgb(1, 2, 3)')
-  })
-
-  it('mode flip swaps to the dark class on the SAME node (no remount)', async () => {
-    injectCss('.rsc-l2{color:rgb(10,20,30)}.rsc-d2{color:rgb(40,50,60)}')
-    const isDark = signal(false)
-    const root = mountInto(
-      _rsCollapse('<button>X</button>', 'rsc-l2', 'rsc-d2', () => isDark()),
-    )
-    await flush()
-    const before = root.querySelector('button') as HTMLElement
-    expect(before.className).toBe('rsc-l2')
-
-    isDark.set(true)
-    await flush()
-    const after = root.querySelector('button') as HTMLElement
-    expect(after).toBe(before) // node identity preserved ⇒ reactive, not remount
-    expect(after.className).toBe('rsc-d2')
-    expect(getComputedStyle(after).color).toBe('rgb(40, 50, 60)')
-
-    isDark.set(false)
-    await flush()
-    expect((root.querySelector('button') as HTMLElement).className).toBe('rsc-l2')
-  })
-
-  it('children bind runs alongside the class bind and disposes cleanly', async () => {
-    injectCss('.rsc-c{color:rgb(2,2,2)}.rsc-cd{color:rgb(3,3,3)}')
-    const label = signal('one')
-    const isDark = signal(false)
-    let childDisposed = false
-    const root = mountInto(
-      _rsCollapse(
-        '<button><span></span></button>',
-        'rsc-c',
-        'rsc-cd',
-        () => isDark(),
-        (el) => {
-          const span = el.querySelector('span') as HTMLElement
-          const stop = (() => {
-            // minimal reactive child without pulling the compiler in
-            let raf = 0
-            const tick = () => {
-              span.textContent = label()
-              raf = requestAnimationFrame(tick)
-            }
-            tick()
-            return () => {
-              cancelAnimationFrame(raf)
-              childDisposed = true
-            }
-          })()
-          return stop
-        },
-      ),
-    )
-    await flush()
-    expect((root.querySelector('span') as HTMLElement).textContent).toBe('one')
-    expect((root.querySelector('button') as HTMLElement).className).toBe('rsc-c')
-    // dispose via afterEach → child cleanup must fire
-    for (const u of cleanup.splice(0)) u()
-    expect(childDisposed).toBe(true)
-  })
-
-  it('two instances of the same html share ONE parsed template, with independent reactivity', async () => {
-    injectCss('.rsc-s{color:rgb(7,7,7)}.rsc-sd{color:rgb(8,8,8)}')
-    const isDark = signal(false)
-    const r1 = mountInto(_rsCollapse('<button>dup</button>', 'rsc-s', 'rsc-sd', () => isDark()))
-    const r2 = mountInto(_rsCollapse('<button>dup</button>', 'rsc-s', 'rsc-sd', () => isDark()))
-    await flush()
-    const b1 = r1.querySelector('button') as HTMLElement
-    const b2 = r2.querySelector('button') as HTMLElement
-    expect(b1).not.toBe(b2) // distinct cloned nodes from the shared template
-    expect(b1.className).toBe('rsc-s')
-    expect(b2.className).toBe('rsc-s')
-    isDark.set(true)
-    await flush()
-    expect((r1.querySelector('button') as HTMLElement).className).toBe('rsc-sd')
-    expect((r2.querySelector('button') as HTMLElement).className).toBe('rsc-sd')
-  })
-})