neo.mjs 9.15.0 → 10.0.0-alpha.1

package/resources/data/deck/learnneo/pages/guides/events/DomEvents.md

@@ -34,7 +34,7 @@ the class. If you add `console.log(this);`, the output is most likely not want y
 For the second Button we are defining a non-bound function, in which case `this` will point
 to the Component instance.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -44,14 +44,14 @@ class MainView extends Container {
         style    : {padding: '1em'},
 
         items: [{
-            vdom: {tag: 'button', innerHTML: 'Button 1'},
+            vdom: {tag: 'button', html: 'Button 1'},
 
             domListeners: [{
                 click: data => Neo.Main.log({value: `Clicked on ${data.component.id}`})
             }]
         }, {
             style: {marginTop: '1em'},
-            vdom : {tag: 'button', innerHTML: 'Button 2'},
+            vdom : {tag: 'button', html: 'Button 2'},
 
             domListeners: [{
                 click(data) {
@@ -72,7 +72,7 @@ A good example would be `tab.header.Toolbar`, where clicking on a Button will ch
 You can use string based listeners. In case the handler method lives within the parent tree (any level),
 we need to prefix these listeners with `up.`.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -82,7 +82,7 @@ class MainView extends Container {
         style    : {padding: '1em'},
 
         items: [{
-            vdom: {tag: 'button', innerHTML: 'Button 1'},
+            vdom: {tag: 'button', html: 'Button 1'},
 
             domListeners: [{
                 click: 'up.onButtonClick'
@@ -107,7 +107,7 @@ to find the closest match.
 
 A good use case would be a form submit Button, where a click will trigger a communication to the backend.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container  from '../container/Base.mjs';
 import Controller from '../controller/Component.mjs';
 
@@ -129,7 +129,7 @@ class MainView extends Container {
         style     : {padding: '1em'},
 
         items: [{
-            vdom: {tag: 'button', innerHTML: 'Button 1'},
+            vdom: {tag: 'button', html: 'Button 1'},
 
             domListeners: [{
                 click: 'onButtonClick'
@@ -146,7 +146,7 @@ MainView = Neo.setupClass(MainView);
 
 We can further delegate listeners to specific DOM nodes within our Component:
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -184,7 +184,7 @@ we will get logs when clicking on the blue div too.
 
 We can prevent listeners from bubbling upwards:
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -237,7 +237,7 @@ While we could just manually order the array inside the following example,
 there can be use cases where multiple subscribers get added at run-time and developers
 can not be sure about the adding order.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -247,7 +247,7 @@ class MainView extends Container {
         style    : {padding: '1em'},
 
         items: [{
-            vdom : {tag: 'button', innerHTML: 'Button 1'},
+            vdom : {tag: 'button', html: 'Button 1'},
 
             domListeners: [
                 {click: data => Neo.Main.log({value: 'Listener 1'})},

package/resources/data/deck/learnneo/pages/javascript/Classes.md

@@ -2,7 +2,7 @@ Neo.mjs classes are standard JavaScript classes. Every source file
 you write will be a class definition, extending some Neo.mjs
 class. 
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -29,7 +29,7 @@ and create instances as needed.
 
 Let's add a `name` propery to the class.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -61,7 +61,7 @@ anywhere in the class hierarchy.
 Since our class defines a `name` property, we can specify that when creating
 the instance, using the second argument to the `create` method. 
 
-<pre data-javascript>
+<pre data-code-readonly>
 const myMammal = Neo.create(Mammal, {
     name: 'Creature'
 });
@@ -73,7 +73,7 @@ Since _you_ define those properties, you can
 look for them in class methods and use them as needed.
 Let's add a `speak()` method that uses the `name` property.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {

package/resources/data/deck/learnneo/pages/javascript/NewNode.md

@@ -1,4 +1,4 @@
-<pre data-javascript>
+<pre data-code-readonly>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -15,7 +15,7 @@ export default Mammal;        // Makes the class available elsewhere.
 
 
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {

package/resources/data/deck/learnneo/pages/javascript/Overrides.md

@@ -3,7 +3,7 @@ In Neo.mjs you sub-class and override methods in the usual way.
 Here, we'll extend `Mammal` and override the `speak()` method. 
 (For brevity, we'll exclude `export` and `import` statements.)
 
-<pre data-javascript>
+<pre data-code-readonly>
 class Mammal extends Base {
     static config = {
         className: 'Simple.example.Mammal',
@@ -17,7 +17,7 @@ class Mammal extends Base {
 Neo.setupClass(Mammal);
 </pre>
 
-<pre data-javascript>
+<pre data-code-readonly>
 class Human extends Mammal {
     static config = {
         className: 'Simple.example.Human',
@@ -38,7 +38,7 @@ Neo.setupClass(Mammal);
 Any class in the hierarchy is free to add new properties and methods. Let's add
 a property and behavior (method) to the Human class.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -53,7 +53,7 @@ class Mammal extends Base {
 }
 </pre>
 
-<pre data-javascript>
+<pre data-code-readonly>
 class Human extends Mammal {
     static config = {
         className: 'Simple.example.Human',

package/resources/data/deck/learnneo/pages/tutorials/Earthquakes.md

@@ -187,7 +187,7 @@ later in the lab.
 Use a code editor and look at `workspace/apps/earthquakes/src/view/MainView.mjs`. You'll see the 
 following class definition: 
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller        from './MainViewController.mjs';
 import MainStateProvider from './MainStateProvider.mjs';
@@ -223,7 +223,7 @@ that buttons have various configs, such as `text`, which is the button text, `ic
 is typically a FontAwesome CSS class used to show an icon, and `handler`, which specifies
 which method to run when the button is clicked. We'll use `text`.
 
-<pre data-javascript>
+<pre data-code-readonly>
 
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Button            from '../../../node_modules/neo.mjs/src/button/Base.mjs';
@@ -271,7 +271,7 @@ for the classes you define.
 
 Let's change the layout to arrange items vertically, with items aligned horizontally at the start.
 
-<pre data-javascript>
+<pre data-code-readonly>
 layout: {
     ntype: 'vbox',
     align: 'start'
@@ -422,7 +422,7 @@ its methods. Let's try that out by adding a method.
 
 Edit `apps/earthquakes/view/MainView.mjs` and add a method.
 
-<pre data-javascript>
+<pre data-code-readonly>
 
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Button            from '../../../node_modules/neo.mjs/src/button/Base.mjs';
@@ -494,7 +494,7 @@ At this point we have a application with minimal content. You also know how to d
 
 Replace the button with a table by replacing `MainView.mjs` with the following content.
 
-<pre data-javascript>
+<pre data-code-readonly>
 
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Table             from '../../../node_modules/neo.mjs/src/table/Container.mjs';
@@ -582,7 +582,7 @@ Let's review the code and see what it's doing.
 A store is a collection of records. A record is described in the `model` and the model's `fields`.
 Here's the config for the store.
 
-<pre data-javascript>
+<pre data-code-readonly>
 {
     module: Store,
     model: {
@@ -602,7 +602,7 @@ Here's the config for the store.
 </pre>
 
 The feed looks like this.
-<pre data-javascript>
+<pre data-code-readonly>
 {
   "data": [{
       "timestamp": "2024-09-29T16:45:14.000Z",
@@ -632,7 +632,7 @@ of items.
 
 Tables have two key configs: `store` and `columns`. Here's the columns config:
 
-<pre data-javascript>
+<pre data-code-readonly>
 columns: [{
     dataField: "timestamp",
     text: "Date",
@@ -672,7 +672,7 @@ abstract, and it allows those classes to be tested in isolation.
 
 Create a new file named `apps/earthquakes/view/earthquakes/Table.mjs` with this content.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base from '../../../../node_modules/neo.mjs/src/table/Container.mjs';
 
 class Table extends Base {
@@ -735,7 +735,7 @@ You can confirm that an instance _was created_ by using the DevTools console and
 <details>
 <summary>Here's the code</summary>
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller        from './MainViewController.mjs';
 import EarthquakesTable  from './earthquakes/Table.mjs';
@@ -858,7 +858,7 @@ State Providers have two key configs: `data` and `stores`.
 
 Add a `stores` property to the state provider config that holds a copy of the store.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller        from './MainViewController.mjs';
 import EarthquakesTable  from './earthquakes/Table.mjs';
@@ -972,7 +972,7 @@ value is assigned to the table's `store` property.
 
 Replace each table's `store` config with the binding.
 
-<pre data-javascript>
+<pre data-code-readonly>
 
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller        from './MainViewController.mjs';
@@ -1033,7 +1033,7 @@ Save, refresh, and look at network traffic: you'll see a _single_ call to the we
 
 You can further prove we're using a shared instance by running these statements in the console.
 
-<pre data-javascript>
+<pre data-code-readonly>
 a = Neo.findFirst({ntype:'earthquakes-main'}).stateProvider.stores.earthquakes;
 b = Neo.find({ntype:'earthquakes-table'})[0].store;
 c = Neo.find({ntype:'earthquakes-table'})[1].store;
@@ -1056,7 +1056,7 @@ Since the starter app already provides `MainStateProvider`, all we need to do is
 
 Here's the resulting code you should place into `MainStateProvider.mjs`.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import StateProvider from '../../../node_modules/neo.mjs/src/state/Provider.mjs';
 import Store         from '../../../node_modules/neo.mjs/src/data/Store.mjs';
 
@@ -1091,7 +1091,7 @@ export default Neo.setupClass(MainStateProvider);
 
 And you need to remove the `stores` config from the main view as follows.
 
-<pre data-javascript>
+<pre data-code-readonly>
 import Container         from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller        from './MainViewController.mjs';
 import EarthquakesTable  from './earthquakes/Table.mjs';
@@ -1188,7 +1188,7 @@ directory, but instead, move the files to their individual locations.
 
 Edit `apps/earthquakes/neo-config.json` and add entries for the Google Maps add-on and the map key.
 
-<pre data-javascript>
+<pre data-code-readonly>
 {
     "appPath": "../../apps/earthquakes/app.mjs",
     "basePath": "../../",
@@ -1227,7 +1227,7 @@ lets us implement those via two properties:
 
 Edit `apps/earthquakes/view/MainStateProvider.mjs` and modify `fields` as follows.
 
-<pre data-javascript>
+<pre data-code-readonly>
 fields: [{
     name: "location",
 }, {
@@ -1278,7 +1278,7 @@ and show it implace of the top table. The map should be centered on Iceland. To
 
 If we replace the top table with the map, `view/MainView.mjs` ends up with this content.
 
-<pre data-javascript>
+<pre data-code-readonly>
 
 import Container           from '../container/Base.mjs';
 import Controller          from './MainViewController.mjs';
@@ -1333,7 +1333,7 @@ export default Neo.setupClass(MainView);
  
 Add this config to the map.
 
-<pre data-javascript>
+<pre data-code-readonly>
 bind: {
     markerStore: 'stores.earthquakes'
 }
@@ -1365,7 +1365,7 @@ Table Views fire a select event, passing an object that contains a reference to
 
 Add this table config:
 
-<pre data-javascript>
+<pre data-code-readonly>
 viewConfig: {
     listeners: {
         select: (data) => console.log(data.record)
@@ -1391,7 +1391,7 @@ After changing the value you should immediately see it reflected in the table ro
 
 Now add a `markerClick` listener to the Google Map.
 
-<pre data-javascript>
+<pre data-code-readonly>
 listeners: {
     markerClick: data => console.log(data.data.record)
 }

package/resources/data/deck/learnneo/pages/tutorials/TodoList.md

@@ -3,7 +3,7 @@
 In case you did not work with neo yet, but come from a more HTML driven ecosystem,
 you could achieve the task in a similar way.
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Component from '../component/Base.mjs';
 import NeoArray  from '../util/Array.mjs';
 import VdomUtil  from '../util/VDom.mjs';
@@ -116,7 +116,7 @@ MainComponent = Neo.setupClass(MainComponent);
 
 content
 
-<pre data-neo>
+<pre data-code-livepreview>
 import Container from '../container/Base.mjs';
 import List      from '../list/Base.mjs';
 import Model     from '../data/Model.mjs';

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

@@ -1,5 +1,5 @@
 {"data": [
-    {"name": "Welcome!",                                   "parentId": null,                                 "id": "Welcome" },
+    {"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"},

package/resources/data/deck/training/pages/2022-12-27T21-55-23-144Z.md

@@ -27,13 +27,13 @@ class MainContainer extends Viewport {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
-                vdom: { innerHTML: 'Welcome to your new Neo App.' }
+                vdom: { html: 'Welcome to your new Neo App.' }
             }, {
                 header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },
-                vdom: { innerHTML: 'Have fun creating something awesome!' }
+                vdom: { html: 'Have fun creating something awesome!' }
             }]
         }]
     }

package/resources/data/deck/training/pages/2022-12-29T18-36-08-226Z.md

@@ -37,7 +37,7 @@ Now add a new tab:
             iconCls: 'fa fa-home',
             text: 'Hi there!'
         },
-        vdom: { innerHTML: 'Yet another tab.' }
+        vdom: { html: 'Yet another tab.' }
     })
 
 ??Enable the Ctrl-right-click debugger

package/resources/data/deck/training/pages/2022-12-29T18-36-56-893Z.md

@@ -85,7 +85,7 @@ class MainContainer extends Viewport {
                     text: 'Tab 1'
                 },
                 vdom: {
-                    innerHTML: 'Welcome to your new Neo App.'
+                    html: 'Welcome to your new Neo App.'
                 }
             }, {
                 header: {
@@ -93,7 +93,7 @@ class MainContainer extends Viewport {
                     text: 'Tab 2'
                 },
                 vdom: {
-                    innerHTML: 'Have fun creating something awesome!'
+                    html: 'Have fun creating something awesome!'
                 }
             }]
         }],

package/resources/data/deck/training/pages/2022-12-29T20-37-08-919Z.md

@@ -30,13 +30,13 @@ class MainContainer extends Viewport {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
-                vdom: { innerHTML: 'Welcome to your new Neo App.' }
+                vdom: { html: 'Welcome to your new Neo App.' }
             }, {
                 header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },
-                vdom: { innerHTML: 'Have fun creating something awesome!' }
+                vdom: { html: 'Have fun creating something awesome!' }
             }]
         }]
     }

package/resources/data/deck/training/pages/2022-12-29T20-37-20-344Z.md

@@ -27,13 +27,13 @@ class MainContainer extends Viewport {
                     iconCls: 'fa fa-home',
                     text: 'Tab 1'
                 },
-                vdom: { innerHTML: 'Welcome to your new Neo App.' }
+                vdom: { html: 'Welcome to your new Neo App.' }
             }, {
                 header: {
                     iconCls: 'fa fa-play-circle',
                     text: 'Tab 2'
                 },
-                vdom: { innerHTML: 'Have fun creating something awesome!' }
+                vdom: { html: 'Have fun creating something awesome!' }
             }]
         }]
     }

package/resources/data/deck/training/pages/2023-01-13T21-48-17-258Z.md

@@ -8,13 +8,13 @@ name_: '',
 _vdom: {
     tag: 'div',
     style: 'fontWeight:bold',
-    innerHTML: ''
+    html: ''
 }
 
 ...
 
 afterSetName(name, oldName) {
-    this.vdom.innerHTML = name;
+    this.vdom.html = name;
     this.update();
 }
 </pre>

package/resources/data/deck/training/pages/2023-02-05T17-44-53-815Z.md

@@ -27,8 +27,8 @@ in the `afterSetBusiness()` method.
         },    
         vdom: {
             cn: [{
-                tag: 'h2',
-                innerHTML: 'foo'
+                tag : 'h2',
+                html: 'foo'
             }]
         }
     }, {
@@ -47,14 +47,14 @@ Change the detail view's `afterSetBusiness()` method to update the `vdom`.
     afterSetBusiness(business){
         if (!business) return;
         const view = this.getReference('view');
-        view.vdom.cn[0].innerHTML = business.title;
+        view.vdom.cn[0].html = business.title;
         view.update();
     }
 
 <b>Important: </b>The `update()` method tells Neo to apply vdom changes to the DOM.
 Any time you change a set of vdom properties you need to run `update()`.
 
-You don't need the first item's `innerHTML:'foo'` property any more, so you can 
+You don't need the first item's `html:'foo'` property any more, so you can 
 remove that from the first item's config.
 
 Save, refresh, and confirm that the title is shown as the business is set.
@@ -76,8 +76,8 @@ The util method lets you find the node using the id (or using a more complex sel
 Use the utility method, replacing the statement referencing the vdom hierarchy.
 
 <pre>
-    <s>view.vdom.cn[0].innerHTML = business.title;</s>
-    Neo.util.VDom.find(view.vdom, 'title').vdom.innerHTML = business.title;
+    <s>view.vdom.cn[0].html = business.title;</s>
+    Neo.util.VDom.find(view.vdom, 'title').vdom.html = business.title;
 </pre>
 
 
@@ -96,7 +96,7 @@ find = Neo.util.VDom.find;
 afterSetBusiness(business){
     if (!business) return;
     const view = this.getReference('view');
-    this.find(view.vdom, 'title').vdom.innerHTML = business.title;
+    this.find(view.vdom, 'title').vdom.html = business.title;
     view.update();
 }
 </pre>
@@ -173,7 +173,7 @@ be a div that shows the address.
 
 Then modify the `afterSetBusiness()` method to update the _address_ element's
 `cn` to be an array of items, one per item in the address array. Each item should
-be a _div_ with its `innerHTML` set to that part of the address.
+be a _div_ with its `html` set to that part of the address.
 
 Hint: The business record's `address` property is an array, and the `cn` is 
 also an array. Maybe there's a easy way to map the address array into a new
@@ -186,7 +186,7 @@ Here's one way to code it. How does this compare to your solution?
 
     this.find(view.vdom, 'address').vdom.cn = business
         .address
-        .map(item => ({tag: 'div', innerHTML: item}));
+        .map(item => ({tag: 'div', html: item}));
 
 ??One last point...
 

package/resources/data/deck/training/pages/2023-10-14T19-25-08-153Z.md

@@ -98,7 +98,7 @@ item in our container. In Neo.mjs terms we're _configuring_ the button. Neo.mjs
 which components and objects are _described_. It's an abstraction. In other words we're saying 
 what we want, but not how it's done. We want a button with some text — how that's done
 isn't important here in the container. A non-declarative approach would be more focused on _how_,
-where you might way "I want a <button> HTML element with its innerHTML set to some value." 
+where you might way "I want a <button> HTML element with its html set to some value." 
 
 In another topic you'll learn about the Neo.mjs config system and declaratively describing
 views, controllers, and other things.

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

@@ -63,8 +63,21 @@
         color: #3E63DD;
     }
 
-    summary::-webkit-details-marker {
-        display: none;
+    .lab {
+        box-shadow   : 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+        font-size    : 1em;
+        margin-bottom: 1em;
+        padding      : 2px 16px;
+        transition   : 0.3s;
+
+        &:hover {
+            /* On mouse-over, add a deeper shadow */
+            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+        }
+    }
+
+    li::marker {
+        color: #3E63DD;
     }
 
     p {
@@ -78,17 +91,8 @@
         padding      : 12px;
     }
 
-    .lab {
-        box-shadow   : 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-        font-size    : 1em;
-        margin-bottom: 1em;
-        padding      : 2px 16px;
-        transition   : 0.3s;
-
-        &:hover {
-            /* On mouse-over, add a deeper shadow */
-            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
-        }
+    summary::-webkit-details-marker {
+        display: none;
     }
 }
 

package/src/DefaultConfig.mjs

@@ -246,6 +246,18 @@ const DefaultConfig = {
      * @type Boolean
      */
     useSharedWorkers: false,
+    /**
+     * `true` will let the `vdom.Helper` create a String-based representation of the vnode tree.
+     * Main will then use e.g.`parentNode.insertAdjacentHTML('beforeend', delta.outerHTML);`
+     * This affects the initial painting of your apps, but also the creation of new component trees at run-time.
+     * `false` will skip the creation of the String, and instead use DOM APIs to generate a fragment inside Main,
+     * into which the vnode tree will get applied.
+     * @default false
+     * @memberOf! module:Neo
+     * @name config.useStringBasedMounting
+     * @type Boolean
+     */
+    useStringBasedMounting: false,
     /**
      * True will generate a new task worker, which can get filled with own expensive remote methods
      * @default false
@@ -264,12 +276,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '9.15.0'
+     * @default '10.0.0-alpha.1'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '9.15.0'
+    version: '10.0.0-alpha.1'
 };
 
 Object.assign(DefaultConfig, {