@gogocat/data-bind 1.11.0 → 2.0.0

package/dist/js/types.d.ts

@@ -0,0 +1,111 @@
+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;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/js/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}

package/dist/js/util.d.ts

@@ -0,0 +1,119 @@
+import type { ViewModel, BindingCache, ElementCache, DeferredObj, PlainObject } from './types';
+export declare const REGEX: {
+    BAD_TAGS: RegExp;
+    FOR_OF: RegExp;
+    FUNCTION_PARAM: RegExp;
+    HTML_TAG: RegExp;
+    OBJECT_LITERAL: RegExp;
+    PIPE: RegExp;
+    WHITE_SPACES: RegExp;
+    LINE_BREAKS_TABS: RegExp;
+};
+export declare const isArray: (obj: unknown) => obj is unknown[];
+export declare const isJsObject: (obj: unknown) => obj is object;
+export declare const isPlainObject: (obj: unknown) => obj is PlainObject;
+export declare const isObjectLiteralString: (str?: string) => boolean;
+export declare const isEmptyObject: (obj: unknown) => boolean;
+export declare const createHtmlFragment: (htmlString: unknown) => DocumentFragment | null;
+export declare const generateElementCache: (bindingAttrs: PlainObject | unknown[]) => ElementCache;
+/**
+ * getViewModelValue
+ * @description walk a object by provided string path. eg 'a.b.c'
+ * @param {object} viewModel
+ * @param {string} prop
+ * @return {object}
+ */
+export declare const getViewModelValue: (viewModel: ViewModel, prop: string) => unknown;
+/**
+ * setViewModelValue
+ * @description populate viewModel object by path string
+ * @param {object} obj
+ * @param {string} prop
+ * @param {string} value
+ * @return {call} underscore set
+ */
+export declare const setViewModelValue: (obj: PlainObject, prop: string, value: unknown) => PlainObject;
+export declare const getViewModelPropValue: (viewModel: ViewModel, bindingCache: BindingCache) => unknown;
+export declare const parseStringToJson: (str: string) => PlainObject;
+/**
+ * arrayRemoveMatch
+ * @description remove match items in fromArray out of toArray
+ * @param {array} toArray
+ * @param {array} frommArray
+ * @return {boolean}
+ */
+export declare const arrayRemoveMatch: (toArray: unknown[], frommArray: unknown[]) => unknown[];
+export declare const getFormData: ($form: HTMLFormElement) => PlainObject;
+/**
+ * getFunctionParameterList
+ * @description convert parameter string to arrary
+ * eg. '("a","b","c")' > ["a","b","c"]
+ * @param {string} str
+ * @return {array} paramlist
+ */
+export declare const getFunctionParameterList: (str: string) => string[] | undefined;
+export declare const extractFilterList: (cacheData: Partial<BindingCache>) => Partial<BindingCache>;
+export declare const invertObj: (sourceObj: PlainObject) => PlainObject;
+export declare const createDeferredObj: () => DeferredObj;
+/**
+ * debounce
+ * @description decorate a function to be debounce using requestAnimationFrame
+ * @param {function} fn
+ * @param {context} ctx
+ * @return {function}
+ */
+export declare const debounceRaf: (fn: Function, ctx?: unknown) => Function;
+/**
+ * getNodeAttrObj
+ * @description convert Node attributes object to a json object
+ * @param {object} node
+ * @param {array} skipList
+ * @return {object}
+ */
+export declare const getNodeAttrObj: (node: HTMLElement, skipList?: string | string[]) => Record<string, string> | undefined;
+/**
+ * extend
+ * @param {boolean} isDeepMerge
+ * @param {object} target
+ * @param {object} sources
+ * @return {object} merged object
+ */
+export declare const extend: (isDeepMerge?: boolean, target?: PlainObject, ...sources: PlainObject[]) => PlainObject;
+export declare const each: (obj: unknown[] | PlainObject, fn: Function) => void;
+/**
+ * cloneDomNode
+ * @param {object} element
+ * @return {object} cloned element
+ * @description helper function to clone node
+ */
+export declare const cloneDomNode: (element: HTMLElement) => HTMLElement;
+/**
+ * insertAfter
+ * @param {object} parentNode
+ * @param {object} newNode
+ * @param {object} referenceNode
+ * @return {object} node
+ * @description helper function to insert new node before the reference node
+ */
+export declare const insertAfter: (parentNode: Node, newNode: Node, referenceNode: Node | null) => Node;
+export declare const resolveViewModelContext: (viewModel: ViewModel, datakey: string) => ViewModel;
+export declare const resolveParamList: (viewModel: ViewModel, paramList: unknown[]) => unknown[] | undefined;
+export declare const removeElement: (el: HTMLElement) => void;
+export declare const emptyElement: (node: HTMLElement) => HTMLElement;
+/**
+ * updateDomWithMinimalChanges
+ * @description Updates DOM by comparing existing nodes with new fragment
+ * Only modifies what changed - performs minimal DOM manipulation
+ * @param {HTMLElement} targetElement - The existing DOM element to update
+ * @param {DocumentFragment} newFragment - The new content to apply
+ */
+export declare const updateDomWithMinimalChanges: (targetElement: HTMLElement, newFragment: DocumentFragment) => void;
+export declare const throwErrorMessage: (err?: unknown, errorMessage?: string) => void;
+/**
+ * parseBindingObjectString
+ * @description parse bining object string to object with value always stringify
+ * @param {string} str - eg '{ id: $data.id, name: $data.name }'
+ * @return {object} - eg { id: '$data.id', name: '$data.name'}
+ */
+export declare const parseBindingObjectString: (str?: string) => Record<string, string> | null;
+//# sourceMappingURL=util.d.ts.map

