@mintjamsinc/ichigojs 0.1.17 → 0.1.19

package/dist/ichigo.esm.js

@@ -7322,34 +7322,6 @@ class VComponentDirective {
     get onUnmounted() {
         return undefined;
     }
-    /**
-     * Clones the component's template and returns the root element.
-     * @returns The cloned root HTMLElement of the component.
-     * @throws Error if the component or its template is not found.
-     */
-    cloneNode() {
-        // Get component definition from the application's component registry
-        const component = this.#vNode.vApplication.componentRegistry.get(this.#componentId);
-        if (!component) {
-            throw new Error(`Component '${this.#componentId}' not found in registry`);
-        }
-        // Get template element
-        const finalTemplateID = component.templateID || component.id;
-        const templateElement = document.querySelector(`#${finalTemplateID}`);
-        if (!templateElement || !(templateElement instanceof HTMLTemplateElement)) {
-            throw new Error(`Template element '#${finalTemplateID}' not found`);
-        }
-        // Clone template content
-        const fragment = templateElement.content.cloneNode(true);
-        const childNodes = Array.from(fragment.childNodes);
-        // Find the first element node
-        for (const node of childNodes) {
-            if (node.nodeType === Node.ELEMENT_NODE) {
-                return node;
-            }
-        }
-        throw new Error(`No element found in template '#${finalTemplateID}'`);
-    }
     /**
      * @inheritdoc
      */
@@ -7375,6 +7347,9 @@ class VComponentDirective {
             // Already rendered, no action needed
             return;
         }
+        // Clone the component's template and replace the original node
+        const clone = this.#cloneNode();
+        this.#vNode.anchorNode?.parentNode?.insertBefore(clone, this.#vNode.anchorNode.nextSibling);
         // Get properties from :options or :options.component directive
         let properties = {};
         const optionsDirective = this.#vNode.directiveManager?.optionsDirective('component');
@@ -7399,7 +7374,35 @@ class VComponentDirective {
         const instance = component.createInstance(properties);
         // Create and mount child application using the parent application's registries
         this.#componentApp = this.#vNode.vApplication.createChildApp(instance);
-        this.#componentApp.mount(this.#vNode.node);
+        this.#componentApp.mount(clone);
+    }
+    /**
+     * Clones the component's template and returns the root element.
+     * @returns The cloned root HTMLElement of the component.
+     * @throws Error if the component or its template is not found.
+     */
+    #cloneNode() {
+        // Get component definition from the application's component registry
+        const component = this.#vNode.vApplication.componentRegistry.get(this.#componentId);
+        if (!component) {
+            throw new Error(`Component '${this.#componentId}' not found in registry`);
+        }
+        // Get template element
+        const finalTemplateID = component.templateID || component.id;
+        const templateElement = document.querySelector(`#${finalTemplateID}`);
+        if (!templateElement || !(templateElement instanceof HTMLTemplateElement)) {
+            throw new Error(`Template element '#${finalTemplateID}' not found`);
+        }
+        // Clone template content
+        const fragment = templateElement.content.cloneNode(true);
+        const childNodes = Array.from(fragment.childNodes);
+        // Find the first element node
+        for (const node of childNodes) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                return node;
+            }
+        }
+        throw new Error(`No element found in template '#${finalTemplateID}'`);
     }
 }
 
