@gogocat/data-bind 1.12.0 → 2.0.0

package/test/specs/{textBinding.spec.js → textBinding.spec.ts}

@@ -1,48 +1,47 @@
-describe('Given [data-bind-comp="text-component"] inited', () => {
-    const namespace = {};
-    const testContent2 = 'text-binding content';
-
-    jasmine.getFixtures().fixturesPath = 'test';
-
-    beforeEach(() => {
-        loadFixtures('./fixtures/textBinding.html');
-
-        namespace.viewModel = {
-            heading: 'my text-binding Component',
-            description: 'test description',
-            getTextContent: function() {
-                return testContent2;
-            },
-            updateView: function(opt) {
-                this.APP.render(opt);
-            },
-        };
-
-        namespace.myTextComponent = dataBind.init(document.querySelector('[data-bind-comp="text-component"]'), namespace.viewModel);
-
-        namespace.myTextComponent.render();
-    });
-
-    afterEach(() => {
-        // clean up all app/components
-        for (const prop in namespace) {
-            if (namespace.hasOwnProperty(prop)) {
-                delete namespace[prop];
-            }
-        }
-    });
-
-    it('Then [data-bind-comp="myTextComponent"] should have render', (done) => {
-        setTimeout(() => {
-            const $heading = document.getElementById('text-binding-heading');
-            const $textBindingContent = document.getElementById('text-binding-content');
-            const $textBindingContent2 = document.getElementById('text-binding-content2');
-
-            expect($heading.textContent).toBe(namespace.viewModel.heading);
-            expect($textBindingContent.textContent).toBe(namespace.viewModel.description);
-            expect($textBindingContent2.textContent).toBe(testContent2);
-
-            done();
-        }, 200);
-    });
-});
+import {describe, it, expect, beforeEach, afterEach} from 'vitest';
+import {waitFor} from '@testing-library/dom';
+
+describe('Given [data-bind-comp="text-component"] inited', () => {
+    const namespace: any = {};
+    const testContent2 = 'text-binding content';
+
+    beforeEach(() => {
+        loadFixture('test/fixtures/textBinding.html');
+
+        namespace.viewModel = {
+            heading: 'my text-binding Component',
+            description: 'test description',
+            getTextContent() {
+                return testContent2;
+            },
+            updateView(opt?: any) {
+                this.APP.render(opt);
+            },
+        };
+
+        namespace.myTextComponent = dataBind.init(document.querySelector('[data-bind-comp="text-component"]'), namespace.viewModel);
+
+        namespace.myTextComponent.render();
+    });
+
+    afterEach(() => {
+        // clean up all app/components
+        for (const prop in namespace) {
+            if (Object.prototype.hasOwnProperty.call(namespace, prop)) {
+                delete namespace[prop];
+            }
+        }
+    });
+
+    it('Then [data-bind-comp="myTextComponent"] should have render', async () => {
+        await waitFor(() => {
+            const $heading = document.getElementById('text-binding-heading')!;
+            const $textBindingContent = document.getElementById('text-binding-content')!;
+            const $textBindingContent2 = document.getElementById('text-binding-content2')!;
+
+            expect($heading.textContent).toBe(namespace.viewModel.heading);
+            expect($textBindingContent.textContent).toBe(namespace.viewModel.description);
+            expect($textBindingContent2.textContent).toBe(testContent2);
+        }, {timeout: 500});
+    });
+});

package/test/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2015",
+    "module": "ESNext",
+    "lib": ["ES2015", "DOM"],
+    "strict": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitAny": false,
+    "strictNullChecks": false,
+    "strictFunctionTypes": false,
+    "strictPropertyInitialization": false,
+    "noImplicitThis": false,
+    "allowJs": true,
+    "noEmit": true,
+    "types": ["vitest/globals"]
+  },
+  "include": [
+    "./**/*.ts",
+    "./globals.d.ts"
+  ],
+  "exclude": [
+    "../node_modules"
+  ]
+}

package/test-output.txt

