@mintjamsinc/ichigojs 0.1.10 → 0.1.12

package/dist/ichigo.umd.js

@@ -5,7 +5,96 @@
 })(this, (function (exports) { 'use strict';
 
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+    /**
+     * Represents a reusable component definition.
+     */
+    class VComponent {
+        /**
+         * The unique identifier for the component.
+         */
+        id;
+        /**
+         * The function that creates a new instance of the component.
+         */
+        createInstance;
+        /**
+         * The optional template ID for the component.
+         * If not specified, defaults to the component ID.
+         */
+        templateID;
+        /**
+         * Creates a new component definition.
+         * @param id The unique identifier for the component.
+         * @param createInstance The function that creates a new instance of the component.
+         * @param templateID The optional template ID for the component.
+         */
+        constructor(id, createInstance, templateID) {
+            if (!id || typeof id !== 'string') {
+                throw new Error('Component ID must be a non-empty string.');
+            }
+            if (typeof createInstance !== 'function') {
+                throw new Error('createInstance must be a function.');
+            }
+            this.id = id.trim();
+            this.createInstance = createInstance;
+            this.templateID = templateID?.trim() || this.id;
+        }
+    }
+
+    // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+    /**
+     * A registry for managing component definitions.
+     */
     class VComponentRegistry {
+        /**
+         * Map of component ID to component definition.
+         */
+        #components = new Map();
+        /**
+         * Registers a new component.
+         * @param id The unique identifier for the component.
+         * @param createInstance The function that creates a new instance of the component.
+         * @param templateID The optional template ID for the component.
+         * @returns True if the component was registered, false if a component with the same ID already exists.
+         */
+        register(id, createInstance, templateID) {
+            if (this.has(id)) {
+                return false;
+            }
+            const component = new VComponent(id, createInstance, templateID);
+            this.#components.set(id, component);
+            return true;
+        }
+        /**
+         * Checks if a component with the given ID exists.
+         * @param id The component ID to check.
+         * @returns True if the component exists, false otherwise.
+         */
+        has(id) {
+            return this.#components.has(id);
+        }
+        /**
+         * Gets a component by its ID.
+         * @param id The component ID to retrieve.
+         * @returns The component definition, or undefined if not found.
+         */
+        get(id) {
+            return this.#components.get(id);
+        }
+        /**
+         * Removes a component from the registry.
+         * @param id The component ID to remove.
+         * @returns True if the component was removed, false if it didn't exist.
+         */
+        unregister(id) {
+            return this.#components.delete(id);
+        }
+        /**
+         * Clears all registered components.
+         */
+        clear() {
+            this.#components.clear();
+        }
     }
 
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
@@ -80,6 +169,8 @@
         StandardDirectiveName["V_INTERSECTION"] = "v-intersection";
         /** Performance observer directives. */
         StandardDirectiveName["V_PERFORMANCE"] = "v-performance";
+        /** Component directive. */
+        StandardDirectiveName["V_COMPONENT"] = "v-component";
     })(StandardDirectiveName || (StandardDirectiveName = {}));
 
     // This file was generated. Do not modify manually!
@@ -6646,10 +6737,16 @@
                     const isArrowFunction = /^\s*(\([^)]*\)|[a-zA-Z_$][a-zA-Z0-9_$]*)\s*=>/.test(source);
                     const isFunctionExpression = source.startsWith('function');
                     const isAsyncFunction = source.startsWith('async');
-                    // If it's a method shorthand (e.g., "methodName() { ... }"), convert to function expression
-                    if (!isFunctionExpression && !isArrowFunction && !isAsyncFunction) {
+                    // If it's a method shorthand (e.g., "methodName() { ... }" or "async methodName() { ... }"), convert to function expression
+                    if (!isFunctionExpression && !isArrowFunction) {
                         // It's likely a method shorthand, convert to function expression
-                        source = `function ${source}`;
+                        if (isAsyncFunction) {
+                            // Remove 'async' prefix and add 'async function' prefix
+                            source = `async function ${source.substring(5).trim()}`;
+                        }
+                        else {
+                            source = `function ${source}`;
+                        }
                     }
                     // Wrap in parentheses for parsing
                     source = `(${source})`;
@@ -7117,6 +7214,236 @@
         }
     }
 
