@pyreon/runtime-dom 0.1.0

package/src/tests/setup.ts

@@ -0,0 +1,3 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator"
+
+GlobalRegistrator.register()

package/src/transition-group.ts

@@ -0,0 +1,264 @@
+import type { Props, VNode, VNodeChild } from "@pyreon/core"
+import { createRef, h, 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
+}
+
+/**
+ * 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 = (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)
+      const done = () => {
+        el.removeEventListener("transitionend", done)
+        el.removeEventListener("animationend", done)
+        el.classList.remove(cls.ea, cls.et)
+        props.onAfterEnter?.(el)
+      }
+      el.addEventListener("transitionend", done, { once: true })
+      el.addEventListener("animationend", done, { once: true })
+    })
+  }
+
+  const applyLeave = (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)
+      const done = () => {
+        el.removeEventListener("transitionend", done)
+        el.removeEventListener("animationend", done)
+        el.classList.remove(cls.la, cls.lt)
+        props.onAfterLeave?.(el)
+        onDone()
+      }
+      el.addEventListener("transitionend", done, { once: true })
+      el.addEventListener("animationend", done, { once: true })
+    })
+  }
+
+  /** 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(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>()
+      const rawVNode = runUntracked(() => props.render(item, i))
+      const vnode: VNode =
+        typeof rawVNode.type === "string"
+          ? { ...rawVNode, props: { ...rawVNode.props, ref: itemRef } as Props }
+          : rawVNode
+      const cleanup = mountChild(vnode, container, null)
+      const entry: ItemEntry = { key, ref: itemRef, cleanup, leaving: false }
+      entries.set(key, entry)
+      newEntries.push(entry)
+    }
+    return newEntries
+  }
+
+  const startMoveAnimation = (el: HTMLElement) => {
+    requestAnimationFrame(() => {
+      el.classList.add(cls.mv)
+      el.style.transform = ""
+      el.style.transition = ""
+      const done = () => {
+        el.removeEventListener("transitionend", done)
+        el.removeEventListener("animationend", done)
+        el.classList.remove(cls.mv)
+      }
+      el.addEventListener("transitionend", done, { once: true })
+      el.addEventListener("animationend", done, { once: true })
+    })
+  }
+
+  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(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.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)
+    return undefined
+  })
+
+  onUnmount(() => {
+    e.dispose()
+    for (const entry of entries.values()) entry.cleanup()
+    entries.clear()
+  })
+
+  return h(tag, { ref: containerRef })
+}

package/src/transition.ts

@@ -0,0 +1,184 @@
+import type { Props, VNode, VNodeChild } from "@pyreon/core"
+import { createRef, Fragment, h, onUnmount } from "@pyreon/core"
+import { effect, runUntracked, signal } from "@pyreon/reactivity"
+
+const __DEV__ = typeof process !== "undefined" && 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 an in-progress leave when re-entering before the animation ends
+  let pendingLeaveCancel: (() => void) | null = null
+  let initialized = false
+
+  const applyEnter = (el: HTMLElement) => {
+    pendingLeaveCancel?.()
+    pendingLeaveCancel = 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)
+      const done = () => {
+        // Remove both listeners — only one fires, so clean up the other
+        el.removeEventListener("transitionend", done)
+        el.removeEventListener("animationend", done)
+        el.classList.remove(cls.ea, cls.et)
+        props.onAfterEnter?.(el)
+      }
+      el.addEventListener("transitionend", done, { once: true })
+      el.addEventListener("animationend", done, { once: true })
+    })
+  }
+
+  const applyLeave = (el: HTMLElement) => {
+    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)
+      const done = () => {
+        // Remove both listeners — only one fires, so clean up the other
+        el.removeEventListener("transitionend", done)
+        el.removeEventListener("animationend", done)
+        el.classList.remove(cls.la, cls.lt)
+        pendingLeaveCancel = null
+        isMounted.set(false)
+        props.onAfterLeave?.(el)
+      }
+      pendingLeaveCancel = () => {
+        el.removeEventListener("transitionend", done)
+        el.removeEventListener("animationend", done)
+        el.classList.remove(cls.lf, cls.la, cls.lt)
+      }
+      el.addEventListener("transitionend", done, { once: true })
+      el.addEventListener("animationend", done, { once: true })
+    })
+  }
+
+  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)
+  }
+
+  effect(() => {
+    const visible = props.show()
+    if (!initialized) {
+      initialized = true
+      if (visible && props.appear) {
+        queueMicrotask(() => applyEnter(ref.current as HTMLElement))
+      }
+      return
+    }
+    handleVisibilityChange(visible)
+  })
+
+  onUnmount(() => {
+    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
+}