@vmz/core 0.3.5 → 0.3.7

package/dist/browser/dom/component.d.ts

@@ -5,6 +5,18 @@ export declare function findOwnedDefaultSlot(root: any): any;
 export declare function findOwnedDefaultSlotTarget(root: any): any;
 export declare function createInstance(Component: any, props?: any): any;
 export declare function destroy(inst: any): void;
+export declare function insertProjectedSlotNode(target: any, node: any): any;
+/**
+ * Hold projected children until the component's default slot exists.
+ *
+ * A slot inside an unmounted `v-if` branch (closed drawer/dialog, loading
+ * skeleton) is absent at projection time. Appending to the component root would
+ * paint the child into the live page, so keep it detached and splice it in when
+ * the slot is mounted.
+ */
+export declare function parkSlotNode(hostEl: any, node: any): void;
+/** Move parked children into the now-mounted default slot. Returns true when drained. */
+export declare function flushParkedSlotNodes(hostEl: any): boolean;
 export declare function disposeDomTree(root: any): void;
 export declare function snapshotInstanceState(inst: any): {};
 export declare function applyPreservedState(inst: any, state: any): void;

package/dist/browser/dom/component.js

@@ -183,6 +183,87 @@ export function destroy(inst) {
         }
     }
 }
+export function insertProjectedSlotNode(target, node) {
+    if (!target || !node)
+        return null;
+    if (String(target.tagName || '').toLowerCase() === 'slot') {
+        target.replaceWith(node);
+        return node;
+    }
+    target.appendChild(node);
+    return node;
+}
+/**
+ * Hold projected children until the component's default slot exists.
+ *
+ * A slot inside an unmounted `v-if` branch (closed drawer/dialog, loading
+ * skeleton) is absent at projection time. Appending to the component root would
+ * paint the child into the live page, so keep it detached and splice it in when
+ * the slot is mounted.
+ */
+export function parkSlotNode(hostEl, node) {
+    if (!hostEl || !node)
+        return;
+    if (typeof MutationObserver === 'undefined') {
+        // Non-browser DOM (unit hosts): preserve the legacy root fallback.
+        const child = hostEl.__vmzInst;
+        const root = (child && child.__vmzDomRoot) || hostEl;
+        if (root && root.nodeType === 1 && typeof root.appendChild === 'function')
+            root.appendChild(node);
+        else if (typeof hostEl.appendChild === 'function')
+            hostEl.appendChild(node);
+        return;
+    }
+    const parked = hostEl.__vmzSlotParked || (hostEl.__vmzSlotParked = []);
+    parked.push(node);
+    if (hostEl.__vmzSlotObserver)
+        return;
+    hostEl.__vmzSlotObserver = new MutationObserver(() => {
+        flushParkedSlotNodes(hostEl);
+    });
+    const scope = (hostEl.__vmzInst && hostEl.__vmzInst.__vmzDomRoot) || hostEl;
+    if (scope && scope.nodeType === 1) {
+        hostEl.__vmzSlotObserver.observe(scope, { childList: true, subtree: true });
+    }
+}
+/** Move parked children into the now-mounted default slot. Returns true when drained. */
+export function flushParkedSlotNodes(hostEl) {
+    if (!hostEl)
+        return false;
+    const parked = hostEl.__vmzSlotParked;
+    if (!parked || !parked.length)
+        return false;
+    const child = hostEl.__vmzInst;
+    const root = (child && child.__vmzDomRoot) || hostEl;
+    if (!root || root.nodeType !== 1)
+        return false;
+    const target = findOwnedDefaultSlotTarget(root);
+    if (!target || !target.parentNode)
+        return false;
+    if (hostEl.__vmzSlotObserver) {
+        hostEl.__vmzSlotObserver.disconnect();
+        hostEl.__vmzSlotObserver = null;
+    }
+    hostEl.__vmzSlotParked = [];
+    const tag = String(target.tagName || '').toLowerCase();
+    if (tag === 'slot') {
+        const frag = typeof document !== 'undefined' ? document.createDocumentFragment() : null;
+        if (!frag) {
+            target.replaceWith(parked[0]);
+            hostEl.__vmzSlotAnchor = parked[parked.length - 1];
+            return true;
+        }
+        for (const node of parked)
+            frag.appendChild(node);
+        target.replaceWith(frag);
+        hostEl.__vmzSlotAnchor = parked[parked.length - 1];
+        return true;
+    }
+    for (const node of parked)
+        target.appendChild(node);
+    hostEl.__vmzSlotAnchor = parked[parked.length - 1];
+    return true;
+}
 export function disposeDomTree(root) {
     if (!root)
         return;
@@ -205,6 +286,14 @@ export function disposeDomTree(root) {
             node.__vmzInst = null;
             destroy(child);
         }
+        if (node.__vmzSlotObserver) {
+            node.__vmzSlotObserver.disconnect();
+            node.__vmzSlotObserver = null;
+        }
+        if (node.__vmzSlotParked)
+            node.__vmzSlotParked = [];
+        if (node.__vmzSlotAnchor)
+            node.__vmzSlotAnchor = null;
         let child = node.firstChild;
         while (child) {
             const next = child.nextSibling;

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

@@ -2,7 +2,7 @@ import { mergeClassParts, mergeStyleParts } from '../../shared/dom-attr-normaliz
 import { applyDirectHostBox } from '../direct-host-box.js';
 import { createUnknownComponentElement } from '../unknown-component.js';
 import { applyDomAttr, eventPropHandlerName } from './attributes.js';
-import { createInstance, disposeDomTree, findOwnedDefaultSlotTarget, runDirectCreate, stripFns } from './component.js';
+import { createInstance, disposeDomTree, findOwnedDefaultSlotTarget, insertProjectedSlotNode, parkSlotNode, runDirectCreate, 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';
@@ -431,16 +431,20 @@ export const directApi = {
             root = hostEl;
         const target = root && root.nodeType === 1 ? findOwnedDefaultSlotTarget(root) : null;
         if (target && target.parentNode) {
-            if (String(target.tagName || '').toLowerCase() === 'slot') {
-                target.replaceWith(node);
-                return;
-            }
-            target.appendChild(node);
+            hostEl.__vmzSlotAnchor = insertProjectedSlotNode(target, node);
+            return;
+        }
+        // The `<slot>` was already replaced by an earlier projected child, so this
+        // call appends after the last one instead of re-searching for a slot.
+        const anchor = hostEl.__vmzSlotAnchor;
+        if (anchor && anchor.parentNode) {
+            anchor.parentNode.insertBefore(node, anchor.nextSibling);
+            hostEl.__vmzSlotAnchor = node;
             return;
         }
-        if (root && root.nodeType === 1 && typeof root.appendChild === 'function')
-            root.appendChild(node);
-        else
-            hostEl.appendChild(node);
+        // Component slot may live inside an unmounted `v-if` branch (closed overlay,
+        // loading skeleton). Parking the child until the slot appears keeps it out of
+        // the component root, where it would otherwise leak into the rendered page.
+        parkSlotNode(hostEl, node);
     },
 };

package/dist/browser/reactivity/patch-scheduler.js

@@ -53,6 +53,32 @@ export function scheduleRefresh(inst, notice) {
         }
     });
 }