@@ -0,0 +1,200 @@
+
+> @gogocat/data-bind@1.12.0 test
+> vitest run
+
+
+ RUN  v2.1.9 /Users/adamchow/My-workspace/dataBind
+
+ ❯ test/specs/switchBinding.spec.js (0 test)
+ ❯ test/specs/ifBinding.spec.js (0 test)
+ ❯ test/specs/nestedComponent.spec.js (0 test)
+ ❯ test/specs/templateBinding.spec.js (0 test)
+ ❯ test/specs/showBinding.spec.js (0 test)
+stderr | test/specs/forOfBinding.spec.js > When search-results-component with forOf binding inited > Then [data-bind-comp="search-results-component"] should have render
+error in rendering:  TypeError: __vite_ssr_import_1__.default is not a function
+    at /Users/adamchow/My-workspace/dataBind/src/renderTemplatesBinding.js:33:25
+    at Array.forEach (<anonymous>)
+    at Module.renderTemplatesBinding [as default] (/Users/adamchow/My-workspace/dataBind/src/renderTemplatesBinding.js:32:40)
+    at Binder.render (/Users/adamchow/My-workspace/dataBind/src/binder.js:141:31)
+    at Timeout._onTimeout (/Users/adamchow/My-workspace/dataBind/src/util.js:365:24)
+    at listOnTimeout (node:internal/timers:594:17)
+    at processTimers (node:internal/timers:529:7)
+
+ ✓ test/specs/attrBinding.spec.js (5 tests) 107ms
+ ❯ test/specs/dataBindBootstrap.spec.js (5 tests | 5 failed) 75ms
+   × Given dataBindBootstrp initised > Then [data-bind-comp="search-bar"] should has bond with namespace.searchBarComponentVM 44ms
+     → spyOn is not defined
+     → Cannot read properties of undefined (reading 'hasOwnProperty')
+   × Given dataBindBootstrp initised > When [data-bind-comp="search-bar"] was server rendered then show binding should not update element 8ms
+     → spyOn is not defined
+     → Cannot read properties of undefined (reading 'hasOwnProperty')
+   × Given dataBindBootstrp initised > When change #searchWord input value to "Handyman" viewModel onSearchWordChange should have been called 6ms
+     → spyOn is not defined
+     → Cannot read properties of undefined (reading 'hasOwnProperty')
+   × Given dataBindBootstrp initised > When change #location input value to "Melbourne" viewModel onSearchLocationChange should have been called 10ms
+     → spyOn is not defined
+     → Cannot read properties of undefined (reading 'hasOwnProperty')
+   × Given dataBindBootstrp initised > When [data-bind-comp="search-bar"] was server rendered "data-server-rendered" attribute should have removed 6ms
+     → spyOn is not defined
+     → Cannot read properties of undefined (reading 'hasOwnProperty')
+stderr | test/specs/dataBindBootstrap.spec.js
+error in rendering:  TypeError: __vite_ssr_import_1__.default is not a function
+    at /Users/adamchow/My-workspace/dataBind/src/renderTemplatesBinding.js:33:25
+    at Array.forEach (<anonymous>)
+    at Module.renderTemplatesBinding [as default] (/Users/adamchow/My-workspace/dataBind/src/renderTemplatesBinding.js:32:40)
+    at Binder.render (/Users/adamchow/My-workspace/dataBind/src/binder.js:141:31)
+    at Timeout._onTimeout (/Users/adamchow/My-workspace/dataBind/src/util.js:365:24)
+    at listOnTimeout (node:internal/timers:594:17)
+    at processTimers (node:internal/timers:529:7)
+error in rendering:  TypeError: __vite_ssr_import_1__.default is not a function
+    at /Users/adamchow/My-workspace/dataBind/src/renderTemplatesBinding.js:33:25
+    at Array.forEach (<anonymous>)
+    at Module.renderTemplatesBinding [as default] (/Users/adamchow/My-workspace/dataBind/src/renderTemplatesBinding.js:32:40)
+    at Binder.render (/Users/adamchow/My-workspace/dataBind/src/binder.js:141:31)
+    at Timeout._onTimeout (/Users/adamchow/My-workspace/dataBind/src/util.js:365:24)
+    at listOnTimeout (node:internal/timers:594:17)
+    at processTimers (node:internal/timers:529:7)
+error in rendering:  TypeError: __vite_ssr_import_1__.default is not a function
+    at /Users/adamchow/My-workspace/dataBind/src/renderTemplatesBinding.js:33:25
+    at Array.forEach (<anonymous>)
+    at Module.renderTemplatesBinding [as default] (/Users/adamchow/My-workspace/dataBind/src/renderTemplatesBinding.js:32:40)
+    at Binder.render (/Users/adamchow/My-workspace/dataBind/src/binder.js:141:31)
+    at Timeout._onTimeout (/Users/adamchow/My-workspace/dataBind/src/util.js:365:24)
+    at listOnTimeout (node:internal/timers:594:17)
+    at processTimers (node:internal/timers:529:7)
+
+stderr | Timeout._onTimeout (/Users/adamchow/My-workspace/dataBind/src/util.js:370:29)
+error in rendering:  TypeError: __vite_ssr_import_1__.default is not a function
+    at /Users/adamchow/My-workspace/dataBind/src/renderTemplatesBinding.js:33:25
+    at Array.forEach (<anonymous>)
+    at Module.renderTemplatesBinding [as default] (/Users/adamchow/My-workspace/dataBind/src/renderTemplatesBinding.js:32:40)
+    at Binder.render (/Users/adamchow/My-workspace/dataBind/src/binder.js:141:31)
+    at Timeout._onTimeout (/Users/adamchow/My-workspace/dataBind/src/util.js:365:24)
+    at listOnTimeout (node:internal/timers:594:17)
+    at processTimers (node:internal/timers:529:7)
+error in rendering:  TypeError: __vite_ssr_import_1__.default is not a function
+    at /Users/adamchow/My-workspace/dataBind/src/renderTemplatesBinding.js:33:25
+    at Array.forEach (<anonymous>)
+    at Module.renderTemplatesBinding [as default] (/Users/adamchow/My-workspace/dataBind/src/renderTemplatesBinding.js:32:40)
+    at Binder.render (/Users/adamchow/My-workspace/dataBind/src/binder.js:141:31)
+    at Timeout._onTimeout (/Users/adamchow/My-workspace/dataBind/src/util.js:365:24)
+    at listOnTimeout (node:internal/timers:594:17)
+    at processTimers (node:internal/timers:529:7)
+
+ ✓ test/specs/binder.spec.js (5 tests) 4ms
+ ❯ test/specs/filter.spec.js (3 tests | 3 failed) 18ms
+   × Given [data-bind-comp="filter-component"] inited > Then [data-bind-comp="filter-component"] should render story with once filter and not intro 15ms
+     → expected <div id="intro" …(2)>…(2)</div> to be null // Object.is equality
+     → Cannot read properties of undefined (reading 'hasOwnProperty')
+   × Given [data-bind-comp="filter-component"] inited > Should render intro but not story section after update viewModel 2ms
+     → Cannot read properties of undefined (reading 'hasOwnProperty')
+   × Given [data-bind-comp="filter-component"] inited > Should render story and stroyPrice pass through filters | toDiscount | addGst 1ms
+     → Cannot read properties of null (reading 'textContent')
+     → Cannot read properties of undefined (reading 'hasOwnProperty')
+ ❯ test/specs/blurBinding.spec.js (2 tests | 2 failed) 33ms
+   × Given [data-bind-comp="blur-component"] initised > should render heading defined in viewModel 30ms
+     → Cannot read properties of undefined (reading 'hasOwnProperty')
+   × Given [data-bind-comp="blur-component"] initised > should update "blurInput" value after onBlur 2ms
+     → Cannot read properties of undefined (reading 'hasOwnProperty')
+ ✓ test/specs/textBinding.spec.js (1 test) 25ms
+ ❯ test/specs/forOfBinding.spec.js (4 tests | 1 failed) 532ms
+   × When search-results-component with forOf binding inited > Then [data-bind-comp="search-results-component"] should have render 525ms
+     → expected '' to be 'Featured service providers' // Object.is equality
+
+Ignored nodes: comments, script, style
+<html>
+  <head />
+  <body>
+    <div
+      class="container"
+    >
+      
+    
+      <h5>
+        For of binding complex demo
+      </h5>
+      
+    
+      <div
+        class="container search-result"
+        data-bind-comp="search-results-component"
+      >
+        
+        
+        <h4
+          class="text-center section-title"
+          data-bind-text="searchResultTitle"
+          id="searchResultTitle"
+        />
+        
+        
+        <div
+          class="card-columns"
+          data-bind-tmp="{id: 'searchResultItem', data: 'searchResults'}"
+          id="search-result-columns"
+        >
+          
+    
+          <div
+            class="card result-item"
+            data-bind-css="result.highlightCss"
+            data-bind-for="result in searchResults"
+          >
+            
+        
+            <img
+              class="card-img-top result-item__img"
+              data-bind-attr="$root.getResultItemAttr($index)"
+            />
+            
+        
+            <div
+              class="card-body"
+              data-bind-tmp="{id: 'searchResultItemBody', data: 'result'}"
+            />
+            
+        
+            <div
+              data-bind-tmp="{id: 'searchResultItemFooter', data: 'result'}"
+            />
+            
+    
+          </div>
+          
+
+        </div>
+        
+    
+      </div>
+      
+
+    </div>
+    
+
+
+    
+
+    <template
+      id="searchResultItem"
+    />
+    
+
+
+    <template
+      id="searchResultItemBody"
+    />
+    
+
+
+    <template
+      id="searchResultItemFooter"
+    />
+    
+
+
+    <template
+      id="searchResultItemBookMark"
+    />
+  </body>
+</html>
+ ❯ test/specs/cssBinding.spec.js (3 tests | 3 failed) 543ms

