@mintjamsinc/ichigojs 0.1.0 → 0.1.1

package/dist/ichigo.umd.js

@@ -6765,7 +6765,7 @@
         /**
          * 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.
@@ -6779,6 +6779,16 @@
          * 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.
          */
@@ -6796,7 +6806,7 @@
             // 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
@@ -6830,11 +6840,11 @@
          * @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() {
@@ -6843,6 +6853,18 @@
             };
             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.
@@ -6900,39 +6922,54 @@
          * 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.
@@ -6992,7 +7029,7 @@
          * @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
@@ -7000,7 +7037,7 @@
             // 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);
             };
@@ -7009,311 +7046,245 @@
 
     // 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 original target for each proxy.
+         * This allows us to avoid creating multiple proxies for the same object.
          */
-        addDirective(directive) {
-            this.#directives.push(directive);
-        }
+        static proxyMap = 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 changed key name.
+         * @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) {
+            // 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;
-                }
+            // If this object already has a proxy, return the existing proxy
+            if (this.proxyMap.has(target)) {
+                return this.proxyMap.get(target);
             }
-            return false;
+            // 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.
-    class VConditionalDirective {
+    /**
+     * 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 virtual node to which this directive is applied.
+         * The parent bindings, if any.
          */
-        #vNode;
+        #parent;
         /**
-         * 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).
+         * The key is the binding name, and the value is the binding value.
          */
-        #evaluate;
+        #local;
         /**
-         * The context for managing related conditional directives (v-if, v-else-if, v-else).
+         * The change tracker, if any.
          */
-        #conditionalContext;
+        #onChange;
         /**
-         * @param context The context for parsing the directive.
+         * The set of changed identifiers.
          */
-        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);
-        }
+        #changes = new Set();
         /**
-         * @inheritdoc
+         * Creates a new instance of VBindings.
+         * @param parent The parent bindings, if any.
          */
-        get vNode() {
-            return this.#vNode;
+        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];
+                },
+                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, () => {
+                            this.#changes.add(key);
+                            this.#onChange?.(key);
+                        });
+                    }
+                    const oldValue = Reflect.get(target, key);
+                    const result = Reflect.set(target, key, newValue);
+                    if ((oldValue !== newValue) || (typeof oldValue === 'object' || typeof newValue === 'object')) {
+                        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;
+                }
+            });
         }
         /**
-         * @inheritdoc
+         * Gets the raw bindings.
+         * If a key is not found locally, it searches parent bindings recursively.
          */
