@mintjamsinc/ichigojs 0.1.15 → 0.1.17

package/dist/ichigo.esm.js

@@ -7322,7 +7322,12 @@ class VComponentDirective {
     get onUnmounted() {
         return undefined;
     }
-    #cloneNode() {
+    /**
+     * 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) {
@@ -7370,8 +7375,6 @@ class VComponentDirective {
             // Already rendered, no action needed
             return;
         }
-        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');
@@ -7396,7 +7399,7 @@ 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(clone);
+        this.#componentApp.mount(this.#vNode.node);
     }
 }
 
@@ -7731,6 +7734,11 @@ 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) {
@@ -7788,6 +7796,13 @@ 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`
@@ -7877,6 +7892,10 @@ 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
@@ -8830,8 +8849,14 @@ class VConditionalDirective {
      */
     #cloneTemplate() {
         // Clone the original element
-        const element = this.#vNode.node;
-        const clone = element.cloneNode(true);
+        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,
@@ -9266,8 +9291,14 @@ class VForDirective {
      */
     #cloneTemplate(context) {
         // Clone the original element
-        const element = this.#vNode.node;
-        const clone = element.cloneNode(true);
+        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;