neo.mjs 10.0.0-beta.4 → 10.0.0-beta.6

package/test/siesta/tests/VdomHelper.mjs

@@ -5,6 +5,10 @@ import Style      from '../../../src/util/Style.mjs';
 import VdomHelper from '../../../src/vdom/Helper.mjs';
 import VDomUtil   from '../../../src/util/VDom.mjs';
 
+// tests are designed for this rendering mode
+Neo.config.useDomApiRenderer = false;
+VdomHelper.onNeoConfigChange({useDomApiRenderer: false})
+
 let deltas, output, tmp, vdom, vnode;
 
 StartTest(t => {
@@ -18,16 +22,14 @@ StartTest(t => {
         vdom = {tag: 'div'};
         t.diag("VdomHelper.create({tag: div});");
 
-        vnode = VdomHelper.create(vdom);
+        output = VdomHelper.create({vdom}); vnode = output.vnode;
 
         t.isDeeplyStrict(vnode, {
             attributes: {},
             childNodes: [],
             className : [],
             id        : 'neo-vnode-1',
-            innerHTML : undefined,
             nodeName  : 'div',
-            outerHTML : '<div id="neo-vnode-1"></div>', // will only get created using VdomHelper.create()
             style     : {},
             vtype     : 'vnode'
         }, 'vnode got created successfully');
@@ -48,7 +50,6 @@ StartTest(t => {
             childNodes: [],
             className : ['neo-component'],
             id        : 'neo-vnode-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {},
             vtype     : 'vnode'
@@ -68,7 +69,6 @@ StartTest(t => {
             childNodes: [],
             className : ['neo-panel', 'neo-container', 'neo-component'],
             id        : 'neo-vnode-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {},
             vtype     : 'vnode'
@@ -88,7 +88,6 @@ StartTest(t => {
             childNodes: [],
             className : ['neo-container'],
             id        : 'neo-vnode-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {},
             vtype     : 'vnode'
@@ -110,7 +109,6 @@ StartTest(t => {
             childNodes: [],
             className : ['neo-container'],
             id        : 'neo-vnode-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {backgroundColor: 'red'},
             vtype     : 'vnode'
@@ -133,7 +131,6 @@ StartTest(t => {
             childNodes: [],
             className : ['neo-container'],
             id        : 'neo-vnode-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {backgroundColor: 'red', color: 'green', height: '100px'},
             vtype     : 'vnode'
@@ -157,7 +154,6 @@ StartTest(t => {
             childNodes: [],
             className : ['neo-container'],
             id        : 'neo-vnode-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {color: 'green'},
             vtype     : 'vnode'
@@ -183,7 +179,6 @@ StartTest(t => {
             childNodes: [],
             className : ['neo-container'],
             id        : 'neo-vnode-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {color: 'green'},
             vtype     : 'vnode'
@@ -206,7 +201,6 @@ StartTest(t => {
             childNodes: [],
             className : ['neo-container'],
             id        : 'neo-vnode-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {color: 'green'},
             vtype     : 'vnode'
@@ -229,7 +223,6 @@ StartTest(t => {
             childNodes: [],
             className : ['neo-container'],
             id        : 'neo-vnode-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {color: 'green'},
             vtype     : 'vnode'
@@ -254,15 +247,14 @@ StartTest(t => {
             attributes: {},
             className : ['neo-container'],
             id        : 'neo-vnode-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {color: 'green'},
             vtype     : 'vnode',
 
             childNodes: [
-                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-2',  innerHTML: undefined, nodeName: 'div', style: {}, vtype: 'vnode'},
-                {attributes: {}, childNodes: [], className: [], id: 'neo-button-1', innerHTML: undefined, nodeName: 'div', style: {}, vtype: 'vnode'},
-                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-3',  innerHTML: undefined, nodeName: 'div', style: {}, vtype: 'vnode'}
+                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-2',  nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: 'neo-button-1', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-3',  nodeName: 'div', style: {}, vtype: 'vnode'}
             ]
         }, 'vnode got updated successfully');
 
@@ -281,15 +273,14 @@ StartTest(t => {
             attributes: {},
             className : ['neo-container'],
             id        : 'neo-vnode-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {color: 'green'},
             vtype     : 'vnode',
 
             childNodes: [
-                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-3',  innerHTML: undefined, nodeName: 'div', style: {}, vtype: 'vnode'},
-                {attributes: {}, childNodes: [], className: [], id: 'neo-button-1', innerHTML: undefined, nodeName: 'div', style: {}, vtype: 'vnode'},
-                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-2',  innerHTML: undefined, nodeName: 'div', style: {}, vtype: 'vnode'}
+                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-3',  nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: 'neo-button-1', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-2',  nodeName: 'div', style: {}, vtype: 'vnode'}
             ]
         }, 'vnode got updated successfully');
 
@@ -307,15 +298,14 @@ StartTest(t => {
             attributes: {},
             className : ['neo-container'],
             id        : 'neo-vnode-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {color: 'green'},
             vtype     : 'vnode',
 
             childNodes: [
-                {attributes: {}, childNodes: [], className: [], id: 'neo-button-1', innerHTML: undefined, nodeName: 'div', style: {}, vtype: 'vnode'},
-                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-2',  innerHTML: undefined, nodeName: 'div', style: {}, vtype: 'vnode'},
-                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-3',  innerHTML: undefined, nodeName: 'div', style: {}, vtype: 'vnode'}
+                {attributes: {}, childNodes: [], className: [], id: 'neo-button-1', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-2',  nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-3',  nodeName: 'div', style: {}, vtype: 'vnode'}
             ]
         }, 'vnode got updated successfully');
 
@@ -333,15 +323,14 @@ StartTest(t => {
             attributes: {},
             className : ['neo-container'],
             id        : 'neo-vnode-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {color: 'green'},
             vtype     : 'vnode',
 
             childNodes: [
-                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-3',  innerHTML: undefined, nodeName: 'div', style: {}, vtype: 'vnode'},
-                {attributes: {}, childNodes: [], className: [], id: 'neo-button-1', innerHTML: undefined, nodeName: 'div', style: {}, vtype: 'vnode'},
-                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-2',  innerHTML: undefined, nodeName: 'div', style: {}, vtype: 'vnode'}
+                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-3',  nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: 'neo-button-1', nodeName: 'div', style: {}, vtype: 'vnode'},
+                {attributes: {}, childNodes: [], className: [], id: 'neo-vnode-2',  nodeName: 'div', style: {}, vtype: 'vnode'}
             ]
         }, 'vnode got updated successfully');
 
@@ -370,15 +359,13 @@ StartTest(t => {
             ]
         };
 
-        vnode = VdomHelper.create(vdom);
+        output = VdomHelper.create({vdom}); vnode = output.vnode;
 
         t.isDeeplyStrict(vnode, {
             attributes: {},
             className : ['neo-list-container', 'neo-list'],
             id        : 'neo-list-1',
-            innerHTML : undefined,
             nodeName  : 'ul',
-            outerHTML : '<ul style="width:100px;" class="neo-list-container neo-list" id="neo-list-1"><li class="neo-list-item" id="neo-list-1__bhaustein" tabIndex="-1">Bastian</li><li class="neo-list-item" id="neo-list-1__camtnbikerrwc" tabIndex="-1">Gerard</li><li class="neo-list-item" id="neo-list-1__jsakalos" tabIndex="-1">Jozef</li><li class="neo-list-item" id="neo-list-1__mrsunshine" tabIndex="-1">Nils</li><li class="neo-list-item" id="neo-list-1__rwaters" tabIndex="-1">Rich</li><li class="neo-list-item" id="neo-list-1__tobiu" tabIndex="-1">Tobias</li></ul>',
             style     : {width: '100px'},
             vtype     : 'vnode',
 
@@ -406,7 +393,6 @@ StartTest(t => {
             attributes: {},
             className : ['neo-list-container', 'neo-list'],
             id        : 'neo-list-1',
-            innerHTML : undefined,
             nodeName  : 'ul',
             style     : {width: '100px'},
             vtype     : 'vnode',
@@ -443,7 +429,6 @@ StartTest(t => {
             attributes: {},
             className : ['neo-list-container', 'neo-list'],
             id        : 'neo-list-1',
-            innerHTML : undefined,
             nodeName  : 'ul',
             style     : {width: '100px'},
             vtype     : 'vnode',
@@ -481,7 +466,6 @@ StartTest(t => {
             attributes: {},
             className : ['neo-list-container', 'neo-list'],
             id        : 'neo-list-1',
-            innerHTML : undefined,
             nodeName  : 'ul',
             style     : {width: '100px'},
             vtype     : 'vnode',
@@ -558,15 +542,13 @@ StartTest(t => {
             {id: '9', html: 'w'}
         ]};
 
-        vnode = VdomHelper.create(vdom);
+        output = VdomHelper.create({vdom}); vnode = output.vnode;
 
         t.isDeeplyStrict(vnode, {
             attributes: {},
             className : [],
             id        : 'root',
-            innerHTML : undefined,
             nodeName  : 'div',
-            outerHTML : t.any(String),
             style     : {},
             vtype     : 'vnode',
 
@@ -603,7 +585,6 @@ StartTest(t => {
             attributes: {},
             className : [],
             id        : 'root',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {},
             vtype     : 'vnode',
@@ -635,15 +616,13 @@ StartTest(t => {
             ]}
         ]};
 
-        vnode = VdomHelper.create(vdom);
+        output = VdomHelper.create({vdom}); vnode = output.vnode;
 
         t.isDeeplyStrict(vnode, {
             attributes: {},
             className : [],
             id        : 'level-1',
-            innerHTML : undefined,
             nodeName  : 'div',
-            outerHTML : t.any(String),
             style     : {},
             vtype     : 'vnode',
 
@@ -651,7 +630,6 @@ StartTest(t => {
                 id        : 'level-2',
                 attributes: {},
                 className : [],
-                innerHTML : undefined,
                 nodeName  : 'div',
                 style     : {},
                 vtype     : 'vnode',
@@ -661,7 +639,6 @@ StartTest(t => {
                     attributes: {},
                     childNodes: [],
                     className : [],
-                    innerHTML : undefined,
                     nodeName  : 'div',
                     style     : {},
                     vtype     : 'vnode'
@@ -678,7 +655,6 @@ StartTest(t => {
             attributes: {},
             className : [],
             id        : 'level-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {},
             vtype     : 'vnode',
@@ -688,7 +664,6 @@ StartTest(t => {
                 attributes: {},
                 childNodes: [],
                 className : [],
-                innerHTML : undefined,
                 nodeName  : 'div',
                 style     : {},
                 vtype     : 'vnode'
@@ -714,15 +689,13 @@ StartTest(t => {
             ]}
         ]};
 
-        vnode = VdomHelper.create(vdom);
+        output = VdomHelper.create({vdom}); vnode = output.vnode;
 
         t.isDeeplyStrict(vnode, {
             attributes: {},
             className : [],
             id        : 'level-1',
-            innerHTML : undefined,
             nodeName  : 'div',
-            outerHTML : t.any(String),
             style     : {},
             vtype     : 'vnode',
 
@@ -730,7 +703,6 @@ StartTest(t => {
                 id        : 'level-2',
                 attributes: {},
                 className : [],
-                innerHTML : undefined,
                 nodeName  : 'div',
                 style     : {},
                 vtype     : 'vnode',
@@ -740,7 +712,6 @@ StartTest(t => {
                     attributes: {},
                     childNodes: [],
                     className : [],
-                    innerHTML : undefined,
                     nodeName  : 'div',
                     style     : {},
                     vtype     : 'vnode'
@@ -749,7 +720,6 @@ StartTest(t => {
                     attributes: {},
                     childNodes: [],
                     className : [],
-                    innerHTML : undefined,
                     nodeName  : 'div',
                     style     : {},
                     vtype     : 'vnode'
@@ -766,7 +736,6 @@ StartTest(t => {
             attributes: {},
             className : [],
             id        : 'level-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {},
             vtype     : 'vnode',
@@ -776,7 +745,6 @@ StartTest(t => {
                 attributes: {},
                 childNodes: [],
                 className : [],
-                innerHTML : undefined,
                 nodeName  : 'div',
                 style     : {},
                 vtype     : 'vnode'
@@ -785,7 +753,6 @@ StartTest(t => {
                 attributes: {},
                 childNodes: [],
                 className : [],
-                innerHTML : undefined,
                 nodeName  : 'div',
                 style     : {},
                 vtype     : 'vnode'
@@ -810,7 +777,7 @@ StartTest(t => {
             ]}
         ]};
 
-        vnode = VdomHelper.create(vdom);
+        output = VdomHelper.create({vdom}); vnode = output.vnode;
 
         vdom =
         {id: 'level-1', cn: [
@@ -825,7 +792,6 @@ StartTest(t => {
             attributes: {},
             className : [],
             id        : 'level-1',
-            innerHTML : undefined,
             nodeName  : 'div',
             style     : {},
             vtype     : 'vnode',
@@ -835,7 +801,6 @@ StartTest(t => {
                 attributes: {},
                 childNodes: [],
                 className : [],
-                innerHTML : undefined,
                 nodeName  : 'div',
                 style     : {},
                 vtype     : 'vnode'
@@ -844,7 +809,6 @@ StartTest(t => {
                 attributes: {},
                 childNodes: [],
                 className : [],
-                innerHTML : undefined,
                 nodeName  : 'div',
                 style     : {},
                 vtype     : 'vnode'
@@ -853,7 +817,6 @@ StartTest(t => {
                 attributes: {},
                 childNodes: [],
                 className : [],
-                innerHTML : undefined,
                 nodeName  : 'div',
                 style     : {},
                 vtype     : 'vnode'

package/test/siesta/tests/config/AfterSetConfig.mjs

@@ -0,0 +1,100 @@
+import Neo            from '../../../../src/Neo.mjs';
+import * as core      from '../../../../src/core/_export.mjs';
+
+class TestComponent extends core.Base {
+    static config = {
+        className    : 'Neo.Test.AfterSetConfigComponent',
+        configA_     : 'initialA',
+        configB_     : 'initialB',
+        configC_     : 'initialC',
+        nonReactive  : 'initialNonReactive' // Non-reactive config
+    }
+
+    classField = 'initialClassField'; // Public class field
+
+    afterSetConfigCalls = [];
+
+    afterSetConfig(key, newValue, oldValue) {
+        this.afterSetConfigCalls.push({key, newValue, oldValue});
+    }
+}
+Neo.setupClass(TestComponent);
+
+StartTest(t => {
+    t.it('afterSetConfig should be called for individual config changes', t => {
+        const instance = Neo.create(TestComponent);
+        instance.afterSetConfigCalls = []; // Reset for this test
+
+        instance.configA = 'valueA';
+        t.is(instance.afterSetConfigCalls.length, 1, 'afterSetConfig should be called once');
+        t.isDeeplyStrict(instance.afterSetConfigCalls[0], {key: 'configA', newValue: 'valueA', oldValue: 'initialA'}, 'Correct arguments for configA');
+
+        instance.configB = 'valueB';
+        t.is(instance.afterSetConfigCalls.length, 2, 'afterSetConfig should be called twice');
+        t.isDeeplyStrict(instance.afterSetConfigCalls[1], {key: 'configB', newValue: 'valueB', oldValue: 'initialB'}, 'Correct arguments for configB');
+    });
+
+    t.it('afterSetConfig should be called for each changed reactive config when using instance.set()', t => {
+        const instance = Neo.create(TestComponent);
+        instance.afterSetConfigCalls = []; // Reset for this test
+
+        instance.set({
+            configA: 'newValueA',
+            configB: 'newValueB',
+            configC: 'newValueC'
+        });
+
+        t.is(instance.afterSetConfigCalls.length, 3, 'afterSetConfig should be called three times');
+        t.isDeeplyStrict(instance.afterSetConfigCalls[0], {key: 'configA', newValue: 'newValueA', oldValue: 'initialA'}, 'Correct arguments for configA via set()');
+        t.isDeeplyStrict(instance.afterSetConfigCalls[1], {key: 'configB', newValue: 'newValueB', oldValue: 'initialB'}, 'Correct arguments for configB via set()');
+        t.isDeeplyStrict(instance.afterSetConfigCalls[2], {key: 'configC', newValue: 'newValueC', oldValue: 'initialC'}, 'Correct arguments for configC via set()');
+    });
+
+    t.it('afterSetConfig should not be called for unchanged values', t => {
+        const instance = Neo.create(TestComponent);
+        instance.afterSetConfigCalls = []; // Reset for this test
+
+        instance.configA = 'initialA'; // Set to same value
+        t.is(instance.afterSetConfigCalls.length, 0, 'afterSetConfig should not be called for unchanged individual reactive config');
+
+        instance.set({
+            configA: 'initialA',
+            configB: 'initialB'
+        });
+        t.is(instance.afterSetConfigCalls.length, 0, 'afterSetConfig should not be called for unchanged reactive configs via set()');
+    });
+
+    t.it('instance.set() should update class fields and non-reactive configs without calling afterSetConfig', t => {
+        const instance = Neo.create(TestComponent);
+        instance.afterSetConfigCalls = []; // Reset for this test
+
+        instance.set({
+            configA    : 'changedA', // Reactive
+            nonReactive: 'changedNonReactive', // Non-reactive
+            classField : 'changedClassField' // Class field
+        });
+
+        // Verify reactive config update and afterSetConfig call
+        t.is(instance.configA, 'changedA', 'Reactive configA should be updated');
+        t.is(instance.afterSetConfigCalls.length, 1, 'afterSetConfig should be called only once for configA');
+        t.isDeeplyStrict(instance.afterSetConfigCalls[0], {key: 'configA', newValue: 'changedA', oldValue: 'initialA'}, 'Correct arguments for configA');
+
+        // Verify non-reactive config update, no afterSetConfig call
+        t.is(instance.nonReactive, 'changedNonReactive', 'Non-reactive config should be updated');
+
+        // Verify class field update, no afterSetConfig call
+        t.is(instance.classField, 'changedClassField', 'Class field should be updated');
+
+        // Reset and test with only non-reactive/class field changes
+        instance.afterSetConfigCalls = [];
+        instance.set({
+            nonReactive: 'changedAgainNonReactive',
+            classField : 'changedAgainClassField'
+        });
+
+        t.is(instance.afterSetConfigCalls.length, 0, 'afterSetConfig should not be called for only non-reactive/class field changes');
+        t.is(instance.nonReactive, 'changedAgainNonReactive', 'Non-reactive config should be updated again');
+        t.is(instance.classField, 'changedAgainClassField', 'Class field should be updated again');
+    });
+});
+

package/test/siesta/tests/{ReactiveConfigs.mjs → config/Basic.mjs}

@@ -1,20 +1,20 @@
-import Neo       from '../../../src/Neo.mjs';
-import * as core from '../../../src/core/_export.mjs';
-import {isDescriptor} from '../../../src/core/ConfigSymbols.mjs';
+import Neo            from '../../../../src/Neo.mjs';
+import * as core      from '../../../../src/core/_export.mjs';
+import {isDescriptor} from '../../../../src/core/ConfigSymbols.mjs';
 
 class MyComponent extends core.Base {
     static config = {
-        className: 'Neo.TestComponent',
-        myConfig_ : 'initialValue',
-        arrayConfig_: {
+        className    : 'Neo.TestComponent',
+        myConfig_    : 'initialValue',
+        arrayConfig_ : {
             [isDescriptor]: true,
-            value: [],
-            merge: 'replace'
+            value         : [],
+            merge         : 'replace'
         },
         objectConfig_: {
             [isDescriptor]: true,
-            value: {},
-            merge: 'deep'
+            value         : {},
+            merge         : 'deep'
         }
     }
 
@@ -27,13 +27,12 @@ MyComponent = Neo.setupClass(MyComponent);
 
 StartTest(t => {
     t.it('Basic reactivity with subscribe', t => {
-        const instance = Neo.create(MyComponent);
-        const configController = instance.getConfig('myConfig');
+        const instance         = Neo.create(MyComponent);
 
         let subscriberCalled = false;
         let receivedNewValue, receivedOldValue;
 
-        const cleanup = configController.subscribe((newValue, oldValue) => {
+        const cleanup = instance.observeConfig(instance, 'myConfig', (newValue, oldValue) => {
             subscriberCalled = true;
             receivedNewValue = newValue;
             receivedOldValue = oldValue;
@@ -54,21 +53,20 @@ StartTest(t => {
 
     t.it('Descriptor: arrayConfig_ with merge: replace', t => {
         const instance = Neo.create(MyComponent);
-        const configController = instance.getConfig('arrayConfig');
 
         let subscriberCalled = 0;
-        configController.subscribe((newValue, oldValue) => {
+        instance.observeConfig(instance, 'arrayConfig', (newValue, oldValue) => {
             subscriberCalled++;
         });
 
         const arr1 = [1, 2, 3];
         instance.arrayConfig = arr1;
-        t.is(instance.arrayConfig, arr1, 'Array should be replaced');
+        t.isDeeplyStrict(instance.arrayConfig, arr1, 'Array should be replaced');
         t.is(subscriberCalled, 1, 'Subscriber called once for array replacement');
 
         const arr2 = [4, 5, 6];
         instance.arrayConfig = arr2;
-        t.is(instance.arrayConfig, arr2, 'Array should be replaced again');
+        t.isDeeplyStrict(instance.arrayConfig, arr2, 'Array should be replaced again');
         t.is(subscriberCalled, 2, 'Subscriber called twice for array replacement');
 
         // Setting the same array should not trigger a change by default isEqual
@@ -78,16 +76,15 @@ StartTest(t => {
 
     t.it('Descriptor: objectConfig_ with merge: deep', t => {
         const instance = Neo.create(MyComponent);
-        const configController = instance.getConfig('objectConfig');
 
         let subscriberCalled = 0;
-        configController.subscribe((newValue, oldValue) => {
+        instance.observeConfig(instance, 'objectConfig', (newValue, oldValue) => {
             subscriberCalled++;
         });
 
         const obj1 = {a: 1, b: {c: 2}};
         instance.objectConfig = obj1;
-        t.is(instance.objectConfig, obj1, 'Object should be set');
+        t.isDeeplyStrict(instance.objectConfig, obj1, 'Object should be set');
         t.is(subscriberCalled, 1, 'Subscriber called once for object set');
 
         // Deep merge should happen, but default isEqual will still compare references
@@ -103,10 +100,50 @@ StartTest(t => {
 
         // Modifying a nested property should trigger a change if isEqual is deep
         // NOTE: The current Config.mjs uses Neo.isEqual which is a deep comparison.
-        // If the object reference changes, it will trigger. If the object reference stays the same, but content changes, it will not trigger unless isEqual is customized.
+        // If the object reference changes, it will trigger. If the object reference stays the same,
+        // but content changes, it will not trigger unless isEqual is customized.
         // For now, this test relies on the fact that setting a new object reference triggers the change.
         const obj3 = {a: 1, b: {c: 2}};
         instance.objectConfig = obj3;
         t.is(subscriberCalled, 3, 'Subscriber called for new object reference');
     });
+
+    t.it('Multiple subscriptions from same owner ID', t => {
+        const instance = Neo.create(MyComponent);
+        const publisher = instance; // Observing itself for simplicity
+        const configName = 'myConfig';
+
+        let callback1Called = false;
+        let callback2Called = false;
+
+        const cleanup1 = instance.observeConfig(publisher, configName, (newValue, oldValue) => {
+            callback1Called = true;
+        });
+
+        const cleanup2 = instance.observeConfig(publisher, configName, (newValue, oldValue) => {
+            callback2Called = true;
+        });
+
+        // Reset flags
+        callback1Called = false;
+        callback2Called = false;
+
+        // Change the config value
+        instance.myConfig = 'changedValue';
+
+        t.ok(callback1Called, 'First callback should be called');
+        t.ok(callback2Called, 'Second callback should be called');
+
+        // Test cleanup
+        cleanup1();
+        cleanup2();
+
+        callback1Called = false;
+        callback2Called = false;
+
+        instance.myConfig = 'anotherChange';
+
+        t.notOk(callback1Called, 'First callback should NOT be called after cleanup');
+        t.notOk(callback2Called, 'Second callback should NOT be called after cleanup');
+    });
 });