@pyreon/runtime-dom 0.12.13 → 0.12.15

package/src/tests/verified-correct-probes.test.ts

@@ -0,0 +1,56 @@
+import { Fragment, h } from '@pyreon/core'
+import { mount } from '../index'
+
+// Lock-in tests for behaviors PR #235 investigated and claimed
+// "verified correct". Without code assertions the prose claims
+// could silently regress.
+
+describe('Fragment + key — key is inert', () => {
+  let container: HTMLDivElement
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+  })
+
+  it('Fragment with a key renders its children inline (key does not reconcile)', () => {
+    mount(
+      h(
+        Fragment,
+        { key: 'x' },
+        h('span', { id: 'a' }, 'a'),
+        h('span', { id: 'b' }, 'b'),
+      ),
+      container,
+    )
+
+    // Both children are present at the top level of the container —
+    // no extra wrapper, key didn't alter the structure.
+    expect(container.querySelector('#a')?.textContent).toBe('a')
+    expect(container.querySelector('#b')?.textContent).toBe('b')
+    expect(container.children).toHaveLength(2)
+  })
+
+  it('Fragment without a key renders identically', () => {
+    mount(
+      h(Fragment, null, h('span', { id: 'a' }, 'a'), h('span', { id: 'b' }, 'b')),
+      container,
+    )
+    expect(container.children).toHaveLength(2)
+    expect(container.querySelector('#a')?.textContent).toBe('a')
+    expect(container.querySelector('#b')?.textContent).toBe('b')
+  })
+})
+
+describe('Suspense fast-resolve — fallback-first streaming contract', () => {
+  // This is a SERVER behavior, not a browser one. The PR-#235 claim was:
+  // renderToStream always emits fallback first, then swap — even if the
+  // async child resolves synchronously. Synchronous callers should use
+  // renderToString. That contract is already locked in by the existing
+  // streaming integration tests; no additional coverage needed here.
+  it.skip('locked in by renderToStream integration tests — see runtime-server/src/tests/ssr.test.ts', () => {})
+})

package/src/transition-group.ts

