@mintjamsinc/ichigojs 0.1.14 → 0.1.15

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();
@@ -7262,7 +7257,7 @@
          * @inheritdoc
          */
         get needsAnchor() {
-            return false;
+            return true;
         }
         /**
          * @inheritdoc
@@ -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,7 +7328,7 @@
         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) {
@@ -7362,12 +7355,29 @@
          * @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');
@@ -7391,19 +7401,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(clone);
         }
     }
 
@@ -7738,11 +7737,6 @@
          * 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) {
@@ -7800,13 +7794,6 @@
         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`
@@ -7896,10 +7883,6 @@
                             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
@@ -8711,14 +8694,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;
@@ -8854,14 +8836,8 @@
          */
         #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,
@@ -9058,14 +9034,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;
@@ -9297,14 +9272,8 @@
          */
         #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;
@@ -9700,14 +9669,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;