@vmz/core 0.3.13 → 0.3.14

package/dist/ssr/serialize.js

@@ -1,6 +1,8 @@
 import { directHostBoxStyleAttr } from '../browser/direct-host-box.js';
 import { BOOLEAN_HTML_ATTRS, createInstance, eventPropHandlerName, getRegisteredComponent, isEventEntryStrategy, mergeClassParts, mergeStyleParts, snapshotInstanceState, stripFns, } from '../browser/dom-core.js';
 import { serializeUnknownComponentNode } from '../browser/unknown-component.js';
+import { splitStyleDeclarations } from '../shared/dom-attr-normalize.js';
+import { HTML_HASH_ATTR, htmlDigest } from '../shared/html-digest.js';
 import { _ssrDocumentLastError, ensureSsrDocument } from './document.js';
 import { awaitSsrOnMount, ssrComponentName, ssrOnMountContext } from './onmount.js';
 function runDirectSerializeTree(Component, inst) {
@@ -56,17 +58,116 @@ const VOID_TAGS = new Set([
 function isVoidTag(tag) {
     return VOID_TAGS.has(String(tag).toLowerCase());
 }
+/**
+ * `textarea` carries its initial value as text content and `select` carries it
+ * as a selected option, so neither can travel as a `value` attribute. `input`
+ * keeps the attribute, which browsers honor for the default value.
+ */
+function controlValue(node, tag) {
+    if (tag !== 'textarea' && tag !== 'select')
+        return null;
+    const v = node.attrs ? node.attrs.value : null;
+    if (v == null || v === false)
+        return null;
+    // A `multiple` select model is a list; keep every entry addressable.
+    if (tag === 'select' && Array.isArray(v))
+        return v.map((item) => String(item));
+    return String(v);
+}
+function nodeText(node) {
+    if (!node || typeof node !== 'object')
+        return '';
+    if (node.__kind === 'text')
+        return String(node.value ?? '');
+    if (node.__kind === 'el' || node.__kind === 'frag') {
+        return (node.children || []).map(nodeText).join('');
+    }
+    return '';
+}
+/** Mark the `<option>` whose value (or text) equals one of the model values. */
+function markSelectSelection(node, wanted) {
+    const wants = Array.isArray(wanted) ? wanted.map((item) => String(item)) : [String(wanted)];
+    const visit = (n) => {
+        if (!n || typeof n !== 'object')
+            return;
+        if (n.__kind === 'el') {
+            const tag = String(n.tag || '').toLowerCase();
+            if (tag === 'option') {
+                const raw = n.attrs && n.attrs.value != null ? String(n.attrs.value) : nodeText(n).trim();
+                if (wants.includes(raw)) {
+                    if (!n.attrs)
+                        n.attrs = {};
+                    n.attrs.selected = '';
+                }
+                else if (n.attrs && Object.prototype.hasOwnProperty.call(n.attrs, 'selected')) {
+                    delete n.attrs.selected;
+                }
+                return;
+            }
+        }
+        for (const c of n.children || [])
+            visit(c);
+    };
+    for (const c of node.children || [])
+        visit(c);
+}
+/**
+ * Inline style as the browser would serialize it: the `style` attribute merged
+ * with the live `style.*` writes that Direct patches and `v-show` perform
+ * (`el.style.display = …`). SSR virtual elements only kept the attribute, so a
+ * server-first response showed elements that hydration hid.
+ */
+function serializeStyleAttr(node) {
+    const declared = node.attrs && node.attrs.style != null ? String(node.attrs.style) : '';
+    const live = node.style;
+    if (!live || typeof live !== 'object')
+        return declared;
+    const display = live.display;
+    if (display === undefined)
+        return declared;
+    // `el.style.display = ''` removes the declaration instead of writing it.
+    if (display === '' || display == null) {
+        return splitStyleDeclarations(declared)
+            .filter((chunk) => {
+            const idx = chunk.indexOf(':');
+            return idx < 0 || chunk.slice(0, idx).trim() !== 'display';
+        })
+            .map((chunk) => chunk.trim())
+            .filter(Boolean)
+            .join('; ');
+    }
+    return mergeStyleParts(declared, { display });
+}
 function serializeOpenTag(node) {
     const tag = node.tag || 'div';
+    const lowerTag = String(tag).toLowerCase();
     let attrs = '';
     for (const [k, v] of Object.entries(node.attrs || {})) {
         if (v == null || v === false)
             continue;
+        // `textarea` value renders as text content and `select` value as a
+        // selected option, so the raw attribute must not be emitted.
+        if (k === 'value' && (lowerTag === 'textarea' || lowerTag === 'select'))
+            continue;
+        if (k === 'style')
+            continue;
+        // Always replaced by the digest of the payload written below, so an
+        // author-supplied marker can never mask a different payload.
+        if (k === HTML_HASH_ATTR)
+            continue;
         if (k === 'className')
             attrs += ` class="${escapeHtml(v)}"`;
         else
             attrs += ` ${k}="${escapeHtml(v)}"`;
     }
+    const style = serializeStyleAttr(node);
+    if (style)
+        attrs += ` style="${escapeHtml(style)}"`;
+    // `v-html` hosts carry the digest of the exact string SSR wrote, so the
+    // client can keep the SSR subtree without DOM-serializing its payload.
+    if (node.__rawHtml != null && !node.__rawOuter) {
+        attrs += ` ${HTML_HASH_ATTR}="${escapeHtml(htmlDigest(String(node.__rawHtml)))}"`;
+    }
     return { tag, open: `<${tag}${attrs}>` };
 }
 export function flattenSerializeNode(node) {
@@ -94,11 +195,22 @@ export function flattenSerializeNode(node) {
         if (node.__rawOuter && node.__rawHtml != null)
             return String(node.__rawHtml);
         const { open } = serializeOpenTag(node);
+        const lowerTag = String(tag).toLowerCase();
+        const control = controlValue(node, lowerTag);
         if (node.__rawHtml != null) {
-            return isVoidTag(tag) ? `${open}${String(node.__rawHtml)}` : `${open}${String(node.__rawHtml)}</${tag}>`;
+            const lead = needsSacrificialLF(node, lowerTag, null) ? '\n' : '';
+            const raw = String(node.__rawHtml);
+            return isVoidTag(tag) ? `${open}${raw}` : `${open}${lead}${raw}</${tag}>`;
         }
+        if (lowerTag === 'textarea' && control != null) {
+            const lead = needsSacrificialLF(node, lowerTag, control) ? '\n' : '';
+            return `${open}${lead}${escapeHtml(control)}</${tag}>`;
+        }
+        if (lowerTag === 'select' && control != null)
+            markSelectSelection(node, control);
         const inner = (node.children || []).map(flattenSerializeNode).join('');
-        return isVoidTag(tag) ? `${open}${inner}` : `${open}${inner}</${tag}>`;
+        const lead = needsSacrificialLF(node, lowerTag, control) ? '\n' : '';
+        return isVoidTag(tag) ? `${open}${inner}` : `${open}${lead}${inner}</${tag}>`;
     }
     return '';
 }
@@ -141,10 +253,20 @@ export function* streamSerializeChunks(node) {
         }
         const { open } = serializeOpenTag(node);
         yield open;
+        const lowerTag = String(tag).toLowerCase();
+        const control = controlValue(node, lowerTag);
+        const lead = needsSacrificialLF(node, lowerTag, control) ? '\n' : '';
         if (node.__rawHtml != null) {
-            yield String(node.__rawHtml);
+            yield lead + String(node.__rawHtml);
+        }
+        else if (lowerTag === 'textarea' && control != null) {
+            yield lead + escapeHtml(control);
         }
         else {
+            if (lowerTag === 'select' && control != null)
+                markSelectSelection(node, control);
+            if (lead)
+                yield lead;
             for (const c of node.children || [])
                 yield* streamSerializeChunks(c);
         }
@@ -274,6 +396,16 @@ function virtualRemove(node) {
         p.children.splice(idx, 1);
     node.parentNode = null;
 }
+/**
+ * Replace an element's content with escaped text (`v-text` / `el.textContent`).
+ * Direct emit writes `textContent` for both static and reactive text, so SSR
+ * must model it or the first response ships an empty element.
+ */
+function replaceSerializeText(node, value) {
+    const text = value == null ? '' : String(value);
+    node.__rawHtml = null;
+    node.children = text === '' ? [] : [{ __kind: 'text', value: text, parentNode: node }];
+}
 function makeVirtualEl(tag) {
     const node = {
         __kind: 'el',
@@ -282,6 +414,7 @@ function makeVirtualEl(tag) {
         children: [],
         style: {},
         __rawHtml: null,
+        __vmzKey: null,
         parentNode: null,
         setAttribute(name, value) {
             applySerializeAttr(this, name, value);
@@ -305,6 +438,17 @@ function makeVirtualEl(tag) {
             this.children = [];
         },
     });
+    // Direct emit writes `el.textContent` for v-text (static `api.setText` and
+    // reactive `el.textContent = …`). Mirror it so the serializer sees the text.
+    Object.defineProperty(node, 'textContent', {
+        configurable: true,
+        get() {
+            return nodeText(this);
+        },
+        set(value) {
+            replaceSerializeText(this, value);
+        },
+    });
     return node;
 }
 /**
@@ -383,11 +527,19 @@ const serializeApi = {
             serializeApi._ssrCollected.push(child);
         return child;
     },
-    el(tag) {
+    el(tag, key) {
         const node = makeVirtualEl(tag);
         if (String(tag || '').toLowerCase() === 'svg') {
             node.namespaceURI = 'http://www.w3.org/2000/svg';
         }
+        // Row roots need their key in the HTML so hydration reclaims by identity,
+        // not the order in which tags happen to appear.
+        if (key != null) {
+            node.__vmzKey = key;
+            if (!node.attrs)
+                node.attrs = Object.create(null);
+            node.attrs['data-vmz-key'] = String(key);
+        }
         return node;
     },
     elNS(ns, tag) {
@@ -529,6 +681,26 @@ const serializeApi = {
     bindComponentProp() {
         /* SSR: props already resolved into the child instance at create */
     },
+    bindComponentProps() {
+        /* SSR: `...api.spreadProps()` already delivered the object props at create */
+    },
+    bindComponentEvents() {
+        /* component events attach only on the client */
+    },
+    bindObjectListeners() {
+        /* object listeners attach only on the client */
+    },
+    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;
+    },
     projectDefaultSlot(hostEl, node) {
         if (!hostEl || node == null)
             return;
@@ -552,8 +724,13 @@ const serializeApi = {
                 target.__rawHtml = null;
                 if (!Array.isArray(target.children))
                     target.children = [];
-                // Append — multiple projectDefaultSlot calls must accumulate (SSR).
-                // Client path replaces the live <slot> then appends siblings; serialize must push.
+                // The client replaces the live `<slot>` with the first projected node,
+                // which discards its fallback children. Drop the fallback on the first
+                // projection too, then accumulate later projections as siblings.
+                if (!filledSerializeSlots.has(target)) {
+                    filledSerializeSlots.add(target);
+                    target.children.length = 0;
+                }
                 target.children.push(node);
                 return;
             }
@@ -612,6 +789,23 @@ const serializeApi = {
         el.__rawHtml = value == null ? '' : String(value);
         el.children = [];
     },
+    // Emitted `v-html` write. SSR always records the payload, and the open tag
+    // gains `data-vmz-html-hash` from that exact string at serialize time.
+    html(el, value) {
+        serializeApi.setHtml(el, value);
+    },
+    setText(el, value) {
+        if (!el || el.__kind !== 'el')
+            return;
+        replaceSerializeText(el, value);
+    },
+    setShow(el, condition) {
+        if (!el || el.__kind !== 'el')
+            return;
+        if (!el.style || typeof el.style !== 'object')
+            el.style = {};
+        el.style.display = condition ? '' : 'none';
+    },
     bindHtml(inst, bindingId, deps, get, el) {
         serializeApi.trackPatch(inst, deps || [], function bindHtmlPatch() {
             let raw;
@@ -624,14 +818,20 @@ const serializeApi = {
             serializeApi.setHtml(el, raw);
         }, bindingId);
     },
-    component(hostInst, nameOrCtor, props, client) {
+    component(hostInst, nameOrCtor, props, client, key) {
         const name = typeof nameOrCtor === 'function' ? nameOrCtor.__vmzTag || nameOrCtor.name || 'Component' : nameOrCtor;
         const Ctor = typeof nameOrCtor === 'function' ? nameOrCtor : getRegisteredComponent(name);
         if (!Ctor) {
             return serializeUnknownComponentNode(name);
         }
+        const rawProps = (props || {});
+        // `id` / `data-*` / `aria-*` belong on the host element, matching the
+        // browser `api.component` fallthrough.
+        const hostAttrs = rawProps.__hostAttrs;
         const resolved = {};
-        for (const [k, v] of Object.entries(props || {})) {
+        for (const [k, v] of Object.entries(rawProps)) {
+            if (k === '__hostAttrs')
+                continue;
             const onKey = typeof v === 'function' ? eventPropHandlerName(k) : null;
             if (onKey)
                 continue;
@@ -640,6 +840,16 @@ const serializeApi = {
             else
                 resolved[k] = v;
         }
+        const applyHostAttrs = (attrs) => {
+            if (!hostAttrs)
+                return attrs;
+            for (const [k, v] of Object.entries(hostAttrs)) {
+                if (v == null || v === false)
+                    continue;
+                attrs[k] = v === true ? '' : String(v);
+            }
+            return attrs;
+        };
         if (client) {
             // resume: Island SSR includes body + ResumeEntry slice (same Direct schedule).
             const child = serializeApi._ssrChildInstance(Ctor, resolved);
@@ -675,6 +885,9 @@ const serializeApi = {
             const boxStyle = directHostBoxStyleAttr(name, Ctor);
             if (boxStyle)
                 attrs.style = boxStyle;
+            applyHostAttrs(attrs);
+            if (key != null)
+                attrs['data-vmz-key'] = String(key);
             if (isEventEntryStrategy(String(client))) {
                 attrs['data-vmz-entry'] = 'event';
             }
@@ -705,6 +918,9 @@ const serializeApi = {
                 const boxStyle = directHostBoxStyleAttr(name, Ctor);
                 if (boxStyle)
                     attrs.style = boxStyle;
+                applyHostAttrs(attrs);
+                if (key != null)
+                    attrs['data-vmz-key'] = String(key);
                 return {
                     __kind: 'el',
                     tag: 'div',
@@ -723,6 +939,28 @@ const serializeApi = {
         }
         throw new Error(`vmz:dom serialize component <${name}> requires __vmzCreate (rebuild child with Direct)`);
     },
+    /**
+     * `<component :is>` on the server: `is` and props are evaluated once at
+     * create time, so the dynamic boundary serializes exactly like the resolved
+     * static component.
+     */
+    dynamicComponent(hostInst, bindingId, deps, getCtor, getProps, key) {
+        let Ctor = null;
+        try {
+            Ctor = getCtor.call(hostInst);
+        }
+        catch {
+            Ctor = null;
+        }
+        let props = {};
+        try {
+            props = getProps.call(hostInst) || {};
+        }
+        catch {
+            props = {};
+        }
+        return serializeApi.component(hostInst, Ctor, props, null, key);
+    },
 };
 function applySerializeAttr(el, name, value) {
     if (!el || el.__kind !== 'el')
@@ -751,11 +989,69 @@ function applySerializeAttr(el, name, value) {
             el.attrs[key] = value === true ? '' : String(value);
         return;
     }
+    // A `multiple` select model is a list. Stringifying it here would emit one
+    // `value="c,a"` attribute, so `markSelectSelection` could never match an
+    // option and SSR shipped a select with nothing selected.
+    if (key === 'value' && String(el.tag || '').toLowerCase() === 'select' && Array.isArray(value)) {
+        el.attrs[key] = value.map((item) => String(item));
+        return;
+    }
     if (value == null || value === false)
         delete el.attrs[key];
     else
         el.attrs[key] = value === true ? '' : String(value);
 }
 function escapeHtml(s) {
-    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    return String(s)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        // The HTML input stream normalizes a literal CR (and CRLF) to LF before
+        // tokenization, so a raw `\r` would not survive the parse. Emit a character
+        // reference instead: hydration then keeps the exact server value.
+        .replace(/\r/g, '&#13;');
+}
+/** `<pre>` / `<textarea>` drop one leading LF after their start tag (HTML spec). */
+function dropsLeadingLF(tag) {
+    return tag === 'pre' || tag === 'textarea';
+}
+/** Does the first token inside `node` start with LF? Comments and tags do not. */
+function firstTokenStartsWithLF(node) {
+    if (node == null || node === false)
+        return false;
+    if (typeof node === 'string')
+        return node.startsWith('\n');
+    if (node.__kind === 'text')
+        return String(node.value ?? '').startsWith('\n');
+    if (node.__kind === 'comment')
+        return false;
+    if (node.__kind === 'frag') {
+        if (node.__rawHtml != null)
+            return String(node.__rawHtml).startsWith('\n');
+        for (const c of node.children || []) {
+            if (c == null || c === false)
+                continue;
+            return firstTokenStartsWithLF(c);
+        }
+    }
+    return false;
+}
+/**
+ * A value that itself starts with LF needs one sacrificial newline: the parser
+ * discards the first LF token, leaving the real one in the DOM.
+ */
+function needsSacrificialLF(node, lowerTag, control) {
+    if (!dropsLeadingLF(lowerTag))
+        return false;
+    if (lowerTag === 'textarea' && control != null)
+        return String(control).startsWith('\n');
+    if (node.__rawHtml != null)
+        return String(node.__rawHtml).startsWith('\n');
+    for (const c of node.children || []) {
+        if (c == null || c === false)
+            continue;
+        return firstTokenStartsWithLF(c);
+    }
+    return false;
 }

package/package.json

@@ -68,12 +68,12 @@
   "main": "./dist/faces/server.js",
   "name": "@vmz/core",
   "optionalDependencies": {
-    "@vmz/vmz-darwin-arm64": "0.3.13",
-    "@vmz/vmz-darwin-x64": "0.3.13",
-    "@vmz/vmz-linux-arm64": "0.3.13",
-    "@vmz/vmz-linux-x64": "0.3.13",
-    "@vmz/vmz-win32-arm64": "0.3.13",
-    "@vmz/vmz-win32-x64": "0.3.13"
+    "@vmz/vmz-darwin-arm64": "0.3.14",
+    "@vmz/vmz-darwin-x64": "0.3.14",
+    "@vmz/vmz-linux-arm64": "0.3.14",
+    "@vmz/vmz-linux-x64": "0.3.14",
+    "@vmz/vmz-win32-arm64": "0.3.14",
+    "@vmz/vmz-win32-x64": "0.3.14"
   },
   "publishConfig": {
     "access": "public"
@@ -88,5 +88,5 @@
   },
   "type": "module",
   "types": "./dist/faces/index.d.ts",
-  "version": "0.3.13"
+  "version": "0.3.14"
 }