neo.mjs 8.31.0 → 8.32.0

package/README.md

@@ -11,87 +11,170 @@
   <a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-green.svg?logo=GitHub&logoColor=white" alt="PRs Welcome"></a>
 </p>
 
-# Modern Enterprise-Ready JavaScript Framework
-Neo.mjs provides a new approach for building feature-rich web applications. Increase productivity by leveraging a vast
-component library and harness the power of multi-threading for extreme real-time performance.
+# Build Ultra-Fast, Scalable, and Extensible Web Apps :zap:
+:rocket: **Break Free from the Main Thread – Experience True Multi-Threading**
 
-Neo.mjs is the first frontend framework which can run a JavaScript module based dev mode
-without compilations. This makes debugging easier and reduces development costs.
-
-In case you care about scalability, extensibility or solid architectures, congratulations,
-you have found the right spot.
+Neo.mjs enables the creation of highly dynamic web applications by running everything **inside an App Worker**.
+From components and state providers to view controllers, everything operates within the worker,
+allowing the main thread to focus only on **DOM updates** and **delegating UI events**.
+This ensures **high performance, smooth reactivity**, and **extensibility** for both **multi-window** and **SPA applications**.
 
 <p align="center">
   <a href="https://youtu.be/pYfM28Pz6_0"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/master/resources_pub/images/neo33s.png"></a>
   <a href="https://youtu.be/aEA5333WiWY"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/master/resources_pub/images/neo-movie.png"></a>
 </p>
 
-## Content
-1. <a href="#introduction">Introduction</a>
-2. <a href="#use-cases">Potential Use Cases</a>
-3. <a href="#slack-channel">Slack Channel for questions & feedback</a>
-4. <a href="#examples">Examples</a>
-5. <a href="#getting-started">Getting Started</a>
-6. <a href="#cli">Command-Line Interface</a>
-7. <a href="#blog">Blog</a>
+</br></br>
+## 🔍 Why Neo.mjs?
+Neo is a worker thread-driven frontend framework designed to create multithreaded GUIs using JavaScript.
+By leveraging the **Off Main Thread (OMT) paradigm**, Neo ensures that your application’s UI remains responsive,
+even during computationally intensive tasks.
+
+Unlike traditional single-threaded frameworks, Neo distributes workloads across multiple threads, unlocking new levels of performance and scalability.
+Whether you’re building a small app or a large-scale enterprise solution, Neo’s architecture grows with your needs.
+
+Key Benefits of Neo.mjs
+1. **Multithreading for Performance**:
+   - Neo’s OMT paradigm moves tasks like data processing, state management, and rendering to worker threads, keeping the main thread free for rendering and user interactions.
+   - This approach eliminates UI freezes and ensures a smooth user experience, even for complex applications.
+2. **Declarative Class Configuration**:
+   - Neo’s class config system allows you to define and manage classes in a clean, reusable way. This reduces boilerplate code and makes your codebase more maintainable.
+   - With declarative configurations, you can focus on building features instead of wrestling with setup and initialization.
+3. **Modular and Scalable Architecture**:
+   - Neo’s modular design makes it easy to build scalable applications. Components are self-contained and reusable, promoting a clean separation of concerns.
+   - Whether you’re building a small app or a large-scale enterprise solution, Neo’s architecture grows with your needs.
+4. **Ease of Use**:
+   - Neo’s intuitive API and comprehensive documentation make it easy to get started, even for developers new to multithreaded programming.
+   - The framework’s design prioritizes developer productivity, allowing you to focus on solving real-world problems.
+5. **Future-Proof Technology**:
+   - Neo is built on modern web standards like JavaScript modules and worker threads, ensuring compatibility with the latest browser features.
+   - By embracing the OMT paradigm, Neo is uniquely positioned to take advantage of future advancements in web development.
+
+**Real-World Applications**
+
+Neo is ideal for:
+- **Data-intensive applications**: Handle large datasets and complex calculations without compromising UI responsiveness.
+- **Real-time dashboards**: Build dynamic, real-time dashboards that update seamlessly.
+- **Enterprise solutions**: Scale your application to meet the demands of large organizations.
+
+**Why Choose Neo Over Traditional Frameworks?**
+
+Traditional single-threaded frameworks often struggle with performance bottlenecks, especially when handling complex UIs or large datasets.
+Neo’s **multithreaded architecture** addresses these challenges head-on, delivering a responsive and scalable solution for modern web applications.
+
+With Neo, you get:
+- ✅ **Responsive UIs**: No more UI freezes or janky animations.
+- 🚀 **Scalability**: Build applications that can handle increasing complexity without compromising performance.
+- 💻 **Developer Productivity**: Spend less time optimizing and more time building features.
+  </br></br>
+## 🌟 Key Features
+🎭 **Actor Model**:</br>
+The App Worker acts as the central actor, handling application state and logic, independent of the main thread.
+This drives the OMT (off the main thread) paradigm into perfection,
+since it is keeping the main thread free for non-blocking DOM updates and UI interactions.
 
