neo.mjs 10.0.0-alpha.1 → 10.0.0-alpha.2

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img height="100"src="https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/logo/neo_logo_text_primary.svg">
+  <img height="100"src="https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/logo/neo_logo_text_primary.svg" alt="Neo.mjs Logo">
 </p>
 </br>
 <p align="center">
@@ -11,104 +11,114 @@
   <a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-green.svg?logo=GitHub&logoColor=white" alt="PRs Welcome"></a>
 </p>
 
-# Build Ultra-Fast, Scalable, and Extensible Web Apps :zap:
-:rocket: **Break Free from the Main Thread – Experience True Multi-Threading**
+# Build Ultra-Fast, Desktop-Like Web Apps. Period. :zap:
+🚀 **Break Free from UI Freezes — Experience True Multithreading & Uncompromised Responsiveness.**
 
-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**.
+💻 ***Neo.mjs v10 isn't an upgrade — it's a new operating system for the web. Where others optimize at the margins, we reinvented the engine.***
+
+Imagine web applications that never jank, no matter how complex the logic, how many real-time updates they handle, or how
+many browser windows they span. Neo.mjs is engineered from the ground up to deliver **desktop-like fluidity and scalability**.
+**While it excels for Single Page Apps (SPAs), Neo.mjs is simply the best option for browser-based multi-window applications**,
+operating fundamentally different from traditional frameworks.
+
+By leveraging a **pioneering Off-Main-Thread (OMT) architecture**, Neo.mjs ensures your UI remains butter-smooth, even during computationally intensive tasks like complex data processing or advanced graphics rendering. The main thread is kept free for one purpose: **flawless user interactions and seamless DOM updates.**
 
 <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>
+  <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" alt="Neo.mjs Performance Demo 1 (YouTube Video)"></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" alt="Neo.mjs Performance Demo 2 (YouTube Video)"></a>
 </p>
 
 </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.
