@vmz/core 0.3.13 → 0.3.14

package/dist/browser/dom/direct-api.js

@@ -1,13 +1,22 @@
 import { mergeClassParts, mergeStyleParts } from '../../shared/dom-attr-normalize.js';
+import { HTML_HASH_ATTR, htmlDigest } from '../../shared/html-digest.js';
 import { applyDirectHostBox } from '../direct-host-box.js';
 import { createUnknownComponentElement } from '../unknown-component.js';
 import { applyDomAttr, eventPropHandlerName } from './attributes.js';
-import { createInstance, disposeDomTree, findOwnedDefaultSlotTarget, findOwnedNamedSlot, insertProjectedSlotNode, parkSlotNode, runDirectCreate, slotAnchorFor, stripFns, } from './component.js';
+import { createInstance, destroy, disposeDomTree, findOwnedDefaultSlotTarget, findOwnedNamedSlot, insertProjectedSlotNode, parkSlotNode, runDirectCreate, slotAnchorFor, stripFns, } from './component.js';
 import { isEventEntryStrategy, noteDomCreate, noteDomRemove, scheduleClientOn } from './lifecycle.js';
 import { components, resolveComponent } from './registry.js';
 import { beginEventFlush, endEventFlush, inferHandlerMethod, methodAllowsSyncEventFlush, registerBind, runDomEventHandler, runPatch, scheduleRefresh, unregisterBind, } from '../reactivity/patch-scheduler.js';
 let directPropBindSeq = 0;
 const SVG_NS = 'http://www.w3.org/2000/svg';
