@mintjamsinc/ichigojs 0.1.13 → 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;
@@ -7222,32 +7221,17 @@ class VComponentDirective {
      * 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);
     }
@@ -7267,7 +7251,7 @@ class VComponentDirective {
      * @inheritdoc
      */
     get needsAnchor() {
-        return false;
+        return true;
     }
     /**
      * @inheritdoc
@@ -7285,9 +7269,7 @@ class VComponentDirective {
                 return [];
             },
             applyToDOM: () => {
-                if (!this.#isActivated) {
-                    this.renderComponent();
-                }
+                this.#render();
             }
         };
         return updater;
@@ -7296,7 +7278,7 @@ class VComponentDirective {
      * @inheritdoc
      */
     get templatize() {
-        return false;
+        return true;
     }
     /**
      * @inheritdoc
@@ -7332,7 +7314,7 @@ class VComponentDirective {
      * @inheritdoc
      */
     get onUnmount() {
-        return () => this.cleanupComponent();
+        return undefined;
     }
     /**
      * @inheritdoc
@@ -7340,26 +7322,56 @@ class VComponentDirective {
     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');
@@ -7375,65 +7387,16 @@ class VComponentDirective {
                 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);
     }
 }
 
@@ -7825,13 +7788,6 @@ class VDirectiveManager {
     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`
@@ -8732,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;
@@ -8874,6 +8829,7 @@ class VConditionalDirective {
      * 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
@@ -9072,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;
@@ -9310,6 +9265,7 @@ class VForDirective {
      * 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
@@ -9707,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;