neo.mjs 8.43.1 → 9.0.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.43.1'
+         * @member {String} version='9.0.0'
          */
-        version: '8.43.1'
+        version: '9.0.0'
     }
 
     /**

package/apps/colors/view/ViewportController.mjs

@@ -89,14 +89,12 @@ class ViewportController extends Controller {
                 {windowId}   = data,
                 url          = await Neo.Main.getByPath({path: 'document.URL', windowId}),
                 widgetName   = new URL(url).searchParams.get('name'),
-                widget       = me.getReference(widgetName),
-                widgetParent = widget.up();
+                widget       = me.getReference(widgetName);
 
             me.connectedApps.push(widgetName);
 
             me.getReference(`detach-${widgetName}-button`).disabled = true;
 
-            widgetParent.remove(widget, false);
             mainView.add(widget)
         }
     }
@@ -111,12 +109,10 @@ class ViewportController extends Controller {
             {appName, windowId} = data,
             url                 = await Neo.Main.getByPath({path: 'document.URL', windowId}),
             widgetName          = new URL(url).searchParams.get('name'),
-            widget              = me.getReference(widgetName),
-            widgetParent        = widget.up();
+            widget              = me.getReference(widgetName);
 
         // Closing a non-main app needs to move the widget back into its original position & re-enable the show button
         if (appName === 'ColorsWidget') {
-            widgetParent.remove(widget, false);
             me.component.insert(me.widgetIndexMap[widgetName], widget);
 
             me.getReference(`detach-${widgetName}-button`).disabled = false

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-04-15",
+      "datePublished": "2025-05-03",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/ViewportController.mjs

@@ -98,9 +98,9 @@ class ViewportController extends Controller {
             Neo.main.addon.LocalStorage.readLocalStorageItem({
                 key: 'mainContentLayout',
                 windowId
-            }).then(data => {
-                if (data.value !== 'card') {
-                    me.mainContentLayout = data.value
+            }).then(({value}) => {
+                if (value && value !== 'card') {
+                    me.mainContentLayout = value
                 }
             })
         }

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

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.43.1'
+                html  : 'v9.0.0'
             }]
         }],
         /**

package/apps/portal/view/learn/ContentComponent.mjs

@@ -321,15 +321,15 @@ class ContentComponent extends Component {
     /**
      * @param {Object} data
      */
