@pyreon/runtime-dom 0.12.13 → 0.12.15

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

@@ -0,0 +1,295 @@
+import { For, h, Portal } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { hydrateRoot, mount, Transition } from '../index'
+
+// Real-Chromium smoke suite for @pyreon/runtime-dom. Catches environment-
+// divergence bugs that happy-dom hides: SVG namespace property setters,
+// real PointerEvent sequencing, `import.meta.env.DEV` literal-replacement,
+// and the keyed reconciler under live signal updates.
+
+describe('runtime-dom in real browser', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('mounts and patches DOM when a signal updates', async () => {
+    const count = signal(0)
+    const { container, unmount } = mountInBrowser(
+      h('span', { id: 'n' }, () => String(count())),
+    )
+    expect(container.querySelector('#n')?.textContent).toBe('0')
+
+    count.set(42)
+    await flush()
+    expect(container.querySelector('#n')?.textContent).toBe('42')
+    unmount()
+  })
+
+  it('keyed <For> reconciler inserts at the right index when a list grows', async () => {
+    type Row = { id: number; label: string }
+    const rows = signal<Row[]>([
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+    ])
+    const { container, unmount } = mountInBrowser(
+      h(
+        'ul',
+        { id: 'list' },
+        For({
+          each: rows,
+          by: (r: Row) => r.id,
+          children: (r: Row) => h('li', { 'data-id': String(r.id) }, r.label),
+        }),
+      ),
+    )
+
+    let items = container.querySelectorAll<HTMLLIElement>('#list li')
+    expect(items).toHaveLength(2)
+    expect(Array.from(items).map((el) => el.textContent)).toEqual(['a', 'b'])
+
+    rows.set([
+      { id: 1, label: 'a' },
+      { id: 3, label: 'c' },
+      { id: 2, label: 'b' },
+    ])
+    await flush()
+
+    items = container.querySelectorAll<HTMLLIElement>('#list li')
+    expect(items).toHaveLength(3)
+    expect(Array.from(items).map((el) => el.dataset.id)).toEqual(['1', '3', '2'])
+    expect(Array.from(items).map((el) => el.textContent)).toEqual(['a', 'c', 'b'])
+    unmount()
+  })
+
+  it('creates SVG with the SVG namespace and updates reactive attributes via setAttribute', async () => {
+    const x = signal(10)
+    const { container, unmount } = mountInBrowser(
+      h(
+        'svg',
+        { id: 'svg', width: '100', height: '100' },
+        h('rect', { id: 'r', x: () => x(), y: '0', width: '20', height: '20' }),
+      ),
+    )
+
+    const svg = container.querySelector('#svg')
+    const rect = container.querySelector('#r')
+    expect(svg?.namespaceURI).toBe('http://www.w3.org/2000/svg')
+    expect(rect?.namespaceURI).toBe('http://www.w3.org/2000/svg')
+    // SVGRectElement.x is a read-only SVGAnimatedLength getter — applying
+    // via property would crash. setAttribute is the only safe path.
+    expect(rect?.getAttribute('x')).toBe('10')
+
+    x.set(55)
+    await flush()
+    expect(rect?.getAttribute('x')).toBe('55')
+    unmount()
+  })
+
+  it('dispatches a real PointerEvent and fires the onClick handler', async () => {
+    const clicks = signal(0)
+    const { container, unmount } = mountInBrowser(
+      h(
+        'button',
+        {
+          id: 'btn',
+          onClick: () => clicks.set(clicks() + 1),
+        },
+        () => `clicks: ${clicks()}`,
+      ),
+    )
+
+    const btn = container.querySelector<HTMLButtonElement>('#btn')!
+    expect(btn.textContent).toBe('clicks: 0')
+
+    btn.dispatchEvent(
+      new PointerEvent('pointerdown', { bubbles: true, pointerType: 'mouse' }),
+    )
+    btn.dispatchEvent(
+      new PointerEvent('pointerup', { bubbles: true, pointerType: 'mouse' }),
+    )
+    btn.click()
+    await flush()
+    expect(btn.textContent).toBe('clicks: 1')
+    unmount()
+  })
+
+  it('emits the duplicate-key __DEV__ warning under Vite (DEV=true)', async () => {
+    // import.meta.env.DEV is true in this dev-mode browser run, which is the
+    // exact replacement Vite/Rolldown apply at build-time. The warning must
+    // fire here. The companion `runtime-dom.prod-bundle.test.ts` Node test
+    // proves the same code path is dead in a prod bundle (DEV=false).
+    expect(import.meta.env.DEV).toBe(true)
+
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const dupes = signal([
+      { id: 1, label: 'a' },
+      { id: 1, label: 'b' },
+    ])
+    const { unmount } = mountInBrowser(
+      h(
+        'div',
+        null,
+        For({
+          each: dupes,
+          by: (r: { id: number }) => r.id,
+          children: (r: { id: number; label: string }) => h('span', { class: 'dup' }, r.label),
+        }),
+      ),
+    )
+    await flush()
+
+    const calls = warn.mock.calls.flat().join('\n')
+    expect(calls).toMatch(/Duplicate key/i)
+    unmount()
+  })
+
+  it('hydrateRoot — attaches reactive listeners to existing SSR markup without rerender', async () => {
+    // Simulate SSR-rendered HTML in the container.
+    const container = document.createElement('div')
+    container.innerHTML = '<button id="ssr-btn" type="button">clicks: 0</button>'
+    document.body.appendChild(container)
+
+    const ssrButtonRef = container.querySelector<HTMLButtonElement>('#ssr-btn')!
+    const count = signal(0)
+    const cleanup = hydrateRoot(
+      container,
+      h(
+        'button',
+        {
+          id: 'ssr-btn',
+          type: 'button',
+          onClick: () => count.set(count() + 1),
+        },
+        () => `clicks: ${count()}`,
+      ),
+    )
+
+    // Same DOM node — hydrate adopts it, doesn't replace.
+    expect(container.querySelector('#ssr-btn')).toBe(ssrButtonRef)
+
+    // Click triggers the hydrated handler + reactive text update.
+    ssrButtonRef.click()
+    await flush()
+    expect(ssrButtonRef.textContent).toBe('clicks: 1')
+
+    cleanup()
+    container.remove()
+  })
+
+  it('Portal — children render in a different DOM subtree (not the wrapper)', async () => {
+    const target = document.createElement('div')
+    target.id = 'portal-target'
+    document.body.appendChild(target)
+
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'src' },
+        h(Portal, { target }, h('span', { id: 'teleported' }, 'over there')),
+      ),
+    )
+
+    // Portal child is in target, NOT in container.
+    expect(container.querySelector('#teleported')).toBeNull()
+    expect(target.querySelector('#teleported')?.textContent).toBe('over there')
+    unmount()
+    target.remove()
+  })
+
+  it('Transition — show=false applies leave classes; transitionend removes element', async () => {
+    const visible = signal(true)
+    const { container, unmount } = mountInBrowser(
+      h(
+        Transition,
+        { name: 'fade', show: () => visible() },
+        // Real CSS transition so transitionend actually fires when the
+        // class swap changes opacity (not just instantly).
+        h('div', { id: 'fading', style: 'transition: opacity 30ms; opacity: 1' }, 'hello'),
+      ),
+    )
+    await flush()
+    expect(container.querySelector('#fading')).not.toBeNull()
+
+    visible.set(false)
+    // After two rAFs the leave-active + leave-to classes are applied.
+    await new Promise<void>((r) => requestAnimationFrame(() => r()))
+    await new Promise<void>((r) => requestAnimationFrame(() => r()))
+
+    const stillRendered = container.querySelector('#fading')
+    if (stillRendered) {
+      // Expect at least one of the fade-leave classes during the
+      // active phase.
+      expect(stillRendered.className).toMatch(/fade-leave/)
+      // Manually fire transitionend to short-circuit the 5s safety
+      // timeout (we don't care about real timing here, only that the
+      // event-driven cleanup path works).
+      stillRendered.dispatchEvent(new Event('transitionend', { bubbles: true }))
+    }
+    await flush()
+    await new Promise<void>((r) => setTimeout(r, 16))
+    expect(container.querySelector('#fading')).toBeNull()
+    unmount()
+  })
+
+  it('two mount() roots stay isolated — events on one do not affect the other', async () => {
+    const c1 = signal(0)
+    const c2 = signal(0)
+    const root1 = document.createElement('div')
+    const root2 = document.createElement('div')
+    document.body.append(root1, root2)
+
+    const u1 = mount(
+      h('button', { id: 'b1', onClick: () => c1.set(c1() + 1) }, () => `c1=${c1()}`),
+      root1,
+    )
+    const u2 = mount(
+      h('button', { id: 'b2', onClick: () => c2.set(c2() + 1) }, () => `c2=${c2()}`),
+      root2,
+    )
+
+    root1.querySelector<HTMLButtonElement>('#b1')!.click()
+    root1.querySelector<HTMLButtonElement>('#b1')!.click()
+    root2.querySelector<HTMLButtonElement>('#b2')!.click()
+    await flush()
+
+    expect(c1()).toBe(2)
+    expect(c2()).toBe(1)
+
+    u1()
+    u2()
+    root1.remove()
+    root2.remove()
+  })
+
+  it('event delegation — multi-word event names like onPointerDown actually fire', async () => {
+    // Regression for the bug fixed alongside this PR:
+    // `onPointerDown` was being lowercased to `pointerDown` for the
+    // DELEGATED_EVENTS lookup, missing the all-lowercase entry, so the
+    // handler was attached via addEventListener('pointerDown', ...) which
+    // never fires. Same for mousedown, dblclick, touchstart, etc.
+    let pointerDownFired = 0
+    let dblClickFired = 0
+    const { container, unmount } = mountInBrowser(
+      h('div', {
+        id: 'evt',
+        onPointerDown: () => {
+          pointerDownFired++
+        },
+        onDblClick: () => {
+          dblClickFired++
+        },
+      }),
+    )
+    const target = container.querySelector('#evt')!
+    target.dispatchEvent(
+      new PointerEvent('pointerdown', { bubbles: true, pointerId: 1 }),
+    )
+    target.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    await flush()
+    expect(pointerDownFired).toBe(1)
+    expect(dblClickFired).toBe(1)
+    unmount()
+  })
+})

