@gogocat/data-bind 1.11.0 → 2.0.0

package/src/binder.ts

@@ -0,0 +1,289 @@
+import * as config from './config';
+import {debounceRaf} from './util';
+import createBindingCache from './domWalker';
+import createBindingOption from './createBindingOption';
+import applyBinding from './applyBinding';
+import renderTemplatesBinding from './renderTemplatesBinding';
+import postProcess from './postProcess';
+import * as pubSub from './pubSub';
+import {createReactiveProxy, isProxySupported} from './reactiveProxy';
+import type {ViewModel, ElementCache, UpdateOption, BindingAttrs, BinderOptions} from './types';
+
+let compIdIndex = 0;
+
+class Binder {
+    [key: string]: unknown;
+    public initRendered: boolean;
+    public compId: number;
+    public $rootElement: HTMLElement;
+    public viewModel: ViewModel;
+    public bindingAttrs: BindingAttrs;
+    public isServerRendered: boolean;
+    public elementCache: ElementCache;
+    public postProcessQueue: Array<() => void>;
+    public render: (opt?: UpdateOption) => void;
+    public isReactive: boolean;
+    public originalViewModel: ViewModel;
+    private afterRenderCallbacks: Array<() => void>;
+
+    constructor($rootElement: HTMLElement, viewModel: ViewModel, bindingAttrs: BindingAttrs, options: BinderOptions = {}) {
+        if (!$rootElement || $rootElement.nodeType !== 1 || viewModel === null || typeof viewModel !== 'object') {
+            throw new TypeError('$rootElement or viewModel is invalid');
+        }
+
+        this.initRendered = false;
+
+        this.compId = compIdIndex += 1;
+
+        this.$rootElement = $rootElement;
+
+        this.bindingAttrs = bindingAttrs;
+
+        this.isServerRendered = this.$rootElement.getAttribute(config.serverRenderedAttr) !== null;
+
+        // Initialize afterRender callbacks array
+        this.afterRenderCallbacks = [];
+
+        // Initialize render method with debounced version
+        this.render = debounceRaf(this._render.bind(this), this) as (opt?: UpdateOption) => void;
+
+        // Store original viewModel reference
+        this.originalViewModel = viewModel;
+
+        // Reactive mode is controlled by options (defaults merged in index.ts)
+        // options.reactive is guaranteed to be defined due to merge in index.ts
+        this.isReactive = !!options.reactive;
+
+        // If reactive mode is enabled, wrap viewModel in proxy
+        if (this.isReactive) {
+            if (!isProxySupported()) {
+                console.warn('Reactive mode requires Proxy support. Falling back to manual mode.');
+                this.isReactive = false;
+                this.viewModel = viewModel;
+            } else {
+                this.viewModel = createReactiveProxy(viewModel, {
+                    onChange: () => this.render(),
+                    deep: true,
+                    trackChanges: options.trackChanges,
+                });
+            }
+        } else {
+            this.viewModel = viewModel;
+        }
+
+        // inject instance into viewModel
+        this.viewModel.APP = this;
+
+        // add $root pointer to viewModel so binding can be refer as $root.something
+        this.viewModel.$root = this.viewModel;
+
+        // 1st step
+        // parsView walk the DOM and create binding cache that holds each element's binding details
+        // this binding cache is like AST for render and update
+        this.parseView();
+
+        // for jquery user set viewModel referece to $rootElement for easy debug
+        // otherwise use Expando to attach viewModel to $rootElement
+        this.$rootElement[config.bindingDataReference.rootDataKey] = this.viewModel;
+
+        return this;
+    }
+
+    /**
+     * parseView
+     * @description
+     * @return {this}
+     * traver from $rootElement to find each data-bind-* element
+     * then apply data binding
+     */
+    public parseView(): this {
+        this.elementCache = createBindingCache({
+            rootNode: this.$rootElement,
+            bindingAttrs: this.bindingAttrs,
+        });
+
+        // updateElementCache if server rendered on init
+        if (this.isServerRendered && !this.initRendered) {
+            this.updateElementCache({
+                templateCache: true,
+            });
+        }
+        return this;
+    }
+
+    /**
+     * updateElementCache
+     * @param {object} opt
+     * @description call createBindingCache to parse view and generate bindingCache
+     */
+    public updateElementCache(
+        opt: {
+            allCache?: boolean;
+            templateCache?: boolean;
+            elementCache?: ElementCache;
+            isRenderedTemplates?: boolean;
+        } = {},
+    ): void {
+        const elementCache = opt.elementCache || this.elementCache;
+
+        if (opt.allCache) {
+            // walk dom from root element to regenerate elementCache
+            this.elementCache = createBindingCache({
+                rootNode: this.$rootElement,
+                bindingAttrs: this.bindingAttrs,
+            });
+        }
+        // walk from first rendered template node to create/update child bindingCache
+        if (opt.allCache || opt.templateCache) {
+            if (elementCache[this.bindingAttrs.tmp] && elementCache[this.bindingAttrs.tmp].length) {
+                // Use for loop to handle templates added during rendering
+                for (let i = 0; i < elementCache[this.bindingAttrs.tmp].length; i++) {
+                    const cache = elementCache[this.bindingAttrs.tmp][i];
+                    // set skipCheck as skipForOfParseFn whenever an node has
+                    // both template and forOf bindings
+                    // then the template bindingCache should be an empty object
+                    let skipForOfParseFn: (() => boolean) | null = null;
+                    if (cache.el.hasAttribute(this.bindingAttrs.forOf)) {
+                        skipForOfParseFn = (): boolean => {
+                            return true;
+                        };
+                    }
+                    cache.bindingCache = createBindingCache({
+                        rootNode: cache.el,
+                        bindingAttrs: this.bindingAttrs,
+                        skipCheck: skipForOfParseFn,
+                        isRenderedTemplate: opt.isRenderedTemplates,
+                    });
+                }
+            }
+        }
+    }
+
+    private _render(opt: UpdateOption = {}): void {
+        let updateOption: UpdateOption = {};
+
+        if (!this.initRendered) {
+            // only update eventsBinding if server rendered
+            if (this.isServerRendered) {
+                this.$rootElement.removeAttribute(config.serverRenderedAttr);
+                updateOption = createBindingOption(config.bindingUpdateConditions.serverRendered, opt);
+            } else {
+                updateOption = createBindingOption(config.bindingUpdateConditions.init, opt);
+            }
+        } else {
+            // when called again only update visualBinding options
+            updateOption = createBindingOption('', opt);
+        }
+
+        // create postProcessQueue before start rendering
+        this.postProcessQueue = [];
+
+        const renderBindingOption = {
+            ctx: this,
+            elementCache: this.elementCache,
+            updateOption,
+            bindingAttrs: this.bindingAttrs,
+            viewModel: this.viewModel,
+        };
+
+        // always render template binding first
+        // render and apply binding to template(s)
+        // this is an share function therefore passing 'this' context
+        renderTemplatesBinding(renderBindingOption);
+
+        // apply bindings to rest of the DOM
+        applyBinding(renderBindingOption);
+
+        // trigger postProcess
+        postProcess(this.postProcessQueue);
+        // clear postProcessQueue
+        this.postProcessQueue.length = 0;
+        delete this.postProcessQueue;
+
+        this.initRendered = true;
+
+        // Call afterRender callbacks after rendering is fully complete
+        this._callAfterRenderCallbacks();
+    }
+
+    /**
+     * Call all registered afterRender callbacks
+     * Called automatically after each render completes
+     */
+    private _callAfterRenderCallbacks(): void {
+        if (this.afterRenderCallbacks.length > 0) {
+            // Clone array to avoid issues if callbacks modify the array
+            const callbacks = this.afterRenderCallbacks.slice();
+            for (let i = 0, len = callbacks.length; i < len; i += 1) {
+                try {
+                    callbacks[i]();
+                } catch (err) {
+                    console.error('Error in afterRender callback:', err);
+                }
+            }
+        }
+    }
+
+    /**
+     * Register a callback to be called after each render completes
+     * Useful for reactive mode where renders happen automatically
+     * @param callback Function to call after render completes
+     * @returns this for chaining
+     */
+    public afterRender(callback: () => void): this {
+        if (typeof callback !== 'function') {
+            throw new TypeError('afterRender callback must be a function');
+        }
+        this.afterRenderCallbacks.push(callback);
+        return this;
+    }
+
+    /**
+     * Remove a specific afterRender callback
+     * @param callback The callback function to remove
+     * @returns this for chaining
+     */
+    public removeAfterRender(callback: () => void): this {
+        const index = this.afterRenderCallbacks.indexOf(callback);
+        if (index !== -1) {
+            this.afterRenderCallbacks.splice(index, 1);
+        }
+        return this;
+    }
+
+    /**
+     * Clear all afterRender callbacks
+     * @returns this for chaining
+     */
+    public clearAfterRender(): this {
+        this.afterRenderCallbacks.length = 0;
+        return this;
+    }
+
+    public subscribe(eventName: string = '', fn: (...args: unknown[]) => void): this {
+        pubSub.subscribeEvent(this, eventName, fn);
+        return this;
+    }
+
+    public subscribeOnce(eventName: string = '', fn: (...args: unknown[]) => void): this {
+        pubSub.subscribeEventOnce(this, eventName, fn);
+        return this;
+    }
+
+    public unsubscribe(eventName: string = ''): this {
+        pubSub.unsubscribeEvent(this.compId, eventName);
+        return this;
+    }
+
+    public unsubscribeAll(): this {
+        pubSub.unsubscribeAllEvent(this.compId);
+        return this;
+    }
+
+    public publish(eventName: string = '', ...args: unknown[]): this {
+        pubSub.publishEvent(eventName, ...args);
+        return this;
+    }
+}
+
+export default Binder;

