neo.mjs 7.0.2 → 7.0.3

package/README.md

@@ -11,12 +11,15 @@
   <a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-green.svg?logo=GitHub&logoColor=white" alt="PRs Welcome"></a>
 </p>
 
-# Harness the Power of Multi-Threading for Ultra-Fast Frontends
+# Modern Enterprise-Ready JavaScript Framework
 
 ## Content
 1. <a href="#introduction">Introduction</a>
 2. <a href="#slack-channel">Slack Channel for questions & feedback</a>
 3. <a href="#architectures">Scalable frontend architectures</a>
+4. <a href="#getting-started">Getting Started</a>
+5. <a href="#cli">Command-Line Interface</a>
+6. <a href="#blog">Blog</a>
 
 </br></br>
 <h2 id="introduction">1. Introduction</h2>
@@ -56,17 +59,36 @@ Potential Use-Cases:
 Join our community:</br>
 <a href="https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA"><img src="https://img.shields.io/badge/Slack-neo.mjs-brightgreen.svg?logo=slack&style=for-the-badge" alt="Join the Slack channel"></a>
 
+</br></br>
+<h2 id="getting-started">4. Getting Started</h2>
+Take a look at the <a href="./.github/GETTING_STARTED.md">Getting Started Guide</a>
+</br></br>
+There are 2 options:
 
+1. In case you want to create a Neo.mjs App (workspace), use
+   > npx neo-app@latest
+ 
+2. In case you want to work on the Framework and your App in parallel, you can fork this repository and use
+   > npm run create-app
+
+   inside of it.
 
-</br></br>
 
-[Spoiler] We are in the middle of wrapping up the new Framework Website,
-which will include the first version of a self-study based Learning Section.
+* You can easily move your app from the framework to a workspace or vice versa.
+* The CLI inside the framework and inside a workspace works the same.
 
-We are aiming to release it on August 1st, 2024.
+Make sure to take a look into the <a href="https://neomjs.com/dist/production/apps/portal/#/learn/Setup">Learning Section</a>
 
-The current development state is already inside the dev branch.
+The most advanced tutorial to help you with getting up to speed is this one:</br>
+<a href="https://neomjs.com/dist/production/apps/portal/#/learn/Earthquakes">Earthquakes Tutorial</a>
 
+</br></br>
+<h2 id="cli">5. Command-Line Interface</h2>
+You can find an in-depth description here: <a href="./buildScripts/README.md">Neo.mjs CLI</a>
+
+</br></br>
+<h2 id="blog">6. Blog</h2>
+All Blog Posts are listed here: <a href="https://neomjs.com/dist/production/apps/portal/#/blog">Neo.mjs Blog</a>
 
 </br></br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>

package/apps/ServiceWorker.mjs

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

package/apps/portal/Overwrites.mjs

@@ -4,16 +4,6 @@ Neo.overwrites = {
             Base: {
                 editRoute: false
             }
-        },
-        form: {
-            field: {
-                Base: {
-                    delayable: {
-                        fireChangeEvent    : null,
-                        fireUserChangeEvent: null
-                    }
-                }
-            }
         }
     }
 }

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-08-18",
+      "datePublished": "2024-08-27",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

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

