@gogocat/data-bind 1.12.0 → 2.0.0

package/src/reactiveProxy.ts

@@ -0,0 +1,285 @@
+import type {ViewModel} from './types';
+
+interface ReactiveOptions {
+    onChange: () => void;
+    deep?: boolean;
+    trackChanges?: boolean;
+}
+
+interface ChangeTracker {
+    changedPaths: Set<string>;
+}
+
+// WeakMap to store proxy metadata
+const PROXY_MARKER = Symbol('isReactiveProxy');
+const ORIGINAL_TARGET = Symbol('originalTarget');
+
+/**
+ * Check if an object is already a reactive proxy
+ */
+function isReactiveProxy(obj: unknown): boolean {
+    return obj !== null && typeof obj === 'object' && (obj as Record<symbol, unknown>)[PROXY_MARKER] === true;
+}
+
+/**
+ * Get the original target from a proxy
+ */
+function getOriginalTarget<T>(obj: T): T {
+    if (isReactiveProxy(obj)) {
+        return (obj as Record<symbol, unknown>)[ORIGINAL_TARGET] as T;
+    }
+    return obj;
+}
+
+/**
+ * Create a reactive proxy that automatically triggers onChange when properties are modified
+ * Supports deep proxying for nested objects and arrays
+ */
+export function createReactiveProxy<T extends ViewModel>(
+    target: T,
+    options: ReactiveOptions,
+    path: string = '',
+    tracker?: ChangeTracker,
+): T {
+    const {onChange, deep = true, trackChanges = false} = options;
+
+    // Don't proxy non-objects
+    if (target === null || typeof target !== 'object') {
+        return target;
+    }
+
+    // Don't re-proxy already proxied objects
+    if (isReactiveProxy(target)) {
+        return target;
+    }
+
+    // Skip proxying special properties to avoid circular issues
+    const skipProps = ['APP', '$root', '__proto__', 'constructor'];
+    if (skipProps.includes(path)) {
+        return target;
+    }
+
+    // Track changes if enabled
+    const changeTracker = tracker || (trackChanges ? {changedPaths: new Set<string>()} : undefined);
+
+    // Store proxied nested objects to reuse same proxy
+    const proxiedChildren = new Map<string | symbol, unknown>();
+
+    const handler: ProxyHandler<T> = {
+        set(obj, prop, value) {
+            // Skip internal properties
+            if (typeof prop === 'symbol') {
+                (obj as Record<symbol, unknown>)[prop] = value;
+                return true;
+            }
+
+            const oldValue = obj[prop as keyof T];
+
+            // Only trigger if value actually changed
+            if (oldValue === value) {
+                return true;
+            }
+
+            // Set the new value
+            obj[prop as keyof T] = value;
+
+            // Clear cached proxy for this property since value changed
+            proxiedChildren.delete(prop);
+
+            // Track the changed path
+            if (changeTracker) {
+                const fullPath = path ? `${path}.${String(prop)}` : String(prop);
+                changeTracker.changedPaths.add(fullPath);
+            }
+
+            // Trigger onChange callback (debounced render)
+            onChange();
+
+            return true;
+        },
+
+        get(obj, prop) {
+            // Return proxy markers
+            if (prop === PROXY_MARKER) {
+                return true;
+            }
+            if (prop === ORIGINAL_TARGET) {
+                return obj;
+            }
+
+            const value = obj[prop as keyof T];
+
+            // Don't proxy functions, symbols, or special properties
+            if (
+                typeof value === 'function' ||
+                typeof prop === 'symbol' ||
+                skipProps.includes(String(prop))
+            ) {
+                return value;
+            }
+
+            // If deep proxying is enabled and value is an object, wrap it in proxy
+            if (deep && value !== null && typeof value === 'object') {
+                // Return cached proxy if exists
+                if (proxiedChildren.has(prop)) {
+                    return proxiedChildren.get(prop);
+                }
+
+                const fullPath = path ? `${path}.${String(prop)}` : String(prop);
+                const proxied = Array.isArray(value)
+                    ? createReactiveArray(value as unknown[], onChange, options, fullPath, changeTracker)
+                    : createReactiveProxy(value as ViewModel, options, fullPath, changeTracker);
+
+                // Cache the proxy
+                proxiedChildren.set(prop, proxied);
+
+                return proxied;
+            }
+
+            return value;
+        },
+
+        deleteProperty(obj, prop) {
+            if (typeof prop === 'symbol') {
+                delete (obj as Record<symbol, unknown>)[prop];
+                return true;
+            }
+
+            delete obj[prop as keyof T];
+
+            // Clear cached proxy
+            proxiedChildren.delete(prop);
+
+            // Track deletion
+            if (changeTracker) {
+                const fullPath = path ? `${path}.${String(prop)}` : String(prop);
+                changeTracker.changedPaths.add(fullPath);
+            }
+
+            onChange();
+            return true;
+        },
+    };
+
+    return new Proxy(target, handler);
+}
+
+/**
+ * Special handling for arrays to intercept mutating methods
+ */
+export function createReactiveArray<T extends unknown[]>(
+    target: T,
+    onChange: () => void,
+    options: ReactiveOptions,
+    path: string = '',
+    tracker?: ChangeTracker,
+): T {
+    const {deep = true} = options;
+
+    // Don't re-proxy already proxied arrays
+    if (isReactiveProxy(target)) {
+        return target;
+    }
+
+    const handler: ProxyHandler<T> = {
+        set(obj, prop, value) {
+            // Handle symbol properties
+            if (typeof prop === 'symbol') {
+                (obj as Record<symbol, unknown>)[prop] = value;
+                return true;
+            }
+
+            const oldValue = obj[prop as keyof T];
+
+            // Only trigger if value actually changed
+            if (oldValue === value) {
+                return true;
+            }
+
+            obj[prop as keyof T] = value;
+
+            // Track changes
+            if (tracker) {
+                const fullPath = path ? `${path}[${String(prop)}]` : `[${String(prop)}]`;
+                tracker.changedPaths.add(fullPath);
+            }
+
+            onChange();
+            return true;
+        },
+
+        get(obj, prop) {
+            // Return proxy markers
+            if (prop === PROXY_MARKER) {
+                return true;
+            }
+            if (prop === ORIGINAL_TARGET) {
+                return obj;
+            }
+
+            const value = obj[prop as keyof T];
+
+            // Intercept array mutating methods
+            if (typeof value === 'function') {
+                const mutatingMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse', 'fill'];
+                if (mutatingMethods.includes(String(prop))) {
+                    return function (this: T, ...args: unknown[]) {
+                        const result = (value as Function).apply(this, args);
+
+                        // Track change
+                        if (tracker) {
+                            tracker.changedPaths.add(path || 'array');
+                        }
+
+                        onChange();
+                        return result;
+                    };
+                }
+            }
+
+            // Deep proxy array elements if they are objects
+            if (deep && value !== null && typeof value === 'object' && typeof prop !== 'symbol') {
+                const fullPath = path ? `${path}[${String(prop)}]` : `[${String(prop)}]`;
+                if (Array.isArray(value)) {
+                    return createReactiveArray(value as unknown[], onChange, options, fullPath, tracker);
+                }
+                return createReactiveProxy(value as ViewModel, options, fullPath, tracker);
+            }
+
+            return value;
+        },
+
+        deleteProperty(obj, prop) {
+            if (typeof prop === 'symbol') {
+                delete (obj as Record<symbol, unknown>)[prop];
+                return true;
+            }
+
+            delete obj[prop as keyof T];
+
+            if (tracker) {
+                const fullPath = path ? `${path}[${String(prop)}]` : `[${String(prop)}]`;
+                tracker.changedPaths.add(fullPath);
+            }
+
+            onChange();
+            return true;
+        },
+    };
+
+    return new Proxy(target, handler);
+}
+
+/**
+ * Utility to get the original object from a reactive proxy
+ */
+export function toRaw<T>(obj: T): T {
+    return getOriginalTarget(obj);
+}
+
+/**
+ * Check if Proxy is supported
+ */
+export function isProxySupported(): boolean {
+    return typeof Proxy !== 'undefined';
+}

