neo.mjs 10.0.0-alpha.4 → 10.0.0-beta.1

package/learn/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-code-readonly>
+```javascript readonly
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -15,7 +15,7 @@ const myMammal = Neo.create(Mammal);
 
 Neo.setupClass(Mammal); // Where Neo.mjs initializes the class config. 
 export default Mammal;        // Makes the class available elsewhere.
-</pre>
+```
 
 In the example above, we're extending the Neo.mjs base class. The static
 config block is unique to Neo.mjs; it provides a way of defining special
@@ -29,7 +29,7 @@ and create instances as needed.
 
 Let's add a `name` propery to the class.
 
-<pre data-code-readonly>
+```javascript readonly
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -47,7 +47,7 @@ console.log(myMammal.name);           // Logs "Herbert"
 Neo.setupClass(Mammal);
 
 export default Mammal;
-</pre>
+```
 
 In Neo.mjs, instance properties are usually added in the `static config` block.
 The `static config` block does two things: 
@@ -61,19 +61,19 @@ 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-code-readonly>
+```javascript readonly
 const myMammal = Neo.create(Mammal, {
     name: 'Creature'
 });
 console.log(myMammal.name);           // Logs "Creature"
-</pre>
+```
 
 
 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-code-readonly>
+```javascript readonly
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -96,7 +96,7 @@ myMammal.speak(); // Logs "Creature is grunting."
 Neo.setupClass(Mammal);
 
 export default Mammal;
-</pre>
+```
 
 
 

package/learn/javascript/NewNode.md

@@ -1,4 +1,4 @@
-<pre data-code-readonly>
+```javascript readonly
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -11,11 +11,11 @@ const myMammal = Neo.create(Mammal);
 
 Mammal = Neo.setupClass(Mammal); // Where Neo.mjs initializes the class config. 
 export default Mammal;        // Makes the class available elsewhere.
-</pre>
+```
 
 
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -28,4 +28,4 @@ const myMammal = Neo.create(Mammal);
 
 Mammal = Neo.setupClass(Mammal); // Where Neo.mjs initializes the class config. 
 export default Mammal;        // Makes the class available elsewhere.