package/src/tests/ssr-xss-round-trip.browser.test.ts

@@ -0,0 +1,93 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+// End-to-end XSS round-trip for the For-key-marker fix (PR #235).
+// The happy-dom/Node tests assert the encoder produces safe-looking
+// output; this one asserts a real Chromium browser parses the encoded
+// SSR output without executing the injected script.
+//
+// runtime-server can't be imported in the browser (Node async_hooks),
+// so we reconstruct SSR-shaped output directly: a pre-fix (vulnerable)
+// string to prove the attack model, and a post-fix (encoded) string
+// to prove the fix neutralizes it.
+
+describe('SSR → real-browser round-trip — For-key marker XSS', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('unencoded attacker key in marker would execute script in Chromium (attack model)', async () => {
+    const win = window as Window & { __preFixFired?: boolean }
+    win.__preFixFired = false
+
+    // Build what PRE-fix SSR would have emitted: the raw attacker key
+    // interpolated directly into the comment.
+    const attackKey = `--><script>window.__preFixFired = true</script><!--`
+    const preFixHtml =
+      `<!--pyreon-for--><!--k:${attackKey}--><li>item</li><!--/pyreon-for-->`
+
+    const container = document.createElement('div')
+    // innerHTML does not execute <script> per HTML5 spec — so use
+    // document.write-free manual parsing via DOMParser, then adopt.
+    // This mirrors what a streaming renderer would produce.
+    const parsed = new DOMParser().parseFromString(
+      `<body>${preFixHtml}</body>`,
+      'text/html',
+    )
+    // Move the parsed body's children into our container; re-insert
+    // script tags via createElement so they execute in the real page.
+    for (const node of Array.from(parsed.body.childNodes)) {
+      if (node.nodeType === 1 && (node as Element).tagName === 'SCRIPT') {
+        const s = document.createElement('script')
+        s.textContent = (node as HTMLScriptElement).textContent ?? ''
+        container.appendChild(s)
+      } else {
+        container.appendChild(node)
+      }
+    }
+    document.body.appendChild(container)
+    await new Promise((r) => setTimeout(r, 0))
+
+    // Attack model proof: the raw form DOES execute when re-inserted.
+    expect(win.__preFixFired).toBe(true)
+
+    container.remove()
+    delete win.__preFixFired
+  })
+
+  it('encoded marker (post-fix) does NOT execute script in Chromium', async () => {
+    const win = window as Window & { __postFixFired?: boolean }
+    win.__postFixFired = false
+
+    // Build what POST-fix SSR emits after safeKeyForMarker:
+    // encodeURIComponent then all `-` → `%2D`.
+    const attackKey = `--><script>window.__postFixFired = true</script><!--`
+    const encoded = encodeURIComponent(attackKey).replace(/-/g, '%2D')
+    const postFixHtml =
+      `<!--pyreon-for--><!--k:${encoded}--><li>item</li><!--/pyreon-for-->`
+
+    const container = document.createElement('div')
+    const parsed = new DOMParser().parseFromString(
+      `<body>${postFixHtml}</body>`,
+      'text/html',
+    )
+    for (const node of Array.from(parsed.body.childNodes)) {
+      if (node.nodeType === 1 && (node as Element).tagName === 'SCRIPT') {
+        const s = document.createElement('script')
+        s.textContent = (node as HTMLScriptElement).textContent ?? ''
+        container.appendChild(s)
+      } else {
+        container.appendChild(node)
+      }
+    }
+    document.body.appendChild(container)
+    await new Promise((r) => setTimeout(r, 0))
+
+    // Post-fix: no script was parsed out of the marker. Encoded key
+    // stays inside the comment; nothing to execute.
+    expect(win.__postFixFired).toBe(false)
+    expect(container.querySelector('script')).toBeNull()
+
+    container.remove()
+    delete win.__postFixFired
+  })
+})

