neo.mjs 6.15.4 → 6.15.5

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,7 +1,7 @@
 
 {
     "name": "neo.mjs",
-    "version": "6.15.4",
+    "version": "6.15.5",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -44,7 +44,7 @@
     },
     "homepage": "https://neomjs.github.io/pages/",
     "devDependencies": {
-        "@fortawesome/fontawesome-free": "^6.5.1",
+        "@fortawesome/fontawesome-free": "^6.5.2",
         "autoprefixer": "^10.4.19",
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
@@ -53,7 +53,7 @@
         "envinfo": "^7.11.1",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.16",
+        "inquirer": "^9.2.17",
         "marked": "^12.0.1",
         "monaco-editor": "^0.47.0",
         "neo-jsdoc": "1.0.1",

package/resources/data/deck/learnneo/pages/TestLivePreview.md

@@ -1,7 +1,6 @@
 To code a live preview, enclose the code in a `pre` tag with the `data-neo` attribute.
 
-<pre>&lt;pre data-neo> 
-&lt;/pre> 
+<code>&lt;pre data-neo>...&lt;/pre&gt; &lt;</code> 
 
 Imports are relative to the portal app running within the framework. That means
 Neo.mjs imports should be coded to go up four levels, then look into the `src`

package/resources/data/deck/learnneo/pages/Welcome.md

@@ -0,0 +1,60 @@
+Welcome to Neo.mjs! This set of topics contains information to help you use Neo.mjs. 
+
+
+## Topics
+
+### Why Neo?
+
+Describes technical and business reasons for using Neo.mjs
+
+### Getting Started
+
+Install instructions, along with fundamental concepts that are good to understand before diving into Neo.mjs.
+
+### Tutorials
+
+Hands-on tutorials where you'll code a few simple Neo.mjs applications.
+
+### Guides
+
+These are in-depth discussions of various topics.
+
+### Appendix
+
+You can ignore this! It just holds a site style sheet and other miscellanea.
+
+## Using these topics
+
+As you can see, the topics table of contents is on the left. Topic sections and sub-sections are shown on the right.
+
+Topics sometimes contain "disclosure" widgets, which are just <details> tags. These are used in cases 
+where we want to present high-level points and reveal details when the disclosure is expanded.
+
+<details>
+<summary>This is a disclosure widget</summary>
+<p style="background-color:lightgreen;padding:8px">This is a fascinating piece of information which is revealed when the widget is expanded.</p>
+</details>
+
+Topics also sometimes contain runnable examples. These are shown as tab panels with Source and Preview tabs.
+
+You can also launch the preview in a window by going to the Preview tab, then clicking on the little window
+icon on the right  <span class="far fa-xs fa-window-maximize"></span>. This web site is a Neo.mjs application,
+and the ability to launch browser windows &mdash; all integrated within a single app &mdash; is a unique feature of Neo.mjs!
+
+<pre data-neo>
+import Button    from '../../../../src/button/Base.mjs';
+import Container from '../../../../src/container/Base.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        items    : [{
+            module : Button,
+            text   : 'Button'
+        }]
+    }
+}
+
+Neo.setupClass(MainView);
+</pre>

package/resources/data/deck/learnneo/pages/WhyNeo-Multi-Threaded.md

@@ -6,6 +6,8 @@ to the main browser thread, resulting in:
 3. A <b>data</b> web-worker were HTTP and socket calls are run
 4. A <b>view</b> web-worker that manages delta updates
 
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/why/IndexHtmlFlow.png" width="120%"></img>
+
 The benefits of using web workers is that each runs in parallel its own thread. In a typical framework
 all code is run in the main thread, so processes compete for CPU cycles.
 

package/resources/data/deck/learnneo/pages/WhyNeo-Multi-Window.md

@@ -8,11 +8,11 @@ across windows, running seamlessly as a single application.
 
 <details>
 <summary><h3>Example</h3></summary>
-An easy way to show this is by looking at a code preview example. Below, click Preview, 
+An easy way to show this is by looking at a code preview example. In the example below, click Preview, 
 then click on the new window icon on the right side of the toolbar. This launches a new window 
 running the code. Even though it's running in a new window, it's still part of the app. 
