@gogocat/data-bind 1.12.0 → 2.0.0

package/src/renderTemplate.ts

@@ -0,0 +1,165 @@
+import {dataIndexAttr} from './config';
+import {
+    createHtmlFragment,
+    emptyElement,
+    getViewModelPropValue,
+    parseStringToJson,
+    updateDomWithMinimalChanges,
+} from './util';
+import type {BindingCache, ViewModel, BindingAttrs, ElementCache, PlainObject} from './types';
+
+let $domFragment: DocumentFragment | null = null;
+let $templateRoot: HTMLElement | null = null;
+let $templateRootPrepend = false;
+let $templateRootAppend = false;
+let nestTemplatesCount = 0;
+
+/**
+ * getTemplateString
+ * @description get Template tag innerHTML string
+ * @param {string} id
+ * @return {string} rendered html string
+ */
+const getTemplateString = (id: string): string => {
+    const templateElement = document.getElementById(id);
+
+    return templateElement ? templateElement.innerHTML : '';
+};
+
+/**
+ * renderTemplate
+ * @description
+ * get template setting from DOM attribute then call compileTemplate
+ * to render and append to target DOM
+ * @param {object} cache
+ * @param {object} viewModel
+ * @param {object} bindingAttrs
+ * @param {object} elementCache
+ */
+const renderTemplate = (cache: BindingCache, viewModel: ViewModel, bindingAttrs: BindingAttrs, elementCache: ElementCache): void => {
+    const settings = typeof cache.dataKey === 'string' ? parseStringToJson(cache.dataKey) : cache.dataKey as PlainObject;
+    let viewData: unknown = (settings as PlainObject).data;
+    const isAppend = (settings as PlainObject).append;
+    const isPrepend = (settings as PlainObject).prepend;
+    let $currentElement: DocumentFragment | HTMLElement;
+
+    cache.dataKey = settings as unknown as string;
+
+    viewData = (typeof viewData === 'undefined' || viewData === '$root') ?
+        viewModel :
+        getViewModelPropValue(viewModel, {
+            dataKey: (settings as PlainObject).data,
+            parameters: cache.parameters,
+        } as BindingCache);
+
+    if (!viewData) {
+        return;
+    }
+
+    const $element = cache.el;
+    const $indexAttr = $element.getAttribute(dataIndexAttr);
+    const $index = typeof viewModel.$index !== 'undefined' ? viewModel.$index : ($indexAttr ? parseInt($indexAttr, 10) : undefined);
+
+    if (typeof $index !== 'undefined' && viewData && typeof viewData === 'object') {
+        (viewData as ViewModel).$index = $index;
+    }
+
+    $domFragment = $domFragment || document.createDocumentFragment();
+
+    if (!$templateRoot) {
+        $templateRoot = $element;
+        // Store the prepend/append flags from the root template only
+        $templateRootPrepend = Boolean(isPrepend);
+        $templateRootAppend = Boolean(isAppend);
+    }
+
+    const htmlString = getTemplateString((settings as PlainObject).id as string);
+
+    const htmlFragment = createHtmlFragment(htmlString);
+
+    // Return early if htmlFragment is null (invalid template)
+    if (!htmlFragment) {
+        return;
+    }
+
+    // append rendered html
+    if (!$domFragment.childNodes.length) {
+        // domFragment should be empty in first run
+        $currentElement = $domFragment; // copy of $domFragment for later find nested template check
+        $domFragment.appendChild(htmlFragment);
+    } else {
+        // during recursive run keep append to current fragment
+        // For nested templates, use the original behavior (clear and append)
+        // because they may contain forOf bindings or other dynamic content
+        // that manages its own DOM structure
+        $currentElement = $element; // reset to current nested template element
+        if (!isAppend && !isPrepend) {
+            $currentElement = emptyElement($currentElement);
+        }
+        if (isPrepend) {
+            $currentElement.insertBefore(htmlFragment, $currentElement.firstChild);
+        } else {
+            $currentElement.appendChild(htmlFragment);
+        }
+    }
+
+    // check if there are nested template then recurisive render them
+    const $nestedTemplates = $currentElement.querySelectorAll(`[${  bindingAttrs.tmp  }]`);
+
+    const nestedTemplatesLength = $nestedTemplates.length;
+
+    if (nestedTemplatesLength) {
+        nestTemplatesCount += nestedTemplatesLength;
+
+        for (let i=0; i < nestedTemplatesLength; i+=1) {
+            const thisTemplateCache = {
+                el: $nestedTemplates[i] as HTMLElement,
+                dataKey: $nestedTemplates[i].getAttribute(bindingAttrs.tmp),
+            } as BindingCache;
+            elementCache[bindingAttrs.tmp].push(thisTemplateCache);
+            // recursive template render
+            renderTemplate(thisTemplateCache, viewModel, bindingAttrs, elementCache);
+            nestTemplatesCount -= 1;
+        }
+    }
+
+    // no more nested tempalted to render, start to append $domFragment into $templateRoot
+    if (nestTemplatesCount === 0) {
+        // append to DOM once
+        // Use the prepend/append flags from the root template, not the current nested template
+        if (!$templateRootAppend && !$templateRootPrepend) {
+            // Check if this is a re-render by looking for a marker attribute
+            // This is more reliable than checking childNodes.length because templates
+            // may have placeholder content
+            const isRerender = $templateRoot.hasAttribute('data-template-rendered');
+
+            if (isRerender) {
+                // Re-render: Use minimal DOM updates to preserve unchanged elements
+                // This is faster and preserves DOM state (focus, scroll, animations)
+                updateDomWithMinimalChanges($templateRoot, $domFragment);
+            } else {
+                // Initial render: Clear any placeholder content and render fresh
+                $templateRoot = emptyElement($templateRoot);
+                $templateRoot.appendChild($domFragment);
+                // Mark this template as rendered for future re-renders
+                $templateRoot.setAttribute('data-template-rendered', 'true');
+            }
+        } else {
+            // For prepend/append modes, use the original behavior
+            if ($templateRootPrepend) {
+                $templateRoot.insertBefore($domFragment, $templateRoot.firstChild);
+            } else {
+                $templateRoot.appendChild($domFragment);
+            }
+        }
+        // clear cached fragment and flags
+        $domFragment = $templateRoot = null;
+        $templateRootPrepend = $templateRootAppend = false;
+        // trigger callback if provided
+        if (viewModel.afterTemplateRender && typeof viewModel.afterTemplateRender === 'function') {
+            (viewModel.afterTemplateRender as Function)(viewData);
+        }
+    }
+};
+
+export default renderTemplate;

