sygnal 5.3.7 → 6.0.0

package/src/core/markers/portal.ts

@@ -0,0 +1,96 @@
+/**
+ * PLAN-4.6 core: the Portal marker (R2), registered on import by the public `Portal` module.
+ * A template rewrite (registry `pres`): the `portal` marker becomes a hidden placeholder whose
+ * hooks patch its children into the target with a separate snabbdom patch function. As today
+ * (the 5.x core's createPortalPlaceholder):
+ * - the target is looked up on insert; one rendered later is retried 10 times, 5 ms apart, and a
+ *   late mount pokes the DOM driver (G-261 pokeDOM); never found: SYG417;
+ * - an update patches the portal's content; a removal patches it to empty (its destroy hooks
+ *   run: G-359) and removes it;
+ * - the children move into the placeholder unprocessed (components inside a Portal are not
+ *   instantiated, as today).
+ * G-316: the mount state lives in one object the placeholder's successive
+ * vnodes share (`_p`, handed on by postpatch), so a late-target retry mounts the latest children
+ * once, and a removal cancels a pending retry. `_portalVnode` stays on the current vnode (testing).
+ */
+import {pres} from '../registry'
+import {init as snabbdomInit} from '../../cycle/dom/snabbdom'
+import defaultModules from '../../cycle/dom/modules'
+import {pokeDOM, flat} from '../../cycle/dom/utils'
+import {warn} from '../../extra/diagnostics/legacy'
+
+let patch: any
+const notFound = (target: string) => warn('SYG417', 'Portal', `Target '${target}' not found; content not rendered`, 'Render the target first')
+// (fragments among the children are flattened, as the DOM driver does)
+const box = (children: any[]) => flat({sel: 'div', data: {}, children, text: undefined, elm: undefined, key: undefined})
+
+interface PortalState { v: any; kids: any[]; pv: any; c: any; t: any; dead: boolean }
+
+function mount(st: PortalState, target: string): boolean {
+  const container = document.querySelector(target)
+  if (!container) return false
+  const anchor = document.createElement('div')
+  container.appendChild(anchor)
+  st.pv = st.v.data._portalVnode = (patch ||= snabbdomInit(defaultModules))(anchor, box(st.kids))
+  st.c = st.v.data._portalContainer = container
+  return true
+}
+
+/** mount the portal's children into its target (retried while the target isn't rendered yet) */
+function start(vnode: any, target: string, kids: any[]) {
+  const st: PortalState = vnode.data._p = {v: vnode, kids, pv: null, c: null, t: 0, dead: false}
+  let attempts = 0
+  const tryMount = () => {
+    st.t = 0
+    if (st.dead || st.pv) return
+    if (mount(st, target)) { if (attempts) pokeDOM(st.c) }
+    else if (attempts++ < 10) st.t = setTimeout(tryMount, 5)
+    else notFound(target)
+  }
+  tryMount()
+}
+
+export function portalPlaceholder(target: string, children: any[]): any {
+  const portalChildren = children || []
+  return {
+    // G-328: a selector a plain div can't match, so snabbdom replaces (destroy / insert) the
+    // placeholder when a plain div takes its place, or the reverse, instead of patching it
+    sel: 'div.sygnal-portal',
+    data: {
+      style: {display: 'none'},
+      attrs: {'data-sygnal-portal': target},
+      portalChildren,
+      hook: {
+        insert: (vnode: any) => start(vnode, target, portalChildren),
+        postpatch: (oldVnode: any, newVnode: any) => {
+          const st: PortalState | undefined = oldVnode.data?._p
+          // G-318: reached by a patch, never inserted (hydration over server markup, or a plain
+          // div at the same position before): it starts here, as the 5.x core mounted it
+          if (!st) return void start(newVnode, target, newVnode.data?.portalChildren || [])
+          newVnode.data._p = st
+          st.v = newVnode
+          st.kids = newVnode.data?.portalChildren || []
+          // not mounted yet: the pending retry mounts these children
+          if (!st.pv) return
+          st.pv = newVnode.data._portalVnode = patch(st.pv, box(st.kids))
+          newVnode.data._portalContainer = st.c
+        },
+        destroy: (vnode: any) => {
+          const st: PortalState | undefined = vnode.data?._p
+          if (!st) return
+          st.dead = true
+          clearTimeout(st.t)
+          const el = st.pv?.elm
+          // G-359: patched to empty first, so the content's destroy hooks run (a widget unmounts)
+          if (el) patch(st.pv, box([])), el.remove()
+        },
+      },
+    },
+    children: [],
+    text: undefined,
+    elm: undefined,
+    key: undefined,
+  }
+}
+
+pres.portal = (n) => portalPlaceholder(n.data?.props?.target, n.children || [])

