@mintjamsinc/ichigojs 0.1.17 → 0.1.19

package/dist/ichigo.umd.js

@@ -7328,34 +7328,6 @@
         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
          */
@@ -7381,6 +7353,9 @@
                 // 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');
@@ -7405,7 +7380,35 @@
             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}'`);
         }
     }
 
@@ -7740,11 +7743,6 @@
          * 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) {
@@ -7802,13 +7800,6 @@
         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`
@@ -7898,10 +7889,6 @@
                             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
@@ -8831,8 +8818,17 @@
                 // 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();
         }
         /**
@@ -8851,25 +8847,13 @@
             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.
@@ -9209,15 +9193,36 @@
                 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 {
@@ -9293,40 +9298,14 @@
             };
         }
         /**
-         * 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