neo.mjs 10.0.0-alpha.3 → 10.0.0-alpha.4

package/src/vdom/VNode.mjs

@@ -76,7 +76,7 @@ class VNode {
         } else {
             Object.assign(me, {
                 attributes: config.attributes || {},
-                className : config.className  || [],
+                className : normalizeClassName(config.className),
                 nodeName  : config.nodeName   || 'div',
                 style     : config.style
             });
@@ -88,7 +88,7 @@ class VNode {
 
             // We only apply textContent, in case it has content
             else if (Object.hasOwn(config, 'textContent')) {
-                me.textContent = Neo.config.useStringBasedMounting ? StringUtil.escapeHtml(textContent) : textContent
+                me.textContent = Neo.config.useDomApiRenderer ? textContent : StringUtil.escapeHtml(textContent)
             }
         }
 
@@ -99,6 +99,42 @@ class VNode {
     }
 }
 
+/**
+ * vdom cls definitions might contain spaces, especially when it comes to iconCls.
+ * @example: myVdom = {cls: ['my-button', 'fa fa-user']}
+ *
+ * On DOM level, classList.add() will throw, in case it gets an input containing a space.
+ *
+ * This is a module-scoped utility function, not a method of the VNode class.
+ * VNodes are transferred via structured cloning (e.g., in postMessage()), which strips methods.
+ * Keeping this logic separate from the VNode class itself ensures conceptual purity and a cleaner data model,
+ * as methods defined on the VNode instance would be lost during transfer anyway.
+ *
+ * @param {String|String[]} classNameInput
+ * @returns {String[]}
+ * @private
+ */
+function normalizeClassName(classNameInput) {
+    let normalizedClasses = [];
+
+    if (Neo.isString(classNameInput)) {
+        normalizedClasses = classNameInput.split(' ').filter(Boolean)
+    } else if (Array.isArray(classNameInput)) {
+        classNameInput.forEach(cls => {
+            if (Neo.isString(cls)) {
+                if (cls.includes(' ')) {
+                    normalizedClasses.push(...cls.split(' ').filter(Boolean))
+                } else if (cls !== '') {
+                    normalizedClasses.push(cls)
+                }
+            }
+        })
+    }
+
+    // Remove duplicates if necessary
+    return [...new Set(normalizedClasses)]
+}
+
 const ns = Neo.ns('Neo.vdom', true);
 ns.VNode = VNode;
 

package/src/worker/App.mjs

@@ -35,7 +35,8 @@ class App extends Base {
                 'destroyNeoInstance',
                 'fireEvent',
                 'getConfigs',
-                'setConfigs'
+                'setConfigs',
+                'setGlobalConfig' // points to worker.Base: setGlobalConfig()
             ]
         },
         /**

package/src/worker/Base.mjs

@@ -71,8 +71,9 @@ class Worker extends Base {
             gt.onmessage = me.onMessage.bind(me)
         }
 
-        Neo.currentWorker = me;
-        Neo.workerId      = me.workerId
+        Neo.currentWorker   = me;
+        Neo.setGlobalConfig = me.setGlobalConfig.bind(me);
+        Neo.workerId        = me.workerId
     }
 
     /**
@@ -220,10 +221,17 @@ class Worker extends Base {
     }
 
     /**
-     * @param {Object} msg
+     * Handles the initial registration of the `Neo.config` for this worker's realm.
+     * Triggered when receiving a worker message with `{action: 'registerNeoConfig'}` from the Main Thread's `Neo.worker.Manager`.
+     * This method is primarily responsible for setting the initial global `Neo.config` object in this worker's scope
+     * upon its creation. It also handles associating `windowId` with `MessagePort`s for Shared Workers.
+     *
+     * @param {Object} msg The incoming message object.
+     * @param {Object} msg.data The initial global Neo.config data object.
+     * @param {Number} msg.data.windowId The unique ID of the window/tab (relevant for SharedWorkers).
      */
     onRegisterNeoConfig(msg) {
-        Neo.config = Neo.config || {};
+        Neo.ns('Neo.config', true);
 
         let me         = this,
             {windowId} = msg.data,
@@ -236,7 +244,29 @@ class Worker extends Base {
             }
         }
 