package/src/core/markers/suspense.ts

@@ -0,0 +1,41 @@
+/**
+ * PLAN-4.6 core: Suspense (R2), registered on import by the public `Suspense` module. A
+ * post-processor (registry `posts`) of the injected vnode of an instance whose template has a
+ * `suspense` marker (the 5.x core's processSuspensePost):
+ * - the core injects a child whose READY is false with data-sygnal-ready="false", and a lazy
+ *   component still loading renders data-sygnal-lazy="loading";
+ * - a boundary with a `fallback` shows it (in a data-sygnal-suspense="pending" div) while any
+ *   child below it, not below an inner boundary, is either; else its children (one child
+ *   unwrapped, several in a "resolved" div). A child's scoped vnode (data.isolate) was processed
+ *   by its own instance.
+ */
+import {posts} from '../registry'
+
+// (4-I G-556: through fragments, e.g. a Collection's items)
+function hasNotReadyChild(v: any): boolean {
+  if (!v) return false
+  const a = v.data?.attrs
+  // (4-K G-572: a not-ready child whose view returns text is marked `ready: false`: no element to mark)
+  if (v.ready === false || a?.['data-sygnal-ready'] === 'false' || a?.['data-sygnal-lazy'] === 'loading') return true
+  if (v.sel === 'suspense') return false
+  return Array.isArray(v.children) && v.children.some(hasNotReadyChild)
+}
+
+export function suspensePost(v: any): any {
+  if (!v || v.data?.isolate) return v
+  if (v.sel === 'suspense') {
+    const fallback = v.data?.props?.fallback, children = v.children || []
+    const pending = fallback && children.some(hasNotReadyChild)
+    if (!pending && children.length === 1) return suspensePost(children[0])
+    return {sel: 'div', data: {attrs: {'data-sygnal-suspense': pending ? 'pending' : 'resolved'}}, children: pending ? [typeof fallback === 'string' ? {text: fallback} : fallback] : children.map(suspensePost), text: undefined, elm: undefined, key: undefined}
+  }
+  const kids = v.children
+  let out: any
+  for (let i = 0; kids && i < kids.length; i++) {
+    const o = suspensePost(kids[i])
+    if (o !== kids[i]) (out ||= kids.slice())[i] = o
+  }
+  return out ? {...v, children: out} : v
+}
+
+posts.suspense = suspensePost

package/src/core/markers/transition.ts