-    onClick(data) {
-        let me = this,
-            record = me.record;
+    onClick({altKey, metaKey, shiftKey}) {
+        let me       = this,
+            {record} = me;
 
-        if (data.altKey && data.shiftKey && !data.metaKey) {
+        if (altKey && !metaKey && shiftKey) {
             me.fire('edit', {component: me, record})
         }
         // Command/windows shift click = refresh
-        else if (!data.altKey && data.shiftKey && data.metaKey) {
+        else if (!altKey && metaKey && shiftKey) {
             me.fire('refresh', {component: me, record})
         }
     }

package/apps/portal/view/learn/MainContainerController.mjs

@@ -50,29 +50,6 @@ class MainContainerController extends Controller {
         })
     }
 
-    /**
-     *
-     */
-    onConstructed() {
-        super.onConstructed();
-
-        let me = this;
-
-        Neo.Main.getByPath({path: 'location.search'})
-            .then(data => {
-                me.setState({
-                    deck: getSearchParams(data).deck || 'learnneo'
-                })
-            });
-
-        // todo: target file does not exist inside the repo
-        /*fetch('../../../../resources/data/deck/EditorConfig.json')
-            .then(response => response.json()
-                .then(data =>
-                    me.setState('editorConfig', data)
-                ))*/
-    }
-
     /**
      * @param {Object} data
      * @returns {Promise<void>}

package/apps/sharedcovid/view/MainContainerController.mjs

@@ -263,15 +263,13 @@ class MainContainerController extends ComponentController {
     onAppConnect(data) {
         let me   = this,
             name = data.appName,
-            parentView, style, toolbar, view;
-
-        console.log('onAppConnect', name);
+            style, toolbar, view;
 
         switch(name) {
             case 'SharedCovidChart':
-                view       = me.getReference('controls-panel');
-                parentView = view.parent;
-                parentView.storeReferences();
+                view = me.getReference('controls-panel');
+
+                view.parent.storeReferences();
 
                 toolbar = me.getReference('controls-panel-header');
                 style   = toolbar.style || {};
@@ -301,9 +299,6 @@ class MainContainerController extends ComponentController {
         if (view) {
             NeoArray.add(me.connectedApps, name);
 
-            parentView = parentView ? parentView : view.isTab ? view.up('tab-container') : Neo.getComponent(view.parentId);
-            parentView.remove(view, false);
-
             Neo.apps[name].on('render', () => {
                 me.timeout(100).then(() => {
                     me.getMainView(name).add(view)
@@ -323,8 +318,6 @@ class MainContainerController extends ComponentController {
             view       = parentView.items[0],
             index, style, toolbar;
 
-        console.log('onAppDisconnect', name);
-
         switch (name) {
             case 'SharedCovid':
                 Neo.Main.windowClose({
@@ -342,8 +335,6 @@ class MainContainerController extends ComponentController {
         if (view) {
             NeoArray.remove(me.connectedApps, name);
 
-            parentView.remove(view, false);
-
             switch (name) {
                 case 'SharedCovidChart':
                     toolbar = me.getReference('controls-panel-header');

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.43.1'
+         * @member {String} version='9.0.0'
          */
-        version: '8.43.1'
+        version: '9.0.0'
     }
 
     /**

package/examples/button/base/MainContainer.mjs

@@ -147,7 +147,7 @@ class MainContainer extends ConfigurationViewport {
             module        : ComboBox,
             forceSelection: true,
             labelText     : 'ui',
-            listeners     : {change: me.onConfigChange.bind(me, 'ui')},
+            listeners     : {change: me.onConfigRecordChange.bind(me, 'ui')},
             style         : {marginTop: '10px'},
             value         : me.exampleComponent.ui,
 
@@ -241,6 +241,14 @@ class MainContainer extends ConfigurationViewport {
             }]*/
         })
     }
+
+    /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onConfigRecordChange(config, opts) {
+        this.exampleComponent[config] = opts.value['id']
+    }
 }
 
 export default Neo.setupClass(MainContainer);

package/examples/component/multiWindowCoronaGallery/ViewportController.mjs

@@ -73,16 +73,13 @@ class ViewportController extends Controller {
             {appName} = data;
 
         if (appName === 'GalleryControls') {
-            let controlsPanel = me.getReference('controls-panel'),
-                {mainView}    = Neo.apps[appName];
+            let {mainView} = Neo.apps[appName];
 
             me.connectedApps.push(appName);
 
-            controlsPanel.parent.remove(controlsPanel, false);
-
             this.getReference('header-toolbar').hidden = true;
 
-            mainView.add(controlsPanel)
+            mainView.add(me.getReference('controls-panel'))
         }
     }
 