package/test-reactive.html

@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Reactive Proxy Test</title>
+    <style>
+        body { font-family: Arial; padding: 20px; }
+        .test { margin: 10px 0; padding: 10px; border: 1px solid #ddd; }
+        .pass { background: #d4edda; }
+        .fail { background: #f8d7da; }
+        pre { background: #f5f5f5; padding: 10px; }
+    </style>
+</head>
+<body>
+    <h1>Reactive Proxy Test Suite</h1>
+    <div id="results"></div>
+
+    <script src="dist/js/dataBind.min.js"></script>
+    <script>
+        const results = [];
+
+        function test(name, fn) {
+            try {
+                fn();
+                results.push({name, status: 'pass', error: null});
+                console.log('✅', name);
+            } catch (error) {
+                results.push({name, status: 'fail', error: error.message});
+                console.error('❌', name, error);
+            }
+        }
+
+        let renderCount = 0;
+        function resetRenderCount() {
+            renderCount = 0;
+        }
+
+        // Test 1: Simple property change
+        test('1. Simple property change triggers render', () => {
+            resetRenderCount();
+            const viewModel = {name: 'John', age: 30};
+            const component = dataBind.init(document.createElement('div'), viewModel);
+            component.render = () => { renderCount++; };
+
+            component.viewModel.name = 'Jane';
+
+            setTimeout(() => {
+                if (renderCount !== 1) throw new Error(`Expected 1 render, got ${renderCount}`);
+            }, 100);
+        });
+
+        // Test 2: Nested object change
+        test('2. Nested object property change triggers render', () => {
+            resetRenderCount();
+            const viewModel = {
+                user: {
+                    profile: {
+                        name: 'John'
+                    }
+                }
+            };
+            const component = dataBind.init(document.createElement('div'), viewModel);
+            component.render = () => { renderCount++; };
+
+            component.viewModel.user.profile.name = 'Jane';
+
+            setTimeout(() => {
+                if (renderCount !== 1) throw new Error(`Expected 1 render, got ${renderCount}`);
+            }, 100);
+        });
+
+        // Test 3: Array push
+        test('3. Array push triggers render', () => {
+            resetRenderCount();
+            const viewModel = {items: [1, 2, 3]};
+            const component = dataBind.init(document.createElement('div'), viewModel);
+            component.render = () => { renderCount++; };
+
+            component.viewModel.items.push(4);
+
+            setTimeout(() => {
+                if (renderCount !== 1) throw new Error(`Expected 1 render, got ${renderCount}`);
+                if (component.viewModel.items.length !== 4) throw new Error('Array length incorrect');
+            }, 100);
+        });
+
+        // Test 4: Array pop
+        test('4. Array pop triggers render', () => {
+            resetRenderCount();
+            const viewModel = {items: [1, 2, 3]};
+            const component = dataBind.init(document.createElement('div'), viewModel);
+            component.render = () => { renderCount++; };
+
+            component.viewModel.items.pop();
+
+            setTimeout(() => {
+                if (renderCount !== 1) throw new Error(`Expected 1 render, got ${renderCount}`);
+                if (component.viewModel.items.length !== 2) throw new Error('Array length incorrect');
+            }, 100);
+        });
+
+        // Test 5: Array splice
+        test('5. Array splice triggers render', () => {
+            resetRenderCount();
+            const viewModel = {items: [1, 2, 3]};
+            const component = dataBind.init(document.createElement('div'), viewModel);
+            component.render = () => { renderCount++; };
+
+            component.viewModel.items.splice(1, 1);
+
+            setTimeout(() => {
+                if (renderCount !== 1) throw new Error(`Expected 1 render, got ${renderCount}`);
+            }, 100);
+        });
+
+        // Test 6: Array index assignment
+        test('6. Array index assignment triggers render', () => {
+            resetRenderCount();
+            const viewModel = {items: [1, 2, 3]};
+            const component = dataBind.init(document.createElement('div'), viewModel);
+            component.render = () => { renderCount++; };
+
+            component.viewModel.items[0] = 99;
+
+            setTimeout(() => {
+                if (renderCount !== 1) throw new Error(`Expected 1 render, got ${renderCount}`);
+                if (component.viewModel.items[0] !== 99) throw new Error('Value not updated');
+            }, 100);
+        });
+
+        // Test 7: Array of objects - modify object property
+        test('7. Array of objects - modify object property triggers render', () => {
+            resetRenderCount();
+            const viewModel = {
+                todos: [
+                    {text: 'Task 1', done: false},
+                    {text: 'Task 2', done: false}
+                ]
+            };
+            const component = dataBind.init(document.createElement('div'), viewModel);
+            component.render = () => { renderCount++; };
+
+            component.viewModel.todos[0].done = true;
+
+            setTimeout(() => {
+                if (renderCount !== 1) throw new Error(`Expected 1 render, got ${renderCount}`);
+                if (component.viewModel.todos[0].done !== true) throw new Error('Value not updated');
+            }, 100);
+        });
+
+        // Test 8: Array of objects - push new object
+        test('8. Array of objects - push new object triggers render', () => {
+            resetRenderCount();
+            const viewModel = {
+                todos: [
+                    {text: 'Task 1', done: false}
+                ]
+            };
+            const component = dataBind.init(document.createElement('div'), viewModel);
+            component.render = () => { renderCount++; };
+
+            component.viewModel.todos.push({text: 'Task 2', done: false});
+
+            setTimeout(() => {
+                if (renderCount !== 1) throw new Error(`Expected 1 render, got ${renderCount}`);
+                if (component.viewModel.todos.length !== 2) throw new Error('Array length incorrect');
+            }, 100);
+        });
+
+        // Test 9: Deep nested array
+        test('9. Deep nested array triggers render', () => {
+            resetRenderCount();
+            const viewModel = {
+                data: {
+                    lists: {
+                        items: [1, 2, 3]
+                    }
+                }
+            };
+            const component = dataBind.init(document.createElement('div'), viewModel);
+            component.render = () => { renderCount++; };
+
+            component.viewModel.data.lists.items.push(4);
+
+            setTimeout(() => {
+                if (renderCount !== 1) throw new Error(`Expected 1 render, got ${renderCount}`);
+            }, 100);
+        });
+
+        // Test 10: Batch updates (multiple changes = 1 render due to RAF)
+        test('10. Multiple changes batched into single render', () => {
+            resetRenderCount();
+            const viewModel = {name: 'John', age: 30, email: 'john@test.com'};
+            const component = dataBind.init(document.createElement('div'), viewModel);
+            component.render = () => { renderCount++; };
+
+            component.viewModel.name = 'Jane';
+            component.viewModel.age = 25;
+            component.viewModel.email = 'jane@test.com';
+
+            setTimeout(() => {
+                // Should only be 1 render due to RAF debouncing
+                if (renderCount !== 1) throw new Error(`Expected 1 render, got ${renderCount}`);
+            }, 100);
+        });
+
+        // Display results after all tests
+        setTimeout(() => {
+            const resultsDiv = document.getElementById('results');
+            const passCount = results.filter(r => r.status === 'pass').length;
+            const failCount = results.filter(r => r.status === 'fail').length;
+
+            resultsDiv.innerHTML = `
+                <h2>Results: ${passCount} passed, ${failCount} failed</h2>
+                ${results.map(r => `
+                    <div class="test ${r.status}">
+                        <strong>${r.status === 'pass' ? '✅' : '❌'} ${r.name}</strong>
+                        ${r.error ? `<pre>${r.error}</pre>` : ''}
+                    </div>
+                `).join('')}
+            `;
+        }, 200);
+    </script>
+</body>
+</html>

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2015",
+    "module": "ESNext",
+    "lib": ["ES2015", "DOM"],
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist/types",
+    "rootDir": "./src",
+    "strict": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitAny": false,
+    "strictNullChecks": false,
+    "strictFunctionTypes": false,
+    "strictPropertyInitialization": false,
+    "noImplicitThis": false,
+    "allowJs": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "test"]
+}