neo.mjs 10.0.0-beta.6 → 10.0.0

package/.github/RELEASE_NOTES/v10.0.0-beta.1.md

@@ -0,0 +1,20 @@
+## Neo.mjs v10.0.0-beta.1 Release Notes
+
+We are excited to announce the release of Neo.mjs v10.0.0-beta.1, bringing significant architectural improvements, enhanced developer experience, and various stability fixes.
+
+### Key Highlights:
+
+* **Asynchronous Initialization with `initAsync()`**: The `core.Base` class now includes a powerful `async initAsync()` method, allowing asynchronous code to be executed outside of the traditional constructor chain, leveraging the microtask queue. This is a crucial improvement for registering **Remote Method Access** earlier in the application lifecycle, effectively eliminating a previously observed 4ms delay caused by reliance on the macro task queue.
+* **Enhanced `main.addon.Base`**: The `main.addon.Base` class has received substantial enhancements to dynamically load files based on the new `initAsync` mechanism and properly respect the new `isReady_` configuration.
+* **Revamped Learning Content Structure**: The entire Learning Content has been reorganized and moved into a new `learn` top-level repository folder.
+* **Improved Learning Content Rendering**: The comprehensive Learning Content has been significantly enhanced to render more beautifully across different viewing environments. This was achieved by adopting standard Markdown fenced code blocks with info strings (e.g., ````javascript live-preview````). This ensures native syntax highlighting and excellent readability when viewed directly on the GitHub repository. Simultaneously, Neo.mjs's `ContentComponent.mjs` is now capable of dynamically processing these blocks for interactive features (such as `live-preview` and `neo-component` instantiation) and specialized styling (like `readonly` code blocks) within the Neo.mjs website. Specific SCSS adjustments in `ContentComponent.scss` further guarantee consistent and correct rendering of various code block types, including plain text/directory structures, by utilizing precise selectors like `:not(.hljs)` to prevent conflicts with Highlight.js and maintain visual integrity.
+* **Grid and Table Refactoring Polish**: The extensive refactoring of `grid.View` to `grid.Body` and `table.View` to `table.Body` has been thoroughly polished and is now considered fully stable.
+* **Delta Generation Fix**: A critical glitch within the v10 delta generation logic has been fixed, significantly reducing the amount of created deltas and ensuring that changes applied to the DOM are once again minimized to the bare essential.
+
+## Try it out here
+
+`dist/esm`:
+https://neomjs.com/dist/esm/apps/portal/
+
+`dist/production`:
+https://neomjs.com/dist/production/apps/portal/

package/.github/RELEASE_NOTES/v10.0.0-beta.2.md