-</br><h2 id="introduction">1. Introduction</h2>
-Neo.mjs drives the OMT (off the main thread) paradigm into perfection,
-which is intended to move expensive tasks into Workers.
+<img src="./resources/images/workers-focus.svg">
 
-> So, what are the most expensive tasks we are dealing with?
+🔄 **Reactive State Management**:</br>
+Built-in reactivity allows dynamic, efficient updates between components and state providers.
 
-The answer is simple: a Framework and the Apps which we build with it.
+⚡ **Instant JavaScript module based Development Mode**:</br>
+**Zero builds or transpilations** required. Run your app directly in the browser, modify reactive properties in real-time, and see instant updates.
+This gives you an **unmatched debugging experience**, saving time and reducing development costs.
+You can even build **entire apps inside the console** if you wish.
 
-Neo.mjs moves most parts of the framework and your App(s) including their Components
-into an Application Worker.
+📊 **Hierarchical State Management**:</br>
+Seamlessly manage state between parent and child components with nested state providers.
+Each component binds to the state data from its **closest** provider,
+even combining data from multiple providers inside one binding.
 
-This enables us to re-use existing Component instances and mount & unmount them
-several times. Even into different Browser-Windows.
+🧩 **Clean Architecture**:</br>
+View controllers ensure a **separation of concerns**, isolating business logic from UI components for easier maintenance and testing.
 
-Neo.mjs also provides sharing state across multiple Browser-Windows.
+🌐 **Multi-Window & SPAs**:</br>
+Easily build and manage complex, highly interactive applications that require multiple windows or traditional SPAs.
+No native shell required.
 
-So far, it is the only Framework which enables us to build complex multi-Window Apps
-without the need for a native shell.
+🌀 **Dynamic Component Management**:</br>
+Unmount, move, and remount components across the UI or even in separate browser windows
+— without losing the component’s state or logic. This **runtime flexibility** is a game-changer, **preserving JS instances** while still updating the UI dynamically.
 
-<img src="./resources/images/workers-focus.svg">
+:dependabot: **No npm dependency hell**:</br>
+Neo.mjs apps do not need any dependencies at all, just some dev dependencies for tooling.
+</br></br>
+## :bulb: Perfect for Complex Use Cases
+Need a **web-based IDE, banking dashboard**, or an **enterprise-grade multi-window app**? Neo.mjs is built for it.
 
+</br></br>
+## 📦 Declarative Class Configuration
+Neo’s class config system allows you to define and manage classes in a declarative and reusable way.
+This simplifies class creation, reduces boilerplate code, and improves maintainability.
+
+```javascript
+import Component from '../../src/component/Base.mjs';
+
+class MyComponent extends Component {
+    static config = {
+        className    : 'MyComponent',
+        someProperty_: 'defaultValue',
+        domListeners : {
+            click: 'onClick'
+        }
+    }
+
+    afterSetSomeProperty(value, oldValue) {
+       console.log('someProperty changed:', value, oldValue)
+    }
+    
+    onClick(data) {
+        console.log('Clicked!', data)
+    }
+}
+
+export default Neo.setupClass(MyComponent);
+```
+With Neo.mjs’s class config system, you can:
+
+* Define default properties and methods in a clean, structured way.
+* Easily extend and reuse configurations across classes.
+* Keep your codebase organized and scalable.
+
+For more details, check out the <a href="https://neomjs.com/dist/production/apps/portal/index.html#/learn/gettingstarted.Config">Class Config System documentation</a>.
 
-Neo.mjs is **not** intended for rather simple & static websites.
+</br></br>
+## 🚀 Get Started
+Quick Start
 
-The Framework does not focus primarily on a fast first rendering experience for new users,
-but instead on a super-fast update & navigation experience for returning users.
+Run the following command in your terminal, and your new Neo app will be created, the local web server will start, and your app will open in a new browser window:
 
