@mintjamsinc/ichigojs 0.1.9 → 0.1.11

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.
@@ -68,10 +157,14 @@ var StandardDirectiveName;
     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!
@@ -6638,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})`;
@@ -7109,6 +7208,226 @@ 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() {
+        // 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.
@@ -7587,7 +7906,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;
+                    }
                 }
             }
         }
@@ -9921,6 +10244,220 @@ class VOnDirective {
     }
 }
 
+// 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.
@@ -10351,7 +10888,12 @@ class VStandardDirectiveParser {
             // 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;
@@ -10398,6 +10940,15 @@ class VStandardDirectiveParser {
         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}.`);
     }
 }
@@ -10631,12 +11182,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);
@@ -10650,6 +11207,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.
@@ -10886,5 +11451,5 @@ class VDOM {
     }
 }
 
-export { VDOM };
+export { VComponent, VComponentRegistry, VDOM };
 //# sourceMappingURL=ichigo.esm.js.map