@@ -37,6 +37,7 @@ class FeatureSection extends Container {
          */
         headline_: null,
         /**
+         * Can either contain a route or a URL
          * @member {String|null} learnMoreRoute_=null
          */
         learnMoreRoute_: null,
@@ -136,7 +137,8 @@ class FeatureSection extends Container {
      * @protected
      */
     afterSetLearnMoreRoute(value, oldValue) {
-        this.getItem('learn-more-button').route = value
+        let targetConfig = value.startsWith('http') ? 'url' : 'route';
+        this.getItem('learn-more-button')[targetConfig] = value
     }
 
     /**

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

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v7.0.2'
+                html  : 'v7.0.3'
             }]
         }],
         /**

package/apps/portal/view/home/parts/Colors.mjs

@@ -20,9 +20,9 @@ class Colors extends FeatureSection {
          */
         headline: 'Amazing Potential',
         /**
-         * @member {String} learnMoreRoute='#/learn/WhyNeo-Speed'
+         * @member {String} learnMoreRoute='https://itnext.io/sharing-real-time-websocket-data-across-multiple-browser-windows-4e0538dd7563?source=friends_link&sk=9efb3e4f38c82fb3e04899c61bb5fcb8'
          */
-        learnMoreRoute: '#/learn/WhyNeo-Speed',
+        learnMoreRoute: 'https://itnext.io/sharing-real-time-websocket-data-across-multiple-browser-windows-4e0538dd7563?source=friends_link&sk=9efb3e4f38c82fb3e04899c61bb5fcb8',
         /**
          * @member {String} livePreviewCode
          */

package/buildScripts/README.md

@@ -11,8 +11,8 @@ You can run each script inside your terminal. E.g.:
 
 Make sure to call them on the top-level folder (the one containing the package.json).
 
-In case you want to pass program options, please use the node based calls instead. E.g.:
-> node ./buildScripts/buildAll.js -h
+In case you want to pass program options, use -- before adding options. E.g.:
+> npm run build-all -- -h
 
 All programs which are using options also have the visual inquirer interface in place.</br>
 So it is up to you if you prefer adding the options manually (e.g. for adding them into your own CI),</br>
@@ -25,15 +25,14 @@ where the framework is included as a node module, but needs to deploy to a top-l
 ## Content
 1. <a href="#build-all">build-all</a>
 2. <a href="#build-all-questions">build-all-questions</a>
-3. <a href="#build-my-apps">build-my-apps</a>
-4. <a href="#build-themes">build-themes</a>
-5. <a href="#build-threads">build-threads</a>
-6. <a href="#create-app">create-app</a>
-7. <a href="#generate-docs-json">generate-docs-json</a>
-8. <a href="#server-start">server-start</a>
+3. <a href="#build-themes">build-themes</a>
+4. <a href="#build-threads">build-threads</a>
+5. <a href="#create-app">create-app</a>
+6. <a href="#generate-docs-json">generate-docs-json</a>
+7. <a href="#server-start">server-start</a>
 
 ## build-all
-> node ./buildScripts/buildAll.js -f -n
+> npm run build-all
 
 It is strongly recommended to run this program after each git pull on this repo.
 
@@ -70,7 +69,7 @@ or dist/production.
 Source code: <a href="./buildAll.js">build-all</a>
 
 ## build-all-questions
-> node ./buildScripts/buildAll.js -f
+> npm run build-all-questions
 
 This entry point is running the build-all program without passing options,
 so we can select them using the inquirer interface.
@@ -130,64 +129,8 @@ neo.mjs buildAll
 
 Source code: <a href="./buildAll.js">build-all</a>
 
-## build-my-apps
-> node ./buildScripts/webpack/buildMyApps.js -f
-
-```bash
-Options:
-  -V, --version       output the version number
-  -i, --info          print environment debug info
-  -a, --apps <value>  "all", "Covid", "RealWorld", "RealWorld2", "SharedCovid", "SharedCovidChart", "SharedCovidGallery",
-                      "SharedCovidHelix", "SharedCovidMap", "SharedDialog", "SharedDialog2", "Website"
-  -e, --env <value>   "all", "dev", "prod"
-  -f, --framework    
-  -n, --noquestions  
-  -h, --help          display help for command
-```
-
-build-my-apps is very similar to build-threads => App.
-
-In both cases we are parsing <a href="../src/worker/App.mjs">worker/App</a>,
-which will dynamically import all Apps inside the src/app folder and the Docs App and create split chunks
-for all combinations. This enables you to add multiple Apps on one Page with close to zero overhead
-in dist/development & dist/production.
-
-The only difference to build-threads => App is that you can limit the generation of the App related index.html files,
-so it is a little faster.
-
-Let us take a look at the different inquirer steps:
-1. Pick the -e (env) option:
-```bash
-neo % npm run build-my-apps
-
-> neo.mjs@1.4.14 build-my-apps /Users/Shared/github/neomjs/neo
-> node ./buildScripts/webpack/buildMyApps.js -f
-
-neo.mjs buildMyApps
-? Please choose the environment: (Use arrow keys)
-❯ all 
-  dev 
-  prod 
-```
-2. Pick the -a (apps) option:
-```bash
-neo.mjs buildMyApps
-? Please choose the environment: all
-? Please choose which apps you want to build: (Press <space> to select, <a> to toggle all, <i> to invert selection)
-❯◯ Covid
- ◯ RealWorld
- ◯ RealWorld2
- ◯ SharedCovid
- ◯ SharedCovidChart
- ◯ SharedCovidGallery
- ◯ SharedCovidHelix
-(Move up and down to reveal more choices)
-```
-
-Source code: <a href="./webpack/buildMyApps.js">build-my-apps</a>
-
 ## build-themes
-> node ./buildScripts/webpack/buildThemes.js -f
+> npm run build-themes
 
 ```bash
 Options:
@@ -238,7 +181,7 @@ neo.mjs buildThemes
 Source code: <a href="./webpack/buildThemes.js">build-themes</a>
 
 ## build-threads
-> node ./buildScripts/webpack/buildThreads.js -f
+> npm run build-threads
 
 Since the default neo.mjs setup is using 3 workers, we have the following 4 threads to build:</br>
 "app", "data", "main", "vdom"
@@ -286,7 +229,7 @@ neo.mjs buildThreads
 Source code: <a href="./webpack/buildThreads.js">build-threads</a>
 
 ## create-app
-> node ./buildScripts/createApp.js
+> npm run create-app
 
 Again: In case you want to create an App (workspace) based on neo.mjs, you don't need to clone this repository.</br>
 Please take a look at the <a href="https://github.com/neomjs/create-app">create-app repository</a> (npx neo-app).
@@ -294,14 +237,14 @@ Please take a look at the <a href="https://github.com/neomjs/create-app">create-
 If you want to create a new Demo App inside the framework repo,
 using the create-app program makes sense, since you can work on the app & framework code in parallel.
 
-Using the default options, this will generate the following 3 files:
+Using the default options, this will generate the following 4 files:
 ```
 neo
  | - apps
  |    | - myapp
  |    |    | - app.mjs
- |    |    | - config.json
  |    |    | - index.html
+ |    |    | - neo-config.json
  |    |    | - MainContainer.mjs
 ```
 
@@ -377,14 +320,15 @@ neo.mjs create-app
 No worries, you can easily change the options after you created your App shell.
 
 E.g. in case you want to add the MapboxGL main thread addon later on,
-you can add it inside your index.html file:
-```js
-Object.assign(Neo.config, {
-    appPath         : 'apps/myapp/app.mjs',
-    basePath        : '../../',
-    environment     : 'development',
-    mainThreadAddons: ['MapboxGL', 'Stylesheet']
-});
+you can add it inside your neo-config.json file:
+```json
+{
+    "appPath"         : "apps/myapp/app.mjs",
+    "basePath"        : "../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["DragDrop", "MapboxGL", "Navigator", "Stylesheet"]
+}
 ```
 
 Regarding the -u (SharedWorkers) option:</br>
@@ -399,7 +343,7 @@ Using SharedWorkers, you need to open a separate Window to inspect them:</br>
 Source code: <a href="./buildScripts/createApp.js">create-app</a>
 
 ## generate-docs-json
-> node ./buildScripts/docs/jsdocx.js
+> npm run generate-docs-json
 
 neo.mjs is using jsdoc
 > https://github.com/jsdoc/jsdoc
@@ -414,7 +358,7 @@ There are several enhancements around it to polish it for our class system impro
 Source code: <a href="./docs/jsdocx.js">generate-docs-json</a>
 
 ## server-start
-> webpack serve -c ./buildScripts/webpack/webpack.server.config.js --open
+> npm run server-start
 
 To open JS modules locally inside your Browser you need a web-server, since importing files is not possible
 otherwise for security reasons. You could enable this on an OS level, but this is definitely not recommended.

package/examples/ServiceWorker.mjs

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

package/examples/table/container/MainContainer.mjs

@@ -148,6 +148,7 @@ class MainContainer extends ConfigurationViewport {
                                 ntype   : 'button',
                                 appName : this.appName,
                                 text    : '\u22ee',
+                                windowId: this.windowId,
                                 menu    : {
                                     items : [{
                                         text : 'Menu option 1'

package/examples/table/container/MainStore.mjs

@@ -45,7 +45,8 @@ class MainStore extends Store {
             colspan  : {firstname: 3},
             country  : 'Germany',
             firstname: 'Colspan 3',
-            githubId : 'random'
+            githubId : 'random',
+            lastname : ''
         }]
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.0.2",
+    "version": "7.0.3",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -53,15 +53,15 @@
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
         "inquirer": "^10.1.8",
-        "marked": "^14.0.0",
-        "monaco-editor": "^0.50.0",
+        "marked": "^14.1.0",
+        "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.41",
         "sass": "^1.77.8",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
-        "webpack": "^5.93.0",
+        "webpack": "^5.94.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^5.0.4",
         "webpack-hook-plugin": "^1.0.7",

package/resources/scss/src/apps/portal/home/parts/Helix.scss

@@ -4,4 +4,8 @@
             min-height: 23em;
         }
     }
+
+    @media (min-width: 841px) {
+        max-height: 100%;
+    }
 }

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -54,13 +54,6 @@ Neo = globalThis.Neo = Object.assign({
      */
     insideWorker: typeof DedicatedWorkerGlobalScope !== 'undefined' || typeof WorkerGlobalScope !== 'undefined',
 
-    /**
-     * @deprecated in neo.mjs v7.0
-     */
-    applyClassConfig(cls) {
-        return Neo.setupClass(cls)
-    },
-
     /**
      * Maps methods from one namespace to another one
      * @example

package/src/button/Base.mjs

@@ -257,16 +257,18 @@ class Base extends Component {
                     items      = isArray ? value : value.items,
                     menuConfig = isArray ? {} : value,
                     model      = me.getModel(),
+                    {appName, theme, windowId} = me,
 
                 config = Neo.merge({
                     module         : module.default,
                     align          : {edgeAlign : 't0-b0', target: me.id},
-                    appName        : me.appName,
+                    appName,
                     displayField   : 'text',
                     floating       : true,
                     hidden         : true,
                     parentComponent: me,
-                    theme          : me.theme
+                    theme,
+                    windowId
                 }, menuConfig);
 
                 if (items) {
@@ -385,6 +387,22 @@ class Base extends Component {
         me.update()
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        super.afterSetWindowId(value, oldValue);
+
+        let {menuList} = this;
+
+        if (menuList) {
+            menuList.windowId = value
+        }
+    }
+
     /**
      * Converts the iconCls array into a string on beforeGet
      * @returns {String}

package/src/button/Split.mjs

@@ -189,6 +189,22 @@ class Split extends Button {
         me.ntype = ntype;
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        let {triggerButton} = this;
+
+        if (triggerButton) {
+            triggerButton.appName = value;
+        }
+
+        super.afterSetWindowId(value, oldValue)
+    }
+
     /**
      * @param {Boolean} [updateParentVdom=false]
      * @param {Boolean} [silent=false]

package/src/collection/Base.mjs

@@ -129,12 +129,12 @@ class Base extends CoreBase {
     }
 
     /**
-     * Adds one or more items to the end of the collection and returns the new length of the collection.
+     * Adds one or more items to the end of the collection
      * @param {Array|Object} item The item(s) to add
      * @returns {Object[]} an array containing all added items
      */
     add(item) {
-        return this.splice(0, null, item).addedItems
+        return this.splice(null, null, item).addedItems
     }
 
     /**

package/src/component/Base.mjs

@@ -515,7 +515,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetAppName(value, oldValue) {
-        value && Neo.currentWorker.insertThemeFiles(value, this.windowId, this.__proto__)
+
     }
 
     /**
@@ -1036,16 +1036,21 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetWindowId(value, oldValue) {
-        let controller = this.controller;
+        let me         = this,
+            controller = me.controller;
+
+        if (value) {
+            Neo.currentWorker.insertThemeFiles(value, me.__proto__);
 
-        if (controller && value) {
-            controller.windowId = value
+            if (controller) {
+                controller.windowId = value
+            }
         }
 
         // If a component gets moved into a different window, an update cycle might still be running.
         // Since the update might no longer get mapped, we want to re-enable this instance for future updates.
         if (oldValue) {
-            this.isVdomUpdating = false
+            me.isVdomUpdating = false
         }
     }
 

package/src/component/Video.mjs

@@ -1,8 +1,6 @@
 import BaseComponent from '../component/Base.mjs';
 import VDomUtil      from '../util/VDom.mjs';
 
-let isOperaMini = null;
-
 /**
  * @class Neo.component.Video
  * @extends Neo.component.Base
@@ -10,7 +8,7 @@ let isOperaMini = null;
  * @example
  *     ntype   : 'video',
  *     url     : 'https://video-ssl.itunes.apple.com/itunes-assets/Video125/v4/a0/57/54/a0575426-dd8e-2d25-bdf3-139702870b50/mzvf_786190431362224858.640x464.h264lc.U.p.m4v'
- *     autoplay: true
+ *     autoPlay: true
  *
  * @methods
  *      play
@@ -36,14 +34,9 @@ class Video extends BaseComponent {
          * Automatically start the video
          * Initial setting, which does not make sense to change later
          * !!Most browsers only support muted autostart
-         * @member {Boolean} autoplay=false
-         */
-        autoplay: false,
-        /**
-         * In case the browser does not support the video source the component should show an error.
-         * @member {String} errorMsg='The browser does not support the video'
+         * @member {Boolean} autoPlay=false
          */
-        errorMsg: 'Your browser does not support the video tag.',
+        autoPlay: false,
         /**
          * Current state of the video
          * @member {Boolean} playing_=false
@@ -115,18 +108,12 @@ class Video extends BaseComponent {
      * @param {String} value
      * @param {String|null} oldValue
      */
-    async afterSetUrl(value, oldValue) {
+    afterSetUrl(value, oldValue) {
         if (!value) return;
 
         let me     = this,
             {vdom} = me,
-            media  = VDomUtil.getFlags(vdom, 'media')[0],
-            userAgent;
-
-        if (isOperaMini === null) {
-            userAgent   = await Neo.Main.getByPath({path: 'navigator.userAgent'});
-            isOperaMini = userAgent.includes('Opera Mini');
-        }
+            media  = VDomUtil.getFlags(vdom, 'media')[0];
 
         media.cn = [{
             tag : 'source',
@@ -134,14 +121,6 @@ class Video extends BaseComponent {
             type: me.type
         }];
 
-        // Opera Mini might not support the video-source => check the user agent string
-        if (isOperaMini) {
-            media.cn.push({
-                tag : 'span',
-                html: me.errorMsg
-            })
-        }
-
         this.update()
     }
 
@@ -156,17 +135,17 @@ class Video extends BaseComponent {
      * @protected
      */
     handleAutoplay() {
-        if (!this.autoplay) return;
+        if (!this.autoPlay) return;
 
         let {vdom} = this,
-            media = VDomUtil.getFlags(vdom, 'media')[0];
+            media  = VDomUtil.getFlags(vdom, 'media')[0];
 
         // Most browsers require videos to be muted for autoplay to work.
         media.muted = true;
         // Allows inline playback on iOS devices
         media.playsInline = true;
 
-        this.playing = true;
+        this.playing = true
     }
 
     /**

package/src/container/Base.mjs

@@ -222,7 +222,8 @@ class Base extends Component {
     afterSetWindowId(value, oldValue) {
         super.afterSetWindowId(value, oldValue);
 
-        let me = this;
+        let me       = this,
+            {layout} = me;
 
         value && me.items?.forEach(item => {
             if (!Neo.isString(item)) {
@@ -230,8 +231,8 @@ class Base extends Component {
             }
         })
 
-        if (value && me.layout) {
-            me.layout.windowId = value
+        if (value && layout && !Neo.isString(layout)) {
+            layout.windowId = value
         }
     }
 

package/src/dialog/Base.mjs

@@ -286,14 +286,15 @@ class Base extends Panel {
     afterSetResizable(value, oldValue) {
         if (value && !this.getPlugin('resizable')) {
             import('../plugin/Resizable.mjs').then(module => {
-                let me        = this,
-                    {appName} = me,
-                    plugins   = me.plugins || [];
+                let me                  = this,
+                    {appName, windowId} = me,
+                    plugins             = me.plugins || [];
 
                 plugins.push({
                     module       : module.default,
                     appName,
                     delegationCls: 'neo-dialog',
+                    windowId,
                     ...me.resizablePluginConfig
                 });
 
@@ -326,6 +327,27 @@ class Base extends Panel {
         this.syncTrapFocus()
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        let me        = this,
+            resizable = me.getPlugin('resizable');
+
+        if (me.dragZone) {
+            me.dragZone.windowId = value
+        }
+
+        if (resizable) {
+            resizable.windowId = value
+        }
+
+        super.afterSetWindowId(value, oldValue)
+    }
+
     /**
      *
      */
@@ -480,9 +502,10 @@ class Base extends Panel {
      *
      */
     createHeader() {
-        let me      = this,
-            cls     = ['neo-header-toolbar', 'neo-toolbar'],
-            headers = me.headers || [];
+        let me         = this,
+            {windowId} = me,
+            cls        = ['neo-header-toolbar', 'neo-toolbar'],
+            headers    = me.headers || [];
 
         me.draggable && cls.push('neo-draggable');
 
@@ -495,6 +518,7 @@ class Base extends Panel {
             id       : me.getHeaderToolbarId(),
             listeners: {headerAction: me.executeHeaderAction, scope: me},
             title    : me.title,
+            windowId,
             ...me.headerConfig
         });
 
@@ -661,8 +685,9 @@ class Base extends Panel {
      * @param data
      */
     onDragStart(data) {
-        let me    = this,
-            style = me.style || {};
+        let me         = this,
+            {windowId} = me,
+            style      = me.style || {};
 
         if (!me.maximized) {
             me.isDragging = true;
@@ -679,6 +704,7 @@ class Base extends Panel {
                     dragProxyConfig    : {vdom: me.getProxyVdom()},
                     owner              : me,
                     useProxyWrapper    : false,
+                    windowId,
                     ...me.dragZoneConfig
                 });
 

package/src/draggable/DragZone.mjs

@@ -144,7 +144,11 @@ class DragZone extends Base {
          * True creates a position:absolute wrapper div which contains the cloned element
          * @member {Boolean} useProxyWrapper=true
          */
-        useProxyWrapper: true
+        useProxyWrapper: true,
+        /**
+         * @member {Number|null} windowId_=null
+         */
+        windowId_: null
     }
 
     /**
@@ -159,15 +163,13 @@ class DragZone extends Base {
     }
 
     /**
-     * Triggered after the appName config got changed
-     * @param {String|null} value
-     * @param {String|null} oldValue
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
      * @protected
      */
-    afterSetAppName(value, oldValue) {
-        if (value) {
-            Neo.currentWorker.insertThemeFiles(value, this.owner.windowId, this.__proto__)
-        }
+    afterSetWindowId(value, oldValue) {
+        value && Neo.currentWorker.insertThemeFiles(value, this.__proto__)
     }
 
     /**

package/src/form/field/Text.mjs

@@ -901,6 +901,8 @@ class Text extends Base {
      * @protected
      */
     afterSetWindowId(value, oldValue) {
+        super.afterSetWindowId(value, oldValue);
+
         value && this.triggers?.forEach(item => {
             item.windowId = value
         })

package/src/form/field/trigger/Time.mjs

@@ -94,6 +94,20 @@ class Time extends Picker {
             this.clock.time = value
         }
     }
+
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        super.afterSetWindowId(value, oldValue);
+
+        if (value) {
+            this.clock.windowId = value
+        }
+    }
 }
 
 export default Neo.setupClass(Time);

package/src/layout/Base.mjs

@@ -25,7 +25,7 @@ class Base extends CoreBase {
          */
         appName_: null,
         /**
-         * The Id of the Container instance this layout is bound to
+         * The id of the Container instance this layout is bound to
          * @member {?String} containerId=null
          * @protected
          */
@@ -43,9 +43,9 @@ class Base extends CoreBase {
          */
         isLayout: true,
         /**
-         * @member {Number|null} windowId=null
+         * @member {Number|null} windowId_=null
          */
-        windowId: null
+        windowId_: null
     }
 
     /**
@@ -59,13 +59,13 @@ class Base extends CoreBase {
     }
 
     /**
-     * Triggered after the appName config got changed
-     * @param {String|null} value
-     * @param {String|null} oldValue
+     * Triggered after the windowId config got changed
+     * @param {Number} value
+     * @param {Number|null} oldValue
      * @protected
      */
-    afterSetAppName(value, oldValue) {
-        value && Neo.currentWorker.insertThemeFiles(value, this.container.windowId, this.__proto__)
+    afterSetWindowId(value, oldValue) {
+        value && Neo.currentWorker.insertThemeFiles(value, this.__proto__)
     }
 
     /**

package/src/list/Component.mjs

@@ -37,6 +37,20 @@ class Component extends Base {
         })
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        super.afterSetWindowId(value, oldValue);
+
+        value && this.items?.forEach(item => {
+            item.windowId = value
+        })
+    }
+
     /**
      *
      */

package/src/plugin/PrefixField.mjs

@@ -136,7 +136,7 @@ class PrefixField extends Base {
         ]);
 
         me.owner.on('mounted', () => {
-            Neo.currentWorker.insertThemeFiles(owner.appName, owner.windowId, me.__proto__)
+            Neo.currentWorker.insertThemeFiles(owner.windowId, me.__proto__)
         }, me, {once: true})
     }
 

package/src/plugin/Resizable.mjs

@@ -164,7 +164,11 @@ class Resizable extends Base {
          * @member {Object} targetNode=null
          * @protected
          */
-        targetNode: null
+        targetNode: null,
+        /**
+         * @member {Number|null} windowId_=null
+         */
+        windowId_: null
     }
 
     /**
@@ -228,14 +232,24 @@ class Resizable extends Base {
      * @protected
      */
     afterSetAppName(value, oldValue) {
+        if (this.dragZone) {
+            this.dragZone.appName = value
+        }
+    }
+
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
         let me = this;
 
-        if (value) {
-            Neo.currentWorker.insertThemeFiles(value, me.owner.windowId, me.__proto__)
-        }
+        value && Neo.currentWorker.insertThemeFiles(value, me.__proto__)
 
         if (me.dragZone) {
-            me.dragZone.appName = value
+            me.dragZone.windowId = value
         }
     }
 

package/src/table/header/Button.mjs

@@ -464,9 +464,11 @@ class Button extends BaseButton {
 
     /**
      * @param {Object} data
+     * @param {Neo.button.Base} data.column
      * @param {String} data.dataField
      * @param {Number} data.index
      * @param {Object} data.record
+     * @param {Neo.table.Container} data.tableContainer
      * @param {Number|String} data.value
      * @returns {*}
      */

package/src/toolbar/Base.mjs

@@ -112,12 +112,27 @@ class Base extends Container {
                     appName            : me.appName,
                     boundaryContainerId: me.id,
                     owner              : me,
+                    windowId           : me.windowId,
                     ...me.sortZoneConfig
                 })
             })
         }
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        super.afterSetWindowId(value, oldValue);
+
+        if (this.sortZone) {
+            this.sortZone.windowId = value
+        }
+    }
+
     /**
      * Checks if the new dock position matches a value of the static dockPositions config
      * @param {String} value

package/src/worker/App.mjs

@@ -275,12 +275,11 @@ class App extends Base {
 
     /**
      * In case you don't want to include prototype based CSS files, use the className param instead
-     * @param {String} appName
      * @param {Number} windowId
      * @param {Neo.core.Base} [proto]
      * @param {String} [className]
      */
-    insertThemeFiles(appName, windowId, proto, className) {
+    insertThemeFiles(windowId, proto, className) {
         if (Neo.config.themes.length > 0) {
             className = className || proto.className;
             //console.log(windowId, className);
@@ -290,7 +289,7 @@ class App extends Base {
                 classPath, classRoot, fileName, lClassRoot, mapClassName, ns, themeFolders;
 
             if (!cssMap) {
-                me.themeFilesCache.push([appName, windowId, proto])
+                me.themeFilesCache.push([windowId, proto])
             } else {
                 // we need to modify app related class names
                 if (!className.startsWith('Neo.')) {
@@ -306,7 +305,7 @@ class App extends Base {
 
                 if (parent && parent !== Neo.core.Base.prototype) {
                     if (!Neo.ns(`${windowId}.${parent.className}`, false, cssMap)) {
-                        me.insertThemeFiles(appName, windowId, parent)
+                        me.insertThemeFiles(windowId, parent)
                     }
                 }
 
@@ -321,7 +320,6 @@ class App extends Base {
                     ns[fileName] = true;
 
                     Neo.main.addon.Stylesheet.addThemeFiles({
-                        appName,
                         className: mapClassName || className,
                         folders  : themeFolders,
                         windowId