@gogocat/data-bind 1.11.0 → 2.0.0

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

@@ -1,4 +1,5 @@
 import {getViewModelValue} from './util';
+import type {BindingCache, ViewModel, BindingAttrs} from './types';
 
 /**
  * modelBinding
@@ -8,23 +9,23 @@ import {getViewModelValue} from './util';
  * @param {object} bindingAttrs
  * @param {boolean} forceRender
  */
-const modelBinding = (cache, viewModel, bindingAttrs, forceRender) => {
+const modelBinding = (cache: BindingCache, viewModel: ViewModel, bindingAttrs: BindingAttrs, forceRender: boolean): void => {
     const dataKey = cache.dataKey;
-    let newValue = '';
-    const APP = viewModel.APP || viewModel.$root.APP;
+    let newValue: unknown = '';
+    const APP = viewModel.APP || viewModel.$root?.APP;
 
-    if (!dataKey || (!forceRender && !APP.$rootElement.contains(cache.el))) {
+    if (!dataKey || (!forceRender && !(APP?.$rootElement as HTMLElement)?.contains(cache.el))) {
         return;
     }
 
     newValue = getViewModelValue(viewModel, dataKey);
 
     if (typeof newValue !== 'undefined' && newValue !== null) {
-        const $element = cache.el;
+        const $element = cache.el as HTMLInputElement;
         const isCheckbox = $element.type === 'checkbox';
         const isRadio = $element.type === 'radio';
         const inputName = $element.name;
-        const $radioGroup = isRadio ? APP.$rootElement.querySelectorAll(`input[name="${inputName}"]`) : [];
+        const $radioGroup = isRadio ? (APP?.$rootElement as HTMLElement).querySelectorAll(`input[name="${inputName}"]`) : [];
         const oldValue = isCheckbox ? $element.checked : $element.value;
 
         // update element value
@@ -36,13 +37,14 @@ const modelBinding = (cache, viewModel, bindingAttrs, forceRender) => {
                 const radioGroupLength = $radioGroup.length;
 
                 for (i = 0; i < radioGroupLength; i += 1) {
-                    if ($radioGroup[i].value === newValue) {
-                        $radioGroup[i].checked = true;
+                    const radioInput = $radioGroup[i] as HTMLInputElement;
+                    if (radioInput.value === newValue) {
+                        radioInput.checked = true;
                         break;
                     }
                 }
             } else {
-                $element.value = newValue;
+                $element.value = String(newValue);
             }
         }
     }

package/src/postProcess.ts

@@ -0,0 +1,22 @@
+import {
+    each,
+    throwErrorMessage,
+} from './util';
+
+const postProcess = (tasks: Function[]): void => {
+    if (!tasks || !tasks.length) {
+        return;
+    }
+
+    each(tasks, (index: number, task: Function) => {
+        if (typeof task === 'function') {
+            try {
+                task();
+            } catch (err) {
+                throwErrorMessage(err, `Error postProcess: ${  String(task)}`);
+            }
+        }
+    });
+};
+
+export default postProcess;

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

@@ -10,47 +10,58 @@ import * as util from './util';
     };
  */
 
-const EVENTS = {};
+interface Subscriber {
+    [compId: string]: Function | boolean | undefined;
+    isOnce?: boolean;
+}
 
-const subscribeEvent = (instance = null, eventName = '', fn, isOnce = false) => {
-    if (!instance || !instance.compId || !eventName || typeof fn !== 'function') {
+interface Events {
+    [eventName: string]: Subscriber[];
+}
+
+const EVENTS: Events = {};
+
+export const subscribeEvent = (instance: unknown = null, eventName: string = '', fn: Function, isOnce: boolean = false): void => {
+    if (!instance || typeof instance !== 'object' || !('compId' in instance) || !instance.compId || !eventName || typeof fn !== 'function') {
         return;
     }
 
-    let subscriber;
+    let subscriber: Subscriber;
     let isSubscribed = false;
 
     eventName = eventName.replace(util.REGEX.WHITE_SPACES, '');
     EVENTS[eventName] = EVENTS[eventName] || [];
     // check if already subscribed and update callback fn
+    const instanceWithViewModel = instance as { compId: string | number; viewModel: unknown };
     isSubscribed = EVENTS[eventName].some((subscriber) => {
-        if (subscriber[instance.compId]) {
-            subscriber[instance.compId] = fn.bind(instance.viewModel);
+        if (subscriber[instanceWithViewModel.compId]) {
+            subscriber[instanceWithViewModel.compId] = fn.bind(instanceWithViewModel.viewModel);
             subscriber.isOnce = isOnce;
             return true;
         }
+        return false;
     });
     // push if not yet subscribe
     if (!isSubscribed) {
         subscriber = {};
-        subscriber[instance.compId] = fn.bind(instance.viewModel);
+        subscriber[instanceWithViewModel.compId] = fn.bind(instanceWithViewModel.viewModel);
         subscriber.isOnce = isOnce;
         EVENTS[eventName].push(subscriber);
     }
 };
 
-const subscribeEventOnce = (instance = null, eventName = '', fn) => {
+export const subscribeEventOnce = (instance: unknown = null, eventName: string = '', fn: Function): void => {
     subscribeEvent(instance, eventName, fn, true);
 };
 
-const unsubscribeEvent = (compId = '', eventName = '') => {
+export const unsubscribeEvent = (compId: string | number = '', eventName: string = ''): void => {
     if (!compId || !eventName) {
         return;
     }
 
     let i = 0;
     let subscribersLength = 0;
-    let subscriber;
+    let subscriber: Subscriber;
 
     eventName = eventName.replace(util.REGEX.WHITE_SPACES, '');
 
@@ -65,7 +76,7 @@ const unsubscribeEvent = (compId = '', eventName = '') => {
         }
     }
     // delete the event if no more subscriber
-    if (!EVENTS[eventName].length) {
+    if (EVENTS[eventName] && !EVENTS[eventName].length) {
         delete EVENTS[eventName];
     }
 };
@@ -75,7 +86,7 @@ const unsubscribeEvent = (compId = '', eventName = '') => {
  * @description unsubscribe all event by compId. eg when a component removed
  * @param {string} compId
  */
-const unsubscribeAllEvent = (compId = '') => {
+export const unsubscribeAllEvent = (compId: string | number = ''): void => {
     if (!compId) {
         return;
     }
@@ -84,7 +95,7 @@ const unsubscribeAllEvent = (compId = '') => {
     });
 };
 
-const publishEvent = (eventName = '', ...args) => {
+export const publishEvent = (eventName: string = '', ...args: unknown[]): void => {
     if (!eventName || !EVENTS[eventName]) {
         return;
     }
@@ -103,5 +114,3 @@ const publishEvent = (eventName = '', ...args) => {
         });
     });
 };
-
-export {subscribeEvent, subscribeEventOnce, unsubscribeEvent, unsubscribeAllEvent, publishEvent};

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,
@@ -9,20 +9,27 @@ import {
     isEmptyObject,
 } from './util';
 import createBindingCache from './domWalker';
-import {renderIteration} from './binder';
+import renderIteration from './renderIteration';
 import {
     wrapCommentAround,
     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,
             });
         }