@mintjamsinc/ichigojs 0.1.16 → 0.1.18

package/dist/ichigo.esm.js

@@ -7251,7 +7251,7 @@ class VComponentDirective {
      * @inheritdoc
      */
     get needsAnchor() {
-        return false;
+        return true;
     }
     /**
      * @inheritdoc
@@ -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
@@ -8849,14 +8836,8 @@ class VConditionalDirective {
      */
     #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,
@@ -9291,14 +9272,8 @@ class VForDirective {
      */
     #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;