+/** Vue accepts a function or an array of functions for one handler slot. */
+function normalizeHandlerList(value) {
+    if (typeof value === 'function')
+        return [value];
+    if (Array.isArray(value))
+        return value.filter((fn) => typeof fn === 'function');
+    return [];
+}
 /**
  * Nesting depth of inline `<svg>` subtrees during create/resume.
  *
@@ -30,19 +39,136 @@ function isSvgNode(node) {
     const tag = node.tagName;
     return tag != null && String(tag).toLowerCase() === 'svg' && ns == null;
 }
+/** Component display name for a ctor or registry key (`<component :is>` too). */
+function componentDisplayName(nameOrCtor) {
+    if (typeof nameOrCtor === 'function') {
+        const fn = nameOrCtor;
+        return fn.__vmzTag || fn.name || 'Component';
+    }
+    return nameOrCtor == null ? 'Component' : String(nameOrCtor);
+}
+/**
+ * Bind props into `host`, resolve the target component, create its child
+ * instance and run its create. Shared by the static `component()` and the
+ * `dynamicComponent()` remount path so both produce the same boundary.
+ */
+function mountDirectComponentHost(host, hostInst, name, nameOrCtor, props, client) {
+    const rawProps = (props || {});
+    // `id` / `data-*` / `aria-*` are fallthrough attributes, not props: they
+    // belong on the host element (the component boundary in VMZ).
+    const hostAttrs = rawProps.__hostAttrs;
+    if (hostAttrs) {
+        for (const [k, v] of Object.entries(hostAttrs))
+            applyDomAttr(host, k, v);
+    }
+    const resolved = {};
+    for (const [k, v] of Object.entries(rawProps)) {
+        if (k === '__hostAttrs')
+            continue;
+        // Function props that already look like `onXxx` stay as handlers.
+        // Component `@event` never arrives here (emit uses onComponentEvent).
+        const onKey = typeof v === 'function' ? eventPropHandlerName(k) : null;
+        if (onKey)
+            resolved[onKey] = v;
+        else if (typeof v === 'function')
+            resolved[k] = v.call(hostInst);
+        else
+            resolved[k] = v;
+    }
+    if (client) {
+        host.setAttribute('data-vmz-island', name);
+        host.setAttribute('data-vmz-client', String(client));
+        host.setAttribute('data-vmz-props', JSON.stringify(stripFns(resolved)));
+        if (isEventEntryStrategy(String(client))) {
+            host.setAttribute('data-vmz-entry', 'event');
+        }
+        // resume: resume on schedule; EventEntry may lazy-load chunk via __vmzLoadComponent.
+        scheduleClientOn(host, String(client), async () => {
+            const Ctor = typeof nameOrCtor === 'function' ? nameOrCtor : await resolveComponent(name);
+            if (!Ctor) {
+                // Replace placeholder island with leaf error node (do not throw page).
+                const err = createUnknownComponentElement(name, 'island');
+                host.replaceWith(err);
+                return;
+            }
+            const { resume } = await import('../resume/resume.js');
+            await resume(Ctor, host, { props: resolved, state: {} });
+        });
+        return host;
+    }
+    // Static Ctor import path: use Function directly (no registry lookup).
+    const Ctor = (typeof nameOrCtor === 'function' ? nameOrCtor : components[name]);
+    if (!Ctor) {
+        return createUnknownComponentElement(name, 'client');
+    }
+    // Inline chips use `display: contents` (`ui-direct-host-box`). Block surfaces
+    // keep a real box (DataTable select timed out when defaulting everything).
+    // A dynamic switch must reset the previous box before applying the new one.
+    // Writing an empty declaration at all still materialized a `style` attribute
+    // on hosts that never had one, so hydrate rewrote the SSR DOM for block
+    // surfaces. Only inline chips (`display: contents`) have a box to reset.
+    if (host.style && host.style.display === 'contents')
+        host.style.removeProperty('display');
+    applyDirectHostBox(host, name, Ctor);
+    const child = createInstance(Ctor, resolved);
+    if (!(Ctor.__vmzDirect && typeof Ctor.__vmzCreate === 'function')) {
+        throw new Error(`vmz:dom direct component <${name}> requires __vmzCreate (rebuild child with Direct)`);
+    }
+    // Nested resume: keep parent `_resumeAdopt` so child reclaim parked SSR nodes.
+    // Enter the host's private child pool so nested create cannot see uncle siblings.
+    const adopt = directApi._resumeAdopt;
+    const entered = adopt && typeof adopt.enter === 'function' ? adopt.enter(host) : false;
+    // A child nested inside the parent's `v-for` must not feed the parent item
+    // patch sink: those patches belong to the child instance (`this`) and the
+    // parent's each replays them with the parent host, wiping child output.
+    const prevItemPatches = directApi._itemPatches;
+    directApi._itemPatches = null;
+    let node;
+    try {
+        node = runDirectCreate(Ctor, child);
+    }
+    finally {
+        directApi._itemPatches = prevItemPatches;
+        if (entered && adopt && typeof adopt.leave === 'function')
+            adopt.leave();
+    }
+    if (node) {
+        // ifBlock/eachBlock roots are DocumentFragments: appendChild moves
+        // children into `host` and empties the fragment. Keep a live Element
+        // root so projectDefaultSlot can find `<slot>` (Button v-if/v-else).
+        child.__vmzDomRoot = node.nodeType === 11 ? host : node;
+        host.appendChild(node);
+    }
+    host.__vmzInst = child;
+    if (typeof child.onMount === 'function') {
+        const pending = Promise.resolve().then(() => {
+            if (!child.__vmzDestroyed)
+                return child.onMount();
+        });
+        const bag = hostInst.__vmzPendingChildMounts || (hostInst.__vmzPendingChildMounts = []);
+        bag.push(pending);
+    }
+    return host;
+}
 export const directApi = {
     _inst: null,
     _branchBinds: null,
     _itemPatches: null,
     _eachCtx: null,
     _resumeAdopt: null,
-    el(tag) {
+    el(tag, key) {
         const name = tag || 'div';
         const svg = inSvgScope() || name === 'svg';
+        const rowKey = key == null ? null : key;
         if (directApi._resumeAdopt)
-            return directApi._resumeAdopt.el(name, svg);
+            return directApi._resumeAdopt.el(name, svg, rowKey);
         noteDomCreate();
-        return svg ? document.createElementNS(SVG_NS, name) : document.createElement(name);
+        const node = svg ? document.createElementNS(SVG_NS, name) : document.createElement(name);
+        // Row keys live as expandos on the live DOM (the clone kernel does the same)
+        // and as `data-vmz-key` in SSR output for resume reclamation.
+        if (rowKey != null)
+            node.__vmzKey = rowKey;
+        return node;
     },
     elNS(ns, tag) {
         if (directApi._resumeAdopt && typeof directApi._resumeAdopt.elNS === 'function') {
@@ -57,6 +183,26 @@ export const directApi = {
         noteDomCreate();
         return document.createTextNode(value == null ? '' : String(value));
     },
+    /**
+     * Emitted `v-html` write. Resume parks the SSR children of a reclaimed host,
+     * so the live `innerHTML` is still empty when the first patch runs. SSR stamps
+     * `HTML_HASH_ATTR` with the digest of the exact payload string it wrote: a
+     * matching digest proves the parked subtree is the same payload, so adopt
+     * moves it back and no text is ever re-parsed. A different digest writes the
+     * new payload and refreshes the marker for later identical runs.
+     */
+    html(el, value) {
+        const next = value == null ? '' : String(value);
+        const digest = htmlDigest(next);
+        const adopt = directApi._resumeAdopt;
+        if (adopt && typeof adopt.reclaimHtml === 'function' && adopt.reclaimHtml(el, digest))
+            return;
+        const marker = typeof el.getAttribute === 'function' ? el.getAttribute(HTML_HASH_ATTR) : null;
+        if (el.innerHTML !== next)
+            el.innerHTML = next;
+        if (marker != null)
+            el.setAttribute(HTML_HASH_ATTR, digest);
+    },
     nsScopeDepth() {
         return nsStack.length;
     },
@@ -359,96 +505,87 @@ export const directApi = {
     /**
      * Nested component (sync Direct child or island schedule).
      */
-    component(hostInst, nameOrCtor, props, client) {
-        const name = typeof nameOrCtor === 'function' ? nameOrCtor.__vmzTag || nameOrCtor.name || 'Component' : nameOrCtor;
+    component(hostInst, nameOrCtor, props, client, key) {
+        const name = componentDisplayName(nameOrCtor);
         let host = null;
         if (directApi._resumeAdopt && typeof directApi._resumeAdopt.componentHost === 'function') {
-            host = directApi._resumeAdopt.componentHost(name);
+            host = directApi._resumeAdopt.componentHost(name, key);
         }
         if (!host) {
             noteDomCreate();
             host = document.createElement('div');
             host.setAttribute('data-vmz', name);
         }
-        const resolved = {};
-        for (const [k, v] of Object.entries(props || {})) {
-            // Function props that already look like `onXxx` stay as handlers.
-            // Component `@event` never arrives here (emit uses onComponentEvent).
-            const onKey = typeof v === 'function' ? eventPropHandlerName(k) : null;
-            if (onKey)
-                resolved[onKey] = v;
-            else if (typeof v === 'function')
-                resolved[k] = v.call(hostInst);
-            else
-                resolved[k] = v;
-        }
-        if (client) {
-            host.setAttribute('data-vmz-island', name);
-            host.setAttribute('data-vmz-client', String(client));
-            host.setAttribute('data-vmz-props', JSON.stringify(stripFns(resolved)));
-            if (isEventEntryStrategy(String(client))) {
-                host.setAttribute('data-vmz-entry', 'event');
-            }
-            // resume: resume on schedule; EventEntry may lazy-load chunk via __vmzLoadComponent.
-            scheduleClientOn(host, String(client), async () => {
-                const Ctor = typeof nameOrCtor === 'function' ? nameOrCtor : await resolveComponent(name);
-                if (!Ctor) {
-                    // Replace placeholder island with leaf error node (do not throw page).
-                    const err = createUnknownComponentElement(name, 'island');
-                    host.replaceWith(err);
-                    return;
-                }
-                const { resume } = await import('../resume/resume.js');
-                await resume(Ctor, host, { props: resolved, state: {} });
-            });
-            return host;
-        }
-        // Static Ctor import path: use Function directly (no registry lookup).
-        const Ctor = typeof nameOrCtor === 'function' ? nameOrCtor : components[name];
-        if (!Ctor) {
-            return createUnknownComponentElement(name, 'client');
-        }
-        // Inline chips ??`display: contents` (`ui-direct-host-box`). Block surfaces
-        // keep a real box (DataTable select timed out when defaulting everything).
-        applyDirectHostBox(host, name, Ctor);
-        const child = createInstance(Ctor, resolved);
-        if (!(Ctor.__vmzDirect && typeof Ctor.__vmzCreate === 'function')) {
-            throw new Error(`vmz:dom direct component <${name}> requires __vmzCreate (rebuild child with Direct)`);
-        }
-        // Nested resume: keep parent `_resumeAdopt` so child reclaim parked SSR nodes.
-        // Enter the host's private child pool so nested create cannot see uncle siblings.
-        const adopt = directApi._resumeAdopt;
-        const entered = adopt && typeof adopt.enter === 'function' ? adopt.enter(host) : false;
-        // A child nested inside the parent's `v-for` must not feed the parent item
-        // patch sink: those patches belong to the child instance (`this`) and the
-        // parent's each replays them with the parent host, wiping child output.
-        const prevItemPatches = directApi._itemPatches;
-        directApi._itemPatches = null;
-        let node;
-        try {
-            node = runDirectCreate(Ctor, child);
-        }
-        finally {
-            directApi._itemPatches = prevItemPatches;
-            if (entered && adopt && typeof adopt.leave === 'function')
-                adopt.leave();
-        }
-        if (node) {
-            // ifBlock/eachBlock roots are DocumentFragments: appendChild moves
-            // children into `host` and empties the fragment. Keep a live Element
-            // root so projectDefaultSlot can find `<slot>` (Button v-if/v-else).
-            child.__vmzDomRoot = node.nodeType === 11 ? host : node;
-            host.appendChild(node);
+        if (key != null)
+            host.__vmzKey = key;
+        return mountDirectComponentHost(host, hostInst, name, nameOrCtor, props, client);
+    },
+    /**
+     * `<component :is>` boundary. The host element is stable, the child instance
+     * is torn down and rebuilt whenever the evaluated `is` value changes. Props
+     * are re-evaluated per mount so the new type starts from current values, and
+     * the child listener bag is carried over so `@event` handlers keep working.
+     */
+    dynamicComponent(hostInst, bindingId, deps, getCtor, getProps, key) {
+        const resolve = () => {
+            try {
+                return getCtor.call(hostInst);
+            }
+            catch {
+                return null;
+            }
+        };
+        const initial = resolve();
+        const name = componentDisplayName(initial);
+        let host = null;
+        if (directApi._resumeAdopt && typeof directApi._resumeAdopt.componentHost === 'function') {
+            host = directApi._resumeAdopt.componentHost(name, key);
         }
-        host.__vmzInst = child;
-        if (typeof child.onMount === 'function') {
-            const pending = Promise.resolve().then(() => {
-                if (!child.__vmzDestroyed)
-                    return child.onMount();
-            });
-            const bag = hostInst.__vmzPendingChildMounts || (hostInst.__vmzPendingChildMounts = []);
-            bag.push(pending);
+        if (!host) {
+            noteDomCreate();
+            host = document.createElement('div');
+            host.setAttribute('data-vmz', name);
         }
+        if (key != null)
+            host.__vmzKey = key;
+        let current = initial;
+        const render = (next) => {
+            const old = host.__vmzInst;
+            let listeners = null;
+            if (old) {
+                listeners = old.__vmzComponentListeners || null;
+                destroy(old);
+                host.__vmzInst = null;
+            }
+            while (host.firstChild)
+                host.removeChild(host.firstChild);
+            current = next;
+            const nextName = componentDisplayName(next);
+            host.setAttribute('data-vmz', nextName);
+            if (!next)
+                return;
+            const Ctor = typeof next === 'function' ? next : components[nextName];
+            if (!Ctor)
+                return;
+            let props = {};
+            try {
+                props = getProps.call(hostInst) || {};
+            }
+            catch {
+                props = {};
+            }
+            mountDirectComponentHost(host, hostInst, nextName, Ctor, props, null);
+            const child = host.__vmzInst;
+            if (listeners && child)
+                child.__vmzComponentListeners = listeners;
+        };
+        render(initial);
+        directApi.trackPatch(hostInst, deps || [], function __vmzDynamicComponentPatch() {
+            const next = resolve();
+            if (next === current)
+                return;
+            render(next);
+        }, bindingId);
         return host;
     },
     /**
@@ -499,6 +636,206 @@ export const directApi = {
             scheduleRefresh(child, { type: 'replace', root: propName });
         }, bindingId);
     },
+    /**
+     * Object form of `bindComponentProp`: spread every key of the patch-time object
+     * across the child props and clear props whose keys disappear from the object.
+     */
+    bindComponentProps(hostInst, hostEl, slot, deps, get) {
+        if (hostEl && hostEl.__vmzPropBindSeq == null) {
+            hostEl.__vmzPropBindSeq = ++directPropBindSeq;
+        }
+        const seq = hostEl && hostEl.__vmzPropBindSeq != null ? hostEl.__vmzPropBindSeq : ++directPropBindSeq;
+        const bindingId = `pc:${seq}:*${slot || 'obj'}`;
+        const seen = Object.create(null);
+        directApi.trackPatch(hostInst, deps || [], function bindComponentPropsPatch() {
+            let raw;
+            try {
+                raw = get.call(hostInst);
+            }
+            catch {
+                raw = null;
+            }
+            const child = hostEl && hostEl.__vmzInst;
+            if (!child || child.__vmzDestroyed)
+                return;
+            const next = Object.create(null);
+            if (raw && typeof raw === 'object') {
+                for (const key of Object.keys(raw)) {
+                    if (!key || key.startsWith('#'))
+                        continue;
+                    next[key] = raw[key];
+                }
+            }
+            const notify = (key, value) => {
+                child[key] = value;
+                if (typeof child.__vmzOnParentProp === 'function') {
+                    try {
+                        child.__vmzOnParentProp(key, value);
+                    }
+                    catch (err) {
+                        console.error('vmz:dom __vmzOnParentProp', err);
+                    }
+                }
+                scheduleRefresh(child, { type: 'replace', root: key });
+            };
+            for (const key of Object.keys(seen)) {
+                if (key in next)
+                    continue;
+                delete seen[key];
+                notify(key, undefined);
+            }
+            for (const key of Object.keys(next)) {
+                const value = next[key];
+                const had = key in seen;
+                const prev = seen[key];
+                seen[key] = value;
+                // Create-time `...api.spreadProps()` already delivered identical
+                // values, so an unchanged first pass must not schedule a refresh.
+                if (had && Object.is(prev, value))
+                    continue;
+                if (!had && Object.is(child[key], value))
+                    continue;
+                notify(key, value);
+            }
+        }, bindingId);
+    },
+    /**
+     * Object form of `onComponentEvent`: diff event names per call site and detach
+     * listeners whose keys disappear. No global `off` semantics — the bag entry
+     * belongs to this call site only.
+     */
+    bindComponentEvents(hostInst, hostEl, slot, deps, get) {
+        if (hostEl && hostEl.__vmzPropBindSeq == null) {
+            hostEl.__vmzPropBindSeq = ++directPropBindSeq;
+        }
+        const seq = hostEl && hostEl.__vmzPropBindSeq != null ? hostEl.__vmzPropBindSeq : ++directPropBindSeq;
+        const attached = Object.create(null);
+        directApi.trackPatch(hostInst, deps || [], function bindComponentEventsPatch() {
+            let raw;
+            try {
+                raw = get.call(hostInst);
+            }
+            catch {
+                raw = null;
+            }
+            const child = hostEl && hostEl.__vmzInst;
+            if (!child || child.__vmzDestroyed)
+                return;
+            const next = Object.create(null);
+            if (raw && typeof raw === 'object') {
+                for (const key of Object.keys(raw)) {
+                    if (!key || key.startsWith('#'))
+                        continue;
+                    const list = normalizeHandlerList(raw[key]);
+                    if (list.length)
+                        next[key] = list;
+                }
+            }
+            const bag = child.__vmzComponentListeners ||
+                (child.__vmzComponentListeners = Object.create(null));
+            for (const key of Object.keys(attached)) {
+                if (key in next)
+                    continue;
+                const rec = attached[key];
+                delete attached[key];
+                const list = bag[key];
+                if (!Array.isArray(list))
+                    continue;
+                const index = list.indexOf(rec.wrapper);
+                if (index >= 0)
+                    list.splice(index, 1);
+                if (!list.length)
+                    delete bag[key];
+            }
+            for (const key of Object.keys(next)) {
+                const handlers = next[key];
+                const rec = attached[key];
+                if (rec) {
+                    rec.handlers = handlers;
+                    continue;
+                }
+                const created = { handlers, wrapper: null };
+                created.wrapper = (...args) => {
+                    for (const fn of created.handlers)
+                        fn(...args);
+                };
+                (bag[key] || (bag[key] = [])).push(created.wrapper);
+                attached[key] = created;
+            }
+        }, `pcev:${seq}:${slot || 'obj'}`);
+    },
+    /**
+     * `v-bind="obj"` / `v-on="obj"` listeners scoped to one call site.
+     *
+     * `mode: 'bind'` reads `onXxx` keys out of a bind object, `mode: 'on'` reads
+     * event names directly. Vue lowercases element listener names, so both modes
+     * normalize before touching `addEventListener`.
+     */
+    bindObjectListeners(el, slot, source, inst, mode) {
+        if (!el || !slot)
+            return;
+        const bag = el.__vmzObjEvt || (el.__vmzObjEvt = Object.create(null));
+        const state = bag[slot] || (bag[slot] = { types: Object.create(null) });
+        const prev = state.types;
+        const next = Object.create(null);
+        if (source && typeof source === 'object') {
+            for (const key of Object.keys(source)) {
+                let type;
+                if (mode === 'bind') {
+                    if (!/^on[A-Z]/.test(key))
+                        continue;
+                    type = key.slice(2).toLowerCase();
+                }
+                else {
+                    type = String(key).toLowerCase();
+                }
+                const list = normalizeHandlerList(source[key]);
+                if (type && list.length)
+                    next[type] = list;
+            }
+        }
+        for (const type of Object.keys(prev)) {
+            if (type in next)
+                continue;
+            el.removeEventListener(type, prev[type].wrapper);
+            delete prev[type];
+        }
+        for (const type of Object.keys(next)) {
+            const handlers = next[type];
+            const rec = prev[type];
+            if (rec) {
+                rec.handlers = handlers;
+                continue;
+            }
+            const created = { handlers, wrapper: null };
+            created.wrapper = (ev) => {
+                if (type === 'submit' && ev && typeof ev.preventDefault === 'function') {
+                    ev.preventDefault();
+                }
+                runDomEventHandler(inst || null, null, () => {
+                    for (const fn of created.handlers)
+                        fn.call(inst || null, ev);
+                });
+            };
+            prev[type] = created;
+            el.addEventListener(type, created.wrapper);
+        }
+    },
+    /**
+     * Filter a `v-bind="obj"` source down to bindable keys before it reaches
+     * component props (`#slot` markers belong to the compiler, not the child).
+     */
+    spreadProps(source) {
+        const out = Object.create(null);
+        if (source && typeof source === 'object') {
+            for (const key of Object.keys(source)) {
+                if (!key || key.startsWith('#'))
+                    continue;
+                out[key] = source[key];
+            }
+        }
+        return out;
+    },
     /**
      * Project parent children into nested Direct component default `<slot>`.
      * Uses {@link findOwnedDefaultSlot} so nested Button/Link slots are not stolen.

package/dist/browser/dom-core.types.d.ts

@@ -8,6 +8,12 @@ export type ComponentCtor = ComponentCtorLike & {
 };
 export type VmzDomElement = Element & {
     __vmzEvt?: Record<string, EventListener>;
+    __vmzObjEvt?: Record<string, {
+        types: Record<string, {
+            handlers: Function[];
+            wrapper: EventListener;
+        }>;
+    }>;
     __vmzInst?: DirectInstance;
     __vmzPropBindSeq?: number;
     __vmzDispose?: (() => void) | null;
@@ -69,15 +75,17 @@ export type TraceBuffer = {
     events: TraceEvent[];
 };
 export type ResumeAdoptCtx = {
-    el: (tag: string, svg?: boolean) => Element;
+    el: (tag: string, svg?: boolean, key?: unknown) => Element;
     elNS?: (ns: string, tag: string) => Element;
     text: (value?: unknown) => Text;
-    componentHost?: (name: string) => HTMLElement | null;
+    componentHost?: (name: string, key?: unknown) => HTMLElement | null;
     enter?: (node: Element) => boolean;
     leave?: () => void;
     scopeDepth?: () => number;
     rewindScope?: (depth: number) => void;
     beginBranchScope?: () => () => void;
+    /** Keep the parked SSR subtree when its SSR payload digest equals `digest`. */
+    reclaimHtml?: (el: Element, digest: string) => boolean;
     _enterBalance?: number;
     inst?: DirectInstance;
 };