-(In this case, the app is the Neo.mjs portal.) That means both the code in both windows seamlessly 
-share events, bound data, etc. &mdash; the code doesn't care that some code is running in a
+(In this case, the app is the web site you're looking at now.) That means both the code in both windows 
+seamlessly share events, data, etc. &mdash; the code doesn't care that some code is running in a
 separate window.
 <pre data-neo>
 import Button    from '../../../../src/button/Base.mjs';

package/resources/data/deck/learnneo/pages/WhyNeo-Speed.md

@@ -1,4 +1,4 @@
-Web-worker processes are automatically run in parallel, on separate CPU cores.
+The Neo.mjs web-worker processes are automatically run in parallel, on separate CPU cores.
 
 By contrast, other JavaScript frameworks run in a single thread, so all business logic, 
 data handling, and DOM rendering compete for CPU resources.
@@ -12,16 +12,38 @@ If the default four threads aren't enough, you're free to launch additional web-
 to run other specialized logic. 
 
 
-<details>
-<summary>Example</summary>
-Look at this example. It's complex. As you pan left and right, and zoom in and out, the upper-right
-shows you the number of delta updates being applied. If you move really quickly, you might reach 20,000 
-or 30,000 delta updates per second. We've seen some examples that go over 40,000 updates per second &mdash;
-but we've never actually hit the limit.
+### Example
 
-<a href="https://neomjs.com/node_modules/neo.mjs/examples/component/helix/index.html" target="_example">Helix Example</a>
+Look at this example. It's the `Neo.component.Helix` component. Besides looking cool, it illustrates how quickly Neo.mjs can update a complex user interface. 
 
-<a href="https://neomjs.com/node_modules/neo.mjs/examples/component/helix/index.html" target="_example">
-<img width="75%" src="https://s3.amazonaws.com/mjs.neo.learning.images/Helix.png"></img>
-</a>
-</details>
+Click on Preview, then use your mouse or trackpad to pan and zoom &mdash; the helix zooms and spirals accordingly, very very rapidly. 
+If you move quickly, you might reach 20,000 or 30,000 delta updates per second. We've seen some examples that go over 40,000 updates per 
+second &mdash; but we've never actually hit the limit.
+
+<pre data-neo>
+import Base from '../../../../src/container/Base.mjs';
+import Helix from '../../../../src/component/Helix.mjs';
+class Foo extends Base {
+    static config = {
+        className: 'Foo',
+        layout: 'fit',
+        items: [{
+            module: Helix,
+            imageField : 'image',
+            imageSource: '../../../../resources/examples/',
+            store: {
+                autoLoad: true,
+                model: {
+                    fields: [ { name: 'image' , type: 'String'   } ],
+                },
+                url: '../../../../resources/examples/data/ai_contacts.json'
+            }
+        }]
+    }
+}
+Neo.setupClass(Foo);
+</pre>
+
+
+If you're interested, there's <a href="../../examples/component/helix/index.html" target="_blank">a more full-featured helix example</a> that includes showing delta updates, 
+along with some other control. Look at the upper-right corner to see delta updates.

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

@@ -1,4 +1,5 @@
 {"data": [
+    {"name":  "Welcome!",                                   "parentId": null,                "isLeaf":  true, "id": "Welcome" },
     {"name": "Why Neo.mjs?",                                "parentId": null,                "isLeaf": false, "id": "WhyNeo"},
         {"name": "Introduction ",                           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Intro"},
         {"name": "Multi-Threaded",                          "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Multi-Threaded"},

package/resources/scss/src/apps/portal/learn/PageContainer.scss

@@ -2,9 +2,10 @@
     overflow: auto;
 
     .content-bottom-toolbar {
-        gap    : 8px;
-        padding: 0 3rem;
-        margin-top: 100px;
+        gap          : 8px;
+        padding      : 0 3rem;
+        margin-bottom: 3rem;
+        margin-top   : 3rem;
 
         .neo-button {
             flex           : 1 !important;

package/src/DefaultConfig.mjs

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

package/src/form/field/ComboBox.mjs

@@ -761,6 +761,7 @@ class ComboBox extends Picker {
         if (!me.programmaticValueChange) {
             // changing the input => silent record reset
             me._value = null;
+            me.list?.selectionModel.deselectAll();
 
             me.filterOnInput(inputValue)
         }

package/test/components/app.mjs

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

package/test/components/files/component/Base.mjs

@@ -0,0 +1,88 @@
+StartTest(t => {
+    t.it('Checking colliding style updates', async t => {
+        const containerId = await Neo.worker.App.createNeoInstance({
+            ntype : 'container',
+            height: 250,
+            style : {backgroundColor: 'red'},
+            width : 300
+        });
+
+        t.is(containerId, 'neo-container-1');
+
+        await t.waitForSelector('.neo-container');
+        t.diag('Container got rendered.');
+
+        const componentId = await Neo.worker.App.createNeoInstance({
+            ntype   : 'component',
+            height  : 150,
+            parentId: containerId,
+            style   : {backgroundColor: 'blue'},
+            width   : 150
+        });
+
+        t.is(componentId, 'neo-component-1');
+        t.diag('Component got rendered.');
+
+        t.diag('Child update before parent update');
+        Neo.worker.App.setConfigs({id: componentId, style: {backgroundColor: 'green'}});
+        Neo.worker.App.setConfigs({id: containerId, style: {backgroundColor: 'orange'}});
+
+        await t.waitFor(100);
+
+        t.is(document.getElementById(componentId).style.backgroundColor, 'green');
+        t.is(document.getElementById(containerId).style.backgroundColor, 'orange');
+
+        t.diag('Parent update before child update');
+        Neo.worker.App.setConfigs({id: containerId, style: {backgroundColor: 'pink'}});
+        Neo.worker.App.setConfigs({id: componentId, style: {backgroundColor: 'purple'}});
+
+        await t.waitFor(100);
+
+        t.is(document.getElementById(containerId).style.backgroundColor, 'pink');
+        t.is(document.getElementById(componentId).style.backgroundColor, 'purple');
+
+        await Neo.worker.App.destroyNeoInstance(containerId)
+    });
+
+    t.it('Checking colliding vdom updates', async t => {
+        const toolbarId = await Neo.worker.App.createNeoInstance({
+            ntype : 'toolbar',
+            height: 200,
+            width : 300
+        });
+
+        t.is(toolbarId, 'neo-toolbar-1');
+
+        await t.waitForSelector('.neo-toolbar');
+        t.diag('Toolbar got rendered.');
+
+        const buttonId = await Neo.worker.App.createNeoInstance({
+            ntype   : 'button',
+            parentId: toolbarId,
+            text    : 'hello'
+        });
+
+        t.is(buttonId, 'neo-button-1');
+
+        await t.waitForSelector('.neo-button');
+        t.diag('Button got rendered.');
+
+        t.diag('Child update before parent update');
+        Neo.worker.App.setConfigs({id: buttonId,  text  : 'world'});
+        Neo.worker.App.setConfigs({id: toolbarId, height: 300});
+
+        await t.waitFor(100);
+
+        t.is(document.getElementById(toolbarId).style.height, '300px');
+        t.is(document.getElementById(buttonId).firstChild.innerHTML, 'world');
+
+        t.diag('Parent update before child update');
+        Neo.worker.App.setConfigs({id: toolbarId, height: 200});
+        Neo.worker.App.setConfigs({id: buttonId,  text  : 'hello'});
+
+        await t.waitFor(100);
+
+        t.is(document.getElementById(toolbarId).style.height, '200px');
+        t.is(document.getElementById(buttonId).firstChild.innerHTML, 'hello');
+    });
+});

package/test/components/siesta.js

@@ -75,6 +75,7 @@ project.plan({
 }, {
     group: 'component',
     items: [
+        'files/component/Base.mjs',
         'files/component/DateSelector.mjs'
     ]
 }, {