@mintjamsinc/ichigojs 0.1.21 → 0.1.23

package/dist/ichigo.umd.js

@@ -7423,6 +7423,16 @@
          * This prevents creating multiple proxies for the same object accessed from different paths.
          */
         static proxyCache = new WeakMap();
+        /**
+         * A WeakMap to track which objects are proxies, mapping proxy -> original target.
+         * This prevents double-wrapping of already proxied objects.
+         */
+        static proxyToTarget = new WeakMap();
+        /**
+         * A WeakSet to track objects marked as "raw" (non-reactive).
+         * These objects will not be wrapped with Proxy.
+         */
+        static rawObjects = new WeakSet();
         /**
          * Creates a reactive proxy for the given object.
          * The proxy will call the onChange callback whenever a property is modified.
@@ -7437,9 +7447,19 @@
             if (typeof target !== 'object' || target === null) {
                 return target;
             }
+            // Don't wrap objects marked as raw (non-reactive)
+            if (this.rawObjects.has(target)) {
+                return target;
+            }
             // Don't wrap built-in objects that have internal slots
             // These objects require their methods to be called with the correct 'this' context
-            if (target instanceof Date || target instanceof RegExp || target instanceof Error) {
+            // Use Object.prototype.toString for more reliable type checking
+            const typeTag = Object.prototype.toString.call(target);
+            if (typeTag === '[object Date]' || typeTag === '[object RegExp]' || typeTag === '[object Error]') {
+                return target;
+            }
+            // Check if the target is already a proxy - if so, return it as-is to prevent double-wrapping
+            if (this.proxyToTarget.has(target)) {
                 return target;
             }
             // Check if we already have a proxy for this target with this path
@@ -7460,8 +7480,14 @@
                     const value = Reflect.get(obj, key);
                     // If the value is an object or array, make it reactive too
                     if (typeof value === 'object' && value !== null) {
+                        // Don't wrap objects marked as raw (non-reactive)
+                        if (ReactiveProxy.rawObjects.has(value)) {
+                            return value;
+                        }
                         // Don't wrap built-in objects that have internal slots
-                        if (value instanceof Date || value instanceof RegExp || value instanceof Error) {
+                        // Use Object.prototype.toString for more reliable type checking
+                        const valueTypeTag = Object.prototype.toString.call(value);
+                        if (valueTypeTag === '[object Date]' || valueTypeTag === '[object RegExp]' || valueTypeTag === '[object Error]') {
                             return value;
                         }
                         // Build the nested path
@@ -7474,7 +7500,7 @@
                         const arrayMutationMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];
                         if (arrayMutationMethods.includes(key)) {
                             return function (...args) {
-                                const result = value.apply(this, args);
+                                const result = value.apply(obj, args);
                                 onChange(path || undefined);
                                 return result;
                             };
@@ -7503,6 +7529,8 @@
             });
             // Cache the proxy for this path
             pathMap.set(path, proxy);
+            // Track that this proxy wraps the target to prevent double-wrapping
+            this.proxyToTarget.set(proxy, target);
             return proxy;
         }
         /**
@@ -7526,6 +7554,32 @@
             // In a full implementation, we'd need to store a reverse mapping
             return obj;
         }
+        /**
+         * Marks an object as "raw" (non-reactive).
+         * Objects marked as raw will not be wrapped with Proxy when accessed from reactive objects.
+         * This is useful for objects that should not be reactive, such as:
+         * - Objects with private fields (class instances with # fields)
+         * - Third-party library instances
+         * - Objects used only for method calls
+         *
+         * @param obj The object to mark as raw.
+         * @returns The same object (for chaining).
+         */
+        static markRaw(obj) {
+            if (typeof obj === 'object' && obj !== null) {
+                this.rawObjects.add(obj);
+            }
+            return obj;
+        }
+        /**
+         * Checks if an object is marked as raw (non-reactive).
+         *
+         * @param obj The object to check.
+         * @returns True if the object is marked as raw, false otherwise.
+         */
+        static isRaw(obj) {
+            return typeof obj === 'object' && obj !== null && this.rawObjects.has(obj);
+        }
     }
 
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
@@ -7559,6 +7613,10 @@
          * Cache for array lengths to detect length changes when the same object reference is used.
          */
         #lengthCache = new Map();
+        /**
+         * Flag to suppress onChange callbacks temporarily.
+         */
+        #suppressOnChange = false;
         /**
          * Creates a new instance of VBindings.
          * @param parent The parent bindings, if any.
@@ -7597,7 +7655,9 @@
                                 this.#logger?.debug(`Binding changed: ${path}`);
                                 this.#changes.add(path);
                             }
-                            this.#onChange?.(changedPath);
+                            if (!this.#suppressOnChange) {
+                                this.#onChange?.(changedPath);
+                            }
                         }, key);
                     }
                     const oldValue = Reflect.get(target, key);
@@ -7622,7 +7682,9 @@
                             this.#logger.debug(`Binding set on ${target === obj ? 'local' : 'parent'}: ${key}: ${oldValuePreview} -> ${newValuePreview}`);
                         }
                         this.#changes.add(key);
-                        this.#onChange?.(key);
+                        if (!this.#suppressOnChange) {
+                            this.#onChange?.(key);
+                        }
                     }
                     return result;
                 },
@@ -7709,6 +7771,21 @@
         remove(key) {
             delete this.#local[key];
         }
+        /**
+         * Sets a binding value without triggering onChange callback.
+         * This is useful for internal updates that shouldn't trigger reactivity.
+         * @param key The binding name.
+         * @param value The binding value.
+         */
+        setSilent(key, value) {
+            this.#suppressOnChange = true;
+            try {
+                this.#local[key] = value;
+            }
+            finally {
+                this.#suppressOnChange = false;
+            }
+        }
     }
 
     // Copyright (c) 2025 MintJams Inc. Licensed under MIT License.