@@ -41,6 +41,15 @@ type ItemEntry = {
   ref: ReturnType<typeof createRef<HTMLElement>>
   cleanup: () => void
   leaving: boolean
+  /**
+   * Cancel function for an in-progress enter / leave / move transition —
+   * removes listeners, clears the safety timer, strips active-state
+   * classes, but does NOT fire the onAfterX callback. Called when a
+   * transition is superseded or when the whole TransitionGroup unmounts
+   * mid-transition (so onAfterEnter/Leave doesn't fire on a detached
+   * element and the 5s timer doesn't leak past unmount).
+   */
+  cancelTransition: (() => void) | null
 }
 
 /**
@@ -87,40 +96,80 @@ export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VN
   const ready = signal(false)
   let firstRun = true
 
-  const applyEnter = (el: HTMLElement) => {
+  const applyEnter = (entry: ItemEntry, el: HTMLElement) => {
     props.onBeforeEnter?.(el)
     el.classList.remove(cls.lf, cls.la, cls.lt)
     el.classList.add(cls.ef, cls.ea)
     requestAnimationFrame(() => {
       el.classList.remove(cls.ef)
       el.classList.add(cls.et)
+      let safetyTimer: ReturnType<typeof setTimeout> | null = null
       const done = () => {
         el.removeEventListener('transitionend', done)
         el.removeEventListener('animationend', done)
+        if (safetyTimer !== null) {
+          clearTimeout(safetyTimer)
+          safetyTimer = null
+        }
+        entry.cancelTransition = null
         el.classList.remove(cls.ea, cls.et)
         props.onAfterEnter?.(el)
       }
+      entry.cancelTransition = () => {
+        el.removeEventListener('transitionend', done)
+        el.removeEventListener('animationend', done)
+        if (safetyTimer !== null) {
+          clearTimeout(safetyTimer)
+          safetyTimer = null
+        }
+        el.classList.remove(cls.ef, cls.ea, cls.et)
+      }
       el.addEventListener('transitionend', done, { once: true })
       el.addEventListener('animationend', done, { once: true })
+      // Safety timeout: if CSS animation never fires (off-screen, zero
+      // duration, `display: none`), force cleanup so the entry's
+      // onAfterEnter runs and the listener + closure don't leak.
+      safetyTimer = setTimeout(done, 5000)
     })
   }
 
-  const applyLeave = (el: HTMLElement, onDone: () => void) => {
+  const applyLeave = (entry: ItemEntry, el: HTMLElement, onDone: () => void) => {
     props.onBeforeLeave?.(el)
     el.classList.remove(cls.ef, cls.ea, cls.et)
     el.classList.add(cls.lf, cls.la)
     requestAnimationFrame(() => {
       el.classList.remove(cls.lf)
       el.classList.add(cls.lt)
+      let safetyTimer: ReturnType<typeof setTimeout> | null = null
       const done = () => {
         el.removeEventListener('transitionend', done)
         el.removeEventListener('animationend', done)
+        if (safetyTimer !== null) {
+          clearTimeout(safetyTimer)
+          safetyTimer = null
+        }
+        entry.cancelTransition = null
         el.classList.remove(cls.la, cls.lt)
         props.onAfterLeave?.(el)
         onDone()
       }
+      entry.cancelTransition = () => {
+        el.removeEventListener('transitionend', done)
+        el.removeEventListener('animationend', done)
+        if (safetyTimer !== null) {
+          clearTimeout(safetyTimer)
+          safetyTimer = null
+        }
+        el.classList.remove(cls.lf, cls.la, cls.lt)
+      }
       el.addEventListener('transitionend', done, { once: true })
       el.addEventListener('animationend', done, { once: true })
+      // Safety timeout: CRITICAL for transition-group. Without it, a list
+      // item whose leave transition never fires (off-screen, zero
+      // duration, `display: none`) stays in the `entries` Map forever
+      // because `onDone` never runs to `entries.delete(key)` — a real
+      // memory leak that grows with every list mutation.
+      safetyTimer = setTimeout(done, 5000)
     })
   }
 
@@ -131,7 +180,7 @@ export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VN
       entry.leaving = true
       const el = entry.ref.current
       if (el) {
-        applyLeave(el, () => {
+        applyLeave(entry, el, () => {
           entry.cleanup()
           entries.delete(key)
         })
@@ -156,25 +205,41 @@ export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VN
           ? { ...rawVNode, props: { ...rawVNode.props, ref: itemRef } as Props }
           : rawVNode
       const cleanup = mountChild(vnode, container, null)
-      const entry: ItemEntry = { key, ref: itemRef, cleanup, leaving: false }
+      const entry: ItemEntry = { key, ref: itemRef, cleanup, leaving: false, cancelTransition: null }
       entries.set(key, entry)
       newEntries.push(entry)
     }
     return newEntries
   }
 
-  const startMoveAnimation = (el: HTMLElement) => {
+  const startMoveAnimation = (entry: ItemEntry, el: HTMLElement) => {
     requestAnimationFrame(() => {
       el.classList.add(cls.mv)
       el.style.transform = ''
       el.style.transition = ''
+      let safetyTimer: ReturnType<typeof setTimeout> | null = null
       const done = () => {
         el.removeEventListener('transitionend', done)
         el.removeEventListener('animationend', done)
+        if (safetyTimer !== null) {
+          clearTimeout(safetyTimer)
+          safetyTimer = null
+        }
+        entry.cancelTransition = null
+        el.classList.remove(cls.mv)
+      }
+      entry.cancelTransition = () => {
+        el.removeEventListener('transitionend', done)
+        el.removeEventListener('animationend', done)
+        if (safetyTimer !== null) {
+          clearTimeout(safetyTimer)
+          safetyTimer = null
+        }
         el.classList.remove(cls.mv)
       }
       el.addEventListener('transitionend', done, { once: true })
       el.addEventListener('animationend', done, { once: true })
+      safetyTimer = setTimeout(done, 5000)
     })
   }
 
@@ -187,7 +252,7 @@ export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VN
     const el = entry.ref.current
     el.style.transform = `translate(${dx}px, ${dy}px)`
     el.style.transition = 'none'
-    startMoveAnimation(el)
+    startMoveAnimation(entry, el)
   }
 
   /** Apply FLIP move animations for items that shifted position. */
@@ -224,7 +289,7 @@ export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VN
   const animateNewEntries = (newEntries: ItemEntry[]) => {
     for (const entry of newEntries) {
       queueMicrotask(() => {
-        if (entry.ref.current) applyEnter(entry.ref.current)
+        if (entry.ref.current) applyEnter(entry, entry.ref.current)
       })
     }
   }
@@ -255,7 +320,14 @@ export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VN
 
   onUnmount(() => {
     e.dispose()
-    for (const entry of entries.values()) entry.cleanup()
+    for (const entry of entries.values()) {
+      // Cancel any in-progress enter/leave/move transition so the 5s
+      // safety timer doesn't keep running past container unmount and
+      // onAfterEnter / onAfterLeave don't fire on a detached element.
+      entry.cancelTransition?.()
+      entry.cancelTransition = null
+      entry.cleanup()
+    }
     entries.clear()
   })
 

package/src/transition.ts

