neo.mjs 10.0.0-beta.5 → 10.0.0

package/test/siesta/tests/functional/Button.mjs

@@ -0,0 +1,113 @@
+import Neo                from '../../../../src/Neo.mjs';
+import * as core          from '../../../../src/core/_export.mjs';
+import Button             from '../../../../src/functional/button/Base.mjs';
+import DomApiVnodeCreator from '../../../../src/vdom/util/DomApiVnodeCreator.mjs';
+import VdomHelper         from '../../../../src/vdom/Helper.mjs';
+
+// IMPORTANT: This test file uses real components and expects them to render.
+// We need to enable unitTestMode for isolation, but also allow VDOM updates.
+Neo.config.unitTestMode = true;
+Neo.config.allowVdomUpdatesInTests = true;
+// This ensures that the VdomHelper uses the correct renderer for the assertions.
+Neo.config.useDomApiRenderer = true;
+
+// Create a mock application context, as the component lifecycle requires it for updates.
+const appName = 'FunctionalButtonTest';
+Neo.apps = Neo.apps || {};
+Neo.apps[appName] = {
+    name     : appName,
+    fire     : Neo.emptyFn,
+    isMounted: () => true,
+    rendering: false
+};
+
+StartTest(t => {
+    let button, vnode;
+    let testRun = 0;
+
+    t.beforeEach(async t => {
+        testRun++;
+
+        button = Neo.create(Button, {
+            appName,
+            id     : 'my-button-' + testRun,
+            iconCls: 'fa fa-home',
+            text   : 'Click me'
+        });
+
+        ({vnode} = await button.render());
+        button.mounted = true; // Manually mount to enable updates in the test env
+    });
+
+    t.afterEach(t => {
+        button?.destroy();
+        button = null;
+        vnode  = null;
+    });
+
+    t.it('should create initial vnode correctly', async t => {
+        t.expect(vnode.nodeName).toBe('button');
+        t.expect(vnode.className).toEqual(['neo-button', 'icon-left']);
+        t.expect(vnode.childNodes.length).toBe(2); // icon & text. badge & ripple have removeDom:true
+
+        const iconNode = vnode.childNodes[0];
+        t.expect(iconNode.className).toEqual(['neo-button-glyph', 'fa', 'fa-home']);
+
+        const textNode = vnode.childNodes[1];
+        t.expect(textNode.className).toEqual(['neo-button-text']);
+        t.expect(textNode.textContent).toBe('Click me');
+    });
+
+    t.it('should update vnode and create delta for a single config change', async t => {
+        const textNodeId = vnode.childNodes[1].id;
+        const {deltas} = await button.set({text: 'New Text'});
+
+        t.is(deltas.length, 1, 'Should generate exactly one delta');
+        const delta = deltas[0];
+
+        t.is(delta.id, textNodeId, 'Delta should target the text node');
+        t.is(delta.textContent, 'New Text', 'Delta textContent is correct');
+    });
+
+    t.it('should update vnode and create delta for multiple config changes', async t => {
+        const iconNodeId = vnode.childNodes[0].id;
+        const textNodeId = vnode.childNodes[1].id;
+
+        const {deltas} = await button.set({
+            iconCls: 'fa fa-user',
+            text   : 'Submit'
+        });
+
+        t.is(deltas.length, 2, 'Should generate exactly two deltas');
+
+        const iconDelta = deltas.find(d => d.id === iconNodeId);
+        const textDelta = deltas.find(d => d.id === textNodeId);
+
+        t.ok(iconDelta, 'Should have a delta for the icon node');
+        t.isDeeply(iconDelta.cls.remove, ['fa-home'], 'Icon delta should remove old class');
+        t.isDeeply(iconDelta.cls.add, ['fa-user'], 'Icon delta should add new class');
+
+        t.ok(textDelta, 'Should have a delta for the text node');
+        t.is(textDelta.textContent, 'Submit', 'Text delta is correct');
+    });
+
+    t.it('should handle pressed state change', async t => {
+        t.notOk(vnode.className.includes('pressed'), 'Initial vnode should not have "pressed" class');
+
+        let updateData = await button.set({pressed: true});
+
+        t.is(updateData.deltas.length, 1, 'Should generate one delta for pressed: true');
+        let delta = updateData.deltas[0];
+        t.is(delta.id, button.id, 'Delta should target the button component root');
+        t.isDeeply(delta.cls.add, ['pressed'], 'Delta should add "pressed" class');
+        t.ok(updateData.vnode.className.includes('pressed'), 'Vnode should have "pressed" class');
+
+        updateData = await button.set({pressed: false});
+
+        t.is(updateData.deltas.length, 1, 'Should generate one delta for pressed: false');
+        delta = updateData.deltas[0];
+        t.is(delta.id, button.id, 'Delta should target the button component root');
+        t.isDeeply(delta.cls.remove, ['pressed'], 'Delta should remove "pressed" class');
+        t.notOk(updateData.vnode.className.includes('pressed'), 'Vnode should not have "pressed" class');
+    });
+});