@@ -0,0 +1,73 @@
+## Neo.mjs v10.0.0-beta.2 Release Notes
+
+This beta release brings significant enhancements across documentation, core framework capabilities, and **a major focus on improving component rendering performance and security**, alongside an enhanced developer experience.
+
+### Documentation & Learning Content
+
+We've made substantial updates to the `learn` section to provide clearer, more comprehensive guidance:
+
+*   **Enhanced Benefits Guides**:
+*   **Forms Engine**: Improved introduction, detailed benefits, and business value connections for state management, unmounted
+*   validation, and nested/lazy-loaded forms.
+*   **Multi-Window Applications**: Expanded use cases and clearer explanations of seamless data/state sharing.
+*   **Quick Application Development**: Detailed how property lifecycle hooks, elegant state management, and powerful debugging
+*   contribute to rapid development.
+*   **Effort vs. Complexity**: Refined explanation of Neo.mjs's linear scaling of effort with complexity, including the initial learning curve.
+*   **Speed**: Improved introduction highlighting web worker benefits for performance.
+*   **Features Summary**: Updated with direct links to detailed benefit guides for easier navigation.
+*   **New RPC Layer Guide**: A dedicated guide (`learn/benefits/RPCLayer.md`) explaining the RPC layer's role in seamless
+*   communication across Web Workers, Main Threads, and backend services, including practical examples.
+*   **Updated Glossary**: The `learn/Glossary.md` has been significantly expanded and polished
+*   **Instance Lifecycle Guide**: New comprehensive guide (`learn/guides/InstanceLifecycle.md`) detailing the synchronous and
+    asynchronous phases of component creation and destruction, including `constructor()` vs. `construct()` and `isReady` concepts.
+*   **Main Thread Addons Guide**: Enhanced with visualizations for remote method access and explanations of `interceptRemotes` for
+    automatic method caching.
+*   **Learning Path Refinements**: The `learn/tree.json` structure has been reordered to provide a more logical learning progression for
+    guides.
+*   **Code Block Improvements**: Various formatting and rendering fixes for code blocks across documentation.
+
+### Core Framework & Features
+
+*   **Remote Method Interception for Addons**: `addon.Base` now intercepts remote calls that arrive before an addon is fully
+    `isReady`, enabling more robust asynchronous initialization for addon methods.
+*   **New Class Hierarchy Manager**: Introduction of `manager.ClassHierarchy` (`#6876`), a new core manager that provides robust
+    class hierarchy information, including memoized `isA()` queries and integration into `Neo.Main` and other workers.
+
+### Rendering & Components
+
+*   **Enhanced VDom Security & Performance (DomApiRenderer Integration)**: A major internal refactoring has been completed to
+    replace `html` with `text` on VDom node properties across
+    hundreds of components (`app/*`, `Neo.*`, `component.*`, `form.field.FileUpload`, `Neo.calendar.view.*`, `Portal.view.*`). This
+    significant change leverages the `DomApiRenderer` introduced in v10 to:
+    *   **Improve Security**: By defaulting to `text` content, Neo.mjs now inherently prevents Cross-Site Scripting (XSS) vulnerabilities
+        by escaping HTML, making applications more secure by design.
+    *   **Boost Performance**: Direct text manipulation is generally more performant than parsing and injecting HTML, leading to faster
+        and more efficient DOM updates.
+    *   **`component.Base` `text_` Config**: Added a new `text_` config to `component.Base` for direct text content management.
+    *   **Grid/Table Rendering**: `grid.Body` and `table.Body` now support the `text` property in `applyRendererOutput()`, offering an
+        alternative to `html` for rendering.
+
+### Internal Improvements & Refactoring
+
+*   **`main.DeltaUpdates` Enhanced Initialization**: The `main.DeltaUpdates` module now utilizes `initAsync()`, a significant
+    improvement for its initialization process, alongside updated JSDoc comments.
+*   Minor code cleanups and method reordering in `vdom.Helper`.
+*   Minor fixes in `component.MagicMoveText` and `Portal.view.learn.ContentComponent`.
+
+ ---
+
+This release focuses heavily on improving the learning experience and solidifying core architectural patterns. We encourage you to explore the updated documentation and leverage the new features for more robust and performant applications.
+
+All changes in 1 commit: https://github.com/neomjs/neo/commit/ee8ccd1943a4fc198ec440dcb44146c9f1787193
+
+### Call To Action
+
+We're excited for you to dive into the enhanced learning experience!
+
+*   **Explore the New Guides**: Discover the power of Neo.mjs by exploring updated sections like
+    * [Main Thread Addons Guide](
+      https://neomjs.com/dist/esm/apps/portal/#/learn/guides.MainThreadAddons)
+    * [Forms Engine benefits](https://neomjs.com/dist/esm/apps/portal/#/learn/benefits.FormsEngine)
+    * [Glossary](https://neomjs.com/dist/esm/apps/portal/#/learn/Glossary).
+*   **Share Your Feedback**: Your input is invaluable! Please let us know what you think, report any issues, or suggest further
+    improvements via [GitHub Issues](https://github.com/neomjs/neo/issues) or our [Slack Channel](https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA).

package/.github/RELEASE_NOTES/v10.0.0-beta.3.md

@@ -0,0 +1,39 @@
+## Neo.mjs v10.0.0-beta.3 Release Notes
+
+This beta release significantly expands our learning resources, introducing **seven new comprehensive guides** designed to accelerate developer onboarding and mastery of the neo.mjs framework. We've also invested in enhancing the overall styling and user experience of the learning section.
+
+### Documentation & Learning Content
+
+We are excited to announce a major update to the `learn` section, with seven new guides to provide in-depth knowledge on key neo.mjs concepts.
+
+**For the optimal learning experience, including live code previews and interactive examples, we strongly recommend viewing these guides on our website: [neomjs.com#/learn](https://neomjs.com/dist/production/apps/portal/index.html#/learn)**
+
+*   **New In-Depth Guides**:
+    *   **Collections**: A comprehensive guide to understanding and utilizing neo.mjs collections for efficient data management.
+    *   **Custom Components**: Learn how to create your own custom components to build modular and reusable UI elements.
+    *   **Extending neo.mjs Classes**: A guide to extending the framework's core classes to add custom functionality and behavior.
+    *   **Forms**: Learn how to build powerful and flexible forms with the neo.mjs forms engine.
+    *   **Layouts**: A guide to using layouts to create responsive and adaptive user interfaces.
+    *   **Records**: An in-depth look at working with data records, a fundamental aspect of the neo.mjs data package.
+    *   **ComboBox Field**: A dedicated guide to the versatile ComboBox field, covering its configuration and use cases.
+*   **Enhanced Learning Experience**:
+    *   The styling of the learning section has been improved for displaying code blocks inside headlines and code blocks inside lists.
+---
+
+This release is focused on empowering developers with the knowledge and resources needed to build exceptional applications with neo.mjs. We encourage you to explore the new guides and see how they can help you in your projects.
+
+All changes in 1 commit: https://github.com/neomjs/neo/commit/c68a0c9fab1d5578bbd5120ba97bbd7707093b7c
+
+### Call To Action
+
+We're excited for you to dive into the enhanced learning experience!
+
+*   **Explore the New Guides**: Discover the power of Neo.mjs by exploring the new guides on our website:
+    *   [Collections](https://neomjs.com/dist/esm/apps/portal/#/learn/guides.Collections)
+    *   [Custom Components](https://neomjs.com/dist/esm/apps/portal/#/learn/guides.CustomComponents)
+    *   [Extending neo.mjs Classes](https://neomjs.com/dist/esm/apps/portal/#/learn/guides.ExtendingNeoClasses)
+    *   [Forms](https://neomjs.com/dist/esm/apps/portal/#/learn/guides.Forms)
+    *   [Layouts](https://neomjs.com/dist/esm/apps/portal/#/learn/guides.Layouts)
+    *   [Records](https://neomjs.com/dist/esm/apps/portal/#/learn/guides.Records)
+    *   [ComboBox Field](https://neomjs.com/dist/esm/apps/portal/#/learn/guides.form_fields.ComboBox)
+*   **Share Your Feedback**: Your input is invaluable! Please let us know what you think, report any issues, or suggest further improvements via [GitHub Issues](https://github.com/neomjs/neo/issues) or our [Slack Channel](https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA).

package/.github/RELEASE_NOTES/v10.0.0.md

@@ -0,0 +1,52 @@
+### Neo.mjs v10.0.0 Stable Release Notes
+
+This release brings significant enhancements and refactorings, improving performance, reactivity, and the overall developer experience.
+
+#### Core Framework Improvements
+
+*   **Reactive Core Refactoring (`core.Observable`):**
+    *   Architectural refactoring of `core.Observable` to a fully reactive mixin (`#7090`).
+    *   **Modernized `core.Observable`:** Refactored `core.Observable` to align with the reactive config system. This involved converting the `listeners` property to a reactive `listeners_` config, eliminating manual initialization, and establishing true encapsulation using a module-scoped `Symbol` (`eventMapSymbol`) for internal event registry management. A bug in `removeListener` related to incorrect state access was also fixed. (`#7090`)
+    *   Listeners are now managed as a reactive config within `core.Observable` (`#7089`).
+*   **Effect Management System:**
+    *   **Foundational Refactoring of Effect Management:** The core reactivity system has been refactored and unified under a single `Neo.core.EffectManager` (`#7085`). This introduces a clear distinction between:
+        *   **Execution Batching (`pause()` / `resume()`):** Replaced the old `isPaused` flag with a numeric `pauseCounter` for robust, nested batching of UI updates. Effects are queued and executed only when the counter is zero.
+        *   **Dependency Tracking Suppression (`pauseTracking()` / `resumeTracking()`):** A new mechanism (`isTrackingPaused` flag) to temporarily stop active effects from collecting new dependencies, solving self-dependency issues.
+    *   The `EffectBatchManager` singleton has been completely removed, and its functionality absorbed by the enhanced `EffectManager`. This results in a more predictable, robust, and resilient reactive system.
+*   **State Management:**
+    *   **State Provider Refactoring & Deep Merging:**
+        *   Refactored `state.Provider`'s `internalSetData()` method to support intuitive deep-merging of nested objects, allowing dynamic creation of new, fully reactive data structures at runtime. This resolves inconsistent behavior and aligns with expected merge operations. (`#7099`)
+        *   **Enhanced Reactivity & Atomic Updates:** `state.Provider` now features "Reactivity Bubbling," where changes to leaf properties recursively update parent objects, correctly triggering effects on intermediate data objects. Public `setData()` and `setDataAtSameLevel()` methods are now wrapped with `Neo.batch()` (leveraging the new `EffectManager`'s batching capabilities) to ensure all reactive updates are collected, de-duplicated, and executed atomically, preventing race conditions and improving performance. A new test suite (`ProviderNestedDataConfigs.mjs`) validates this functionality.
+        *   Moved all state provider related logic (configs like `bind`, `modelData`, `stateProvider_`, `data_`, `parentComponent_`, and methods like `getStateProvider()`, `getState()`, `setState()`, `beforeGetData()`, `getConfigInstanceByNtype()`, along with lifecycle logic and two-way binding logic) from `src/component/Base.mjs` to `src/component/Abstract.mjs`. This makes state providers available to both classic class-based components and modern functional components. (`#7100`)
+*   **Component Base Classes:**
+    *   **Common Abstract Base Class:** Introduced `Neo.component.Abstract` as a new common base class for both `Neo.component.Base` (classic) and `Neo.functional.component.Base` (functional) components. This refactoring centralizes shared logic (e.g., `set()`, `destroy()`, `mountedPromise`, core configs, `DomEvents`, `Observable`, `VdomLifecycle` mixins), improving code reusability, enhancing consistency, and simplifying maintenance by removing duplicated code. (`#7089`)
+    *   Removed redundant `createBindings()` calls from `onConstructed` (`#7101`).
+
+#### Functional Components
+
+*   **VDOM Reconciliation:** Enhanced Functional Component VDOM Reconciliation (`#7086`).
+*   **Lifecycle Hook:** Introduced a new `beforeUpdate()` lifecycle method to `Neo.functional.component.Base` (`#7084`). This hook executes after all state changes from a reactive `Effect` have been processed and just before `updateVdom()`. It provides a predictable entry point for pre-render logic and allows conditionally canceling a VDOM update by returning `false`.
+*   **Functional Button Component:** Introduced a new `Neo.functional.button.Base` component (`#7087`). This component serves as a key UI element built using the functional component paradigm, demonstrating integration with the reactive VDOM system and leveraging automatic VDOM node ID generation for efficient diffing. A dedicated test suite and demo application were created.
+*   `functional.button.Base`: `beforeSetBadgePosition()`, `beforeSetIconPosition()` now use constructor access for future class extensions.
+
+#### VDOM & Rendering
+
+*   `util.vdom.TreeBuilder`: Improvements to `buildTree()`: Refactored `getVdomTree` and `getVnodeTree` into a single, DRY method (`#7098`).
+*   `util.VDom`: `syncVdomIds()` enhanced for future-proofing and improved filtering.
+*   `manager.VDomUpdate`: Significantly enhanced JSDoc comments and method order/cleanup.
+
+#### Other Enhancements & Fixes
+
+*   **Dependencies:** Updated FontAwesome to v7.
+*   **Examples Website:** Fixed flakiness on Safari (`#7102`).
+*   **Tests:** All 770 unit tests now pass successfully, including a significant number of new tests added since beta.6.
+*   `form.field.Text`: `onInputValueChange()` intent made clearer.
+*   `Portal.view.ViewportController`: Cube-layout timing adjustments.
+*   `core.core.EffectManager`: Optimized `Neo.batch` usage.
+*   Removed obsolete `onNeoConfigChange()` calls from tests.
+*   Updated `test/siesta/tests/vdom/layout/Cube.mjs` to match current `VdomHelper.create()` signature.
+
+#### Documentation Updates
+
+*   The `learn/guides/datahandling/StateProviders.md` guide has been updated to accurately describe the new deep-merge behavior of state providers.
+*   Code examples in the `learn/blog/v10-deep-dive-state-provider.md` blog post have been updated to demonstrate the intuitive API usage.

package/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='10.0.0-beta.6'
+         * @member {String} version='10.0.0'
          */
-        version: '10.0.0-beta.6'
+        version: '10.0.0'
     }
 
     /**

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-07-18",
+      "datePublished": "2025-07-24",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/ViewportController.mjs

@@ -319,11 +319,10 @@ class ViewportController extends Controller {
 
                 // enable "fast clicking" on main nav items => do not replace a cube layout with a new instance of cube
                 if (container.layout.ntype !== 'layout-cube') {
-                    container.setSilent({
+                    await container.set({
                         layout: {ntype: 'cube', activeIndex, fitContainer: true, hideInactiveCardsOnDestroy: true}
                     });
-                    await container.promiseUpdate();
-                    await me.timeout(50);
+                    await me.timeout(20)
                 }
 
                 container.layout.activeIndex = index;
@@ -331,7 +330,10 @@ class ViewportController extends Controller {
                 await me.timeout(1100);
 
                 if (transitionId === me.#transitionId) {
-                    container.layout = {ntype: 'card', activeIndex: index}
+                    await container.set({
+                        layout: {ntype: 'card', activeIndex: index}
+                    });
+                    await me.timeout(20)
                 }
             }
 

package/apps/portal/view/examples/List.mjs

@@ -103,16 +103,18 @@ class List extends BaseList {
 
     /**
      * @param {Object} record
+     * @param {Number} index
      */
-    createItemContent(record) {
-        let me = this;
+    createItemContent(record, index) {
+        let me         = this,
+            imageStyle = index < 4 ? me.getBackgroundImageStyle(record) : null;
 
         return [
             {cls: ['content', 'neo-relative'], data: {recordId: record.id}, removeDom: me.isHiddenItem(record), cn: [
                 {cls: ['neo-multi-window'], data: {neoTooltip: 'Multi Window Demo'}, removeDom: !record.sharedWorkers, cn: [
                     {cls: ['far', 'fa-window-restore']}
                 ]},
-                {cls: ['neo-full-size', 'preview-image'], flag: `image-${record.id}`},
+                {cls: ['neo-full-size', 'preview-image'], flag: `image-${record.id}`, style: imageStyle},
                 {cls: ['neo-absolute', 'neo-item-bottom-position'], cn: [
                     {...me.createLink(record)},
                     {cls: ['neo-top-20'], cn: [
@@ -177,6 +179,22 @@ class List extends BaseList {
         return vdom
     }
 
+    /**
+     * @param record
+     * @returns {{backgroundImage: string}}
+     */
+    getBackgroundImageStyle(record) {
+        return {
+            backgroundImage: [
+                `url('${this.imageBasePath}/${record.image}'),`,
+                'linear-gradient(',
+                'var(--portal-examples-list-gradient-start),',
+                'var(--portal-examples-list-gradient-end)',
+                ')'
+            ].join('')
+        }
+    }
+
     /**
      * @returns {Object}
      */
@@ -209,12 +227,12 @@ class List extends BaseList {
      * @param {Object} data
      */
     onIntersect(data) {
-        let me                     = this,
-            {imageBasePath, store} = me,
-            record                 = store.get(parseInt(data.data.recordId)),
-            i                      = store.indexOf(record),
-            len                    = Math.min(i + me.preloadImages, store.getCount()),
-            needsUpdate            = false,
+        let me          = this,
+            {store}     = me,
+            record      = store.get(parseInt(data.data.recordId)),
+            i           = store.indexOf(record),
+            len         = Math.min(i + me.preloadImages, store.getCount()),
+            needsUpdate = false,
             node;
 
         for (; i < len; i++) {
@@ -222,16 +240,7 @@ class List extends BaseList {
 
             if (!node.style) {
                 needsUpdate = true;
-
-                node.style = {
-                    backgroundImage: [
-                        `url('${imageBasePath}/${record.image}'),`,
-                        'linear-gradient(',
-                            'var(--portal-examples-list-gradient-start),',
-                            'var(--portal-examples-list-gradient-end)',
-                        ')'
-                    ].join('')
-                }
+                node.style = me.getBackgroundImageStyle(record)
             }
         }
 

package/apps/portal/view/home/FooterContainer.mjs

@@ -108,7 +108,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                text  : 'v10.0.0-beta.6'
+                text  : 'v10.0.0'
             }]
         }],
         /**

package/examples/functional/button/base/MainContainer.mjs

@@ -0,0 +1,207 @@
+import CheckBox              from '../../../../src/form/field/CheckBox.mjs';
+import ComboBox              from '../../../../src/form/field/ComboBox.mjs';
+import ConfigurationViewport from '../../../ConfigurationViewport.mjs';
+import FunctionalButton      from '../../../../src/functional/button/Base.mjs';
+import NumberField           from '../../../../src/form/field/Number.mjs';
+import Radio                 from '../../../../src/form/field/Radio.mjs';
+import TextField             from '../../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.functional.button.base.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.functional.button.base.MainContainer',
+        configItemLabelWidth: 160,
+        configItemWidth     : 280,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            module        : Radio,
+            checked       : me.exampleComponent.badgePosition === 'bottom-left',
+            hideValueLabel: false,
+            labelText     : 'badgePosition',
+            listeners     : {change: me.onRadioChange.bind(me, 'badgePosition', 'bottom-left')},
+            name          : 'badgePosition',
+            valueLabelText: 'bottom-left'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.badgePosition === 'bottom-right',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'badgePosition', 'bottom-right')},
+            name          : 'badgePosition',
+            valueLabelText: 'bottom-right'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.badgePosition === 'top-left',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'badgePosition', 'top-left')},
+            name          : 'badgePosition',
+            valueLabelText: 'top-left'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.badgePosition === 'top-right',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'badgePosition', 'top-right')},
+            name          : 'badgePosition',
+            valueLabelText: 'top-right'
+        }, {
+            module    :  TextField,
+            labelText : 'badgeText',
+            listeners : {change: me.onConfigChange.bind(me, 'badgeText')},
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.badgeText
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.disabled,
+            labelText: 'disabled',
+            listeners: {change: me.onConfigChange.bind(me, 'disabled')},
+            style    : {marginTop: '10px'}
+        }, {
+            module    :  NumberField,
+            clearable : true,
+            labelText : 'height',
+            listeners : {change: me.onConfigChange.bind(me, 'height')},
+            maxValue  : 300,
+            minValue  : 30,
+            stepSize  : 5,
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.height
+        }, {
+            module    :  TextField, // todo: selectField with options
+            labelText : 'iconCls',
+            listeners : {change: me.onConfigChange.bind(me, 'iconCls')},
+            value     : me.exampleComponent.iconCls
+        }, {
+            module    :  TextField, // todo: colorPickerField
+            clearable : true,
+            labelText : 'iconColor',
+            listeners : {change: me.onConfigChange.bind(me, 'iconColor')},
+            value     : me.exampleComponent.iconColor
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.iconPosition === 'top',
+            hideValueLabel: false,
+            labelText     : 'iconPosition',
+            listeners     : {change: me.onRadioChange.bind(me, 'iconPosition', 'top')},
+            name          : 'iconPosition',
+            style         : {marginTop: '10px'},
+            valueLabelText: 'top'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.iconPosition === 'right',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'iconPosition', 'right')},
+            name          : 'iconPosition',
+            valueLabelText: 'right'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.iconPosition === 'bottom',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'iconPosition', 'bottom')},
+            name          : 'iconPosition',
+            valueLabelText: 'bottom'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.iconPosition === 'left',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'iconPosition', 'left')},
+            name          : 'iconPosition',
+            valueLabelText: 'left'
+        }, {
+            module    :  NumberField,
+            clearable : true,
+            labelText : 'rippleEffectDuration',
+            listeners : {change: me.onConfigChange.bind(me, 'rippleEffectDuration')},
+            maxValue  : 5000,
+            minValue  : 100,
+            stepSize  : 100,
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.rippleEffectDuration
+        }, {
+            module    :  TextField,
+            clearable : true,
+            labelText : 'text',
+            listeners : {change: me.onConfigChange.bind(me, 'text')},
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.text
+        }, {
+            module    :  TextField,
+            clearable : true,
+            labelText : 'tooltip',
+            listeners : {change: me.onConfigChange.bind(me, 'tooltip')},
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.tooltip
+        }, {
+            module        : ComboBox,
+            forceSelection: true,
+            labelText     : 'ui',
+            listeners     : {change: me.onConfigRecordChange.bind(me, 'ui')},
+            style         : {marginTop: '10px'},
+            value         : me.exampleComponent.ui,
+
+            store: {
+                data: [
+                    {id: 'primary',   name: 'primary'},
+                    {id: 'secondary', name: 'secondary'},
+                    {id: 'tertiary',  name: 'tertiary'}
+                ]
+            }
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.useRippleEffect,
+            labelText: 'useRippleEffect',
+            listeners: {change: me.onConfigChange.bind(me, 'useRippleEffect')},
+            style    : {marginTop: '10px'}
+        }, {
+            module    :  NumberField,
+            clearable : true,
+            labelText : 'width',
+            listeners : {change: me.onConfigChange.bind(me, 'width')},
+            maxValue  : 300,
+            minValue  : 100,
+            stepSize  : 5,
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.width
+        }];
+    }
+
+    /**
+     * @returns {Neo.component.Base}
+     */
+    createExampleComponent() {
+        return Neo.create({
+            module   : FunctionalButton,
+            badgeText: 'Badge',
+            flex     : 'none',
+            handler  : data => console.log('button click =>', data.component.id),
+            height   : 50,
+            iconCls  : 'fa fa-home',
+            style    : {marginBottom: '1500px', marginTop: '500px'},
+            text     : 'Hello World',
+            ui       : 'primary',
+            width    : 150
+        })
+    }
+
+    /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onConfigRecordChange(config, opts) {
+        this.exampleComponent[config] = opts.value['id']
+    }
+}
+
+export default Neo.setupClass(MainContainer);

package/examples/functional/button/base/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.functional.button.base'
+});

package/examples/functional/button/base/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Functional Button</title>
+</head>
+<body>
+    <script src="../../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/functional/button/base/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/functional/button/base/app.mjs",
+    "basePath"   : "../../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}