-        Object.assign(Neo.config, msg.data)
+        Neo.merge(Neo.config, msg.data)
+    }
+
+    /**
+     * Handles runtime updates to the global `Neo.config` for this worker's realm.
+     * This method is triggered when receiving a worker message with `{action: 'setNeoConfig'}`
+     * from the Main Thread's `Neo.worker.Manager`. This message signifies a global config change
+     * that originated either from this worker's Main Thread or was broadcast from another
+     * connected browser window via a Shared Worker.
+     *
+     * It merges the incoming configuration changes into this worker's local `Neo.config`
+     * and fires a local `neoConfigChange` event, allowing other instances within this worker
+     * to react to the updated configuration.
+     *
+     * @param {Object} msg The destructured arguments from the message payload.
+     * @param {Object} msg.config The partial or full `Neo.config` object to merge.
+     */
+    onSetNeoConfig({config}) {
+        let me = this;
+
+        Neo.merge(Neo.config, config);
+
+        me.fire('neoConfigChange', config)
     }
 
     /**
@@ -307,6 +337,58 @@ class Worker extends Base {
 
         return message
     }
+
+    /**
+     * Initiates a global Neo.config change from a worker's context.
+     * This method is exposed globally as `Neo.setGlobalConfig` within each worker realm.
+     *
+     * It orchestrates the propagation of the config change to the Main Thread
+     * and, if a Shared Worker is active, across all connected browser windows,
+     * ensuring a single, consistent Neo.config state everywhere.
+     *
+     * You can pass a partial config object to update specific keys.
+     * For nested objects, Neo.mjs performs a deep merge.
+     *
+     * @param {Object} config The partial or full Neo.config object with changes to apply.
+     */
+    setGlobalConfig(config) {
+        const
+            me        = this,
+            {Manager} = Neo.worker; // Remote access proxy object
+
+        // Apply the config change locally to this worker's Neo.config and
+        // trigger its local change events immediately. This ensures immediate
+        // feedback and an updated state for the worker that initiated the change.
+        me.onSetNeoConfig({config});
+
+        if (me.isSharedWorker) {
+            // This block executes when the calling worker instance is a Shared Worker.
+            // This happens if `Neo.config.useSharedWorkers` is true, meaning App, VDom,
+            // Data, Canvas, and Task workers are all SharedWorker instances.
+            // This Shared Worker (the one where setGlobalConfig was called) acts as the
+            // central point to inform all connected Main Threads (browser windows).
+            me.ports.forEach((port, index) => {
+                // Send the config change to each connected Main Thread.
+                // The `broadcast` flag is crucial here for the *receiving* Main Thread:
+                // - `broadcast: true` (for the first port/Main Thread in the list): This Main Thread
+                //   will apply the config locally and is then responsible for propagating it to *all*
+                //   its own associated Shared Workers connected to that Main Thread),
+                //   **excluding the worker that originated this change**.
+                // - `broadcast: false` (for all other ports/Main Threads): These Main Threads
+                //   will simply apply the config locally and stop. They are passive recipients
+                //   of the broadcast, synchronizing their state without initiating further actions back.
+                // The `excludeOrigin` parameter ensures the originating worker doesn't receive a redundant broadcast.
+                Manager.setNeoConfig({broadcast: index < 1, config, excludeOrigin: me.workerId, windowId: port.windowId})
+            })
+        } else {
+            // This Dedicated Worker (the one where setGlobalConfig was called) informs
+            // its single, connected Main Thread. The Main Thread will then:
+            // 1. Apply the config locally.
+            // 2. Broadcast this change to *all* other Dedicated Workers connected to
+            //    *that same Main Thread*, **excluding the sender worker itself**.
+            Manager.setNeoConfig({broadcast: true, config, excludeOrigin: me.workerId})
+        }
+    }
 }
 
 export default Neo.setupClass(Worker);

