neo.mjs 6.12.0 → 6.13.0

package/src/worker/Manager.mjs

@@ -87,6 +87,9 @@ class Manager extends Base {
             data: {
                 fileName: devMode ? 'Data.mjs'   : 'dataworker.js'
             },
+            task: {
+                fileName: devMode ? 'Task.mjs'   : 'taskworker.js'
+            },
             vdom: {
                 fileName: devMode ? 'VDom.mjs'   : 'vdomworker.js'
             }
@@ -124,7 +127,7 @@ class Manager extends Base {
             'message:readDom'           : {fn: DomAccess.onReadDom,            scope: DomAccess},
             'message:registerRemote'    : {fn: me.onRegisterRemote,            scope: me},
             'message:workerConstructed' : {fn: me.onWorkerConstructed,         scope: me}
-        });
+        })
     }
 
     /**
@@ -135,9 +138,10 @@ class Manager extends Base {
         Object.keys(this.workers).forEach(name => {
             if (!(
                 name === 'canvas' && !NeoConfig.useCanvasWorker ||
+                name === 'task'   && !NeoConfig.useTaskWorker   ||
                 name === 'vdom'   && !NeoConfig.useVdomWorker
             )) {
-                this.sendMessage(name, msg);
+                this.sendMessage(name, msg)
             }
         });
     }
@@ -163,7 +167,7 @@ class Manager extends Base {
 
         me.activeWorkers++;
 
-        return worker;
+        return worker
     }
 
     /**
@@ -193,17 +197,18 @@ class Manager extends Base {
 
         for ([key, value] of Object.entries(me.workers)) {
             if (key === 'canvas' && !config.useCanvasWorker ||
+                key === 'task'   && !config.useTaskWorker   ||
                 key === 'vdom'   && !config.useVdomWorker
             ) {
-                continue;
+                continue
             }
 
             try {
-                value.worker = me.createWorker(value);
+                value.worker = me.createWorker(value)
             } catch (e) {
                 document.body.innerHTML = e;
                 me.stopCommunication = true;
-                break;
+                break
             }
 
             me.sendMessage(key, {
@@ -223,13 +228,13 @@ class Manager extends Base {
         NeoConfig.hasTouchEvents = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
 
         if (window.Worker) {
-            me.webWorkersEnabled = true;
+            me.webWorkersEnabled = true
         } else {
-            throw new Error('Your browser does not support Web Workers');
+            throw new Error('Your browser does not support Web Workers')
         }
 
         if (window.SharedWorker) {
-            me.sharedWorkersEnabled = true;
+            me.sharedWorkersEnabled = true
         }
     }
 
@@ -239,10 +244,10 @@ class Manager extends Base {
      */
     getWorker(name) {
         if (name === 'service') {
-            return navigator.serviceWorker?.controller || this.serviceWorker;
+            return navigator.serviceWorker?.controller || this.serviceWorker
         }
 
-        return name instanceof Worker ? name : this.workers[name].worker;
+        return name instanceof Worker ? name : this.workers[name].worker
     }
 
     /**
@@ -253,7 +258,7 @@ class Manager extends Base {
             action       : 'loadApplication',
             path,
             resourcesPath: NeoConfig.resourcesPath
-        });
+        })
     }
 
     /**
@@ -265,9 +270,9 @@ class Manager extends Base {
         me.constructedThreads++;
 
         if (me.constructedThreads === me.activeWorkers) {
-            NeoConfig.appPath && setTimeout(() => { // better save than sorry => all remotes need to be registered
+            NeoConfig.appPath && setTimeout(() => { // better safe than sorry => all remotes need to be registered
                 me.loadApplication(NeoConfig.appPath);
-            }, NeoConfig.loadApplicationDelay);
+            }, NeoConfig.loadApplicationDelay)
         }
     }
 
@@ -277,7 +282,7 @@ class Manager extends Base {
      */
     onWorkerError(e) {
         // starting a worker from a JS module will show JS errors in a correct way
-        !devMode && console.log('Worker Error:', e);
+        !devMode && console.log('Worker Error:', e)
     }
 
     /**
@@ -307,12 +312,12 @@ class Manager extends Base {
                     // we want to delay the message until the rendering queue has processed it
                     // see: https://github.com/neomjs/neo/issues/2864
                     me.promiseForwardMessage(data).then(msgData => {
-                        me.sendMessage(msgData.destination, msgData);
-                    });
+                        me.sendMessage(msgData.destination, msgData)
+                    })
                 }
             } else {
                 if (data.destination === 'main') {
-                    data = data.data;
+                    data = data.data
                 }
 
                 promise[data.reject ? 'reject' : 'resolve'](data);
@@ -322,7 +327,7 @@ class Manager extends Base {
 
         if (dest !== 'main' && action !== 'reply') {
             if (data.transfer) {
-                transfer = [data.transfer];
+                transfer = [data.transfer]
             }
 
             me.promiseMessage(dest, data, transfer).then(response => {
@@ -333,8 +338,8 @@ class Manager extends Base {
                     reject : true,
                     replyId: data.id,
                     error  : err.message
-                });
-            });
+                })
+            })
         }
 
         // only needed for SharedWorkers
@@ -344,11 +349,11 @@ class Manager extends Base {
             me.broadcast({
                 action : 'registerApp',
                 appName: data.appName
-            });
+            })
         }
 
         else if (dest === 'main' && action === 'remoteMethod') {
-            me.onRemoteMethod(data);
+            me.onRemoteMethod(data)
         }
     }
 
@@ -359,8 +364,8 @@ class Manager extends Base {
      */
     promiseForwardMessage(data) {
         return new Promise((resolve, reject) => {
-            this.promises[data.replyId] = { data, reject, resolve };
-        });
+            this.promises[data.replyId] = { data, reject, resolve }
+        })
     }
 
     /**
@@ -378,8 +383,8 @@ class Manager extends Base {
             let message = me.sendMessage(dest, opts, transfer),
                 msgId   = message.id;
 
-            me.promises[msgId] = { reject, resolve };
-        });
+            me.promises[msgId] = { reject, resolve }
+        })
     }
 
     /**
@@ -391,7 +396,7 @@ class Manager extends Base {
 
             if (promise) {
                 promise.resolve(promise.data);
-                delete this.promises[replyId];
+                delete this.promises[replyId]
             }
         }
     }
@@ -412,13 +417,13 @@ class Manager extends Base {
         if (!me.stopCommunication) {
             if (opts.channelPort) {
                 worker = opts.channelPort;
-                delete opts.channelPort;
+                delete opts.channelPort
             } else {
-                worker = me.getWorker(dest);
+                worker = me.getWorker(dest)
             }
 
             if (!worker) {
-                throw new Error('Called sendMessage for a worker that does not exist: ' + dest);
+                throw new Error('Called sendMessage for a worker that does not exist: ' + dest)
             }
 
             opts.destination = dest;
@@ -426,11 +431,11 @@ class Manager extends Base {
             message = new Message(opts);
 
             (worker.port ? worker.port : worker).postMessage(message, transfer);
-            return message;
+            return message
         }
     }
 }
 
-let instance = Neo.applyClassConfig(Manager);
+let instance = Neo.setupClass(Manager);
 
 export default instance;

package/src/worker/ServiceBase.mjs

@@ -388,6 +388,6 @@ class ServiceBase extends Base {
     }
 }
 
-Neo.applyClassConfig(ServiceBase);
+Neo.setupClass(ServiceBase);
 
 export default ServiceBase;

package/src/worker/Task.mjs

@@ -0,0 +1,67 @@
+import Neo       from '../Neo.mjs';
+import Base      from './Base.mjs';
+import * as core from '../core/_export.mjs';
+
+/**
+ * The Task worker can get filled with custom remote methods as needed.
+ * To activate it, set useTaskWorker to true inside your neo-config.json and add a task.mjs file as the entry point.
+ * @class Neo.worker.Task
+ * @extends Neo.worker.Base
+ * @singleton
+ */
+class Task extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.worker.Task'
+         * @protected
+         */
+        className: 'Neo.worker.Task',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true,
+        /**
+         * @member {String} workerId='task'
+         * @protected
+         */
+        workerId: 'task'
+    }
+
+    /**
+     *
+     */
+    afterConnect() {
+        let me             = this,
+            channel        = new MessageChannel(),
+            {port1, port2} = channel;
+
+        port1.onmessage = me.onMessage.bind(me);
+
+        me.sendMessage('app', {action: 'registerPort', transfer: port2}, [port2]);
+
+        me.channelPorts.app = port1
+    }
+
+    /**
+     * @param {Object} msg
+     */
+    onRegisterNeoConfig(msg) {
+        super.onRegisterNeoConfig(msg);
+
+        let path = Neo.config.appPath.slice(0, -8); // removing "/app.mjs"
+
+        import(
+            /* webpackInclude: /\/task.mjs$/ */
+            /* webpackExclude: /\/node_modules/ */
+            /* webpackMode: "lazy" */
+            `../../${path}/task.mjs`
+        ).then(module => {
+            module.onStart()
+        })
+    }
+}
+
+let instance = Neo.setupClass(Task);
+
+export default instance;

