@pyreon/runtime-dom 0.24.5 → 0.24.6

package/src/tests/show-of-for-batched-toggle.browser.test.ts

@@ -1,122 +0,0 @@
-import { For, h, Show } from '@pyreon/core'
-import { signal } from '@pyreon/reactivity'
-import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
-import { describe, expect, it } from 'vitest'
-
-// CONTRACT — bug surfaced by `scripts/leak-sweep.ts` against the
-// `domConditionalToggle-1000` journey; now fixed.
-//
-// **Bug shape (pre-fix):**
-//
-//   [pyreon] Unhandled effect error: NotFoundError: Failed to execute
-//   'insertBefore' on 'Node': The node before which the new node is
-//   to be inserted is not a child of this node.
-//   at mountReactive (...)
-//   at mountChild (...)
-//
-// Trigger: N `<Show when={signal[i]}>` components inside a `<For>`,
-// then batched signal writes flip every `signal[i]` false → true → false.
-//
-// **Root cause:** `mountReactive` captured `parent` in its setup closure.
-// `mountFor` creates child DOM into a DocumentFragment, then moves the
-// fragment contents to the live parent via
-// `liveParent.insertBefore(frag, tailMarker)`. After the move, every
-// `mountReactive` (e.g. the one created when Show's `when` accessor
-// returned the function child) had a stale `parent` reference pointing
-// at the now-empty fragment, while its marker had been carried with the
-// fragment's contents to `liveParent`. On the next signal flip, the
-// effect re-ran and called `parent.insertBefore(node, marker)` against
-// the stale fragment, throwing NotFoundError because `marker` was no
-// longer a child of `parent`. The throw landed in Pyreon's
-// "unhandled effect error" path → console.error + loss of For's
-// children from the DOM (final count dropped to 0).
-//
-// **Fix:** `mountReactive` now reads `marker.parentNode` at each effect
-// run (with the closure-captured `parent` as a detached-marker
-// fallback). The marker is moved by the same `insertBefore(frag, ...)`
-// as the rest of the fragment contents, so its live `parentNode` is
-// always the correct live parent.
-//
-// Reproducer: `bun run perf:leak-sweep --app perf-dashboard --journeys domConditionalToggle-1000`
-
-describe('mountReactive: <Show> inside <For> under batched signal toggles', () => {
-  it('single <Show> with function-child handles toggle cycles correctly (sanity, works today)', async () => {
-    // 1 Show, 1 signal. Should always work — no For wrapper, no batched
-    // multi-signal flush. Proves the bug is specifically the For-of-Show
-    // interaction, not Show itself.
-    const flag = signal<boolean>(true)
-    const { container, unmount } = mountInBrowser(
-      h(
-        'div',
-        { id: 'root' },
-        h(Show, {
-          when: () => flag(),
-          children: () => h('div', { 'data-id': '0' }, 'Visible'),
-        }),
-      ),
-    )
-    await flush()
-    expect(container.querySelectorAll('div[data-id]')).toHaveLength(1)
-    flag.set(false)
-    await flush()
-    expect(container.querySelectorAll('div[data-id]')).toHaveLength(0)
-    flag.set(true)
-    await flush()
-    expect(container.querySelectorAll('div[data-id]')).toHaveLength(1)
-    unmount()
-  })
-
-  it(
-    'CONTRACT: <For> + <Show> mass-toggle does not throw NotFoundError or lose children',
-    async () => {
-      // 100 Show items inside a For. Each Show's `when` is its own signal.
-      // The function child `{() => <div/>}` exercises the function-child
-      // mountReactive path that's the actual failure site.
-      const flags = Array.from({ length: 100 }, () => signal<boolean>(true))
-      const indices = Array.from({ length: 100 }, (_, i) => i)
-
-      const { container, unmount } = mountInBrowser(
-        h(
-          'div',
-          { id: 'root' },
-          For({
-            each: indices,
-            by: (i: number) => i,
-            children: (i: number) =>
-              h(
-                Show,
-                {
-                  when: () => (flags[i] as ReturnType<typeof signal<boolean>>)(),
-                  children: () => h('div', { 'data-id': String(i) }, `Visible ${i}`),
-                },
-              ),
-          }),
-        ),
-      )
-      await flush()
-      try {
-        // Sanity: all 100 visible at mount.
-        expect(container.querySelectorAll('div[data-id]')).toHaveLength(100)
-
-        // ONE mass-toggle cycle: false → true.
-        for (const f of flags) f.set(false)
-        await flush()
-        expect(container.querySelectorAll('div[data-id]')).toHaveLength(0)
-
-        for (const f of flags) f.set(true)
-        await flush()
-
-        // **Bug fires here**: pre-fix the framework throws NotFoundError
-        // inside mountReactive's setup, the entire reactive subtree is
-        // lost, and the count drops to 0. The CONTRACT assertion is
-        // "should be 100"; today the framework returns 0, so `it.fails`
-        // is the correct marker. When the real fix lands, this
-        // assertion will pass and the test will fail — signal to flip
-        // the marker.
-        expect(container.querySelectorAll('div[data-id]')).toHaveLength(100)
-      } finally {
-        unmount()
-      }
-    },
-  )
-})

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

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

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

@@ -1,88 +0,0 @@
-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.
-  })
-})