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

package/src/state/createHierarchicalDataProxy.mjs

@@ -0,0 +1,138 @@
+import EffectManager from '../core/EffectManager.mjs';
+
+/**
+ * Creates a nested Proxy that represents a level in the hierarchical data structure.
+ * @param {Neo.state.Provider} rootProvider The top-level provider to start searches from.
+ * @param {String} path The current path of this proxy level (e.g., 'user' for data.user).
+ * @returns {Proxy|null}
+ * @private
+ */
+function createNestedProxy(rootProvider, path) {
+    // The target object for the proxy can be empty because all lookups are dynamic.
+    const target = {};
+
+    return new Proxy(target, {
+        /**
+         * The get trap for the proxy. This is where the magic happens.
+         * @param {Object} currentTarget The proxy's target object.
+         * @param {String|Symbol} property The name of the property being accessed.
+         * @returns {*} The value of the property or a new proxy for nested access.
+         */
+        get(currentTarget, property) {
+            // Handle internal properties that might be set directly on the proxy's target
+            // or are expected by the environment (like Siesta's __REFADR__).
+            if (typeof property === 'symbol' || property === '__REFADR__' || property === 'inspect' || property === 'then') {
+                return Reflect.get(currentTarget, property)
+            }
+
+            // Only allow string or number properties to proceed as data paths.
+            if (typeof property !== 'string' && typeof property !== 'number') {
+                return undefined; // For other non-string/non-number properties, return undefined.
+            }
+
+            // Special handling for the 'stores' property at the root level
+            if (path === '' && property === 'stores') {
+                return new Proxy({}, {
+                    get(target, storeName) {
+                        if (typeof storeName === 'symbol' || storeName === '__REFADR__') {
+                            return Reflect.get(target, storeName)
+                        }
+                        // Delegate to the StateProvider's getStore method for hierarchical resolution
+                        // Accessing store.count later will register the dependency via the Config system
+                        return rootProvider.getStore(storeName)
+                    }
+                })
+            }
+
+            const fullPath = path ? `${path}.${property}` : property;
+
+            // 1. Check if the full path corresponds to an actual data property.
+            const ownerDetails = rootProvider.getOwnerOfDataProperty(fullPath);
+
+            if (ownerDetails) {
+                const
+                    {owner, propertyName} = ownerDetails,
+                    config                = owner.getDataConfig(propertyName);
+
+                if (config) {
+                    EffectManager.getActiveEffect()?.addDependency(config);
+
+                    const value = config.get();
+                    // If the value is an object, return a new proxy for it to ensure nested accesses are also proxied.
+                    if (Neo.isObject(value)) {
+                        return createNestedProxy(rootProvider, fullPath)
+                    }
+
+                    return value
+                }
+            }
+
+            // 2. If not a direct match, it might be a parent object of a nested property
+            //    (e.g., accessing `user` when a `user.firstname` binding exists).
+            //    In this case, we return another proxy for the next level down.
+            if (rootProvider.hasNestedDataStartingWith(fullPath)) {
+                return createNestedProxy(rootProvider, fullPath)
+            }
+
+            // 3. If it's neither a data property nor a path to one, it doesn't exist.
+            //    Returning undefined ensures that chained accesses (e.g., data.nonexistent.property) fail gracefully.
+        },
+
+        set(currentTarget, property, value) {
+            // Allow internal properties (like Symbols or specific strings) to be set directly on the target.
+            if (typeof property === 'symbol' || property === '__REFADR__') {
+                return Reflect.set(currentTarget, property, value)
+            }
+
+            const
+                fullPath     = path ? `${path}.${property}` : property,
+                ownerDetails = rootProvider.getOwnerOfDataProperty(fullPath);
+            let targetProvider;
+
+            if (ownerDetails) {
+                targetProvider = ownerDetails.owner
+            } else {
+                // If no owner is found, set it on the rootProvider (the one that created this proxy)
+                targetProvider = rootProvider
+            }
+
+            targetProvider.setData(fullPath, value);
+            return true // Indicate that the assignment was successful
+        },
+
+        ownKeys(currentTarget) {
+            return rootProvider.getTopLevelDataKeys(path)
+        },
+
+        getOwnPropertyDescriptor(currentTarget, property) {
+            const
+                fullPath     = path ? `${path}.${property}` : property,
+                ownerDetails = rootProvider.getOwnerOfDataProperty(fullPath);
+
+            if (ownerDetails) {
+                const config = ownerDetails.owner.getDataConfig(ownerDetails.propertyName);
+
+                if (config) {
+                    const value = config.get();
+                    return {
+                        value       : Neo.isObject(value) ? createNestedProxy(rootProvider, fullPath) : value,
+                        writable    : true,
+                        enumerable  : true,
+                        configurable: true
+                    }
+                }
+            }
+        }
+    })
+}
+
+/**
+ * Creates a Proxy object that represents the merged, hierarchical data from a `state.Provider` chain.
+ * When a property is accessed through this proxy while an Effect is running, it automatically
+ * tracks the underlying core.Config instance as a dependency.
+ * @param {Neo.state.Provider} provider The starting state.Provider.
+ * @returns {Proxy}
+ */
+export function createHierarchicalDataProxy(provider) {
+    return createNestedProxy(provider, '')
+}

