@gogocat/data-bind 1.12.0 → 2.0.0

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

@@ -1,6 +1,7 @@
 import {maxDatakeyLength} from './config';
 import {REGEX} from './util';
 import renderForOfBinding from './renderForOfBinding';
+import type {BindingCache, ViewModel, BindingAttrs} from './types';
 
 /**
  * forOfBinding
@@ -10,7 +11,7 @@ import renderForOfBinding from './renderForOfBinding';
  * @param {object} viewModel
  * @param {object} bindingAttrs
  */
-const forOfBinding = (cache, viewModel, bindingAttrs) => {
+const forOfBinding = (cache: BindingCache, viewModel: ViewModel, bindingAttrs: BindingAttrs, _forceRender?: boolean): void => {
     const dataKey = cache.dataKey;
 
     if (!dataKey || dataKey.length > maxDatakeyLength) {
@@ -42,8 +43,8 @@ const forOfBinding = (cache, viewModel, bindingAttrs) => {
 
     renderForOfBinding({
         bindingData: cache,
-        viewModel: viewModel,
-        bindingAttrs: bindingAttrs,
+        viewModel,
+        bindingAttrs,
     });
 };
 

package/src/hoverBinding.ts

@@ -0,0 +1,84 @@
+
+import {bindingDataReference} from './config';
+import {
+    getViewModelValue,
+    resolveViewModelContext,
+    resolveParamList,
+} from './util';
+import type {BindingCache, ViewModel, BindingAttrs, PlainObject} from './types';
+
+/**
+ * Create mouse enter handler
+ */
+const createMouseEnterHandler = (
+    cache: BindingCache,
+    handlers: PlainObject,
+    inHandlerName: string,
+    viewModelContext: ViewModel,
+    paramList: unknown[],
+): (e: MouseEvent) => void => {
+    return function onMouseEnterHandler(e: MouseEvent) {
+        const args = [e, cache.el, ...paramList];
+        (handlers[inHandlerName] as Function).apply(viewModelContext, args);
+    };
+};
+
+/**
+ * Create mouse leave handler
+ */
+const createMouseLeaveHandler = (
+    cache: BindingCache,
+    handlers: PlainObject,
+    outHandlerName: string,
+    viewModelContext: ViewModel,
+    paramList: unknown[],
+): (e: MouseEvent) => void => {
+    return function onMouseLeaveHandler(e: MouseEvent) {
+        const args = [e, cache.el, ...paramList];
+        (handlers[outHandlerName] as Function).apply(viewModelContext, args);
+    };
+};
+
+/**
+ * hoverBinding
+ * DOM decleartive on hover event binding
+ * event handler bind to viewModel method according to the DOM attribute
+ * @param {object} cache
+ * @param {object} viewModel
+ * @param {object} bindingAttrs
+ * @param {boolean} forceRender
+ */
+const hoverBinding = (cache: BindingCache, viewModel: ViewModel, bindingAttrs: BindingAttrs, forceRender: boolean): void => {
+    const handlerName = cache.dataKey;
+    let paramList = cache.parameters;
+    const inHandlerName = bindingDataReference.mouseEnterHandlerName;
+    const outHandlerName = bindingDataReference.mouseLeaveHandlerName;
+    let viewModelContext: ViewModel;
+    const APP = viewModel.APP || viewModel.$root?.APP;
+
+    cache.elementData = cache.elementData || {};
+
+    // TODO: check what is APP.$rootElement.contains(cache.el)
+    const rootElement = APP?.$rootElement as HTMLElement | undefined;
+    if (!handlerName || (!forceRender && rootElement && !rootElement.contains(cache.el))) {
+        return;
+    }
+
+    const handlers = getViewModelValue(viewModel, handlerName) as PlainObject;
+
+    if (handlers && typeof handlers[inHandlerName] === 'function' && typeof handlers[outHandlerName] === 'function') {
+        viewModelContext = resolveViewModelContext(viewModel, handlerName);
+        paramList = paramList ? resolveParamList(viewModel, paramList) : [];
+
+        const onMouseEnterHandler = createMouseEnterHandler(cache, handlers as PlainObject, inHandlerName, viewModelContext, paramList);
+        const onMouseLeaveHandler = createMouseLeaveHandler(cache, handlers as PlainObject, outHandlerName, viewModelContext, paramList);
+
+        cache.el.removeEventListener('mouseenter', onMouseEnterHandler, false);
+        cache.el.removeEventListener('mouseleave', onMouseLeaveHandler, false);
+
+        cache.el.addEventListener('mouseenter', onMouseEnterHandler, false);
+        cache.el.addEventListener('mouseleave', onMouseLeaveHandler, false);
+    }
+};
+
+export default hoverBinding;

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

@@ -2,6 +2,7 @@ import {bindingAttrs as configBindingAttrs, constants} from './config';
 import {getViewModelPropValue, removeElement} from './util';
 import {createClonedElementCache, wrapCommentAround} from './commentWrapper';
 import {renderIfBinding, removeIfBinding} from './renderIfBinding';
+import type {BindingCache, ViewModel, BindingAttrs} from './types';
 
 /**
  * if-Binding
@@ -11,7 +12,7 @@ import {renderIfBinding, removeIfBinding} from './renderIfBinding';
  * @param {object} viewModel
  * @param {object} bindingAttrs
  */
-const ifBinding = (cache, viewModel, bindingAttrs) => {
+const ifBinding = (cache: BindingCache, viewModel: ViewModel, bindingAttrs: BindingAttrs, _forceRender?: boolean): void => {
     const dataKey = cache.dataKey;
 
     // isOnce only return if there is no child bindings
@@ -38,8 +39,8 @@ const ifBinding = (cache, viewModel, bindingAttrs) => {
         removeElement(cache.el);
         // delete cache.fragment;
         removeBindingInQueue({
-            viewModel: viewModel,
-            cache: cache,
+            viewModel,
+            cache,
         });
         return;
     }
@@ -63,8 +64,8 @@ const ifBinding = (cache, viewModel, bindingAttrs) => {
         // render element
         renderIfBinding({
             bindingData: cache,
-            viewModel: viewModel,
-            bindingAttrs: bindingAttrs,
+            viewModel,
+            bindingAttrs,
         });
 
         // if render once
@@ -72,20 +73,21 @@ const ifBinding = (cache, viewModel, bindingAttrs) => {
         if (cache.isOnce && !cache.hasIterationBindingCache) {
             // delete cache.fragment;
             removeBindingInQueue({
-                viewModel: viewModel,
-                cache: cache,
+                viewModel,
+                cache,
             });
         }
     }
 };
 
-const removeBindingInQueue = ({viewModel, cache}) => {
+const removeBindingInQueue = ({viewModel, cache}: {viewModel: ViewModel; cache: BindingCache}): boolean => {
     let ret = false;
-    if (viewModel.APP.postProcessQueue) {
+    if (viewModel.APP?.postProcessQueue) {
+        const parentRef = cache[constants.PARENT_REF] as BindingCache[];
         viewModel.APP.postProcessQueue.push(
-            ((cache, index) => () => {
-                cache[constants.PARENT_REF].splice(index, 1);
-            })(cache, cache[constants.PARENT_REF].indexOf(cache)),
+            ((cache: BindingCache, index: number) => () => {
+                parentRef.splice(index, 1);
+            })(cache, parentRef.indexOf(cache)),
         );
         ret = true;
     }

package/src/index.ts

@@ -0,0 +1,53 @@
+import * as config from './config';
+import {extend} from './util';
+import Binder from './binder';
+import type {PlainObject, ViewModel, BindingAttrs, BinderOptions} from './types';
+
+const isSupportPromise = typeof window['Promise'] === 'function';
+
+let bindingAttrs = config.bindingAttrs;
+
+// Global default options for all Binder instances
+const defaultOptions: BinderOptions = {
+    reactive: true, // Enable reactive mode by default
+};
+
+interface DataBindAPI {
+    use: (settings: PlainObject) => DataBindAPI;
+    init: ($rootElement: HTMLElement, viewModel: ViewModel | null, options?: BinderOptions) => Binder | void;
+    version: string;
+}
+
+const use = (settings: PlainObject = {}): DataBindAPI => {
+    if (settings.bindingAttrs) {
+        bindingAttrs = extend(false, {}, settings.bindingAttrs as PlainObject) as unknown as typeof config.bindingAttrs;
+    }
+    // Allow setting global reactive option
+    if (typeof settings.reactive === 'boolean') {
+        defaultOptions.reactive = settings.reactive;
+    }
+    // Allow setting global trackChanges option
+    if (typeof settings.trackChanges === 'boolean') {
+        defaultOptions.trackChanges = settings.trackChanges;
+    }
+    // Return API for chaining
+    return api;
+};
+
+const init = ($rootElement: HTMLElement, viewModel: ViewModel | null = null, options?: BinderOptions): Binder | void => {
+    if (!isSupportPromise) {
+        return console.warn('Browser not support Promise');
+    }
+    // Merge global defaults with instance-specific options
+    // Instance options take precedence over global defaults
+    const mergedOptions = {...defaultOptions, ...options};
+    return new Binder($rootElement, viewModel, bindingAttrs as unknown as BindingAttrs, mergedOptions);
+};
+
+const api: DataBindAPI = {
+    use,
+    init,
+    version: '@version@',
+};
+
+export default api;

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.js → postProcess.ts}

@@ -3,18 +3,20 @@ import {
     throwErrorMessage,
 } from './util';
 
-export default function postProcess(tasks) {
+const postProcess = (tasks: Function[]): void => {
     if (!tasks || !tasks.length) {
         return;
     }
 
-    each(tasks, (index, task) => {
+    each(tasks, (index: number, task: Function) => {
         if (typeof task === 'function') {
             try {
                 task();
             } catch (err) {
-                throwErrorMessage(err, 'Error postProcess: ' + String(task));
+                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,11 +114,3 @@ const publishEvent = (eventName = '', ...args) => {
         });
     });
 };
-
-export {
-    subscribeEvent,
-    subscribeEventOnce,
-    unsubscribeEvent,
-    unsubscribeAllEvent,
-    publishEvent,
-};