@@ -7734,11 +7737,6 @@ class VDirectiveManager {
      * The keys are directive names (e.g., 'options', 'options.intersection').
      */
     #optionsDirectives = {};
-    /**
-     * The v-component directive associated with this node, if any.
-     * This may be undefined if there is no v-component directive.
-     */
-    #componentDirective;
     constructor(vNode) {
         // Directives can only be associated with element nodes
         if (vNode.nodeType !== Node.ELEMENT_NODE) {
@@ -7796,13 +7794,6 @@ class VDirectiveManager {
     get keyDirective() {
         return this.#keyDirective;
     }
-    /**
-     * Gets the v-component directive associated with this node, if any.
-     * This may be undefined if there is no v-component directive.
-     */
-    get componentDirective() {
-        return this.#componentDirective;
-    }
     /**
      * Gets the VBindDirective for options specific to the given directive name.
      * Searches in order: `:options.{directive}` -> `:options`
@@ -7892,10 +7883,6 @@ class VDirectiveManager {
                         this.#optionsDirectives[attrName] = bindDirective;
                     }
                 }
-                // If this is a v-component directive, store it separately
-                if (directive.name === StandardDirectiveName.V_COMPONENT) {
-                    this.#componentDirective = directive;
-                }
             }
         }
         // Sort directives by priority: v-for > v-if > v-else-if > v-else > v-show > others
@@ -8825,8 +8812,17 @@ class VConditionalDirective {
             // Already rendered, no action needed
             return;
         }
-        this.#renderedVNode = this.#cloneTemplate();
-        this.#vNode.anchorNode?.parentNode?.insertBefore(this.#renderedVNode.node, this.#vNode.anchorNode.nextSibling);
+        // Clone the original node and create a new VNode for it
+        const clone = this.#cloneNode();
+        // Insert the cloned node after the anchor node, or as a child of the parent if no anchor
+        this.#vNode.anchorNode?.parentNode?.insertBefore(clone, this.#vNode.anchorNode.nextSibling);
+        // Create a new VNode for the cloned element
+        const vNode = new VNode({
+            node: clone,
+            vApplication: this.#vNode.vApplication,
+            parentVNode: this.#vNode.parentVNode
+        });
+        this.#renderedVNode = vNode;
         this.#renderedVNode.forceUpdate();
     }
     /**
@@ -8845,25 +8841,13 @@ class VConditionalDirective {
         this.#renderedVNode = undefined;
     }
     /**
-     * Clones the template element and creates a new VNode for the cloned element.
+     * Clones the original node of the directive's virtual node.
+     * This is used to create a new instance of the node for rendering.
+     * @returns The cloned HTMLElement.
      */
-    #cloneTemplate() {
-        // Clone the original element
-        let clone;
-        if (this.vNode.directiveManager?.componentDirective) {
-            clone = this.vNode.directiveManager.componentDirective.cloneNode();
-        }
-        else {
-            const element = this.#vNode.node;
-            clone = element.cloneNode(true);
-        }
-        // Create a new VNode for the cloned element
-        const vNode = new VNode({
-            node: clone,
-            vApplication: this.#vNode.vApplication,
-            parentVNode: this.#vNode.parentVNode
-        });
-        return vNode;
+    #cloneNode() {
+        const element = this.#vNode.node;
+        return element.cloneNode(true);
     }
     /**
      * Creates a function to evaluate the directive's condition.
@@ -9203,15 +9187,36 @@ class VForDirective {
             let vNode = this.#renderedItems.get(key);
             if (!vNode) {
                 // Create new item
-                vNode = this.#cloneTemplate(context);
-                newRenderedItems.set(key, vNode);
+                const clone = this.#cloneNode();
                 // Insert after previous node
                 if (prevNode.nextSibling) {
-                    parent.insertBefore(vNode.node, prevNode.nextSibling);
+                    parent.insertBefore(clone, prevNode.nextSibling);
                 }
                 else {
-                    parent.appendChild(vNode.node);
+                    parent.appendChild(clone);
+                }
+                // Prepare identifiers for the item
+                this.#itemName;
+                this.#indexName;
+                // Create bindings for this iteration
+                const bindings = new VBindings({
+                    parent: this.#vNode.bindings
+                });
+                if (this.#itemName) {
+                    bindings.set(this.#itemName, context.item);
                 }
+                if (this.#indexName) {
+                    bindings.set(this.#indexName, context.index);
+                }
+                // Create a new VNode for the cloned element
+                vNode = new VNode({
+                    node: clone,
+                    vApplication: this.#vNode.vApplication,
+                    parentVNode: this.#vNode.parentVNode,
+                    bindings,
+                    dependentIdentifiers: [`${this.#sourceName}[${context.index}]`]
+                });
+                newRenderedItems.set(key, vNode);
                 vNode.forceUpdate();
             }
             else {
@@ -9287,40 +9292,14 @@ class VForDirective {
         };
     }
     /**
-     * Clone template element for each iteration and create a new VNode
+     * Clones the original node of the directive's virtual node.
+     * This is used to create a new instance of the node for rendering.
+     * @returns The cloned HTMLElement.
      */
-    #cloneTemplate(context) {
+    #cloneNode() {
         // Clone the original element
-        let clone;
-        if (this.vNode.directiveManager?.componentDirective) {
-            clone = this.vNode.directiveManager.componentDirective.cloneNode();
-        }
-        else {
-            const element = this.#vNode.node;
-            clone = element.cloneNode(true);
-        }
-        // Prepare identifiers for the item
-        this.#itemName;
-        this.#indexName;
-        // Create bindings for this iteration
-        const bindings = new VBindings({
-            parent: this.#vNode.bindings
-        });
-        if (this.#itemName) {
-            bindings.set(this.#itemName, context.item);
-        }
-        if (this.#indexName) {
-            bindings.set(this.#indexName, context.index);
-        }
-        // Create a new VNode for the cloned element
-        const vNode = new VNode({
-            node: clone,
-            vApplication: this.#vNode.vApplication,
-            parentVNode: this.#vNode.parentVNode,
-            bindings,
-            dependentIdentifiers: [`${this.#sourceName}[${context.index}]`]
-        });
-        return vNode;
+        const element = this.#vNode.node;
+        return element.cloneNode(true);
     }
     /**
      * Update bindings for an existing item