-</pre>
+```

package/learn/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-code-readonly>
+```javascript readonly
 class Mammal extends Base {
     static config = {
         className: 'Simple.example.Mammal',
@@ -15,9 +15,9 @@ class Mammal extends Base {
     }
 }
 Neo.setupClass(Mammal);
-</pre>
+```
 
-<pre data-code-readonly>
+```javascript readonly
 class Human extends Mammal {
     static config = {
         className: 'Simple.example.Human',
@@ -33,12 +33,12 @@ const myMammal = Neo.create(Human, {
 myMammal.speak();        // Logs "Hello! My name is Herbert. I am not married."
 
 Neo.setupClass(Mammal);
-</pre>
+```
 
 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-code-readonly>
+```javascript readonly
 import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
 
 class Mammal extends Base {
@@ -51,9 +51,9 @@ class Mammal extends Base {
         console.log(`(${this.name} is grunting)`);
     }
 }
-</pre>
+```
 
-<pre data-code-readonly>
+```javascript readonly
 class Human extends Mammal {
     static config = {
         className: 'Simple.example.Human',
@@ -74,4 +74,4 @@ myPerson.speak();        // Logs "Hello! My name is Herbert. I am not married."
 myPerson.yodel();        // Logs "Yodelay hee hoo!"
 
 Neo.setupClass(Human);
-</pre>
+```

package/learn/javascript/Super.md

@@ -1,6 +1,6 @@
 To call a super-class method use the `super` keyword.
 
-<pre class="neo" style="color:gray">
+```javascript readonly
 class Mammal extends Base {
     static config = {
         className: 'Simple.example.Mammal',
@@ -12,8 +12,9 @@ class Mammal extends Base {
     }
 }
 Neo.setupClass(Mammal);
-</pre>
-<pre class="neo" style="color:gray">
+```
+
+```javascript readonly
 class Human extends Mammal {
     static config = {
         className: 'Simple.example.Human',
@@ -30,12 +31,12 @@ const myPerson = Neo.create(Human, {
 myPerson.doSomething();
 
 Neo.setupClass(Mammal);
-</pre>
+```
 
 Sometimes you aren't sure if a super class has a method. In that case use the
 conditional chaining operator &mdash; `?.`
 
-<pre class="neo" style="color:gray">
+```javascript readonly
 class Mammal extends Base {
     static config = {
         className: 'Simple.example.Mammal',
@@ -47,8 +48,9 @@ class Mammal extends Base {
     }
 }
 Neo.setupClass(Mammal);
-</pre>
-<pre class="neo" style="color:gray">
+```
+
+```javascript readonly
 class Human extends Mammal {
     static config = {
         className: 'Simple.example.Human',
@@ -65,4 +67,4 @@ const myPerson = Neo.create(Human, {
 myPerson.doSomething();
 
 Neo.setupClass(Mammal);
-</pre>
+```

package/learn/tutorials/Earthquakes.md

@@ -157,18 +157,15 @@ After the script runs yous should see these files in the `app/earthquakes` direc
 
 If you look in `neo-config.json` you should see this content. Note the `mainThreadAddons` block 
 — it reflects the add-ons you chose when you followed the instructions in the script.
-<pre>
+```json
 {
-    "appPath": "../../apps/earthquakes/app.mjs",
-    "basePath": "../../",
-    "environment": "development",
-    "mainPath": "../node_modules/neo.mjs/src/Main.mjs",
-    "mainThreadAddons": [
-        "DragDrop",
-        "Stylesheet"
-    ],
-    "workerBasePath": "../../node_modules/neo.mjs/src/worker/"
-}</pre>
+    "appPath"         : "../../apps/earthquakes/app.mjs",
+    "basePath"        : "../../",
+    "environment"     : "development",
+    "mainPath"        : "../node_modules/neo.mjs/src/Main.mjs",
+    "mainThreadAddons": ["DragDrop", "Navigator", "Stylesheet"],
+    "workerBasePath"  : "../../node_modules/neo.mjs/src/worker/"
+}```
 
 You're free to edit `neo-config.json` if you were to change your mind later about the theme or need for other add-ons.
 
@@ -187,7 +184,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-code-readonly>
+```javascript readonly
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller        from './MainViewController.mjs';
 import MainStateProvider from './MainStateProvider.mjs';
@@ -206,7 +203,7 @@ class MainView extends Base {
 }
 
 export default Neo.setupClass(MainView);
-</pre>
+```
 
 As you can see, `MainView extends Base`, and `Base` is a _container_ (`Neo.container.Base`). 
 A container is a component &mdash; it holds other components, specified in `items:[]`. There 
@@ -223,7 +220,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-code-readonly>
+```javascript readonly
 
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Button            from '../../../node_modules/neo.mjs/src/button/Base.mjs';
@@ -247,7 +244,7 @@ class MainView extends Base {
 }
 
 export default Neo.setupClass(MainView);
-</pre>
+```
 
 
 When you run the app you'll see the single button.
@@ -271,12 +268,12 @@ for the classes you define.
 
 Let's change the layout to arrange items vertically, with items aligned horizontally at the start.
 
-<pre data-code-readonly>
+```javascript readonly
 layout: {
     ntype: 'vbox',
     align: 'start'
 }
-</pre>
+```
 
 <img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EarthquakesSingleVoxStartButton.png" style="width:80%"/>
 
@@ -422,7 +419,7 @@ its methods. Let's try that out by adding a method.
 
 Edit `apps/earthquakes/view/MainView.mjs` and add a method.
 
-<pre data-code-readonly>
+```javascript readonly
 
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Button            from '../../../node_modules/neo.mjs/src/button/Base.mjs';
@@ -453,7 +450,7 @@ class MainView extends Base {
 }
 
 export default Neo.setupClass(MainView);
-</pre>
+```
 
 Save your changes.
 
@@ -494,7 +491,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-code-readonly>
+```javascript readonly
 
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Table             from '../../../node_modules/neo.mjs/src/table/Container.mjs';
@@ -550,7 +547,7 @@ class MainView extends Base {
 }
 
 export default Neo.setupClass(MainView);
-</pre>
+```
 
 Save and refresh.
 
@@ -582,7 +579,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-code-readonly>
+```javascript readonly
 {
     module: Store,
     model: {
@@ -599,10 +596,10 @@ Here's the config for the store.
     responseRoot: "data",
     autoLoad: true,
 }
-</pre>
+```
 
 The feed looks like this.
-<pre data-code-readonly>
+```json readonly
 {
   "data": [{
       "timestamp": "2024-09-29T16:45:14.000Z",
@@ -621,7 +618,7 @@ The feed looks like this.
     }, ... 
     ]
 }
-</pre>
+```
 
 The store defines a `type` for the date field. There are a few pre-defined field types that convert 
 the value from the feed into what's stored in the store's record. The store specifies the URL for the
@@ -632,7 +629,7 @@ of items.
 
 Tables have two key configs: `store` and `columns`. Here's the columns config:
 
-<pre data-code-readonly>
+```javascript readonly
 columns: [{
     dataField: "timestamp",
     text: "Date",
@@ -646,7 +643,7 @@ columns: [{
     align: "right",
     renderer: (data) => data.value.toLocaleString(),
 }]
-</pre>
+```
 
 By default, a column just runs `toString()` on the record property specified in the column's `dataField`.
 You can also provide a `renderer`, which is a function you provide to format the value any way you'd like.
@@ -672,7 +669,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-code-readonly>
+```javascript readonly
 import Base from '../../../../node_modules/neo.mjs/src/table/Container.mjs';
 
 class Table extends Base {
@@ -698,7 +695,7 @@ class Table extends Base {
 }
 
 export default Neo.setupClass(Table);
-</pre>
+```
 
 </details>
 
@@ -735,7 +732,7 @@ You can confirm that an instance _was created_ by using the DevTools console and
 <details>
 <summary>Here's the code</summary>
 
-<pre data-code-readonly>
+```javascript readonly
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller        from './MainViewController.mjs';
 import EarthquakesTable  from './earthquakes/Table.mjs';
@@ -775,7 +772,7 @@ static config = {
 }
 
 export default Neo.setupClass(MainView);
-</pre>
+```
 
 </details>
 
@@ -858,7 +855,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-code-readonly>
+```javascript readonly
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller        from './MainViewController.mjs';
 import EarthquakesTable  from './earthquakes/Table.mjs';
@@ -939,8 +936,7 @@ class MainView extends Base {
 }
 
 export default Neo.setupClass(MainView);
-
-</pre>
+```
 
 In the `stores` config we named the store _earthquakes_. We could have named it anything, like _foo_
 or _myStore_. We're calling it _earthquakes_ simply because that seems like a good descriptive name 
@@ -972,7 +968,7 @@ value is assigned to the table's `store` property.
 
 Replace each table's `store` config with the binding.
 
-<pre data-code-readonly>
+```javascript readonly
 
 import Base              from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller        from './MainViewController.mjs';
@@ -1025,7 +1021,7 @@ class MainView extends Base {
 }
 
 export default Neo.setupClass(MainView);
-</pre>
+```
 
 Save, refresh, and look at network traffic: you'll see a _single_ call to the web service.
 
@@ -1033,13 +1029,13 @@ 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-code-readonly>
+```javascript 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;
 
 (a === b) && (a === c) && (b === c) // true
-</pre>
+```
 
 </details>
 
@@ -1056,7 +1052,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-code-readonly>
+```javascript readonly
 import StateProvider from '../../../node_modules/neo.mjs/src/state/Provider.mjs';
 import Store         from '../../../node_modules/neo.mjs/src/data/Store.mjs';
 
@@ -1087,11 +1083,11 @@ class MainStateProvider extends StateProvider {
 }
 
 export default Neo.setupClass(MainStateProvider);
-</pre>
+```
 
 And you need to remove the `stores` config from the main view as follows.
 
-<pre data-code-readonly>
+```javascript readonly
 import Container         from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller        from './MainViewController.mjs';
 import EarthquakesTable  from './earthquakes/Table.mjs';
@@ -1124,7 +1120,7 @@ class MainView extends Container {
 }
 
 export default Neo.setupClass(MainView);
-</pre>
+```
 
 The refactorings to have separate table and state provider classes means the code is more modular, more reusable, 
 and each class is simpler than using complex source files that try to configure every detail.
@@ -1188,7 +1184,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-code-readonly>
+```json readonly
 {
     "appPath": "../../apps/earthquakes/app.mjs",
     "basePath": "../../",
@@ -1196,6 +1192,7 @@ Edit `apps/earthquakes/neo-config.json` and add entries for the Google Maps add-
     "mainPath": "../node_modules/neo.mjs/src/Main.mjs",
     "mainThreadAddons": [
         "DragDrop",
+        "Navigator",
         "WS/GoogleMaps",
         "Stylesheet"
     ],
@@ -1203,7 +1200,7 @@ Edit `apps/earthquakes/neo-config.json` and add entries for the Google Maps add-
     "themes"          : ["neo-theme-neo-light"],
     "workerBasePath": "../../node_modules/neo.mjs/src/worker/"
 }
-</pre>
+```
 
 It's unusual to need to edit `neo-config.json`. The app theme is specified there, and so are main thread add-ons. 
 In our case, we're adding `WS/GoogleMaps` which in turn requires that we specify the map key. The `WS/`
@@ -1227,7 +1224,7 @@ lets us implement those via two properties:
 
 Edit `apps/earthquakes/view/MainStateProvider.mjs` and modify `fields` as follows.
 
-<pre data-code-readonly>
+```javascript readonly
 fields: [{
     name: "location",
 }, {
@@ -1242,7 +1239,7 @@ fields: [{
     name: "position",
     calculate: (data, field, item)=>({lat: item.latitude, lng: item.longitude})
 }],
-</pre>
+```
 
 As you can see, _title_ is mapped to the existing feed value _location_, and _position_ is 
 calculated by returning an object with _lat_ and _lng_ set to the corresponding values from the feed.
@@ -1262,9 +1259,9 @@ Look at one of the items, and you should see that _title_ and _location_ are in
 <summary>Use the Google Map Component</summary>
 
 We're going to replace the top table with a Google Map. To do that we need to import the Google Maps component
-and show it implace of the top table. The map should be centered on Iceland. To wit
+and show it inplace of the top table. The map should be centered on Iceland.
 
-<pre>
+```javascript readonly
 {
     module: GoogleMapsComponent,
     flex: 1,
@@ -1274,11 +1271,11 @@ and show it implace of the top table. The map should be centered on Iceland. To
     },
     zoom: 6
 }
-</pre>
+```
 
 If we replace the top table with the map, `view/MainView.mjs` ends up with this content.
 
-<pre data-code-readonly>
+```javascript readonly
 
 import Container           from '../container/Base.mjs';
 import Controller          from './MainViewController.mjs';
@@ -1318,7 +1315,7 @@ class MainView extends Container {
 }
 
 export default Neo.setupClass(MainView);
-</pre>
+```
 
 <img style="width:80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/CenteredMap.png"></img>
 
@@ -1333,11 +1330,11 @@ export default Neo.setupClass(MainView);
  
 Add this config to the map.
 
-<pre data-code-readonly>
+```javascript readonly
 bind: {
     markerStore: 'stores.earthquakes'
 }
-</pre>
+```
 <img style="width:80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/InitialMapWithMarkers.png"></img>
 
 </details>
@@ -1365,13 +1362,13 @@ Table Views fire a select event, passing an object that contains a reference to
 
 Add this table config:
 
-<pre data-code-readonly>
+```javascript readonly
 viewConfig: {
     listeners: {
         select: (data) => console.log(data.record)
     }
 }
-</pre>
+```
 
 Save and refresh, then click on a table row. If you look at the debugger console you'll see the record being logged.
 
@@ -1391,11 +1388,11 @@ 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-code-readonly>
+```javascript readonly
 listeners: {
     markerClick: data => console.log(data.data.record)
 }
-</pre>
+```
 
 Save, refresh, and confirm that you see the value logged when you click on a map marker.
 

package/learn/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-code-livepreview>
+```javascript live-preview
 import Component from '../component/Base.mjs';
 import NeoArray  from '../util/Array.mjs';
 import VdomUtil  from '../util/VDom.mjs';
@@ -110,13 +110,13 @@ class MainComponent extends Component {
 }
 
 MainComponent = Neo.setupClass(MainComponent);
-</pre>
+```
 
 ## Neo Style
 
 content
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 import List      from '../list/Base.mjs';
 import Model     from '../data/Model.mjs';
@@ -228,4 +228,4 @@ class MainContainer extends Container {
 }
 
 MainContainer = Neo.setupClass(MainContainer);
-</pre>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name"           : "neo.mjs",
-    "version"        : "10.0.0-alpha.4",
+    "version"        : "10.0.0-beta.1",
     "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"     : {

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

@@ -84,6 +84,18 @@
         margin: 0.5em 0 0.7em 0;
     }
 
+    pre code.language-text {
+        &:not(.hljs) {
+            background-color: #F8F8F8;
+            border          : thin solid lightgray;
+            display         : block;
+            font-size       : 13px;
+            overflow-x      : auto;
+            padding         : 12px;
+            white-space     : pre;
+        }
+    }
+
     pre[data-javascript] {
         border       : thin solid lightgray;
         border-radius: 4px;

package/resources/scss/src/grid/{View.scss → Body.scss}

@@ -1,4 +1,4 @@
-.neo-grid-view-wrapper {
+.neo-grid-body-wrapper {
     height         : 100%;
     overflow-anchor: none;
     overflow-x     : hidden;
@@ -11,7 +11,7 @@
     }
 }
 
-.neo-grid-view {
+.neo-grid-body {
     height    : 100%;
     overflow-x: visible;
 

package/resources/scss/src/grid/VerticalScrollbar.scss

@@ -14,7 +14,7 @@
     }
 }
 
-.neo-grid-wrapper:has(.neo-grid-view.neo-is-scrolling) {
+.neo-grid-wrapper:has(.neo-grid-body.neo-is-scrolling) {
     .neo-grid-vertical-scrollbar {
         opacity: 1;
     }

package/resources/scss/src/grid/plugin/AnimateRows.scss

@@ -1,4 +1,4 @@
-.neo-grid-view {
+.neo-grid-body {
     &.neo-animate-rows {
         .neo-grid-row {
             transition: