@pyreon/runtime-dom 0.24.5 → 0.24.6

package/src/transition-group.ts

@@ -1,350 +0,0 @@
-import type { Props, VNode, VNodeChild } from '@pyreon/core'
-import { createRef, h, nativeCompat, onMount, onUnmount } from '@pyreon/core'
-import { effect, runUntracked, signal } from '@pyreon/reactivity'
-import { mountChild } from './mount'
-
-export interface TransitionGroupProps<T = unknown> {
-  /** Wrapper element tag. Default: "div" */
-  tag?: string
-  /** CSS class prefix. Default: "pyreon" */
-  name?: string
-  /** Animate items on initial mount. Default: false */
-  appear?: boolean
-  // CSS class overrides
-  enterFrom?: string
-  enterActive?: string
-  enterTo?: string
-  leaveFrom?: string
-  leaveActive?: string
-  leaveTo?: string
-  /** Class applied during FLIP move animation. Default: "{name}-move" */
-  moveClass?: string
-  /** Reactive list source */
-  items: () => T[]
-  /** Stable key extractor */
-  keyFn: (item: T, index: number) => string | number
-  /**
-   * Render a single DOM-element VNode for each item.
-   * Must return a VNode whose `type` is a string (e.g. "div", "li") so
-   * the component can inject a ref and read the underlying DOM node.
-   */
-  render: (item: T, index: number) => VNode
-  // Lifecycle callbacks
-  onBeforeEnter?: (el: HTMLElement) => void
-  onAfterEnter?: (el: HTMLElement) => void
-  onBeforeLeave?: (el: HTMLElement) => void
-  onAfterLeave?: (el: HTMLElement) => void
-}
-
-type ItemEntry = {
-  key: string | number
-  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
-}
-
-/**
- * TransitionGroup — animates a keyed reactive list with CSS enter/leave and
- * FLIP move animations.
- *
- * Class lifecycle:
- *   Enter: {name}-enter-from → {name}-enter-active + {name}-enter-to → cleanup
- *   Leave: {name}-leave-from → {name}-leave-active + {name}-leave-to → item removed
- *   Move:  {name}-move (applied when an item shifts position)
- *
- * @example
- * const items = signal([{ id: 1 }, { id: 2 }])
- *
- * h(TransitionGroup, {
- *   tag: "ul",
- *   name: "list",
- *   items,
- *   keyFn: (item) => item.id,
- *   render: (item) => h("li", { class: "item" }, item.id),
- * })
- *
- * // CSS:
- * // .list-enter-from, .list-leave-to { opacity: 0; transform: translateY(-10px); }
- * // .list-enter-active, .list-leave-active { transition: all 300ms ease; }
- * // .list-move { transition: transform 300ms ease; }
- */
-export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VNodeChild {
-  const tag = props.tag ?? 'div'
-  const n = props.name ?? 'pyreon'
-  const cls = {
-    ef: props.enterFrom ?? `${n}-enter-from`,
-    ea: props.enterActive ?? `${n}-enter-active`,
-    et: props.enterTo ?? `${n}-enter-to`,
-    lf: props.leaveFrom ?? `${n}-leave-from`,
-    la: props.leaveActive ?? `${n}-leave-active`,
-    lt: props.leaveTo ?? `${n}-leave-to`,
-    mv: props.moveClass ?? `${n}-move`,
-  }
-
-  const containerRef = createRef<HTMLElement>()
-  const entries = new Map<string | number, ItemEntry>()
-  // Gates the effect until the container element is in the DOM
-  const ready = signal(false)
-  let firstRun = true
-
-  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 = (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)
-    })
-  }
-
-  /** Start leave animation for removed items. */
-  const processLeaves = (newKeys: Set<string | number>) => {
-    for (const [key, entry] of entries) {
-      if (newKeys.has(key) || entry.leaving) continue
-      entry.leaving = true
-      const el = entry.ref.current
-      if (el) {
-        applyLeave(entry, el, () => {
-          entry.cleanup()
-          entries.delete(key)
-        })
-      } else {
-        entry.cleanup()
-        entries.delete(key)
-      }
-    }
-  }
-
-  /** Mount new items and return the list of newly created entries. */
-  const mountNewItems = (items: T[], container: HTMLElement): ItemEntry[] => {
-    const newEntries: ItemEntry[] = []
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i] as T
-      const key = props.keyFn(item, i)
-      if (entries.has(key)) continue
-      const itemRef = createRef<HTMLElement>()
-      // Both render AND mountChild must run untracked — child component
-      // setup (signal reads inside the render callback's resulting tree,
-      // useTheme / useQuery's options() construction etc.) must NOT
-      // subscribe this effect. Otherwise an unrelated signal flip re-runs
-      // the TransitionGroup effect, runCleanup() disposes the children's
-      // inner effects, and the next mount path skips re-rendering kept
-      // entries → the inner reactivity is lost. Same shape as the
-      // mountFor / mountKeyedList fix in nodes.ts.
-      const cleanup = runUntracked(() => {
-        const rawVNode = props.render(item, i)
-        const vnode: VNode =
-          typeof rawVNode.type === 'string'
-            ? { ...rawVNode, props: { ...rawVNode.props, ref: itemRef } as Props }
-            : rawVNode
-        return mountChild(vnode, container, null)
-      })
-      const entry: ItemEntry = { key, ref: itemRef, cleanup, leaving: false, cancelTransition: null }
-      entries.set(key, entry)
-      newEntries.push(entry)
-    }
-    return newEntries
-  }
-
-  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)
-    })
-  }
-
-  const flipEntry = (entry: ItemEntry, oldPos: DOMRect) => {
-    if (!entry.ref.current) return
-    const newPos = entry.ref.current.getBoundingClientRect()
-    const dx = oldPos.left - newPos.left
-    const dy = oldPos.top - newPos.top
-    if (Math.abs(dx) < 1 && Math.abs(dy) < 1) return
-    const el = entry.ref.current
-    el.style.transform = `translate(${dx}px, ${dy}px)`
-    el.style.transition = 'none'
-    startMoveAnimation(entry, el)
-  }
-
-  /** Apply FLIP move animations for items that shifted position. */
-  const applyFlipMoves = (oldPositions: Map<string | number, DOMRect>) => {
-    requestAnimationFrame(() => {
-      for (const [key, entry] of entries) {
-        if (entry.leaving) continue
-        const oldPos = oldPositions.get(key)
-        if (!oldPos) continue
-        flipEntry(entry, oldPos)
-      }
-    })
-  }
-
-  const recordOldPositions = (): Map<string | number, DOMRect> => {
-    const oldPositions = new Map<string | number, DOMRect>()
-    for (const [key, entry] of entries) {
-      if (!entry.leaving && entry.ref.current) {
-        oldPositions.set(key, entry.ref.current.getBoundingClientRect())
-      }
-    }
-    return oldPositions
-  }
-
-  const reorderEntries = (items: T[], container: HTMLElement) => {
-    for (let i = 0; i < items.length; i++) {
-      const key = props.keyFn(items[i] as T, i)
-      const entry = entries.get(key)
-      if (!entry || entry.leaving || !entry.ref.current) continue
-      container.appendChild(entry.ref.current)
-    }
-  }
-
-  const animateNewEntries = (newEntries: ItemEntry[]) => {
-    for (const entry of newEntries) {
-      queueMicrotask(() => {
-        if (entry.ref.current) applyEnter(entry, entry.ref.current)
-      })
-    }
-  }
-
-  const e = effect(() => {
-    if (!ready()) return
-    const container = containerRef.current
-    if (!container) return
-
-    const items = props.items()
-    const newKeys = new Set(items.map((item, i) => props.keyFn(item, i)))
-    const isFirst = firstRun
-    firstRun = false
-
-    const oldPositions = recordOldPositions()
-    processLeaves(newKeys)
-    const newEntries = mountNewItems(items, container)
-    reorderEntries(items, container)
-
-    if (!isFirst || props.appear) animateNewEntries(newEntries)
-    if (!isFirst && oldPositions.size > 0) applyFlipMoves(oldPositions)
-  })
-
-  // Fire the effect once the container is in the DOM
-  onMount(() => {
-    ready.set(true)
-  })
-
-  onUnmount(() => {
-    e.dispose()
-    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()
-  })
-
-  return h(tag, { ref: containerRef })
-}
-
-// Mark as native so compat-mode jsx() runtimes skip wrapCompatComponent —
-// TransitionGroup uses signal/effect/onMount/onUnmount + mountChild that
-// need Pyreon's setup frame.
-nativeCompat(TransitionGroup)

