npm - @gogocat/data-bind - Versions diffs - 1.11.0 → 2.0.0 - Mend

@gogocat/data-bind 1.11.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (274) hide show

package/.editorconfig +14 -14
package/.vscode/launch.json +12 -12
package/CONFIGURATION.md +294 -0
package/REACTIVE_MODE.md +553 -0
package/README.md +266 -829
package/babel.config.json +30 -0
package/dist/js/_escape.d.ts +14 -0
package/dist/js/_escape.d.ts.map +1 -0
package/dist/js/applyBinding.d.ts +11 -0
package/dist/js/applyBinding.d.ts.map +1 -0
package/dist/js/attrBinding.d.ts +12 -0
package/dist/js/attrBinding.d.ts.map +1 -0
package/dist/js/binder.d.ts +67 -0
package/dist/js/binder.d.ts.map +1 -0
package/dist/js/changeBinding.d.ts +19 -0
package/dist/js/changeBinding.d.ts.map +1 -0
package/dist/js/commentWrapper.d.ts +39 -0
package/dist/js/commentWrapper.d.ts.map +1 -0
package/dist/js/config.d.ts +55 -0
package/dist/js/config.d.ts.map +1 -0
package/dist/js/createBindingOption.d.ts +32 -0
package/dist/js/createBindingOption.d.ts.map +1 -0
package/dist/js/createEventBinding.d.ts +10 -0
package/dist/js/createEventBinding.d.ts.map +1 -0
package/dist/js/cssBinding.d.ts +15 -0
package/dist/js/cssBinding.d.ts.map +1 -0
package/dist/js/dataBind.js +2772 -2519
package/dist/js/dataBind.min.js +8 -1
package/dist/js/dataBind.min.js.map +1 -1
package/dist/js/domWalker.d.ts +9 -0
package/dist/js/domWalker.d.ts.map +1 -0
package/dist/js/forOfBinding.d.ts +12 -0
package/dist/js/forOfBinding.d.ts.map +1 -0
package/dist/js/hoverBinding.d.ts +13 -0
package/dist/js/hoverBinding.d.ts.map +1 -0
package/dist/js/ifBinding.d.ts +12 -0
package/dist/js/ifBinding.d.ts.map +1 -0
package/dist/js/index.d.ts +10 -0
package/dist/js/index.d.ts.map +1 -0
package/dist/js/modelBinding.d.ts +12 -0
package/dist/js/modelBinding.d.ts.map +1 -0
package/dist/js/postProcess.d.ts +3 -0
package/dist/js/postProcess.d.ts.map +1 -0
package/dist/js/pubSub.d.ts +11 -0
package/dist/js/pubSub.d.ts.map +1 -0
package/dist/js/reactiveProxy.d.ts +28 -0
package/dist/js/reactiveProxy.d.ts.map +1 -0
package/dist/js/renderForOfBinding.d.ts +8 -0
package/dist/js/renderForOfBinding.d.ts.map +1 -0
package/dist/js/renderIfBinding.d.ts +22 -0
package/dist/js/renderIfBinding.d.ts.map +1 -0
package/dist/js/renderIteration.d.ts +16 -0
package/dist/js/renderIteration.d.ts.map +1 -0
package/dist/js/renderTemplate.d.ts +14 -0
package/dist/js/renderTemplate.d.ts.map +1 -0
package/dist/js/renderTemplatesBinding.d.ts +19 -0
package/dist/js/renderTemplatesBinding.d.ts.map +1 -0
package/dist/js/showBinding.d.ts +13 -0
package/dist/js/showBinding.d.ts.map +1 -0
package/dist/js/switchBinding.d.ts +13 -0
package/dist/js/switchBinding.d.ts.map +1 -0
package/dist/js/textBinding.d.ts +13 -0
package/dist/js/textBinding.d.ts.map +1 -0
package/dist/js/types/_escape.d.ts +14 -0
package/dist/js/types/_escape.d.ts.map +1 -0
package/dist/js/types/applyBinding.d.ts +11 -0
package/dist/js/types/applyBinding.d.ts.map +1 -0
package/dist/js/types/attrBinding.d.ts +12 -0
package/dist/js/types/attrBinding.d.ts.map +1 -0
package/dist/js/types/binder.d.ts +67 -0
package/dist/js/types/binder.d.ts.map +1 -0
package/dist/js/types/changeBinding.d.ts +19 -0
package/dist/js/types/changeBinding.d.ts.map +1 -0
package/dist/js/types/commentWrapper.d.ts +39 -0
package/dist/js/types/commentWrapper.d.ts.map +1 -0
package/dist/js/types/config.d.ts +55 -0
package/dist/js/types/config.d.ts.map +1 -0
package/dist/js/types/createBindingOption.d.ts +32 -0
package/dist/js/types/createBindingOption.d.ts.map +1 -0
package/dist/js/types/createEventBinding.d.ts +10 -0
package/dist/js/types/createEventBinding.d.ts.map +1 -0
package/dist/js/types/cssBinding.d.ts +15 -0
package/dist/js/types/cssBinding.d.ts.map +1 -0
package/dist/js/types/domWalker.d.ts +9 -0
package/dist/js/types/domWalker.d.ts.map +1 -0
package/dist/js/types/forOfBinding.d.ts +12 -0
package/dist/js/types/forOfBinding.d.ts.map +1 -0
package/dist/js/types/hoverBinding.d.ts +13 -0
package/dist/js/types/hoverBinding.d.ts.map +1 -0
package/dist/js/types/ifBinding.d.ts +12 -0
package/dist/js/types/ifBinding.d.ts.map +1 -0
package/dist/js/types/index.d.ts +10 -0
package/dist/js/types/index.d.ts.map +1 -0
package/dist/js/types/modelBinding.d.ts +12 -0
package/dist/js/types/modelBinding.d.ts.map +1 -0
package/dist/js/types/postProcess.d.ts +3 -0
package/dist/js/types/postProcess.d.ts.map +1 -0
package/dist/js/types/pubSub.d.ts +11 -0
package/dist/js/types/pubSub.d.ts.map +1 -0
package/dist/js/types/reactiveProxy.d.ts +28 -0
package/dist/js/types/reactiveProxy.d.ts.map +1 -0
package/dist/js/types/renderForOfBinding.d.ts +8 -0
package/dist/js/types/renderForOfBinding.d.ts.map +1 -0
package/dist/js/types/renderIfBinding.d.ts +22 -0
package/dist/js/types/renderIfBinding.d.ts.map +1 -0
package/dist/js/types/renderIteration.d.ts +16 -0
package/dist/js/types/renderIteration.d.ts.map +1 -0
package/dist/js/types/renderTemplate.d.ts +14 -0
package/dist/js/types/renderTemplate.d.ts.map +1 -0
package/dist/js/types/renderTemplatesBinding.d.ts +19 -0
package/dist/js/types/renderTemplatesBinding.d.ts.map +1 -0
package/dist/js/types/showBinding.d.ts +13 -0
package/dist/js/types/showBinding.d.ts.map +1 -0
package/dist/js/types/switchBinding.d.ts +13 -0
package/dist/js/types/switchBinding.d.ts.map +1 -0
package/dist/js/types/textBinding.d.ts +13 -0
package/dist/js/types/textBinding.d.ts.map +1 -0
package/dist/js/types/types.d.ts +111 -0
package/dist/js/types/types.d.ts.map +1 -0
package/dist/js/types/util.d.ts +119 -0
package/dist/js/types/util.d.ts.map +1 -0
package/dist/js/types.d.ts +111 -0
package/dist/js/types.d.ts.map +1 -0
package/dist/js/util.d.ts +119 -0
package/dist/js/util.d.ts.map +1 -0
package/eslint.config.js +124 -0
package/examples/DBMONSTER_COMPARISON.md +123 -0
package/examples/afterRenderDemo.html +119 -0
package/examples/bootstrap/css/animate.css +1579 -1579
package/examples/bootstrap/css/bootstrap.min.css +6 -6
package/examples/bootstrap/css/homeservices.css +378 -390
package/examples/bootstrap/css/open-iconic.css +511 -511
package/examples/bootstrap/fonts/open-iconic.svg +543 -543
package/examples/bootstrap/js/compMessageDialog.js +20 -19
package/examples/bootstrap/js/compSearchBar.js +12 -19
package/examples/bootstrap/js/compSearchResults.js +50 -46
package/examples/bootstrap/js/featureAdsResult.json +65 -65
package/examples/bootstrap/js/searchResult.json +57 -57
package/examples/bootstrap.html +343 -332
package/examples/css/baseTodo.css +141 -141
package/examples/css/dbMonsterStyles.css +27 -27
package/examples/css/indexTodo.css +374 -374
package/examples/dbmonsterForOfReactive.html +40 -0
package/examples/dbmonsterReact.html +19 -0
package/examples/forOfBindingSimpleDebug.html +45 -0
package/examples/form.html +20 -4
package/examples/globalConfig.html +131 -0
package/examples/js/afterRenderDemo.js +190 -0
package/examples/js/appTodo.js +46 -46
package/examples/js/attrBindingDemo.js +2 -2
package/examples/js/dbMonApp.js +24 -26
package/examples/js/dbMonAppReact.jsx +79 -0
package/examples/js/dbMonAppReactive.js +28 -0
package/examples/js/fiberDemo.js +4 -4
package/examples/js/filtersDemo.js +8 -8
package/examples/js/forOfDemo.js +7 -9
package/examples/js/forOfDemoComplex.js +44 -17
package/examples/js/form.js +44 -12
package/examples/js/globalConfig.js +117 -0
package/examples/js/ifBindingDemo.js +16 -16
package/examples/js/reactiveDemo.js +119 -0
package/examples/js/switchBindingDemo.js +8 -8
package/examples/react-dbmonster/dist/bundle.js +43 -0
package/examples/react-dbmonster/package-lock.json +537 -0
package/examples/react-dbmonster/package.json +16 -0
package/examples/react-dbmonster/src/index.jsx +80 -0
package/examples/reactiveDemo.html +127 -0
package/examples/refreshRateTest.html +75 -75
package/index.html +841 -0
package/package.json +31 -34
package/rollup.config.js +79 -36
package/src/{_escape.js → _escape.ts} +19 -17
package/src/applyBinding.ts +179 -0
package/src/{attrBinding.js → attrBinding.ts} +14 -13
package/src/binder.ts +289 -0
package/src/changeBinding.ts +93 -0
package/src/{commentWrapper.js → commentWrapper.ts} +33 -30
package/src/config.ts +107 -0
package/src/createBindingOption.ts +91 -0
package/src/createEventBinding.ts +88 -0
package/src/{cssBinding.js → cssBinding.ts} +13 -11
package/src/{domWalker.js → domWalker.ts} +44 -30
package/src/{forOfBinding.js → forOfBinding.ts} +4 -3
package/src/hoverBinding.ts +84 -0
package/src/{ifBinding.js → ifBinding.ts} +14 -12
package/src/index.ts +53 -0
package/src/{modelBinding.js → modelBinding.ts} +11 -9
package/src/postProcess.ts +22 -0
package/src/{pubSub.js → pubSub.ts} +24 -15
package/src/reactiveProxy.ts +285 -0
package/src/{renderForOfBinding.js → renderForOfBinding.ts} +55 -33
package/src/{renderIfBinding.js → renderIfBinding.ts} +45 -20
package/src/renderIteration.ts +53 -0
package/src/renderTemplate.ts +165 -0
package/src/renderTemplatesBinding.ts +73 -0
package/src/{showBinding.js → showBinding.ts} +4 -3
package/src/{switchBinding.js → switchBinding.ts} +18 -15
package/src/{textBinding.js → textBinding.ts} +5 -4
package/src/types.ts +124 -0
package/src/util.ts +810 -0
package/test/css/reporter.css +9 -9
package/test/fixtures/dataBindBootstrap.html +2 -2
package/test/fixtures/formBindings.html +9 -1
package/test/globals.d.ts +19 -0
package/test/helpers/testHelper.js +46 -11
package/test/mocks/featureAdsResult.json +65 -65
package/test/mocks/searchResult.json +57 -57
package/test/specs/{attrBinding.spec.js → attrBinding.spec.ts} +103 -106
package/test/specs/{binder.spec.js → binder.spec.ts} +29 -27
package/test/specs/blurBinding.spec.ts +60 -0
package/test/specs/chainableUse.spec.ts +125 -0
package/test/specs/clickBinding.spec.ts +194 -0
package/test/specs/{cssBinding.spec.js → cssBinding.spec.ts} +72 -79
package/test/specs/{dataBindBootstrap.spec.js → dataBindBootstrap.spec.ts} +332 -313
package/test/specs/{filter.spec.js → filter.spec.ts} +75 -76
package/test/specs/{forOfBinding.spec.js → forOfBinding.spec.ts} +208 -219
package/test/specs/formBinding.spec.ts +272 -0
package/test/specs/ifBinding.spec.ts +165 -0
package/test/specs/{nestedComponent.spec.js → nestedComponent.spec.ts} +88 -88
package/test/specs/reactiveProxy.spec.ts +465 -0
package/test/specs/{showBinding.spec.js → showBinding.spec.ts} +148 -149
package/test/specs/{switchBinding.spec.js → switchBinding.spec.ts} +172 -173
package/test/specs/templateBinding.spec.ts +273 -0
package/test/specs/{textBinding.spec.js → textBinding.spec.ts} +47 -48
package/test/tsconfig.json +31 -0
package/test-output.txt +200 -0
package/test-reactive.html +224 -0
package/tsconfig.json +28 -0
package/vendors/lodash.custom.js +4577 -4577
package/vendors/lodash.custom.min.js +45 -45
package/vitest.config.js +27 -0
package/.eslintrc.js +0 -1
package/.grunt/grunt-contrib-jasmine/boot.js +0 -161
package/.grunt/grunt-contrib-jasmine/dist/js/dataBind.js +0 -9
package/.grunt/grunt-contrib-jasmine/grunt-template-jasmine-istanbul/reporter.js +0 -23
package/.grunt/grunt-contrib-jasmine/jasmine-html.js +0 -853
package/.grunt/grunt-contrib-jasmine/jasmine.css +0 -271
package/.grunt/grunt-contrib-jasmine/jasmine.js +0 -9761
package/.grunt/grunt-contrib-jasmine/jasmine_favicon.png +0 -0
package/.grunt/grunt-contrib-jasmine/json2.js +0 -489
package/.grunt/grunt-contrib-jasmine/reporter.js +0 -107
package/coverage/coverage.json +0 -1
package/coverage/lcov/lcov-report/base.css +0 -213
package/coverage/lcov/lcov-report/index.html +0 -93
package/coverage/lcov/lcov-report/js/dataBind.js.html +0 -6596
package/coverage/lcov/lcov-report/js/index.html +0 -93
package/coverage/lcov/lcov-report/prettify.css +0 -1
package/coverage/lcov/lcov-report/prettify.js +0 -1
package/coverage/lcov/lcov-report/sort-arrow-sprite.png +0 -0
package/coverage/lcov/lcov-report/sorter.js +0 -158
package/coverage/lcov/lcov.info +0 -1991
package/eslintrc.json +0 -40
package/examples/bootstrap/js/bootstrap.min.js +0 -6
package/examples/bootstrap/js/popper.min.js +0 -5
package/examples/bootstrap/js/searchSuggestion.js +0 -58
package/examples/bootstrap/js/typeahead.jquery.js +0 -1538
package/gruntfile.js +0 -92
package/gulpfile.js +0 -32
package/src/binder.js +0 -422
package/src/changeBinding.js +0 -57
package/src/config.js +0 -65
package/src/createBindingOption.js +0 -66
package/src/createEventBinding.js +0 -46
package/src/eventSystem.js +0 -46
package/src/hoverBinding.js +0 -57
package/src/index.js +0 -26
package/src/renderTemplate.js +0 -128
package/src/util.js +0 -648
package/test/specs/blurBinding.spec.js +0 -57
package/test/specs/formBinding.spec.js +0 -292
package/test/specs/ifBinding.spec.js +0 -169
package/test/specs/templateBinding.spec.js +0 -117
package/vendors/jasmine-jquery.js +0 -841
package/vendors/jquery-3.2.1.min.js +0 -4