package/dist/js/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../src/util.ts"],"names":[],"mappings":"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"}

package/eslint.config.js

@@ -0,0 +1,124 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default [
+    // Base recommended configs
+    js.configs.recommended,
+    ...tseslint.configs.recommended,
+
+    // JavaScript and TypeScript files - general rules
+    {
+        files: ['**/*.{js,mjs,cjs,ts}'],
+        languageOptions: {
+            ecmaVersion: 2022,
+            sourceType: 'module',
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                ...globals.es2021,
+                // Test globals
+                dataBind: 'readonly',
+                loadFixture: 'readonly',
+                simulateInput: 'readonly',
+                simulateClick: 'readonly',
+                simulateBlur: 'readonly',
+            },
+        },
+        rules: {
+            // Code Style
+            'indent': ['error', 4, {SwitchCase: 1}],
+            'linebreak-style': 'off',
+            'quotes': ['error', 'single', {avoidEscape: true, allowTemplateLiterals: true}],
+            'semi': ['error', 'always'],
+            'comma-dangle': ['error', 'always-multiline'],
+            'comma-spacing': ['error', {before: false, after: true}],
+            'key-spacing': ['error', {beforeColon: false, afterColon: true}],
+            'object-curly-spacing': ['error', 'never'],
+            'array-bracket-spacing': ['error', 'never'],
+            'space-before-function-paren': ['error', {
+                anonymous: 'always',
+                named: 'never',
+                asyncArrow: 'always',
+            }],
+            'space-in-parens': ['error', 'never'],
+            'space-before-blocks': ['error', 'always'],
+            'keyword-spacing': ['error', {before: true, after: true}],
+            'arrow-spacing': ['error', {before: true, after: true}],
+            'no-multiple-empty-lines': ['error', {max: 2, maxEOF: 1}],
+            'no-trailing-spaces': 'error',
+            'eol-last': ['error', 'always'],
+
+            // Max Length
+            'max-len': ['error', {
+                code: 150,
+                tabWidth: 4,
+                ignoreUrls: true,
+                ignoreStrings: true,
+                ignoreTemplateLiterals: true,
+                ignoreRegExpLiterals: true,
+                ignorePattern: 'data:image/|\\s*require\\s*\\(|^\\s*loader\\.lazy|-\\*-|^import\\s',
+            }],
+
+            // Best Practices
+            'no-var': 'error',
+            'prefer-const': 'error',
+            'prefer-arrow-callback': 'warn',
+            'prefer-template': 'warn',
+            'object-shorthand': ['warn', 'always'],
+            'no-useless-escape': 'off',
+            'no-prototype-builtins': 'off',
+            'prefer-rest-params': 'off',
+
+            // Variables
+            'no-unused-vars': 'off', // Use TypeScript version instead
+
+            // TypeScript Rules
+            '@typescript-eslint/no-unused-vars': ['error', {
+                argsIgnorePattern: '^_',
+                varsIgnorePattern: '^_',
+                caughtErrorsIgnorePattern: '^_',
+            }],
+            '@typescript-eslint/no-explicit-any': 'warn',
+            '@typescript-eslint/no-this-alias': 'off',
+            '@typescript-eslint/no-unsafe-function-type': 'off',
+            '@typescript-eslint/explicit-function-return-type': 'off',
+            '@typescript-eslint/explicit-module-boundary-types': 'off',
+            '@typescript-eslint/no-non-null-assertion': 'warn',
+
+            // Security
+            'no-eval': 'error',
+            'no-implied-eval': 'error',
+            'no-new-func': 'error',
+            'no-script-url': 'error',
+        },
+    },
+
+    // Test files - more relaxed rules
+    {
+        files: ['test/**/*.{js,ts}', '**/*.spec.{js,ts}', '**/*.test.{js,ts}'],
+        rules: {
+            '@typescript-eslint/no-explicit-any': 'off',
+            '@typescript-eslint/no-unused-vars': 'off',
+            '@typescript-eslint/no-non-null-assertion': 'off',
+            'max-len': ['error', {
+                code: 200, // Allow longer lines in tests
+                ignoreStrings: true,
+                ignoreTemplateLiterals: true,
+            }],
+        },
+    },
+
+    // Ignore patterns
+    {
+        ignores: [
+            'node_modules',
+            'dist',
+            'coverage',
+            'vendors',
+            '.grunt',
+            '*.min.js',
+            '*.bundle.js',
+        ],
+    },
+];