package/src/transition.ts

@@ -1,245 +0,0 @@
-import type { Props, VNode, VNodeChild } from '@pyreon/core'
-import { createRef, Fragment, h, nativeCompat, onUnmount } from '@pyreon/core'
-import { effect, runUntracked, signal } from '@pyreon/reactivity'
-
-// Dev-mode gate: `import.meta.env.DEV` is the Vite/Rolldown standard,
-// literal-replaced at build time. The previous `typeof process !== 'undefined'`
-// pattern was dead code in real Vite browser bundles because Vite does not
-// polyfill `process` for the client — every wrapped warning silently never
-// fired in dev. Enforced by the `pyreon/no-process-dev-gate` lint rule.
-const __DEV__ = process.env.NODE_ENV !== 'production'
-
-export interface TransitionProps {
-  /**
-   * CSS class name prefix.
-   * "fade" → fade-enter-from, fade-enter-active, fade-enter-to, fade-leave-from, …
-   * Default: "pyreon"
-   */
-  name?: string
-  /** Reactive boolean controlling whether the child is shown. */
-  show: () => boolean
-  /**
-   * If true, runs the enter transition on the initial mount (instead of
-   * appearing immediately). Default: false.
-   */
-  appear?: boolean
-  // Individual class name overrides (override the prefix-based defaults)
-  enterFrom?: string
-  enterActive?: string
-  enterTo?: string
-  leaveFrom?: string
-  leaveActive?: string
-  leaveTo?: string
-  // Lifecycle callbacks
-  onBeforeEnter?: (el: HTMLElement) => void
-  onAfterEnter?: (el: HTMLElement) => void
-  onBeforeLeave?: (el: HTMLElement) => void
-  onAfterLeave?: (el: HTMLElement) => void
-  /**
-   * The single child element to animate.
-   * Must be a direct DOM element VNode (not a component) for class injection to work.
-   */
-  children?: VNodeChild
-}
-
-/**
- * Transition — adds CSS enter/leave animation classes to a single child element,
- * controlled by the reactive `show` prop.
- *
- * Class lifecycle:
- *   Enter: {name}-enter-from  → (next frame) → {name}-enter-active + {name}-enter-to → cleanup
- *   Leave: {name}-leave-from  → (next frame) → {name}-leave-active + {name}-leave-to → unmount
- *
- * The child element stays in the DOM during the leave animation and is removed only
- * after the CSS transition / animation completes.
- *
- * @example
- * const visible = signal(false)
- *
- * h(Transition, { name: "fade", show: () => visible() },
- *   h("div", { class: "modal" }, "content")
- * )
- *
- * // CSS:
- * // .fade-enter-from, .fade-leave-to  { opacity: 0; }
- * // .fade-enter-active, .fade-leave-active { transition: opacity 300ms ease; }
- */
-export function Transition(props: TransitionProps): VNodeChild {
-  const n = props.name ?? 'pyreon'
-  const cls = {
-    ef: props.enterFrom ?? `${n}-enter-from`,
-    ea: props.enterActive ?? `${n}-enter-active`,
-    et: props.enterTo ?? `${n}-enter-to`,
-    lf: props.leaveFrom ?? `${n}-leave-from`,
-    la: props.leaveActive ?? `${n}-leave-active`,
-    lt: props.leaveTo ?? `${n}-leave-to`,
-  }
-
-  // Ref injected into the child element so we can apply/remove classes
-  const ref = createRef<HTMLElement>()
-  const isMounted = signal(runUntracked<boolean>(props.show))
-
-  // 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
-      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)
-        props.onAfterLeave?.(el)
-      }
-      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
-      safetyTimer = setTimeout(done, 5000)
-    })
-  }
-
-  const handleVisibilityChange = (visible: boolean) => {
-    if (visible) {
-      if (!isMounted.peek()) isMounted.set(true)
-      queueMicrotask(() => applyEnter(ref.current as HTMLElement))
-      return
-    }
-    if (!isMounted.peek()) return
-    const el = ref.current
-    if (!el) {
-      isMounted.set(false)
-      return
-    }
-    applyLeave(el)
-  }
-
-  // queueMicrotask defers the appear-animation to after the DOM has
-  // committed the initial mount — that scheduling IS the reactive
-  // subscription's job here (it tracks `props.show()` and `props.appear`
-  // and schedules the visual transition). Not setup work.
-  // pyreon-lint-disable-next-line pyreon/no-imperative-effect-on-create
-  effect(() => {
-    const visible = props.show()
-    if (!initialized) {
-      initialized = true
-      if (visible && props.appear) {
-        queueMicrotask(() => applyEnter(ref.current as HTMLElement))
-      }
-      return
-    }
-    handleVisibilityChange(visible)
-  })
-
-  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
-  })
-
-  // Return a reactive getter. Each call clones the child VNode with our injected ref
-  // so we can read / write classes on the underlying DOM element.
-  const rawChild = props.children
-  // Return an empty Fragment (not null) when unmounted so mountChild uses
-  // mountReactive instead of the null/primitive text-node fast-path, which
-  // cannot later be swapped for a VNode when the element enters.
-  const emptyFragment = h(Fragment, null)
-  return (() => {
-    if (!isMounted()) return emptyFragment
-    if (!rawChild || typeof rawChild !== 'object' || Array.isArray(rawChild)) {
-      return rawChild ?? null
-    }
-    const vnode = rawChild as VNode
-    // Only inject ref into DOM element children — component children need ref forwarding
-    if (typeof vnode.type !== 'string') {
-      if (__DEV__) {
-        console.warn(
-          '[Pyreon] Transition child is a component. Wrap it in a DOM element for enter/leave animations to work.',
-        )
-      }
-      return vnode
-    }
-    return { ...vnode, props: { ...vnode.props, ref } as Props }
-  }) as unknown as VNode
-}
-
-// Mark as native so compat-mode jsx() runtimes skip wrapCompatComponent —
-// Transition uses signal/effect/onUnmount that need Pyreon's setup frame.
-nativeCompat(Transition)