@mintjamsinc/ichigojs 0.1.13 → 0.1.14

package/dist/ichigo.esm.js

@@ -7222,14 +7222,6 @@ 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.
      */
@@ -7244,10 +7236,7 @@ class VComponentDirective {
     #isActivated = false;
     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);
     }
@@ -7286,7 +7275,7 @@ class VComponentDirective {
             },
             applyToDOM: () => {
                 if (!this.#isActivated) {
-                    this.renderComponent();
+                    this.#renderComponent();
                 }
             }
         };
@@ -7332,7 +7321,7 @@ class VComponentDirective {
      * @inheritdoc
      */
     get onUnmount() {
-        return () => this.cleanupComponent();
+        return () => this.#cleanupComponent();
     }
     /**
      * @inheritdoc
@@ -7340,26 +7329,39 @@ 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();
+        this.#cleanupComponent();
     }
     /**
      * 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`);
-            return;
-        }
+    #renderComponent() {
         // Get properties from :options or :options.component directive
         let properties = {};
         const optionsDirective = this.#vNode.directiveManager?.optionsDirective('component');
@@ -7375,60 +7377,22 @@ 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;
+            throw new Error(`Component '${this.#componentId}' not found in registry`);
         }
-        // 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;
-        }
-        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.#childApp = this.#vNode.vApplication.createChildApp(instance);
+        this.#childApp.mount(this.#vNode.node);
         this.#isActivated = true;
     }
     /**
      * Cleans up the component.
      */
-    cleanupComponent() {
+    #cleanupComponent() {
         if (this.#childApp) {
             this.#childApp.unmount();
             this.#childApp = undefined;
@@ -7768,6 +7732,11 @@ class VDirectiveManager {
      * 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) {
@@ -7826,11 +7795,11 @@ class VDirectiveManager {
         return this.#keyDirective;
     }
     /**
-     * Gets a record of VBindDirectives for options specific to certain directives.
-     * The keys are directive names (e.g., 'options', 'options.intersection').
+     * Gets the v-component directive associated with this node, if any.
+     * This may be undefined if there is no v-component directive.
      */
-    get optionsDirectives() {
-        return this.#optionsDirectives;
+    get componentDirective() {
+        return this.#componentDirective;
     }
     /**
      * Gets the VBindDirective for options specific to the given directive name.
@@ -7921,6 +7890,10 @@ class VDirectiveManager {
                         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
@@ -8874,8 +8847,15 @@ class VConditionalDirective {
      * Clones the template element and creates a new VNode for the cloned element.
      */
     #cloneTemplate() {
-        const element = this.#vNode.node;
-        const clone = element.cloneNode(true);
+        // 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);
+        }
         // Create a new VNode for the cloned element
         const vNode = new VNode({
             node: clone,
@@ -9310,8 +9290,15 @@ class VForDirective {
      * Clone template element for each iteration and create a new VNode
      */
     #cloneTemplate(context) {
-        const element = this.#vNode.node;
-        const clone = element.cloneNode(true);
+        // 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);
+        }
         // Prepare identifiers for the item
         this.#itemName;
         this.#indexName;