@@ -80,44 +80,79 @@ export function Transition(props: TransitionProps): VNodeChild {
   const ref = createRef<HTMLElement>()
   const isMounted = signal(runUntracked<boolean>(props.show))
 
-  // Cancel an in-progress leave when re-entering before the animation ends
+  // Cancel in-progress enter / leave when the component unmounts or when a
+  // new transition supersedes the current one. Both are set inside their
+  // respective applyX(). Calling the cancel removes event listeners, clears
+  // the safety timer, and strips active-state classes — WITHOUT firing the
+  // onAfterX callback (which would run on a detached element after unmount).
+  let pendingEnterCancel: (() => void) | null = null
   let pendingLeaveCancel: (() => void) | null = null
   let initialized = false
 
   const applyEnter = (el: HTMLElement) => {
     pendingLeaveCancel?.()
     pendingLeaveCancel = null
+    pendingEnterCancel?.()
+    pendingEnterCancel = null
     props.onBeforeEnter?.(el)
     el.classList.remove(cls.lf, cls.la, cls.lt)
     el.classList.add(cls.ef, cls.ea)
     requestAnimationFrame(() => {
       el.classList.remove(cls.ef)
       el.classList.add(cls.et)
+      let safetyTimer: ReturnType<typeof setTimeout> | null = null
       const done = () => {
         // Remove both listeners — only one fires, so clean up the other
         el.removeEventListener('transitionend', done)
         el.removeEventListener('animationend', done)
+        // Clear the safety timeout — without this, when transitionend fires
+        // normally the 5s timer would still fire later and re-invoke done(),
+        // leaking timer refs and re-firing onAfterEnter.
+        if (safetyTimer !== null) {
+          clearTimeout(safetyTimer)
+          safetyTimer = null
+        }
+        pendingEnterCancel = null
         el.classList.remove(cls.ea, cls.et)
         props.onAfterEnter?.(el)
       }
+      // Cancel path (called from onUnmount or a superseding transition): tears
+      // down without firing onAfterEnter on a detached element.
+      pendingEnterCancel = () => {
+        el.removeEventListener('transitionend', done)
+        el.removeEventListener('animationend', done)
+        if (safetyTimer !== null) {
+          clearTimeout(safetyTimer)
+          safetyTimer = null
+        }
+        el.classList.remove(cls.ef, cls.ea, cls.et)
+      }
       el.addEventListener('transitionend', done, { once: true })
       el.addEventListener('animationend', done, { once: true })
       // Safety timeout: if CSS animation never fires (bad CSS, off-screen), force cleanup
-      setTimeout(done, 5000)
+      safetyTimer = setTimeout(done, 5000)
     })
   }
 
   const applyLeave = (el: HTMLElement) => {
+    pendingEnterCancel?.()
+    pendingEnterCancel = null
     props.onBeforeLeave?.(el)
     el.classList.remove(cls.ef, cls.ea, cls.et)
     el.classList.add(cls.lf, cls.la)
     requestAnimationFrame(() => {
       el.classList.remove(cls.lf)
       el.classList.add(cls.lt)
+      let safetyTimer: ReturnType<typeof setTimeout> | null = null
       const done = () => {
         // Remove both listeners — only one fires, so clean up the other
         el.removeEventListener('transitionend', done)
         el.removeEventListener('animationend', done)
+        // Clear the safety timeout (see applyEnter for rationale).
+        if (safetyTimer !== null) {
+          clearTimeout(safetyTimer)
+          safetyTimer = null
+        }
         el.classList.remove(cls.la, cls.lt)
         pendingLeaveCancel = null
         isMounted.set(false)
@@ -126,12 +161,16 @@ export function Transition(props: TransitionProps): VNodeChild {
       pendingLeaveCancel = () => {
         el.removeEventListener('transitionend', done)
         el.removeEventListener('animationend', done)
+        if (safetyTimer !== null) {
+          clearTimeout(safetyTimer)
+          safetyTimer = null
+        }
         el.classList.remove(cls.lf, cls.la, cls.lt)
       }
       el.addEventListener('transitionend', done, { once: true })
       el.addEventListener('animationend', done, { once: true })
       // Safety timeout: if CSS animation never fires, force cleanup
-      setTimeout(done, 5000)
+      safetyTimer = setTimeout(done, 5000)
     })
   }
 
@@ -163,6 +202,10 @@ export function Transition(props: TransitionProps): VNodeChild {
   })
 
   onUnmount(() => {
+    // Cancel both pending transitions so neither fires its onAfterX
+    // callback on a now-detached element after the 5s safety window.
+    pendingEnterCancel?.()
+    pendingEnterCancel = null
     pendingLeaveCancel?.()
     pendingLeaveCancel = null
   })