@mintjamsinc/ichigojs 0.1.14 → 0.1.16

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();
@@ -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,6 +7322,11 @@ 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);
@@ -7356,12 +7354,27 @@ 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;
+        }
         // Get properties from :options or :options.component directive
         let properties = {};
         const optionsDirective = this.#vNode.directiveManager?.optionsDirective('component');
@@ -7385,19 +7398,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(this.#vNode.node);
     }
 }
 
@@ -8705,14 +8707,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;
@@ -9052,14 +9053,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;
@@ -9694,14 +9694,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;