package/test/siesta/tests/state/ProviderNestedDataConfigs.mjs

@@ -0,0 +1,314 @@
+import Neo                from '../../../../src/Neo.mjs';
+import * as core          from '../../../../src/core/_export.mjs';
+import InstanceManager    from '../../../../src/manager/Instance.mjs';
+import Component          from '../../../../src/component/Base.mjs';
+import StateProvider      from '../../../../src/state/Provider.mjs';
+
+// IMPORTANT: This test file uses real components and expects them to render.
+// We need to enable unitTestMode for isolation, but also allow VDOM updates.
+Neo.config.unitTestMode = true;
+Neo.config.allowVdomUpdatesInTests = true;
+
+class MockComponent extends Component {
+    static config = {
+        className: 'Mock.Component',
+        appName: 'test-app',
+        user_: null,
+        userName_: null
+    }
+}
+Neo.setupClass(MockComponent);
+
+// Helper function to convert a proxy to a plain object for deep comparison
+function proxyToObject(proxy) {
+    if (proxy === null || typeof proxy !== 'object') {
+        return proxy;
+    }
+    // A simple way to deep-clone and remove proxy
+    return JSON.parse(JSON.stringify(proxy));
+}
+
+StartTest(t => {
+    t.it('State Provider should trigger parent effects when a leaf node changes (bubbling)', t => {
+        let effectRunCount = 0;
+
+        const component = Neo.create(MockComponent, {
+            stateProvider: {
+                data: {
+                    user: {
+                        name: 'John',
+                        age: 30
+                    }
+                }
+            }
+        });
+
+        const provider = component.getStateProvider();
+
+        // This binding depends on the 'user' object itself.
+        provider.createBinding(component.id, 'user', data => {
+            effectRunCount++;
+            return data.user;
+        });
+
+        t.is(effectRunCount, 1, 'Effect should run once initially');
+        t.isDeeply(proxyToObject(component.user), { name: 'John', age: 30 }, 'Initial user object is correct');
+
+        // Change a leaf property. This should trigger the effect for the parent 'user' object.
+        provider.setData('user.age', 31);
+
+        t.is(effectRunCount, 2, 'Effect should re-run after changing a leaf property (user.age)');
+        t.isDeeply(proxyToObject(component.user), { name: 'John', age: 31 }, 'User object is updated correctly in the component');
+
+        // Change another leaf property
+        provider.setData('user.name', 'Jane');
+
+        t.is(effectRunCount, 3, 'Effect should re-run after changing another leaf property (user.name)');
+        t.isDeeply(proxyToObject(component.user), { name: 'Jane', age: 31 }, 'User object is updated again');
+
+        component.destroy();
+    });
+
+    t.it('setData with a nested object should deep-merge and bubble reactivity', t => {
+        const component = Neo.create(MockComponent, {
+            stateProvider: {
+                data: {
+                    user: {
+                        firstname: 'John',
+                        lastname : 'Doe'
+                    }
+                }
+            }
+        });
+
+        const provider = component.getStateProvider();
+        let effectRunCount = 0;
+
+        provider.createBinding(component.id, 'user', data => {
+            effectRunCount++;
+            return data.user;
+        });
+
+        t.is(effectRunCount, 1, 'Effect ran initially');
+        t.isDeeply(proxyToObject(component.user), { firstname: 'John', lastname: 'Doe' }, 'Initial user object is correct');
+
+        // ACTION: Set data with a nested object. This should MERGE, not replace.
+        provider.setData({
+            user: { firstname: 'Jane' }
+        });
+
+        // ASSERT: The object was merged, and the old 'lastname' property is preserved.
+        t.is(effectRunCount, 2, 'Effect re-ran after setting the branch node');
+
+        const updatedUser = proxyToObject(component.user);
+        t.isDeeply(updatedUser, { firstname: 'Jane', lastname: 'Doe' }, 'User object should be deep-merged');
+        t.is(updatedUser.lastname, 'Doe', 'The "lastname" property should be preserved after merge');
+
+        // For contrast, let's show the path-based "bubbling" behavior which has the same outcome.
+        // First, reset the state.
+        provider.setData({
+            user: {
+                firstname: 'John',
+                lastname: 'Doe'
+            }
+        });
+        t.is(effectRunCount, 3, 'Effect ran after resetting state');
+
+        // ACTION: Set a leaf node using a path string.
+        provider.setData({
+            'user.firstname': 'Robert'
+        });
+
+        // ASSERT: The object was updated via bubbling, preserving the 'lastname' property.
+        t.is(effectRunCount, 4, 'Effect re-ran after setting a leaf node via path');
+        const mergedUser = proxyToObject(component.user);
+        t.isDeeply(mergedUser, { firstname: 'Robert', lastname: 'Doe' }, 'Path-based set should merge/preserve other properties');
+        t.is(mergedUser.lastname, 'Doe', 'The "lastname" property should be preserved');
+
+        component.destroy();
+    });
+
+    t.it('Formulas should react to leaf node changes via bubbling', t => {
+        let effectRunCount = 0;
+
+        const component = Neo.create(MockComponent, {
+            stateProvider: {
+                data: {
+                    user: {
+                        firstName: 'John',
+                        lastName: 'Doe'
+                    }
+                },
+                formulas: {
+                    // This formula depends on the 'user' object.
+                    fullName: data => {
+                        effectRunCount++;
+                        return `${data.user.firstName} ${data.user.lastName}`;
+                    }
+                }
+            }
+        });
+
+        const provider = component.getStateProvider();
+
+        // The formula runs once on initialization.
+        t.is(effectRunCount, 1, 'Formula should run once initially');
+        t.is(provider.getData('fullName'), 'John Doe', 'Initial formula calculation is correct');
+
+        // Change a leaf property. This should trigger the formula that depends on the parent 'user' object.
+        provider.setData('user.firstName', 'Jane');
+
+        t.is(effectRunCount, 2, 'Formula should re-run after changing a leaf property');
+        t.is(provider.getData('fullName'), 'Jane Doe', 'Formula is correctly re-calculated');
+
+        component.destroy();
+    });
+
+    t.it('State Provider should handle deeply nested data changes', t => {
+        let effectRunCountL1 = 0,
+            effectRunCountL2 = 0,
+            effectRunCountL3 = 0;
+
+        const component = Neo.create(MockComponent, {
+            stateProvider: {
+                data: {
+                    level1: {
+                        level2: {
+                            level3: {
+                                value: 10
+                            }
+                        }
+                    }
+                }
+            }
+        });
+
+        const provider = component.getStateProvider();
+
+        // Bindings to each level of the nested structure
+        provider.createBinding(component.id, 'level1', data => {
+            effectRunCountL1++;
+            return data.level1;
+        });
+        provider.createBinding(component.id, 'level2', data => {
+            effectRunCountL2++;
+            return data.level1.level2;
+        });
+        provider.createBinding(component.id, 'level3', data => {
+            effectRunCountL3++;
+            return data.level1.level2.level3;
+        });
+
+        t.is(effectRunCountL1, 1, 'L1 Effect ran once initially');
+        t.is(effectRunCountL2, 1, 'L2 Effect ran once initially');
+        t.is(effectRunCountL3, 1, 'L3 Effect ran once initially');
+
+        // Change the deepest leaf node
+        provider.setData('level1.level2.level3.value', 20);
+
+        t.is(effectRunCountL1, 2, 'L1 Effect re-ran due to bubbling');
+        t.is(effectRunCountL2, 2, 'L2 Effect re-ran due to bubbling');
+        t.is(effectRunCountL3, 2, 'L3 Effect re-ran due to bubbling');
+
+        const finalState = proxyToObject(component.level1);
+        t.is(finalState.level2.level3.value, 20, 'Deeply nested value is updated correctly');
+
+        component.destroy();
+    });
+
+    t.it('Formulas should react to deeply nested data changes', t => {
+        let formulaRunCount = 0;
+
+        const component = Neo.create(MockComponent, {
+            stateProvider: {
+                data: {
+                    config: {
+                        settings: {
+                            a: 1,
+                            b: 2
+                        }
+                    },
+                    multiplier: 10
+                },
+                formulas: {
+                    // This formula depends on multiple deeply nested properties
+                    calculated: data => {
+                        formulaRunCount++;
+                        return (data.config.settings.a + data.config.settings.b) * data.multiplier;
+                    }
+                }
+            }
+        });
+
+        const provider = component.getStateProvider();
+
+        t.is(formulaRunCount, 1, 'Formula ran once initially');
+        t.is(provider.getData('calculated'), 30, 'Initial formula calculation is correct');
+
+        // Change a deeply nested property
+        provider.setData('config.settings.a', 5);
+
+        t.is(formulaRunCount, 2, 'Formula re-ran after deep leaf change');
+        t.is(provider.getData('calculated'), 70, 'Formula re-calculated correctly');
+
+        // Change another property at a different level
+        provider.setData('multiplier', 2);
+
+        t.is(formulaRunCount, 3, 'Formula re-ran after sibling property change');
+        t.is(provider.getData('calculated'), 14, 'Formula re-calculated correctly again');
+
+        component.destroy();
+    });
+
+    t.it('Hierarchical providers should bubble reactivity from parent to child', t => {
+        let childFormulaRunCount = 0;
+
+        const parentComponent = Neo.create(MockComponent, {
+            stateProvider: {
+                data: {
+                    user: {
+                        name: 'Parent',
+                        role: 'admin'
+                    }
+                }
+            }
+        });
+
+        const childComponent = Neo.create(MockComponent, {
+            parentComponent, // Establishes the hierarchy
+            stateProvider: {
+                data: {
+                    prefix: 'User:'
+                },
+                formulas: {
+                    // This formula depends on the parent's 'user' object and the child's 'prefix'
+                    display: data => {
+                        childFormulaRunCount++;
+                        return `${data.prefix} ${data.user.name} (${data.user.role})`;
+                    }
+                }
+            }
+        });
+
+        const parentProvider = parentComponent.getStateProvider();
+        const childProvider = childComponent.getStateProvider();
+
+        t.is(childFormulaRunCount, 1, 'Child formula ran once initially');
+        t.is(childProvider.getData('display'), 'User: Parent (admin)', 'Initial hierarchical formula calculation is correct');
+
+        // Modify a leaf node in the PARENT provider
+        parentProvider.setData('user.role', 'editor');
+
+        t.is(childFormulaRunCount, 2, 'Child formula re-ran after parent data change');
+        t.is(childProvider.getData('display'), 'User: Parent (editor)', 'Hierarchical formula re-calculated correctly');
+
+        // Modify a leaf node in the CHILD provider to ensure it also works
+        childProvider.setData('prefix', 'Account:');
+
+        t.is(childFormulaRunCount, 3, 'Child formula re-ran after child data change');
+        t.is(childProvider.getData('display'), 'Account: Parent (editor)', 'Formula updates correctly from own data');
+
+        parentComponent.destroy();
+        childComponent.destroy();
+    });
+});

