@mintjamsinc/ichigojs 0.1.6 → 0.1.8

package/dist/ichigo.umd.js

@@ -59,6 +59,8 @@
         StandardDirectiveName["V_ON"] = "v-on";
         StandardDirectiveName["V_BIND"] = "v-bind";
         StandardDirectiveName["V_MODEL"] = "v-model";
+        StandardDirectiveName["V_RESIZE"] = "v-resize";
+        StandardDirectiveName["V_INTERSECTION"] = "v-intersection";
     })(StandardDirectiveName || (StandardDirectiveName = {}));
 
     // This file was generated. Do not modify manually!
@@ -6873,6 +6875,19 @@
         get isKey() {
             return (this.#attributeName === 'key');
         }
+        /**
+         * Indicates if this directive is binding the "options" attribute or any of its sub-properties (e.g., "options.intersection").
+         * The "options" attribute is special and is used for passing options to certain directives like VIntersectionDirective.
+         */
+        get isOptions() {
+            return (this.#attributeName === 'options' || this.#attributeName?.startsWith('options.') === true);
+        }
+        /**
+         * Gets the name of the attribute being bound (e.g., "src", "class", "options", "options.intersection").
+         */
+        get attributeName() {
+            return this.#attributeName;
+        }
         /**
          * Gets the original expression string from the directive.
          */
@@ -6925,8 +6940,8 @@
          * Renders the bound attribute by evaluating the expression and updating the DOM element.
          */
         #render() {
-            // If this directive is binding the "key" attribute, do nothing
-            if (this.isKey) {
+            // Do nothing for special attributes
+            if (this.isKey || this.isOptions) {
                 return;
             }
             const element = this.#vNode.node;
@@ -7370,16 +7385,47 @@
     }
 
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+    /**
+     * Manages directives associated with a virtual node (VNode).
+     * This class is responsible for parsing, storing, and managing the lifecycle of directives.
+     * It also provides access to bindings preparers and DOM updaters from the associated directives.
+     */
     class VDirectiveManager {
         /**
          * The virtual node to which this directive handler is associated.
          */
         #vNode;
+        /**
+         * The list of directives associated with the virtual node.
+         * This may be undefined if there are no directives.
+         */
         #directives;
+        /**
+         * The anchor comment node used for certain directives (e.g., v-if, v-for).
+         * This may be undefined if no directive requires an anchor.
+         */
         #anchorNode;
+        /**
+         * The list of bindings preparers from the associated directives.
+         * This may be undefined if no directive provides a bindings preparer.
+         */
         #bindingsPreparers;
+        /**
+         * The list of DOM updaters from the associated directives.
+         * This may be undefined if no directive provides a DOM updater.
+         */
         #domUpdaters;
+        /**
+         * The directive that binds the ":key" or "v-bind:key" attribute, if any.
+         * This directive is special and is used for optimizing rendering of lists.
+         * If no such directive exists, this is undefined.
+         */
         #keyDirective;
+        /**
+         * A cache of VBindDirectives for options specific to certain directives.
+         * The keys are directive names (e.g., 'options', 'options.intersection').
+         */
+        #optionsDirectives = {};
         constructor(vNode) {
             // Directives can only be associated with element nodes
             if (vNode.nodeType !== Node.ELEMENT_NODE) {
@@ -7437,6 +7483,35 @@
         get keyDirective() {
             return this.#keyDirective;
         }
+        /**
+         * Gets a record of VBindDirectives for options specific to certain directives.
+         * The keys are directive names (e.g., 'options', 'options.intersection').
+         */
+        get optionsDirectives() {
+            return this.#optionsDirectives;
+        }
+        /**
+         * Gets the VBindDirective for options specific to the given directive name.
+         * Searches in order: `:options.{directive}` -> `:options`
+         *
+         * @param directive The directive name (e.g., 'intersection', 'resize')
+         * @returns The VBindDirective instance or undefined
+         */
+        optionsDirective(directive) {
+            if (!this.#directives || this.#directives.length === 0) {
+                return undefined;
+            }
+            // Search for `:options.{directive}` or `v-bind:options.{directive}` first
+            const specificAttrName = `options.${directive}`;
+            if (this.#optionsDirectives[specificAttrName]) {
+                return this.#optionsDirectives[specificAttrName];
+            }
+            // Fallback: search for `:options` or `v-bind:options`
+            if (this.#optionsDirectives['options']) {
+                return this.#optionsDirectives['options'];
+            }
+            return undefined;
+        }
         /**
          * Cleans up any resources used by the directive handler.
          */
@@ -7496,6 +7571,10 @@
                     if (directive.name === StandardDirectiveName.V_BIND && directive.isKey) {
                         this.#keyDirective = directive;
                     }
+                    // If this is an options binding directive, cache it
+                    if (directive.name === StandardDirectiveName.V_BIND && directive.isOptions) {
+                        this.#optionsDirectives[directive.name] = directive;
+                    }
                 }
             }
             // Sort directives by priority: v-for > v-if > v-else-if > v-else > v-show > others
@@ -8983,6 +9062,209 @@
         }
     }
 
+    // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+    /**
+     * Directive for observing element intersection with viewport or ancestor elements using IntersectionObserver.
+     * The `v-intersection` directive allows you to respond to changes in an element's visibility.
+     *
+     * Example usage:
+     *     <div v-intersection="handleIntersection">Observable content</div>
+     *     <div v-intersection="handleIntersection" :options.intersection="{threshold: 0.5}">Observable content</div>
+     *
+     * The handler receives IntersectionObserverEntry array as the first argument and $ctx as the second:
+     *     handleIntersection(entries, $ctx) {
+     *       const entry = entries[0];
+     *       if (entry.isIntersecting) {
+     *         console.log('Element is visible!');
+     *       }
+     *     }
+     *
+     * Options can be provided via :options or :options.intersection attribute:
+     *     :options="{root: null, threshold: 0.5, rootMargin: '0px'}"
+     *     :options.intersection="{root: null, threshold: 0.5, rootMargin: '0px'}"
+     *
+     * This directive is useful for lazy-loading, infinite scrolling, animation triggers,
+     * and other features that depend on element visibility.
+     */
+    class VIntersectionDirective {
+        /**
+         * 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 intersection handler wrapper function.
+         */
+        #handlerWrapper;
+        /**
+         * The IntersectionObserver instance.
+         */
+        #intersectionObserver;
+        /**
+         * @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.#createIntersectionHandlerWrapper(expression);
+            }
+            // Remove the directive attribute from the element
+            this.#vNode.node.removeAttribute(context.attribute.name);
+        }
+        /**
+         * @inheritdoc
+         */
+        get name() {
+            return StandardDirectiveName.V_INTERSECTION;
+        }
+        /**
+         * @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 element = this.#vNode.node;
+            const handler = this.#handlerWrapper;
+            return () => {
+                // Get options from :options.intersection or :options directive
+                let optionsDirective = this.#vNode.directiveManager?.optionsDirective('intersection');
+                // 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 IntersectionObserver and start observing
+                this.#intersectionObserver = new IntersectionObserver((entries) => {
+                    handler(entries);
+                }, options);
+                this.#intersectionObserver.observe(element);
+            };
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUpdate() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUpdated() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUnmount() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUnmounted() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        destroy() {
+            // Disconnect the IntersectionObserver when the directive is destroyed
+            if (this.#intersectionObserver) {
+                this.#intersectionObserver.disconnect();
+                this.#intersectionObserver = undefined;
+            }
+        }
+        /**
+         * Creates a wrapper function for intersection handlers.
+         * @param expression The expression string to evaluate.
+         * @returns A function that handles the intersection event.
+         */
+        #createIntersectionHandlerWrapper(expression) {
+            const identifiers = this.#dependentIdentifiers ?? [];
+            const vNode = this.#vNode;
+            // Return a function that handles the intersection event with proper scope
+            return (entries) => {
+                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 as first argument and $ctx as second argument
+                    return originalMethod(entries, $ctx);
+                }
+                // For inline expressions, evaluate normally
+                // Note: inline expressions receive entries and $ctx as parameters
+                const values = identifiers.map(id => vNode.bindings?.get(id));
+                const args = [...identifiers, 'entries', '$ctx'].join(", ");
+                const funcBody = `return (${expression});`;
+                const func = new Function(args, funcBody);
+                return func.call(bindings?.raw, ...values, entries, $ctx);
+            };
+        }
+    }
+
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
     /**
      * Directive for two-way data binding on form input elements.
@@ -9308,8 +9590,8 @@
      *     @mounted="onMounted"   - Called after the element is inserted into the DOM
      *     @update="onUpdate"     - Called before the element is updated
      *     @updated="onUpdated"   - Called after the element is updated
-     *     @unmount="onUnmount"   - Called before the element is removed from the DOM
-     *     @unmounted="onUnmounted" - Called after the element is removed from the DOM
+     *     @unmount="onUnmount"   - Called before VNode cleanup begins
+     *     @unmounted="onUnmounted" - Called after VNode cleanup is complete (element reference still available)
      *
      * This directive is essential for handling user interactions and lifecycle events in your application.
      * Note that the methods referenced in the directive should be defined in the component's methods object.
@@ -9585,7 +9867,7 @@
             };
         }
         /**
-         * Creates a wrapper function for DOM event handlers (with event parameter).
+         * Creates a wrapper function for DOM event handlers (with event and $ctx parameters).
          * @param expression The expression string to evaluate.
          * @returns A function that handles the event.
          */
