@gogocat/data-bind 1.11.0 → 2.0.0

package/examples/js/dbMonApp.js

@@ -1,26 +1,24 @@
-const viewModel = {
-    databases: ENV.generateData().toArray(),
-};
-let oldDbLength = viewModel.databases.length;
-let newDbLength = 0;
-
-function refreshApp() {
-    let shouldUpdateTemplate = true;
-
-    viewModel.databases = ENV.generateData().toArray();
-    newDbLength = viewModel.databases.length;
-    shouldUpdateTemplate = oldDbLength !== newDbLength;
-    // only re-render template binding if database size different
-    dbMonApp.render({templateBinding: shouldUpdateTemplate});
-    oldDbLength = newDbLength;
-
-    Monitoring.renderRate.ping();
-    setTimeout(refreshApp, ENV.timeout);
-}
-
-
-const dbMonApp = dataBind.init(document.getElementById('app'), viewModel);
-dbMonApp.render().then(function() {
-    console.log('dbMonApp inited');
-    refreshApp();
-});
+const performanceEnv = window.ENV;
+const performanceMonitoring = window.Monitoring;
+
+const viewModel = {
+    databases: performanceEnv.generateData().toArray(),
+};
+
+// Manual mode for performance benchmark
+const dbMonApp = dataBind.init(document.getElementById('app'), viewModel, {reactive: false});
+
+function refreshApp() {
+    viewModel.databases = performanceEnv.generateData().toArray();
+    dbMonApp.render();
+
+    performanceMonitoring.renderRate.ping();
+    setTimeout(refreshApp, performanceEnv.timeout);
+}
+
+// render().then() works with both reactive and manual modes
+// The callback runs after the initial render completes
+dbMonApp.render().then(() => {
+    console.log('dbMonApp (Manual) inited');
+    refreshApp();
+});

package/examples/js/dbMonAppReact.jsx

@@ -0,0 +1,79 @@
+const { useState, useEffect, useRef } = React;
+
+// Query component
+function Query({ query }) {
+    return (
+        <td className={query.elapsedClassName}>
+            <span>{query.formatElapsed}</span>
+            <div className="popover left">
+                <div className="popover-content">{query.query}</div>
+                <div className="arrow"></div>
+            </div>
+        </td>
+    );
+}
+
+// Database row component
+function Database({ database }) {
+    return (
+        <tr>
+            <td className="dbname">{database.dbname}</td>
+            <td className="query-count">
+                <span className={database.lastSample.countClassName}>
+                    {database.lastSample.nbQueries}
+                </span>
+            </td>
+            {database.lastSample.topFiveQueries.map((query, index) => (
+                <Query key={index} query={query} />
+            ))}
+        </tr>
+    );
+}
+
+// Main app component
+function App() {
+    const [databases, setDatabases] = useState([]);
+    const performanceEnv = useRef(window.ENV);
+    const performanceMonitoring = useRef(window.Monitoring);
+    const timeoutId = useRef(null);
+
+    const refreshApp = () => {
+        const newData = performanceEnv.current.generateData().toArray();
+        setDatabases(newData);
+
+        performanceMonitoring.current.renderRate.ping();
+        timeoutId.current = setTimeout(refreshApp, performanceEnv.current.timeout);
+    };
+
+    useEffect(() => {
+        // Initial render
+        const initialData = performanceEnv.current.generateData().toArray();
+        setDatabases(initialData);
+
+        console.log('dbMonApp (React) initialized');
+
+        // Start the refresh loop
+        timeoutId.current = setTimeout(refreshApp, performanceEnv.current.timeout);
+
+        // Cleanup on unmount
+        return () => {
+            if (timeoutId.current) {
+                clearTimeout(timeoutId.current);
+            }
+        };
+    }, []);
+
+    return (
+        <table className="table table-striped latest-data">
+            <tbody>
+                {databases.map((database, index) => (
+                    <Database key={index} database={database} />
+                ))}
+            </tbody>
+        </table>
+    );
+}
+
+// Render the app
+const root = ReactDOM.createRoot(document.getElementById('app'));
+root.render(<App />);

package/examples/js/dbMonAppReactive.js

