@mintjamsinc/ichigojs 0.1.0 → 0.1.2

package/dist/ichigo.esm.js

@@ -6759,7 +6759,7 @@ class VBindDirective {
     /**
      * A list of variable and function names used in the directive's expression.
      */
-    #identifiers;
+    #dependentIdentifiers;
     /**
      * A function that evaluates the directive's expression.
      * It returns the evaluated value of the expression.
@@ -6773,6 +6773,16 @@ class VBindDirective {
      * The original expression string from the directive.
      */
     #expression;
+    /**
+     * The set of class names managed by this directive (used when binding to the "class" attribute).
+     * This helps in tracking which classes were added by this directive to avoid conflicts with other class manipulations.
+     */
+    #managedClasses = new Set();
+    /**
+     * The set of style properties managed by this directive (used when binding to the "style" attribute).
+     * This helps in tracking which styles were added by this directive to avoid conflicts with other style manipulations.
+     */
+    #managedStyles = new Set();
     /**
      * @param context The context for parsing the directive.
      */
@@ -6790,7 +6800,7 @@ class VBindDirective {
         // Parse the expression to extract identifiers and create the evaluator
         this.#expression = context.attribute.value;
         if (this.#expression) {
-            this.#identifiers = ExpressionUtils.extractIdentifiers(this.#expression, context.vNode.vApplication.functionDependencies);
+            this.#dependentIdentifiers = ExpressionUtils.extractIdentifiers(this.#expression, context.vNode.vApplication.functionDependencies);
             this.#evaluate = this.#createEvaluator(this.#expression);
         }
         // Remove the directive attribute from the element
@@ -6824,11 +6834,11 @@ class VBindDirective {
      * @inheritdoc
      */
     get domUpdater() {
-        const identifiers = this.#identifiers ?? [];
+        const identifiers = this.#dependentIdentifiers ?? [];
         const render = () => this.#render();
         // Create an updater that handles the attribute binding
         const updater = {
-            get identifiers() {
+            get dependentIdentifiers() {
                 return identifiers;
             },
             applyToDOM() {
@@ -6837,6 +6847,18 @@ class VBindDirective {
         };
         return updater;
     }
+    /**
+     * @inheritdoc
+     */
+    get templatize() {
+        return false;
+    }
+    /**
+     * @inheritdoc
+     */
+    get dependentIdentifiers() {
+        return this.#dependentIdentifiers ?? [];
+    }
     /**
      * Indicates if this directive is binding the "key" attribute.
      * The "key" attribute is special and is used for optimizing rendering of lists.
@@ -6894,39 +6916,54 @@ class VBindDirective {
      * Updates the class attribute with support for string, array, and object formats.
      */
     #updateClass(element, value) {
-        // Clear existing classes
-        element.className = '';
+        // Determine the new set of classes to apply
+        let newClasses = [];
         if (typeof value === 'string') {
-            element.className = value;
+            newClasses = value.split(/\s+/).filter(Boolean);
         }
         else if (Array.isArray(value)) {
-            element.className = value.filter(Boolean).join(' ');
+            newClasses = value.filter(Boolean);
         }
         else if (typeof value === 'object' && value !== null) {
-            const classes = Object.keys(value).filter(key => value[key]);
-            element.className = classes.join(' ');
+            newClasses = Object.keys(value).filter(key => value[key]);
         }
+        // Remove previously managed classes
+        this.#managedClasses.forEach(cls => element.classList.remove(cls));
+        // Add newly managed classes
+        newClasses.forEach(cls => element.classList.add(cls));
+        // Update managed classes list
+        this.#managedClasses = new Set(newClasses);
     }
     /**
      * Updates the style attribute with support for object format.
      */
     #updateStyle(element, value) {
+        let newStyles = [];
         if (typeof value === 'string') {
+            // Directly set the style string
             element.style.cssText = value;
+            // Extract managed properties
+            newStyles = value.split(';').map(s => s.split(':')[0].trim()).filter(Boolean);
         }
         else if (typeof value === 'object' && value !== null) {
-            // Clear existing inline styles
-            element.style.cssText = '';
+            // Remove all previously managed properties
+            this.#managedStyles.forEach(prop => {
+                element.style.removeProperty(this.#camelToKebab(prop));
+            });
+            // Add newly managed properties
             for (const key in value) {
                 if (Object.prototype.hasOwnProperty.call(value, key)) {
                     const cssKey = this.#camelToKebab(key);
                     const cssValue = value[key];
                     if (cssValue != null) {
                         element.style.setProperty(cssKey, String(cssValue));
+                        newStyles.push(key);
                     }
                 }
             }
         }
+        // Update managed properties list
+        this.#managedStyles = new Set(newStyles);
     }
     /**
      * Converts camelCase to kebab-case for CSS properties.
@@ -6986,7 +7023,7 @@ class VBindDirective {
      * @returns A function that evaluates the directive's condition.
      */
     #createEvaluator(expression) {
-        const identifiers = this.#identifiers ?? [];
+        const identifiers = this.#dependentIdentifiers ?? [];
         const args = identifiers.join(", ");
         const funcBody = `return (${expression});`;
         // Create a dynamic function with the identifiers as parameters
@@ -6994,7 +7031,7 @@ class VBindDirective {
         // Return a function that calls the dynamic function with the current values from the virtual node's bindings
         return () => {
             // Gather the current values of the identifiers from the bindings
-            const values = identifiers.map(id => this.#vNode.bindings?.[id]);
+            const values = identifiers.map(id => this.#vNode.bindings?.get(id));
             // Call the dynamic function with the gathered values and return the result as a boolean
             return func(...values);
         };
@@ -7003,304 +7040,273 @@ class VBindDirective {
 
 // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
 /**
- * Context for managing related conditional directives (v-if, v-else-if, v-else).
+ * Utility class for creating reactive proxies that automatically track changes.
  */
-class VConditionalDirectiveContext {
-    #directives = [];
+class ReactiveProxy {
     /**
-     * Adds a directive (v-else-if or v-else) to the conditional context.
-     * @param directive The directive to add.
+     * A WeakMap to store the proxy for each target object and path combination.
+     * This prevents creating multiple proxies for the same object accessed from different paths.
      */
-    addDirective(directive) {
-        this.#directives.push(directive);
-    }
+    static proxyCache = new WeakMap();
     /**
-     * Checks if any preceding directive's condition is met.
-     * This is used to determine if a v-else-if or v-else directive should be rendered.
-     * @param directive The directive to check against.
-     * @returns True if any preceding directive's condition is met, otherwise false.
+     * Creates a reactive proxy for the given object.
+     * The proxy will call the onChange callback whenever a property is modified.
+     *
+     * @param target The object to make reactive.
+     * @param onChange Callback function to call when the object changes. Receives the full path of the changed property.
+     * @param path The current path in the object tree (used internally for nested objects).
+     * @returns A reactive proxy of the target object.
      */
-    isPrecedingConditionMet(directive) {
-        const index = this.#directives.indexOf(directive);
-        if (index === -1) {
-            throw new Error("Directive not found in context.");
+    static create(target, onChange, path = '') {
+        // If the target is not an object or is null, return it as-is
+        if (typeof target !== 'object' || target === null) {
+            return target;
         }
-        // Check if all previous directives are met
-        for (let i = 0; i < index; i++) {
-            const d = this.#directives[i];
-            if (d.conditionIsMet === true) {
-                return true;
+        // Check if we already have a proxy for this target with this path
+        let pathMap = this.proxyCache.get(target);
+        if (pathMap) {
+            const existingProxy = pathMap.get(path);
+            if (existingProxy) {
+                return existingProxy;
             }
         }
-        return false;
+        else {
+            pathMap = new Map();
+            this.proxyCache.set(target, pathMap);
+        }
+        // Create the proxy with path captured in closure
+        const proxy = new Proxy(target, {
+            get(obj, key) {
+                const value = Reflect.get(obj, key);
+                // If the value is an object or array, make it reactive too
+                if (typeof value === 'object' && value !== null) {
+                    // Build the nested path
+                    const keyStr = String(key);
+                    const nestedPath = path ? (Array.isArray(obj) ? `${path}[${keyStr}]` : `${path}.${keyStr}`) : keyStr;
+                    return ReactiveProxy.create(value, onChange, nestedPath);
+                }
+                // For arrays, intercept mutation methods
+                if (Array.isArray(obj) && typeof value === 'function') {
+                    const arrayMutationMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
+                    if (arrayMutationMethods.includes(key)) {
+                        return function (...args) {
+                            const result = value.apply(this, args);
+                            onChange(path || undefined);
+                            return result;
+                        };
+                    }
+                }
+                return value;
+            },
+            set(obj, key, value) {
+                const oldValue = Reflect.get(obj, key);
+                const result = Reflect.set(obj, key, value);
+                // Only trigger onChange if the value actually changed
+                if (oldValue !== value) {
+                    const keyStr = String(key);
+                    const fullPath = path ? (Array.isArray(obj) ? `${path}[${keyStr}]` : `${path}.${keyStr}`) : keyStr;
+                    onChange(fullPath);
+                }
+                return result;
+            },
+            deleteProperty(obj, key) {
+                const result = Reflect.deleteProperty(obj, key);
+                const keyStr = String(key);
+                const fullPath = path ? (Array.isArray(obj) ? `${path}[${keyStr}]` : `${path}.${keyStr}`) : keyStr;
+                onChange(fullPath);
+                return result;
+            }
+        });
+        // Cache the proxy for this path
+        pathMap.set(path, proxy);
+        return proxy;
     }
-}
-
-// Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
-class VConditionalDirective {
     /**
-     * The virtual node to which this directive is applied.
+     * Checks if the given object is a reactive proxy.
+     *
+     * @param obj The object to check.
+     * @returns True if the object is a reactive proxy, false otherwise.
      */
-    #vNode;
+    static isReactive(obj) {
+        return this.proxyCache.has(obj);
+    }
     /**
-     * A list of variable and function names used in the directive's expression.
-     * This may be undefined if the directive does not have an expression (e.g., v-else).
-     */
-    #identifiers;
-    /*
-     * A function that evaluates the directive's condition.
-     * It returns true if the condition is met, otherwise false.
-     * This may be undefined if the directive does not have an expression (e.g., v-else).
+     * Unwraps a reactive proxy to get the original object.
+     * If the object is not a proxy, returns it as-is.
+     *
+     * @param obj The object to unwrap.
+     * @returns The original object.
      */
-    #evaluate;
+    static unwrap(obj) {
+        // This is a simplified implementation
+        // In a full implementation, we'd need to store a reverse mapping
+        return obj;
+    }
+}
+
+// Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+/**
+ * A dictionary representing bindings for a virtual node.
+ * The key is the binding name, and the value is the binding value.
+ * Supports hierarchical lookup through parent bindings.
+ */
+class VBindings {
     /**
-     * The context for managing related conditional directives (v-if, v-else-if, v-else).
+     * The parent bindings, if any.
      */
-    #conditionalContext;
+    #parent;
     /**
-     * @param context The context for parsing the directive.
+     * The key is the binding name, and the value is the binding value.
      */
-    constructor(context) {
-        this.#vNode = context.vNode;
-        // Parse the expression to extract identifiers and create the evaluator
-        const expression = context.attribute.value;
-        if (expression) {
-            this.#identifiers = ExpressionUtils.extractIdentifiers(expression, context.vNode.vApplication.functionDependencies);
-            this.#evaluate = this.#createEvaluator(expression);
-        }
-        // Remove the directive attribute from the element
-        this.#vNode.node.removeAttribute(context.attribute.name);
-        // Initialize the conditional context for managing related directives
-        this.#conditionalContext = this.#initializeConditionalContext();
-        this.#conditionalContext.addDirective(this);
-    }
+    #local;
     /**
-     * @inheritdoc
+     * The change tracker, if any.
      */
-    get vNode() {
-        return this.#vNode;
-    }
+    #onChange;
     /**
-     * @inheritdoc
+     * The set of changed identifiers.
      */
-    get needsAnchor() {
-        return true;
-    }
+    #changes = new Set();
     /**
-     * @inheritdoc
+     * Cache for array lengths to detect length changes when the same object reference is used.
      */
-    get bindingsPreparer() {
-        return undefined;
-    }
+    #lengthCache = new Map();
     /**
-     * @inheritdoc
+     * Creates a new instance of VBindings.
+     * @param parent The parent bindings, if any.
      */
-    get domUpdater() {
-        const identifiers = this.#identifiers ?? [];
-        const render = () => this.#render();
-        // Create an updater that handles the conditional rendering
-        const updater = {
-            get identifiers() {
-                return identifiers;
+    constructor(args = {}) {
+        this.#parent = args.parent;
+        this.#onChange = args.onChange;
+        this.#local = new Proxy({}, {
+            get: (obj, key) => {
+                if (Reflect.has(obj, key)) {
+                    return Reflect.get(obj, key);
+                }
+                return this.#parent?.raw[key];
             },
-            applyToDOM() {
-                render();
+            set: (obj, key, value) => {
+                let target = obj;
+                if (!Reflect.has(target, key)) {
+                    for (let parent = this.#parent; parent; parent = parent.#parent) {
+                        if (Reflect.has(parent.#local, key)) {
+                            target = parent.#local;
+                            break;
+                        }
+                    }
+                }
+                let newValue = value;
+                if (typeof value === 'object' && value !== null) {
+                    // Wrap objects/arrays with reactive proxy, tracking the root key
+                    newValue = ReactiveProxy.create(value, (changedPath) => {
+                        let path = '';
+                        for (const part of changedPath?.split('.') || []) {
+                            path = path ? `${path}.${part}` : part;
+                            this.#changes.add(path);
+                        }
+                        this.#onChange?.(changedPath);
+                    }, key);
+                }
+                const oldValue = Reflect.get(target, key);
+                const result = Reflect.set(target, key, newValue);
+                // Detect changes
+                let hasChanged = oldValue !== newValue;
+                // Special handling for arrays: check length changes even if same object reference
+                if (!hasChanged && Array.isArray(newValue)) {
+                    const cachedLength = this.#lengthCache.get(key);
+                    const currentLength = newValue.length;
+                    if (cachedLength !== undefined && cachedLength !== currentLength) {
+                        hasChanged = true;
+                    }
+                    this.#lengthCache.set(key, currentLength);
+                }
+                if (hasChanged) {
+                    this.#changes.add(key);
+                    this.#onChange?.(key);
+                }
+                return result;
+            },
+            deleteProperty: (obj, key) => {
+                const result = Reflect.deleteProperty(obj, key);
+                this.#changes.add(key);
+                this.#onChange?.(key);
+                return result;
             }
-        };
-        return updater;
+        });
     }
     /**
-     * The context for managing related conditional directives (v-if, v-else-if, v-else).
+     * Gets the raw bindings.
+     * If a key is not found locally, it searches parent bindings recursively.
      */
-    get conditionalContext() {
-        return this.#conditionalContext;
+    get raw() {
+        return this.#local;
     }
     /**
-     * Indicates whether the condition for this directive is currently met.
-     * For v-if and v-else-if, this depends on the evaluation of their expressions.
-     * For v-else, this is always true.
+     * Indicates whether there are any changed identifiers.
      */
-    get conditionIsMet() {
-        if (!this.#evaluate) {
-            // No expression means always true (e.g., v-else)
+    get hasChanges() {
+        if (this.#parent?.hasChanges) {
             return true;
         }
-        return this.#evaluate();
+        return this.#changes.size > 0;
     }
     /**
-     * @inheritdoc
+     * Gets the list of changed identifiers.
      */
-    destroy() {
-        // Default implementation does nothing. Override in subclasses if needed.
+    get changes() {
+        const changes = new Set(this.#parent?.changes || []);
+        this.#changes.forEach(id => changes.add(id));
+        return Array.from(changes);
     }
     /**
-     * Renders the node based on the evaluation of the directive's condition.
-     * Inserts or removes the node from the DOM as needed.
+     * Indicates whether this is the root bindings (i.e., has no parent).
      */
-    #render() {
-        // Check if any preceding directive's condition is met
-        if (this.#conditionalContext.isPrecedingConditionMet(this)) {
-            // Previous condition met, ensure node is removed
-            this.#removedNode();
-            return;
-        }
-        if (!this.#evaluate) {
-            // No expression means always true (e.g., v-else)
-            this.#insertNode();
-            return;
-        }
-        // Evaluate the condition and insert or remove the node accordingly
-        const shouldRender = this.#evaluate();
-        if (shouldRender) {
-            this.#insertNode();
-        }
-        else {
-            this.#removedNode();
-        }
+    get isRoot() {
+        return !this.#parent;
     }
     /**
-     * Inserts the node into the DOM at the position marked by the anchor node, if any.
-     * If there is no anchor node, the node is inserted as a child of its parent node.
-     * If the node is already in the DOM, no action is taken.
+     * Clears the set of changed identifiers.
      */
-    #insertNode() {
-        if (this.#vNode.isInDOM) {
-            // Already in DOM, no action needed
-            return;
-        }
-        if (this.#vNode?.anchorNode) {
-            // Insert after the anchor node
-            this.#vNode.anchorNode.parentNode?.insertBefore(this.#vNode.node, this.#vNode.anchorNode.nextSibling);
-        }
-        else if (this.#vNode.parentVNode) {
-            // Append to the parent node
-            const parentElement = this.#vNode.parentVNode.node;
-            parentElement.appendChild(this.#vNode.node);
-        }
-        else {
-            // No anchor or parent VNode available
-            throw new Error("Cannot insert node: No anchor or parent VNode available.");
-        }
+    clearChanges() {
+        this.#changes.clear();
     }
     /**
-     * Removes the node from the DOM.
-     * If the node is not in the DOM, no action is taken.
+     * Sets a binding value.
+     * @param key The binding name.
+     * @param value The binding value.
      */
-    #removedNode() {
-        if (!this.#vNode.isInDOM) {
-            // Already removed from DOM, no action needed
-            return;
-        }
-        this.#vNode.node.parentNode?.removeChild(this.#vNode.node);
+    set(key, value) {
+        this.#local[key] = value;
     }
     /**
-     * Creates a function to evaluate the directive's condition.
-     * @param expression The expression string to evaluate.
-     * @returns A function that evaluates the directive's condition.
+     * Gets a binding value.
+     * @param key The binding name.
+     * @returns The binding value, or undefined if not found.
      */
-    #createEvaluator(expression) {
-        const identifiers = this.#identifiers ?? [];
-        const args = identifiers.join(", ");
-        const funcBody = `return (${expression});`;
-        // Create a dynamic function with the identifiers as parameters
-        const func = new Function(args, funcBody);
-        // Return a function that calls the dynamic function with the current values from the virtual node's bindings
-        return () => {
-            // Gather the current values of the identifiers from the bindings
-            const values = identifiers.map(id => this.#vNode.bindings?.[id]);
-            // Call the dynamic function with the gathered values and return the result as a boolean
-            return Boolean(func(...values));
-        };
+    get(key) {
+        return this.#local[key];
     }
     /**
-     * Initializes the conditional context for managing related directives.
+     * Checks if a binding exists.
+     * @param key The binding name.
+     * @param recursive Whether to search parent bindings. Default is true.
+     * @returns True if the binding exists, false otherwise.
      */
-    #initializeConditionalContext() {
-        // Create a new context if this is a v-if directive
-        if (this.name === StandardDirectiveName.V_IF) {
-            return new VConditionalDirectiveContext();
+    has(key, recursive = true) {
+        if (key in this.#local) {
+            return true;
         }
-        // Link to the existing conditional context from the preceding v-if or v-else-if directive
-        const precedingDirective = this.vNode.previousSibling?.directiveManager?.directives?.find(d => d.name === StandardDirectiveName.V_IF || d.name === StandardDirectiveName.V_ELSE_IF);
-        if (!precedingDirective) {
-            throw new Error("preceding v-if or v-else-if directive not found.");
+        if (!recursive) {
+            return false;
         }
-        // Cast to VConditionalDirective to access conditionalContext
-        const conditionalContext = precedingDirective.conditionalContext;
-        return conditionalContext;
-    }
-}
-
-// Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
-/**
- * Directive for conditional rendering in the virtual DOM.
- * This directive renders an element if the preceding v-if or v-else-if directive evaluated to false.
- * For example:
- *     <div v-else>This div is rendered if the previous v-if or v-else-if was false.</div>
- * The element and its children are included in the DOM only if the preceding v-if or v-else-if expression evaluates to false.
- * If the preceding expression is true, this element and its children are not rendered.
- * This directive must be used immediately after a v-if or v-else-if directive.
- */
-class VElseDirective extends VConditionalDirective {
-    /**
-     * @param context The context for parsing the directive.
-     */
-    constructor(context) {
-        super(context);
-    }
-    /**
-     * @inheritdoc
-     */
-    get name() {
-        return StandardDirectiveName.V_ELSE;
-    }
-}
-
-// Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
-/**
- * Directive for conditional rendering in the virtual DOM.
- * This directive renders an element based on a boolean expression, but only if preceding v-if or v-else-if directives were false.
- * For example:
- *     <div v-else-if="isAlternativeVisible">This div is conditionally rendered.</div>
- * The element and its children are included in the DOM only if the expression evaluates to true AND no preceding condition was met.
- * This directive must be used after a v-if or another v-else-if directive.
- */
-class VElseIfDirective extends VConditionalDirective {
-    /**
-     * @param context The context for parsing the directive.
-     */
-    constructor(context) {
-        super(context);
-    }
-    /**
-     * @inheritdoc
-     */
-    get name() {
-        return StandardDirectiveName.V_ELSE_IF;
-    }
-}
-
-// Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
-class BindingsUtils {
-    /**
-     * Gets the identifiers that have changed between two sets of bindings.
-     * @param oldBindings The old set of bindings.
-     * @param newBindings The new set of bindings.
-     * @returns An array of identifiers that have changed.
-     */
-    static getChangedIdentifiers(oldBindings, newBindings) {
-        const changed = [];
-        for (const key of Object.keys(newBindings)) {
-            if (!Object.hasOwn(oldBindings, key) || oldBindings[key] !== newBindings[key]) {
-                changed.push(key);
-            }
-        }
-        for (const key of Object.keys(oldBindings)) {
-            if (!Object.hasOwn(newBindings, key)) {
-                changed.push(key);
-            }
-        }
-        return Array.from(new Set(changed));
+        return this.#parent?.has(key) ?? false;
+    }
+    /**
+     * Removes a local binding.
+     * @param key The binding name.
+     */
+    remove(key) {
+        delete this.#local[key];
     }
 }
 
@@ -7390,9 +7396,32 @@ class VDirectiveManager {
     }
     #parseDirectives() {
         const element = this.#vNode.node;
+        // Collect relevant attributes
+        const attributes = [];
+        if (element.hasAttribute(StandardDirectiveName.V_FOR)) {
+            attributes.push(element.getAttributeNode(StandardDirectiveName.V_FOR));
+            for (const attr of Array.from(element.attributes)) {
+                if (['v-bind:key', ':key'].includes(attr.name)) {
+                    attributes.push(attr);
+                    break;
+                }
+            }
+        }
+        else if (element.hasAttribute(StandardDirectiveName.V_IF)) {
+            attributes.push(element.getAttributeNode(StandardDirectiveName.V_IF));
+        }
+        else if (element.hasAttribute(StandardDirectiveName.V_ELSE_IF)) {
+            attributes.push(element.getAttributeNode(StandardDirectiveName.V_ELSE_IF));
+        }
+        else if (element.hasAttribute(StandardDirectiveName.V_ELSE)) {
+            attributes.push(element.getAttributeNode(StandardDirectiveName.V_ELSE));
+        }
+        else {
+            attributes.push(...Array.from(element.attributes));
+        }
         // Parse directives from attributes
         const directives = [];
-        for (const attribute of Array.from(element.attributes)) {
+        for (const attribute of attributes) {
             // Create a context for parsing the directive
             const context = {
                 vNode: this.#vNode,
@@ -7479,7 +7508,7 @@ class VTextEvaluator {
             let result = text;
             evaluators.forEach((evaluator, i) => {
                 // Gather the current values of the identifiers from the bindings
-                const values = evaluator.ids.map(id => bindings[id]);
+                const values = evaluator.ids.map(id => bindings.get(id));
                 // Evaluate the expression and replace {{...}} in the text
                 result = result.replace(matches[i][0], String(evaluator.func(...values)));
             });
@@ -7511,6 +7540,11 @@ class VTextEvaluator {
 }
 
 // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+/**
+ * Represents a virtual node in the virtual DOM.
+ * A virtual node corresponds to a real DOM node and contains additional information for data binding and directives.
+ * This class is responsible for managing the state and behavior of the virtual node, including its bindings, directives, and child nodes.
+ */
 class VNode {
     /**
      * The application instance associated with this virtual node.
@@ -7543,11 +7577,10 @@ class VNode {
      */
     #bindings;
     /**
-     * The bindings preparer associated with this virtual node, if any.
-     * This is used to prepare the bindings before applying them to the DOM.
-     * This is optional and may be undefined if there are no preparers.
+     * The initial set of identifiers that this node depends on.
+     * This is optional and may be undefined if there are no dependent identifiers.
      */
-    #bindingsPreparer;
+    #initDependentIdentifiers;
     /**
      * An evaluator for text nodes that contain expressions in {{...}}.
      * This is used to dynamically update the text content based on data bindings.
@@ -7560,15 +7593,16 @@ class VNode {
      */
     #directiveManager;
     /**
-     * The list of dependencies for this virtual node.
-     * This is optional and may be undefined if there are no dependencies.
+     * The list of dependents for this virtual node.
+     * This is optional and may be undefined if there are no dependents.
      */
-    #dependencies;
+    #dependents;
     /**
      * The list of identifiers for this virtual node.
      * This includes variable and function names used in expressions.
+     * This is optional and may be undefined if there are no identifiers.
      */
-    #identifiers;
+    #dependentIdentifiers;
     /**
      * The list of preparable identifiers for this virtual node.
      * This includes variable and function names used in directive bindings preparers.
@@ -7591,7 +7625,8 @@ class VNode {
         this.#nodeName = args.node.nodeName;
         this.#parentVNode = args.parentVNode;
         this.#bindings = args.bindings;
-        this.#bindingsPreparer = args.bindingsPreparer;
+        this.#initDependentIdentifiers = args.dependentIdentifiers;
+        this.#parentVNode?.addChild(this);
         // If the node is a text node, check for expressions and create a text evaluator
         if (this.#nodeType === Node.TEXT_NODE) {
             const text = this.#node;
@@ -7603,23 +7638,24 @@ class VNode {
         // If the node is an element, initialize directives and child nodes
         if (this.#nodeType === Node.ELEMENT_NODE && this.#node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
             this.#node;
-            // Initialize directive manager
-            this.#directiveManager = new VDirectiveManager(this);
             // Initialize child virtual nodes
             this.#childVNodes = [];
-            // Recursively create VNode instances for child nodes
-            for (const childNode of Array.from(this.#node.childNodes)) {
-                this.#childVNodes.push(new VNode({
-                    node: childNode,
-                    vApplication: this.#vApplication,
-                    parentVNode: this,
-                    bindings: this.#bindings
-                }));
+            // Initialize directive manager
+            this.#directiveManager = new VDirectiveManager(this);
+            // For non-v-for elements, recursively create VNode instances for child nodes
+            if (!this.#directiveManager.directives?.some(d => d.templatize)) {
+                for (const childNode of Array.from(this.#node.childNodes)) {
+                    new VNode({
+                        node: childNode,
+                        vApplication: this.#vApplication,
+                        parentVNode: this
+                    });
+                }
             }
         }
         // If there is a parent virtual node, add this node as a dependency
         if (this.#parentVNode) {
-            this.#closers = this.#parentVNode.addDependency(this);
+            this.#closers = this.#parentVNode.addDependent(this);
         }
     }
     /**
@@ -7694,7 +7730,10 @@ class VNode {
      * The data bindings associated with this virtual node, if any.
      */
     get bindings() {
-        return this.#bindings;
+        if (this.#bindings) {
+            return this.#bindings;
+        }
+        return this.#parentVNode?.bindings;
     }
     /**
      * The directive manager associated with this virtual node.
@@ -7731,28 +7770,30 @@ class VNode {
      * The list of identifiers for this virtual node.
      * This includes variable and function names used in expressions.
      */
-    get identifiers() {
-        // If already computed, return the cached identifiers
-        if (this.#identifiers) {
-            return this.#identifiers;
+    get dependentIdentifiers() {
+        // If already computed, return the cached dependent identifiers
+        if (this.#dependentIdentifiers) {
+            return this.#dependentIdentifiers;
         }
         // Collect identifiers from text evaluator and directives
-        const identifiers = [];
+        const ids = [];
+        // Include initial dependent identifiers, if any
+        ids.push(...this.#initDependentIdentifiers ?? []);
         // If this is a text node with a text evaluator, include its identifiers
         if (this.#textEvaluator) {
-            identifiers.push(...this.#textEvaluator.identifiers);
+            ids.push(...this.#textEvaluator.identifiers);
         }
         // Include identifiers from directive bindings preparers
         this.#directiveManager?.bindingsPreparers?.forEach(preparer => {
-            identifiers.push(...preparer.identifiers);
+            ids.push(...preparer.dependentIdentifiers);
         });
         // Include identifiers from directive DOM updaters
         this.#directiveManager?.domUpdaters?.forEach(updater => {
-            identifiers.push(...updater.identifiers);
+            ids.push(...updater.dependentIdentifiers);
         });
         // Remove duplicates by converting to a Set and back to an array
-        this.#identifiers = identifiers.length === 0 ? [] : [...new Set(identifiers)];
-        return this.#identifiers;
+        this.#dependentIdentifiers = [...new Set(ids)];
+        return this.#dependentIdentifiers;
     }
     get preparableIdentifiers() {
         // If already computed, return the cached preparable identifiers
@@ -7761,8 +7802,6 @@ class VNode {
         }
         // Collect preparable identifiers from directive bindings preparers
         const preparableIdentifiers = [];
-        // Include preparable identifiers from this node's bindings preparer, if any
-        preparableIdentifiers.push(...(this.#bindingsPreparer?.preparableIdentifiers ?? []));
         // Include preparable identifiers from directive bindings preparers
         this.#directiveManager?.bindingsPreparers?.forEach(preparer => {
             preparableIdentifiers.push(...preparer.preparableIdentifiers);
@@ -7771,134 +7810,178 @@ class VNode {
         this.#preparableIdentifiers = preparableIdentifiers.length === 0 ? [] : [...new Set(preparableIdentifiers)];
         return this.#preparableIdentifiers;
     }
+    /**
+     * The DOM path of this virtual node.
+     * This is a string representation of the path from the root to this node,
+     * using the node names and their indices among siblings with the same name.
+     * For example: "DIV[0]/SPAN[1]/#text[0]"
+     * @return The DOM path as a string.
+     */
+    get domPath() {
+        const path = [];
+        let node = this;
+        while (node) {
+            if (node.parentVNode && node.parentVNode.childVNodes) {
+                const siblings = node.parentVNode.childVNodes.filter(v => v.nodeName === node?.nodeName);
+                const index = siblings.indexOf(node);
+                path.unshift(`${node.nodeName}[${index}]`);
+            }
+            else {
+                path.unshift(node.nodeName);
+            }
+            node = node.parentVNode;
+        }
+        return path.join('/');
+    }
     /**
      * Updates the virtual node and its children based on the current bindings.
      * This method evaluates any expressions in text nodes and applies effectors from directives.
      * It also recursively updates child virtual nodes.
      * @param context The context for the update operation.
+     * This includes the current bindings and a list of identifiers that have changed.
      */
-    update(context) {
-        // Extract context properties
-        const { bindings, changedIdentifiers, isInitial } = context;
+    update() {
+        const changes = this.bindings?.changes || [];
         // If this is a text node with a text evaluator, update its content if needed
         if (this.#nodeType === Node.TEXT_NODE && this.#textEvaluator) {
-            if (isInitial) {
-                // Initial update: always set the text content
+            // Check if any of the identifiers are in the changed identifiers
+            const changed = this.#textEvaluator.identifiers.some(id => changes.includes(id));
+            // If the text node has changed, update its content
+            if (changed) {
                 const text = this.#node;
-                text.data = this.#textEvaluator.evaluate(bindings);
+                text.data = this.#textEvaluator.evaluate(this.bindings);
             }
-            else {
-                // Subsequent update: only update the text content if relevant identifiers have changed
-                // Check if any of the identifiers are in the changed identifiers
-                const changed = this.#textEvaluator.identifiers.some(id => changedIdentifiers.includes(id));
-                // If the text node has changed, update its content
+            return;
+        }
+        // Prepare new bindings using directive bindings preparers, if any
+        if (this.#directiveManager?.bindingsPreparers) {
+            // Ensure local bindings are initialized
+            if (!this.#bindings) {
+                this.#bindings = new VBindings({ parent: this.bindings });
+            }
+            // Prepare bindings for each preparer if relevant identifiers have changed
+            for (const preparer of this.#directiveManager.bindingsPreparers) {
+                const changed = preparer.dependentIdentifiers.some(id => changes.includes(id));
                 if (changed) {
-                    const text = this.#node;
-                    text.data = this.#textEvaluator.evaluate(bindings);
+                    preparer.prepareBindings();
                 }
             }
-            return;
         }
-        if (isInitial) {
-            // Initial update: prepare bindings and apply all directive updaters
-            if (this.#directiveManager?.domUpdaters) {
-                for (const updater of this.#directiveManager.domUpdaters) {
+        // Apply DOM updaters from directives, if any
+        if (this.#directiveManager?.domUpdaters) {
+            for (const updater of this.#directiveManager.domUpdaters) {
+                const changed = updater.dependentIdentifiers.some(id => changes.includes(id));
+                if (changed) {
                     updater.applyToDOM();
                 }
             }
-            // Recursively update dependent virtual nodes
-            this.#dependencies?.forEach(dependentNode => {
-                // Update the dependent node
-                dependentNode.update({
-                    bindings: this.#bindings,
-                    changedIdentifiers: [],
-                    isInitial: true
-                });
-            });
         }
-        else {
-            // Subsequent update: only prepare bindings and apply directive updaters if relevant identifiers have changed
-            // Save the original bindings for comparison
-            const oldBindings = this.#bindings;
-            // Prepare new bindings using directive bindings preparers, if any
-            const newBindings = { ...bindings };
-            const changes = new Set([...changedIdentifiers]);
-            this.#bindingsPreparer?.prepareBindings(newBindings);
-            if (this.#directiveManager?.bindingsPreparers) {
-                for (const preparer of this.#directiveManager.bindingsPreparers) {
-                    const changed = preparer.identifiers.some(id => changedIdentifiers.includes(id));
-                    if (changed) {
-                        preparer.prepareBindings(newBindings);
-                    }
-                }
+        // Recursively update dependent virtual nodes
+        this.#dependents?.forEach(dependentNode => {
+            const changed = dependentNode.dependentIdentifiers.some(id => changes.includes(id));
+            if (changed) {
+                dependentNode.update();
             }
-            BindingsUtils.getChangedIdentifiers(oldBindings, newBindings).forEach(id => changes.add(id));
-            // Update the bindings for this node
-            this.#bindings = newBindings;
-            // If there are no changes in bindings, skip further processing
-            if (changes.size === 0) {
-                return;
+        });
+    }
+    /**
+     * Forces an update of the virtual node and its children, regardless of changed identifiers.
+     * This method evaluates any expressions in text nodes and applies effectors from directives.
+     * It also recursively updates child virtual nodes.
+     * This is useful when an immediate update is needed, bypassing the usual change detection.
+     */
+    forceUpdate() {
+        // If this is a text node with a text evaluator, update its content if needed
+        if (this.#nodeType === Node.TEXT_NODE && this.#textEvaluator) {
+            const text = this.#node;
+            text.data = this.#textEvaluator.evaluate(this.bindings);
+            return;
+        }
+        // Prepare new bindings using directive bindings preparers, if any
+        if (this.#directiveManager?.bindingsPreparers) {
+            // Ensure local bindings are initialized
+            if (!this.#bindings) {
+                this.#bindings = new VBindings({ parent: this.bindings });
             }
-            // Apply DOM updaters from directives, if any
-            if (this.#directiveManager?.domUpdaters) {
-                for (const updater of this.#directiveManager.domUpdaters) {
-                    const changed = updater.identifiers.some(id => changes.has(id));
-                    if (changed) {
-                        updater.applyToDOM();
-                    }
-                }
+            // Prepare bindings for each preparer if relevant identifiers have changed
+            for (const preparer of this.#directiveManager.bindingsPreparers) {
+                preparer.prepareBindings();
+            }
+        }
+        // Apply DOM updaters from directives, if any
+        if (this.#directiveManager?.domUpdaters) {
+            for (const updater of this.#directiveManager.domUpdaters) {
+                updater.applyToDOM();
             }
-            // Recursively update dependent virtual nodes
-            this.#dependencies?.forEach(dependentNode => {
-                // Check if any of the dependent node's identifiers are in the changed identifiers
-                if (dependentNode.identifiers.filter(id => changes.has(id)).length === 0) {
-                    return;
-                }
-                // Update the dependent node
-                dependentNode.update({
-                    bindings: this.#bindings,
-                    changedIdentifiers: Array.from(changes),
-                });
-            });
         }
+        // Recursively update child virtual nodes
+        this.#childVNodes?.forEach(childVNode => {
+            childVNode.forceUpdate();
+        });
     }
     /**
-     * Adds a dependency on the specified virtual node.
-     * This means that if the specified node's bindings change, this node may need to be updated.
-     * @param dependentNode The virtual node to add as a dependency.
+     * Adds a child virtual node to this virtual node.
+     * @param child The child virtual node to add.
+     */
+    addChild(child) {
+        this.#childVNodes?.push(child);
+    }
+    /**
+     * Adds a dependent virtual node that relies on this node's bindings.
+     * @param dependent The dependent virtual node to add.
+     * @param dependentIdentifiers The identifiers that the dependent node relies on.
+     * If not provided, the dependent node's own identifiers will be used.
      * @returns A list of closers to unregister the dependency, or undefined if no dependency was added.
      */
-    addDependency(dependentNode) {
-        // List of closers to unregister dependencies
+    addDependent(dependent, dependentIdentifiers = undefined) {
+        // List of closers to unregister the dependency
         const closers = [];
-        // Check if any of the dependent node's identifiers are in this node's identifiers
-        let hasIdentifier = dependentNode.identifiers.some(id => this.preparableIdentifiers.includes(id));
-        if (!hasIdentifier) {
-            if (!this.#parentVNode) {
-                hasIdentifier = dependentNode.identifiers.some(id => this.#vApplication.preparableIdentifiers.includes(id));
+        // If dependent identifiers are not provided, use the dependent node's own identifiers
+        if (!dependentIdentifiers) {
+            dependentIdentifiers = [...dependent.dependentIdentifiers];
+        }
+        // Prepare alternative identifiers by stripping array indices (e.g., "items[0]" -> "items")
+        const allDeps = new Set();
+        dependentIdentifiers.forEach(id => {
+            allDeps.add(id);
+            const idx = id.indexOf('[');
+            if (idx !== -1) {
+                allDeps.add(id.substring(0, idx));
             }
+        });
+        // Get this node's identifiers
+        const thisIds = [...this.preparableIdentifiers];
+        if (this.#bindings) {
+            thisIds.push(...this.#bindings?.raw ? Object.keys(this.#bindings.raw) : []);
         }
         // If the dependent node has an identifier in this node's identifiers, add it as a dependency
-        if (hasIdentifier) {
+        if ([...allDeps].some(id => thisIds.includes(id))) {
             // If the dependencies list is not initialized, create it
-            if (!this.#dependencies) {
-                this.#dependencies = [];
+            if (!this.#dependents) {
+                this.#dependents = [];
             }
             // Add the dependent node to the list
-            this.#dependencies.push(dependentNode);
+            this.#dependents.push(dependent);
+            // Remove the matched identifiers from the dependent node's identifiers to avoid duplicate dependencies
+            thisIds.forEach(id => {
+                const idx = dependentIdentifiers.indexOf(id);
+                if (idx !== -1) {
+                    dependentIdentifiers.splice(idx, 1);
+                }
+            });
             // Create a closer to unregister the dependency
             closers.push({
                 close: () => {
                     // Remove the dependent node from the dependencies list
-                    const index = this.#dependencies?.indexOf(dependentNode) ?? -1;
+                    const index = this.#dependents?.indexOf(dependent) ?? -1;
                     if (index !== -1) {
-                        this.#dependencies?.splice(index, 1);
+                        this.#dependents?.splice(index, 1);
                     }
                 }
             });
         }
         // Recursively add the dependency to the parent node, if any
-        this.#parentVNode?.addDependency(dependentNode)?.forEach(closer => closers.push(closer));
+        this.#parentVNode?.addDependent(dependent, dependentIdentifiers)?.forEach(closer => closers.push(closer));
         // Return a closer to unregister the dependency
         return closers.length > 0 ? closers : undefined;
     }
@@ -7934,6 +8017,333 @@ class VNode {
     }
 }
 
+// Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+/**
+ * Context for managing related conditional directives (v-if, v-else-if, v-else).
+ */
+class VConditionalDirectiveContext {
+    /**
+     * A list of directives (v-if, v-else-if, v-else) in the order they appear in the template.
+     */
+    #directives = [];
+    /**
+     * A cached list of all variable and function names used in the expressions of the associated directives.
+     */
+    #allDependentIdentifiers = [];
+    /**
+     * Gets a list of all variable and function names used in the expressions of the associated directives.
+     * This is useful for determining dependencies for re-evaluation when data changes.
+     */
+    get allDependentIdentifiers() {
+        return this.#allDependentIdentifiers;
+    }
+    /**
+     * Adds a directive (v-else-if or v-else) to the conditional context.
+     * @param directive The directive to add.
+     */
+    addDirective(directive) {
+        this.#directives.push(directive);
+        // Update the cached list of all dependent identifiers
+        if (directive.dependentIdentifiers) {
+            for (const id of directive.dependentIdentifiers) {
+                if (!this.#allDependentIdentifiers.includes(id)) {
+                    this.#allDependentIdentifiers.push(id);
+                }
+            }
+        }
+    }
+    /**
+     * Checks if any preceding directive's condition is met.
+     * This is used to determine if a v-else-if or v-else directive should be rendered.
+     * @param directive The directive to check against.
+     * @returns True if any preceding directive's condition is met, otherwise false.
+     */
+    isPrecedingConditionMet(directive) {
+        const index = this.#directives.indexOf(directive);
+        if (index === -1) {
+            throw new Error("Directive not found in context.");
+        }
+        // Check if all previous directives are met
+        for (let i = 0; i < index; i++) {
+            const d = this.#directives[i];
+            if (d.conditionIsMet === true) {
+                return true;
+            }
+        }
+        return false;
+    }
+}
+
+// Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+class VConditionalDirective {
+    /**
+     * The virtual node to which this directive is applied.
+     */
+    #vNode;
+    /**
+     * A list of variable and function names used in the directive's expression.
+     * This may be undefined if the directive does not have an expression (e.g., v-else).
+     */
+    #dependentIdentifiers;
+    /*
+     * A function that evaluates the directive's condition.
+     * It returns true if the condition is met, otherwise false.
+     * This may be undefined if the directive does not have an expression (e.g., v-else).
+     */
+    #evaluate;
+    /**
+     * The context for managing related conditional directives (v-if, v-else-if, v-else).
+     */
+    #conditionalContext;
+    /**
+     * The currently rendered virtual node, if any.
+     */
+    #renderedVNode;
+    /**
+     * @param context The context for parsing the directive.
+     */
+    constructor(context) {
+        this.#vNode = context.vNode;
+        // Parse the expression to extract identifiers and create the evaluator
+        const expression = context.attribute.value;
+        if (expression) {
+            this.#dependentIdentifiers = ExpressionUtils.extractIdentifiers(expression, context.vNode.vApplication.functionDependencies);
+            this.#evaluate = this.#createEvaluator(expression);
+        }
+        // Remove the directive attribute from the element
+        this.#vNode.node.removeAttribute(context.attribute.name);
+        // Initialize the conditional context for managing related directives
+        this.#conditionalContext = this.#initializeConditionalContext();
+        this.#conditionalContext.addDirective(this);
+    }
+    /**
+     * @inheritdoc
+     */
+    get vNode() {
+        return this.#vNode;
+    }
+    /**
+     * @inheritdoc
+     */
+    get needsAnchor() {
+        return true;
+    }
+    /**
+     * @inheritdoc
+     */
+    get bindingsPreparer() {
+        return undefined;
+    }
+    /**
+     * @inheritdoc
+     */
+    get domUpdater() {
+        const identifiers = this.#conditionalContext.allDependentIdentifiers;
+        const render = () => this.#render();
+        // Create an updater that handles the conditional rendering
+        const updater = {
+            get dependentIdentifiers() {
+                return identifiers;
+            },
+            applyToDOM() {
+                render();
+            }
+        };
+        return updater;
+    }
+    /**
+     * @inheritdoc
+     */
+    get templatize() {
+        return true;
+    }
+    /**
+     * @inheritdoc
+     */
+    get dependentIdentifiers() {
+        return this.#dependentIdentifiers ?? [];
+    }
+    /**
+     * The context for managing related conditional directives (v-if, v-else-if, v-else).
+     */
+    get conditionalContext() {
+        return this.#conditionalContext;
+    }
+    /**
+     * Indicates whether the condition for this directive is currently met.
+     * For v-if and v-else-if, this depends on the evaluation of their expressions.
+     * For v-else, this is always true.
+     */
+    get conditionIsMet() {
+        if (!this.#evaluate) {
+            // No expression means always true (e.g., v-else)
+            return true;
+        }
+        return this.#evaluate();
+    }
+    /**
+     * @inheritdoc
+     */
+    destroy() {
+        // Default implementation does nothing. Override in subclasses if needed.
+    }
+    /**
+     * Renders the node based on the evaluation of the directive's condition.
+     * Inserts or removes the node from the DOM as needed.
+     */
+    #render() {
+        // Check if any preceding directive's condition is met
+        if (this.#conditionalContext.isPrecedingConditionMet(this)) {
+            // Previous condition met, ensure node is removed
+            this.#removedNode();
+            return;
+        }
+        if (!this.#evaluate) {
+            // No expression means always true (e.g., v-else)
+            this.#insertNode();
+            return;
+        }
+        // Evaluate the condition and insert or remove the node accordingly
+        const shouldRender = this.#evaluate();
+        if (shouldRender) {
+            this.#insertNode();
+        }
+        else {
+            this.#removedNode();
+        }
+    }
+    /**
+     * Inserts the node into the DOM at the position marked by the anchor node, if any.
+     * If there is no anchor node, the node is inserted as a child of its parent node.
+     * If the node is already in the DOM, no action is taken.
+     */
+    #insertNode() {
+        if (this.#renderedVNode) {
+            // Already rendered, no action needed
+            return;
+        }
+        this.#renderedVNode = this.#cloneTemplate();
+        this.#vNode.anchorNode?.parentNode?.insertBefore(this.#renderedVNode.node, this.#vNode.anchorNode.nextSibling);
+        this.#renderedVNode.forceUpdate();
+    }
+    /**
+     * Removes the node from the DOM.
+     * If the node is not in the DOM, no action is taken.
+     */
+    #removedNode() {
+        if (!this.#renderedVNode) {
+            // Not rendered, no action needed
+            return;
+        }
+        this.#renderedVNode.node.parentNode?.removeChild(this.#renderedVNode.node);
+        this.#renderedVNode.destroy();
+        this.#renderedVNode = undefined;
+    }
+    /**
+     * Clones the template element and creates a new VNode for the cloned element.
+     */
+    #cloneTemplate() {
+        const element = this.#vNode.node;
+        const clone = element.cloneNode(true);
+        // Create a new VNode for the cloned element
+        const vNode = new VNode({
+            node: clone,
+            vApplication: this.#vNode.vApplication,
+            parentVNode: this.#vNode.parentVNode
+        });
+        return vNode;
+    }
+    /**
+     * Creates a function to evaluate the directive's condition.
+     * @param expression The expression string to evaluate.
+     * @returns A function that evaluates the directive's condition.
+     */
+    #createEvaluator(expression) {
+        const identifiers = this.#dependentIdentifiers ?? [];
+        const args = identifiers.join(", ");
+        const funcBody = `return (${expression});`;
+        // Create a dynamic function with the identifiers as parameters
+        const func = new Function(args, funcBody);
+        // Return a function that calls the dynamic function with the current values from the virtual node's bindings
+        return () => {
+            // Gather the current values of the identifiers from the bindings
+            const values = identifiers.map(id => this.#vNode.bindings?.get(id));
+            // Call the dynamic function with the gathered values and return the result as a boolean
+            return Boolean(func(...values));
+        };
+    }
+    /**
+     * Initializes the conditional context for managing related directives.
+     */
+    #initializeConditionalContext() {
+        // Create a new context if this is a v-if directive
+        if (this.name === StandardDirectiveName.V_IF) {
+            return new VConditionalDirectiveContext();
+        }
+        // Link to the existing conditional context from the preceding v-if or v-else-if directive
+        let prevVNode = this.vNode.previousSibling;
+        while (prevVNode && prevVNode.nodeType !== Node.ELEMENT_NODE) {
+            prevVNode = prevVNode.previousSibling;
+        }
+        const precedingDirective = prevVNode?.directiveManager?.directives?.find(d => d.name === StandardDirectiveName.V_IF || d.name === StandardDirectiveName.V_ELSE_IF);
+        if (!precedingDirective) {
+            throw new Error("preceding v-if or v-else-if directive not found.");
+        }
+        // Cast to VConditionalDirective to access conditionalContext
+        const conditionalContext = precedingDirective.conditionalContext;
+        return conditionalContext;
+    }
+}
+
+// Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+/**
+ * Directive for conditional rendering in the virtual DOM.
+ * This directive renders an element if the preceding v-if or v-else-if directive evaluated to false.
+ * For example:
+ *     <div v-else>This div is rendered if the previous v-if or v-else-if was false.</div>
+ * The element and its children are included in the DOM only if the preceding v-if or v-else-if expression evaluates to false.
+ * If the preceding expression is true, this element and its children are not rendered.
+ * This directive must be used immediately after a v-if or v-else-if directive.
+ */
+class VElseDirective extends VConditionalDirective {
+    /**
+     * @param context The context for parsing the directive.
+     */
+    constructor(context) {
+        super(context);
+    }
+    /**
+     * @inheritdoc
+     */
+    get name() {
+        return StandardDirectiveName.V_ELSE;
+    }
+}
+
+// Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+/**
+ * Directive for conditional rendering in the virtual DOM.
+ * This directive renders an element based on a boolean expression, but only if preceding v-if or v-else-if directives were false.
+ * For example:
+ *     <div v-else-if="isAlternativeVisible">This div is conditionally rendered.</div>
+ * The element and its children are included in the DOM only if the expression evaluates to true AND no preceding condition was met.
+ * This directive must be used after a v-if or another v-else-if directive.
+ */
+class VElseIfDirective extends VConditionalDirective {
+    /**
+     * @param context The context for parsing the directive.
+     */
+    constructor(context) {
+        super(context);
+    }
+    /**
+     * @inheritdoc
+     */
+    get name() {
+        return StandardDirectiveName.V_ELSE_IF;
+    }
+}
+
 // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
 /**
  * Directive for rendering a list of items using a loop.
@@ -7958,7 +8368,7 @@ class VForDirective {
     /**
      * A list of variable and function names used in the directive's expression.
      */
-    #identifiers;
+    #dependentIdentifiers;
     /**
      * A function that evaluates the directive's expression to get the source data.
      * It returns the collection to iterate over.
@@ -7996,7 +8406,7 @@ class VForDirective {
             this.#indexName = parsed.indexName;
             this.#sourceName = parsed.sourceName;
             // Extract identifiers from the source expression
-            this.#identifiers = ExpressionUtils.extractIdentifiers(parsed.sourceName, context.vNode.vApplication.functionDependencies);
+            this.#dependentIdentifiers = ExpressionUtils.extractIdentifiers(parsed.sourceName, context.vNode.vApplication.functionDependencies);
             this.#evaluateSource = this.#createSourceEvaluator(parsed.sourceName);
         }
         // Remove the directive attribute from the element
@@ -8030,11 +8440,11 @@ class VForDirective {
      * @inheritdoc
      */
     get domUpdater() {
-        const identifiers = this.#identifiers ?? [];
+        const identifiers = this.#dependentIdentifiers ?? [];
         const render = () => this.#render();
         // Create and return the DOM updater
         const updater = {
-            get identifiers() {
+            get dependentIdentifiers() {
                 return identifiers;
             },
             applyToDOM() {
@@ -8043,6 +8453,18 @@ class VForDirective {
         };
         return updater;
     }
+    /**
+     * @inheritdoc
+     */
+    get templatize() {
+        return true;
+    }
+    /**
+     * @inheritdoc
+     */
+    get dependentIdentifiers() {
+        return this.#dependentIdentifiers ?? [];
+    }
     /**
      * @inheritdoc
      */
@@ -8079,12 +8501,9 @@ class VForDirective {
         if (this.#evaluateKey && this.#itemName) {
             iterations = iterations.map(iter => {
                 // Create bindings for this iteration
-                const itemBindings = new Map();
-                if (this.#vNode.bindings) {
-                    for (const key in this.#vNode.bindings) {
-                        itemBindings.set(key, this.#vNode.bindings[key]);
-                    }
-                }
+                const itemBindings = new VBindings({
+                    parent: this.#vNode.bindings
+                });
                 itemBindings.set(this.#itemName, iter.item);
                 if (this.#indexName) {
                     itemBindings.set(this.#indexName, iter.index);
@@ -8136,11 +8555,7 @@ class VForDirective {
                 else {
                     parent.appendChild(vNode.node);
                 }
-                vNode.update({
-                    bindings: this.#vNode.bindings || {},
-                    changedIdentifiers: [],
-                    isInitial: true
-                });
+                vNode.forceUpdate();
             }
             else {
                 // Reuse existing item
@@ -8191,12 +8606,12 @@ class VForDirective {
      * Creates a function to evaluate the source data expression.
      */
     #createSourceEvaluator(expression) {
-        const identifiers = this.#identifiers ?? [];
+        const identifiers = this.#dependentIdentifiers ?? [];
         const args = identifiers.join(", ");
         const funcBody = `return (${expression});`;
         const func = new Function(args, funcBody);
         return () => {
-            const values = identifiers.map(id => this.#vNode.bindings?.[id]);
+            const values = identifiers.map(id => this.#vNode.bindings?.get(id));
             return func(...values);
         };
     }
@@ -8221,80 +8636,39 @@ class VForDirective {
         const element = this.#vNode.node;
         const clone = element.cloneNode(true);
         // Prepare identifiers for the item
-        const itemName = this.#itemName;
-        const indexName = this.#indexName;
+        this.#itemName;
+        this.#indexName;
         // Create bindings for this iteration
-        const bindings = { ...this.#vNode.bindings };
+        const bindings = new VBindings({
+            parent: this.#vNode.bindings
+        });
         if (this.#itemName) {
-            bindings[this.#itemName] = context.item;
+            bindings.set(this.#itemName, context.item);
         }
         if (this.#indexName) {
-            bindings[this.#indexName] = context.index;
+            bindings.set(this.#indexName, context.index);
         }
-        const itemBindingsPreparer = {
-            get identifiers() {
-                return []; // No specific identifiers for item
-            },
-            get preparableIdentifiers() {
-                // Return item and index names if defined
-                const ids = [];
-                if (itemName)
-                    ids.push(itemName);
-                if (indexName)
-                    ids.push(indexName);
-                return ids;
-            },
-            prepareBindings(bindings) {
-                // Prepare bindings for the current item
-                if (itemName) {
-                    bindings[itemName] = context.item;
-                }
-                if (indexName) {
-                    bindings[indexName] = context.index;
-                }
-            }
-        };
         // Create a new VNode for the cloned element
         const vNode = new VNode({
             node: clone,
             vApplication: this.#vNode.vApplication,
             parentVNode: this.#vNode.parentVNode,
             bindings,
-            bindingsPreparer: itemBindingsPreparer,
+            dependentIdentifiers: [`${this.#sourceName}[${context.index}]`]
         });
-        // Set data attributes for debugging
-        clone.setAttribute('data-v-for-key', String(context.key));
-        clone.setAttribute('data-v-for-index', String(context.index));
         return vNode;
     }
     /**
      * Update bindings for an existing item
      */
     #updateItemBindings(vNode, context) {
-        const bindings = vNode.bindings || {};
-        const updatedBindings = { ...bindings };
-        if (this.#itemName) {
-            updatedBindings[this.#itemName] = context.item;
-        }
-        if (this.#indexName) {
-            updatedBindings[this.#indexName] = context.index;
-        }
-        // Update data attributes
-        const element = vNode.node;
-        element.setAttribute('data-v-for-key', String(context.key));
-        element.setAttribute('data-v-for-index', String(context.index));
-        // Trigger reactivity update by calling update with the new bindings
-        const changedIdentifiers = [];
         if (this.#itemName) {
-            changedIdentifiers.push(this.#itemName);
+            vNode.bindings?.set(this.#itemName, context.item);
         }
         if (this.#indexName) {
-            changedIdentifiers.push(this.#indexName);
+            vNode.bindings?.set(this.#indexName, context.index);
         }
-        vNode.update({
-            bindings: updatedBindings,
-            changedIdentifiers
-        });
+        vNode.update();
     }
     /**
      * Get iterations from various data types
@@ -8382,7 +8756,7 @@ class VModelDirective {
     /**
      * A list of variable and function names used in the directive's expression.
      */
-    #identifiers;
+    #dependentIdentifiers;
     /**
      * A function that evaluates the directive's expression.
      * It returns the evaluated value of the expression.
@@ -8416,7 +8790,7 @@ class VModelDirective {
         const expression = context.attribute.value;
         if (expression) {
             this.#expression = expression;
-            this.#identifiers = ExpressionUtils.extractIdentifiers(expression, context.vNode.vApplication.functionDependencies);
+            this.#dependentIdentifiers = ExpressionUtils.extractIdentifiers(expression, context.vNode.vApplication.functionDependencies);
             this.#evaluate = this.#createEvaluator(expression);
             // Attach event listener for two-way binding
             this.#attachEventListener();
@@ -8452,11 +8826,11 @@ class VModelDirective {
      * @inheritdoc
      */
     get domUpdater() {
-        const identifiers = this.#identifiers ?? [];
+        const identifiers = this.#dependentIdentifiers ?? [];
         const render = () => this.#render();
         // Create and return the DOM updater
         const updater = {
-            get identifiers() {
+            get dependentIdentifiers() {
                 return identifiers;
             },
             applyToDOM() {
@@ -8465,6 +8839,18 @@ class VModelDirective {
         };
         return updater;
     }
+    /**
+     * @inheritdoc
+     */
+    get templatize() {
+        return false;
+    }
+    /**
+     * @inheritdoc
+     */
+    get dependentIdentifiers() {
+        return this.#dependentIdentifiers ?? [];
+    }
     /**
      * @inheritdoc
      */
@@ -8535,8 +8921,6 @@ class VModelDirective {
             newValue = this.#applyModifiers(newValue);
             // Update the binding
             this.#updateBinding(newValue);
-            // Schedule a DOM update
-            this.#vNode.vApplication.scheduleUpdate();
         };
         element.addEventListener(eventName, this.#listener);
     }
@@ -8593,21 +8977,12 @@ class VModelDirective {
         if (!this.#expression) {
             return;
         }
-        const bindings = this.#vNode.vApplication.bindings;
-        if (!bindings) {
-            return;
-        }
-        // Simple property assignment (e.g., "message")
-        // For now, only support simple identifiers
-        const trimmed = this.#expression.trim();
-        if (trimmed && /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(trimmed)) {
-            bindings[trimmed] = newValue;
-        }
-        else {
-            // For complex expressions like "user.name", we'd need more sophisticated parsing
-            this.#vNode.vApplication.logManager.getLogger('VModelDirective')
-                .warn(`v-model only supports simple identifiers for now: ${this.#expression}`);
-        }
+        const expression = this.#expression.trim();
+        const values = [newValue];
+        const args = ['$newValue'].join(", ");
+        const funcBody = `(this.${expression} = $newValue);`;
+        const func = new Function(args, funcBody);
+        func.call(this.#vNode.bindings?.raw, ...values);
     }
     /**
      * Creates a function to evaluate the directive's condition.
@@ -8615,15 +8990,15 @@ class VModelDirective {
      * @returns A function that evaluates the directive's condition.
      */
     #createEvaluator(expression) {
-        const identifiers = this.#identifiers ?? [];
+        const identifiers = this.#dependentIdentifiers ?? [];
         const args = identifiers.join(", ");
         const funcBody = `return (${expression});`;
         // Create a dynamic function with the identifiers as parameters
         const func = new Function(args, funcBody);
-        // Return a function that calls the dynamic function with the current values from the virtual node's bindings
+        // Return a function that calls the dynamic function with the current values from bindings
         return () => {
             // Gather the current values of the identifiers from the bindings
-            const values = identifiers.map(id => this.#vNode.bindings?.[id]);
+            const values = identifiers.map(id => this.#vNode.bindings?.get(id));
             // Call the dynamic function with the gathered values
             return func(...values);
         };
@@ -8652,7 +9027,7 @@ class VOnDirective {
     /**
      * A list of variable and function names used in the directive's expression.
      */
-    #identifiers;
+    #dependentIdentifiers;
     /**
      * The event handler wrapper function, generated once and reused.
      */
@@ -8691,7 +9066,7 @@ class VOnDirective {
         // Parse the expression to extract identifiers and create the handler wrapper
         const expression = context.attribute.value;
         if (expression) {
-            this.#identifiers = ExpressionUtils.extractIdentifiers(expression, context.vNode.vApplication.functionDependencies);
+            this.#dependentIdentifiers = ExpressionUtils.extractIdentifiers(expression, context.vNode.vApplication.functionDependencies);
             this.#handlerWrapper = this.#createHandlerWrapper(expression);
         }
         // Create and attach the event listener
@@ -8731,6 +9106,18 @@ class VOnDirective {
     get domUpdater() {
         return undefined;
     }
+    /**
+     * @inheritdoc
+     */
+    get templatize() {
+        return false;
+    }
+    /**
+     * @inheritdoc
+     */
+    get dependentIdentifiers() {
+        return this.#dependentIdentifiers ?? [];
+    }
     /**
      * @inheritdoc
      */
@@ -8755,6 +9142,35 @@ class VOnDirective {
         const isOnce = this.#modifiers.has('once');
         // Create the event listener function
         this.#listener = (event) => {
+            // Check key modifiers for keyboard events
+            if (event instanceof KeyboardEvent) {
+                const keyModifiers = ['enter', 'tab', 'delete', 'esc', 'space', 'up', 'down', 'left', 'right'];
+                const hasKeyModifier = keyModifiers.some(key => this.#modifiers.has(key));
+                if (hasKeyModifier) {
+                    const keyMap = {
+                        'enter': 'Enter',
+                        'tab': 'Tab',
+                        'delete': 'Delete',
+                        'esc': 'Escape',
+                        'space': ' ',
+                        'up': 'ArrowUp',
+                        'down': 'ArrowDown',
+                        'left': 'ArrowLeft',
+                        'right': 'ArrowRight'
+                    };
+                    let keyMatched = false;
+                    for (const [modifier, keyValue] of Object.entries(keyMap)) {
+                        if (this.#modifiers.has(modifier) && event.key === keyValue) {
+                            keyMatched = true;
+                            break;
+                        }
+                    }
+                    // If key modifier specified but key doesn't match, return early
+                    if (!keyMatched) {
+                        return;
+                    }
+                }
+            }
             // Apply event modifiers
             if (this.#modifiers.has('stop')) {
                 event.stopPropagation();
@@ -8783,27 +9199,26 @@ class VOnDirective {
      * @returns A function that handles the event.
      */
     #createHandlerWrapper(expression) {
-        const identifiers = this.#identifiers ?? [];
+        const identifiers = this.#dependentIdentifiers ?? [];
         const vNode = this.#vNode;
         // Return a function that handles the event with proper scope
         return (event) => {
-            // Gather the current values of the identifiers from the bindings
-            const bindings = vNode.bindings ?? {};
+            const bindings = vNode.bindings;
             // If the expression is just a method name, call it with bindings as 'this'
             const trimmedExpr = expression.trim();
-            if (identifiers.includes(trimmedExpr) && typeof bindings[trimmedExpr] === 'function') {
+            if (identifiers.includes(trimmedExpr) && typeof bindings?.get(trimmedExpr) === 'function') {
                 const methodName = trimmedExpr;
-                const originalMethod = bindings[methodName];
+                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.call(bindings, event);
+                return originalMethod(event);
             }
             // For inline expressions, evaluate normally
-            const values = identifiers.map(id => bindings[id]);
+            const values = identifiers.map(id => vNode.bindings?.get(id));
             const args = identifiers.join(", ");
             const funcBody = `return (${expression});`;
             const func = new Function(args, funcBody);
-            return func(...values);
+            return func.call(bindings?.raw, ...values, event);
         };
     }
 }
@@ -8827,7 +9242,7 @@ class VShowDirective {
     /**
      * A list of variable and function names used in the directive's expression.
      */
-    #identifiers;
+    #dependentIdentifiers;
     /*
      * A function that evaluates the directive's condition.
      * It returns true if the condition is met, otherwise false.
@@ -8844,7 +9259,7 @@ class VShowDirective {
         this.#vNode = context.vNode;
         // Parse the expression to extract identifiers and create the evaluator
         const expression = context.attribute.value;
-        this.#identifiers = ExpressionUtils.extractIdentifiers(expression, context.vNode.vApplication.functionDependencies);
+        this.#dependentIdentifiers = ExpressionUtils.extractIdentifiers(expression, context.vNode.vApplication.functionDependencies);
         this.#evaluate = this.#createEvaluator(expression);
         // Remove the directive attribute from the element
         this.#vNode.node.removeAttribute(context.attribute.name);
@@ -8880,13 +9295,13 @@ class VShowDirective {
      * @inheritdoc
      */
     get domUpdater() {
-        const identifiers = this.#identifiers ?? [];
+        const identifiers = this.#dependentIdentifiers ?? [];
         const evaluate = this.#evaluate;
         const visibleNode = () => this.visibleNode();
         const invisibleNode = () => this.invisibleNode();
         // Create an updater that handles the conditional rendering
         const updater = {
-            get identifiers() {
+            get dependentIdentifiers() {
                 return identifiers;
             },
             applyToDOM() {
@@ -8901,6 +9316,18 @@ class VShowDirective {
         };
         return updater;
     }
+    /**
+     * @inheritdoc
+     */
+    get templatize() {
+        return false;
+    }
+    /**
+     * @inheritdoc
+     */
+    get dependentIdentifiers() {
+        return this.#dependentIdentifiers ?? [];
+    }
     /**
      * Makes the node visible by resetting its display style.
      * If the node is already visible, no action is taken.
@@ -8942,7 +9369,7 @@ class VShowDirective {
      * @returns A function that evaluates the directive's condition.
      */
     #createEvaluator(expression) {
-        const identifiers = this.#identifiers ?? [];
+        const identifiers = this.#dependentIdentifiers ?? [];
         const args = identifiers.join(", ");
         const funcBody = `return (${expression});`;
         // Create a dynamic function with the identifiers as parameters
@@ -8950,7 +9377,7 @@ class VShowDirective {
         // Return a function that calls the dynamic function with the current values from the virtual node's bindings
         return () => {
             // Gather the current values of the identifiers from the bindings
-            const values = identifiers.map(id => this.#vNode.bindings?.[id]);
+            const values = identifiers.map(id => this.#vNode.bindings?.get(id));
             // Call the dynamic function with the gathered values and return the result as a boolean
             return Boolean(func(...values));
         };
@@ -9098,96 +9525,6 @@ class VLogManager {
     }
 }
 
-// Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
-/**
- * Utility class for creating reactive proxies that automatically track changes.
- */
-class ReactiveProxy {
-    /**
-     * A WeakMap to store the original target for each proxy.
-     * This allows us to avoid creating multiple proxies for the same object.
-     */
-    static proxyMap = new WeakMap();
-    /**
-     * Creates a reactive proxy for the given object.
-     * The proxy will call the onChange callback whenever a property is modified.
-     *
-     * @param target The object to make reactive.
-     * @param onChange Callback function to call when the object changes. Receives the changed key name.
-     * @returns A reactive proxy of the target object.
-     */
-    static create(target, onChange) {
-        // If the target is not an object or is null, return it as-is
-        if (typeof target !== 'object' || target === null) {
-            return target;
-        }
-        // If this object already has a proxy, return the existing proxy
-        if (this.proxyMap.has(target)) {
-            return this.proxyMap.get(target);
-        }
-        // Create the proxy
-        const proxy = new Proxy(target, {
-            get(obj, key) {
-                const value = Reflect.get(obj, key);
-                // If the value is an object or array, make it reactive too
-                if (typeof value === 'object' && value !== null) {
-                    return ReactiveProxy.create(value, onChange);
-                }
-                // For arrays, intercept mutation methods
-                if (Array.isArray(obj) && typeof value === 'function') {
-                    const arrayMutationMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
-                    if (arrayMutationMethods.includes(key)) {
-                        return function (...args) {
-                            const result = value.apply(this, args);
-                            onChange();
-                            return result;
-                        };
-                    }
-                }
-                return value;
-            },
-            set(obj, key, value) {
-                const oldValue = Reflect.get(obj, key);
-                const result = Reflect.set(obj, key, value);
-                // Only trigger onChange if the value actually changed
-                if (oldValue !== value) {
-                    onChange(key);
-                }
-                return result;
-            },
-            deleteProperty(obj, key) {
-                const result = Reflect.deleteProperty(obj, key);
-                onChange(key);
-                return result;
-            }
-        });
-        // Store the proxy so we can return it if requested again
-        this.proxyMap.set(target, proxy);
-        return proxy;
-    }
-    /**
-     * Checks if the given object is a reactive proxy.
-     *
-     * @param obj The object to check.
-     * @returns True if the object is a reactive proxy, false otherwise.
-     */
-    static isReactive(obj) {
-        return this.proxyMap.has(obj);
-    }
-    /**
-     * Unwraps a reactive proxy to get the original object.
-     * If the object is not a proxy, returns it as-is.
-     *
-     * @param obj The object to unwrap.
-     * @returns The original object.
-     */
-    static unwrap(obj) {
-        // This is a simplified implementation
-        // In a full implementation, we'd need to store a reverse mapping
-        return obj;
-    }
-}
-
 // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
 /**
  * Represents a virtual application instance.
@@ -9229,18 +9566,10 @@ class VApplication {
      * A dictionary mapping computed property names to their dependencies.
      */
     #computedDependencies;
-    /**
-     * Gets the list of identifiers that can trigger updates.
-     */
-    #preparableIdentifiers;
     /**
      * Flag to indicate if an update is already scheduled.
      */
     #updateScheduled = false;
-    /**
-     * Set of keys that have changed since the last update.
-     */
-    #changedKeys = new Set();
     /**
      * Creates an instance of the virtual application.
      * @param options The application options.
@@ -9259,65 +9588,7 @@ class VApplication {
         // Analyze computed dependencies
         this.#computedDependencies = ExpressionUtils.analyzeFunctionDependencies(options.computed || {});
         // Initialize bindings from data, computed, and methods
-        this.#bindings = this.#initializeBindings();
-        // Prepare the list of identifiers that can trigger updates
-        this.#preparableIdentifiers = [...Object.keys(this.#bindings)];
-    }
-    /**
-     * Initializes bindings from data, computed properties, and methods.
-     * @returns The initialized bindings object.
-     */
-    #initializeBindings() {
-        const bindings = {};
-        // 1. Add data properties with reactive proxy for each property
-        if (this.#options.data) {
-            const data = this.#options.data();
-            if (data && typeof data === 'object') {
-                for (const [key, value] of Object.entries(data)) {
-                    if (typeof value === 'object' && value !== null) {
-                        // Wrap objects/arrays with reactive proxy, tracking the root key
-                        bindings[key] = ReactiveProxy.create(value, () => {
-                            this.#changedKeys.add(key);
-                            this.scheduleUpdate();
-                        });
-                    }
-                    else {
-                        // Primitive values are added as-is
-                        bindings[key] = value;
-                    }
-                }
-            }
-        }
-        // 2. Add computed properties
-        if (this.#options.computed) {
-            for (const [key, computedFn] of Object.entries(this.#options.computed)) {
-                try {
-                    // Evaluate computed property with bindings as 'this' context
-                    bindings[key] = computedFn.call(bindings);
-                }
-                catch (error) {
-                    this.#logger.error(`Error evaluating computed property '${key}': ${error}`);
-                    bindings[key] = undefined;
-                }
-            }
-        }
-        // 3. Add methods
-        if (this.#options.methods) {
-            Object.assign(bindings, this.#options.methods);
-        }
-        // 4. Wrap the entire bindings object with a proxy for primitive value changes
-        return new Proxy(bindings, {
-            set: (obj, key, value) => {
-                const oldValue = Reflect.get(obj, key);
-                const result = Reflect.set(obj, key, value);
-                // Track changes to primitive values
-                if (oldValue !== value) {
-                    this.#changedKeys.add(key);
-                    this.scheduleUpdate();
-                }
-                return result;
-            }
-        });
+        this.#initializeBindings();
     }
     /**
      * Gets the global directive parser registry.
@@ -9355,12 +9626,6 @@ class VApplication {
     get functionDependencies() {
         return this.#functionDependencies;
     }
-    /**
-     * Gets the list of identifiers that can trigger updates.
-     */
-    get preparableIdentifiers() {
-        return this.#preparableIdentifiers;
-    }
     /**
      * Mounts the application.
      * @param selectors The CSS selectors to identify the root element.
@@ -9370,8 +9635,8 @@ class VApplication {
         if (!element) {
             throw new Error(`Element not found for selectors: ${selectors}`);
         }
-        // Inject utility methods into bindings
-        this.#bindings.$nextTick = (callback) => this.nextTick(callback);
+        // Clean the element by removing unnecessary whitespace text nodes
+        this.#cleanElement(element);
         // Create the root virtual node
         this.#vNode = new VNode({
             node: element,
@@ -9379,70 +9644,180 @@ class VApplication {
             bindings: this.#bindings
         });
         // Initial rendering
-        this.#vNode.update({
-            bindings: this.#bindings,
-            changedIdentifiers: [],
-            isInitial: true
-        });
+        this.#vNode.update();
         this.#logger.info('Application mounted.');
     }
+    /**
+     * Cleans the element by removing unnecessary whitespace text nodes.
+     * @param element The element to clean.
+     */
+    #cleanElement(element) {
+        let buffer = null;
+        for (const node of Array.from(element.childNodes)) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const text = node;
+                if (/^[\s\n\r\t]*$/.test(text.nodeValue || '')) {
+                    element.removeChild(text);
+                }
+                else {
+                    if (buffer) {
+                        buffer.nodeValue += text.nodeValue || '';
+                        element.removeChild(text);
+                    }
+                    else {
+                        buffer = text;
+                    }
+                }
+            }
+            else {
+                buffer = null;
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    this.#cleanElement(node);
+                }
+            }
+        }
+    }
+    /**
+     * Initializes bindings from data, computed properties, and methods.
+     * @returns The initialized bindings object.
+     */
+    #initializeBindings() {
+        // Create bindings with change tracking
+        this.#bindings = new VBindings({
+            onChange: (identifier) => {
+                this.#scheduleUpdate();
+            }
+        });
+        // Inject utility methods into bindings
+        this.#bindings.set('$nextTick', (callback) => this.#nextTick(callback));
+        // Add methods
+        if (this.#options.methods) {
+            for (const [key, method] of Object.entries(this.#options.methods)) {
+                if (typeof method !== 'function') {
+                    this.#logger.warn(`Method '${key}' is not a function and will be ignored.`);
+                    continue;
+                }
+                // Bind the method to the raw bindings object to ensure 'this' refers to bindings
+                // This allows methods to access and modify bindings properties via 'this'
+                this.#bindings.set(key, method.bind(this.#bindings.raw));
+            }
+        }
+        // Add data properties
+        if (this.#options.data) {
+            const data = this.#options.data();
+            if (data && typeof data === 'object') {
+                for (const [key, value] of Object.entries(data)) {
+                    this.#bindings.set(key, value);
+                }
+            }
+        }
+        // Add computed properties
+        this.#recomputeProperties();
+    }
     /**
      * Schedules a DOM update in the next microtask.
      * Multiple calls within the same event loop will be batched into a single update.
      */
-    scheduleUpdate() {
+    #scheduleUpdate() {
         if (this.#updateScheduled) {
             return;
         }
         this.#updateScheduled = true;
         queueMicrotask(() => {
+            this.#update();
             this.#updateScheduled = false;
-            this.update();
         });
     }
     /**
      * Executes an immediate DOM update.
      */
-    update() {
-        if (!this.#vNode) {
+    #update() {
+        // Re-evaluate computed properties that depend on changed values
+        this.#recomputeProperties();
+        // Update the DOM
+        this.#vNode?.update();
+        // Clear the set of changed identifiers after the update
+        this.#bindings?.clearChanges();
+    }
+    /**
+     * Recursively recomputes computed properties based on changed identifiers.
+     */
+    #recomputeProperties() {
+        if (!this.#options.computed) {
             return;
         }
-        // Get the changed data properties
-        const dataChanges = Array.from(this.#changedKeys);
-        this.#changedKeys.clear();
-        // Re-evaluate all computed properties
-        const computedChanges = [];
-        if (this.#options.computed) {
-            for (const [key, computedFn] of Object.entries(this.#options.computed)) {
-                try {
-                    const oldValue = this.#bindings[key];
-                    const newValue = computedFn.call(this.#bindings);
-                    this.#bindings[key] = newValue;
-                    // Track if the computed value actually changed
-                    if (oldValue !== newValue) {
-                        computedChanges.push(key);
-                        this.#logger.debug(`Computed property '${key}' changed: ${oldValue} -> ${newValue}`);
-                    }
+        const computed = new Set();
+        const processing = new Set();
+        // Gather all changed identifiers, including parent properties for array items
+        const allChanges = new Set();
+        this.#bindings?.changes.forEach(id => {
+            allChanges.add(id);
+            const idx = id.indexOf('[');
+            if (idx !== -1) {
+                allChanges.add(id.substring(0, idx));
+            }
+        });
+        // Helper function to recursively compute a property
+        const compute = (key) => {
+            // Skip if already computed in this update cycle
+            if (computed.has(key)) {
+                return;
+            }
+            // Detect circular dependency
+            if (processing.has(key)) {
+                this.#logger.error(`Circular dependency detected for computed property '${key}'`);
+                return;
+            }
+            processing.add(key);
+            // Get the dependencies for this computed property
+            const deps = this.#computedDependencies[key] || [];
+            // If none of the dependencies have changed, skip recomputation
+            if (!deps.some(dep => allChanges.has(dep))) {
+                computed.add(key);
+                return;
+            }
+            // First, recursively compute any dependent computed properties
+            for (const dep of deps) {
+                if (this.#options.computed[dep]) {
+                    compute(dep);
                 }
-                catch (error) {
-                    this.#logger.error(`Error evaluating computed property '${key}': ${error}`);
+            }
+            // Now compute this property
+            const computedFn = this.#options.computed[key];
+            try {
+                const oldValue = this.#bindings?.get(key);
+                const newValue = computedFn.call(this.#bindings?.raw);
+                // Track if the computed value actually changed
+                if (oldValue !== newValue) {
+                    this.#bindings?.set(key, newValue);
+                    this.#bindings?.changes.forEach(id => {
+                        allChanges.add(id);
+                        const idx = id.indexOf('[');
+                        if (idx !== -1) {
+                            allChanges.add(id.substring(0, idx));
+                        }
+                    });
                 }
             }
+            catch (error) {
+                this.#logger.error(`Error evaluating computed property '${key}': ${error}`);
+            }
+            computed.add(key);
+            processing.delete(key);
+        };
+        // Find all computed properties that need to be recomputed
+        for (const [key, deps] of Object.entries(this.#computedDependencies)) {
+            // Check if any dependency has changed
+            if (deps.some(dep => allChanges.has(dep))) {
+                compute(key);
+            }
         }
-        // Combine all changes
-        const allChanges = [...dataChanges, ...computedChanges];
-        // Update the DOM
-        this.#vNode.update({
-            bindings: this.#bindings,
-            changedIdentifiers: allChanges,
-            isInitial: false
-        });
     }
     /**
      * Executes a callback after the next DOM update.
      * @param callback The callback to execute.
      */
-    nextTick(callback) {
+    #nextTick(callback) {
         if (this.#updateScheduled) {
             queueMicrotask(() => {
                 queueMicrotask(callback);