@@ -9595,21 +9877,210 @@
             // Return a function that handles the event with proper scope
             return (event) => {
                 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 event as first argument and $ctx as second argument
+                    return originalMethod(event, $ctx);
+                }
+                // For inline expressions, evaluate normally
+                // Note: inline expressions receive event and $ctx as parameters
+                const values = identifiers.map(id => vNode.bindings?.get(id));
+                const args = [...identifiers, 'event', '$ctx'].join(", ");
+                const funcBody = `return (${expression});`;
+                const func = new Function(args, funcBody);
+                return func.call(bindings?.raw, ...values, event, $ctx);
+            };
+        }
+    }
+
+    // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+    /**
+     * Directive for observing element resize events using ResizeObserver.
+     * The `v-resize` directive allows you to respond to changes in an element's size.
+     *
+     * Example usage:
+     *     <div v-resize="handleResize">Resizable content</div>
+     *
+     * The handler receives ResizeObserverEntry array as the first argument and $ctx as the second:
+     *     handleResize(entries, $ctx) {
+     *       const { width, height } = entries[0].contentRect;
+     *       console.log(`Size: ${width}x${height}`);
+     *     }
+     *
+     * This directive is useful for responsive layouts, charts, and other components
+     * that need to adapt to size changes.
+     */
+    class VResizeDirective {
+        /**
+         * 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 resize handler wrapper function.
+         */
+        #handlerWrapper;
+        /**
+         * The ResizeObserver instance.
+         */
+        #resizeObserver;
+        /**
+         * @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.#createResizeHandlerWrapper(expression);
+            }
+            // Remove the directive attribute from the element
+            this.#vNode.node.removeAttribute(context.attribute.name);
+        }
+        /**
+         * @inheritdoc
+         */
+        get name() {
+            return StandardDirectiveName.V_RESIZE;
+        }
+        /**
+         * @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 element = this.#vNode.node;
+            const handler = this.#handlerWrapper;
+            return () => {
+                // Create ResizeObserver and start observing
+                this.#resizeObserver = new ResizeObserver((entries) => {
+                    handler(entries);
+                });
+                this.#resizeObserver.observe(element);
+            };
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUpdate() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUpdated() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUnmount() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        get onUnmounted() {
+            return undefined;
+        }
+        /**
+         * @inheritdoc
+         */
+        destroy() {
+            // Disconnect the ResizeObserver when the directive is destroyed
+            if (this.#resizeObserver) {
+                this.#resizeObserver.disconnect();
+                this.#resizeObserver = undefined;
+            }
+        }
+        /**
+         * Creates a wrapper function for resize handlers.
+         * @param expression The expression string to evaluate.
+         * @returns A function that handles the resize event.
+         */
+        #createResizeHandlerWrapper(expression) {
+            const identifiers = this.#dependentIdentifiers ?? [];
+            const vNode = this.#vNode;
+            // Return a function that handles the resize event with proper scope
+            return (entries) => {
+                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
-                    // This allows the method to access and modify bindings properties via 'this'
-                    return originalMethod(event);
+                    // Pass entries as first argument and $ctx as second argument
+                    return originalMethod(entries, $ctx);
                 }
                 // For inline expressions, evaluate normally
+                // Note: inline expressions receive entries and $ctx as parameters
                 const values = identifiers.map(id => vNode.bindings?.get(id));
-                const args = identifiers.join(", ");
+                const args = [...identifiers, 'entries', '$ctx'].join(", ");
                 const funcBody = `return (${expression});`;
                 const func = new Function(args, funcBody);
-                return func.call(bindings?.raw, ...values, event);
+                return func.call(bindings?.raw, ...values, entries, $ctx);
             };
         }
     }
@@ -9839,7 +10310,11 @@
                 context.attribute.name.startsWith(":") ||
                 // v-model, v-model.<modifier>
                 context.attribute.name === StandardDirectiveName.V_MODEL ||
-                context.attribute.name.startsWith(StandardDirectiveName.V_MODEL + ".")) {
+                context.attribute.name.startsWith(StandardDirectiveName.V_MODEL + ".") ||
+                // v-resize
+                context.attribute.name === StandardDirectiveName.V_RESIZE ||
+                // v-intersection
+                context.attribute.name === StandardDirectiveName.V_INTERSECTION) {
                 return true;
             }
             return false;
@@ -9878,6 +10353,14 @@
                 context.attribute.name.startsWith(StandardDirectiveName.V_MODEL + ".")) {
                 return new VModelDirective(context);
             }
+            // v-resize
+            if (context.attribute.name === StandardDirectiveName.V_RESIZE) {
+                return new VResizeDirective(context);
+            }
+            // v-intersection
+            if (context.attribute.name === StandardDirectiveName.V_INTERSECTION) {
+                return new VIntersectionDirective(context);
+            }
             throw new Error(`The attribute "${context.attribute.name}" cannot be parsed by ${this.name}.`);
         }
     }