+const ARROW_SIGNATURE = /^(?:async\s*)?(?:\(([^)]*)\)|([A-Za-z_$][\w$]*))\s*=>\s*([\s\S]*)$/;
+const EVENT_PASSTHROUGH_CALL = /^this\.([A-Za-z_$][\w$]*)\s*\(([^)]*)\)\s*;?$/;
+/**
+ * Direct-bind hint for `(ev) => this.method(ev)` handlers only. The closure is
+ * replaced by `method.call(inst, ev)`, so the shape must forward exactly the
+ * event: a handler that passes its own literal arguments (`() => this.pick("dark")`)
+ * must keep running as a closure, otherwise the event would overwrite the argument.
+ */
+function inferEventPassthroughMethod(src) {
+    const arrow = src.match(ARROW_SIGNATURE);
+    if (!arrow)
+        return null;
+    const params = (arrow[1] ?? arrow[2] ?? '')
+        .split(',')
+        .map((p) => p.trim())
+        .filter(Boolean);
+    if (params.length !== 1)
+        return null;
+    let body = arrow[3].trim();
+    if (body.startsWith('{') && body.endsWith('}'))
+        body = body.slice(1, -1).trim();
+    const call = body.match(EVENT_PASSTHROUGH_CALL);
+    if (!call || call[2].trim() !== params[0])
+        return null;
+    return call[1];
+}
 export function inferHandlerMethod(handler) {
     if (typeof handler !== 'function')
         return null;
@@ -62,8 +88,7 @@ export function inferHandlerMethod(handler) {
     let name = null;
     try {
         const src = Function.prototype.toString.call(handler);
-        const m = src.match(/this\.([A-Za-z_$][\w$]*)\s*\(/);
-        name = m ? m[1] : null;
+        name = inferEventPassthroughMethod(src);
     }
     catch {
         name = null;

package/dist/ssr/serialize.js

@@ -36,6 +36,26 @@ export async function runDirectSerializeTreeWithMounts(Component, inst) {
     }
     throw new Error('vmz:dom SSR child onMount expansion exceeded 32 rounds');
 }
+/** HTML void elements never take a closing tag; `</br>` is parsed as another `<br>`. */
+const VOID_TAGS = new Set([
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr',
+]);
+function isVoidTag(tag) {
+    return VOID_TAGS.has(String(tag).toLowerCase());
+}
 function serializeOpenTag(node) {
     const tag = node.tag || 'div';
     let attrs = '';
@@ -75,10 +95,10 @@ export function flattenSerializeNode(node) {
             return String(node.__rawHtml);
         const { open } = serializeOpenTag(node);
         if (node.__rawHtml != null) {
-            return `${open}${String(node.__rawHtml)}</${tag}>`;
+            return isVoidTag(tag) ? `${open}${String(node.__rawHtml)}` : `${open}${String(node.__rawHtml)}</${tag}>`;
         }
         const inner = (node.children || []).map(flattenSerializeNode).join('');
-        return `${open}${inner}</${tag}>`;
+        return isVoidTag(tag) ? `${open}${inner}` : `${open}${inner}</${tag}>`;
     }
     return '';
 }
@@ -128,7 +148,8 @@ export function* streamSerializeChunks(node) {
             for (const c of node.children || [])
                 yield* streamSerializeChunks(c);
         }
-        yield `</${tag}>`;
+        if (!isVoidTag(tag))
+            yield `</${tag}>`;
     }
 }
 function fillRowKernelHtml(rk, item, key) {
@@ -527,8 +548,9 @@ const serializeApi = {
             target.children.push(node);
             return;
         }
-        if (root)
-            root.appendChild(node);
+        // No default slot in this render: children belong to a branch that is not
+        // mounted (closed overlay, loading skeleton). Mirror the browser runtime and
+        // drop them instead of painting them into the component root.
     },
     setHtml(el, value) {
         if (!el || el.__kind !== 'el')

package/package.json

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