@mintjamsinc/ichigojs 0.1.17 → 0.1.18

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
@@ -8855,14 +8842,8 @@
          */
         #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);
-            }
+            const element = this.#vNode.node;
+            const clone = element.cloneNode(true);
             // Create a new VNode for the cloned element
             const vNode = new VNode({
                 node: clone,
@@ -9297,14 +9278,8 @@
          */
         #cloneTemplate(context) {
             // 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);
-            }
+            const element = this.#vNode.node;
+            const clone = element.cloneNode(true);
             // Prepare identifiers for the item
             this.#itemName;
             this.#indexName;