@@ -0,0 +1,28 @@
+const performanceEnv = window.ENV;
+const performanceMonitoring = window.Monitoring;
+
+const viewModel = {
+    databases: performanceEnv.generateData().toArray(),
+};
+
+// Reactive mode is enabled by default (no need to specify {reactive: true})
+// This demo uses automatic reactive rendering for all updates
+const dbMonApp = dataBind.init(document.getElementById('app'), viewModel);
+
+function refreshApp() {
+    // Update via component.viewModel to trigger reactive updates
+    dbMonApp.viewModel.databases = performanceEnv.generateData().toArray();
+
+    // In reactive mode, render is triggered automatically
+    // No need to call render() manually!
+
+    performanceMonitoring.renderRate.ping();
+    setTimeout(refreshApp, performanceEnv.timeout);
+}
+
+// render().then() works with both reactive and manual modes
+// The callback runs after the initial render completes
+dbMonApp.render().then(() => {
+    console.log('dbMonApp (Reactive) inited');
+    refreshApp();
+});

package/examples/js/fiberDemo.js

@@ -5,11 +5,11 @@ const fiberViewModel = {
     dots: [],
     dotCss: 'dot',
     onHoverDot: {
-        in: function(e, $el, index) {
+        in(e, $el, index) {
             $el.style.background = '#ff0';
             this.dots[index].isMouseOver = true;
         },
-        out: function(e, $el, index) {
+        out(e, $el, index) {
             $el.style.background = '#61dafb';
             this.dots[index].isMouseOver = false;
         },
@@ -53,7 +53,7 @@ function createDot(x, y) {
 
 function recursiveUpdateDotsData(viewModel) {
     const remainder = getElapsedSecond() % 10;
-    const text = Math.floor(remainder) + '';
+    const text = `${Math.floor(remainder)  }`;
     const scaleXFactor = (1 + (5 - Math.abs(5 - remainder)) / 10) / 2.1;
 
     // update viewModel data
@@ -79,7 +79,7 @@ fiberViewModel.dots = createDotList();
 // start binding on DOM ready
 // formComponentC - test for-of binding
 const fiberComponent = dataBind.init(document.querySelector('[data-bind-comp="fiberDemoComponent"]'), fiberViewModel);
-fiberComponent.render().then(function() {
+fiberComponent.render().then(() => {
     // for debug
     console.log(fiberComponent);
     window.fiberComponent = fiberComponent;

package/examples/js/filtersDemo.js

@@ -1,4 +1,4 @@
-/* eslint-disable max-len */
+
 (() => {
     const filterComponentViewModel = {
         renderIntro: true,
@@ -12,7 +12,7 @@
             description:
                 '"Hansel and Gretel" (also known as Hansel and Grettel, Hansel and Grethel, or Little Brother and Little Sister) is a well-known fairy tale of German origin, recorded by the Brothers Grimm and published in 1812. Hansel and Gretel are a young brother and sister kidnapped by a cannibalistic witch living deep in the forest in a house constructed of cake and confectionery. The two children escape with their lives by outwitting her. The tale has been adapted to various media, most notably the opera Hänsel und Gretel (1893) by Engelbert Humperdinck. Under the Aarne–Thompson classification system, "Hansel and Gretel" is classified under Class 327.',
         },
-        setStoryImgAttr: function() {
+        setStoryImgAttr() {
             const picPath = this.story.pic || '';
             const ret = {
                 alt: this.story.title,
@@ -25,20 +25,20 @@
             }
             return ret;
         },
-        addPic: function(e, $el) {
+        addPic(e) {
             e.preventDefault();
             this.story.pic = storyPic;
             this.updateView();
         },
-        removePic: function(e, $el) {
+        removePic(e) {
             e.preventDefault();
             this.story.pic = '';
             this.updateView();
         },
-        toUpper: function(strg) {
+        toUpper(strg) {
             return strg.toUpperCase();
         },
-        toDateFormat: function(dateString) {
+        toDateFormat(dateString) {
             const date = new Date(dateString);
             const monthNames = [
                 'January',
@@ -71,8 +71,8 @@
     // start binding on DOM ready
 
     // main
-    filterComponent = dataBind.init(document.querySelector('[data-bind-comp="filterComponent"]'), filterComponentViewModel);
-    filterComponent.render().then(function() {
+    const filterComponent = dataBind.init(document.querySelector('[data-bind-comp="filterComponent"]'), filterComponentViewModel);
+    filterComponent.render().then(() => {
         // for debug
         console.log(filterComponent);
         window.filterComponent = filterComponent;

package/examples/js/forOfDemo.js

@@ -1,4 +1,4 @@
-(function() {
+(function () {
     // viewModel as Class for create multiple instance
     class FormComponentVewModel {
         constructor() {
@@ -51,7 +51,7 @@
         onInputChange(e, $el, newValue, oldValue, index) {
             console.log('onInputChange: ', this);
             this.personalDetails[index].show = false;
-            this.updateView();
+            // Reactive mode - automatic render!
         }
 
         addRows(e) {
@@ -72,29 +72,27 @@
                     updatedCss: 'updated',
                 },
             );
-            this.updateView();
+            // Reactive mode - automatic render!
         }
         removeRows(e) {
             e.preventDefault();
             this.personalDetails.splice(this.personalDetails.length - 2, 2);
-            this.updateView();
+            // Reactive mode - automatic render!
         }
         afterTemplateRender() {
             console.log('template rendered');
         }
-        updateView(opt) {
-            this.APP.render(opt);
-        }
     }
 
     // formComponentC viewModel
-    forOfComponentViewModel = new FormComponentVewModel();
+    const forOfComponentViewModel = new FormComponentVewModel();
 
     // start binding on DOM ready
 
     // formComponentC - test for-of binding
+    // Reactive mode is now the default!
     const forOfComponent = dataBind.init(document.querySelector('[data-bind-comp="forOfComponent"]'), forOfComponentViewModel);
-    forOfComponent.render().then(function() {
+    forOfComponent.render().then(() => {
         // for debug
         window.forOfComponent = forOfComponent;
     });

package/examples/js/forOfDemoComplex.js

@@ -1,4 +1,4 @@
-/* eslint-disable max-len */
+
 // search-results-component
 (() => {
     const viewModel = {
@@ -81,7 +81,7 @@
                 options: [{text: '1', value: '1'}, {text: '2', value: '2'}, {text: '3', value: '3'}],
             },
         ],
-        getResultItemAttr: function(index, oldAttrObj, $el) {
+        getResultItemAttr(index, oldAttrObj, $el) {
             const self = this;
             if (self.searchResults[index].image) {
                 return {
@@ -90,7 +90,7 @@
                 };
             }
         },
-        setResultOptionAttr: function($data, oldAttrObj, $el) {
+        setResultOptionAttr($data, oldAttrObj, $el) {
             if ($data && $data.value) {
                 // todo: the index here is the outter loop index
                 return {
@@ -98,21 +98,24 @@
                 };
             }
         },
-        onAdMessageCheck: function(e, $el, newValue, oldValue, index) {
+        onAdMessageCheck(e, $el, newValue, oldValue, index) {
             console.log('onAdMessageCheck: ', $el, newValue, oldValue, index);
         },
-        onAdBookmarkClick: function(e, $el, index) {
+        onAdBookmarkClick(e, $el, index) {
             e.preventDefault();
             console.log('onAdBookmarkClick: ', $el, index);
         },
     };
 
+    // Default mutations count, controlled by slider
+    let mutationsCount = 50;
+
     const generateRamdomData = () => {
         const data = [];
         const getRandomNumber = (x, y) => {
             return Math.floor(Math.random() * (y - x + 1) + x);
         };
-        const randomSeed = getRandomNumber(1, 30);
+        const randomSeed = mutationsCount;
         const images = [
             'bootstrap/images/pic-home.jpg',
             'bootstrap/images/pic-carpenter.jpg',
@@ -132,7 +135,7 @@
         for (let i = 0; i < randomSeed; i += 1) {
             data.push({
                 id: i,
-                title: 'Sample gardening service' + i,
+                title: `Sample gardening service${  i}`,
                 description: descriptions[getRandomNumber(0, descriptions.length - 1)],
                 image: images[getRandomNumber(0, images.length - 1)],
                 bookmarked: false,
@@ -145,34 +148,58 @@
     };
 
     const updateResults = () => {
-        window.updateInterval = setInterval(function() {
-            viewModel.searchResults = generateRamdomData();
-            searchResultsComponent.render();
+        window.updateInterval = setInterval(() => {
+            // Important: Use searchResultsComponent.viewModel (proxied version) for reactive updates
+            searchResultsComponent.viewModel.searchResults = generateRamdomData();
+            // Automatic render happens via reactive proxy!
+
+            // Note: In reactive mode, render is called automatically.
+            // For monitoring, we manually trigger render().then() to get the promise callback
+            // This is safe because render() is debounced - it won't cause double rendering
+            if (typeof Monitoring !== 'undefined') {
+                searchResultsComponent.render().then(() => {
+                    Monitoring.renderRate.ping();
+                });
+            }
         });
     };
 
     // start binding on DOM ready
 
-    // debug
-    const searchResultsComponent = dataBind.init(document.querySelector('[data-bind-comp="search-results-component"]'), viewModel);
+    // debug - Reactive mode is now the default!
+    const searchResultsComponent = dataBind.init(
+        document.querySelector('[data-bind-comp="search-results-component"]'),
+        viewModel
+    );
 
-    searchResultsComponent.render().then(function() {
+    searchResultsComponent.render().then(() => {
         // for debug
         console.log(searchResultsComponent);
         window.searchResultsComponent = searchResultsComponent;
 
-        btnRandomRender = document.getElementById('btnRandomRender');
-        btnStopRandomRender = document.getElementById('btnStopRandomRender');
+        const btnRandomRender = document.getElementById('btnRandomRender');
+        const btnStopRandomRender = document.getElementById('btnStopRandomRender');
 
-        btnRandomRender.addEventListener('click', function(e) {
+        btnRandomRender.addEventListener('click', (e) => {
             e.preventDefault();
             clearInterval(window.updateInterval);
             updateResults();
         }, false);
 
-        btnStopRandomRender.addEventListener('click', function(e) {
+        btnStopRandomRender.addEventListener('click', (e) => {
             e.preventDefault();
             clearInterval(window.updateInterval);
         }, false);
+
+        // Connect mutations slider to control item count
+        const mutationsSlider = document.getElementById('mutations');
+        const mutationsValueSpan = document.getElementById('mutationsValue');
+
+        if (mutationsSlider && mutationsValueSpan) {
+            mutationsSlider.addEventListener('input', (e) => {
+                mutationsCount = parseInt(e.target.value, 10);
+                mutationsValueSpan.textContent = mutationsCount;
+            });
+        }
     });
 })();

package/examples/js/form.js

@@ -1,4 +1,4 @@
-(() =>{
+(() => {
     const formAppViewModel = {
         intro: {
             title: 'Form generator demo',
@@ -10,11 +10,7 @@
             And finally a quick test of attribute binding 😎`,
             btnText: 'Fake button »',
         },
-        attrTest: {
-            class: 'show',
-            name: 'abc',
-        },
-        onBtnClick: function(e, $el) {
+        onBtnClick(e, $el) {
             e.preventDefault();
             console.log('onBtnClick: ', $el);
         },
@@ -43,13 +39,13 @@
         onInputChange(e, $el, newValue, oldValue) {
             console.log('onInputChange: ', this);
             this.personalDetails[0].show = false;
-            this.updateView();
+            // Reactive mode - automatic render!
         }
         afterTemplateRender() {
             console.log('template rendered');
         }
-        updateView(opt) {
-            this.APP.render(opt);
+        updateView(opt) {  // Note: render is automatic in reactive mode
+            // Reactive mode - automatic render!
         }
         getInputAttr(index) {
             const personalDetail = this.personalDetails[index];
@@ -62,6 +58,7 @@
 
     // use new instance of FormComponentVewModel and overwrite personalDetails
     const formComponentBViewModel = new FormComponentVewModel();
+
     formComponentBViewModel.personalDetails = [
         {
             show: true,
@@ -79,11 +76,37 @@
         },
     ];
 
+
+    // componentRangeInput
+    const componentRangeInputViewModel = {
+        range: {
+            value: 50,
+        },
+        getRangeAttr() {
+            return {
+                type: 'range',
+                name: 'test-range',
+                id: 'test-range',
+                min: 0,
+                max: 100,
+                step: 1,
+            };
+        },
+        onInputChange(e, $el, newValue, oldValue) {
+            e.preventDefault();
+            this.range.value = newValue;
+            // Reactive mode - automatic render!
+        },
+        updateView(opt) {  // Note: render is automatic in reactive mode
+            // Reactive mode - automatic render!
+        },
+    };
+
     // start binding on DOM ready
 
     // main formApp
     const formApp = dataBind.init(document.querySelector('[data-bind-comp="formApp"]'), formAppViewModel);
-    formApp.render().then(function() {
+    formApp.render().then(() => {
         // for debug
         console.log(formApp);
         window.formApp = formApp;
@@ -92,7 +115,7 @@
     // formComponentA
     const formComponentA = dataBind.init(document.querySelector('[data-bind-comp="formComponentA"]'), new FormComponentVewModel());
 
-    formComponentA.render().then(function() {
+    formComponentA.render().then(() => {
         // for debug
         console.log(formComponentA);
         window.formComponentA = formComponentA;
@@ -101,9 +124,18 @@
     // formComponentB
     const formComponentB = dataBind.init(document.querySelector('[data-bind-comp="formComponentB"]'), formComponentBViewModel);
 
-    formComponentB.render().then(function() {
+    formComponentB.render().then(() => {
         // for debug
         console.log(formComponentB);
         window.formComponentB = formComponentB;
     });
+
+    // componentRangeInput
+    const componentRangeInput = dataBind.init(document.querySelector('[data-bind-comp="componentRangeInput"]'), componentRangeInputViewModel);
+
+    componentRangeInput.render().then(() => {
+        // for debug
+        console.log(componentRangeInput);
+        window.componentRangeInput = componentRangeInput;
+    });
 })();

package/examples/js/globalConfig.js

@@ -0,0 +1,117 @@
+(function () {
+    console.log('=== Global Configuration Demo ===');
+
+    // Example 1: Default configuration (reactive: true is built-in default)
+    console.log('\n1. Creating component with default config (reactive: true)');
+    const defaultExample = dataBind.init(
+        document.querySelector('[data-bind-comp="default-example"]'),
+        {
+            counter: 0,
+            increment() {
+                this.counter++;
+                // Reactive mode - automatic render!
+            },
+            reset() {
+                this.counter = 0;
+                // Reactive mode - automatic render!
+            },
+        },
+    );
+
+    defaultExample.render().then(() => {
+        console.log('Example 1 initialized - Mode:', defaultExample.isReactive ? 'REACTIVE' : 'MANUAL');
+        document.getElementById('mode1').textContent = defaultExample.isReactive ? 'REACTIVE ✅' : 'MANUAL';
+    });
+
+    // Change global configuration to manual mode
+    console.log('\n2. Calling dataBind.use({ reactive: false })');
+    dataBind.use({
+        reactive: false,
+    });
+    console.log('Global default is now: reactive = false');
+
+    // Example 2: Component created after use() call - uses manual mode
+    console.log('\n3. Creating component after use() call (should use manual mode)');
+    const globalManualExample = dataBind.init(
+        document.querySelector('[data-bind-comp="global-manual"]'),
+        {
+            counter: 0,
+            increment() {
+                this.counter++;
+                // Manual mode - need to call render()
+                globalManualExample.render();
+            },
+            reset() {
+                this.counter = 0;
+                // Manual mode - need to call render()
+                globalManualExample.render();
+            },
+        },
+    );
+
+    globalManualExample.render().then(() => {
+        console.log('Example 2 initialized - Mode:', globalManualExample.isReactive ? 'REACTIVE' : 'MANUAL');
+        document.getElementById('mode2').textContent = globalManualExample.isReactive ? 'REACTIVE' : 'MANUAL ✅';
+    });
+
+    // Example 3: Chainable API
+    console.log('\n4. Creating component with chainable API: dataBind.use({reactive: false}).init(...)');
+    const chainableExample = dataBind.use({reactive: false}).init(
+        document.querySelector('[data-bind-comp="chainable"]'),
+        {
+            counter: 0,
+            increment() {
+                this.counter++;
+                // Manual mode - need to call render()
+                chainableExample.render();
+            },
+            reset() {
+                this.counter = 0;
+                // Manual mode - need to call render()
+                chainableExample.render();
+            },
+        },
+    );
+
+    chainableExample.render().then(() => {
+        console.log('Example 3 initialized - Mode:', chainableExample.isReactive ? 'REACTIVE' : 'MANUAL');
+        document.getElementById('mode3').textContent = chainableExample.isReactive ? 'REACTIVE' : 'MANUAL ✅ (chained)';
+    });
+
+    // Example 4: Override global setting with instance option
+    console.log('\n5. Creating component with instance override { reactive: true }');
+    const instanceOverride = dataBind.init(
+        document.querySelector('[data-bind-comp="instance-override"]'),
+        {
+            counter: 0,
+            increment() {
+                this.counter++;
+                // Reactive mode - automatic render! (overridden)
+            },
+            reset() {
+                this.counter = 0;
+                // Reactive mode - automatic render! (overridden)
+            },
+        },
+        {reactive: true}, // Instance override
+    );
+
+    instanceOverride.render().then(() => {
+        console.log('Example 4 initialized - Mode:', instanceOverride.isReactive ? 'REACTIVE' : 'MANUAL');
+        document.getElementById('mode4').textContent = instanceOverride.isReactive ? 'REACTIVE ✅ (overridden)' : 'MANUAL';
+    });
+
+    console.log('\n=== Summary ===');
+    console.log('Example 1: Created before use() call → REACTIVE (built-in default)');
+    console.log('Example 2: Created after use({reactive: false}) → MANUAL (global default)');
+    console.log('Example 3: Created with chainable API → MANUAL (chained use)');
+    console.log('Example 4: Created with {reactive: true} → REACTIVE (instance override)');
+
+    // Debug access
+    window.configExamples = {
+        default: defaultExample,
+        globalManual: globalManualExample,
+        chainable: chainableExample,
+        instanceOverride: instanceOverride,
+    };
+})();