neo.mjs 10.1.0 → 10.2.0

package/src/form/field/Base.mjs

@@ -1,3 +1,4 @@
+import { createSequence } from '../../util/Function.mjs';
 import Component        from '../../component/Base.mjs';
 import ComponentManager from '../../manager/Component.mjs';
 import NeoArray         from '../../util/Array.mjs';
@@ -97,6 +98,19 @@ class Field extends Component {
      */
     path = null
 
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        createSequence(me, 'afterSetValue', (value, oldValue) => {
+            oldValue !== undefined && me.fireChangeEvent(value, oldValue)
+        }, me)
+    }
+
     /**
      * Triggered after the name isTouched got changed
      * @param {String|null} value
@@ -137,7 +151,7 @@ class Field extends Component {
      * @param {*} oldValue
      */
     afterSetValue(value, oldValue) {
-        oldValue !== undefined && this.fireChangeEvent(value, oldValue)
+
     }
 
     /**

package/src/form/field/ComboBox.mjs

@@ -178,7 +178,7 @@ class ComboBox extends Picker {
      */
     afterSetStore(value, oldValue) {
         let me = this,
-            filters, val;
+            filters;
 
         if (value) {
             if (me.useFilter) {
@@ -198,14 +198,7 @@ class ComboBox extends Picker {
                 me.list.store = value
             }
 
-            value.on('load', me.onStoreLoad, me);
-
-            if (me.value) {
-                val = me.value;
-
-                me._value = null; // silent reset to trigger a change event
-                me.value  = val
-            }
+            value.on('load', me.onStoreLoad, me)
         }
     }
 
@@ -237,10 +230,9 @@ class ComboBox extends Picker {
             let selectionModel = me.list?.selectionModel;
 
             if (value) {
-                oldValue && selectionModel?.deselect(oldValue);
                 selectionModel?.select(value)
             } else {
-                selectionModel.deselectAll()
+                selectionModel?.deselectAll()
             }
         }
     }
@@ -342,7 +334,7 @@ class ComboBox extends Picker {
         }
 
         // we can only match record ids or display values in case the store is loaded