+```bash
+npx neo-app@latest
+```
+This one-liner sets up everything you need to start building with Neo, including:
+- A new app workspace.
+- A pre-configured app shell.
+- A local development server.
+- Opening your app inside a new browser window
 
-</br><h2 id="use-cases">2. Potential Use-Cases</h2>
-1. Finance (Banking & Trading Apps)
-2. Data Science
-3. Web-based IDEs
-4. Multi-Window Data Visualisation
-5. Complex dynamic Forms
-6. "Desktop-like" Apps
-7. Enterprise Apps in general (e.g. Admin Dashboards)
+:book: More details? Check out our <a href="./.github/GETTING_STARTED.md">Getting Started Guide</a>
 
-</br><h2 id="slack-channel">3. Slack Channel for questions, ideas & feedback</h2>
-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>
+:student: Make sure to dive into the <a href="https://neomjs.com/dist/production/apps/portal/#/learn/gettingstarted.Setup">Learning Section</a>
 
-</br><h2 id="examples">4. Examples</h2>
-Some exciting Examples are listed here: <a href="https://neomjs.com/dist/production/apps/portal/#/examples">Neo.mjs Examples</a>
+:brain: The most advanced tutorial to help you with getting up to speed is this one:
+<a href="https://neomjs.com/dist/production/apps/portal/#/learn/tutorials.Earthquakes">Earthquakes Tutorial</a>
 
-Many more are included inside the repos `src/apps` & `src/examples` folders.
+Next steps:
+* :star: **Explore exciting Examples here**: <a href="https://neomjs.com/dist/production/apps/portal/#/examples">Neo.mjs Examples</a>
+* Many more are included inside the repos <a href="https://github.com/neomjs/neo/tree/dev/apps">apps</a>
+  & <a href="https://github.com/neomjs/neo/tree/dev/examples">examples</a> folders.
+* :blue_book: All Blog Posts are listed here: <a href="https://neomjs.com/dist/production/apps/portal/#/blog">Neo.mjs Blog</a>
+  </br></br>
+## :handshake: Join the Community
 
-</br><h2 id="getting-started">5. Getting Started</h2>
-* Take a look at the <a href="./.github/GETTING_STARTED.md">Getting Started Guide</a>
-* Make sure to dive into the <a href="https://neomjs.com/dist/production/apps/portal/#/learn/gettingstarted.Setup">Learning Section</a>
-* 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/tutorials.Earthquakes">Earthquakes Tutorial</a>
+:speech_balloon: Have questions? Join our <a href="https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA">Slack channel</a> and connect with other developers.
 
-</br><h2 id="cli">6. Command-Line Interface</h2>
-You can find an in-depth description here: <a href="./buildScripts/README.md">Neo.mjs CLI</a>
+:hammer_and_wrench: Want to contribute? Check out our <a href="https://github.com/neomjs/neo/blob/dev/CONTRIBUTING.md">Contributing Guide</a>.
 
-</br><h2 id="blog">7. 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='8.31.0'
+         * @member {String} version='8.32.0'
          */
-        version: '8.31.0'
+        version: '8.32.0'
     }
 
     /**

package/apps/portal/index.html

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

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

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

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

@@ -51,8 +51,8 @@ class MainContainer extends Container {
         items: [
             {ntype: 'component', cls: ['portal-home-progress']},
             MainNeo,
-            Helix,
             Colors,
+            Helix,
             How,
             Features,
             AfterMath

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

@@ -42,18 +42,14 @@ class Colors extends FeatureSection {
          * @member {String} paragraph
          */
         paragraph: [
-            'This is similar to the Helix demo — it\'s an extremely fast multi-window app. Click the start button ',
-            'to see the view reflect changes in the data. And the app is multi-window: the table and charts can be ',
-            'undocked into their own windows. In fact, the entire demo can be undocked.'
+            'Click the start button to see the view reflect changes in the data. And the app is multi-window: the table ',
+            'and charts can be undocked into their own windows. In fact, the entire demo can be undocked. ',
+            'All windows share the same data - less traffic and costs.'
         ].join(''),
         /**
          * @member {String} subHeadline='Socket Data'
          */
-        subHeadline: 'Shared Socket Data',
-        /**
-         * @member {String} textContainerPosition='end'
-         */
-        textContainerPosition: 'end'
+        subHeadline: 'Shared Socket Data'
     }
 }
 

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