package/src/changeBinding.ts

@@ -0,0 +1,93 @@
+
+import {
+    getViewModelValue,
+    setViewModelValue,
+    resolveViewModelContext,
+    resolveParamList,
+} from './util';
+import _escape from './_escape';
+import type {BindingCache, ViewModel, BindingAttrs} from './types';
+
+/**
+ * Create change handler
+ */
+const createChangeHandler = (
+    viewModel: ViewModel,
+    modelDataKey: string | null,
+    paramList: unknown[],
+    handlerFn: Function,
+    viewModelContext: ViewModel,
+): EventListener => {
+    let oldValue: unknown = '';
+    let newValue: unknown = '';
+
+    return function changeHandler(this: HTMLInputElement, e: Event) {
+        const $this = this;
+        const isCheckbox = $this.type === 'checkbox';
+        newValue = isCheckbox ? $this.checked : _escape($this.value);
+        // set data to viewModel
+        if (modelDataKey) {
+            oldValue = getViewModelValue(viewModel, modelDataKey);
+            setViewModelValue(viewModel, modelDataKey, newValue);
+        }
+        const args = [e, e.currentTarget, newValue, oldValue, ...paramList];
+        handlerFn.apply(viewModelContext, args);
+        oldValue = newValue;
+    };
+};
+
+interface ChangeBindingParams {
+    cache: BindingCache;
+    viewModel: ViewModel;
+    bindingAttrs: BindingAttrs;
+    forceRender: boolean;
+    type?: string;
+}
+
+/**
+ * changeBinding
+ * @description input element on change event binding. DOM -> viewModel update
+ * @param {object} cache
+ * @param {object} viewModel
+ * @param {object} bindingAttrs
+ * @param {boolean} forceRender
+ */
+const changeBinding = ({
+    cache,
+    viewModel,
+    bindingAttrs,
+    forceRender,
+    type = 'change',
+}: ChangeBindingParams): void => {
+    const handlerName = cache.dataKey;
+    let paramList = cache.parameters;
+    const modelDataKey = cache.el.getAttribute(bindingAttrs.model);
+    let viewModelContext: ViewModel;
+    const APP = viewModel.APP || viewModel.$root?.APP;
+    const rootElement = APP?.$rootElement as HTMLElement | undefined;
+
+    if (!handlerName || (!forceRender && rootElement && !rootElement.contains(cache.el))) {
+        return;
+    }
+
+    const handlerFn = getViewModelValue(viewModel, handlerName);
+
+    if (typeof handlerFn === 'function') {
+        viewModelContext = resolveViewModelContext(viewModel, handlerName);
+        paramList = paramList ? resolveParamList(viewModel, paramList) : [];
+
+        const changeHandler = createChangeHandler(
+            viewModel,
+            modelDataKey,
+            paramList,
+            handlerFn,
+            viewModelContext,
+        );
+
+        // assign on change event
+        cache.el.removeEventListener(type, changeHandler, false);
+        cache.el.addEventListener(type, changeHandler, false);
+    }
+};
+
+export default changeBinding;

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