package/src/tests/style-key-removal.browser.test.ts

@@ -0,0 +1,54 @@
+import { h } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+// Real-Chromium smoke for the #233 style-key-removal fix. happy-dom can
+// pass because its CSSStyleDeclaration stub is forgiving — this suite
+// asserts the fix holds up against a real engine's styles bag.
+
+describe('reactive style — stale keys removed (real browser)', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('drops a key that disappears from a reactive style object', async () => {
+    const style = signal<Record<string, string>>({ color: 'rgb(255, 0, 0)', fontSize: '14px' })
+    const { container, unmount } = mountInBrowser(
+      h('div', { id: 's1', style: () => style() }, 'x'),
+    )
+
+    const el = container.querySelector<HTMLDivElement>('#s1')!
+    expect(el.style.color).toBe('rgb(255, 0, 0)')
+    expect(el.style.fontSize).toBe('14px')
+
+    style.set({ color: 'rgb(255, 0, 0)' })
+    await flush()
+
+    expect(el.style.color).toBe('rgb(255, 0, 0)')
+    // Chromium reports the removed longhand as an empty string on the
+    // inline style. This is exactly what #233 intended and what happy-dom
+    // only started reporting after the fix landed.
+    expect(el.style.fontSize).toBe('')
+    unmount()
+  })
+
+  it('clears every tracked key when style becomes null', async () => {
+    const style = signal<Record<string, string> | null>({
+      color: 'rgb(0, 0, 255)',
+      padding: '10px',
+    })
+    const { container, unmount } = mountInBrowser(
+      h('div', { id: 's2', style: () => style() }, 'x'),
+    )
+    const el = container.querySelector<HTMLDivElement>('#s2')!
+    expect(el.style.color).toBe('rgb(0, 0, 255)')
+
+    style.set(null)
+    await flush()
+
+    expect(el.style.color).toBe('')
+    expect(el.style.padding).toBe('')
+    unmount()
+  })
+})