package/src/renderTemplatesBinding.ts

@@ -0,0 +1,73 @@
+import {bindingUpdateConditions} from './config';
+import * as applyBindingModule from './applyBinding';
+import createBindingOption from './createBindingOption';
+import renderTemplate from './renderTemplate';
+import type {ElementCache, ViewModel, BindingAttrs, BindingCache} from './types';
+import type {BindingOption} from './createBindingOption';
+
+interface BinderContext {
+    updateElementCache: (opt: {
+        allCache?: boolean;
+        templateCache?: boolean;
+        elementCache?: ElementCache;
+        isRenderedTemplates?: boolean;
+    }) => void;
+}
+
+const renderTemplatesBinding = ({
+    ctx,
+    elementCache,
+    updateOption,
+    bindingAttrs,
+    viewModel,
+}: {
+    ctx: BinderContext;
+    elementCache: ElementCache;
+    updateOption: BindingOption;
+    bindingAttrs: BindingAttrs;
+    viewModel: ViewModel;
+}): boolean => {
+    if (!elementCache || !bindingAttrs) {
+        return false;
+    }
+    // render and apply binding to template(s) and forOf DOM
+    if (elementCache[bindingAttrs.tmp] && elementCache[bindingAttrs.tmp].length) {
+        // when re-render call with {templateBinding: true}
+        // template and nested templates
+        if (updateOption.templateBinding) {
+            // overwrite updateOption with 'init' bindingUpdateConditions
+            updateOption = createBindingOption(bindingUpdateConditions.init);
+
+            // forEach is correct here - nested templates are added to array but rendered recursively
+            // We don't want the loop to re-render templates that were already rendered via recursion
+            elementCache[bindingAttrs.tmp].forEach(($element: unknown) => {
+                renderTemplate($element as BindingCache, viewModel, bindingAttrs, elementCache);
+            });
+            // update cache after all template(s) rendered
+            ctx.updateElementCache({
+                templateCache: true,
+                elementCache,
+                isRenderedTemplates: true,
+            });
+        }
+        // enforce render even element is not in DOM tree
+        updateOption.forceRender = true;
+
+        // apply bindings to rendered templates element
+        // Use namespace import to access the function at runtime,
+        // which breaks the circular dependency during module initialization
+        // Use for loop to handle templates added during rendering
+        for (let i = 0; i < elementCache[bindingAttrs.tmp].length; i++) {
+            applyBindingModule.default({
+                ctx,
+                elementCache: elementCache[bindingAttrs.tmp][i].bindingCache as ElementCache,
+                updateOption,
+                bindingAttrs,
+                viewModel,
+            });
+        }
+    }
+    return true;
+};
+
+export default renderTemplatesBinding;

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

@@ -1,4 +1,5 @@
 import {getViewModelPropValue} from './util';
+import type {BindingCache, ViewModel, BindingAttrs} from './types';
 
 /**
  * showBinding
@@ -9,9 +10,9 @@ import {getViewModelPropValue} from './util';
  * @param {object} viewModel
  * @param {object} bindingAttrs
  */