-        if (store.getCount() > 0) {
+        if (store.isLoaded) {
             record = store.isFiltered() ? store.allItems.get(value) : store.get(value);
 
             if (record) {
@@ -460,13 +452,11 @@ class ComboBox extends Picker {
      * @param {*} oldValue
      * @override
      */
-    async fireChangeEvent(value, oldValue) {
+    fireChangeEvent(value, oldValue) {
         let me            = this,
             FormContainer = Neo.form?.Container,
             params        = {component: me, oldValue, value};
 
-        await me.timeout(30);
-
         me.fire('change', params);
 
         if (!me.suspendEvents) {

package/src/functional/component/Base.mjs

@@ -20,6 +20,13 @@ class FunctionalBase extends Abstract {
          * @protected
          */
         className: 'Neo.functional.component.Base',
+        /**
+         * @member {Boolean} enableHtmlTemplates_=false
+         * @reactive
+         * Set this to true to enable using tagged template literals for VDOM creation
+         * via the render() method. This will lazy load the html parser.
+         */
+        enableHtmlTemplates_: false,
         /**
          * @member {String} ntype='functional-component'
          * @protected
@@ -96,6 +103,20 @@ class FunctionalBase extends Abstract {
         }
     }
 
+    /**
+     * Triggered after the enableHtmlTemplates config got changed.
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetEnableHtmlTemplates_(value, oldValue) {
+        if (value && !this.htmlParser) {
+            import('../util/html.mjs').then(module => {
+                this.htmlParser = module.default;
+            });
+        }
+    }
+
     /**
      * Triggered after the windowId config got changed
      * @param {Number|null} value
@@ -175,6 +196,11 @@ class FunctionalBase extends Abstract {
      * @returns {Object} The VDOM structure for the component.
      */
     createVdom(config) {
+        const me = this;
+
+        if (me.enableHtmlTemplates && typeof me.createTemplateVdom === 'function') {
+            return me.createTemplateVdom(config)
+        }
         // This method should be overridden by subclasses
         return {}
     }

package/src/functional/util/html.mjs

@@ -0,0 +1,75 @@
+import { rawDimensionTags, voidAttributes, voidElements } from '../../vdom/domConstants.mjs';
+
+/**
+ * @param {Array<String>} strings
+ * @param {Array<*>} values
+ * @returns {Object} A VDomNodeConfig object.
+ */
+const html = (strings, ...values) => {
+    let fullString = '';
+    for (let i = 0; i < strings.length; i++) {
+        fullString += strings[i];
+        if (i < values.length) {
+            // Use a unique placeholder for dynamic values
+            fullString += `__DYNAMIC_VALUE_${i}__`;
+        }
+    }
+
+    // Very basic parsing: find the first tag and its content
+    const tagRegex = /<(\w+)([^>]*)>([\s\S]*?)<\/\1>/;
+    const match = fullString.match(tagRegex);
+
+    if (!match) {
+        // If no matching tag, return a simple text node or empty div
+        return { tag: 'div', text: fullString.replace(/__DYNAMIC_VALUE_\d+__/g, (m) => {
+            const index = parseInt(m.match(/\d+/)[0]);
+            return values[index];
+        }) };
+    }
+
+    const rootTag = match[1];
+    const attributesString = match[2];
+    let innerContent = match[3];
+
+    const vdomNode = {
+        tag: rootTag,
+        cn: []
+    };
+
+    // Parse attributes (very basic: only id for now)
+    const idMatch = attributesString.match(/id="([^"]+)"/);
+    if (idMatch) {
+        vdomNode.id = idMatch[1];
+    }
+
+    // Replace dynamic placeholders with actual values in innerContent
+    innerContent = innerContent.replace(/__DYNAMIC_VALUE_(\d+)__/g, (m, index) => {
+        return values[parseInt(index)];
+    });
+
+    // For the current test case, we know it's <p> and <span>
+    // This is still not a generic parser, but a step towards it.
+    const pSpanRegex = /<p>([\s\S]*?)<\/p>\s*<span>([\s\S]*?)<\/span>/;
+    const pSpanMatch = innerContent.match(pSpanRegex);
+
+    if (pSpanMatch) {
+        vdomNode.cn.push({
+            tag: 'p',
+            text: pSpanMatch[1]
+        });
+        vdomNode.cn.push({
+            tag: 'span',
+            text: pSpanMatch[2]
+        });
+    } else {
+        // Fallback for simpler cases or if the regex doesn't match
+        vdomNode.cn.push({
+            tag: 'div', // Default child tag
+            text: innerContent // Treat as plain text for now
+        });
+    }
+
+    return vdomNode;
+};
+
+export default html;

package/src/state/Provider.mjs

@@ -613,11 +613,12 @@ class Provider extends Base {
      */
     #setConfigValue(provider, path, newValue, oldVal) {
         let currentConfig = provider.getDataConfig(path),
+            hasChange     = true,
             oldValue      = oldVal;
 
         if (currentConfig) {
-            oldValue = currentConfig.get();
-            currentConfig.set(newValue);
+            oldValue  = currentConfig.get();
+            hasChange = currentConfig.set(newValue)
         } else {
             currentConfig = new Config(newValue);
             provider.#dataConfigs[path] = currentConfig;
@@ -625,8 +626,10 @@ class Provider extends Base {
             provider.#bindingEffects.forEach(effect => effect.run())
         }
 
-        // Notify subscribers of the data property change.
-        provider.onDataPropertyChange(path, newValue, oldValue)
+        if (hasChange) {
+            // Notify subscribers of the data property change.
+            provider.onDataPropertyChange(path, newValue, oldValue)
+        }
     }
 
     /**

package/src/tree/Accordion.mjs

@@ -63,7 +63,7 @@ class AccordionTree extends TreeList {
          *
          * @example
          *     module: AccordionTree,
-         *     bind  : {selection: {twoWay: true, value: data => data.selection}}
+         *     bind  : {selection: {key: 'selection', twoWay: true}}
          *
          *     ntype: 'component',
          *     bind : {html: data => data.selection[0].name}

package/test/siesta/siesta.js

@@ -44,12 +44,19 @@ project.plan(
             'tests/core/EffectBatching.mjs'
         ]
     },
+    {
+        group: 'form',
+        items: [
+            'tests/form/field/AfterSetValueSequence.mjs'
+        ]
+    },
     {
         group: 'state',
         items: [
             'tests/state/createHierarchicalDataProxy.mjs',
             'tests/state/Provider.mjs',
-            'tests/state/ProviderNestedDataConfigs.mjs'
+            'tests/state/ProviderNestedDataConfigs.mjs',
+            'tests/state/FeedbackLoop.mjs',
         ]
     },
     'tests/CollectionBase.mjs',

package/test/siesta/tests/CollectionBase.mjs

@@ -275,4 +275,50 @@ StartTest(t => {
             {id: 'e'}
         ], 'collection.getRange()');
     });
+
+    t.it('Move collection items', t => {
+        let moveCollection = Neo.create(Collection, {
+            items: [
+                {id: 'a'},
+                {id: 'b'},
+                {id: 'c'},
+                {id: 'd'},
+                {id: 'e'}
+            ]
+        });
+
+        t.isDeeplyStrict(moveCollection.getRange(), [{id: 'a'}, {id: 'b'}, {id: 'c'}, {id: 'd'}, {id: 'e'}], 'Initial order');
+
+        // Move item forward
+        moveCollection.move(1, 2);
+        t.isDeeplyStrict(moveCollection.getRange(), [{id: 'a'}, {id: 'c'}, {id: 'b'}, {id: 'd'}, {id: 'e'}], 'Move item forward (1 -> 2)');
+
+        // Swap adjacent items (backward)
+        moveCollection.move(2, 1);
+        t.isDeeplyStrict(moveCollection.getRange(), [{id: 'a'}, {id: 'b'}, {id: 'c'}, {id: 'd'}, {id: 'e'}], 'Swap adjacent items back (2 -> 1)');
+
+        // Move item backward
+        moveCollection.move(3, 1);
+        t.isDeeplyStrict(moveCollection.getRange(), [{id: 'a'}, {id: 'd'}, {id: 'b'}, {id: 'c'}, {id: 'e'}], 'Move item backward (3 -> 1)');
+
+        // Move item forward
+        moveCollection.move(1, 3);
+        t.isDeeplyStrict(moveCollection.getRange(), [{id: 'a'}, {id: 'b'}, {id: 'c'}, {id: 'd'}, {id: 'e'}], 'Move item forward (1 -> 3)');
+
+        // Swap adjacent items (forward)
+        moveCollection.move(0, 1);
+        t.isDeeplyStrict(moveCollection.getRange(), [{id: 'b'}, {id: 'a'}, {id: 'c'}, {id: 'd'}, {id: 'e'}], 'Swap adjacent items (0 -> 1)');
+
+        // Swap adjacent items (backward)
+        moveCollection.move(1, 0);
+        t.isDeeplyStrict(moveCollection.getRange(), [{id: 'a'}, {id: 'b'}, {id: 'c'}, {id: 'd'}, {id: 'e'}], 'Swap adjacent items back (1 -> 0)');
+
+        // Move to end
+        moveCollection.move(0, 4);
+        t.isDeeplyStrict(moveCollection.getRange(), [{id: 'b'}, {id: 'c'}, {id: 'd'}, {id: 'e'}, {id: 'a'}], 'Move to end (0 -> 4)');
+
+        // Move to start
+        moveCollection.move(4, 0);
+        t.isDeeplyStrict(moveCollection.getRange(), [{id: 'a'}, {id: 'b'}, {id: 'c'}, {id: 'd'}, {id: 'e'}], 'Move to start (4 -> 0)');
+    });
 });

package/test/siesta/tests/form/field/AfterSetValueSequence.mjs

@@ -0,0 +1,106 @@
+import Neo             from '../../../../../src/Neo.mjs';
+import * as core       from '../../../../../src/core/_export.mjs';
+import InstanceManager from '../../../../../src/manager/Instance.mjs';
+import ComboBox        from '../../../../../src/form/field/ComboBox.mjs';
+import Text            from '../../../../../src/form/field/Text.mjs';
+
+class MyComboBox extends ComboBox {
+    static config = {
+        className: 'Test.MyComboBox',
+
+        displayField: 'country',
+        valueField  : 'country',
+        value       : 'Angola', // Initial value
+        store: {
+            keyProperty: 'country',
+            model: {
+                fields: [
+                    {name: 'country', type: 'String'}
+                ]
+            },
+            data  : [
+                {country: 'Angola'},
+                {country: 'Algeria'}
+            ]
+        }
+    }
+
+    afterSetValue(value, oldValue) {
+        this.executionOrder.push('MyComboBox.afterSetValue');
+        super.afterSetValue(value, oldValue);
+    }
+}
+MyComboBox = Neo.setupClass(MyComboBox);
+
+class MyTextField extends Text {
+    static config = {
+        className: 'Test.MyTextField'
+    }
+
+    afterSetValue(value, oldValue) {
+        this.executionOrder.push('MyTextField.afterSetValue');
+        super.afterSetValue(value, oldValue);
+    }
+}
+MyTextField = Neo.setupClass(MyTextField);
+
+StartTest(t => {
+    t.it('TextField afterSetValue sequence should fire change event after the full method chain', t => {
+        const executionOrder = [];
+
+        const field = Neo.create(MyTextField, {
+            // pass array to instance so it's available in afterSetValue
+            executionOrder
+        });
+
+        field.on('change', (changeEvent) => {
+            executionOrder.push('change event');
+            t.is(changeEvent.value, 'new value', 'Change event should contain the new value');
+        });
+
+        // Trigger the change
+        field.value = 'new value';
+
+        // Assert the order
+        t.isDeeplyStrict(executionOrder, ['MyTextField.afterSetValue', 'MyTextField.afterSetValue', 'change event'], 'Execution order is correct: afterSetValue runs before the change event');
+        t.is(field.value, 'new value', 'Value is set correctly on the instance');
+
+        field.destroy();
+    });
+
+    t.it('ComboBox afterSetValue sequence should fire change event after the full method chain', async t => {
+        const executionOrder = [];
+
+        const field = Neo.create(MyComboBox, {
+            // pass array to instance so it's available in afterSetValue
+            executionOrder
+        });
+
+        t.is(Neo.isRecord(field.value), true, 'Initial ComboBox value should be a record');
+        t.is(field.value.country, 'Angola', 'Initial ComboBox record should contain `Angola`');
+
+        field.on('change', (changeEvent) => {
+            executionOrder.push('combo change event');
+
+            t.is(Neo.isRecord(field.value), true, 'Updated ComboBox value should be a record');
+            t.is(field.value.country, 'Algeria', 'Updated ComboBox record should contain `Algeria`');
+        });
+
+        // Trigger the change
+        field.value = 'Algeria';
+
+        t.is(Neo.isRecord(field.value), true, 'Updated ComboBox value should be a record');
+        t.is(field.value.country, 'Algeria', 'Updated ComboBox record should contain `Algeria`');
+
+        // Required since change events are delayed in ComboBox
+        await field.timeout(35);
+
+        // Assert the order
+        t.isDeeplyStrict(executionOrder, ['MyComboBox.afterSetValue', 'MyComboBox.afterSetValue', 'combo change event'], 'Execution order is correct: afterSetValue runs before the change event');
+
+        t.is(Neo.isRecord(field.value), true, 'Updated ComboBox value should be a record');
+        t.is(field.value.country, 'Algeria', 'Updated ComboBox record should contain `Algeria`');
+
+        field.destroy();
+    });
+});

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

@@ -0,0 +1,92 @@
+import Neo                from '../../../../src/Neo.mjs';
+import * as core          from '../../../../src/core/_export.mjs';
+import FunctionalBase     from '../../../../src/functional/component/Base.mjs';
+import DomApiVnodeCreator from '../../../../src/vdom/util/DomApiVnodeCreator.mjs';
+import VdomHelper         from '../../../../src/vdom/Helper.mjs';
+import html               from '../../../../src/functional/util/html.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 = 'HtmlTemplateTest';
+Neo.apps = Neo.apps || {};
+Neo.apps[appName] = {
+    name     : appName,
+    fire     : Neo.emptyFn,
+    isMounted: () => true,
+    rendering: false
+};
+
+/**
+ * @class TestComponent
+ * @extends Neo.functional.component.Base
+ */
+class TestComponent extends FunctionalBase {
+    static config = {
+        className          : 'TestComponent',
+        enableHtmlTemplates: true,
+        testText_          : 'Hello from Template!'
+    }
+
+    createTemplateVdom(config) {
+        return html`
+            <div id="my-template-div">
+                <p>${config.testText}</p>
+                <span>Another element</span>
+            </div>
+        `;
+    }
+}
+
+TestComponent = Neo.setupClass(TestComponent);
+
+
+StartTest(t => {
+    let component, vnode;
+
+    t.beforeEach(async t => {
+        component = Neo.create(TestComponent, {
+            appName,
+            id: 'my-test-component'
+        });
+
+        ({vnode} = await component.render());
+        component.mounted = true; // Manually mount to enable updates in the test env
+    });
+
+    t.afterEach(t => {
+        component?.destroy();
+        component = null;
+        vnode     = null;
+    });
+
+    t.it('should create initial vnode correctly using html template', async t => {
+        t.expect(vnode.nodeName).toBe('div');
+        t.expect(vnode.id).toBe('my-test-component'); // The component's own ID
+        t.expect(vnode.childNodes.length).toBe(2);
+
+        const pNode = vnode.childNodes[0];
+        t.expect(pNode.nodeName).toBe('p');
+        t.expect(pNode.id).toContain('neo-vnode-'); // Expecting a generated ID
+        t.expect(pNode.textContent).toBe('Hello from Template!');
+
+        const spanNode = vnode.childNodes[1];
+        t.expect(spanNode.nodeName).toBe('span');
+        t.expect(spanNode.id).toContain('neo-vnode-'); // Expecting a generated ID
+        t.expect(spanNode.textContent).toBe('Another element');
+    });
+
+    t.it('should update vnode when reactive config changes', async t => {
+        // Update the component to get the updated vnode
+        const opts = await component.set({testText: 'Updated Text!'});
+        vnode = opts.vnode;
+
+        const pNode = vnode.childNodes[0];
+        t.expect(pNode.textContent).toBe('Updated Text!');
+    });
+});

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

@@ -0,0 +1,159 @@
+import Neo             from '../../../../src/Neo.mjs';
+import * as core       from '../../../../src/core/_export.mjs';
+import InstanceManager from '../../../../src/manager/Instance.mjs';
+import ComboBox        from '../../../../src/form/field/ComboBox.mjs';
+import Container       from '../../../../src/container/Base.mjs';
+import StateProvider   from '../../../../src/state/Provider.mjs';
+import Store           from '../../../../src/data/Store.mjs';
+
+StartTest(t => {
+
+    const mainComponent = Neo.create(Container, {
+        stateProvider: {
+            module: StateProvider,
+            data  : {
+                country     : 'Angola',
+                countryLabel: 'Country:'
+            }
+        },
+        items: [{
+            module      : ComboBox,
+            displayField: 'country',
+            valueField  : 'country',
+            bind: {
+                labelText: data => data.countryLabel,
+                value    : data => data.country
+            },
+            store: {
+                module     : Store,
+                keyProperty: 'country',
+
+                model: {
+                    fields: [
+                        {name: 'country', type: 'String'}
+                    ]
+                },
+
+                data  : [
+                    {country: 'Angola'},
+                    {country: 'Algeria'}
+                ]
+            }
+        }]
+    });
+
+    const provider = mainComponent.getStateProvider();
+    const comboBox = mainComponent.down('combobox');
+
+    let changeListenerCalls = 0;
+
+    comboBox.on('change', () => {
+        changeListenerCalls++;
+    });
+
+    t.it('Binding should work for simple and complex configs', t => {
+        t.is(comboBox.labelText, 'Country:', 'Simple binding for labelText should work on init');
+        t.is(Neo.isRecord(comboBox.value), true, 'Initial ComboBox value should be a record');
+        t.is(comboBox.value.country, 'Angola', 'Initial ComboBox record should contain `Angola`');
+
+        // Assert that change listener was NOT called on initial binding
+        t.is(changeListenerCalls, 0, 'Change listener should NOT be called on initial binding');
+
+        // 3. Now, let's test an update
+        provider.setData({
+            country     : 'Algeria',
+            countryLabel: 'Select Country:'
+        });
+
+        t.is(comboBox.labelText, 'Select Country:', 'Simple binding for labelText should work on update');
+        t.is(Neo.isRecord(comboBox.value), true, 'Updated ComboBox value should be a record');
+        t.is(comboBox.value.country, 'Algeria', 'Updated ComboBox record should contain `Algeria`');
+
+        // Assert that change listener was NOT called on programmatic update
+        t.is(changeListenerCalls, 1, 'Change listener should be called on programmatic update');
+
+        mainComponent.destroy();
+    });
+
+    t.it('Simulated user interaction should fire the change event', async t => {
+        // Create a new ComboBox instance for this test to avoid interference
+        const userSimulatedComboBox = Neo.create(ComboBox, {
+            displayField: 'country',
+            valueField  : 'country',
+            value       : 'Angola', // Initial value
+            store: {
+                module     : Store,
+                keyProperty: 'country',
+                model: {
+                    fields: [
+                        {name: 'country', type: 'String'}
+                    ]
+                },
+                data  : [
+                    {country: 'Angola'},
+                    {country: 'Algeria'}
+                ]
+            }
+        });
+
+        let userChangeListenerCalls = 0;
+        userSimulatedComboBox.on('change', data => {
+            userChangeListenerCalls++;
+        });
+
+        t.is(userChangeListenerCalls, 0, 'Change listener count should be 0');
+
+        userSimulatedComboBox.value = 'Algeria';
+
+        t.is(Neo.isRecord(userSimulatedComboBox.value), true, 'Updated ComboBox value should be a record');
+        t.is(userSimulatedComboBox.value.country, 'Algeria', 'Updated ComboBox record should contain `Algeria`');
+
+        await userSimulatedComboBox.timeout(35);
+
+        t.is(userChangeListenerCalls, 1, 'Change listener count should be 1');
+
+        t.is(Neo.isRecord(userSimulatedComboBox.value), true, 'Updated ComboBox value should be a record');
+        t.is(userSimulatedComboBox.value.country, 'Algeria', 'Updated ComboBox record should contain `Algeria`');
+
+        userSimulatedComboBox.destroy();
+    });
+
+    t.it('Should simulate feedback loop and prevent infinite recursion', async t => {
+        let setDataCallCount = 0;
+
+        // Mock the provider's setData to count calls
+        const originalSetData = provider.setData;
+        provider.setData = function(...args) {
+            setDataCallCount++;
+            originalSetData.apply(this, args);
+        };
+
+        // Simulate the controller's onCountryFieldChange
+        const mockOnCountryFieldChange = async (data) => {
+            const record = comboBox.store.find('country', data.value)?.[0]; // Mimic controller logic
+            if (record) {
+                provider.setData({
+                    country: data.value,
+                    countryRecord: record // Assuming countryRecord is also set
+                });
+            }
+        };
+
+        // Attach the mock controller logic to the ComboBox's change event
+        comboBox.on('change', mockOnCountryFieldChange);
+
+        // Simulate initial state change (e.g., from hash change)
+        // This will trigger the ComboBox's value update, which in turn fires its change event
+        // and then our mock controller logic.
+        provider.setData({ country: 'Algeria' });
+
+        await provider.timeout(35);
+
+        t.is(setDataCallCount, 1, 'Change listener count should be 1');
+
+        // Clean up
+        comboBox.un('change', mockOnCountryFieldChange);
+        provider.setData = originalSetData; // Restore original setData
+        mainComponent.destroy();
+    });
+});