package/test/siesta/tests/state/createHierarchicalDataProxy.mjs

@@ -15,12 +15,7 @@ class MockStateProvider extends Base {
 
     #dataConfigs = {};
 
-    construct(config) {
-        super.construct(config);
-    }
-
     afterSetData(value, oldValue) {
-        console.log(value);
         if (value) {
             this.processDataObject(value);
         }
@@ -74,17 +69,15 @@ StartTest(t => {
         const provider = Neo.create(MockStateProvider, {data: {name: 'Neo', version: 10}});
         let effectRunCount = 0;
 
-        const effect = new Effect({
-            fn: () => {
-                effectRunCount++;
-                const proxy = createHierarchicalDataProxy(provider);
-                if (effectRunCount === 1) {
-                    t.is(proxy.name, 'Neo', 'Should get name from proxy (initial)');
-                    t.is(proxy.version, 10, 'Should get version from proxy (initial)');
-                } else if (effectRunCount === 2) {
-                    t.is(proxy.name, 'Neo.mjs', 'Should get name from proxy (updated)');
-                    t.is(proxy.version, 10, 'Should get version from proxy (unchanged)');
-                }
+        const effect = new Effect(() => {
+            effectRunCount++;
+            const proxy = createHierarchicalDataProxy(provider);
+            if (effectRunCount === 1) {
+                t.is(proxy.name, 'Neo', 'Should get name from proxy (initial)');
+                t.is(proxy.version, 10, 'Should get version from proxy (initial)');
+            } else if (effectRunCount === 2) {
+                t.is(proxy.name, 'Neo.mjs', 'Should get name from proxy (updated)');
+                t.is(proxy.version, 10, 'Should get version from proxy (unchanged)');
             }
         });
 
@@ -102,17 +95,15 @@ StartTest(t => {
         const provider = Neo.create(MockStateProvider, {data: {user: {firstName: 'John', lastName: 'Doe'}}});
         let effectRunCount = 0;
 
-        const effect = new Effect({
-            fn: () => {
-                effectRunCount++;
-                const proxy = createHierarchicalDataProxy(provider);
-                if (effectRunCount === 1) {
-                    t.is(proxy.user.firstName, 'John', 'Should get nested firstName (initial)');
-                    t.is(proxy.user.lastName, 'Doe', 'Should get nested lastName (initial)');
-                } else if (effectRunCount === 2) {
-                    t.is(proxy.user.firstName, 'Jane', 'Should get nested firstName (updated)');
-                    t.is(proxy.user.lastName, 'Doe', 'Should get nested lastName (unchanged)');
-                }
+        const effect = new Effect(() => {
+            effectRunCount++;
+            const proxy = createHierarchicalDataProxy(provider);
+            if (effectRunCount === 1) {
+                t.is(proxy.user.firstName, 'John', 'Should get nested firstName (initial)');
+                t.is(proxy.user.lastName, 'Doe', 'Should get nested lastName (initial)');
+            } else if (effectRunCount === 2) {
+                t.is(proxy.user.firstName, 'Jane', 'Should get nested firstName (updated)');
+                t.is(proxy.user.lastName, 'Doe', 'Should get nested lastName (unchanged)');
             }
         });
 
@@ -133,27 +124,25 @@ StartTest(t => {
 
         let effectRunCount = 0;
 
-        const effect = new Effect({
-            fn: () => {
-                effectRunCount++;
-                const proxy = createHierarchicalDataProxy(childProvider);
-                if (effectRunCount === 1) {
-                    t.is(proxy.appTitle, 'My App', 'Should get appTitle from parent (initial)');
-                    t.is(proxy.user.firstName, 'Parent', 'Should get firstName from parent (initial)');
-                    t.is(proxy.user.lastName, 'Child', 'Should get lastName from child (initial)');
-                } else if (effectRunCount === 2) {
-                    t.is(proxy.appTitle, 'New App Title', 'Should get appTitle from parent (updated)');
-                    t.is(proxy.user.firstName, 'Parent', 'Should get firstName from parent (unchanged)');
-                    t.is(proxy.user.lastName, 'Child', 'Should get lastName from child (unchanged)');
-                } else if (effectRunCount === 3) {
-                    t.is(proxy.appTitle, 'New App Title', 'Should get appTitle from parent (unchanged)');
-                    t.is(proxy.user.firstName, 'Parent', 'Should get firstName from parent (unchanged)');
-                    t.is(proxy.user.lastName, 'New Child', 'Should get lastName from child (updated)');
-                } else if (effectRunCount === 4) {
-                    t.is(proxy.appTitle, 'New App Title', 'Should get appTitle from parent (unchanged)');
-                    t.is(proxy.user.firstName, 'New Parent', 'Should get firstName from parent (updated)');
-                    t.is(proxy.user.lastName, 'New Child', 'Should get lastName from child (unchanged)');
-                }
+        const effect = new Effect(() => {
+            effectRunCount++;
+            const proxy = createHierarchicalDataProxy(childProvider);
+            if (effectRunCount === 1) {
+                t.is(proxy.appTitle, 'My App', 'Should get appTitle from parent (initial)');
+                t.is(proxy.user.firstName, 'Parent', 'Should get firstName from parent (initial)');
+                t.is(proxy.user.lastName, 'Child', 'Should get lastName from child (initial)');
+            } else if (effectRunCount === 2) {
+                t.is(proxy.appTitle, 'New App Title', 'Should get appTitle from parent (updated)');
+                t.is(proxy.user.firstName, 'Parent', 'Should get firstName from parent (unchanged)');
+                t.is(proxy.user.lastName, 'Child', 'Should get lastName from child (unchanged)');
+            } else if (effectRunCount === 3) {
+                t.is(proxy.appTitle, 'New App Title', 'Should get appTitle from parent (unchanged)');
+                t.is(proxy.user.firstName, 'Parent', 'Should get firstName from parent (unchanged)');
+                t.is(proxy.user.lastName, 'New Child', 'Should get lastName from child (updated)');
+            } else if (effectRunCount === 4) {
+                t.is(proxy.appTitle, 'New App Title', 'Should get appTitle from parent (unchanged)');
+                t.is(proxy.user.firstName, 'New Parent', 'Should get firstName from parent (updated)');
+                t.is(proxy.user.lastName, 'New Child', 'Should get lastName from child (unchanged)');
             }
         });
 
@@ -178,13 +167,11 @@ StartTest(t => {
         const provider = Neo.create(MockStateProvider, {data: {foo: 'bar'}});
         let effectRunCount = 0;
 
-        const effect = new Effect({
-            fn: () => {
-                effectRunCount++;
-                const proxy = createHierarchicalDataProxy(provider);
-                t.is(proxy.nonExistent, null, 'Should return null for non-existent property');
-                t.is(proxy.foo, 'bar', 'Should still get existing data');
-            }
+        const effect = new Effect(() => {
+            effectRunCount++;
+            const proxy = createHierarchicalDataProxy(provider);
+            t.is(proxy.nonExistent, null, 'Should return null for non-existent property');
+            t.is(proxy.foo, 'bar', 'Should still get existing data');
         });
 
         t.is(effectRunCount, 1, 'Effect should run once initially');

package/test/siesta/tests/vdom/Advanced.mjs

@@ -1,6 +1,10 @@
-import Neo        from '../../../../src/Neo.mjs';
-import * as core  from '../../../../src/core/_export.mjs';
-import VdomHelper from '../../../../src/vdom/Helper.mjs';
+import Neo             from '../../../../src/Neo.mjs';
+import * as core       from '../../../../src/core/_export.mjs';
+import StringFromVnode from '../../../../src/vdom/util/StringFromVnode.mjs';
+import VdomHelper      from '../../../../src/vdom/Helper.mjs';
+
+// tests are designed for this rendering mode
+Neo.config.useDomApiRenderer = false;
 
 let deltas, output, vdom, vnode;
 
@@ -30,7 +34,7 @@ StartTest(t => {
             ]}
         ]};
 
-        vnode = VdomHelper.create(vdom);
+        vnode = VdomHelper.create({vdom}).vnode;
 
         vdom =
         {id: 'neo-calendar-week', cn: [
@@ -136,7 +140,7 @@ StartTest(t => {
             {id: 'neo-column-2', cls: ['foo4'], cn: []}
         ]};
 
-        vnode = VdomHelper.create(vdom);
+        vnode = VdomHelper.create({vdom}).vnode;
 
         vdom =
         {id: 'neo-calendar-week', cn: [
@@ -246,7 +250,7 @@ StartTest(t => {
             {id: 'neo-component-6'}
         ]};
 
-        vnode = VdomHelper.create(vdom);
+        vnode = VdomHelper.create({vdom}).vnode;
 
         vdom =
         {id: 'neo-container-1', cn: [
@@ -342,9 +346,11 @@ StartTest(t => {
             ]}
         ]};
 
-        vnode = VdomHelper.create(vdom);
+        const result = vnode = VdomHelper.create({vdom});
+        const outerHTML = result.outerHTML;
+        vnode = result.vnode;
 
-        t.is(vnode.outerHTML.includes('static'), false, 'The generated DOM does not include "static"');
+        t.is(outerHTML.includes('static'), false, 'The generated DOM does not include "static"');
         t.isDeeplyStrict(vnode.static, undefined, 'Top-level VNode did not get the static attribute');
         t.isDeeplyStrict(vnode.childNodes[0].static, true, 'First VNode childNode got the static attribute');