@gogocat/data-bind 1.11.0 → 2.0.0

package/package.json

@@ -1,13 +1,18 @@
 {
     "name": "@gogocat/data-bind",
-    "version": "1.11.0",
+    "version": "2.0.0",
     "description": "dataBind is a small and fast MVVM tool for building front-end web",
     "main": "dist/js/dataBind.js",
+    "types": "dist/js/types/index.d.ts",
+    "type": "module",
     "scripts": {
-        "test": "grunt test --force",
-        "build": "rollup -c && gulp",
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "test:coverage": "vitest run --coverage",
+        "build": "npm run lint && rollup -c",
         "watch": "rollup -c -w",
-        "lint": "eslint src/**/*.js --fix"
+        "typecheck": "tsc --noEmit",
+        "lint": "eslint src test --fix"
     },
     "repository": {
         "type": "git",
@@ -25,35 +30,27 @@
     },
     "homepage": "https://gogocat.github.io/dataBind/",
     "devDependencies": {
-        "@babel/cli": "^7.14.8",
-        "@babel/core": "^7.15.0",
-        "@babel/plugin-transform-object-assign": "^7.14.5",
-        "@babel/preset-env": "^7.15.0",
-        "@rollup/plugin-babel": "^5.3.0",
-        "@rollup/plugin-commonjs": "^20.0.0",
-        "babel-eslint": "^10.1.0",
-        "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
-        "babel-plugin-transform-es3-property-literals": "^6.22.0",
-        "eslint": "^7.32.0",
-        "eslint-config-google": "^0.14.0",
-        "eslint-plugin-import": "^2.23.4",
-        "eslint-plugin-node": "^11.1.0",
-        "eslint-plugin-promise": "^5.1.0",
-        "grunt": "^1.4.1",
-        "grunt-cli": "^1.4.3",
-        "grunt-contrib-connect": "^3.0.0",
-        "grunt-contrib-jasmine": "^3.0.0",
-        "grunt-open": "^0.2.4",
-        "grunt-template-jasmine-istanbul": "^0.5.0",
-        "gulp": "^4.0.2",
-        "gulp-rename": "^2.0.0",
-        "gulp-replace": "^1.1.3",
-        "gulp-sourcemaps": "^3.0.0",
-        "gulp-uglify-es": "^3.0.0",
-        "jasmine-core": "^3.8.0",
-        "prettier-eslint": "^13.0.0",
-        "rollup": "^2.56.0",
-        "rollup-plugin-banner": "^0.2.1",
-        "rollup-plugin-eslint": "^7.0.0"
+        "@babel/cli": "^7.26.4",
+        "@babel/core": "^7.26.0",
+        "@babel/plugin-transform-object-assign": "^7.25.9",
+        "@babel/preset-env": "^7.26.0",
+        "@eslint/js": "^9.17.0",
+        "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-commonjs": "^28.0.1",
+        "@rollup/plugin-replace": "^6.0.2",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-typescript": "^12.1.4",
+        "@testing-library/dom": "^10.4.0",
+        "@types/node": "^24.7.2",
+        "@vitest/coverage-v8": "^3.2.4",
+        "eslint": "^9.17.0",
+        "globals": "^15.14.0",
+        "jsdom": "^25.0.1",
+        "rollup": "^4.30.1",
+        "rollup-plugin-banner2": "^1.3.0",
+        "tslib": "^2.8.1",
+        "typescript": "^5.9.3",
+        "typescript-eslint": "^8.46.0",
+        "vitest": "^3.2.4"
     }
 }

package/rollup.config.js

@@ -1,41 +1,84 @@
 import babel from '@rollup/plugin-babel';
-import {eslint} from 'rollup-plugin-eslint';
-import banner from 'rollup-plugin-banner';
+import terser from '@rollup/plugin-terser';
+import replace from '@rollup/plugin-replace';
+import typescript from '@rollup/plugin-typescript';
+import banner2 from 'rollup-plugin-banner2';
+import { readFileSync } from 'fs';
 