package/examples/dbmonsterForOfReactive.html ADDED Viewed

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="description" content="DBMON WITH REACTIVE MODE" />
+        <link href="css/dbMonsterStyles.css" rel="stylesheet" type="text/css" />
+        <title>dbmon test dataBind.js (Reactive Mode)</title>
+    </head>
+    <body>
+        <div id="app">
+            <table class="table table-striped latest-data">
+                <tbody>
+                    <tr data-bind-for="database in databases">
+                        <td class="dbname" data-bind-text="database.dbname"></td>
+                        <td class="query-count">
+                            <span
+                                data-bind-css="database.lastSample.countClassName"
+                                data-bind-text="database.lastSample.nbQueries"
+                            ></span>
+                        </td>
+                        <td data-bind-css="q.elapsedClassName" data-bind-for="q in $data.lastSample.topFiveQueries">
+                            <span data-bind-text="q.formatElapsed"></span>
+                            <div class="popover left">
+                                <div class="popover-content" data-bind-text="q.query"></div>
+                                <div class="arrow"></div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <script src="https://mathieuancelin.github.io/js-repaint-perfs/ENV.js"></script>
+        <script src="https://mathieuancelin.github.io/js-repaint-perfs/lib/memory-stats.js"></script>
+        <script src="https://mathieuancelin.github.io/js-repaint-perfs/lib/monitor.js"></script>
+        <script src="../dist/js/dataBind.min.js"></script>
+        <script src="js/dbMonAppReactive.js"></script>
+    </body>
+</html>

