@mintjamsinc/ichigojs 0.1.14 → 0.1.16

package/dist/ichigo.umd.js

@@ -6962,14 +6962,13 @@
          */
         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;
@@ -7233,13 +7232,9 @@
          */
         #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();
@@ -7280,9 +7275,7 @@
                     return [];
                 },
                 applyToDOM: () => {
-                    if (!this.#isActivated) {
-                        this.#renderComponent();
-                    }
+                    this.#render();
                 }
             };
             return updater;
@@ -7291,7 +7284,7 @@
          * @inheritdoc
          */
         get templatize() {
-            return false;
+            return true;
         }
         /**
          * @inheritdoc
@@ -7327,7 +7320,7 @@
          * @inheritdoc
          */
         get onUnmount() {
-            return () => this.#cleanupComponent();
+            return undefined;
         }
         /**
          * @inheritdoc
@@ -7335,6 +7328,11 @@
         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);
@@ -7362,12 +7360,27 @@
          * @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');
@@ -7391,19 +7404,8 @@
             // 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);
         }
     }
 
@@ -8711,14 +8713,13 @@
          */
         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;
@@ -9058,14 +9059,13 @@
          */
         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;
@@ -9700,14 +9700,13 @@
          */
         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;