@@ -51,7 +51,11 @@ class Helix extends FeatureSection {
         /**
          * @member {String} subHeadline='40,000 Updates /s'
          */
-        subHeadline: '40,000 Updates /s'
+        subHeadline: '40,000 Updates /s',
+        /**
+         * @member {String} textContainerPosition='end'
+         */
+        textContainerPosition: 'end'
     }
 }
 

package/buildScripts/buildAll.mjs

@@ -14,7 +14,7 @@ const __dirname   = path.resolve(),
       requireJson = path => JSON.parse(fs.readFileSync((path))),
       packageJson = requireJson(path.join(__dirname, 'package.json')),
       program     = new Command(),
-      neoPath     = path.resolve(packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/'),
+      neoPath     = path.resolve(packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/'),
       webpackPath = path.resolve(neoPath, 'buildScripts/webpack'),
       programName = `${packageJson.name} buildAll`,
       questions   = [];

package/buildScripts/buildThemes.mjs

@@ -14,7 +14,7 @@ const
     cwd          = process.cwd(),
     requireJson  = path => JSON.parse(fs.readFileSync((path))),
     packageJson  = requireJson(path.resolve(cwd, 'package.json')),
-    insideNeo    = packageJson.name === 'neo.mjs',
+    insideNeo    = packageJson.name.includes('neo.mjs'),
     neoPath      = path.resolve(insideNeo ? './' : './node_modules/neo.mjs/'),
     programName  = `${packageJson.name} buildThemes`,
     program      = new Command(),

package/buildScripts/createApp.mjs

@@ -12,7 +12,7 @@ const
     cwd          = process.cwd(),
     requireJson  = path => JSON.parse(fs.readFileSync((path))),
     packageJson  = requireJson(path.join(__dirname, 'package.json')),
-    insideNeo    = packageJson.name === 'neo.mjs',
+    insideNeo    = packageJson.name.includes('neo.mjs'),
     neoPath      = insideNeo ? './' : './node_modules/neo.mjs/',
     addonChoices = fs.readdirSync(path.join(neoPath, '/src/main/addon')).map(item => item.slice(0, -4)),
     program      = new Command(),

package/buildScripts/createAppMinimal.mjs

@@ -11,7 +11,7 @@ const __dirname   = path.resolve(),
     cwd           = process.cwd(),
     requireJson   = path => JSON.parse(fs.readFileSync((path))),
     packageJson   = requireJson(path.join(__dirname, 'package.json')),
-    insideNeo     = packageJson.name === 'neo.mjs',
+    insideNeo     = packageJson.name.includes('neo.mjs'),
     neoPath       = insideNeo ? './' : './node_modules/neo.mjs/',
     addonChoices  = fs.readdirSync(path.join(neoPath, '/src/main/addon')).map(item => item.slice(0, -4)),
     program       = new Command(),

package/buildScripts/docs/jsdocx.mjs

@@ -8,7 +8,7 @@ const __dirname   = path.resolve(),
       cwd         = process.cwd(),
       requireJson = path => JSON.parse(fs.readFileSync((path))),
       packageJson = requireJson(path.resolve(cwd, 'package.json')),
-      insideNeo   = packageJson.name === 'neo.mjs',
+      insideNeo   = packageJson.name.includes('neo.mjs'),
       neoPath     = insideNeo ? '' : 'node_modules/neo.mjs/',
       appNames    = [],
       options = {

package/buildScripts/injectPackageVersion.mjs

@@ -11,7 +11,7 @@ const
     cwd         = process.cwd(),
     requireJson = path => JSON.parse(fs.readFileSync((path))),
     packageJson = requireJson(path.join(__dirname, 'package.json')),
-    insideNeo   = packageJson.name === 'neo.mjs',
+    insideNeo   = packageJson.name.includes('neo.mjs'),
     neoPath     = insideNeo ? './' : './node_modules/neo.mjs/',
     programName = `${packageJson.name} inject-package-version`;
 

package/buildScripts/watchThemes.mjs

@@ -8,7 +8,7 @@ import * as sass    from 'sass';
 let cwd         = process.cwd(),
     requireJson = path => JSON.parse(fs.readFileSync((path))),
     packageJson = requireJson(path.resolve(cwd, 'package.json')),
-    neoPath     = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
+    neoPath     = packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/',
     mixinPath   = path.resolve(neoPath, 'resources/scss/mixins/_all.scss'),
     scssPath    = path.resolve(cwd, 'resources/scss');
 

package/buildScripts/webpack/buildThreads.mjs

@@ -11,7 +11,7 @@ const __dirname   = path.resolve(),
       cpOpts      = {env: process.env, cwd: cwd, stdio: 'inherit', shell: true},
       requireJson = path => JSON.parse(fs.readFileSync((path))),
       packageJson = requireJson(path.resolve(cwd, 'package.json')),
-      neoPath     = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
+      neoPath     = packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/',
       program     = new Command(),
       webpackPath = path.resolve(neoPath, 'buildScripts/webpack'),
       programName = `${packageJson.name} buildThreads`,

package/buildScripts/webpack/development/webpack.config.appworker.mjs

@@ -7,7 +7,7 @@ const cwd                   = process.cwd(),
       cpOpts                = {env: process.env, cwd: cwd, stdio: 'inherit', shell: true},
       requireJson           = path => JSON.parse(fs.readFileSync((path))),
       packageJson           = requireJson(path.resolve(cwd, 'package.json')),
-      neoPath               = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
+      neoPath               = packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/',
       buildTarget           = requireJson(path.resolve(neoPath, 'buildScripts/webpack/development/buildTarget.json')),
       filenameConfig        = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
       plugins               = [],

package/buildScripts/webpack/development/webpack.config.main.mjs

@@ -6,7 +6,7 @@ import WebpackHookPlugin from 'webpack-hook-plugin';
 const cwd            = process.cwd(),
       requireJson    = path => JSON.parse(fs.readFileSync((path))),
       packageJson    = requireJson(path.resolve(cwd, 'package.json')),
-      insideNeo      = packageJson.name === 'neo.mjs',
+      insideNeo      = packageJson.name.includes('neo.mjs'),
       neoPath        = insideNeo ? './' : './node_modules/neo.mjs/',
       buildTarget    = requireJson(path.resolve(neoPath, 'buildScripts/webpack/development/buildTarget.json')),
       filenameConfig = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),

package/buildScripts/webpack/development/webpack.config.worker.mjs

@@ -5,7 +5,7 @@ import webpack from 'webpack';
 const cwd            = process.cwd(),
       requireJson    = path => JSON.parse(fs.readFileSync((path))),
       packageJson    = requireJson(path.resolve(cwd, 'package.json')),
-      neoPath        = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
+      neoPath        = packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/',
       buildTarget    = requireJson(path.resolve(neoPath, 'buildScripts/webpack/development/buildTarget.json')),
       filenameConfig = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
       entry          = {};

package/buildScripts/webpack/production/webpack.config.appworker.mjs

@@ -7,7 +7,7 @@ const cwd                   = process.cwd(),
       cpOpts                = {env: process.env, cwd: cwd, stdio: 'inherit', shell: true},
       requireJson           = path => JSON.parse(fs.readFileSync((path))),
       packageJson           = requireJson(path.resolve(cwd, 'package.json')),
-      neoPath               = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
+      neoPath               = packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/',
       buildTarget           = requireJson(path.resolve(neoPath, 'buildScripts/webpack/production/buildTarget.json')),
       filenameConfig        = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
       plugins               = [],

package/buildScripts/webpack/production/webpack.config.main.mjs

@@ -6,7 +6,7 @@ import WebpackHookPlugin from 'webpack-hook-plugin';
 const cwd            = process.cwd(),
       requireJson    = path => JSON.parse(fs.readFileSync((path))),
       packageJson    = requireJson(path.resolve(cwd, 'package.json')),
-      insideNeo      = packageJson.name === 'neo.mjs',
+      insideNeo      = packageJson.name.includes('neo.mjs'),
       neoPath        = insideNeo ? './' : './node_modules/neo.mjs/',
       buildTarget    = requireJson(path.resolve(neoPath, 'buildScripts/webpack/production/buildTarget.json')),
       filenameConfig = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),

package/buildScripts/webpack/production/webpack.config.worker.mjs

@@ -5,7 +5,7 @@ import webpack from 'webpack';
 const cwd            = process.cwd(),
       requireJson    = path => JSON.parse(fs.readFileSync((path))),
       packageJson    = requireJson(path.resolve(cwd, 'package.json')),
-      neoPath        = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
+      neoPath        = packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/',
       buildTarget    = requireJson(path.resolve(neoPath, 'buildScripts/webpack/production/buildTarget.json')),
       filenameConfig = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
       entry          = {};

package/examples/README.md

@@ -1,17 +1,8 @@
 # Client Requirements
 
-Running the examples locally **without** a webpack build requires browsers to be able to start webworkers from
-Javascript Modules (.mjs files). This feature got released in Google Chrome v80 (February 4th, 2020),
-other browsers are not there yet (see sticky <a href="https://github.com/neomjs/neo/issues">issues</a>)
+Running the examples locally works fine in all environments inside all major browsers at this point:
+Chromium, Safari & Firefox
 
-- localhost/neo/examples/component/helix/
-
-More details on JS Modules (and their use within workers) here:
-https://v8.dev/features/modules
-
-Without the Chrome flag (or for other browsers like Firefox or Safari), you can run the examples using the webpack build
-version (which converts JS modules into plain JS files)
-- localhost/neo/dist/development/examples/component/helix/
 
 # Local Web-Server Requirements
 
@@ -19,13 +10,14 @@ Why do I need a local web-server?
 
 In short: it is possible to run the framework without a local web-server, but this would be a huge security issue.
 You can start Chrome using a flag (--allow-file-access-from-files), but this will allow the browser to access any
-file on your hard drive. To avoid this, a local web-server (like XAMPP) is the way to go.
+file on your hard drive. To avoid this, a local web-server is the way to go.
 
 **Webpack Dev Server**  
 `npm run server-start`
 
 **All Servers**  
-Ensure your server has a mime-type configured for Javascript Modules (.mjs) files. This should be set to the same as normal javascript (.js) files, normally 'application/-javascript'.
+Ensure your server has a mime-type configured for Javascript Modules (.mjs) files. This should be set to the same as
+normal javascript (.js) files, normally 'application/-javascript'.
 
 **JetBrains IDE**
 - Go to Preferences -> Build, Execution, Deployment -> Debugger
@@ -33,4 +25,3 @@ Ensure your server has a mime-type configured for Javascript Modules (.mjs) file
 
 <br><br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>
-& <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a>

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.31.0",
+    "version": "8.32.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -56,13 +56,13 @@
         "envinfo": "^7.14.0",
         "fs-extra": "^11.3.0",
         "highlightjs-line-numbers.js": "^2.9.0",
-        "inquirer": "^12.4.3",
+        "inquirer": "^12.5.0",
         "marked": "^15.0.7",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.5.3",
-        "sass": "^1.85.1",
+        "sass": "^1.86.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
         "webpack": "^5.98.0",

package/resources/scss/src/grid/plugin/AnimateRows.scss

@@ -0,0 +1,10 @@
+.neo-grid-view {
+    &.neo-animate-rows {
+        .neo-grid-row {
+            transition:
+                background-color var(--neo-duration) var(--neo-easing),
+                opacity          var(--neo-duration) var(--neo-easing),
+                transform        var(--neo-duration) var(--neo-easing);
+        }
+    }
+}

package/src/DefaultConfig.mjs

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

package/src/calendar/view/SettingsContainer.mjs

@@ -159,16 +159,14 @@ class SettingsContainer extends Container {
     onCardIndexChange(data) {
         let me            = this,
             container     = data.item,
-            mainContainer = me.getMainContainer(),
-            listenerId;
+            mainContainer = me.getMainContainer();
 
         if (mainContainer) {
             if (Neo.isFunction(container.createContent) && container.items.length < 1) {
                 if (Neo.typeOf(mainContainer[`${container.flag}Component`]) !== 'NeoInstance') {
-                    listenerId = mainContainer.on('cardLoaded', () => {
-                        mainContainer.un('cardLoaded', listenerId);
+                    mainContainer.on('cardLoaded', () => {
                         me.timeout(30).then(() => {container.createContent()})
-                    })
+                    }, me, {once: true})
                 } else {
                     me.timeout(30).then(() => {container.createContent()})
                 }

package/src/calendar/view/week/Component.mjs

@@ -359,21 +359,19 @@ class Component extends BaseComponent {
                 import('./plugin/DragDrop.mjs'),
                 import('./plugin/EventResizable.mjs')
             ]).then(modules => {
-                let me                  = this,
-                    {appName, windowId} = me,
-                    plugins             = me.plugins || [];
+                let me        = this,
+                    {appName} = me,
+                    plugins   = me.plugins || [];
 
                 plugins.push({
                     module : modules[0].default,
                     appName,
-                    windowId,
                     ...me.pluginDragDropConfig
                 }, {
                     module       : modules[1].default,
                     appName,
                     delegationCls: 'neo-event',
                     directions   : ['b', 't'],
-                    windowId,
                     ...me.pluginEventResizableConfig
                 });