package/examples/dbmonsterReact.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="description" content="DBMON REACT" />
+        <link href="css/dbMonsterStyles.css" rel="stylesheet" type="text/css" />
+        <title>dbmon test React</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script src="https://mathieuancelin.github.io/js-repaint-perfs/ENV.js"></script>
+        <script src="https://mathieuancelin.github.io/js-repaint-perfs/lib/memory-stats.js"></script>
+        <script src="https://mathieuancelin.github.io/js-repaint-perfs/lib/monitor.js"></script>
+        <!-- Compiled React bundle -->
+        <script src="react-dbmonster/dist/bundle.js"></script>
+    </body>
+</html>

package/examples/forOfBindingSimpleDebug.html ADDED Viewed

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>ForOf Debug</title>
+</head>
+<body>
+    <h1>ForOf Binding Debug</h1>
+    <div data-bind-comp="test-component">
+        <h3>Title: <span data-bind-text="title"></span></h3>
+        <p>Item count: <span data-bind-text="items.length"></span></p>
+        <div id="results" data-bind-tmp="{id: 'itemsTemplate', data: 'items'}"></div>
+    </div>
+    <template id="itemsTemplate">
+        <div data-bind-for="item in $root.items" style="border: 1px solid black; padding: 10px; margin: 5px;">
+            <strong data-bind-text="item.name"></strong>:
+            <span data-bind-text="item.value"></span>
+        </div>
+    </template>
+    <script src="../dist/js/dataBind.min.js"></script>
+    <script>
+        const viewModel = {
+            title: 'Test Items',
+            items: [
+                { name: 'Item 1', value: 'Value 1' },
+                { name: 'Item 2', value: 'Value 2' },
+                { name: 'Item 3', value: 'Value 3' },
+                { name: 'Item 4', value: 'Value 4' },
+                { name: 'Item 5', value: 'Value 5' }
+            ]
+        };
+        const component = dataBind.init(document.querySelector('[data-bind-comp="test-component"]'), viewModel);
+        component.render().then(() => {
+            console.log('Rendered!', component);
+            console.log('Results div:', document.getElementById('results'));
+            console.log('Results div children:', document.getElementById('results').children);
+        });
+    </script>
+</body>
+</html>