+    // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+    /**
+     * Directive for rendering components.
+     * Usage: <div v-component="componentId" :options="props"></div>
+     *
+     * The :options binding is used to pass properties to the component.
+     * Example:
+     *   <div v-component="my-component" :options="{message: 'Hello'}"></div>
+     */
+    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.
+         */
+        #childApp;
+        /**
+         * Whether the component has been activated.
+         */
+        #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');
+            // Remove the directive attribute from the element
+            this.#vNode.node.removeAttribute(context.attribute.name);
+        }
+        /**
+         * @inheritdoc
+         */
+        get name() {
+            return StandardDirectiveName.V_COMPONENT;
+        }
+        /**
+         * @inheritdoc
+         */
+        get vNode() {
+            return this.#vNode;
+        }
+        /**
+         * @inheritdoc
+         */
+        get needsAnchor() {
+            return false;
+        }
+        /**
+         * @inheritdoc
+         */
+        get bindingsPreparer() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get domUpdater() {
+            // Create and return the DOM updater
+            const updater = {
+                get dependentIdentifiers() {
+                    return [];
+                },
+                applyToDOM: () => {
+                    if (!this.#isActivated) {
+                        this.renderComponent();
+                    }
+                }
+            };
+            return updater;
+        }
+        /**
+         * @inheritdoc
+         */
+        get templatize() {
+            return false;
+        }
+        /**
+         * @inheritdoc
+         */
+        get dependentIdentifiers() {
+            return [];
+        }
+        /**
+         * @inheritdoc
+         */
+        get onMount() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onMounted() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUpdate() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUpdated() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUnmount() {
+            return () => this.cleanupComponent();
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUnmounted() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        destroy() {
+            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;
+            }
+            // Get properties from :options or :options.component directive
+            let properties = {};
+            const optionsDirective = this.#vNode.directiveManager?.optionsDirective('component');
+            if (optionsDirective && optionsDirective.expression) {
+                // Evaluate the options expression
+                const identifiers = optionsDirective.dependentIdentifiers;
+                const values = identifiers.map(id => this.#vNode.bindings?.get(id));
+                const args = identifiers.join(", ");
+                const funcBody = `return (${optionsDirective.expression});`;
+                const func = new Function(args, funcBody);
+                const result = func(...values);
+                if (typeof result === 'object' && result !== null) {
+                    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);
+            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;
+            }
+            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) {
+                // TODO: Implement unmount when available in VApplication
+                // this.#childApp.unmount();
+                this.#childApp = undefined;
+            }
+            this.#isActivated = false;
+        }
+    }
+
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
     /**
      * Utility class for creating reactive proxies that automatically track changes.
@@ -7595,7 +7922,11 @@
                     }
                     // If this is an options binding directive, cache it
                     if (directive.name === StandardDirectiveName.V_BIND && directive.isOptions) {
-                        this.#optionsDirectives[directive.name] = directive;
+                        const bindDirective = directive;
+                        const attrName = bindDirective.attributeName;
+                        if (attrName) {
+                            this.#optionsDirectives[attrName] = bindDirective;
+                        }
                     }
                 }
             }
@@ -10575,7 +10906,10 @@
                 // v-intersection
                 context.attribute.name === StandardDirectiveName.V_INTERSECTION ||
                 // v-performance
-                context.attribute.name === StandardDirectiveName.V_PERFORMANCE) {
+                context.attribute.name === StandardDirectiveName.V_PERFORMANCE ||
+                // v-component, v-component.<modifier>
+                context.attribute.name === StandardDirectiveName.V_COMPONENT ||
+                context.attribute.name.startsWith(StandardDirectiveName.V_COMPONENT + ".")) {
                 return true;
             }
             return false;
@@ -10626,6 +10960,11 @@
             if (context.attribute.name === StandardDirectiveName.V_PERFORMANCE) {
                 return new VPerformanceDirective(context);
             }
+            // v-component, v-component.<modifier>
+            if (context.attribute.name === StandardDirectiveName.V_COMPONENT ||
+                context.attribute.name.startsWith(StandardDirectiveName.V_COMPONENT + ".")) {
+                return new VComponentDirective(context);
+            }
             throw new Error(`The attribute "${context.attribute.name}" cannot be parsed by ${this.name}.`);
         }
     }
@@ -10859,12 +11198,18 @@
         }
         /**
          * Mounts the application.
-         * @param selectors The CSS selectors to identify the root element.
-         */
-        mount(selectors) {
-            const element = document.querySelector(selectors);
-            if (!element) {
-                throw new Error(`Element not found for selectors: ${selectors}`);
+         * @param target The CSS selector string or HTMLElement to mount the application to.
+         */
+        mount(target) {
+            let element;
+            if (typeof target === 'string') {
+                element = document.querySelector(target);
+                if (!element) {
+                    throw new Error(`Element not found for selector: ${target}`);
+                }
+            }
+            else {
+                element = target;
             }
             // Clean the element by removing unnecessary whitespace text nodes
             this.#cleanElement(element);
@@ -10878,6 +11223,14 @@
             this.#vNode.update();
             this.#logger.info('Application mounted.');
         }
+        /**
+         * Creates a child application instance with the same registries.
+         * @param options The application options for the child.
+         * @returns The created child application instance.
+         */
+        createChildApp(options) {
+            return new VApplication(options, this.#directiveParserRegistry, this.#componentRegistry);
+        }
         /**
          * Cleans the element by removing unnecessary whitespace text nodes.
          * @param element The element to clean.
@@ -11114,6 +11467,8 @@
         }
     }
 
+    exports.VComponent = VComponent;
+    exports.VComponentRegistry = VComponentRegistry;
     exports.VDOM = VDOM;
 
 }));