@mintjamsinc/ichigojs 0.1.13 → 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;
@@ -7228,32 +7227,17 @@
          * The virtual node to which this directive is applied.
          */
         #vNode;
-        /**
-         * The component ID expression.
-         */
-        #expression;
-        /**
-         * Whether the component ID is static (not reactive).
-         */
-        #isStatic = false;
         /**
          * The component ID to render.
          */
         #componentId;
         /**
-         * The child application instance for the component.
+         * The application instance for the component.
          */
-        #childApp;
-        /**
-         * Whether the component has been activated.
-         */
-        #isActivated = false;
+        #componentApp;
         constructor(context) {
             this.#vNode = context.vNode;
-            this.#expression = context.attribute.value;
-            // Check for .static modifier
-            const attrName = context.attribute.name;
-            this.#isStatic = attrName.includes('.static');
+            this.#componentId = context.attribute.value.trim();
             // Remove the directive attribute from the element
             this.#vNode.node.removeAttribute(context.attribute.name);
         }
@@ -7273,7 +7257,7 @@
          * @inheritdoc
          */
         get needsAnchor() {
-            return false;
+            return true;
         }
         /**
          * @inheritdoc
@@ -7291,9 +7275,7 @@
                     return [];
                 },
                 applyToDOM: () => {
-                    if (!this.#isActivated) {
-                        this.renderComponent();
-                    }
+                    this.#render();
                 }
             };
             return updater;
@@ -7302,7 +7284,7 @@
          * @inheritdoc
          */
         get templatize() {
-            return false;
+            return true;
         }
         /**
          * @inheritdoc
@@ -7338,7 +7320,7 @@
          * @inheritdoc
          */
         get onUnmount() {
-            return () => this.cleanupComponent();
+            return undefined;
         }
         /**
          * @inheritdoc
@@ -7346,26 +7328,56 @@
         get onUnmounted() {
             return undefined;
         }
+        #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
          */
         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() {
-            const element = this.#vNode.node;
-            if (!element) {
-                return;
-            }
-            // For now, only support static component IDs
-            const componentId = this.#expression.trim();
-            if (!componentId) {
-                console.warn(`Component ID is empty for v-component directive`);
+        #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');
@@ -7381,65 +7393,16 @@
                     properties = result;
                 }
             }
-            // Store component ID
-            this.#componentId = componentId;
             // Get component definition from the application's component registry
-            const vApplication = this.#vNode.vApplication;
-            if (!vApplication) {
-                console.error('VApplication not found on VNode');
-                return;
-            }
-            const component = vApplication.componentRegistry.get(componentId);
+            const component = this.#vNode.vApplication.componentRegistry.get(this.#componentId);
             if (!component) {
-                console.error(`Component '${componentId}' not found in registry`);
-                return;
-            }
-            // Get template element
-            const finalTemplateID = component.templateID;
-            const templateElement = document.querySelector(`#${finalTemplateID}`);
-            if (!templateElement || !(templateElement instanceof HTMLTemplateElement)) {
-                console.error(`Template element '#${finalTemplateID}' not found`);
-                return;
-            }
-            // Clone template content
-            const fragment = templateElement.content.cloneNode(true);
-            const childNodes = Array.from(fragment.childNodes);
-            // Find the first element node
-            let componentElement;
-            for (const node of childNodes) {
-                if (node.nodeType === Node.ELEMENT_NODE) {
-                    componentElement = node;
-                    break;
-                }
-            }
-            if (!componentElement) {
-                console.error(`No element found in template '#${finalTemplateID}'`);
-                return;
-            }
-            // Replace element with component element
-            const parent = element.parentNode;
-            if (!parent) {
-                console.error(`Element has no parent node. Component '${componentId}' cannot be mounted.`);
-                return;
+                throw new Error(`Component '${this.#componentId}' not found in registry`);
             }
-            parent.insertBefore(componentElement, element);
-            parent.removeChild(element);
             // Create component instance
             const instance = component.createInstance(properties);
             // Create and mount child application using the parent application's registries
-            this.#childApp = vApplication.createChildApp(instance);
-            this.#childApp.mount(componentElement);
-            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);
         }
     }
 
@@ -7831,13 +7794,6 @@
         get keyDirective() {
             return this.#keyDirective;
         }
-        /**
-         * Gets a record of VBindDirectives for options specific to certain directives.
-         * The keys are directive names (e.g., 'options', 'options.intersection').
-         */
-        get optionsDirectives() {
-            return this.#optionsDirectives;
-        }
         /**
          * Gets the VBindDirective for options specific to the given directive name.
          * Searches in order: `:options.{directive}` -> `:options`
@@ -8738,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;
@@ -8880,6 +8835,7 @@
          * Clones the template element and creates a new VNode for the cloned element.
          */
         #cloneTemplate() {
+            // Clone the original element
             const element = this.#vNode.node;
             const clone = element.cloneNode(true);
             // Create a new VNode for the cloned element
@@ -9078,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;
@@ -9316,6 +9271,7 @@
          * Clone template element for each iteration and create a new VNode
          */
         #cloneTemplate(context) {
+            // Clone the original element
             const element = this.#vNode.node;
             const clone = element.cloneNode(true);
             // Prepare identifiers for the item
@@ -9713,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;