@mintjamsinc/ichigojs 0.1.81 → 0.1.83

package/dist/ichigo.esm.js

@@ -8984,9 +8984,9 @@ class IchigoElementRegistry {
  * ```
  *
  * This directive is created only when a scoped template for the slot's name
- * exists (see {@link VSlotOutletDirective.tryCreate}); otherwise `<slot>`
- * elements keep their existing behavior (static distribution at expansion,
- * or fallback content compiled in the component scope).
+ * exists (see {@link VSlotOutletDirective.tryCreate}); otherwise plain slot
+ * content is moved into place by VStaticSlotOutletDirective, and a `<slot>`
+ * with no content at all renders its fallback in the component scope.
  *
  * Rendering happens synchronously in onMount — before the component
  * application would compile the slot's fallback children — by replacing the
@@ -9278,6 +9278,266 @@ class VSlotOutletDirective {
     }
 }
 
+// Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+/**
+ * Renders a static slot outlet: a `<slot>` element inside a component template
+ * whose host element received plain slot content from the parent — child
+ * nodes for the default slot, or elements carrying `slot="name"`:
+ *
+ * ```html
+ * <!-- component template -->
+ * <div v-if="open" class="body"><slot></slot></div>
+ *
+ * <!-- usage -->
+ * <my-dialog :open="show">
+ *   <my-field :label="title"></my-field>
+ * </my-dialog>
+ * ```
+ *
+ * The slot content is the parent application's own nodes, compiled in the
+ * parent scope; it keeps its bindings, listeners and component props only as
+ * long as those very nodes are displayed. So the outlet MOVES them into place
+ * and never clones them. That is what lets a `<slot>` sit behind a v-if or
+ * v-for in the component template: the directive clones its template source,
+ * the clone carries a fresh `<slot>`, and the outlet created for that clone
+ * moves the live nodes in.
+ *
+ * Nodes can only be in one place, so when the same slot is rendered more than
+ * once (e.g. a `<slot>` inside a v-for), the outlet rendered last receives the
+ * content and the earlier ones are left empty. When the outlet holding the
+ * content goes away while others remain (its row is removed), the content
+ * moves to the last remaining one. For content per row, use a scoped slot
+ * (`<template v-slot:name="scope">`), which renders a copy per outlet
+ * (VSlotOutletDirective).
+ *
+ * The component application never compiles the moved nodes: they are placed
+ * in onMount, after the parent VNode has taken its snapshot of the children
+ * to compile. Components inside them belong to the parent application, which
+ * expands them through {@link expandComponents} once they are in the document.
+ * When the last outlet goes away (its v-if turns false) the nodes leave with
+ * the removed clone and wait there until the next outlet moves them again;
+ * they are not destroyed, because they are not this application's to destroy.
+ *
+ * Created only when the host captured content for the slot's name and no
+ * scoped template claims it; otherwise the `<slot>` element renders its
+ * fallback children in the component scope.
+ */
+class VStaticSlotOutletDirective {
+    /**
+     * The live outlets of each slot, in the order they were rendered, keyed by
+     * the slot's node array (one per host element and slot name). The last
+     * one holds the content.
+     */
+    static #outlets = new WeakMap();
+    /**
+     * Marks where the `<slot>` element was, so the content can be moved back
+     * here when a later outlet of the same slot goes away.
+     */
+    #anchor;
+    /**
+     * Guards against double destruction.
+     */
+    #destroyed = false;
+    /**
+     * The virtual node of the `<slot>` element (in the component application).
+     */
+    #vNode;
+    /**
+     * The slot content: the parent application's nodes, shared with the host
+     * element's slot cache.
+     */
+    #nodes;
+    /**
+     * The host element's VNode in the parent application, whose children are
+     * the VNodes of the slot content. Undefined when the host was not compiled
+     * by an application (then there is nothing to expand).
+     */
+    #hostVNode;
+    /**
+     * Creates a static slot outlet for the given `<slot>` VNode when the host
+     * element captured content for its slot name. Returns undefined when there
+     * is none, so the `<slot>` element keeps rendering its fallback content.
+     */
+    static tryCreate(vNode) {
+        const host = vNode.vApplication.hostElement;
+        if (!host || typeof host._ichigoSlotNodes !== 'function') {
+            return undefined;
+        }
+        const element = vNode.node;
+        const nodes = host._ichigoSlotNodes(element.getAttribute('name') || 'default');
+        if (!nodes) {
+            return undefined;
+        }
+        return new VStaticSlotOutletDirective(vNode, nodes, host._ichigoHost?.vNode);
+    }
+    constructor(vNode, nodes, hostVNode) {
+        this.#vNode = vNode;
+        this.#nodes = nodes;
+        this.#hostVNode = hostVNode;
+        // Slot props (v-bind / :) only mean something to a scoped template.
+        // Consume them so the generic attribute parsing does not evaluate them
+        // on an element that is about to leave the document.
+        const element = vNode.node;
+        for (const attr of Array.from(element.attributes)) {
+            if (attr.name.startsWith('v-bind:') || attr.name.startsWith(':')) {
+                element.removeAttribute(attr.name);
+            }
+        }
+    }
+    /**
+     * @inheritdoc
+     */
+    get name() {
+        return 'static-slot-outlet';
+    }
+    /**
+     * @inheritdoc
+     */
+    get vNode() {
+        return this.#vNode;
+    }
+    /**
+     * @inheritdoc
+     */
+    get needsAnchor() {
+        return false;
+    }
+    /**
+     * @inheritdoc
+     */
+    get bindingsPreparer() {
+        return undefined;
+    }
+    /**
+     * @inheritdoc
+     */
+    get domUpdater() {
+        return undefined;
+    }
+    /**
+     * @inheritdoc
+     */
+    get templatize() {
+        return false;
+    }
+    /**
+     * @inheritdoc
+     */
+    get dependentIdentifiers() {
+        return [];
+    }
+    /**
+     * @inheritdoc
+     *
+     * Moves the slot content in place of the `<slot>` element — synchronously
+     * during VNode construction, before the component application would
+     * compile the slot's fallback children (which the content replaces).
+     */
+    get onMount() {
+        return () => {
+            const slot = this.#vNode.node;
+            while (slot.firstChild) {
+                slot.removeChild(slot.firstChild);
+            }
+            this.#anchor = document.createComment('slot');
+            slot.replaceWith(this.#anchor);
+            let outlets = VStaticSlotOutletDirective.#outlets.get(this.#nodes);
+            if (!outlets) {
+                outlets = [];
+                VStaticSlotOutletDirective.#outlets.set(this.#nodes, outlets);
+            }
+            outlets.push(this);
+            this.#place();
+        };
+    }
+    /**
+     * @inheritdoc
+     */
+    get onMounted() {
+        return undefined;
+    }
+    /**
+     * @inheritdoc
+     */
+    get onUpdate() {
+        return undefined;
+    }
+    /**
+     * @inheritdoc
+     */
+    get onUpdated() {
+        return undefined;
+    }
+    /**
+     * @inheritdoc
+     */
+    get onUnmount() {
+        return undefined;
+    }
+    /**
+     * @inheritdoc
+     */
+    get onUnmounted() {
+        return undefined;
+    }
+    /**
+     * @inheritdoc
+     *
+     * Expands the components in the slot content through the parent
+     * application's VNodes. Called by the walk of whoever inserted this
+     * outlet into the document (VApplication.mount, v-if, v-for), so the
+     * content is connected by now — unless a later outlet took it, in which
+     * case that outlet's walk expands it.
+     */
+    expandComponents() {
+        const children = this.#hostVNode?.childVNodes;
+        if (!children) {
+            return;
+        }
+        for (const child of children) {
+            if (this.#nodes.includes(child.node)) {
+                child.expandComponents();
+            }
+        }
+    }
+    /**
+     * @inheritdoc
+     *
+     * The slot content is the parent application's; nothing to release here.
+     */
+    destroy() {
+        if (this.#destroyed) {
+            return;
+        }
+        this.#destroyed = true;
+        const outlets = VStaticSlotOutletDirective.#outlets.get(this.#nodes);
+        if (!outlets) {
+            return;
+        }
+        const index = outlets.indexOf(this);
+        if (index === -1) {
+            return;
+        }
+        const wasHolder = index === outlets.length - 1;
+        outlets.splice(index, 1);
+        // Hand the content to the last remaining outlet before this one's DOM
+        // is removed (v-if / v-for destroy the VNode first, then remove it),
+        // so removing the row that shows it does not take it out of view.
+        const next = outlets[outlets.length - 1];
+        if (wasHolder && next) {
+            next.#place();
+            next.expandComponents();
+        }
+    }
+    /**
+     * Moves the slot content right after this outlet's anchor. Moving, not
+     * cloning: nodes shown by another outlet of the same slot leave it.
+     */
+    #place() {
+        this.#anchor?.after(...this.#nodes);
+    }
+}
+
 // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
 /**
  * Manages directives associated with a virtual node (VNode).
@@ -9446,10 +9706,12 @@ class VDirectiveManager {
         const element = this.#vNode.node;
         // Parse directives from attributes
         const directives = [];
-        // Scoped slot outlet: a <slot> element (without structural directives)
-        // inside a component whose host received a matching <template v-slot:...>.
-        // This is an element-based directive, created before the generic
-        // attribute parsing so it can consume the slot-prop bindings (:x).
+        // Slot outlet: a <slot> element (without structural directives) inside a
+        // component whose host received content for it — a matching
+        // <template v-slot:...> (rendered per outlet), or else plain slot
+        // content (moved into place). This is an element-based directive,
+        // created before the generic attribute parsing so it can consume the
+        // slot-prop bindings (:x).
         // A <slot> carrying v-if / v-for is handled structurally first; the
         // outlet is then created when the clone is compiled.
         if (element.tagName === 'SLOT' &&
@@ -9457,7 +9719,8 @@ class VDirectiveManager {
             !element.hasAttribute(StandardDirectiveName.V_IF) &&
             !element.hasAttribute(StandardDirectiveName.V_ELSE_IF) &&
             !element.hasAttribute(StandardDirectiveName.V_ELSE)) {
-            const outlet = VSlotOutletDirective.tryCreate(this.#vNode);
+            const outlet = VSlotOutletDirective.tryCreate(this.#vNode)
+                ?? VStaticSlotOutletDirective.tryCreate(this.#vNode);
             if (outlet) {
                 directives.push(outlet);
             }
@@ -9867,9 +10130,9 @@ class VNode {
      */
     #fragmentRange;
     /**
-     * Set by {@link destroy}. A destroyed clone stays in its parent's child
-     * list (v-if / v-for render new clones under the same parent), so walks
-     * over the children must skip it.
+     * Set by {@link destroy}. A destroyed node also leaves its parent's child
+     * list, but a walk that took its copy of the list before the node was
+     * destroyed may still reach it, and must skip it.
      */
     #destroyed = false;
     /**
@@ -10039,7 +10302,8 @@ class VNode {
         // walk runs once the subtree is in the document, which the outlet
         // cannot know when it renders inside a detached v-if / v-for clone.
         this.#directiveManager?.directives?.forEach(d => d.expandComponents?.());
-        this.#childVNodes?.forEach(child => child.expandComponents());
+        // A copy: expanding can render and destroy clones under this node.
+        this.#childVNodes?.slice().forEach(child => child.expandComponents());
     }
     /**
      * The application instance associated with this virtual node.
@@ -10351,8 +10615,9 @@ class VNode {
                     updater.applyToDOM();
                 }
             }
-            // Recursively update child virtual nodes
-            this.#childVNodes?.forEach(childVNode => {
+            // Recursively update child virtual nodes. A copy: an update can
+            // destroy a v-if / v-for clone, which removes it from this list.
+            this.#childVNodes?.slice().forEach(childVNode => {
                 childVNode.forceUpdate();
             });
             // If no directive requires template preservation, call onUpdated for directives that do not templatize
@@ -10364,7 +10629,7 @@ class VNode {
         }
         else if (this.#nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
             // For document fragments, recursively force update child VNodes
-            this.#childVNodes?.forEach(childVNode => {
+            this.#childVNodes?.slice().forEach(childVNode => {
                 childVNode.forceUpdate();
             });
         }
@@ -10446,6 +10711,7 @@ class VNode {
      * 4. Unregister dependencies
      * 5. Clean up directive manager
      * 6. Call onUnmounted lifecycle hooks
+     * 7. Leave the parent's child list
      */
     destroy() {
         this.#destroyed = true;
@@ -10472,9 +10738,9 @@ class VNode {
             }
             this.#userData.clear();
         }
-        // Recursively destroy child nodes
+        // Recursively destroy child nodes (a copy: each one leaves this list)
         if (this.#childVNodes) {
-            for (const childVNode of this.#childVNodes) {
+            for (const childVNode of this.#childVNodes.slice()) {
                 try {
                     childVNode.destroy();
                 }
@@ -10502,6 +10768,15 @@ class VNode {
                 d.onUnmounted?.();
             });
         }
+        // Leave the parent's child list. v-if and v-for render every new clone
+        // under the same parent VNode, so a destroyed clone left in the list
+        // would keep its whole subtree — VNodes, DOM nodes, bindings — alive
+        // for as long as the parent, growing with each toggle or row change.
+        const siblings = this.#parentVNode ? this.#parentVNode.#childVNodes : undefined;
+        const index = siblings ? siblings.indexOf(this) : -1;
+        if (index !== -1) {
+            siblings.splice(index, 1);
+        }
     }
 }
 
@@ -15504,9 +15779,13 @@ class VDOM {
  *    microtask fires, so data() can read them. A component used without any prop
  *    binding still mounts — with its declared defaults — instead of waiting forever.
  *
- * Slot content is captured on the first connection and cached, so a component
- * that is moved in the DOM (e.g. reordered by v-for) re-expands its template
- * and redistributes the same slot nodes on reconnection.
+ * Slot content is captured on the first expansion and cached. The nodes are the
+ * parent application's compiled nodes and are only ever moved, never cloned:
+ * each `<slot>` outlet the component renders moves them into place
+ * (VStaticSlotOutletDirective; scoped `<template v-slot>` content is rendered
+ * per outlet by VSlotOutletDirective instead). A component that is moved in
+ * the DOM (e.g. reordered by v-for) re-expands its template, and its outlets
+ * move the same nodes into the fresh expansion.
  *
  * Subclasses must set the static fields _template, _props, _propOptions and
  * _buildOptions before calling customElements.define(). defineComponent()
@@ -15531,12 +15810,13 @@ class IchigoElement extends HTMLElement {
      */
     #mountScheduled = false;
     /**
-     * Slot content captured on the first connection. Reused on reconnection
+     * Slot content captured on the first expansion. Reused on reconnection
      * (v-for reorder moves the host element, which re-runs connectedCallback
      * with the previously expanded template as children — not authored slot
-     * content — so the original capture must be redistributed instead).
-     * `scopedSlots` holds `<template v-slot:...>` children by slot name; they
-     * are rendered per outlet by VSlotOutletDirective, not distributed here.
+     * content — so the original capture must be used instead).
+     * `defaultNodes` / `namedNodes` are moved into place by
+     * VStaticSlotOutletDirective; `scopedSlots` holds `<template v-slot:...>`
+     * children by slot name, rendered per outlet by VSlotOutletDirective.
      */
     #slotCache;
     /**
@@ -15554,6 +15834,18 @@ class IchigoElement extends HTMLElement {
     get _ichigoScopedSlots() {
         return this.#slotCache?.scopedSlots;
     }
+    /**
+     * The static slot content captured for the given slot name ('default'
+     * for the unnamed slot): the parent application's nodes, moved into place
+     * by VStaticSlotOutletDirective. Undefined when nothing was provided for
+     * that name, in which case the outlet's fallback content renders.
+     */
+    _ichigoSlotNodes(name) {
+        const nodes = name === 'default'
+            ? this.#slotCache?.defaultNodes
+            : this.#slotCache?.namedNodes.get(name);
+        return nodes && nodes.length > 0 ? nodes : undefined;
+    }
     /**
      * Handles RE-attachment, and nothing else.
      *
@@ -15655,29 +15947,23 @@ class IchigoElement extends HTMLElement {
             }
             this.#slotCache = { defaultNodes, namedNodes, scopedSlots };
         }
-        const { defaultNodes, namedNodes } = this.#slotCache;
         // Clear host element so we can append the cloned template.
         // (On reconnection this discards the previous expansion; the cached slot
-        // nodes are still referenced and are moved into the fresh clone below.)
+        // nodes are still referenced and are moved into the fresh expansion by
+        // its outlets.)
+        // The slot nodes are NOT distributed into the template here: they are
+        // the parent application's live, compiled nodes, and a <slot> behind a
+        // v-if / v-for in the template is cloned with its surroundings — which
+        // would render dead copies without their bindings, listeners or props.
+        // They stay parked in the cache until a <slot> outlet is rendered, and
+        // VStaticSlotOutletDirective then moves them into place.
         while (this.firstChild) {
             this.removeChild(this.firstChild);
         }
         // --- 2. Clone the component template ---
         const fragment = templateEl.content.cloneNode(true);
         const root = this.#findRootElement(fragment);
-        // --- 3. Distribute named slot content ---
-        for (const [name, nodes] of namedNodes) {
-            const slot = root.querySelector(`slot[name="${name}"]`);
-            if (slot) {
-                slot.replaceWith(...nodes);
-            }
-        }
-        // --- 4. Distribute default slot content ---
-        const defaultSlot = root.querySelector('slot:not([name])');
-        if (defaultSlot && defaultNodes.length > 0) {
-            defaultSlot.replaceWith(...defaultNodes);
-        }
-        // Attach the populated template to the host element
+        // Attach the template to the host element
         this.appendChild(root);
         this.#mountRoot = root;
         this._ichigoExpanded = true;