package/src/tab/Container.mjs

@@ -32,6 +32,7 @@ class Container extends BaseContainer {
         /**
          * You can use null to not render any items initially
          * @member {Number|null} activeIndex_=0
+         * @reactive
          */
         activeIndex_: 0,
         /**
@@ -60,11 +61,13 @@ class Container extends BaseContainer {
         headerToolbar: null,
         /**
          * @member {Object|null} layout=null
+         * @reactive
          */
         layout: null,
         /**
          * True to not apply a background effect to the tab header container
          * @member {Boolean} plain_=true
+         * @reactive
          */
         plain_: true,
         /*
@@ -77,6 +80,7 @@ class Container extends BaseContainer {
          * true enables sorting tabs via drag&drop.
          * The config gets passed to the header toolbar
          * @member {Boolean} sortable_=false
+         * @reactive
          */
         sortable_: false,
         /**
@@ -96,6 +100,7 @@ class Container extends BaseContainer {
          * The position of the tab header toolbar.
          * Valid values are top, right, bottom, left.
          * @member {String} tabBarPosition_='top'
+         * @reactive
          */
         tabBarPosition_: 'top',
         /**
@@ -105,6 +110,7 @@ class Container extends BaseContainer {
         tabContainerCls: 'neo-tab-container',
         /**
          * @member {Boolean} useActiveTabIndicator_=true
+         * @reactive
          */
         useActiveTabIndicator_: true
     }

package/src/tab/Strip.mjs