package/src/tests/style-key-removal.test.ts

@@ -0,0 +1,88 @@
+import { h } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { mount } from '../index'
+
+describe('reactive style object — stale keys are removed', () => {
+  let container: HTMLDivElement
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+  })
+
+  it('removes a property that disappears from a reactive style object', () => {
+    const style = signal<Record<string, string>>({ color: 'red', fontSize: '14px' })
+
+    mount(h('div', { style: () => style() }), container)
+
+    const el = container.querySelector('div') as HTMLDivElement
+    expect(el.style.color).toBe('red')
+    expect(el.style.fontSize).toBe('14px')
+
+    // Drop fontSize — previous behavior left it on the element.
+    style.set({ color: 'red' })
+
+    expect(el.style.color).toBe('red')
+    expect(el.style.fontSize).toBe('')
+  })
+
+  it('clears all object-mode keys when reactive style becomes null', () => {
+    const style = signal<Record<string, string> | null>({ color: 'blue', padding: '10px' })
+
+    mount(h('div', { style: () => style() }), container)
+
+    const el = container.querySelector('div') as HTMLDivElement
+    expect(el.style.color).toBe('blue')
+    expect(el.style.padding).toBe('10px')
+
+    style.set(null)
+
+    expect(el.style.color).toBe('')
+    expect(el.style.padding).toBe('')
+  })
+
+  it('clears every tracked key when reactive style shrinks to an empty object', () => {
+    // Empty-object edge flagged on PR #233: if the new value is `{}`, the
+    // `value == null` branch in applyStyleProp is skipped, but the key-diff
+    // loop still iterates the prior tracked set and removes each one.
+    const style = signal<Record<string, string>>({ color: 'green', margin: '2px' })
+
+    mount(h('div', { style: () => style() }), container)
+
+    const el = container.querySelector('div') as HTMLDivElement
+    expect(el.style.color).toBe('green')
+    expect(el.style.margin).toBe('2px')
+
+    style.set({})
+
+    expect(el.style.color).toBe('')
+    expect(el.style.margin).toBe('')
+  })
+
+  it('handles object → string → object transitions without leaking keys', () => {
+    const style = signal<string | Record<string, string>>({ color: 'red' })
+
+    mount(h('div', { style: () => style() }), container)
+
+    const el = container.querySelector('div') as HTMLDivElement
+    expect(el.style.color).toBe('red')
+
+    // Swap to string form — cssText replaces everything.
+    style.set('background: yellow;')
+    expect(el.style.color).toBe('')
+    expect(el.style.background).toContain('yellow')
+
+    // Swap back to object form. The previous object-mode tracking was
+    // reset by the string assignment, so we start fresh and must not
+    // carry forward stale keys from the initial object.
+    style.set({ margin: '5px' })
+    expect(el.style.margin).toBe('5px')
+    // Previously-set `background` from the string form stays put because
+    // cssText can't round-trip through key-level tracking — this is
+    // identical to React/Solid/Vue behavior; document it.
+  })
+})