package/src/worker/Manager.mjs

@@ -27,11 +27,6 @@ class Manager extends Base {
          * @protected
          */
         className: 'Neo.worker.Manager',
-        /**
-         * @member {Boolean} singleton=true
-         * @protected
-         */
-        singleton: true,
         /**
          * @member {Number} activeWorkers=0
          * @protected
@@ -51,12 +46,29 @@ class Manager extends Base {
          * @member {String[]|Neo.core.Base[]|null} mixins=[Observable, RemoteMethodAccess]
          */
         mixins: [Observable, RemoteMethodAccess],
+        /**
+         * Remote method access for other workers
+         * @member {Object} remote
+         * @protected
+         */
+        remote: {
+            app   : ['setNeoConfig'],
+            canvas: ['setNeoConfig'],
+            data  : ['setNeoConfig'],
+            task  : ['setNeoConfig'],
+            vdom  : ['setNeoConfig']
+        },
         /**
          * True in case the current browser supports window.SharedWorker.
          * @member {Boolean} sharedWorkersEnabled=false
          * @protected
          */
         sharedWorkersEnabled: false,
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true,
         /**
          * Internal flag to stop the worker communication in case their creation fails
          * @member {Boolean} stopCommunication=false
@@ -71,7 +83,7 @@ class Manager extends Base {
          */
         webWorkersEnabled: false,
         /**
-         * Using the current timestamp as an unique window identifier
+         * Using the current timestamp as a unique window identifier
          * @member {Number} windowId=new Date().getTime()
          * @protected
          */
@@ -121,7 +133,8 @@ class Manager extends Base {
 
         !Neo.insideWorker && me.createWorkers();
 
-        Neo.workerId = 'main';
+        Neo.setGlobalConfig = me.setGlobalConfig.bind(me);
+        Neo.workerId        = 'main';
 
         me.promises = {};
 
@@ -136,18 +149,18 @@ class Manager extends Base {
 
     /**
      * Sends a message to each worker defined inside the this.workers config.
-     * @param {Object} msg
+     * Only sends to workers that are currently active and available.
+     * @param {Object} msg             The message payload to broadcast.
+     * @param {Object} [excludeOrigin] Optionally pass the origin realm name to exclude from the broadcast.
      */
-    broadcast(msg) {
-        Object.keys(this.workers).forEach(name => {
-            if (!(
-                name === 'canvas' && !NeoConfig.useCanvasWorker ||
-                name === 'task'   && !NeoConfig.useTaskWorker   ||
-                name === 'vdom'   && !NeoConfig.useVdomWorker
-            )) {
-                this.sendMessage(name, msg)
+    broadcast(msg, excludeOrigin) {
+        let me = this;
+
+        Object.keys(me.workers).forEach(name => {
+            if (name !== excludeOrigin && me.getWorker(name)) {
+                me.sendMessage(name, msg)
             }
-        });
+        })
     }
 
     /**
@@ -325,8 +338,10 @@ class Manager extends Base {
                     data = data.data
                 }
 
-                promise[data.reject ? 'reject' : 'resolve'](data);
-                delete me.promises[replyId]
+                if (data) {
+                    promise[data.reject ? 'reject' : 'resolve'](data);
+                    delete me.promises[replyId]
+                }
             }
         }
 
@@ -385,7 +400,14 @@ class Manager extends Base {
 
         return new Promise((resolve, reject) => {
             let message = me.sendMessage(dest, opts, transfer),
-                msgId   = message.id;
+                msgId;
+
+            if (!message) {
+                reject(new Error(me.stopCommunication ? 'Communication is stopped.' : `Target worker '${dest}' does not exist.`));
+                return
+            }
+
+            msgId = message.id;
 
             me.promises[msgId] = {reject, resolve}
         })
@@ -412,7 +434,7 @@ class Manager extends Base {
      * @param {Array} [transfer] An optional array of Transferable objects to transfer ownership of.
      * If the ownership of an object is transferred, it becomes unusable (neutered) in the context it was sent from
      * and becomes available only to the worker it was sent to.
-     * @returns {Neo.worker.Message}
+     * @returns {Neo.worker.Message|null}
      * @protected
      */
     sendMessage(dest, opts, transfer) {
@@ -427,17 +449,53 @@ class Manager extends Base {
                 worker = me.getWorker(dest)
             }
 
-            if (!worker) {
-                throw new Error('Called sendMessage for a worker that does not exist: ' + dest)
+            if (worker) {
+                opts.destination = dest;
+
+                message = new Message(opts);
+
+                (worker.port ? worker.port : worker).postMessage(message, transfer);
+                return message
             }
+        }
+
+        return null
+    }
+
+    /**
+     * Initiates a global Neo.config change from the Main Thread.
+     *
+     * This method acts as a proxy, routing the config change request to the App Worker.
+     * This design centralizes the complex multi-threaded and multi-window synchronization
+     * logic within the App Worker's `setGlobalConfig` method.
+     *
+     * Developers should typically use `Neo.setGlobalConfig(config)` directly,
+     * which will correctly resolve to this proxy when called from the Main Thread.
+     *
+     * @param {Object} config The partial or full Neo.config object with changes to apply.
+     */
+    setGlobalConfig(config) {
+        // Remotely calls the App Worker's setGlobalConfig method.
+        // This ensures all global config changes are processed through the App Worker
+        // which contains the centralized multi-window synchronization logic.
+        Neo.worker.App.setGlobalConfig(config)
+    }
 
-            opts.destination = dest;
+    /**
+     * Change Neo.config globally from a worker
+     * @param {Object}  data
+     * @param {Boolean} data.broadcast
+     * @param {Object}  data.config
+     * @param {String}  [data.excludeOrigin]
+     */
+    setNeoConfig({broadcast, config, excludeOrigin}) {
+        let me = this;
 
-            message = new Message(opts);
+        Neo.merge(Neo.config, config);
 
-            (worker.port ? worker.port : worker).postMessage(message, transfer);
-            return message
-        }
+        me.fire('neoConfigChange', config);
+
+        broadcast && me.broadcast({action: 'setNeoConfig', config}, excludeOrigin)
     }
 }
 

package/resources/data/deck/learnneo/tree.json

@@ -1,50 +0,0 @@
-{"data": [
-    {"name": "Using These Topics",                         "parentId": null,                                 "id": "UsingTheseTopics" },
-    {"name": "Benefits",                                   "parentId": null,                "isLeaf": false, "id": "Benefits"},
-        {"name": "Introduction ",                          "parentId": "Benefits",                           "id": "benefits.Introduction"},
-        {"name": "Off the Main Thread",                    "parentId": "Benefits",                           "id": "benefits.OffTheMainThread"},
-        {"name": "4 Environments",                         "parentId": "Benefits",                           "id": "benefits.FourEnvironments"},
-        {"name": "Unified Config System",                  "parentId": "Benefits",                           "id": "benefits.ConfigSystem"},
-        {"name": "Extreme Speed",                          "parentId": "Benefits",                           "id": "benefits.Speed"},
-        {"name": "Multi-Window Applications",              "parentId": "Benefits",                           "id": "benefits.MultiWindow"},
-        {"name": "Quick Application Development",          "parentId": "Benefits",                           "id": "benefits.Quick"},
-        {"name": "Complexity and Effort",                  "parentId": "Benefits",                           "id": "benefits.Effort"},
-        {"name": "Forms Engine",                           "parentId": "Benefits",                           "id": "benefits.FormsEngine"},
-        {"name": "Features and Benefits Summary",          "parentId": "Benefits",                           "id": "benefits.Features"},
-    {"name": "Getting Started",                            "parentId": null,                "isLeaf": false, "id": "GettingStarted", "collapsed": true},
-        {"name": "Setup",                                  "parentId": "GettingStarted",                     "id": "gettingstarted.Setup"},
-        {"name": "Workspaces and Applications",            "parentId": "GettingStarted",                     "id": "gettingstarted.Workspaces"},
-        {"name": "Describing a View",                      "parentId": "GettingStarted",                     "id": "gettingstarted.DescribingTheUI"},
-        {"name": "Events",                                 "parentId": "GettingStarted",                     "id": "gettingstarted.Events"},
-        {"name": "Component References",                   "parentId": "GettingStarted",                     "id": "gettingstarted.References"},
-        {"name": "Extending Classes",                      "parentId": "GettingStarted",                     "id": "gettingstarted.Extending"},
-        {"name": "Config",                                 "parentId": "GettingStarted",                     "id": "gettingstarted.Config"},
-        {"name": "Shared Bindable Data",                   "parentId": "GettingStarted",                     "id": "gettingstarted.ComponentModels"},
-    {"name": "Tutorials",                                  "parentId": null,                "isLeaf": false, "id": "Tutorials",  "collapsed": true},
-        {"name": "Rock Scissors Paper",                    "parentId": "Tutorials",                          "id": "tutorials.RSP", "hidden": true},
-        {"name": "Earthquakes",                            "parentId": "Tutorials",                          "id": "tutorials.Earthquakes"},
-        {"name": "Todo List",                              "parentId": "Tutorials",                          "id": "tutorials.TodoList"},
-    {"name": "Guides",                                     "parentId": null,                "isLeaf": false, "id": "InDepth",  "collapsed": true},
-        {"name": "Instance Lifecycle",                     "parentId": "InDepth",                            "id": "guides.InstanceLifecycle", "hidden": true},
-        {"name": "User Input (Forms)",                     "parentId": "InDepth",                            "id": "guides.Forms",  "hidden": true},
-        {"name": "Component and Container Basics",         "parentId": "InDepth",                            "id": "guides.ComponentsAndContainers"},
-        {"name": "Layouts",                                "parentId": "InDepth",           "isLeaf": false, "id": "guides.Layouts", "hidden": true},
-        {"name": "Shared Bindable Data (State Providers)", "parentId": "InDepth",                            "id": "guides.StateProviders"},
-        {"name": "Custom Components",                      "parentId": "InDepth",                            "id": "guides.CustomComponents", "hidden": true},
-        {"name": "Events",                                 "parentId": "InDepth",           "isLeaf": false, "id": "GuideEvents"},
-            {"name": "Custom Events",                      "parentId": "GuideEvents",                        "id": "guides.events.CustomEvents"},
-            {"name": "DOM Events",                         "parentId": "GuideEvents",                        "id": "guides.events.DomEvents"},
-        {"name": "Portal App",                             "parentId": "InDepth",                            "id": "guides.PortalApp"},
-        {"name": "Tables (Stores)",                        "parentId": "InDepth",                            "id": "guides.Tables", "hidden": true},
-        {"name": "Multi-Window Applications",              "parentId": "InDepth",                            "id": "guides.MultiWindow", "hidden":  true},
-        {"name": "Main Thread Addons",                     "parentId": "InDepth",           "isLeaf": false, "id": "MainThreadAddons", "hidden": true},
-            {"name": "Introduction",                       "parentId": "MainThreadAddons",                   "id": "guides.MainThreadAddonIntro"},
-            {"name": "Example",                            "parentId": "MainThreadAddons",                   "id": "guides.MainThreadAddonExample"},
-        {"name": "Mixins",                                 "parentId": "InDepth",                            "id": "guides.Mixins", "hidden": true},
-    {"name": "JavaScript Classes",                         "parentId": null,                "isLeaf": false, "id": "JavaScript", "hidden": true},
-        {"name": "Classes, Properties, and Methods",       "parentId": "JavaScript",                         "id": "javascript.Classes"},
-        {"name": "Overriding Methods",                     "parentId": "JavaScript",                         "id": "javascript.Overrides"},
-        {"name": "Other JavaScript Class Features",        "parentId": "JavaScript",                         "id": "javascript.ClassFeatures"},
-        {"name": "Super",                                  "parentId": "JavaScript",                         "id": "javascript.Super"},
-        {"name": "New Node",                               "parentId": "JavaScript",                         "id": "javascript.NewNode"}
-]}

package/resources/data/deck/whyneo.md

@@ -1,80 +0,0 @@
-
-#hi
-
-
-Neo.mjs is a framework used to create browser-based applications.
-
-Some key features and benefits of Neo.mjs are:
-
-<div type="expander" caption="Multi-Threaded">
-<p>
-When a Neo.mjs application starts, the framework spawns three web-workers. 
-Web-workers are each run in their own thread. As a result, a typical Neo.mjs application
-has four threads:
-<ol>
-<li>The _main_ thread, where DOM updates are applied
-<li>An _application_ web-worker where normal application locic is run
-    <li>A _data_ web-worker were HTTP and socket calls are run
-<li>A _view_ web-worker that manages delta updates
-</ol>
-</div>
-
-<div type="expander" caption="Extreme Speed">
-<p>
-The Neo.mjs web-worker proccesses are automatically run in parallel, on separate CPU cores.
-</p>
-<p>
-By contrast, other JavaScript frameworks run in a single thread. That means 
-in a typical framework all business logic, data handling, and DOM rendering compete for 
-CPU reasources.
-</p>
-<p>
-This means Neo.mjs applications run and render faster. This is 
-particularly beneficial for processor- and data-intensive applications, 
-and applications that need to rapidly update what's viewed. In testing, Neo.mjs applications 
-easily apply over 20,000 DOM updates per second. 
-</p>
-<p>
-If the default four threads aren't enough, you're free to launch additional web-worker threads 
-to run other specialized logic. 
-</p>
-</div>
-
-<div type="expander" caption="Quick Application Development">
-<p>
-Neo.js classes let you specify properties in a way that allows code to detect "before" and "after"
-changes. This makes it easy to handle value validation and transformation, and react to changes. 
-</p>
-<p>
-Neo.mjs also has elegant yet powerful state management features that make it easy to create shared,
-bindable data. For example, if two components are bound to the same propery, a change to the 
-property will automatically be applied to both components.
-</p>
-</div>
-
-<div type="expander" caption="Multi-Window Applications">
-<p>
-Neo.mjs applications can also launch as _shared web workers_, which allows you to have a single 
-application run in multiple browser windows; those windows could be moved to multiple monitors.
-</p>
-<p>
-For example, you can have a data analysis application with a control panel on one monitor, 
-tabular data in another, and charts on another &mdash; all sharing the same data, handling events
-across windows, running seamlessly as a single application. 
-</p>
-</div>
-
-<div type="expander" caption="Open-Source and Standards-Based">
-<p>
-Neo.mjs is an open-source library. Features needed for the community can be added to the
-library via pull-requests. And since Neo.mjs uses the standard JavaScript class system, 
-all Neo.mjs classes can be extended.
-</p>
-<p>
-Neo.mjs uses standard modular JavaScript, so developers don't need to learn non-standard language
-syntax, and there's no need for special pre-compilers or WebPack modules.
-That means fewer dependencies and easier configuration. Furthermore, the use of
-standard JavaScript makes debugging easier: any statement you write while developing your
-applcation can also be run in the debugging console.
-</p>
-</div>