@mintjamsinc/ichigojs 0.1.9 → 0.1.11

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.
@@ -74,10 +163,14 @@
         StandardDirectiveName["V_BIND"] = "v-bind";
         /** Two-way data binding directives. */
         StandardDirectiveName["V_MODEL"] = "v-model";
-        /** Slot content insertion directives. */
+        /** Resize observer directives. */
         StandardDirectiveName["V_RESIZE"] = "v-resize";
         /** Intersection observer directives. */
         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!
@@ -6644,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})`;
@@ -7115,6 +7214,226 @@
         }
     }
 
+    // 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() {
+            // Component rendering is handled through onMounted lifecycle hook
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get templatize() {
+            return false;
+        }
+        /**
+         * @inheritdoc
+         */
+        get dependentIdentifiers() {
+            return [];
+        }
+        /**
+         * @inheritdoc
+         */
+        get onMount() {
+            return () => {
+                this.renderComponent();
+            };
+        }
+        /**
+         * @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) {
+                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.
@@ -7593,7 +7912,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;
+                        }
                     }
                 }
             }
@@ -9927,6 +10250,220 @@
         }
     }
 
+    // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+    /**
+     * Directive for observing performance metrics using PerformanceObserver.
+     * The `v-performance` directive allows you to monitor various performance entries.
+     *
+     * Example usage:
+     *     <div v-performance="handlePerformance">Performance monitoring</div>
+     *     <div v-performance="handlePerformance" :options.performance="{entryTypes: ['measure']}">Performance monitoring</div>
+     *
+     * By default (without options), it observes 'mark' and 'measure' entry types.
+     *
+     * The handler receives PerformanceObserverEntryList, PerformanceObserver, options (with droppedEntriesCount), and $ctx as arguments:
+     *     handlePerformance(entries, observer, options, $ctx) {
+     *       entries.getEntries().forEach(entry => {
+     *         console.log(`${entry.name}: ${entry.duration}ms`);
+     *       });
+     *       if (options?.droppedEntriesCount) {
+     *         console.log(`Dropped entries: ${options.droppedEntriesCount}`);
+     *       }
+     *     }
+     *
+     * Options can be provided via :options or :options.performance attribute:
+     *     :options="{entryTypes: ['measure', 'mark']}"
+     *     :options.performance="{type: 'navigation', buffered: true}"
+     *
+     * This directive is useful for performance monitoring, profiling, and identifying
+     * performance bottlenecks in your application.
+     */
+    class VPerformanceDirective {
+        /**
+         * The virtual node to which this directive is applied.
+         */
+        #vNode;
+        /**
+         * A list of variable and function names used in the directive's expression.
+         */
+        #dependentIdentifiers;
+        /**
+         * The performance handler wrapper function.
+         */
+        #handlerWrapper;
+        /**
+         * The PerformanceObserver instance.
+         */
+        #performanceObserver;
+        /**
+         * @param context The context for parsing the directive.
+         */
+        constructor(context) {
+            this.#vNode = context.vNode;
+            // Parse the expression to extract identifiers and create the handler wrapper
+            const expression = context.attribute.value;
+            if (expression) {
+                this.#dependentIdentifiers = ExpressionUtils.extractIdentifiers(expression, context.vNode.vApplication.functionDependencies);
+                this.#handlerWrapper = this.#createPerformanceHandlerWrapper(expression);
+            }
+            // Remove the directive attribute from the element
+            this.#vNode.node.removeAttribute(context.attribute.name);
+        }
+        /**
+         * @inheritdoc
+         */
+        get name() {
+            return StandardDirectiveName.V_PERFORMANCE;
+        }
+        /**
+         * @inheritdoc
+         */
+        get vNode() {
+            return this.#vNode;
+        }
+        /**
+         * @inheritdoc
+         */
+        get needsAnchor() {
+            return false;
+        }
+        /**
+         * @inheritdoc
+         */
+        get bindingsPreparer() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get domUpdater() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get templatize() {
+            return false;
+        }
+        /**
+         * @inheritdoc
+         */
+        get dependentIdentifiers() {
+            return this.#dependentIdentifiers ?? [];
+        }
+        /**
+         * @inheritdoc
+         */
+        get onMount() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onMounted() {
+            if (!this.#handlerWrapper) {
+                return undefined;
+            }
+            const handler = this.#handlerWrapper;
+            return () => {
+                // Get options from :options.performance or :options directive
+                let optionsDirective = this.#vNode.directiveManager?.optionsDirective('performance');
+                // Evaluate the options expression
+                let options;
+                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);
+                    options = func(...values);
+                }
+                // Create PerformanceObserver and start observing
+                // Note: The callback receives a third argument 'options' with droppedEntriesCount in modern browsers
+                // TypeScript's type definition only includes 2 arguments, so we use type assertion
+                this.#performanceObserver = new PerformanceObserver(((...args) => {
+                    const [entries, observer, callbackOptions] = args;
+                    handler(entries, observer, callbackOptions);
+                }));
+                // If no options provided, use default: observe marks and measures
+                if (!options) {
+                    options = { entryTypes: ['mark', 'measure'] };
+                }
+                // Start observing with options
+                this.#performanceObserver.observe(options);
+            };
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUpdate() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUpdated() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUnmount() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUnmounted() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        destroy() {
+            // Disconnect the PerformanceObserver when the directive is destroyed
+            if (this.#performanceObserver) {
+                this.#performanceObserver.disconnect();
+                this.#performanceObserver = undefined;
+            }
+        }
+        /**
+         * Creates a wrapper function for performance handlers.
+         * @param expression The expression string to evaluate.
+         * @returns A function that handles the performance event.
+         */
+        #createPerformanceHandlerWrapper(expression) {
+            const identifiers = this.#dependentIdentifiers ?? [];
+            const vNode = this.#vNode;
+            // Return a function that handles the performance event with proper scope
+            return (entries, observer, options) => {
+                const bindings = vNode.bindings;
+                const $ctx = {
+                    element: vNode.node,
+                    vnode: vNode,
+                    userData: vNode.userData
+                };
+                // If the expression is just a method name, call it with bindings as 'this'
+                const trimmedExpr = expression.trim();
+                if (identifiers.includes(trimmedExpr) && typeof bindings?.get(trimmedExpr) === 'function') {
+                    const methodName = trimmedExpr;
+                    const originalMethod = bindings?.get(methodName);
+                    // Call the method with bindings as 'this' context
+                    // Pass entries, observer, options, and $ctx as arguments
+                    return originalMethod(entries, observer, options, $ctx);
+                }
+                // For inline expressions, evaluate normally
+                // Note: inline expressions receive entries, observer, options, and $ctx as parameters
+                const values = identifiers.map(id => vNode.bindings?.get(id));
+                const args = [...identifiers, 'entries', 'observer', 'options', '$ctx'].join(", ");
+                const funcBody = `return (${expression});`;
+                const func = new Function(args, funcBody);
+                return func.call(bindings?.raw, ...values, entries, observer, options, $ctx);
+            };
+        }
+    }
+
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
     /**
      * Directive for observing element resize events using ResizeObserver.
@@ -10357,7 +10894,12 @@
                 // v-resize
                 context.attribute.name === StandardDirectiveName.V_RESIZE ||
                 // v-intersection
-                context.attribute.name === StandardDirectiveName.V_INTERSECTION) {
+                context.attribute.name === StandardDirectiveName.V_INTERSECTION ||
+                // 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;
@@ -10404,6 +10946,15 @@
             if (context.attribute.name === StandardDirectiveName.V_INTERSECTION) {
                 return new VIntersectionDirective(context);
             }
+            // v-performance
+            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}.`);
         }
     }
@@ -10637,12 +11188,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);
@@ -10656,6 +11213,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.
@@ -10892,6 +11457,8 @@
         }
     }
 
+    exports.VComponent = VComponent;
+    exports.VComponentRegistry = VComponentRegistry;
     exports.VDOM = VDOM;
 
 }));