package/examples/form.html CHANGED Viewed

@@ -24,15 +24,18 @@
                     data-bind-tmp="{id:'formItems', data:'$root.personalDetails'}"
                 ></div>
-                <h5>formComponentB new instance of FormComponentVewModel</h5>
+                <h5 class="mt-5">formComponentB new instance of FormComponentVewModel</h5>
                 <div
                     data-bind-comp="formComponentB"
                     data-bind-for="item of personalDetails"
                     data-bind-tmp="{id:'formItems', data:'$root.personalDetails'}"
                 ></div>
-                <div data-bind-attr="attrTest">
-                    This is attribute binding test!
-                </div>
+                <h5 class="mt-5">componentRangeInput</h5>
+                <div
+                    data-bind-comp="componentRangeInput"
+                    data-bind-tmp="{id:'rangeInput'}"
+                ></div>
             </div>
         </section>
@@ -71,6 +74,19 @@
             </div>
         </template>
+        <template id="rangeInput">
+            <div class="form-row">
+                <div class="col-8">
+                    <label data-bind-text="range.value"></label>
+                    <input
+                        data-bind-attr="getRangeAttr"
+                        data-bind-model="range.value"
+                        data-bind-input="onInputChange"
+                    >
+                </div>
+            </div>
+        </template>
         <script src="../dist/js/dataBind.min.js"></script>
         <script src="js/form.js"></script>
     </body>