-const showBinding = (cache, viewModel, bindingAttrs) => {
+const showBinding = (cache: BindingCache, viewModel: ViewModel, _bindingAttrs: BindingAttrs, _forceRender?: boolean): void => {
     const dataKey = cache.dataKey;
-    let currentInlineSytle = {};
+    let currentInlineSytle: CSSStyleDeclaration | Record<string, never> = {};
     let currentInlineDisplaySytle = '';
     let shouldShow = true;
 
@@ -42,7 +43,7 @@ const showBinding = (cache, viewModel, bindingAttrs) => {
         }
     }
 
-    shouldShow = getViewModelPropValue(viewModel, cache);
+    shouldShow = getViewModelPropValue(viewModel, cache) as boolean;
 
     // treat undefined || null as false.
     // eg if property doesn't exsits in viewModel, it will treat as false to hide element

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

@@ -1,6 +1,8 @@
 import {getViewModelPropValue} from './util';
 import {createClonedElementCache, wrapCommentAround} from './commentWrapper';
 import {renderIfBinding, removeIfBinding} from './renderIfBinding';
+import type {BindingCache, ViewModel, BindingAttrs, CaseData} from './types';
+
 /**
  * switch-Binding
  * @description
@@ -10,7 +12,7 @@ import {renderIfBinding, removeIfBinding} from './renderIfBinding';
  * @param {object} viewModel
  * @param {object} bindingAttrs
  */
-const switchBinding = (cache, viewModel, bindingAttrs) => {
+const switchBinding = (cache: BindingCache, viewModel: ViewModel, bindingAttrs: BindingAttrs, _forceRender?: boolean): void => {
     const dataKey = cache.dataKey;
 
     if (!dataKey) {
@@ -35,11 +37,12 @@ const switchBinding = (cache, viewModel, bindingAttrs) => {
         }
         cache.cases = [];
         for (let i = 0, elementLength = childrenElements.length; i < elementLength; i += 1) {
-            let caseData = null;
-            if (childrenElements[i].hasAttribute(bindingAttrs.case)) {
-                caseData = createCaseData(childrenElements[i], bindingAttrs.case);
-            } else if (childrenElements[i].hasAttribute(bindingAttrs.default)) {
-                caseData = createCaseData(childrenElements[i], bindingAttrs.default);
+            let caseData: CaseData | null = null;
+            const childElement = childrenElements[i] as HTMLElement;
+            if (childElement.hasAttribute(bindingAttrs.case)) {
+                caseData = createCaseData(childElement, bindingAttrs.case);
+            } else if (childElement.hasAttribute(bindingAttrs.default)) {
+                caseData = createCaseData(childElement, bindingAttrs.default);
                 caseData.isDefault = true;
             }
             // create fragment by clone node
@@ -62,7 +65,7 @@ const switchBinding = (cache, viewModel, bindingAttrs) => {
         let hasMatch = false;
         // do switch operation - reuse if binding logic
         for (let j = 0, casesLength = cache.cases.length; j < casesLength; j += 1) {
-            let newCaseValue;
+            let newCaseValue: unknown;
             if (cache.cases[j].dataKey) {
                 // set back to dataKey if nothing found in viewModel
                 newCaseValue = getViewModelPropValue(viewModel, cache.cases[j]) || cache.cases[j].dataKey;
@@ -73,8 +76,8 @@ const switchBinding = (cache, viewModel, bindingAttrs) => {
                 // render element
                 renderIfBinding({
                     bindingData: cache.cases[j],
-                    viewModel: viewModel,
-                    bindingAttrs: bindingAttrs,
+                    viewModel,
+                    bindingAttrs,
                 });
 
                 // remove other elements
@@ -89,8 +92,8 @@ const switchBinding = (cache, viewModel, bindingAttrs) => {
     }
 };
 
-function removeUnmatchCases(cases, matchedIndex) {
-    cases.forEach((caseData, index) => {
+const removeUnmatchCases = (cases: CaseData[], matchedIndex?: number): void => {
+    cases.forEach((caseData: CaseData, index: number) => {
         if (index !== matchedIndex || typeof matchedIndex === 'undefined') {
             removeIfBinding(caseData);
             // remove cache.IterationBindingCache to prevent memory leak
@@ -100,15 +103,15 @@ function removeUnmatchCases(cases, matchedIndex) {
             }
         }
     });
-}
+};
 
-function createCaseData(node, attrName) {
-    const caseData = {
+const createCaseData = (node: HTMLElement, attrName: string): CaseData => {
+    const caseData: CaseData = {
         el: node,
         dataKey: node.getAttribute(attrName),
         type: attrName,
     };
     return caseData;
-}
+};
 
 export default switchBinding;

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

@@ -1,4 +1,5 @@
 import {getViewModelPropValue} from './util';
+import type {BindingCache, ViewModel, BindingAttrs} from './types';
 
 /**
  * textBinding
@@ -9,12 +10,12 @@ import {getViewModelPropValue} from './util';
  * @param {object} bindingAttrs
  * @param {boolean} forceRender
  */
-const textBinding = (cache, viewModel, bindingAttrs, forceRender) => {
+const textBinding = (cache: BindingCache, viewModel: ViewModel, bindingAttrs: BindingAttrs, forceRender: boolean): void => {
     const dataKey = cache.dataKey;
-    const APP = viewModel.APP || viewModel.$root.APP;
+    const APP = viewModel.APP || viewModel.$root?.APP;
 
     // NOTE: this doesn't work for for-of, if and switch bindings because element was not in DOM
-    if (!dataKey || (!forceRender && !APP.$rootElement.contains(cache.el))) {
+    if (!dataKey || (!forceRender && !(APP?.$rootElement as HTMLElement)?.contains(cache.el))) {
         return;
     }
 
@@ -23,7 +24,7 @@ const textBinding = (cache, viewModel, bindingAttrs, forceRender) => {
 
     if (typeof newValue !== 'undefined' && typeof newValue !== 'object' && newValue !== null) {
         if (newValue !== oldValue) {
-            cache.el.textContent = newValue;
+            cache.el.textContent = String(newValue);
         }
     }
 };

package/src/types.ts

@@ -0,0 +1,124 @@
+// Common types used across the application
+
+// Generic unknown value type - safer than any
+export type UnknownValue = unknown;
+
+export interface PlainObject {
+    [key: string]: unknown;
+}
+
+export interface ViewModel {
+    [key: string]: unknown;
+    APP?: {
+        render?: (opt?: UpdateOption) => void | Promise<void>;
+        postProcessQueue?: Array<() => void>;
+        [key: string]: unknown;
+    };
+    $root?: ViewModel;
+    $data?: unknown;
+    $index?: number;
+}
+
+export interface ElementData {
+    viewModelPropValue?: unknown;
+    displayStyle?: string | null;
+    computedStyle?: string | null;
+    [key: string]: unknown;
+}
+
+export interface BindingCache {
+    el: HTMLElement;
+    dataKey?: string;
+    parameters?: unknown[];
+    filters?: string[];
+    isOnce?: boolean;
+    elementData?: ElementData;
+    bindingCache?: unknown;
+    type?: string;
+    fragment?: DocumentFragment;
+    hasIterationBindingCache?: boolean;
+    iterationBindingCache?: unknown;
+    parentElement?: HTMLElement | null;
+    previousNonTemplateElement?: Node | null;
+    nextNonTemplateElement?: Node | null;
+    iterator?: {
+        alias?: string;
+        dataKey?: string;
+    };
+    cases?: CaseData[];
+    [key: string]: unknown;
+}
+
+export interface CaseData {
+    el: HTMLElement;
+    dataKey?: string;
+    type: string;
+    isDefault?: boolean;
+    fragment?: DocumentFragment;
+    hasIterationBindingCache?: boolean;
+    iterationBindingCache?: unknown;
+    [key: string]: unknown;
+}
+
+export interface ElementCache {
+    [key: string]: BindingCache[];
+}
+
+export interface UpdateOption {
+    forceRender?: boolean;
+    attrBinding?: boolean;
+    cssBinding?: boolean;
+    textBinding?: boolean;
+    modelBinding?: boolean;
+    showBinding?: boolean;
+    ifBinding?: boolean;
+    switchBinding?: boolean;
+    forOfBinding?: boolean;
+    changeBinding?: boolean;
+    submitBinding?: boolean;
+    clickBinding?: boolean;
+    dblclickBinding?: boolean;
+    blurBinding?: boolean;
+    focusBinding?: boolean;
+    hoverBinding?: boolean;
+    inputBinding?: boolean;
+    [key: string]: unknown;
+}
+
+export interface DeferredObj<T = unknown> {
+    promise: Promise<T>;
+    resolve: (value?: T) => void;
+    reject: (reason?: unknown) => void;
+}
+
+export interface WrapMap {
+    [key: string]: [string, string, string];
+}
+
+export interface BindingAttrs {
+    [key: string]: string;
+    attr: string;
+    css: string;
+    text: string;
+    model: string;
+    show: string;
+    if: string;
+    switch: string;
+    case: string;
+    default: string;
+    forOf: string;
+    change: string;
+    submit: string;
+    click: string;
+    dblclick: string;
+    blur: string;
+    focus: string;
+    hover: string;
+    input: string;
+    tmp: string;
+}
+
+export interface BinderOptions {
+    reactive?: boolean;
+    trackChanges?: boolean;
+}