@@ -96,16 +93,12 @@ class ViewportController extends Controller {
             {appName, windowId} = data;
 
         if (appName === 'GalleryControls') {
-            let controlsPanel = me.getReference('controls-panel');
-
-            controlsPanel.parent.remove(controlsPanel, false);
-
             me.getReference('header-toolbar').hidden = false;
 
-            me.component.add(controlsPanel)
+            me.component.add(me.getReference('controls-panel'))
         }
         // Close popup windows when closing or reloading the main window
-        else if (appName === 'Neo.examples.component.multiWindowCoronaGallery') {console.log('close', me.connectedApps);
+        else if (appName === 'Neo.examples.component.multiWindowCoronaGallery') {
             Neo.Main.windowClose({names: me.connectedApps, windowId})
         }
     }

package/examples/component/multiWindowHelix/ViewportController.mjs

@@ -78,8 +78,6 @@ class ViewportController extends Controller {
 
             me.connectedApps.push(appName);
 
-            controlsPanel.parent.remove(controlsPanel, false);
-
             this.getReference('header-toolbar').hidden = true;
 
             mainView.add(controlsPanel)
@@ -96,13 +94,9 @@ class ViewportController extends Controller {
             {appName, windowId} = data;
 
         if (appName === 'HelixControls') {
-            let controlsPanel = me.getReference('controls-panel');
-
-            controlsPanel.parent.remove(controlsPanel, false);
-
             me.getReference('header-toolbar').hidden = false;
 
-            me.component.add(controlsPanel)
+            me.component.add(me.getReference('controls-panel'))
         }
         // Close popup windows when closing or reloading the main window
         else if (appName === 'Neo.examples.component.multiWindowHelix') {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.43.1",
+    "version": "9.0.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -56,16 +56,16 @@
         "envinfo": "^7.14.0",
         "fs-extra": "^11.3.0",
         "highlightjs-line-numbers.js": "^2.9.0",
-        "inquirer": "^12.5.2",
-        "marked": "^15.0.8",
+        "inquirer": "^12.6.0",
+        "marked": "^15.0.11",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.5.3",
-        "sass": "^1.86.3",
+        "sass": "^1.87.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
-        "webpack": "^5.99.5",
+        "webpack": "^5.99.7",
         "webpack-cli": "^6.0.1",
         "webpack-dev-server": "^5.2.1",
         "webpack-hook-plugin": "^1.0.7",

package/src/DefaultConfig.mjs

@@ -263,12 +263,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '8.43.1'
+     * @default '9.0.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.43.1'
+    version: '9.0.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/button/Base.mjs

@@ -162,6 +162,12 @@ class Button extends Component {
     get rippleWrapper() {
         return this.getVdomRoot().cn[3]
     }
+    /**
+     * @member {Object} textNode
+     */
+    get textNode() {
+        return this.getVdomRoot().cn[1]
+    }
 
     /**
      * @param {Object} config
@@ -177,6 +183,20 @@ class Button extends Component {
         })
     }
 
+    /**
+     * Workaround fix for: https://github.com/neomjs/neo/issues/6659
+     * Todo: inspect this further (we do not want to add fixed ids for all child nodes)
+     * Triggered after the id config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetId(value, oldValue) {
+        super.afterSetId(value, oldValue);
+
+        this.textNode.id = value + '__text'
+    }
+
     /**
      * Triggered after the badgePosition config got changed
      * @param {String} value
@@ -350,10 +370,10 @@ class Button extends Component {
      * @protected
      */
     afterSetText(value, oldValue) {
-        let me       = this,
-            isEmpty  = !value || value === '',
-            vdomRoot = me.getVdomRoot(),
-            textNode = vdomRoot.cn[1];
+        let me         = this,
+            isEmpty    = !value || value === '',
+            vdomRoot   = me.getVdomRoot(),
+            {textNode} = me;
 
         NeoArray.toggle(me._cls,      'no-text', isEmpty);
         NeoArray.toggle(vdomRoot.cls, 'no-text', isEmpty);
@@ -495,7 +515,8 @@ class Button extends Component {
     onClick(data) {
         let me = this;
 
-        me.callback(me.handler, me.handlerScope || me, [data]);
+        me.bindCallback(me.handler, 'handler', me.handlerScope || me);
+        me.handler?.(data);
 
         me.menu            && me.toggleMenu();
         me.route           && me.changeRoute(); // only relevant for editRoute=true
@@ -517,9 +538,9 @@ class Button extends Component {
 
         rippleEl.style = Object.assign(rippleEl.style || {}, {
             animation: 'none',
-            left     : `${data.clientX - buttonRect.left - radius}px`,
             height   : `${diameter}px`,
-            top      : `${data.clientY - buttonRect.top - radius}px`,
+            left     : `${data.clientX - buttonRect.left - radius}px`,
+            top      : `${data.clientY - buttonRect.top  - radius}px`,
             width    : `${diameter}px`
         });
 

package/src/component/Base.mjs

@@ -616,8 +616,6 @@ class Component extends Base {
         let me = this;
 
         if (value?.[0] || oldValue?.[0]) {
-            me.getController()?.parseDomListeners(me);
-
             DomEventManager.updateDomListeners(me, value, oldValue)
         }
     }
@@ -955,7 +953,7 @@ class Component extends Base {
      */
     afterSetStyle(value, oldValue) {
         if (!(!value && oldValue === undefined)) {
-            this.updateStyle(value, oldValue)
+            this.updateStyle()
         }
     }
 
@@ -1029,7 +1027,9 @@ class Component extends Base {
         let me  = this,
             cls = me.cls;
 
-        NeoArray.remove(cls, `neo-${me.ntype}-${oldValue}`);
+        if (oldValue) {
+            NeoArray.remove(cls, `neo-${me.ntype}-${oldValue}`)
+        }
 
         if (value && value !== '') {
             NeoArray.add(cls, `neo-${me.ntype}-${value}`)
@@ -1135,15 +1135,7 @@ class Component extends Base {
      */
     afterSetWrapperStyle(value, oldValue) {
         if (!(!value && oldValue === undefined)) {
-            let me   = this,
-                vdom = me.vdom;
-
-            if (!vdom.id) {
-                vdom.style = value;
-                me.update()
-            } else {
-                me.updateStyle(value, oldValue, vdom.id)
-            }
+            this.updateStyle()
         }
     }
 
@@ -1263,7 +1255,7 @@ class Component extends Base {
         oldValue?.destroy();
 
         if (value) {
-            return ClassSystemUtil.beforeSetInstance(value, null, {
+            return ClassSystemUtil.beforeSetInstance(value, 'Neo.controller.Component', {
                 component: this,
                 windowId : this.windowId
             })
@@ -1319,31 +1311,6 @@ class Component extends Base {
         return value
     }
 
-    /**
-     * Triggered before the stateProvider config gets changed.
-     * Creates a state.Provider instance if needed.
-     * @param {Object} value
-     * @param {Object} oldValue
-     * @returns {Neo.state.Provider}
-     * @protected
-     */
-    beforeSetStateProvider(value, oldValue) {
-        oldValue?.destroy();
-
-        if (value) {
-            let me            = this,
-                defaultValues = {component: me};
-
-            if (me.modelData) {
-                defaultValues.data = me.modelData
-            }
-
-            return ClassSystemUtil.beforeSetInstance(value, 'Neo.state.Provider', defaultValues)
-        }
-
-        return null
-    }
-
     /**
      * Triggered before the plugins config gets changed.
      * @param {Object[]} value
@@ -1378,6 +1345,31 @@ class Component extends Base {
         return (Neo.isNumber(oldValue) && oldValue > 0) ? (oldValue - 1) : 0
     }
 
+    /**
+     * Triggered before the stateProvider config gets changed.
+     * Creates a state.Provider instance if needed.
+     * @param {Object} value
+     * @param {Object} oldValue
+     * @returns {Neo.state.Provider}
+     * @protected
+     */
+    beforeSetStateProvider(value, oldValue) {
+        oldValue?.destroy();
+
+        if (value) {
+            let me            = this,
+                defaultValues = {component: me};
+
+            if (me.modelData) {
+                defaultValues.data = me.modelData
+            }
+
+            return ClassSystemUtil.beforeSetInstance(value, 'Neo.state.Provider', defaultValues)
+        }
+
+        return null
+    }
+
     /**
      * Triggered before the updateDepth config gets changed.
      * @param {Number} value
@@ -1943,7 +1935,6 @@ class Component extends Base {
 
         let me = this;
 
-        me.getController()   ?.parseConfig(me);
         me.getStateProvider()?.parseConfig(me)
     }
 
@@ -2603,55 +2594,21 @@ class Component extends Base {
     }
 
     /**
-     * Creates the style deltas for newValue & oldValue and applies them directly to the DOM.
-     * @param {Object|String} value
-     * @param {Object|String} oldValue
-     * @param {String} [id=this.id]
-     * @protected
+     *
      */
-    updateStyle(value, oldValue, id=this.id) {
-        let me    = this,
-            delta = Style.compareStyles(value, oldValue),
-            opts, vdom, vnode, vnodeStyle;
-
-        if (delta) {
-            vdom  = VDomUtil.find(me.vdom, id);
-            vnode = me.vnode && VNodeUtil.find(me.vnode, id);
-
-            if (!me.hasUnmountedVdomChanges) {
-                me.hasUnmountedVdomChanges = !me.mounted && me.hasBeenMounted
-            }
-
-            vdom.vdom.style = value; // keep the vdom in sync
-
-            if (me.silentVdomUpdate) {
-                me.needsVdomUpdate = true
-            } else if (me.mounted) {
-                vnodeStyle = vnode.vnode.style;
-
-                // keep the vnode in sync
-                // we need the iteration since vdom shortcuts (height, width,...) live within the vnode style
-                // using vnode.vnode.style = style would lose them.
-                Object.entries(delta).forEach(([key, value]) => {
-                    if (value === null) {
-                        delete vnode.vnode.style[key]
-                    } else {
-                        vnodeStyle[key] = value
-                    }
-                });
-
-                opts = {
-                    action: 'updateDom',
-                    deltas: [{id, style: delta}]
-                };
-
-                if (currentWorker.isSharedWorker) {
-                    opts.appName = me.appName
-                }
+    updateStyle() {
+        let me       = this,
+            {vdom}   = me,
+            vdomRoot = me.getVdomRoot();
 
-                currentWorker.sendMessage('main', opts)
-            }
+        if (vdom !== vdomRoot) {
+            vdom    .style = me.wrapperStyle;
+            vdomRoot.style = me.style
+        } else {
+            vdom.style = {...me.wrapperStyle, ...me.style}
         }
+
+        me.update()
     }
 
     /**

package/src/component/wrapper/AmChart.mjs

@@ -50,14 +50,15 @@ class AmChart extends Component {
          * @member {String} package='am4charts'
          */
         package: 'am4charts',
+        style: {
+            height: '100%'
+        },
         /**
          * @member {Object} _vdom
          */
         _vdom:
         {style: {position: 'relative'}, cn: [
-            {style: {position: 'absolute', height: '100%', width: '100%'}, cn: [
-                {style: {color:'red',height: '100%'}}
-            ]}
+            {style: {position: 'absolute', height: '100%', width: '100%'}, cn: [{}]}
         ]}
     }
 

package/src/container/Base.mjs

@@ -304,7 +304,7 @@ class Container extends Component {
         let me       = this,
             config   = {appName: me.appName, parentId: me.id, parentIndex: index, windowId: me.windowId},
             defaults = {...me.itemDefaults},
-            lazyLoadItem, module;
+            lazyLoadItem, module, parent;
 
         if (defaults) {
             if (item.module) {
@@ -328,11 +328,23 @@ class Container extends Component {
             }
 
             case 'NeoInstance': {
+                parent = item.parent;
+
+                if (parent && parent !== me) {
+                    parent.remove(item, false);
+                    delete item.vdom.removeDom;
+
+                    // Convenience logic, especially for moving components into different browser windows:
+                    // A component might rely on references & handler methods inside the previous controller realm
+                    if (!item.controller && !me.getController() && parent.getController()) {
+                        item.controller = {parent: parent.getController()}
+                    }
+                }
+
                 item.set(config);
 
-                // In case an item got created outside a VC or stateProvider based hierarchy, there might be bindings or string
+                // In case an item got created outside a stateProvider based hierarchy, there might be bindings or string
                 // based listeners which still need to get resolved.
-                item.getController()   ?.parseConfig(item);
                 item.getStateProvider()?.parseConfig(item);
                 break
             }