package/examples/globalConfig.html ADDED Viewed

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>dataBind - Global Configuration Demo</title>
+        <style>
+            body {
+                font-family: Arial, sans-serif;
+                max-width: 1200px;
+                margin: 0 auto;
+                padding: 20px;
+            }
+            .section {
+                border: 2px solid #ddd;
+                padding: 20px;
+                margin: 20px 0;
+                border-radius: 8px;
+            }
+            .section h3 {
+                margin-top: 0;
+                color: #333;
+            }
+            button {
+                padding: 8px 16px;
+                margin: 5px;
+                cursor: pointer;
+                border: 1px solid #007bff;
+                background: #007bff;
+                color: white;
+                border-radius: 4px;
+            }
+            button:hover {
+                background: #0056b3;
+            }
+            .output {
+                background: #f5f5f5;
+                padding: 10px;
+                margin: 10px 0;
+                border-radius: 4px;
+                font-family: monospace;
+            }
+            .mode-badge {
+                display: inline-block;
+                padding: 4px 8px;
+                border-radius: 4px;
+                font-size: 12px;
+                font-weight: bold;
+            }
+            .reactive {
+                background: #28a745;
+                color: white;
+            }
+            .manual {
+                background: #ffc107;
+                color: #333;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>dataBind.js - Global Configuration Demo</h1>
+        <p>This demo shows how to use <code>dataBind.use()</code> to configure global defaults.</p>
+        <!-- Example 1: Default Reactive Mode -->
+        <div class="section">
+            <h3>Example 1: Default Configuration <span class="mode-badge reactive">REACTIVE</span></h3>
+            <p>No configuration - uses built-in default (reactive: true)</p>
+            <div data-bind-comp="default-example">
+                <div class="output">
+                    <div>Counter: <span data-bind-text="counter"></span></div>
+                </div>
+                <button data-bind-click="increment">Increment</button>
+                <button data-bind-click="reset">Reset</button>
+            </div>
+        </div>
+        <!-- Example 2: Global Manual Mode -->
+        <div class="section">
+            <h3>Example 2: After dataBind.use({reactive: false}) <span class="mode-badge manual">MANUAL</span></h3>
+            <p>This component uses manual mode because we called dataBind.use({reactive: false})</p>
+            <div data-bind-comp="global-manual">
+                <div class="output">
+                    <div>Counter: <span data-bind-text="counter"></span></div>
+                </div>
+                <button data-bind-click="increment">Increment (Manual Mode)</button>
+                <button data-bind-click="reset">Reset (Manual Mode)</button>
+            </div>
+        </div>
+        <!-- Example 3: Chainable API -->
+        <div class="section">
+            <h3>Example 3: Chainable API <span class="mode-badge manual">MANUAL</span></h3>
+            <p>This component uses <code>dataBind.use({reactive: false}).init(...)</code> chaining</p>
+            <div data-bind-comp="chainable">
+                <div class="output">
+                    <div>Counter: <span data-bind-text="counter"></span></div>
+                </div>
+                <button data-bind-click="increment">Increment (Chained)</button>
+                <button data-bind-click="reset">Reset (Chained)</button>
+            </div>
+        </div>
+        <!-- Example 4: Instance Override -->
+        <div class="section">
+            <h3>Example 4: Instance Override <span class="mode-badge reactive">REACTIVE</span></h3>
+            <p>This component overrides global setting with {reactive: true}</p>
+            <div data-bind-comp="instance-override">
+                <div class="output">
+                    <div>Counter: <span data-bind-text="counter"></span></div>
+                </div>
+                <button data-bind-click="increment">Increment (Override to Reactive)</button>
+                <button data-bind-click="reset">Reset (Override to Reactive)</button>
+            </div>
+        </div>
+        <!-- Configuration Status -->
+        <div class="section">
+            <h3>Current Configuration</h3>
+            <div class="output">
+                <div>Example 1 Mode: <span id="mode1"></span></div>
+                <div>Example 2 Mode: <span id="mode2"></span></div>
+                <div>Example 3 Mode: <span id="mode3"></span></div>
+                <div>Example 4 Mode: <span id="mode4"></span></div>
+            </div>
+        </div>
+        <script src="../dist/js/dataBind.min.js"></script>
+        <script src="js/globalConfig.js"></script>
+    </body>
+</html>

package/examples/js/afterRenderDemo.js ADDED Viewed

@@ -0,0 +1,190 @@
+(function () {
+    // Helper function to log messages
+    function log(logId, message, type = 'info') {
+        const logEl = document.getElementById(logId);
+        const entry = document.createElement('div');
+        entry.className = 'log-entry';
+        entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
+        logEl.appendChild(entry);
+        logEl.scrollTop = logEl.scrollHeight;
+    }
+    // Example 1: Basic Usage
+    const basicViewModel = {
+        counter: 0,
+        increment() {
+            this.counter++;
+            // Reactive mode - automatic render!
+        },
+        reset() {
+            this.counter = 0;
+            // Reactive mode - automatic render!
+        },
+    };
+    const basicComponent = dataBind.init(
+        document.querySelector('[data-bind-comp="basic-demo"]'),
+        basicViewModel,
+    );
+    // Register afterRender callback
+    basicComponent.afterRender(() => {
+        log('basic-log', `Counter updated to: ${basicComponent.viewModel.counter}`);
+    });
+    basicComponent.render().then(() => {
+        log('basic-log', 'Component initialized');
+    });
+    // Example 2: Performance Monitoring
+    const perfViewModel = {
+        items: [],
+        addItems() {
+            for (let i = 0; i < 10; i++) {
+                this.items.push({
+                    text: `Item ${this.items.length + 1}`,
+                    id: Date.now() + i,
+                });
+            }
+            // Reactive mode - automatic render!
+        },
+        clearItems() {
+            this.items = [];
+            // Reactive mode - automatic render!
+        },
+    };
+    const perfComponent = dataBind.init(
+        document.querySelector('[data-bind-comp="perf-demo"]'),
+        perfViewModel,
+    );
+    // Track render performance
+    let renderStartTime;
+    perfComponent.afterRender(() => {
+        if (renderStartTime) {
+            const renderTime = performance.now() - renderStartTime;
+            log('perf-log', `Render completed in ${renderTime.toFixed(2)}ms (${perfComponent.viewModel.items.length} items)`);
+            renderStartTime = null;
+        }
+    });
+    // Hook into viewModel changes to track start time
+    const originalAddItems = perfViewModel.addItems;
+    perfViewModel.addItems = function () {
+        renderStartTime = performance.now();
+        originalAddItems.call(this);
+    };
+    const originalClearItems = perfViewModel.clearItems;
+    perfViewModel.clearItems = function () {
+        renderStartTime = performance.now();
+        originalClearItems.call(this);
+    };
+    perfComponent.render().then(() => {
+        log('perf-log', 'Performance monitor ready');
+    });
+    // Example 3: DOM Manipulation
+    const domViewModel = {
+        items: [
+            {text: 'Item 1', active: true},
+            {text: 'Item 2', active: false},
+        ],
+        get activeCount() {
+            return this.items.filter(item => item.active).length;
+        },
+        addItem() {
+            this.items.push({
+                text: `Item ${this.items.length + 1}`,
+                active: false,
+            });
+            // Reactive mode - automatic render!
+        },
+        toggleFirst() {
+            if (this.items.length > 0) {
+                this.items[0].active = !this.items[0].active;
+                // Reactive mode - automatic render!
+            }
+        },
+    };
+    const domComponent = dataBind.init(
+        document.querySelector('[data-bind-comp="dom-demo"]'),
+        domViewModel,
+    );
+    // DOM manipulation after render
+    domComponent.afterRender(() => {
+        const list = document.getElementById('dom-list');
+        const activeItems = list.querySelectorAll('.highlight');
+        log('dom-log', `Render complete: ${activeItems.length} active items highlighted`);
+        // Example: Scroll to first active item
+        if (activeItems.length > 0) {
+            activeItems[0].scrollIntoView({behavior: 'smooth', block: 'nearest'});
+        }
+    });
+    domComponent.render().then(() => {
+        log('dom-log', 'DOM manipulation demo ready');
+    });
+    // Example 4: Add/Remove Callbacks
+    const toggleViewModel = {
+        value: 0,
+        increment() {
+            this.value++;
+            // Reactive mode - automatic render!
+        },
+    };
+    const toggleComponent = dataBind.init(
+        document.querySelector('[data-bind-comp="toggle-demo"]'),
+        toggleViewModel,
+    );
+    // Callback reference for add/remove
+    let loggerCallback = null;
+    document.getElementById('addCallback').addEventListener('click', () => {
+        if (!loggerCallback) {
+            loggerCallback = () => {
+                log('toggle-log', `Value changed to: ${toggleComponent.viewModel.value}`);
+            };
+            toggleComponent.afterRender(loggerCallback);
+            log('toggle-log', '✅ Logger callback added', 'success');
+        } else {
+            log('toggle-log', '⚠️ Logger already added', 'warning');
+        }
+    });
+    document.getElementById('removeCallback').addEventListener('click', () => {
+        if (loggerCallback) {
+            toggleComponent.removeAfterRender(loggerCallback);
+            log('toggle-log', '❌ Logger callback removed', 'info');
+            loggerCallback = null;
+        } else {
+            log('toggle-log', '⚠️ No logger to remove', 'warning');
+        }
+    });
+    document.getElementById('clearCallbacks').addEventListener('click', () => {
+        toggleComponent.clearAfterRender();
+        log('toggle-log', '🗑️ All callbacks cleared', 'info');
+        loggerCallback = null;
+    });
+    toggleComponent.render().then(() => {
+        log('toggle-log', 'Toggle demo ready');
+    });
+    // Debug access
+    window.afterRenderDemos = {
+        basic: basicComponent,
+        perf: perfComponent,
+        dom: domComponent,
+        toggle: toggleComponent,
+    };
+})();

package/examples/js/appTodo.js CHANGED Viewed

@@ -12,7 +12,7 @@
         showAllCss: {selected: true},
         showActiveCss: {selected: false},
         showCompletedCss: {selected: false},
-        onAddTask: function(e, $el, newValue, oldValue) {
+        onAddTask(e, $el, newValue) {
             this.tasks.push({
                 taskTitle: String(newValue).trim(),
                 completed: false,
@@ -23,32 +23,32 @@
             this.updateViewData();
             $el.value = '';
         },
-        onMarkAllCompleted: function(e, $el, newValue, oldValue) {
-            this.tasks.forEach(function(task, index) {
+        onMarkAllCompleted(e, $el, newValue) {
+            this.tasks.forEach((task) => {
                 task.completed = newValue;
             });
             this.updateViewData();
         },
-        onClearAllCompleted: function(e, $el) {
-            const newTasks = this.tasks.filter(function(task, index) {
+        onClearAllCompleted() {
+            const newTasks = this.tasks.filter((task) => {
                 return task.completed !== true;
             });
             this.tasks = newTasks;
             this.updateViewData();
         },
-        onTaskCompleted: function(e, $el, newValue, oldValue, index) {
+        onTaskCompleted(e, $el, newValue, oldValue, index) {
             this.tasks[index].completed = newValue;
             this.updateViewData({templateBinding: true});
         },
-        onTaskRemove: function(e, $el, index) {
+        onTaskRemove(e, $el, index) {
             this.tasks.splice(index, 1);
             this.updateViewData();
         },
-        onEditTask: function(e, $el, index) {
+        onEditTask(e, $el, index) {
             this.tasks[index].editing = true;
             this.updateViewData({templateBinding: false});
         },
-        onBlurEditTask: function(e, $el, index) {
+        onBlurEditTask(e, $el, index) {
             const oldValue = this.tasks[index].taskTitle;
             const newValue = $el.value.trim();
             let isChanged = false;
@@ -60,58 +60,58 @@
             this.tasks[index].editing = false;
             this.updateViewData({templateBinding: isChanged});
         },
-        onShowAllTasks: function(e) {
+        onShowAllTasks() {
             this.displayFilter = 'all';
             this.updateViewData();
         },
-        onShowAactiveTasks: function(e) {
+        onShowAactiveTasks() {
             this.displayFilter = 'active';
             this.updateViewData();
         },
-        onShowCompletedTasks: function(e) {
+        onShowCompletedTasks() {
             this.displayFilter = 'completed';
             this.updateViewData();
         },
-        getCompletedTasks: function() {
-            return this.tasks.filter(function(task, index) {
+        getCompletedTasks() {
+            return this.tasks.filter((task) => {
                 return task.completed === true;
             });
         },
-        getDisplayTasks: function() {
+        getDisplayTasks() {
             let displayTasks = [];
             switch (this.displayFilter) {
-            case 'all':
-                displayTasks = this.tasks;
-                this.showAllCss = {selected: true};
-                this.showActiveCss = {selected: false};
-                this.showCompletedCss = {selected: false};
-                break;
-            case 'active':
-                displayTasks = this.tasks.filter(function(task, index) {
-                    return task.completed !== true;
-                });
-                this.showAllCss = {selected: false};
-                this.showActiveCss = {selected: true};
-                this.showCompletedCss = {selected: false};
-                break;
-            case 'completed':
-                displayTasks = displayTasks = this.tasks.filter(function(task, index) {
-                    return task.completed === true;
-                });
-                this.showAllCss = {selected: false};
-                this.showActiveCss = {selected: false};
-                this.showCompletedCss = {selected: true};
-                break;
+                case 'all':
+                    displayTasks = this.tasks;
+                    this.showAllCss = {selected: true};
+                    this.showActiveCss = {selected: false};
+                    this.showCompletedCss = {selected: false};
+                    break;
+                case 'active':
+                    displayTasks = this.tasks.filter((task) => {
+                        return task.completed !== true;
+                    });
+                    this.showAllCss = {selected: false};
+                    this.showActiveCss = {selected: true};
+                    this.showCompletedCss = {selected: false};
+                    break;
+                case 'completed':
+                    displayTasks = displayTasks = this.tasks.filter((task) => {
+                        return task.completed === true;
+                    });
+                    this.showAllCss = {selected: false};
+                    this.showActiveCss = {selected: false};
+                    this.showCompletedCss = {selected: true};
+                    break;
             }
             return displayTasks;
         },
-        setTaskLabelAttr: function(index) {
+        setTaskLabelAttr(index) {
             return {for: `taskEdit-${index}`};
         },
-        setTaskInputAttr: function(index) {
+        setTaskInputAttr(index) {
             return {id: `taskEdit-${index}`};
         },
-        updateViewData: function(renderOption) {
+        updateViewData(renderOption) {
             const compltedTasks = this.getCompletedTasks();
             const compltedTasksLength = compltedTasks.length;
             const currentTaskLength = this.tasks.length;
@@ -122,25 +122,25 @@
             this.remainingCount = currentTaskLength - compltedTasksLength;
             this.remainingCountLabel = this.remainingCount > 1 ? ' tasks' : ' task';
             this.displayTasks = this.getDisplayTasks();
-            todoApp.render(renderOption);
+            // Reactive mode - automatic render!
             // update db
             db.set('todos', this.tasks);
         },
-        afterTemplateRender: function() {
+        afterTemplateRender() {
             console.log('template rendered');
         },
     };
     const db = {
-        set: function(storeKey, data) {
+        set(storeKey, data) {
             if (storeKey && data) {
                 localStorage.setItem(storeKey, JSON.stringify(data));
             }
         },
-        get: function(storeKey) {
+        get(storeKey) {
             return JSON.parse(localStorage.getItem(storeKey));
         },
-        clear: function(storeKey) {
+        clear(storeKey) {
             if (storeKey) {
                 localStorage.removeItem(storeKey);
             }
@@ -150,7 +150,7 @@
     viewModel.displayTasks = db.get('todos') || [];
     const todoApp = dataBind.init(document.getElementById('todoapp'), viewModel);
-    todoApp.render().then(function() {
+    todoApp.render().then(() => {
         // retrive data from storage
         viewModel.tasks = db.get('todos') || [];
         // update viewModel data and trigger todoApp.render

package/examples/js/attrBindingDemo.js CHANGED Viewed

@@ -5,13 +5,13 @@ const viewModel = {
         style: 'width:300px',
         ref: 'newRef',
     },
-    attrFn: function($data) {
+    attrFn() {
         return {
             id: 'newId',
             ref: 'newRef2',
         };
     },
-    updateView: function(opt) {
+    updateView(opt) {
         this.APP.render(opt);
     },
 };