-// eslint-disable-next-line no-unused-vars
-const pkg = require('./package.json');
+const pkg = JSON.parse(readFileSync('./package.json', 'utf-8'));
 
-export default {
-    input: 'src/index.js',
-    output: {
-        file: 'dist/js/dataBind.js',
-        format: 'umd', // Browser + Node.js
-        name: 'dataBind',
-        sourcemap: false,
+const bannerText = `/*
+${pkg.name}
+version ${pkg.version}
+By ${pkg.author}
+link ${pkg.homepage}
+license ${pkg.license}
+*/`;
+
+export default [
+    // UMD build (unminified)
+    {
+        input: 'src/index.ts',
+        output: {
+            file: 'dist/js/dataBind.js',
+            format: 'umd',
+            name: 'dataBind',
+            sourcemap: false,
+        },
+        plugins: [
+            typescript({
+                tsconfig: './tsconfig.json',
+                declaration: true,
+                compilerOptions: {
+                    outDir: './dist/js',
+                    declarationDir: './dist/js/types',
+                }
+            }),
+            replace({
+                preventAssignment: true,
+                values: {
+                    '@version@': pkg.version,
+                },
+            }),
+            babel({
+                babelHelpers: 'bundled',
+                extensions: ['.js', '.ts'],
+            }),
+            banner2(() => bannerText),
+        ],
     },
-    plugins: [
-        banner(
-            '<%= pkg.name %>\n' +
-                'version <%= pkg.version %>\n' +
-                'By <%= pkg.author %>\n' +
-                'link <%= pkg.homepage %>\n' +
-                'license <%= pkg.license %>\n',
-        ),
-        eslint({
-            parser: 'babel-eslint',
-            parserOptions: {
-                ecmaVersion: 6,
-                ecmaFeatures: {
-                    modules: true,
+    // UMD build (minified)
+    {
+        input: 'src/index.ts',
+        output: {
+            file: 'dist/js/dataBind.min.js',
+            format: 'umd',
+            name: 'dataBind',
+            sourcemap: true,
+        },
+        plugins: [
+            typescript({
+                tsconfig: './tsconfig.json',
+                compilerOptions: {
+                    outDir: './dist/js',
+                }
+            }),
+            replace({
+                preventAssignment: true,
+                values: {
+                    '@version@': pkg.version,
                 },
-            },
-            rules: {
-                quotes: [1, 'single'],
-                semi: [1],
-            },
-        }),
-        babel({
-            babelHelpers: 'bundled',
-        }),
-    ],
-};
+            }),
+            babel({
+                babelHelpers: 'bundled',
+                extensions: ['.js', '.ts'],
+            }),
+            terser({
+                format: {
+                    comments: false,
+                    preamble: bannerText,
+                },
+            }),
+        ],
+    },
+];

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

@@ -4,19 +4,19 @@
  * https://github.com/lodash/lodash/blob/master/escape.js
  */
 
-function baseToString(value) {
+const baseToString = (value: unknown): string => {
     if (typeof value == 'string') {
         return value;
     }
     return value == null ? '' : `${value}`;
-}
+};
 
 /** Used to match HTML entities and HTML characters. */
 const reUnescapedHtml = /[&<>"'`]/g;
 const reHasUnescapedHtml = RegExp(reUnescapedHtml.source);
 
 /** Used to map characters to HTML entities. */
-const htmlEscapes = {
+const htmlEscapes: Record<string, string> = {
     '&': '&amp;',
     '<': '&lt;',
     '>': '&gt;',
@@ -26,15 +26,15 @@ const htmlEscapes = {
 };
 
 /**
-   * escapeHtmlChar
-   * @description convert characters to HTML entities.
-   * @private
-   * @param {string} chr The matched character to escape.
-   * @return {string} Returns the escaped character.
-   */
-function escapeHtmlChar(chr) {
+  * escapeHtmlChar
+  * @description convert characters to HTML entities.
+  * @private
+  * @param {string} chr The matched character to escape.
+  * @return {string} Returns the escaped character.
+  */
+const escapeHtmlChar = (chr: string): string => {
     return htmlEscapes[chr];
-}
+};
 
 /**
  * Converts the characters "&", "<", ">", '"', "'", and "\`", in `string` to
@@ -42,10 +42,12 @@ function escapeHtmlChar(chr) {
  * @param {string} string
  * @return {string} string
  */
-export default function escape(string) {
+const escape = (string: unknown): string => {
     // Reset `lastIndex` because in IE < 9 `String#replace` does not.
-    string = baseToString(string);
-    return (string && reHasUnescapedHtml.test(string)) ?
-        string.replace(reUnescapedHtml, escapeHtmlChar) :
-        string;
-}
+    const strValue = baseToString(string);
+    return (strValue && reHasUnescapedHtml.test(strValue)) ?
+        strValue.replace(reUnescapedHtml, escapeHtmlChar) :
+        strValue;
+};
+
+export default escape;

package/src/applyBinding.ts

@@ -0,0 +1,179 @@
+import hoverBinding from './hoverBinding';
+import changeBinding from './changeBinding';
+import modelBinding from './modelBinding';
+import textBinding from './textBinding';
+import showBinding from './showBinding';
+import cssBinding from './cssBinding';
+import attrBinding from './attrBinding';
+import forOfBinding from './forOfBinding'; // depends renderForOfBinding -> this , renderIteration
+import ifBinding from './ifBinding';
+import switchBinding from './switchBinding';
+import createEventBinding from './createEventBinding';
+import type {ElementCache, UpdateOption, BindingAttrs, ViewModel, BindingCache} from './types';
+
+interface ApplyBindingParams {
+    ctx: unknown;
+    elementCache: ElementCache;
+    updateOption: UpdateOption;
+    bindingAttrs: BindingAttrs;
+    viewModel: ViewModel;
+}
+
+const applyBinding = ({ctx: _ctx, elementCache, updateOption, bindingAttrs, viewModel}: ApplyBindingParams): void => {
+    if (!elementCache || !updateOption) {
+        return;
+    }
+
+    // the follow binding should be in order for better efficiency
+
+    // apply forOf Binding
+    if (updateOption.forOfBinding && elementCache[bindingAttrs.forOf] && elementCache[bindingAttrs.forOf].length) {
+        elementCache[bindingAttrs.forOf].forEach((cache: BindingCache) => {
+            forOfBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
+        });
+    }
+
+    // apply attr Binding
+    if (updateOption.attrBinding && elementCache[bindingAttrs.attr] && elementCache[bindingAttrs.attr].length) {
+        elementCache[bindingAttrs.attr].forEach((cache: BindingCache) => {
+            attrBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
+        });
+    }
+
+    // apply if Binding
+    if (updateOption.ifBinding && elementCache[bindingAttrs.if] && elementCache[bindingAttrs.if].length) {
+        elementCache[bindingAttrs.if].forEach((cache: BindingCache) => {
+            ifBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
+        });
+    }
+
+    // apply show Binding
+    if (updateOption.showBinding && elementCache[bindingAttrs.show] && elementCache[bindingAttrs.show].length) {
+        elementCache[bindingAttrs.show].forEach((cache: BindingCache) => {
+            showBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
+        });
+    }
+
+    // apply switch Binding
+    if (updateOption.switchBinding && elementCache[bindingAttrs.switch] && elementCache[bindingAttrs.switch].length) {
+        elementCache[bindingAttrs.switch].forEach((cache: BindingCache) => {
+            switchBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
+        });
+    }
+
+    // apply text binding
+    if (updateOption.textBinding && elementCache[bindingAttrs.text] && elementCache[bindingAttrs.text].length) {
+        elementCache[bindingAttrs.text].forEach((cache: BindingCache) => {
+            textBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
+        });
+    }
+
+    // apply cssBinding
+    if (updateOption.cssBinding && elementCache[bindingAttrs.css] && elementCache[bindingAttrs.css].length) {
+        elementCache[bindingAttrs.css].forEach((cache: BindingCache) => {
+            cssBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
+        });
+    }
+
+    // apply model binding
+    if (updateOption.modelBinding && elementCache[bindingAttrs.model] && elementCache[bindingAttrs.model].length) {
+        elementCache[bindingAttrs.model].forEach((cache: BindingCache) => {
+            modelBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
+        });
+    }
+
+    // apply change binding
+    if (updateOption.changeBinding && elementCache[bindingAttrs.change] && elementCache[bindingAttrs.change].length) {
+        elementCache[bindingAttrs.change].forEach((cache: BindingCache) => {
+            changeBinding({
+                bindingAttrs,
+                cache,
+                forceRender: updateOption.forceRender,
+                type: 'change',
+                viewModel,
+            });
+        });
+    }
+
+    // apply submit binding
+    if (updateOption.submitBinding && elementCache[bindingAttrs.submit] && elementCache[bindingAttrs.submit].length) {
+        elementCache[bindingAttrs.submit].forEach((cache: BindingCache) => {
+            createEventBinding({
+                cache,
+                forceRender: updateOption.forceRender,
+                type: 'submit',
+                viewModel,
+            });
+        });
+    }
+
+    // apply click binding
+    if (updateOption.clickBinding && elementCache[bindingAttrs.click] && elementCache[bindingAttrs.click].length) {
+        elementCache[bindingAttrs.click].forEach((cache: BindingCache) => {
+            createEventBinding({
+                cache,
+                forceRender: updateOption.forceRender,
+                type: 'click',
+                viewModel,
+            });
+        });
+    }
+
+    // apply double click binding
+    if (updateOption.dblclickBinding && elementCache[bindingAttrs.dblclick] && elementCache[bindingAttrs.dblclick].length) {
+        elementCache[bindingAttrs.dblclick].forEach((cache: BindingCache) => {
+            createEventBinding({
+                cache,
+                forceRender: updateOption.forceRender,
+                type: 'dblclick',
+                viewModel,
+            });
+        });
+    }
+
+    // apply blur binding
+    if (updateOption.blurBinding && elementCache[bindingAttrs.blur] && elementCache[bindingAttrs.blur].length) {
+        elementCache[bindingAttrs.blur].forEach((cache: BindingCache) => {
+            createEventBinding({
+                cache,
+                forceRender: updateOption.forceRender,
+                type: 'blur',
+                viewModel,
+            });
+        });
+    }
+
+    // apply focus binding
+    if (updateOption.focusBinding && elementCache[bindingAttrs.focus] && elementCache[bindingAttrs.focus].length) {
+        elementCache[bindingAttrs.focus].forEach((cache: BindingCache) => {
+            createEventBinding({
+                cache,
+                forceRender: updateOption.forceRender,
+                type: 'focus',
+                viewModel,
+            });
+        });
+    }
+
+    // apply hover binding
+    if (updateOption.hoverBinding && elementCache[bindingAttrs.hover] && elementCache[bindingAttrs.hover].length) {
+        elementCache[bindingAttrs.hover].forEach((cache: BindingCache) => {
+            hoverBinding(cache, viewModel, bindingAttrs, updateOption.forceRender);
+        });
+    }
+
+    // apply input binding - eg html range input
+    if (updateOption.inputBinding && elementCache[bindingAttrs.input] && elementCache[bindingAttrs.input].length) {
+        elementCache[bindingAttrs.input].forEach((cache: BindingCache) => {
+            changeBinding({
+                bindingAttrs,
+                cache,
+                forceRender: updateOption.forceRender,
+                type: 'input',
+                viewModel,
+            });
+        });
+    }
+};
+
+export default applyBinding;

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

@@ -7,6 +7,7 @@ import {
     parseBindingObjectString,
     each,
 } from './util';
+import type {BindingCache, ViewModel, PlainObject} from './types';
 
 /**
  * attrBinding
@@ -16,7 +17,7 @@ import {
  * @param {object} viewModel
  * @param {object} bindingAttrs
  */
-const attrBinding = (cache = {}, viewModel) => {
+const attrBinding = (cache: BindingCache = {} as BindingCache, viewModel: ViewModel, _bindingAttrs?: unknown, _forceRender?: unknown): void => {
     if (!cache.dataKey) {
         return;
     }
@@ -46,10 +47,10 @@ const attrBinding = (cache = {}, viewModel) => {
 
     if (isObjLiteralStr) {
         // resolve each value in vmAttrObj
-        each(vmAttrObj, (key, value)=> {
+        each(vmAttrObj, (key: string, value: unknown) => {
             // resolve value from viewModel including $data and $root
             // from viewModel.$data or viewModel.$root
-            vmAttrObj[key] = getViewModelPropValue(viewModel, {dataKey: value});
+            (vmAttrObj as PlainObject)[key] = getViewModelPropValue(viewModel, {dataKey: value, el: cache.el} as BindingCache);
         });
     }
 
@@ -58,30 +59,30 @@ const attrBinding = (cache = {}, viewModel) => {
 
     // start set element attribute - oldAttrObj is empty meaning no previous render
     if (isEmptyObject(oldAttrObj)) {
-        each(vmAttrObj, (key, value)=> {
+        each(vmAttrObj, (key: string, value: unknown) => {
             if (typeof value !== 'undefined') {
-                cache.el.setAttribute(key, value);
+                cache.el.setAttribute(key, String(value));
                 // populate cache.elementData.viewModelPropValue for future comparison
-                if (!isObjLiteralStr) {
+                if (!isObjLiteralStr && cache.elementData) {
                     cache.elementData.viewModelPropValue[key] = value;
                 }
             }
         });
     } else {
         // loop oldAttrObj, remove attribute not present in current vmAttrObj
-        each(oldAttrObj, (key, value)=> {
-            if (typeof vmAttrObj[key] === 'undefined') {
+        each(oldAttrObj as PlainObject, (key: string, _value: unknown) => {
+            if (typeof (vmAttrObj as PlainObject)[key] === 'undefined') {
                 cache.el.removeAttribute(key);
             }
         });
 
         // loop vmAttrObj, set attribute not present in oldAttrObj
-        each(vmAttrObj, (key, value)=> {
+        each(vmAttrObj, (key: string, value: unknown) => {
             if (typeof value !== 'undefined') {
-                if (oldAttrObj[key] !== vmAttrObj[key]) {
-                    cache.el.setAttribute(key, vmAttrObj[key]);
+                if ((oldAttrObj as PlainObject)[key] !== (vmAttrObj as PlainObject)[key]) {
+                    cache.el.setAttribute(key, String((vmAttrObj as PlainObject)[key]));
                     // populate cache.elementData.viewModelPropValue for future comparison
-                    if (!isObjLiteralStr) {
+                    if (!isObjLiteralStr && cache.elementData) {
                         cache.elementData.viewModelPropValue[key] = value;
                     }
                 }
@@ -93,7 +94,7 @@ const attrBinding = (cache = {}, viewModel) => {
     // set viewModelPropValue for future diff comaprison
     // note: vmAttrObj is a not fully resolve object, each value is still string unresloved
     if (isObjLiteralStr) {
-        cache.elementData.viewModelPropValue = extend({}, vmAttrObj);
+        cache.elementData.viewModelPropValue = extend(false, {}, vmAttrObj);
     }
 };