package/src/{renderForOfBinding.js → renderForOfBinding.ts}

@@ -1,4 +1,4 @@
-/* eslint-disable no-invalid-this */
+
 import {bindingAttrs as configBindingAttrs, bindingDataReference} from './config';
 import {
     getViewModelPropValue,
@@ -15,14 +15,21 @@ import {
     removeElemnetsByCommentWrap,
     insertRenderedElements,
 } from './commentWrapper';
+import type {ViewModel, BindingCache, BindingAttrs, ElementCache} from './types';
 
-const renderForOfBinding = ({bindingData, viewModel, bindingAttrs}) => {
+const renderForOfBinding = ({bindingData, viewModel, bindingAttrs}: {
+    bindingData: BindingCache;
+    viewModel: ViewModel;
+    bindingAttrs: BindingAttrs;
+}): void => {
     if (!bindingData || !viewModel || !bindingAttrs) {
         return;
     }
-    let keys;
-    let iterationDataLength;
-    const iterationData = getViewModelPropValue(viewModel, bindingData.iterator);
+    let keys: string[] | undefined;
+    let iterationDataLength: number;
+    // FIX: Use bindingData.iterator instead of bindingData to get the iteration data
+    // The iterator object has the dataKey pointing to the array/object to iterate over
+    const iterationData = getViewModelPropValue(viewModel, bindingData.iterator as BindingCache);
     let isRegenerate = false;
 
     // check iterationData and set iterationDataLength
@@ -57,19 +64,19 @@ const renderForOfBinding = ({bindingData, viewModel, bindingAttrs}) => {
     }
 
     if (!isRegenerate) {
-        bindingData.iterationBindingCache.forEach(function(elementCache, i) {
+        (bindingData.iterationBindingCache as ElementCache[])?.forEach((elementCache: ElementCache, i: number) => {
             if (!isEmptyObject(elementCache)) {
                 const iterationVm = createIterationViewModel({
-                    bindingData: bindingData,
-                    viewModel: viewModel,
-                    iterationData: iterationData,
-                    keys: keys,
+                    bindingData,
+                    viewModel,
+                    iterationData,
+                    keys,
                     index: i,
                 });
                 renderIteration({
-                    elementCache: elementCache,
-                    iterationVm: iterationVm,
-                    bindingAttrs: bindingAttrs,
+                    elementCache,
+                    iterationVm,
+                    bindingAttrs,
                     isRegenerate: false,
                 });
             }
@@ -97,27 +104,42 @@ const renderForOfBinding = ({bindingData, viewModel, bindingAttrs}) => {
  * @param {*} param0
  * @return {object} virtual viewModel
  */
-const createIterationViewModel = ({bindingData, viewModel, iterationData, keys, index}) => {
-    const iterationVm = {};
-    iterationVm[bindingData.iterator.alias] = keys ? iterationData[keys[index]] : iterationData[index];
+const createIterationViewModel = ({bindingData, viewModel, iterationData, keys, index}: {
+    bindingData: BindingCache;
+    viewModel: ViewModel;
+    iterationData: unknown;
+    keys: string[] | undefined;
+    index: number;
+}): ViewModel => {
+    const iterationVm: ViewModel = {};
+    const alias = bindingData.iterator?.alias;
+    if (alias) {
+        iterationVm[alias] = keys ? (iterationData as Record<string, unknown>)[keys[index]] : (iterationData as unknown[])[index];
+    }
     // populate common binding data reference
     iterationVm[bindingDataReference.rootDataKey] = viewModel.$root || viewModel;
-    iterationVm[bindingDataReference.currentData] = iterationVm[bindingData.iterator.alias];
+    iterationVm[bindingDataReference.currentData] = alias ? iterationVm[alias] : undefined;
     iterationVm[bindingDataReference.currentIndex] = index;
     return iterationVm;
 };
 
-const generateForOfElements = (bindingData, viewModel, bindingAttrs, iterationData, keys) => {
+const generateForOfElements = (
+    bindingData: BindingCache,
+    viewModel: ViewModel,
+    bindingAttrs: BindingAttrs,
+    iterationData: unknown,
+    keys: string[] | undefined,
+): DocumentFragment => {
     const fragment = document.createDocumentFragment();
-    const iterationDataLength = bindingData.iterationSize;
-    let clonedItem;
-    let iterationVm;
-    let iterationBindingCache;
+    const iterationDataLength = bindingData.iterationSize as number;
+    let clonedItem: HTMLElement;
+    let iterationVm: ViewModel;
+    let iterationBindingCache: ElementCache;
     let i = 0;
 
     // create or clear exisitng iterationBindingCache
     if (isArray(bindingData.iterationBindingCache)) {
-        bindingData.iterationBindingCache.length = 0;
+        (bindingData.iterationBindingCache as ElementCache[]).length = 0;
     } else {
         bindingData.iterationBindingCache = [];
     }
@@ -129,25 +151,25 @@ const generateForOfElements = (bindingData, viewModel, bindingAttrs, iterationDa
         // create bindingCache per iteration
         iterationBindingCache = createBindingCache({
             rootNode: clonedItem,
-            bindingAttrs: bindingAttrs,
+            bindingAttrs,
         });
 
-        bindingData.iterationBindingCache.push(iterationBindingCache);
+        (bindingData.iterationBindingCache as ElementCache[]).push(iterationBindingCache);
 
         if (!isEmptyObject(iterationBindingCache)) {
             // create an iterationVm match iterator alias
             iterationVm = createIterationViewModel({
-                bindingData: bindingData,
-                viewModel: viewModel,
-                iterationData: iterationData,
-                keys: keys,
+                bindingData,
+                viewModel,
+                iterationData,
+                keys,
                 index: i,
             });
 
             renderIteration({
-                elementCache: bindingData.iterationBindingCache[i],
-                iterationVm: iterationVm,
-                bindingAttrs: bindingAttrs,
+                elementCache: (bindingData.iterationBindingCache as ElementCache[])[i],
+                iterationVm,
+                bindingAttrs,
                 isRegenerate: true,
             });
         }

package/src/{renderIfBinding.js → renderIfBinding.ts}

@@ -3,6 +3,13 @@ import renderIteration from './renderIteration';
 import createBindingCache from './domWalker';
 import {commentSuffix} from './config';
 import {removeElemnetsByCommentWrap, insertRenderedElements} from './commentWrapper';
+import type {BindingCache, ViewModel, BindingAttrs, ElementCache} from './types';
+
+interface RenderIfBindingParams {
+    bindingData: BindingCache;
+    viewModel: ViewModel;
+    bindingAttrs: BindingAttrs;
+}
 
 /**
  * isTargetDomRemoved
@@ -10,13 +17,13 @@ import {removeElemnetsByCommentWrap, insertRenderedElements} from './commentWrap
  * @param {object} bindingData
  * @return {boolean}
  */
-const isTargetDomRemoved = (bindingData) => {
+const isTargetDomRemoved = (bindingData: BindingCache): boolean => {
     let ret = false;
     if (bindingData && bindingData.previousNonTemplateElement) {
         const commentStartTextContent = bindingData.previousNonTemplateElement.textContent;
         const endCommentTag = bindingData.previousNonTemplateElement.nextSibling;
 
-        if (endCommentTag.nodeType === 8) {
+        if (endCommentTag && endCommentTag.nodeType === 8) {
             if (endCommentTag.textContent === commentStartTextContent + commentSuffix) {
                 ret = true;
             }
@@ -25,27 +32,51 @@ const isTargetDomRemoved = (bindingData) => {
     return ret;
 };
 
-const renderIfBinding = ({bindingData, viewModel, bindingAttrs}) => {
+/**
+ * removeIfBinding
+ * @description remove if binding DOM and clean up cache
+ * @param {object} bindingData
+ */
+const removeIfBinding = (bindingData: BindingCache): void => {
+    removeElemnetsByCommentWrap(bindingData);
+    // remove cache.IterationBindingCache to prevent memory leak
+    if (bindingData.hasIterationBindingCache) {
+        delete bindingData.iterationBindingCache;
+        delete bindingData.hasIterationBindingCache;
+    }
+};
+
+/**
+ * renderIfBinding
+ * @description render if binding DOM
+ * @param {object} bindingData
+ * @param {object} viewModel
+ * @param {object} bindingAttrs
+ */
+const renderIfBinding = ({bindingData, viewModel, bindingAttrs}: RenderIfBindingParams): void => {
     if (!bindingData.fragment) {
         return;
     }
 
     const isDomRemoved = isTargetDomRemoved(bindingData);
-    let rootElement = bindingData.el;
+    let rootElement: Node = bindingData.el;
 
     // remove current old DOM.
     // TODO: try preserve DOM
     if (!isDomRemoved && !bindingData.isOnce) {
         removeIfBinding(bindingData);
         // use fragment for create iterationBindingCache
-        rootElement = bindingData.fragment.firstChild.cloneNode(true);
+        const firstChild = bindingData.fragment.firstChild;
+        if (firstChild) {
+            rootElement = firstChild.cloneNode(true);
+        }
     }
 
     // walk clonedElement to create iterationBindingCache once
     if (!bindingData.iterationBindingCache || !bindingData.hasIterationBindingCache) {
         bindingData.iterationBindingCache = createBindingCache({
-            rootNode: rootElement,
-            bindingAttrs: bindingAttrs,
+            rootNode: rootElement as HTMLElement,
+            bindingAttrs,
         });
     }
 
@@ -54,25 +85,16 @@ const renderIfBinding = ({bindingData, viewModel, bindingAttrs}) => {
     if (!isEmptyObject(bindingData.iterationBindingCache)) {
         bindingData.hasIterationBindingCache = true;
         renderIteration({
-            elementCache: bindingData.iterationBindingCache,
+            elementCache: bindingData.iterationBindingCache as ElementCache,
             iterationVm: viewModel,
-            bindingAttrs: bindingAttrs,
+            bindingAttrs,
             isRegenerate: true,
         });
     }
 
     // insert to new rendered DOM
     // TODO: check unnecessary insertion when DOM is preserved
-    insertRenderedElements(bindingData, rootElement);
-};
-
-const removeIfBinding = (bindingData) => {
-    removeElemnetsByCommentWrap(bindingData);
-    // remove cache.IterationBindingCache to prevent memory leak
-    if (bindingData.hasIterationBindingCache) {
-        delete bindingData.iterationBindingCache;
-        delete bindingData.hasIterationBindingCache;
-    }
+    insertRenderedElements(bindingData, rootElement as DocumentFragment);
 };
 
 export {

package/src/{renderIteration.js → renderIteration.ts}

@@ -1,7 +1,10 @@
 import {bindingUpdateConditions} from './config';
-import applyBinding from './applyBindingExport';
 import createBindingOption from './createBindingOption';
 import renderTemplatesBinding from './renderTemplatesBinding';
+import * as applyBindingModule from './applyBinding';
+import type {ElementCache, ViewModel, BindingAttrs} from './types';
+import type Binder from './binder';
+
 /**
  * renderIteration
  * @param {object} opt
@@ -9,7 +12,17 @@ import renderTemplatesBinding from './renderTemplatesBinding';
  * render element's binding by supplied elementCache
  * This function is desidned for FoOf, If, switch bindings
  */
-const renderIteration = ({elementCache, iterationVm, bindingAttrs, isRegenerate}) => {
+const renderIteration = ({
+    elementCache,
+    iterationVm,
+    bindingAttrs,
+    isRegenerate,
+}: {
+    elementCache: ElementCache;
+    iterationVm: ViewModel;
+    bindingAttrs: BindingAttrs;
+    isRegenerate: boolean;
+}): void => {
     const bindingUpdateOption = isRegenerate ? createBindingOption(bindingUpdateConditions.init) : createBindingOption();
 
     // enforce render even element is not in DOM tree
@@ -19,17 +32,20 @@ const renderIteration = ({elementCache, iterationVm, bindingAttrs, isRegenerate}
     // this is an share function therefore passing current APP 'this' context
     // viewModel is a dynamic generated iterationVm
     renderTemplatesBinding({
-        ctx: iterationVm.$root ? iterationVm.$root.APP : iterationVm.APP,
-        elementCache: elementCache,
+        ctx: (iterationVm.$root ? iterationVm.$root.APP : iterationVm.APP) as Binder,
+        elementCache,
         updateOption: bindingUpdateOption,
-        bindingAttrs: bindingAttrs,
+        bindingAttrs,
         viewModel: iterationVm,
     });
 
-    applyBinding({
-        elementCache: elementCache,
+    // Use namespace import to access the function at runtime,
+    // which breaks the circular dependency during module initialization
+    applyBindingModule.default({
+        ctx: (iterationVm.$root ? iterationVm.$root.APP : iterationVm.APP) as Binder,
+        elementCache,
         updateOption: bindingUpdateOption,
-        bindingAttrs: bindingAttrs,
+        bindingAttrs,
         viewModel: iterationVm,
     });
 };