@pyreon/runtime-dom 0.12.14 → 0.13.0

package/src/tests/props.test.ts

@@ -269,6 +269,123 @@ describe('applyProp — innerHTML', () => {
     expect(warnSpy).not.toHaveBeenCalled()
     warnSpy.mockRestore()
   })
+
+  test('reactive innerHTML accessor — function value is called, not stringified', async () => {
+    // Regression: the JSX compiler emits `innerHTML={getIcon(props.x ? "a" : "b")}`
+    // as a `() => …` accessor. Without function-value handling here, the
+    // closure was set as literal text — `() => getIcon(...)` rendered
+    // verbatim instead of the SVG.
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('div')
+    const which = signal<'a' | 'b'>('a')
+    const cleanup = applyProp(el, 'innerHTML', () => `<span data-x="${which()}">x</span>`)
+    expect(el.querySelector('[data-x="a"]')).not.toBeNull()
+    expect(el.innerHTML).not.toContain('=>')
+    which.set('b')
+    expect(el.querySelector('[data-x="b"]')).not.toBeNull()
+    cleanup?.()
+  })
+
+  test('reactive dangerouslySetInnerHTML accessor — function value is called, not stringified', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('div')
+    const html = signal('<em>one</em>')
+    const cleanup = applyProp(el, 'dangerouslySetInnerHTML', () => ({ __html: html() }))
+    expect(el.innerHTML).toBe('<em>one</em>')
+    html.set('<em>two</em>')
+    expect(el.innerHTML).toBe('<em>two</em>')
+    cleanup?.()
+  })
+
+  test('dev warning fires if a function reaches applyStaticProp directly (defensive guard)', () => {
+    // applyStaticProp is internal — reachable only if a future special-case
+    // branch in applyProp bypasses the reactive-wrap dance. The dev guard
+    // catches that regression at first render.
+    const el = document.createElement('div')
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    // Indirect: trigger by routing a function through `applyProp` for a
+    // key that DOESN'T have a special case — exercises the reactive path,
+    // which calls the accessor + passes the result. The accessor itself
+    // returning a function would surface the warning.
+    applyProp(el, 'innerHTML', () => () => '<em>nested</em>')
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('applyStaticProp received a function for "innerHTML"'),
+    )
+    warnSpy.mockRestore()
+  })
+})
+
+// Comprehensive sweep: every string-typed sink must handle reactive
+// (function) values. The original bug was specific to innerHTML, but the
+// structural fix should cover ALL sinks the same way. These tests assert
+// that.
+describe('applyProp — reactive function values across all sink kinds', () => {
+  test('reactive href accessor on <a>', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('a')
+    const path = signal('/one')
+    const cleanup = applyProp(el, 'href', () => path())
+    expect(el.getAttribute('href')).toBe('/one')
+    path.set('/two')
+    expect(el.getAttribute('href')).toBe('/two')
+    cleanup?.()
+  })
+
+  test('reactive src accessor on <img>', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('img')
+    const url = signal('/a.png')
+    const cleanup = applyProp(el, 'src', () => url())
+    // <img> exposes `src` as a normalized absolute URL — assert via getAttribute
+    expect(el.getAttribute('src')).toBe('/a.png')
+    url.set('/b.png')
+    expect(el.getAttribute('src')).toBe('/b.png')
+    cleanup?.()
+  })
+
+  test('reactive value accessor on <input>', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('input')
+    const val = signal('alpha')
+    const cleanup = applyProp(el, 'value', () => val())
+    expect((el as HTMLInputElement).value).toBe('alpha')
+    val.set('beta')
+    expect((el as HTMLInputElement).value).toBe('beta')
+    cleanup?.()
+  })
+
+  test('reactive title accessor (data attribute pattern)', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('div')
+    const tip = signal('hello')
+    const cleanup = applyProp(el, 'title', () => tip())
+    expect(el.getAttribute('title')).toBe('hello')
+    tip.set('world')
+    expect(el.getAttribute('title')).toBe('world')
+    cleanup?.()
+  })
+
+  test('reactive class accessor (string form)', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('div')
+    const cls = signal('one')
+    const cleanup = applyProp(el, 'class', () => cls())
+    expect(el.className).toBe('one')
+    cls.set('two')
+    expect(el.className).toBe('two')
+    cleanup?.()
+  })
+
+  test('reactive style accessor (object form)', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('div')
+    const color = signal('red')
+    const cleanup = applyProp(el, 'style', () => ({ color: color() }))
+    expect(el.style.color).toBe('red')
+    color.set('blue')
+    expect(el.style.color).toBe('blue')
+    cleanup?.()
+  })
 })
 
 // ─── applyProp — URL safety ──────────────────────────────────────────────────

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

@@ -78,4 +78,49 @@ describe('Transition — safety-timer leak (regression)', () => {
     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()
+  })
 })

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,13 +80,20 @@ 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)
@@ -105,9 +112,21 @@ export function Transition(props: TransitionProps): VNodeChild {
           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
@@ -116,6 +135,8 @@ export function Transition(props: TransitionProps): VNodeChild {
   }
 
   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)
@@ -181,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
   })