@@ -26,6 +26,7 @@ class Strip extends Component {
         tabContainerId: null,
         /**
          * @member {Boolean} useActiveTabIndicator_=true
+         * @reactive
          */
         useActiveTabIndicator_: true,
         /**

package/src/tab/header/Button.mjs

@@ -23,10 +23,12 @@ class Button extends BaseButton {
         /**
          * Specify a role tag attribute for the vdom root.
          * @member {String|null} role='tab'
+         * @reactive
          */
         role: 'tab',
         /**
          * @member {Boolean} useActiveTabIndicator_=true
+         * @reactive
          */
         useActiveTabIndicator_: true,
         /**

package/src/tab/header/EffectButton.mjs

@@ -0,0 +1,77 @@
+import EffectButton from '../../button/Effect.mjs';
+
+/**
+ * @class Neo.tab.header.EffectButton
+ * @extends Neo.button.Effect
+ */
+class EffectTabButton extends EffectButton {
+    static config = {
+        /**
+         * @member {String} className='Neo.tab.header.EffectButton'
+         * @protected
+         */
+        className: 'Neo.tab.header.EffectButton',
+        /**
+         * @member {String} ntype='tab-header-effect-button'
+         * @protected
+         */
+        ntype: 'tab-header-effect-button',
+        /**
+         * @member {String[]} baseCls=['neo-tab-header-button', 'neo-button']
+         */
+        baseCls: ['neo-tab-header-button', 'neo-button'],
+        /**
+         * Specify a role tag attribute for the vdom root.
+         * @member {String|null} role='tab'
+         * @reactive
+         */
+        role: 'tab',
+        /**
+         * @member {Boolean} useActiveTabIndicator_=true
+         * @reactive
+         */
+        useActiveTabIndicator_: true
+    }
+
+    /**
+     * Builds the top-level VDOM object.
+     * @returns {Object}
+     * @protected
+     */
+    getVdomConfig() {
+        let vdomConfig = super.getVdomConfig();
+
+        vdomConfig.role = this.role;
+
+        if (this.pressed) {
+            vdomConfig['aria-selected'] = true;
+        }
+
+        return vdomConfig;
+    }
+
+    /**
+     * Builds the array of child nodes (the 'cn' property).
+     * @returns {Object[]}
+     * @protected
+     */
+    getVdomChildren() {
+        let children = super.getVdomChildren();
+
+        children.push({
+            cls      : ['neo-tab-button-indicator'],
+            removeDom: !this.useActiveTabIndicator
+        });
+
+        return children;
+    }
+
+    /**
+     * @param {Object} data
+     */
+    showRipple(data) {
+        !this.pressed && super.showRipple(data);
+    }
+}
+
+export default Neo.setupClass(EffectTabButton);

package/src/tab/header/Toolbar.mjs

@@ -22,6 +22,7 @@ class Toolbar extends BaseToolbar {
         baseCls: ['neo-tab-header-toolbar', 'neo-toolbar'],
         /**
          * @member {Boolean} useActiveTabIndicator_=true
+         * @reactive
          */
         useActiveTabIndicator_: true
     }

package/src/table/Body.mjs

@@ -36,6 +36,7 @@ class TableBody extends Component {
         containerId: null,
         /**
          * @member {Boolean} highlightModifiedCells_=false
+         * @reactive
          */
         highlightModifiedCells_: false,
         /**
@@ -49,6 +50,7 @@ class TableBody extends Component {
         recordVnodeMap: {},
         /**
          * @member {Neo.selection.Model} selectionModel_=null
+         * @reactive
          */
         selectionModel_: null,
         /**
@@ -57,6 +59,7 @@ class TableBody extends Component {
         selectedRecordField: 'annotations.selected',
         /**
          * @member {Neo.data.Store|null} store_=null
+         * @reactive
          */
         store_: null,
         /**

package/src/table/Container.mjs

@@ -34,11 +34,13 @@ class Container extends BaseContainer {
         /**
          * @member {String|null} bodyId_=null
          * @protected
+         * @reactive
          */
         bodyId_: null,
         /**
          * true uses table.plugin.CellEditing
          * @member {Boolean} cellEditing_=false
+         * @reactive
          */
         cellEditing_: false,
         /**
@@ -48,6 +50,7 @@ class Container extends BaseContainer {
         columnDefaults: null,
         /**
          * @member {Object[]} columns_=[]
+         * @reactive
          */
         columns_: [],
         /**
@@ -57,10 +60,12 @@ class Container extends BaseContainer {
         headerToolbarConfig: null,
         /**
          * @member {String|null} headerToolbarId_=null
+         * @reactive
          */
         headerToolbarId_: null,
         /**
          * @member {String} layout='base'
+         * @reactive
          */
         layout: 'base',
         /**
@@ -70,24 +75,29 @@ class Container extends BaseContainer {
         scrollbarsCssApplied: false,
         /**
          * @member {Boolean} showHeaderFilters_=false
+         * @reactive
          */
         showHeaderFilters_: false,
         /**
          * @member {Boolean} sortable_=true
+         * @reactive
          */
         sortable_: true,
         /**
          * @member {Neo.data.Store} store_=null
+         * @reactive
          */
         store_: null,
         /**
          * todo: only works for chrome & safari -> add a check
          * @member {Boolean} useCustomScrollbars_=true
+         * @reactive
          */
         useCustomScrollbars_: true,
         /**
          * @member {Array|null} items=null
          * @protected
+         * @reactive
          */
         items: null,
         /**

package/src/table/header/Button.mjs

@@ -34,6 +34,7 @@ class Button extends BaseButton {
         /**
          * Alignment of the matching table cells. Valid values are left, center, right
          * @member {String} cellAlign_='left'
+         * @reactive
          */
         cellAlign_: 'left',
         /**
@@ -47,6 +48,7 @@ class Button extends BaseButton {
         defaultSortDirection: 'ASC',
         /**
          * @member {Boolean} draggable_=true
+         * @reactive
          */
         draggable_: true,
         /**
@@ -64,20 +66,24 @@ class Button extends BaseButton {
         filterField: null,
         /**
          * @member {String} iconCls='fa fa-arrow-circle-up'
+         * @reactive
          */
         iconCls: 'fa fa-arrow-circle-up',
         /**
          * @member {String} iconPosition='right'
+         * @reactive
          */
         iconPosition: 'right',
         /**
          * 'ASC', 'DESC' or null
          * @member {String|null} isSorted_=null
          * @protected
+         * @reactive
          */
         isSorted_: null,
         /**
          * @member {Function|String|null} renderer_='cellRenderer'
+         * @reactive
          */
         renderer_: 'cellRenderer',
         /**
@@ -88,10 +94,12 @@ class Button extends BaseButton {
         rendererScope: null,
         /**
          * @member {Boolean} showHeaderFilter_=false
+         * @reactive
          */
         showHeaderFilter_: false,
         /**
          * @member {Boolean} sortable_=true
+         * @reactive
          */
         sortable_: true,
         /**

package/src/table/header/Toolbar.mjs

@@ -22,26 +22,31 @@ class Toolbar extends BaseToolbar {
         baseCls: ['neo-table-header-toolbar'],
         /**
          * @member {Boolean} draggable_=true
+         * @reactive
          */
         draggable_: true,
         /**
          * @member {String} layout='base'
+         * @reactive
          */
         layout: 'base',
         /**
          * @member {Object} itemDefaults={ntype : 'table-header-button'}
+         * @reactive
          */
         itemDefaults: {
             ntype: 'table-header-button'
         },
         /**
          * @member {Boolean} showHeaderFilters_=false
+         * @reactive
          */
         showHeaderFilters_: false,
         /**
          * Convenience shortcut to pass sortable to all toolbar items.
          * If set to true, header clicks will sort the matching column (ASC, DESC, null)
          * @member {Boolean} sortable=true
+         * @reactive
          */
         sortable: true,
         /**

package/src/table/plugin/CellEditing.mjs

@@ -24,6 +24,7 @@ class CellEditing extends Plugin {
         cellCls: 'neo-table-cell',
         /**
          * @member {Boolean} disabled_=false
+         * @reactive
          */
         disabled_: false,
         /**

package/src/toolbar/Base.mjs

@@ -33,16 +33,19 @@ class Toolbar extends Container {
         baseCls: ['neo-toolbar'],
         /**
          * @member {String|null} dock_=null
+         * @reactive
          */
         dock_: null,
         /**
          * @member {Object} itemDefaults={ntype:'button'}
+         * @reactive
          */
         itemDefaults: {
             ntype: 'button'
         },
         /**
          * @member {Object} layout={ntype:'flexbox',align:'center',direction: 'row', pack:'start'}
+         * @reactive
          */
         layout: {
             ntype    : 'flexbox',
@@ -52,6 +55,7 @@ class Toolbar extends Container {
         },
         /**
          * @member {Boolean} sortable_=false
+         * @reactive
          */
         sortable_: false,
         /**

package/src/toolbar/Breadcrumb.mjs

@@ -21,6 +21,7 @@ class Breadcrumb extends Toolbar {
         ntype: 'breadcrumb-toolbar',
         /**
          * @member {Number|String|null} activeKey_=null
+         * @reactive
          */
         activeKey_: null,
         /**
@@ -29,6 +30,7 @@ class Breadcrumb extends Toolbar {
         baseCls: ['neo-breadcrumb-toolbar', 'neo-toolbar'],
         /**
          * @member {Object} itemDefaults={ntype:'button', ui: 'tertiary'}
+         * @reactive
          */
         itemDefaults: {
             ntype: 'button',
@@ -36,6 +38,7 @@ class Breadcrumb extends Toolbar {
         },
         /**
          * @member {Neo.data.Store|Object} store_=null
+         * @reactive
          */
         store_: null
     }

package/src/toolbar/Paging.mjs

@@ -24,22 +24,27 @@ class Paging extends Toolbar {
         baseCls: ['neo-paging-toolbar', 'neo-toolbar'],
         /**
          * @member {Number} currentPage_=1
+         * @reactive
          */
         currentPage_: 1,
         /**
          * @member {Number} pageSize_=30
+         * @reactive
          */
         pageSize_: 30,
         /**
          * @member {Function} pagesText_=me=>`Page: ${me.page} / ${me.getMaxPages()}`
+         * @reactive
          */
         pagesText_: me => `Page ${me.currentPage} / ${me.getMaxPages()}`,
         /**
          * @member {Neo.data.Store|null} store_=null
+         * @reactive
          */
         store_: null,
         /**
          * @member {Function} totalText_=count=>`Total: ${count} records`
+         * @reactive
          */
         totalText_: count => `Total: ${count} rows`,
         /**

package/src/tooltip/Base.mjs

@@ -27,6 +27,7 @@ class Tooltip extends Container {
         /**
          * A reference to the target component which is supposed to show this tooltip on mouseenter
          * @member {String|null} componentId_=null
+         * @reactive
          */
         componentId_: null,
         /**
@@ -75,6 +76,7 @@ class Tooltip extends Container {
         /**
          * True prevents the tooltip from hiding while the mouse cursor is above it
          * @member {Boolean|null} stayOnHover_=true
+         * @reactive
          */
         stayOnHover_: true
     }

package/src/tree/List.mjs

@@ -27,6 +27,7 @@ class Tree extends Base {
         baseCls: ['neo-tree-list'],
         /**
          * @member {Boolean} disableSelection=false
+         * @reactive
          */
         disableSelection: false,
         /**
@@ -43,6 +44,7 @@ class Tree extends Base {
         showCollapseExpandAllIcons: true,
         /**
          * @member {Boolean} sortable_=false
+         * @reactive
          */
         sortable_: false,
         /**
@@ -55,6 +57,7 @@ class Tree extends Base {
         sortZoneConfig: null,
         /**
          * @member {String[]} wrapperCls=[]
+         * @reactive
          */
         wrapperCls: [],
         /**

package/src/util/HashHistory.mjs

@@ -4,6 +4,7 @@ import Observable from '../core/Observable.mjs';
 /**
  * @class Neo.util.HashHistory
  * @extends Neo.core.Base
+ * @mixes Neo.core.Observable
  * @singleton
  */
 class HashHistory extends Base {

package/src/util/KeyNavigation.mjs

@@ -20,6 +20,7 @@ class KeyNavigation extends Base {
         /**
          * Internally stores the component id inside _component
          * @member {Neo.component.Base|null} component_=null
+         * @reactive
          */
         component_: null,
         /**
@@ -29,6 +30,7 @@ class KeyNavigation extends Base {
         keyDownEventBubble: false,
         /**
          * @member {Array|null} keys_=null
+         * @reactive
          */
         keys_: null
     }

package/src/util/Matrix.mjs

@@ -15,6 +15,7 @@ class Matrix extends Base {
         /**
          * @member {Array|null} items_=null
          * @protected
+         * @reactive
          */
         items_: null
     }

package/src/util/VDom.mjs

@@ -261,7 +261,13 @@ class VDom extends Base {
      */
     static getVdom(vdom) {
         if (vdom.componentId) {
-            vdom = ComponentManager.get(vdom.componentId).vdom
+            const component = ComponentManager.get(vdom.componentId);
+
+            if (!component) {
+                throw new Error(`util.VDom.getVdom: Component not found for id: ${vdom.componentId}`)
+            }
+
+            vdom = component.vdom
         }
 
         return vdom

package/src/util/VNode.mjs

@@ -168,7 +168,13 @@ class VNode extends Base {
      */
     static getVnode(vnode) {
         if (vnode.componentId) {
-            vnode = ComponentManager.get(vnode.componentId).vnode
+            const component = ComponentManager.get(vnode.componentId);
+
+            if (!component) {
+                throw new Error(`util.VNode.getVnode: Component not found for id: ${vnode.componentId}`)
+            }
+
+            vnode = component.vnode
         }
 
         return vnode