@@ -0,0 +1,70 @@
+/**
+ * PLAN-4.6 core: the Transition marker (R2), registered on import by the public `Transition`
+ * module. A template rewrite (registry `pres`): the `transition` marker is replaced by its first
+ * child (walked on, at the marker's path), with snabbdom hooks that add the classes as today
+ * (the 5.x core's applyTransitionHooks):
+ * `${name}-enter|leave-from` + `-active`, two frames later `-from` becomes `-to`, and at the end
+ * (transitionend, or `duration` ms) `-active` and `-to` go. A user's insert/remove hooks on the
+ * child still run. G-279: a leaving element pokes the DOM driver once it is gone. Around a
+ * Collection (4-I G-559): on each item.
+ */
+import {pres} from '../registry'
+import {pokeDOM} from '../../cycle/dom/utils'
+
+function onEnd(el: any, duration: number | undefined, cb: () => void): void {
+  if (typeof duration === 'number') return void setTimeout(cb, duration)
+  const h = () => { el.removeEventListener('transitionend', h); cb() }
+  el.addEventListener('transitionend', h)
+}
+
+/** a copy of the vnode with the hooks (4-I: a copy, so an item's own vnode keeps its hooks) */
+export function transitionHooks(vnode: any, p: {name?: string, duration?: number}): any {
+  const hook = {...vnode.data?.hook}, {insert, remove} = hook, name = p.name || 'v', duration = p.duration
+  const run = (el: any, phase: string, done?: () => void) => {
+    const c = (s: string) => `${name}-${phase}-${s}`
+    el.classList.add(c('from'), c('active'))
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        el.classList.remove(c('from'))
+        el.classList.add(c('to'))
+        onEnd(el, duration, () => {
+          el.classList.remove(c('active'), c('to'))
+          done && done()
+        })
+      })
+    })
+  }
+  hook.insert = (vn: any) => {
+    if (insert) insert(vn)
+    const el = vn.elm
+    if (el && el.classList) run(el, 'enter')
+  }
+  hook.remove = (vn: any, rm: () => void) => {
+    if (remove) remove(vn, () => {})
+    const el = vn.elm
+    if (!el || !el.classList) return void rm()
+    run(el, 'leave', () => {
+      const p = el.parentNode, f = () => el.parentNode || pokeDOM(p)
+      rm()
+      f()
+      el.addEventListener('transitionend', f)
+    })
+  }
+  return {...vnode, data: {...vnode.data, hook}}
+}
+
+// 4-J G-566 / 4-K G-573: an item vnode's copies, per name and duration, under a private symbol
+// (no global symbol registry entry per name)
+const T = Symbol()
+
+pres.transition = (n) => {
+  const child = n.children?.[0], p = n.data?.props || {}, k = p.name + ' ' + p.duration
+  // no element child: the text child (or the marker itself, left as it is: today's behaviour)
+  if (!child?.sel) return child || n
+  // 4-I G-559 (D229): a Collection has no element of its own: each item's root element takes the
+  // hooks (each item enters and leaves on its own). The host calls `tr` per item vnode; the copy is
+  // kept on that vnode for the name and duration, so an unchanged item keeps its vnode (4-J G-566:
+  // under a symbol, which nothing that walks a vnode's fields sees). An item whose root is a
+  // fragment or text has no element to animate: nothing happens
+  return child.sel == 'collection' ? {...child, data: {...child.data, tr: (v: any) => (v[T] ||= {})[k] ||= transitionHooks(v, p)}} : transitionHooks(child, p)
+}

package/src/core/registry.ts

@@ -0,0 +1,25 @@
+/**
+ * PLAN-4.6 core: the module registries (04-hooks-contract §2.1). A feature module fills them
+ * when it is imported; the core only looks them up, so an app that never imports the module pays
+ * nothing (D157). R2 fills hosts (core/hosts: Collection, Switchable) and the markers
+ * (core/markers: Portal, Transition, ClientOnly, Suspense, lazy), each imported by its public
+ * module; R3 adds the definition hooks (behaviors, undo, selection, pager, persist, resources).
+ *
+ * The entries are core modules: they get the owner's raw instance (hooks get InstanceViews).
+ */
+import type {ComponentFn, DefSource} from './hooks'
+
+/**
+ * marker sel -> a child that renders in place of the marker (Collection, Switchable): render(),
+ * setProps(props, children, marker, id), dispose(), ready, outv / last, insts() (its instances)
+ */
+export const hosts: Record<string, (owner: any, props: Record<string, any>, children: any[], id: string, marker: any) => any> = {}
+/** marker sel -> a template rewrite during the reconcile walk (Portal, Transition, ClientOnly, Slot,
+ * widget); `path` is the marker's place in the owner's template ('r.0.2': a widget's identity) */
+export const pres: Record<string, (vnode: any, owner: any, path: string) => any> = {}
+/** marker sel -> a post-processor of an instance's injected vnode whose template had it (Suspense) */
+export const posts: Record<string, (vnode: any, owner: any) => any> = {}
+/** component function -> the function to instantiate (lazy: the loaded component once resolved) */
+export const resolvers: Array<(view: ComponentFn, owner: any) => ComponentFn | undefined> = []
+/** definition time, every app: (src, view) -> src (behaviors, undo, selection, pager, persist, resources) */
+export const defHooks: Array<(src: DefSource, view: ComponentFn) => DefSource | void> = []