-        get needsAnchor() {
-            return true;
+        get raw() {
+            return this.#local;
         }
         /**
-         * @inheritdoc
+         * Indicates whether there are any changed identifiers.
          */
-        get bindingsPreparer() {
-            return undefined;
+        get hasChanges() {
+            if (this.#parent?.hasChanges) {
+                return true;
+            }
+            return this.#changes.size > 0;
         }
         /**
-         * @inheritdoc
+         * Gets the list of changed identifiers.
          */
-        get domUpdater() {
-            const identifiers = this.#identifiers ?? [];
-            const render = () => this.#render();
-            // Create an updater that handles the conditional rendering
-            const updater = {
-                get identifiers() {
-                    return identifiers;
-                },
-                applyToDOM() {
-                    render();
-                }
-            };
-            return updater;
+        get changes() {
+            const changes = new Set(this.#parent?.changes || []);
+            this.#changes.forEach(id => changes.add(id));
+            return Array.from(changes);
         }
         /**
-         * The context for managing related conditional directives (v-if, v-else-if, v-else).
+         * Indicates whether this is the root bindings (i.e., has no parent).
          */
-        get conditionalContext() {
-            return this.#conditionalContext;
+        get isRoot() {
+            return !this.#parent;
         }
         /**
-         * 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.
+         * Clears the set of changed identifiers.
          */
-        get conditionIsMet() {
-            if (!this.#evaluate) {
-                // No expression means always true (e.g., v-else)
-                return true;
-            }
-            return this.#evaluate();
+        clearChanges() {
+            this.#changes.clear();
         }
         /**
-         * @inheritdoc
+         * Sets a binding value.
+         * @param key The binding name.
+         * @param value The binding value.
          */
-        destroy() {
-            // Default implementation does nothing. Override in subclasses if needed.
+        set(key, value) {
+            this.#local[key] = value;
         }
         /**
-         * Renders the node based on the evaluation of the directive's condition.
-         * Inserts or removes the node from the DOM as needed.
+         * Gets a binding value.
+         * @param key The binding name.
+         * @returns The binding value, or undefined if not found.
          */
-        #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(key) {
+            return this.#local[key];
         }
         /**
-         * 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.
+         * 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.
          */
-        #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);
+        has(key, recursive = true) {
+            if (key in this.#local) {
+                return true;
             }
-            else {
-                // No anchor or parent VNode available
-                throw new Error("Cannot insert node: No anchor or parent VNode available.");
+            if (!recursive) {
+                return false;
             }
+            return this.#parent?.has(key) ?? false;
         }
         /**
-         * Removes the node from the DOM.
-         * If the node is not in the DOM, no action is taken.
+         * Removes a local binding.
+         * @param key The binding name.
          */
-        #removedNode() {
-            if (!this.#vNode.isInDOM) {
-                // Already removed from DOM, no action needed
-                return;
-            }
-            this.#vNode.node.parentNode?.removeChild(this.#vNode.node);
+        remove(key) {
+            delete this.#local[key];
         }
+    }
+
+    // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
+    class VDirectiveManager {
         /**
-         * 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.#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));
-            };
-        }
-        /**
-         * 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
-            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.");
-            }
-            // 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));
-        }
-    }
-
-    // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
-    class VDirectiveManager {
-        /**
-         * The virtual node to which this directive handler is associated.
+         * The virtual node to which this directive handler is associated.
          */
         #vNode;
         #directives;
@@ -7396,9 +7367,32 @@
         }
         #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,
@@ -7485,7 +7479,7 @@
                 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)));
                 });
@@ -7517,6 +7511,11 @@
     }
 
     // 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.
@@ -7548,12 +7547,6 @@
          * The data bindings associated with this virtual node, if any.
          */
         #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.
-         */
-        #bindingsPreparer;
         /**
          * An evaluator for text nodes that contain expressions in {{...}}.
          * This is used to dynamically update the text content based on data bindings.
@@ -7566,15 +7559,16 @@
          */
         #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.
@@ -7597,7 +7591,7 @@
             this.#nodeName = args.node.nodeName;
             this.#parentVNode = args.parentVNode;
             this.#bindings = args.bindings;
-            this.#bindingsPreparer = args.bindingsPreparer;
+            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;
@@ -7609,23 +7603,24 @@
             // 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);
             }
         }
         /**
@@ -7700,7 +7695,10 @@
          * 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.
@@ -7737,28 +7735,28 @@
          * 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 = [];
             // 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
@@ -7767,8 +7765,6 @@
             }
             // 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);
@@ -7782,129 +7778,128 @@
          * 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();
                 }
-                // 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),
-                    });
-                });
             }
+            // Apply DOM updaters from directives, if any
+            if (this.#directiveManager?.domUpdaters) {
+                for (const updater of this.#directiveManager.domUpdaters) {
+                    updater.applyToDOM();
+                }
+            }
+            // 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.
          * @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) {
+            // 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));
+            let hasIdentifier = dependent.dependentIdentifiers.some(id => this.preparableIdentifiers.includes(id));
             if (!hasIdentifier) {
-                if (!this.#parentVNode) {
-                    hasIdentifier = dependentNode.identifiers.some(id => this.#vApplication.preparableIdentifiers.includes(id));
-                }
+                hasIdentifier = dependent.dependentIdentifiers.some(id => this.#bindings?.has(id, false) ?? false);
             }
             // If the dependent node has an identifier in this node's identifiers, add it as a dependency
             if (hasIdentifier) {
                 // 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);
                 // 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)?.forEach(closer => closers.push(closer));
             // Return a closer to unregister the dependency
             return closers.length > 0 ? closers : undefined;
         }
@@ -7940,6 +7935,333 @@
         }
     }
 
+    // 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.
@@ -7964,7 +8286,7 @@
         /**
          * 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.
@@ -8002,7 +8324,7 @@
                 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
@@ -8036,11 +8358,11 @@
          * @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() {
@@ -8049,6 +8371,18 @@
             };
             return updater;
         }
+        /**
+         * @inheritdoc
+         */
+        get templatize() {
+            return true;
+        }
+        /**
+         * @inheritdoc
+         */
+        get dependentIdentifiers() {
+            return this.#dependentIdentifiers ?? [];
+        }
         /**
          * @inheritdoc
          */