package/src/worker/VDom.mjs

@@ -43,6 +43,6 @@ class VDom extends Base {
     }
 }
 
-let instance = Neo.applyClassConfig(VDom);
+let instance = Neo.setupClass(VDom);
 
 export default instance;

package/src/worker/mixin/RemoteMethodAccess.mjs

@@ -146,6 +146,6 @@ class RemoteMethodAccess extends Base {
     }
 }
 
-Neo.applyClassConfig(RemoteMethodAccess);
+Neo.setupClass(RemoteMethodAccess);
 
 export default RemoteMethodAccess;

package/test/components/app.mjs

@@ -3,7 +3,7 @@
 
 import '../../src/button/Base.mjs';
 import '../../src/component/DateSelector.mjs';
+import '../../src/list/Chip.mjs';
 import '../../src/form/field/Select.mjs';
-import '../../src/list/Chip.mjs'
 
 export const onStart = () => Neo.app({name: 'AppEmpty'})

package/test/components/files/form/field/Select.mjs

@@ -35,7 +35,7 @@ StartTest(t => {
         return testId;
     }
 
-    // Clear the eway for each test
+    // Clear the way for each test
     t.beforeEach(async t => {
         if (testId) {
             await Neo.worker.App.destroyNeoInstance(testId);
@@ -217,7 +217,7 @@ StartTest(t => {
 
         await t.waitForSelector('.neo-list-item:contains(Foo)');
 
-        // All data ityems represented
+        // All data items represented
         t.selectorCountIs('.neo-list-item', 3);
     });
 });

package/test/components/files/form/field/Text.mjs

@@ -0,0 +1,90 @@
+StartTest(t => {
+    let fieldComponent, inputField, testId;
+
+    async function setup(config = {}) {
+        testId = await Neo.worker.App.createNeoInstance(Neo.merge({
+            ntype     : 'textfield',
+            labelText : 'My label',
+            labelWidth: 80,
+            width     : 300
+        }, config))
+
+        // Wait for input element to be present
+        await t.waitForSelector(`#${testId} input.neo-textfield-input`);
+
+        // Grab input element
+        inputField = t.query(`#${testId} input.neo-textfield-input`)[0];
+
+        fieldComponent = document.getElementById(testId);
+
+        return testId;
+    }
+
+    // Clear the way for each test
+    t.beforeEach(async t => {
+        if (testId) {
+            await Neo.worker.App.destroyNeoInstance(testId);
+            fieldComponent = testId = null;
+        }
+    });
+
+    t.it('Check isTouched on focusLeave', async t => {
+        await setup({value: 'Hello World!'});
+        t.is(inputField.value, 'Hello World!');
+        t.hasNotCls(fieldComponent, 'neo-is-touched');
+        t.click(inputField);
+
+        t.diag('Clicked into the input field');
+        const blurEl = document.createElement('input');
+        document.body.appendChild(blurEl);
+        await t.waitFor(50);
+        await t.click(blurEl);
+
+        t.diag('Clicked into the blur element');
+        await t.waitForSelector('.neo-is-touched');
+        t.hasCls(fieldComponent, 'neo-is-touched');
+        blurEl.remove();
+    });
+
+    t.it('Check isTouched on focusEnter', async t => {
+        await setup({isTouchedEvent: 'focusEnter', value: 'Hello World!'});
+        t.is(inputField.value, 'Hello World!');
+        t.hasNotCls(fieldComponent, 'neo-is-touched');
+        await t.click(inputField);
+        t.diag('Clicked into the input field');
+        t.hasCls(fieldComponent, 'neo-is-touched');
+    });
+
+    t.it('Check isTouched set initially', async t => {
+        await setup({isTouched: true, value: 'Hello World!'});
+        t.is(inputField.value, 'Hello World!');
+        t.hasCls(fieldComponent, 'neo-is-touched');
+    });
+
+    t.it('Label Positions', async t => {
+        t.diag('left');
+        await setup({});
+        let label = t.query(`.neo-textfield-label`)[0];
+        t.isInView(label);
+
+        t.diag('top');
+        await Neo.worker.App.setConfigs({id: testId, labelPosition: 'top'});
+        await t.waitFor(50);
+        t.hasCls(fieldComponent, 'label-top');
+
+        t.diag('bottom');
+        await Neo.worker.App.setConfigs({id: testId, labelPosition: 'bottom'});
+        await t.waitFor(50);
+        t.hasCls(fieldComponent, 'label-bottom');
+
+        t.diag('right');
+        await Neo.worker.App.setConfigs({id: testId, labelPosition: 'right'});
+        await t.waitFor(50);
+        t.hasCls(fieldComponent, 'label-right');
+
+        t.diag('inline');
+        await Neo.worker.App.setConfigs({id: testId, labelPosition: 'inline'});
+        await t.waitFor(50);
+        t.hasCls(fieldComponent, 'label-inline');
+    });
+});

package/test/components/files/{component/ChipList.mjs → list/Chip.mjs}

@@ -62,12 +62,12 @@ StartTest(t => {
                 }]
             }
         }, config));