package/src/tests/transition-timeout-leak.test.ts

@@ -0,0 +1,126 @@
+import type { ComponentFn } from '@pyreon/core'
+import { h } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { Transition as _Transition, mount } from '../index'
+
+const Transition = _Transition as unknown as ComponentFn<Record<string, unknown>>
+
+function container(): HTMLElement {
+  const el = document.createElement('div')
+  document.body.appendChild(el)
+  return el
+}
+
+// Regression for the 5s safety-timer leak in applyEnter / applyLeave.
+// Before the fix, when transitionend fired normally the 5s setTimeout was
+// never cleared and would re-invoke `done()` later, firing onAfterEnter /
+// onAfterLeave twice and leaking closures over the element.
+describe('Transition — safety-timer leak (regression)', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  test('onAfterEnter fires exactly once when transitionend fires before 5s safety timeout', async () => {
+    const el = container()
+    const show = signal(false)
+    const onAfterEnter = vi.fn()
+
+    mount(
+      h(
+        Transition,
+        { name: 'fade', show: () => show(), onAfterEnter },
+        h('div', { class: 'enter-leak' }, 'x'),
+      ),
+      el,
+    )
+
+    show.set(true)
+    await vi.advanceTimersByTimeAsync(20)
+
+    const target = el.querySelector('.enter-leak') as HTMLElement
+    expect(target).not.toBeNull()
+
+    target.dispatchEvent(new Event('transitionend'))
+    expect(onAfterEnter).toHaveBeenCalledTimes(1)
+
+    // Advance past the safety timeout. With the leak, done() would fire again.
+    await vi.advanceTimersByTimeAsync(6000)
+    expect(onAfterEnter).toHaveBeenCalledTimes(1)
+  })
+
+  test('onAfterLeave fires exactly once when transitionend fires before 5s safety timeout', async () => {
+    const el = container()
+    const show = signal(true)
+    const onAfterLeave = vi.fn()
+
+    mount(
+      h(
+        Transition,
+        { name: 'fade', show: () => show(), onAfterLeave },
+        h('div', { class: 'leave-leak' }, 'x'),
+      ),
+      el,
+    )
+    await vi.advanceTimersByTimeAsync(20)
+
+    show.set(false)
+    await vi.advanceTimersByTimeAsync(20)
+
+    const target = el.querySelector('.leave-leak') as HTMLElement
+    expect(target).not.toBeNull()
+
+    target.dispatchEvent(new Event('transitionend'))
+    expect(onAfterLeave).toHaveBeenCalledTimes(1)
+
+    await vi.advanceTimersByTimeAsync(6000)
+    expect(onAfterLeave).toHaveBeenCalledTimes(1)
+  })
+
+  // Regression: component unmount during an in-flight transition used to
+  // leave the 5s safety timer running. onAfterEnter / onAfterLeave would
+  // fire on a detached element up to 5 seconds after unmount.
+  test('onAfterEnter does NOT fire after component unmount during enter transition', async () => {
+    const el = container()
+    const show = signal(false)
+    const onAfterEnter = vi.fn()
+    const dispose = mount(
+      h(
+        Transition,
+        { name: 'fade', show: () => show(), onAfterEnter },
+        h('div', { class: 'unmount-enter' }, 'x'),
+      ),
+      el,
+    )
+
+    show.set(true)
+    await vi.advanceTimersByTimeAsync(20)
+    // Mid-transition — unmount without firing transitionend.
+    dispose()
+    await vi.advanceTimersByTimeAsync(6000)
+    expect(onAfterEnter).not.toHaveBeenCalled()
+  })
+
+  test('onAfterLeave does NOT fire after component unmount during leave transition', async () => {
+    const el = container()
+    const show = signal(true)
+    const onAfterLeave = vi.fn()
+    const dispose = mount(
+      h(
+        Transition,
+        { name: 'fade', show: () => show(), onAfterLeave },
+        h('div', { class: 'unmount-leave' }, 'x'),
+      ),
+      el,
+    )
+    await vi.advanceTimersByTimeAsync(20)
+
+    show.set(false)
+    await vi.advanceTimersByTimeAsync(20)
+    dispose()
+    await vi.advanceTimersByTimeAsync(6000)
+    expect(onAfterLeave).not.toHaveBeenCalled()
+  })
+})