@mintjamsinc/ichigojs 0.1.10 → 0.1.12

package/dist/ichigo.esm.js

@@ -1,5 +1,94 @@
 // 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.
@@ -74,6 +163,8 @@ var StandardDirectiveName;
     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!
@@ -6640,10 +6731,16 @@ class ExpressionUtils {
                 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})`;
@@ -7111,6 +7208,236 @@ class VBindDirective {
     }
 }
 
+// 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.
@@ -7589,7 +7916,11 @@ class VDirectiveManager {
                 }
                 // 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;
+                    }
                 }
             }
         }
@@ -10569,7 +10900,10 @@ class VStandardDirectiveParser {
             // 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;
@@ -10620,6 +10954,11 @@ class VStandardDirectiveParser {
         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}.`);
     }
 }
@@ -10853,12 +11192,18 @@ class VApplication {
     }
     /**
      * 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);
@@ -10872,6 +11217,14 @@ class VApplication {
         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.
@@ -11108,5 +11461,5 @@ class VDOM {
     }
 }
 
-export { VDOM };
+export { VComponent, VComponentRegistry, VDOM };
 //# sourceMappingURL=ichigo.esm.js.map