@mintjamsinc/ichigojs 0.1.12 → 0.1.14

package/dist/ichigo.umd.js

@@ -7228,14 +7228,6 @@
          * 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.
          */
@@ -7250,10 +7242,7 @@
         #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);
         }
@@ -7292,7 +7281,7 @@
                 },
                 applyToDOM: () => {
                     if (!this.#isActivated) {
-                        this.renderComponent();
+                        this.#renderComponent();
                     }
                 }
             };
@@ -7338,7 +7327,7 @@
          * @inheritdoc
          */
         get onUnmount() {
-            return () => this.cleanupComponent();
+            return () => this.#cleanupComponent();
         }
         /**
          * @inheritdoc
@@ -7346,26 +7335,39 @@
         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');
@@ -7381,63 +7383,24 @@
                     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;
+                throw new Error(`Component '${this.#componentId}' not found in registry`);
             }
-            // 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) {
-                // TODO: Implement unmount when available in VApplication
-                // this.#childApp.unmount();
+                this.#childApp.unmount();
                 this.#childApp = undefined;
             }
             this.#isActivated = false;
@@ -7775,6 +7738,11 @@
          * 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) {
@@ -7833,11 +7801,11 @@
             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.
@@ -7928,6 +7896,10 @@
                             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
@@ -8881,8 +8853,15 @@
          * 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,
@@ -9317,8 +9296,15 @@
          * 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;
@@ -11223,6 +11209,16 @@
             this.#vNode.update();
             this.#logger.info('Application mounted.');
         }
+        /**
+         * Unmounts the application and cleans up resources.
+         */
+        unmount() {
+            if (this.#vNode) {
+                this.#vNode.destroy();
+                this.#vNode = undefined;
+            }
+            this.#logger.info('Application unmounted.');
+        }
         /**
          * Creates a child application instance with the same registries.
          * @param options The application options for the child.