@@ -9230,7 +9307,10 @@
                         vApplication: this.#vNode.vApplication,
                         parentVNode: this.#vNode.parentVNode,
                         bindings,
-                        dependentIdentifiers: [`${this.#sourceName}[${context.index}]`]
+                        dependentIdentifiers: [
+                            `${this.#sourceName}[${context.index}]`,
+                            ...this.#vNode.vApplication.resolveDependentIdentifiers(this.#sourceName, context.item)
+                        ],
                     });
                     newRenderedItems.set(key, vNode);
                     vNode.forceUpdate();
@@ -11078,6 +11158,10 @@
          * The application options.
          */
         #options;
+        /**
+         * The parent application, if any.
+         */
+        #parentApplication;
         /**
          * The global directive parser registry.
          */
@@ -11116,12 +11200,12 @@
         #updateScheduled = false;
         /**
          * Creates an instance of the virtual application.
-         * @param options The application options.
-         * @param directiveParserRegistry The global directive parser registry.
-         * @param componentRegistry The global component registry.
+         * @param args The initialization arguments for the application.
          */
-        constructor(options, directiveParserRegistry, componentRegistry) {
+        constructor(args) {
+            const { options, parentApplication: parentApplication, directiveParserRegistry, componentRegistry } = args;
             this.#options = options;
+            this.#parentApplication = parentApplication;
             this.#directiveParserRegistry = directiveParserRegistry;
             this.#componentRegistry = componentRegistry;
             // Initialize log manager and logger
@@ -11134,6 +11218,12 @@
             // Initialize bindings from data, computed, and methods
             this.#initializeBindings();
         }
+        /**
+         * Gets the parent application, if any.
+         */
+        get parentApplication() {
+            return this.#parentApplication;
+        }
         /**
          * Gets the global directive parser registry.
          */
@@ -11213,7 +11303,12 @@
          * @returns The created child application instance.
          */
         createChildApp(options) {
-            return new VApplication(options, this.#directiveParserRegistry, this.#componentRegistry);
+            return new VApplication({
+                options,
+                parentApplication: this,
+                directiveParserRegistry: this.#directiveParserRegistry,
+                componentRegistry: this.#componentRegistry
+            });
         }
         /**
          * Cleans the element by removing unnecessary whitespace text nodes.
@@ -11245,6 +11340,26 @@
                 }
             }
         }
+        /**
+         * Computes dependent identifiers for a given computed property and value.
+         * This is used to track dependencies in directives like v-for.
+         * @param computedName The name of the computed property.
+         * @param value The value to check for dependencies.
+         * @returns An array of dependent identifiers.
+         */
+        resolveDependentIdentifiers(computedName, value) {
+            const identifiers = [];
+            for (const dep of this.#computedDependencies[computedName] || []) {
+                const depValue = this.#bindings?.get(dep);
+                if (Array.isArray(depValue)) {
+                    const idx = depValue.indexOf(value);
+                    if (idx !== -1) {
+                        identifiers.push(`${dep}[${idx}]`);
+                    }
+                }
+            }
+            return identifiers;
+        }
         /**
          * Initializes bindings from data, computed properties, and methods.
          * @returns The initialized bindings object.
@@ -11259,6 +11374,7 @@
             });
             // Inject utility methods into bindings
             this.#bindings.set('$nextTick', (callback) => this.#nextTick(callback));
+            this.#bindings.set('$markRaw', (obj) => ReactiveProxy.markRaw(obj));
             // Add methods
             if (this.#options.methods) {
                 for (const [key, method] of Object.entries(this.#options.methods)) {
@@ -11273,7 +11389,13 @@
             }
             // Add data properties
             if (this.#options.data) {
-                const data = this.#options.data();
+                // Create a $ctx context object with utility functions for data()
+                // This provides the same $markRaw access as in lifecycle hooks (@mount, etc.)
+                const $ctx = {
+                    $markRaw: (obj) => ReactiveProxy.markRaw(obj)
+                };
+                // Call data() with $ctx as 'this'
+                const data = this.#options.data.call($ctx);
                 if (data && typeof data === 'object') {
                     for (const [key, value] of Object.entries(data)) {
                         this.#bindings.set(key, value);
@@ -11356,9 +11478,15 @@
                 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);
+                    // Check if the value actually changed
+                    let hasChanged = oldValue !== newValue;
+                    // For arrays, always update (VBindings will detect length changes via its length cache)
+                    if (!hasChanged && Array.isArray(newValue)) {
+                        hasChanged = true;
+                    }
+                    if (hasChanged) {
+                        // Use setSilent to avoid triggering onChange during computed property updates
+                        this.#bindings?.setSilent(key, newValue);
                         allChanges.add(key);
                     }
                 }
@@ -11447,10 +11575,15 @@
          * @returns The created virtual application instance.
          */
         static createApp(options) {
-            return new VApplication(options, this.#directiveParserRegistry, this.#componentRegistry);
+            return new VApplication({
+                options,
+                directiveParserRegistry: this.#directiveParserRegistry,
+                componentRegistry: this.#componentRegistry
+            });
         }
     }
 
+    exports.ReactiveProxy = ReactiveProxy;
     exports.VComponent = VComponent;
     exports.VComponentRegistry = VComponentRegistry;
     exports.VDOM = VDOM;