-
-<img src="./resources/images/workers-focus.svg">
-
-🔄 **Reactive State Management**:</br>
-Built-in reactivity allows dynamic, efficient updates between components and state providers.
-
-⚡ **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.
-
-📊 **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.
-
-🧩 **Clean Architecture**:</br>
-View controllers ensure a **separation of concerns**, isolating business logic from UI components for easier maintenance and testing.
-
-🌐 **Multi-Window & SPAs**:</br>
-Easily build and manage complex, highly interactive applications that require multiple windows or traditional SPAs.
-No native shell required.
-
-🌀 **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.
-
-:dependabot: **No npm dependency hell**:</br>
-Neo.mjs apps do not need any dependencies at all, just some dev dependencies for tooling.
+## 🚀 Why Choose Neo.mjs? Solving the Toughest UI Challenges
+Traditional single-threaded frontend frameworks often struggle with performance bottlenecks and UI freezes, especially for
+large-scale, data-intensive, or real-time applications. Neo.mjs offers a fundamentally different solution, designed for
+**uncompromising performance, enhanced security, and superior developer experience.**
+
+1. **Eliminate UI Freezes with True Multithreading**:
+   > *"The browser's main thread should be treated like a neurosurgeon: only perform precise, scheduled operations with zero distractions."*</br></br>
+   — Neo.mjs Core Philosophy
+    
+   Neo.mjs's OMT architecture inherently prevents UI freezes. With v10's optimized rendering pipeline, your UI will remain even *more*
+   consistently responsive, even during intense data processing or complex graphics rendering. It achieves an astonishing
+   rate of **over 40,000 delta updates per second** in optimized environments. This translates to an engine with vast untapped
+   potential, limited only by user interaction, not the framework.
+ 
+2. **Unmatched Developer Experience: Transpilation-Free ESM**:
+   Say goodbye to complex build steps for development. Neo.mjs apps run **natively as ES Modules directly in the browser**.
+   This means **zero builds or transpilations** in dev mode, offering instant reloads and an **unmatched debugging experience**.
+   You modify code, and your app updates in real-time.
+ 
+3. **Inherent Security by Design**:
+   By prioritizing direct DOM API manipulation over string-based methods (like `innerHTML`), Neo.mjs fundamentally reduces
+   the attack surface for vulnerabilities like Cross-Site Scripting (XSS), building a more robust and secure application from the ground up.
+ 
+4. **Declarative, Consistent, & Reusable Architecture**:
+   Neo.mjs's unique **unified class config system** allows you to define components, layouts, and logic in a clean, declarative,
+   and highly consistent way. This significantly reduces boilerplate, improves maintainability, and makes complex UI composition surprisingly straightforward.
+
+5. **Scalability for Enterprise & Beyond**:
+   Whether building sophisticated enterprise dashboards, data-intensive Gen AI interfaces, or desktop-like multi-window applications,
+   Neo.mjs's modular, worker-driven architecture effortlessly scales. Components are persistent, stateful instances that can be unmounted,
+   moved, and even remounted across browser windows without losing their logic or state. This is key to preventing the "re-rendering madness"
+   common in other frameworks.
+
+</br></br>
+## 📊  Real-World Win: Crushing UI Lag in Action
+Imagine a developer building a stock trading app with live feeds updating every millisecond. Traditional frameworks often choke,
+freezing the UI under the data flood. With Neo.mjs, the heavy lifting happens in worker threads, keeping the main thread free.
+Traders get real-time updates with zero lag, and the app feels like a native desktop tool. Now, imagine extending this with
+**multiple synchronized browser windows**, each displaying different real-time views, all remaining butter-smooth.
+That’s Neo.mjs in action—solving problems others can’t touch.
+
+</br></br>
+## 🌟 Key Features (and How They Supercharge Your App)
+
+* **Persistent Component Instances**: Components maintain their state and logic even when their DOM is removed or moved.
+  No more wasteful re-creations – just surgical, efficient updates.
+
+* **Reactive State Management**: Built-in reactivity ensures dynamic, efficient updates between components and state providers,
+  all handled off the main thread.
+
+* **Hierarchical State Management**: Seamlessly manage state between parent and child components with nested state providers.
+  Components intelligently bind to the closest provider, combining data for powerful, maintainable patterns.
+
+* **Clean Architecture (MVVM-inspired)**: View controllers ensure a clear separation of concerns, isolating business logic
+  from UI components for easier maintenance, testing, and team collaboration.
+
+* **Multi-Window & Single-Page Applications (SPAs)**: Easily build and manage complex applications that require multiple
+  browser windows or traditional SPAs, all powered by the same underlying multi-threaded architecture without requiring any native shell.
+
+* **No npm Dependency Hell**: Neo.mjs apps run with **zero runtime dependencies**, just a few dev dependencies for tooling.
+  This means smaller bundles, fewer conflicts, and a simpler dependency graph.
+
+* **Cutting-Edge Use Cases**: Ideal for **data-intensive applications, real-time dashboards, web-based IDEs, banking
+  applications, and complex multi-window Gen AI interfaces** where performance and responsiveness are non-negotiable.
+
+<p align="center">
+  <img src="./resources/images/workers-focus.svg" alt="Neo.mjs Worker Architecture Diagram - Shows Main Thread, App Worker, VDom Worker, Canvas Worker, Data Worker, Service Worker, Backend connections.">
+</p>
+*Diagram: A high-level overview of Neo.mjs's multi-threaded architecture (Main Thread, App Worker, VDom Worker, Canvas Worker, Data Worker, Service Worker, Backend). Optional workers fade in on hover on neomjs.com.*
+
 </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.
+## 🔍 Neo.mjs vs. The Rest: Key Differentiators
+Wondering how Neo.mjs stacks up against React, Angular, or Vue.js? Here’s the breakdown:
+
+| Feature                   | Neo.mjs                                        | React / Angular / Vue.js                            |
+| :------------------------ | :--------------------------------------------- | :------------------------------------------ |
+| **UI Responsiveness** | **Guaranteed smooth**: Heavy tasks off-main-thread; main thread free for UI. | **Prone to jank**: Main thread handles all logic + UI, easily blocked. |
+| **Multithreading** | Native OMT architecture for core app logic, VDom, data, & graphics. | Single-threaded by default; requires complex workarounds (e.g., Web Workers for *specific* tasks). |
+| **Dev Mode Experience** | **No transpilation, instant reloads**: Native ES Modules directly in browser. | Build tools (Webpack, Babel) required for dev; slower reloads. |
+| **Component Persistence** | State survives DOM changes; instances move across windows. | Full re-renders common; state often lost on unmount unless managed externally. |
+| **Security** | Direct DOM API, inherently XSS-resistant by design. | Relies heavily on careful string sanitization; higher XSS risk if not diligent. |
+| **Multi-Window Apps** | Seamless, browser-native multi-window support. | Complex to achieve; hacky or unsupported natively. |
+| **Bundle Size** | Zero runtime dependencies for lean apps.       | Can be large with many third-party dependencies. |
+
+**Neo.mjs Edge**: True multithreading, a no-build development mode, and a scalable, secure architecture combine to deliver a framework that's faster to build with and fundamentally faster and more stable to run.
 
 </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.
