@mintjamsinc/ichigojs 0.1.80 → 0.1.82

package/README.md

@@ -1019,6 +1019,20 @@ defineComponent('my-badge', {
 Use the native `<slot>` element in the component template to project content
 from the parent. ichigo.js components use Light DOM.
 
+- Slot content is compiled in the **parent scope** and stays the parent's:
+  its bindings, event handlers and the props of components inside it keep
+  working wherever the component places it.
+- The content is **moved** to the `<slot>`, never copied, so a `<slot>` may sit
+  behind a `v-if` / `v-for` in the component template (e.g. a dialog body shown
+  only while open). Hiding the outlet takes the content out of view; showing it
+  again brings back the same nodes.
+- Nodes can be in one place only: when the same slot is rendered more than
+  once (a `<slot>` inside a `v-for`), the content goes to the outlet rendered
+  last, and if that outlet goes away it moves to the last one remaining. For
+  content per row, use a scoped slot (below), which renders once per outlet.
+- A `<slot>` that receives no content renders its own children as fallback, in
+  the component scope.
+
 ### Scoped slots
 
 A scoped slot lets the parent supply a template for content that the component

package/dist/ichigo.cjs

@@ -8990,9 +8990,9 @@
      * ```
      *
      * 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
@@ -9245,9 +9245,18 @@
             slot.replaceWith(fragment);
             // Initial rendering
             this.#contentVNode.forceUpdate();
-            // Components in the slot content expand once it is in the document.
+            // Components in the slot content expand once it is in the document:
+            // now, if the outlet is connected, or — when it renders inside a
+            // detached v-if / v-for clone — through expandComponents() below, when
+            // the directive that inserts the clone walks it.
             this.#contentVNode.expandComponents();
         }
+        /**
+         * @inheritdoc
+         */
+        expandComponents() {
+            this.#contentVNode?.expandComponents();
+        }
         /**
          * Re-evaluates the slot props (component-side change) and pushes them into
          * the content scope.
@@ -9275,6 +9284,266 @@
         }
     }
 
+    // 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).
@@ -9443,10 +9712,12 @@
             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' &&
@@ -9454,7 +9725,8 @@
                 !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);
                 }
@@ -9863,6 +10135,12 @@
          * remove the entire fragment atomically.
          */
         #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.
+         */
+        #destroyed = false;
         /**
          * Custom element tags already reported by
          * {@link VNode.#warnIfUnknownCustomElement}.
@@ -9996,19 +10274,40 @@
          * Walking only {@link childVNodes} keeps the traversal inside this
          * application: the internals of an expanded component were never compiled
          * here, so they are not reachable and are left to their own application.
-         * A templatized node is skipped whole — it is a template source, and its
-         * clones expand when they are inserted.
+         * The one exception is content a directive rendered outside its own
+         * children — scoped slot content — reached through
+         * {@link VDirective.expandComponents}.
+         *
+         * Only connected elements are expanded. v-if / v-for call this right after
+         * inserting a clone, but when that clone sits inside another clone that is
+         * still detached (nested directives, or slot content rendered by an outlet
+         * inside a component's v-if), the insertion is not into the document yet;
+         * the outer inserter's walk reaches the same nodes once it is. A
+         * templatized node (a v-if / v-for source) is not expanded itself, but its
+         * rendered clones are its children and are walked.
          */
         expandComponents() {
-            if (this.#templatized) {
+            if (this.#destroyed) {
                 return;
             }
-            if (this.#nodeType === Node.ELEMENT_NODE && IchigoElementRegistry.has(this.#nodeName)) {
+            // Expand only a connected element. A subtree compiled and inserted
+            // into a still-detached clone (a v-if / v-for nested in another
+            // clone, or in scoped slot content rendered inside one) is reached
+            // again by the walk of whoever inserts that clone into the document —
+            // and by then its elements are upgraded and ready to expand.
+            // A templatized node is a template source: never expanded itself,
+            // but its rendered clones are its child VNodes and are walked below.
+            if (!this.#templatized && this.#nodeType === Node.ELEMENT_NODE && IchigoElementRegistry.has(this.#nodeName)) {
                 const element = this.#node;
-                if (element._ichigoExpanded !== true) {
+                if (element._ichigoExpanded !== true && element.isConnected) {
                     element._ichigoExpand?.();
                 }
             }
+            // Subtrees a directive rendered outside this VNode's children (the
+            // scoped slot content of a <slot> outlet) are expanded here too: this
+            // 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());
         }
         /**
@@ -10418,6 +10717,7 @@
          * 6. Call onUnmounted lifecycle hooks
          */
         destroy() {
+            this.#destroyed = true;
             // If no directive requires template preservation, call onUnmount for directives that do not templatize
             if (!this.#templatized) {
                 this.#directiveManager?.directives?.forEach(d => {
@@ -15473,9 +15773,13 @@
      *    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()
@@ -15500,12 +15804,13 @@
          */
         #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;
         /**
@@ -15523,6 +15828,18 @@
         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.
          *
@@ -15624,29 +15941,23 @@
                 }
                 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;