@mintjamsinc/ichigojs 0.1.14 → 0.1.15

package/dist/ichigo.esm.js

@@ -6956,14 +6956,13 @@ class VBindDirective {
      */
     get domUpdater() {
         const identifiers = this.#dependentIdentifiers ?? [];
-        const render = () => this.#render();
         // Create an updater that handles the attribute binding
         const updater = {
             get dependentIdentifiers() {
                 return identifiers;
             },
-            applyToDOM() {
-                render();
+            applyToDOM: () => {
+                this.#render();
             }
         };
         return updater;
@@ -7227,13 +7226,9 @@ class VComponentDirective {
      */
     #componentId;
     /**
-     * The child application instance for the component.
-     */
-    #childApp;
-    /**
-     * Whether the component has been activated.
+     * The application instance for the component.
      */
-    #isActivated = false;
+    #componentApp;
     constructor(context) {
         this.#vNode = context.vNode;
         this.#componentId = context.attribute.value.trim();
@@ -7256,7 +7251,7 @@ class VComponentDirective {
      * @inheritdoc
      */
     get needsAnchor() {
-        return false;
+        return true;
     }
     /**
      * @inheritdoc
@@ -7274,9 +7269,7 @@ class VComponentDirective {
                 return [];
             },
             applyToDOM: () => {
-                if (!this.#isActivated) {
-                    this.#renderComponent();
-                }
+                this.#render();
             }
         };
         return updater;
@@ -7285,7 +7278,7 @@ class VComponentDirective {
      * @inheritdoc
      */
     get templatize() {
-        return false;
+        return true;
     }
     /**
      * @inheritdoc
@@ -7321,7 +7314,7 @@ class VComponentDirective {
      * @inheritdoc
      */
     get onUnmount() {
-        return () => this.#cleanupComponent();
+        return undefined;
     }
     /**
      * @inheritdoc
@@ -7329,7 +7322,7 @@ class VComponentDirective {
     get onUnmounted() {
         return undefined;
     }
-    cloneNode() {
+    #cloneNode() {
         // Get component definition from the application's component registry
         const component = this.#vNode.vApplication.componentRegistry.get(this.#componentId);
         if (!component) {
@@ -7356,12 +7349,29 @@ class VComponentDirective {
      * @inheritdoc
      */
     destroy() {
-        this.#cleanupComponent();
+        if (!this.#componentApp) {
+            // Not rendered, no action needed
+            return;
+        }
+        // Destroy component application first (calls @unmount hooks while DOM is still accessible)
+        this.#componentApp.unmount();
+        // Then remove from DOM
+        const componentVNode = this.#componentApp.rootVNode;
+        if (componentVNode?.node.parentNode) {
+            componentVNode.node.parentNode.removeChild(componentVNode.node);
+        }
+        this.#componentApp = undefined;
     }
     /**
      * Renders the component.
      */
-    #renderComponent() {
+    #render() {
+        if (this.#componentApp) {
+            // 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');
@@ -7385,19 +7395,8 @@ class VComponentDirective {
         // Create component instance
         const instance = component.createInstance(properties);
         // Create and mount child application using the parent application's registries
-        this.#childApp = this.#vNode.vApplication.createChildApp(instance);
-        this.#childApp.mount(this.#vNode.node);
-        this.#isActivated = true;
-    }
-    /**
-     * Cleans up the component.
-     */
-    #cleanupComponent() {
-        if (this.#childApp) {
-            this.#childApp.unmount();
-            this.#childApp = undefined;
-        }
-        this.#isActivated = false;
+        this.#componentApp = this.#vNode.vApplication.createChildApp(instance);
+        this.#componentApp.mount(clone);
     }
 }
 
@@ -7732,11 +7731,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) {
@@ -7794,13 +7788,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`
@@ -7890,10 +7877,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
@@ -8705,14 +8688,13 @@ class VConditionalDirective {
      */
     get domUpdater() {
         const identifiers = this.#conditionalContext.allDependentIdentifiers;
-        const render = () => this.#render();
         // Create an updater that handles the conditional rendering
         const updater = {
             get dependentIdentifiers() {
                 return identifiers;
             },
-            applyToDOM() {
-                render();
+            applyToDOM: () => {
+                this.#render();
             }
         };
         return updater;
@@ -8848,14 +8830,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,
@@ -9052,14 +9028,13 @@ class VForDirective {
      */
     get domUpdater() {
         const identifiers = this.#dependentIdentifiers ?? [];
-        const render = () => this.#render();
         // Create and return the DOM updater
         const updater = {
             get dependentIdentifiers() {
                 return identifiers;
             },
-            applyToDOM() {
-                render();
+            applyToDOM: () => {
+                this.#render();
             }
         };
         return updater;
@@ -9291,14 +9266,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;
@@ -9694,14 +9663,13 @@ class VModelDirective {
      */
     get domUpdater() {
         const identifiers = this.#dependentIdentifiers ?? [];
-        const render = () => this.#render();
         // Create and return the DOM updater
         const updater = {
             get dependentIdentifiers() {
                 return identifiers;
             },
-            applyToDOM() {
-                render();
+            applyToDOM: () => {
+                this.#render();
             }
         };
         return updater;