+## 📦 Declarative Class Configuration: Build Faster, Maintain Easier
+
+Neo.mjs’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';
@@ -116,65 +126,61 @@ import Component from '../../src/component/Base.mjs';
 class MyComponent extends Component {
     static config = {
         className   : 'MyComponent',
-        myConfig_   : 'defaultValue',
-        domListeners: {
+        myConfig_   : 'defaultValue', // Reactive property
+        domListeners: {               // Direct DOM event binding
             click: 'onClick'
         }
     }
 
+    // Automatically called when myConfig_ changes
     afterSetMyConfig(value, oldValue) {
-       console.log('myConfig changed:', value, oldValue)
+       console.log('myConfig changed:', value, oldValue);
     }
 
+    // Handled in the App Worker, main thread remains free
     onClick(data) {
-        console.log('Clicked!', 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>.
+For more details, check out the [Class Config System documentation](https://neomjs.com/dist/production/apps/portal/index.html#/learn/gettingstarted.Config).
 
 </br></br>
-## 🚀 Get Started
-Quick Start
+## 🚀 Jump In: Your First Neo.mjs App in Minutes
 
-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:
+Run this command:
 
 ```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
 
-:book: More details? Check out our <a href="./.github/GETTING_STARTED.md">Getting Started Guide</a>
+This one-liner sets up everything you need to start building with Neo.mjs, including:
+
+* A new app workspace.
+* A pre-configured app shell.
+* A local development server.
+* Launching your app in a new browser window—all in one go.
 
-:student: Make sure to dive into the <a href="https://neomjs.com/dist/production/apps/portal/#/learn/gettingstarted.Setup">Learning Section</a>
+:book: More details? Check out our [Getting Started Guide](./.github/GETTING_STARTED.md)
 
-: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>
+:student: Make sure to dive into the [Learning Section](https://neomjs.com/dist/production/apps/portal/#/learn/gettingstarted.Setup)
 
 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
 
-: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.
+* :star: **Experience stunning Demos & Examples here**: [Neo.mjs Examples Portal](https://neomjs.com/dist/production/apps/portal/#/examples)
+* Many more are included inside the repos [apps](https://github.com/neomjs/neo/tree/dev/apps)
+  & [examples](https://github.com/neomjs/neo/tree/dev/examples) folders.
+* :blue_book: All Blog Posts are listed here: [Neo.mjs Blog](https://neomjs.com/dist/production/apps/portal/#/blog)
+
+</br></br>
+## :handshake: Join the Community
 
-:hammer_and_wrench: Want to contribute? Check out our <a href="https://github.com/neomjs/neo/blob/dev/CONTRIBUTING.md">Contributing Guide</a>.
+:speech_balloon: Have questions? Join our [Slack channel](https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA) and connect with other developers.
 
+:hammer_and_wrench: Want to contribute? Check out our [Contributing Guide](https://github.com/neomjs/neo/blob/dev/CONTRIBUTING.md).
 
 </br></br>
-Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>
+Copyright (c) 2015 - today, [Tobias Uhlig](https://www.linkedin.com/in/tobiasuhlig/)

package/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-06-17",
+      "datePublished": "2025-06-18",
       "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  : 'v10.0.0-alpha.1'
+                html  : 'v10.0.0-alpha.2'
             }]
         }],
         /**

package/package.json

@@ -1,7 +1,7 @@
 {
     "name"           : "neo.mjs",
-    "version"        : "10.0.0-alpha.1",
-    "description"    : "The webworkers driven UI framework",
+    "version"        : "10.0.0-alpha.2",
+    "description"    : "Neo.mjs: The multi-threaded UI framework for building ultra-fast, desktop-like web applications with uncompromised responsiveness, inherent security, and a transpilation-free dev mode.",
     "type"           : "module",
     "repository"     : {
         "type": "git",
@@ -32,14 +32,42 @@
         "javascript",
         "frontend",
         "framework",
+        "performance",
+        "ui-responsiveness",
+        "no-jank",
+        "smooth-ui",
+        "scalability",
+        "enterprise",
+        "multi-threaded",
+        "desktop-like",
+        "native-like",
+        "web-app",
         "offscreencanvas",
         "sharedworker",
         "webworker",
+        "virtual-dom",
         "ecmascript",
         "css",
         "json",
         "react-alternative",
-        "angular-alternative"
+        "angular-alternative",
+        "zero-build",
+        "no-transpilation",
+        "security",
+        "xss-resistant",
+        "realtime",
+        "data-visualization",
+        "single-page-application",
+        "spa",
+        "generative-ai",
+        "genai",
+        "ai-interfaces",
+        "json-blueprints",
+        "low-code-ui",
+        "multi-window",
+        "pwa",
+        "progressive-web-app",
+        "predictive-caching"
     ],
     "author"         : "Tobias Uhlig",
     "license"        : "MIT",

package/src/DefaultConfig.mjs

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

package/src/Main.mjs

@@ -487,7 +487,7 @@ class Main extends core.Base {
 
         Neo.config[key] = data.value;
 
-        key === 'renderCountDeltas' && DomAccess.set({[key]: value})
+        key === 'renderCountDeltas' && DeltaUpdates.set({[key]: value})
     }
 
     /**

package/src/main/DeltaUpdates.mjs

@@ -17,12 +17,37 @@ class DeltaUpdates extends Base {
          * @protected
          */
         className: 'Neo.main.DeltaUpdates',
+        /**
+         * @member {Number} countDeltas=0
+         * @protected
+         */
+        countDeltas: 0,
+        /**
+         * @member {Number} countDeltasPer250ms=0
+         * @protected
+         */
+        countDeltasPer250ms: 0,
+        /**
+         * @member {Number} countUpdates=0
+         * @protected
+         */
+        countUpdates: 0,
+        /**
+         * @member {Boolean} renderCountDeltas_=false
+         * @protected
+         */
+        renderCountDeltas_: false,
         /**
          * @member {Boolean} singleton=true
          */
         singleton: true
     }
 
+    /**
+     * @member {Number} logDeltasIntervalId=0
+     * @protected
+     */
+    logDeltasIntervalId = 0
     /**
      * Private property to store the dynamically loaded renderer module.
      * @member {Neo.main.render.DomApiRenderer|Neo.main.render.DomApiRenderer|null} #renderer=null
@@ -44,8 +69,14 @@ class DeltaUpdates extends Base {
     construct(config) {
         super.construct(config);
 
+        let me = this;
+
+        if (Neo.config.renderCountDeltas) {
+            me.renderCountDeltas = true
+        }
+
         // Initiate the asynchronous loading of the renderer here.
-        this.#_readyPromise = (async () => {
+        me.#_readyPromise = (async () => {
             try {
                 let module;
 
@@ -55,7 +86,7 @@ class DeltaUpdates extends Base {
                     module = await import('./render/DomApiRenderer.mjs')
                 }
 
-                this.#renderer = module.default
+                me.#renderer = module.default
             } catch (err) {
                 console.error('DeltaUpdates: Failed to load renderer module:', err);
                 throw err // Re-throw to propagate initialization failures
@@ -63,6 +94,35 @@ class DeltaUpdates extends Base {
         })()
     }
 
+    /**
+     * Triggered after the renderCountDeltas config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetRenderCountDeltas(value, oldValue) {
+        let me                    = this,
+            {logDeltasIntervalId} = me,
+            node;
+
+        if (value) {
+            if (logDeltasIntervalId === 0) {
+                me.logDeltasIntervalId = setInterval(() => {
+                    node = document.getElementById('neo-delta-updates');
+
+                    if (node) {
+                        node.innerHTML = String(me.countDeltasPer250ms * 4)
+                    }
+
+                    me.countDeltasPer250ms = 0
+                }, 250)
+            }
+        } else {
+            logDeltasIntervalId && clearInterval(logDeltasIntervalId);
+            me.logDeltasInterval = 0
+        }
+    }
+
     /**
      * @param {HTMLElement} node
      * @param {String}      nodeName

package/src/main/DomAccess.mjs

@@ -54,21 +54,6 @@ class DomAccess extends Base {
          * @protected
          */
         className: 'Neo.main.DomAccess',
-        /**
-         * @member {Number} countDeltas=0
-         * @protected
-         */
-        countDeltas: 0,
-        /**
-         * @member {Number} countDeltasPer250ms=0
-         * @protected
-         */
-        countDeltasPer250ms: 0,
-        /**
-         * @member {Number} countUpdates=0
-         * @protected
-         */
-        countUpdates: 0,
         /**
          * Remote method access for other workers
          * @member {Object} remote
@@ -102,11 +87,6 @@ class DomAccess extends Base {
                 'windowScrollTo'
             ]
         },
-        /**
-         * @member {Boolean} renderCountDeltas_=false
-         * @protected
-         */
-        renderCountDeltas_: false,
         /**
          * @member {Boolean} singleton=true
          * @protected
@@ -114,12 +94,6 @@ class DomAccess extends Base {
         singleton: true
     }
 
-    /**
-     * @member {Number} logDeltasIntervalId=0
-     * @protected
-     */
-    logDeltasIntervalId = 0
-
     /**
      * @returns {HTMLElement}
      */
@@ -143,10 +117,6 @@ class DomAccess extends Base {
 
         let me = this;
 
-        if (Neo.config.renderCountDeltas) {
-            me.renderCountDeltas = true
-        }
-
         me.initGlobalListeners();
 
         // Set up our aligning callback which is called when things change which may
@@ -218,35 +188,6 @@ class DomAccess extends Base {
         document.head.appendChild(script)
     }
 
-    /**
-     * Triggered after the renderCountDeltas config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @protected
-     */
-    afterSetRenderCountDeltas(value, oldValue) {
-        let me                    = this,
-            {logDeltasIntervalId} = me,
-            node;
-
-        if (value) {
-            if (logDeltasIntervalId === 0) {
-                me.logDeltasIntervalId = setInterval(() => {
-                    node = document.getElementById('neo-delta-updates');
-
-                    if (node) {
-                        node.innerHTML = String(me.countDeltasPer250ms * 4)
-                    }
-
-                    me.countDeltasPer250ms = 0
-                }, 250)
-            }
-        } else {
-            logDeltasIntervalId && clearInterval(logDeltasIntervalId);
-            me.logDeltasInterval = 0
-        }
-    }
-
     /**
      * @param {Object} data
      * @returns {Promise<void>}

package/src/vdom/Helper.mjs

@@ -46,14 +46,14 @@ class Helper extends Base {
      * @returns {Object} deltas
      * @protected
      */
-    compareAttributes(config) {
-        let {deltas, oldVnode, vnode, vnodeMap} = config,
-            attributes, delta, value, keys, styles, add, remove;
-
+    compareAttributes({deltas, oldVnode, vnode, vnodeMap}) {
+        // Do not compare attributes for component references
         if (oldVnode.componentId && (oldVnode.id === vnode.id || oldVnode.componentId === vnode.id)) {
             return deltas
         }
 
+        let attributes, delta, value, keys, styles, add, remove;
+
         if (vnode.vtype === 'text' && vnode.innerHTML !== oldVnode.innerHTML) {
             deltas.default.push({
                 action  : 'updateVtext',
@@ -265,7 +265,7 @@ class Helper extends Base {
                 if (me.isMovedNode(childNode, oldVnodeMap)) {
                     me.moveNode({deltas, insertDelta, oldVnodeMap, vnode: childNode, vnodeMap})
                 } else {
-                    me.insertNode({deltas, index: i + insertDelta, oldVnodeMap, vnode: childNode, vnodeMap});
+                    me.insertNode({deltas, index: i + insertDelta, oldVnodeMap, vnode: childNode, vnodeMap})
                 }
 
                 if (oldChildNode && vnodeId === vnodeMap.get(oldChildNodeId)?.parentNode.id) {
@@ -380,12 +380,12 @@ class Helper extends Base {
             }
         });
 
-        // Especially relevant for vtype='text'
+        // Relevant for vtype='text'
         if (Object.keys(node.attributes).length < 1) {
             delete node.attributes
         }
 
-        // Especially relevant for vtype='text'
+        // Relevant for vtype='text'
         if (Object.keys(node.style).length < 1) {
             delete node.style
         }
@@ -396,10 +396,10 @@ class Helper extends Base {
     /**
      * Creates a flat map of the tree, containing ids as keys and infos as values
      * @param {Object}         config
-     * @param {Neo.vdom.VNode} config.vnode
-     * @param {Neo.vdom.VNode} [config.parentNode=null]
      * @param {Number}         [config.index=0]
      * @param {Map}            [config.map=new Map()]
+     * @param {Neo.vdom.VNode} [config.parentNode=null]
+     * @param {Neo.vdom.VNode} config.vnode
      * @returns {Map}
      *     {String}         id vnode.id (convenience shortcut)
      *     {Number}         index
@@ -407,18 +407,15 @@ class Helper extends Base {
      *     {Neo.vdom.VNode} vnode
      * @protected
      */
-    createVnodeMap(config) {
-        let {vnode, parentNode=null, index=0, map=new Map()} = config,
-            id;
-
+    createVnodeMap({index=0, map=new Map(), parentNode=null, vnode}) {
         if (vnode) {
-            id = vnode.id || vnode.componentId;
+            let id = vnode.id || vnode.componentId;
 
             map.set(id, {id, index, parentNode, vnode});
 
             vnode.childNodes?.forEach((childNode, index) => {
-                this.createVnodeMap({vnode: childNode, parentNode: vnode, index, map})
-            });
+                this.createVnodeMap({index, map, parentNode: vnode, vnode: childNode})
+            })
         }
 
         return map
@@ -435,9 +432,8 @@ class Helper extends Base {
      * @returns {Map}
      * @protected
      */
-    findMovedNodes(config) {
-        let {movedNodes=new Map(), oldVnodeMap, vnode, vnodeMap} = config,
-            id = vnode?.id;
+    findMovedNodes({movedNodes=new Map(), oldVnodeMap, vnode, vnodeMap}) {
+        let id = vnode?.id;
 
         if (id) {
             if (this.isMovedNode(vnode, oldVnodeMap)) {
@@ -454,6 +450,27 @@ class Helper extends Base {
         return movedNodes
     }
 
+    /**
+     * For delta updates to work, every node inside the live DOM needs a unique ID.
+     * Text nodes need to get wrapped into comment nodes, which contain the ID to ensure consistency.
+     * As the result, we need a physical index which counts every text node as 3 nodes.
+     * @param {Neo.vdom.VNode} parentNode
+     * @param {Number}         logicalIndex
+     * @returns {Number}
+     */
+    getPhysicalIndex(parentNode, logicalIndex) {
+        let physicalIndex = logicalIndex,
+            i              = 0;
+
+        for (; i < logicalIndex; i++) {
+            if (parentNode.childNodes[i]?.vtype === 'text') {
+                physicalIndex += 2 // Accounts for <!--neo-vtext--> wrappers
+            }
+        }
+
+        return physicalIndex
+    }
+
     /**
      * Only import for the DOM API based mount adapter.
      * @returns {Promise<void>}
@@ -493,22 +510,7 @@ class Helper extends Base {
             movedNodes             = me.findMovedNodes({oldVnodeMap, vnode, vnodeMap}),
             delta                  = {action: 'insertNode', parentId},
             hasLeadingTextChildren = false,
-            physicalIndex          = index, // Start with the logical index
-            i                      = 0,
-            siblingVnode;
-
-        // Calculate physicalIndex for DOM insertion and hasLeadingTextChildren flag
-        // This loop processes the children of the *NEW* parent's VNode in the *current* state (parentNode.childNodes)
-        // up to the logical insertion point.
-        for (; i < index; i++) {
-            siblingVnode = parentNode.childNodes[i];
-
-            // If we encounter a text VNode before the insertion point, adjust physicalIndex
-            if (siblingVnode?.vtype === 'text') {
-                physicalIndex += 2; // Each text VNode adds 2 comment nodes to the physical count
-                hasLeadingTextChildren = true
-            }
-        }
+            physicalIndex          = me.getPhysicalIndex(parentNode, index); // Processes the children of the *NEW* parent's VNode in the *current* state
 
         Object.assign(delta, {hasLeadingTextChildren, index: physicalIndex});
 
@@ -568,21 +570,7 @@ class Helper extends Base {
             movedParentNode     = movedNode.parentNode,
             {childNodes}        = movedParentNode,
             delta               = {action: 'moveNode', id: vnode.id, parentId},
-            physicalIndex       = index, // Start with the logical index
-            i                   = 0,
-            siblingVnode;
-
-        // Calculate physicalIndex for DOM insertion.
-        // This loop processes the children of the *NEW* parent's VNode in the *current* state (parentNode.childNodes)
-        // up to the logical insertion point.
-        for (; i < index; i++) {
-            siblingVnode = parentNode.childNodes[i];
-
-            if (siblingVnode?.vtype === 'text') {
-                // Each text VNode adds 2 comment nodes to the physical count
-                physicalIndex += 2
-            }
-        }
+            physicalIndex       = this.getPhysicalIndex(parentNode, index); // Processes the children of the *NEW* parent's VNode in the *current* state (parentNode.childNodes)
 
         Object.assign(delta, {index: physicalIndex + insertDelta});
         deltas.default.push(delta);