package/examples/DBMONSTER_COMPARISON.md

@@ -0,0 +1,123 @@
+# DBMonster Performance Comparison
+
+This directory contains two versions of the dbmonster benchmark to compare performance between manual and reactive rendering modes.
+
+## Files
+
+### Manual Mode
+- **HTML**: `dbmonsterForOf.html`
+- **JS**: `js/dbMonApp.js`
+- **Mode**: `{reactive: false}` (manual mode)
+
+### Reactive Mode
+- **HTML**: `dbmonsterForOfReactive.html`
+- **JS**: `js/dbMonAppReactive.js`
+- **Mode**: Default (reactive mode enabled)
+
+## Key Differences
+
+### Manual Mode (`dbMonApp.js`)
+
+```javascript
+// Manual mode - explicit control
+const dbMonApp = dataBind.init(document.getElementById('app'), viewModel, {reactive: false});
+
+function refreshApp() {
+    // Update original viewModel
+    viewModel.databases = performanceEnv.generateData().toArray();
+
+    // Manual render with selective template binding
+    dbMonApp.render({templateBinding: shouldUpdateTemplate});
+
+    // Manual tracking of template binding updates
+    oldDbLength = newDbLength;
+}
+```
+
+**Characteristics:**
+- ✅ Full control over when renders happen
+- ✅ Can selectively update template bindings (only when database count changes)
+- ✅ Lower overhead (no Proxy wrapper)
+- ❌ More code to write and maintain
+
+### Reactive Mode (`dbMonAppReactive.js`)
+
+```javascript
+// Reactive mode - automatic updates
+const dbMonApp = dataBind.init(document.getElementById('app'), viewModel);
+
+function refreshApp() {
+    // Update via component.viewModel to trigger automatic render
+    dbMonApp.viewModel.databases = performanceEnv.generateData().toArray();
+
+    // No render() call needed - automatic!
+    // Template bindings always update
+}
+```
+
+**Characteristics:**
+- ✅ Less code - automatic rendering
+- ✅ Modern reactive pattern (like Vue 3, MobX)
+- ✅ No manual render() calls needed
+- ⚠️ Slight Proxy overhead
+- ⚠️ Always updates template bindings (can't selectively skip)
+
+## Performance Testing
+
+### How to Test
+
+1. Open both HTML files in separate browser tabs
+2. Watch the performance metrics displayed by the monitoring scripts
+3. Compare:
+   - **Render Rate** (renders/second)
+   - **Memory Usage**
+   - **Paint Time**
+
+### Expected Results
+
+**Manual Mode:**
+- May have slightly better raw performance due to no Proxy overhead
+- Can optimize by skipping template binding updates when database count unchanged
+- More predictable render timing
+
+**Reactive Mode:**
+- Slightly more overhead from Proxy wrapper (~1-5%)
+- Always updates template bindings (may be slower if database count doesn't change)
+- Automatic batching via RAF debouncing
+
+### When to Use Each Mode
+
+**Use Manual Mode When:**
+- Maximum performance is critical (high-frequency updates)
+- You need fine-grained control over rendering
+- Working with very large objects (>10000 properties)
+- Building performance benchmarks
+
+**Use Reactive Mode When:**
+- Building typical web applications
+- Developer experience and code maintainability are priorities
+- Moderate update frequencies
+- You want automatic, predictable rendering
+
+## Technical Details
+
+### RAF Debouncing
+
+Both modes use `requestAnimationFrame` debouncing:
+- Multiple changes within a single frame are batched into one render
+- This ensures optimal performance in both modes
+
+### Proxy Overhead
+
+Reactive mode uses JavaScript Proxy to intercept property changes:
+- Modern browsers have highly optimized Proxy implementations
+- Overhead is typically negligible for most applications
+- Only noticeable with extremely high-frequency updates (like dbmonster)
+
+## Conclusion
+
+The dbmonster benchmark is an extreme stress test with continuous high-frequency updates. In real-world applications, the performance difference between manual and reactive modes is typically negligible, while reactive mode provides significantly better developer experience.
+
+Choose based on your use case:
+- **Performance benchmarks / extreme cases**: Manual mode
+- **Real-world applications**: Reactive mode

package/examples/afterRenderDemo.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>afterRender() Demo | dataBind.js</title>
+    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
+    <style>
+        body { padding: 20px; }
+        .demo-section { margin: 20px 0; padding: 20px; border: 1px solid #ddd; border-radius: 5px; }
+        .log {
+            background: #f8f9fa;
+            padding: 10px;
+            margin-top: 10px;
+            max-height: 200px;
+            overflow-y: auto;
+            font-family: monospace;
+            font-size: 12px;
+        }
+        .log-entry { margin: 2px 0; }
+        .highlight { background-color: #fff3cd; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>afterRender() Demo</h1>
+        <p class="lead">
+            The <code>afterRender(callback)</code> method registers callbacks that run after each render completes.
+            Perfect for reactive mode!
+        </p>
+
+        <!-- Example 1: Basic Usage -->
+        <div class="demo-section">
+            <h3>Example 1: Basic Usage</h3>
+            <p>afterRender callback fires after every reactive update</p>
+
+            <div data-bind-comp="basic-demo">
+                <p>Counter: <span data-bind-text="counter"></span></p>
+                <button class="btn btn-primary" data-bind-click="increment">Increment</button>
+                <button class="btn btn-secondary" data-bind-click="reset">Reset</button>
+            </div>
+
+            <div class="log" id="basic-log"></div>
+        </div>
+
+        <!-- Example 2: Performance Monitoring -->
+        <div class="demo-section">
+            <h3>Example 2: Performance Monitoring</h3>
+            <p>Use afterRender to track render performance</p>
+
+            <div data-bind-comp="perf-demo">
+                <p>Items: <span data-bind-text="items.length"></span></p>
+                <button class="btn btn-primary" data-bind-click="addItems">Add 10 Items</button>
+                <button class="btn btn-danger" data-bind-click="clearItems">Clear All</button>
+
+                <ul>
+                    <li data-bind-for="item of items" data-bind-text="item.text"></li>
+                </ul>
+            </div>
+
+            <div class="log" id="perf-log"></div>
+        </div>
+
+        <!-- Example 3: DOM Manipulation -->
+        <div class="demo-section">
+            <h3>Example 3: Post-Render DOM Manipulation</h3>
+            <p>Use afterRender to manipulate DOM after updates</p>
+
+            <div data-bind-comp="dom-demo">
+                <div>
+                    <p>Active: <span data-bind-text="activeCount"></span> / <span data-bind-text="items.length"></span></p>
+                    <button class="btn btn-success" data-bind-click="addItem">Add Item</button>
+                    <button class="btn btn-warning" data-bind-click="toggleFirst">Toggle First</button>
+                </div>
+
+                <ul id="dom-list">
+                    <li data-bind-for="item of items" data-bind-css="item.active ? 'highlight' : ''">
+                        <span data-bind-text="item.text"></span>
+                        <span data-bind-if="item.active"> (Active)</span>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="log" id="dom-log"></div>
+        </div>
+
+        <!-- Example 4: Remove Callback -->
+        <div class="demo-section">
+            <h3>Example 4: Add/Remove Callbacks</h3>
+            <p>Dynamically add and remove afterRender callbacks</p>
+
+            <div data-bind-comp="toggle-demo">
+                <p>Value: <span data-bind-text="value"></span></p>
+                <button class="btn btn-primary" data-bind-click="increment">Change Value</button>
+                <button class="btn btn-success" id="addCallback">Add Logger</button>
+                <button class="btn btn-danger" id="removeCallback">Remove Logger</button>
+                <button class="btn btn-warning" id="clearCallbacks">Clear All</button>
+            </div>
+
+            <div class="log" id="toggle-log"></div>
+        </div>
+
+        <div class="alert alert-info mt-4">
+            <h5>Key Features:</h5>
+            <ul>
+                <li>✅ <code>component.afterRender(callback)</code> - Register callback</li>
+                <li>✅ <code>component.removeAfterRender(callback)</code> - Remove specific callback</li>
+                <li>✅ <code>component.clearAfterRender()</code> - Remove all callbacks</li>
+                <li>✅ Callbacks fire after every render (automatic with reactive mode)</li>
+                <li>✅ Multiple callbacks supported</li>
+                <li>✅ Chainable API</li>
+            </ul>
+        </div>
+    </div>
+
+    <script src="../dist/js/dataBind.min.js"></script>
+    <script src="js/afterRenderDemo.js"></script>
+</body>
+</html>