@@ -8085,12 +8419,9 @@
             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);
@@ -8142,11 +8473,7 @@
                     else {
                         parent.appendChild(vNode.node);
                     }
-                    vNode.update({
-                        bindings: this.#vNode.bindings || {},
-                        changedIdentifiers: [],
-                        isInitial: true
-                    });
+                    vNode.forceUpdate();
                 }
                 else {
                     // Reuse existing item
@@ -8197,12 +8524,12 @@
          * 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);
             };
         }
@@ -8227,80 +8554,38 @@
             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,
+                bindings
             });
-            // 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;
+                vNode.bindings?.set(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);
-            }
-            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
@@ -8388,7 +8673,7 @@
         /**
          * 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.
@@ -8422,7 +8707,7 @@
             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();
@@ -8458,11 +8743,11 @@
          * @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() {
@@ -8471,6 +8756,18 @@
             };
             return updater;
         }
+        /**
+         * @inheritdoc
+         */
+        get templatize() {
+            return false;
+        }
+        /**
+         * @inheritdoc
+         */
+        get dependentIdentifiers() {
+            return this.#dependentIdentifiers ?? [];
+        }
         /**
          * @inheritdoc
          */
@@ -8541,8 +8838,6 @@
                 newValue = this.#applyModifiers(newValue);
                 // Update the binding
                 this.#updateBinding(newValue);
-                // Schedule a DOM update
-                this.#vNode.vApplication.scheduleUpdate();
             };
             element.addEventListener(eventName, this.#listener);
         }
@@ -8599,21 +8894,12 @@
             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.
@@ -8621,15 +8907,15 @@
          * @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);
             };
@@ -8658,7 +8944,7 @@
         /**
          * A list of variable and function names used in the directive's expression.
          */
-        #identifiers;
+        #dependentIdentifiers;
         /**
          * The event handler wrapper function, generated once and reused.
          */
@@ -8697,7 +8983,7 @@
             // 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
@@ -8737,6 +9023,18 @@
         get domUpdater() {
             return undefined;
         }
+        /**
+         * @inheritdoc
+         */
+        get templatize() {
+            return false;
+        }
+        /**
+         * @inheritdoc
+         */
+        get dependentIdentifiers() {
+            return this.#dependentIdentifiers ?? [];
+        }
         /**
          * @inheritdoc
          */
@@ -8761,6 +9059,35 @@
             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();
@@ -8789,27 +9116,26 @@
          * @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);
             };
         }
     }
@@ -8833,7 +9159,7 @@
         /**
          * 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.
@@ -8850,7 +9176,7 @@
             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);
@@ -8886,13 +9212,13 @@
          * @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() {
@@ -8907,6 +9233,18 @@
             };
             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.
@@ -8948,7 +9286,7 @@
          * @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
@@ -8956,7 +9294,7 @@
             // 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));
             };
@@ -9104,96 +9442,6 @@
         }
     }
 
-    // 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.
@@ -9235,18 +9483,10 @@
          * 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.
@@ -9265,65 +9505,7 @@
             // 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.
@@ -9361,12 +9543,6 @@
         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.
@@ -9376,8 +9552,8 @@
             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,
@@ -9385,70 +9561,165 @@
                 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: (key) => {
+                    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();
+            // 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 => this.#bindings?.changes.includes(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.#logger.debug(`Computed property '${key}' changed: ${oldValue} -> ${newValue}`);
                     }
                 }
+                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 => this.#bindings?.changes.includes(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);