@@ -1,15 +1,16 @@
-/* eslint-disable no-invalid-this */
+
 import * as config from './config';
 import * as util from './util';
+import type {BindingCache} from './types';
 
-const createClonedElementCache = (bindingData) => {
+const createClonedElementCache = (bindingData: BindingCache): BindingCache => {
     const clonedElement = bindingData.el.cloneNode(true);
     bindingData.fragment = document.createDocumentFragment();
     bindingData.fragment.appendChild(clonedElement);
     return bindingData;
 };
 
-const setCommentPrefix = (bindingData) => {
+const setCommentPrefix = (bindingData: BindingCache): BindingCache => {
     if (!bindingData || !bindingData.type) {
         return bindingData;
     }
@@ -17,18 +18,18 @@ const setCommentPrefix = (bindingData) => {
     const dataKeyMarker = bindingData.dataKey ? bindingData.dataKey.replace(util.REGEX.WHITE_SPACES, '_') : '';
 
     switch (bindingData.type) {
-    case config.bindingAttrs.forOf:
-        commentPrefix = config.commentPrefix.forOf;
-        break;
-    case config.bindingAttrs.if:
-        commentPrefix = config.commentPrefix.if;
-        break;
-    case config.bindingAttrs.case:
-        commentPrefix = config.commentPrefix.case;
-        break;
-    case config.bindingAttrs.default:
-        commentPrefix = config.commentPrefix.default;
-        break;
+        case config.bindingAttrs.forOf:
+            commentPrefix = config.commentPrefix.forOf;
+            break;
+        case config.bindingAttrs.if:
+            commentPrefix = config.commentPrefix.if;
+            break;
+        case config.bindingAttrs.case:
+            commentPrefix = config.commentPrefix.case;
+            break;
+        case config.bindingAttrs.default:
+            commentPrefix = config.commentPrefix.default;
+            break;
     }
     bindingData.commentPrefix = commentPrefix + dataKeyMarker;
     return bindingData;
@@ -44,18 +45,18 @@ const setCommentPrefix = (bindingData) => {
  * if not found deleteContents will has no operation
  * @return {undefined}
  */
-const setDocRangeEndAfter = (node, bindingData) => {
+const setDocRangeEndAfter = (node: Node | null, bindingData: BindingCache): void => {
     if (!bindingData.commentPrefix) {
         setCommentPrefix(bindingData);
     }
-    const startTextContent = bindingData.commentPrefix;
+    const startTextContent = bindingData.commentPrefix as string;
     const endTextContent = startTextContent + config.commentSuffix;
     node = node.nextSibling;
 
     // check last wrap comment node
     if (node) {
         if (node.nodeType === 8 && node.textContent === endTextContent) {
-            return bindingData.docRange.setEndBefore(node);
+            return (bindingData.docRange as Range).setEndBefore(node);
         }
         setDocRangeEndAfter(node, bindingData);
     }
@@ -69,12 +70,12 @@ const setDocRangeEndAfter = (node, bindingData) => {
  * @description
  * wrap frament with comment node
  */
-const wrapCommentAround = (bindingData, node) => {
+const wrapCommentAround = (bindingData: BindingCache, node: Node | DocumentFragment): Node | DocumentFragment => {
     let prefix = '';
     if (!bindingData.commentPrefix) {
         setCommentPrefix(bindingData);
     }
-    prefix = bindingData.commentPrefix;
+    prefix = bindingData.commentPrefix as string;
     const commentBegin = document.createComment(prefix);
     const commentEnd = document.createComment(prefix + config.commentSuffix);
     // document fragment - logic for ForOf binding
@@ -100,25 +101,26 @@ const wrapCommentAround = (bindingData, node) => {
  * @return {undefined}
  * @description remove elments by range
  */
-const removeElemnetsByCommentWrap = (bindingData) => {
+const removeElemnetsByCommentWrap = (bindingData: BindingCache): void => {
     if (!bindingData.docRange) {
         bindingData.docRange = document.createRange();
     }
+    const docRange = bindingData.docRange as Range;
     try {
         if (bindingData.previousNonTemplateElement) {
             // update docRange start and end match the wrapped comment node
-            bindingData.docRange.setStartBefore(bindingData.previousNonTemplateElement.nextSibling);
+            docRange.setStartBefore(bindingData.previousNonTemplateElement.nextSibling as Node);
             setDocRangeEndAfter(bindingData.previousNonTemplateElement.nextSibling, bindingData);
         } else {
             // insert before next non template element
-            bindingData.docRange.setStartBefore(bindingData.parentElement.firstChild);
-            setDocRangeEndAfter(bindingData.parentElement.firstChild, bindingData);
+            docRange.setStartBefore((bindingData.parentElement as HTMLElement).firstChild as Node);
+            setDocRangeEndAfter((bindingData.parentElement as HTMLElement).firstChild, bindingData);
         }
-    } catch (err) {
-        console.log('error removeElemnetsByCommentWrap: ', err.message);
+    } catch (err: unknown) {
+        console.log('error removeElemnetsByCommentWrap: ', err instanceof Error ? err.message : String(err));
     }
 
-    return bindingData.docRange.deleteContents();
+    docRange.deleteContents();
 };
 
 /**
@@ -126,15 +128,16 @@ const removeElemnetsByCommentWrap = (bindingData) => {
  * @param {object} bindingData
  * @return {object} null
  */
-const removeDomTemplateElement = (bindingData) => {
+const removeDomTemplateElement = (bindingData: BindingCache): void => {
     // first render - forElement is live DOM element so has parentNode
     if (bindingData.el.parentNode) {
-        return bindingData.el.parentNode.removeChild(bindingData.el);
+        bindingData.el.parentNode.removeChild(bindingData.el);
+        return;
     }
     removeElemnetsByCommentWrap(bindingData);
 };
 
-const insertRenderedElements = (bindingData, fragment) => {
+const insertRenderedElements = (bindingData: BindingCache, fragment: DocumentFragment): void => {
     // insert rendered fragment after the previousNonTemplateElement
     if (bindingData.previousNonTemplateElement) {
         util.insertAfter(bindingData.parentElement, fragment, bindingData.previousNonTemplateElement);

package/src/config.ts

@@ -0,0 +1,107 @@
+export interface BindingAttrs {
+    comp: string;
+    tmp: string;
+    text: string;
+    click: string;
+    dblclick: string;
+    blur: string;
+    focus: string;
+    hover: string;
+    input: string;
+    change: string;
+    submit: string;
+    model: string;
+    show: string;
+    css: string;
+    attr: string;
+    forOf: string;
+    if: string;
+    switch: string;
+    case: string;
+    default: string;
+}
+
+export const bindingAttrs: BindingAttrs = {
+    comp: 'data-bind-comp',
+    tmp: 'data-bind-tmp',
+    text: 'data-bind-text',
+    click: 'data-bind-click',
+    dblclick: 'data-bind-dblclick',
+    blur: 'data-bind-blur',
+    focus: 'data-bind-focus',
+    hover: 'data-bind-hover',
+    input: 'data-bind-input',
+    change: 'data-bind-change',
+    submit: 'data-bind-submit',
+    model: 'data-bind-model',
+    show: 'data-bind-show',
+    css: 'data-bind-css',
+    attr: 'data-bind-attr',
+    forOf: 'data-bind-for',
+    if: 'data-bind-if',
+    switch: 'data-bind-switch',
+    case: 'data-bind-case',
+    default: 'data-bind-default',
+};
+
+export const serverRenderedAttr = 'data-server-rendered';
+export const dataIndexAttr = 'data-index';
+
+export interface CommentPrefix {
+    forOf: string;
+    if: string;
+    case: string;
+    default: string;
+}
+
+export const commentPrefix: CommentPrefix = {
+    forOf: 'data-forOf_',
+    if: 'data-if_',
+    case: 'data-case_',
+    default: 'data-default_',
+};
+
+export const commentSuffix = '_end';
+
+export interface BindingDataReference {
+    rootDataKey: string;
+    currentData: string;
+    currentIndex: string;
+    mouseEnterHandlerName: string;
+    mouseLeaveHandlerName: string;
+}
+
+export const bindingDataReference: BindingDataReference = {
+    rootDataKey: '$root',
+    currentData: '$data',
+    currentIndex: '$index',
+    mouseEnterHandlerName: 'in',
+    mouseLeaveHandlerName: 'out',
+};
+
+export interface BindingUpdateConditions {
+    serverRendered: string;
+    init: string;
+}
+
+export const bindingUpdateConditions: BindingUpdateConditions = {
+    serverRendered: 'SERVER-RENDERED',
+    init: 'INIT',
+};
+
+// maximum string length before running regex
+export const maxDatakeyLength = 250;
+
+export interface Constants {
+    filters: {
+        ONCE: string;
+    };
+    PARENT_REF: string;
+}
+
+export const constants: Constants = {
+    filters: {
+        ONCE: 'once',
+    },
+    PARENT_REF: '_parent',
+};