-        
+
 
         return testId;
     }
 
-    // Clear the eway for each test
+    // Clear the way for each test
     t.beforeEach(async t => {
         if (testId) {
             await Neo.worker.App.destroyNeoInstance(testId);
@@ -80,7 +80,7 @@ StartTest(t => {
 
         // Click on the *item*, *not* the focusable chip.
         // We are testing that the Navigator directs focus to the focusable heart of the
-        // item - the Chip - which will then recieve focus and cause item activation.
+        // item - the Chip - which will then receive focus and cause item activation.
         await t.click('.neo-list-item', null, null, null, ['100%-1', 1]);
 
         // That should select and activate the clicked item.

package/test/components/siesta.js

@@ -67,31 +67,30 @@ project.configure({
     })
 });
 
-project.plan(
-    {
-        group: 'button',
+project.plan({
+    group: 'button',
+    items: [
+        'files/button/Base.mjs'
+    ]
+}, {
+    group: 'component',
+    items: [
+        'files/component/DateSelector.mjs'
+    ]
+}, {
+    group: 'form',
+    items: [{
+        group: 'field',
         items: [
-            'files/button/Base.mjs'
+            'files/form/field/Select.mjs',
+            'files/form/field/Text.mjs'
         ]
-    },
-    {
-        group: 'component',
-        items: [
-            'files/component/DateSelector.mjs',
-            'files/component/ChipList.mjs'
-        ]
-    },
-    {
-        group: 'form',
-        items: [
-            {
-                group: 'field',
-                items: [
-                    'files/form/field/Select.mjs'
-                ]
-            }
-        ]
-    }
-);
+    }]
+}, {
+    group: 'list',
+    items: [
+        'files/list/Chip.mjs'
+    ]
+});
 
 project.start();

package/resources/data/deck/learnneo/p/2023-10-01T18-29-19-158Z.md

@@ -1,97 +0,0 @@
-
-Neo.mjs is a framework used to create <mark>browser-based</mark> applications.
-
-# Some key features and benefits of Neo.mjs are:
-
-<details>
-<summary><h2>Multi-Threaded</h2></summary>
-<p>
-When a Neo.mjs application starts, the framework spawns three web-workers, in addition
-to the main browser thread, resulting in:
-<ol>
-<li>The <b>main</b> browser thread, where DOM updates are applied
-<li>An <b>application</b> web-worker where normal application logic is run
-<li>A <b>data</b> web-worker were HTTP and socket calls are run
-<li>A <b>view</b> web-worker that manages delta updates
-</ol>
-</details>
-<details>
-<summary><h2>Extreme Speed</h2></summary>
-<p>
-Web-worker processes 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 resources.
-</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>
-</details>
-<details>
-<summary><h2>Quick Application Development</h2></summary>
-<p>
-Neo.mjs 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 property, a change to the 
-property will automatically be applied to both components.
-</p>
-<p>
-Debugging is also easy because Neo.mjs uses standard JavaScript, the Neo.mjs class
-config system, and built-in debugging tools. For example, while developing an application
-you can click on a component, and in the debugger easily inspect the component and 
-update its properties &dash; these updates are immediately reflected in the running application.
-</p>
-</details>
-<details>
-<summary><h2>Multi-Window Applications</h2></summary>
-<p>
-Neo.mjs applications can also launch as <i>shared web workers</i>, 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>
-</details>
-<details>
-<summary><h2>Open-Source and Standards-Based</h2></summary>
-<p>
-Neo.mjs is an open-source framework. Features needed for the community can be added to the
-framework 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
-application can also be run in the debugging console.
-</p>
-</details>
-<details>
-<summary><h2>Scalable</h2></summary>
-<p>
-Applications can become exponentially difficult to implement as application 
-complexity increases. In contrast, the effort to code applications in Neo.mjs 
-is fairly linear. This is because of the Neo.mjs approach to binding, separation
-of concerns, extensibility, and being standards based
-</p>
-<p>
-Neo.mjs isn't just architecturally scalable &mdash; because of its multi-threaded 
-nature, it's designed to handles rapid DOM updates, data traffic, and processor-
-intensive business logic.
-</p>
-</details>