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

package/learn/benefits/FormsEngine.md

@@ -3,7 +3,7 @@
 You do not need to define a state tree on your own.
 It is sufficient to just use namespaces inside the `name` attribute of each field.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button        from '../button/Base.mjs';
 import FormContainer from '../form/Container.mjs';
 import TextField     from '../form/field/Text.mjs';
@@ -38,7 +38,7 @@ class MainView extends FormContainer {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ## Forms can get validated without being mounted
 
@@ -49,7 +49,7 @@ Getting the field values still works like before.
 Use case: In case you have a form split into multiple pages and only one of them is mounted to keep
 the DOM minimal, you can still get all field values.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button        from '../button/Base.mjs';
 import Container     from '../container/Base.mjs';
 import FormContainer from '../form/Container.mjs';
@@ -89,7 +89,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ## Nested Forms
 
@@ -104,28 +104,28 @@ Inside the example preview, clear the user lastname via hitting the x-button.
 Afterwards, click on the 3 buttons at the bottom and inspect the output inside the main window console carefully.
 
 The main form will log:
-<pre data-code-readonly>
+```javascript readonly
 {
     account: 'My Account',
     product: {brand: 'Tesla', name: 'Car'},
     user   : {firstname: 'John', lastname: null}
 }
 'isValid: false'
-</pre>
+```
 
 The user form will log:
-<pre data-code-readonly>
+```javascript readonly
 {user: {firstname: 'John', lastname: null}}
 'isValid: false'
-</pre>
+```
 
 The product form will log:
-<pre data-code-readonly>
+```javascript readonly
 {product: {brand: 'Tesla', name: 'Car'}}
 'isValid: true'
-</pre>
+```
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button        from '../button/Base.mjs';
 import Container     from '../container/Base.mjs';
 import FormContainer from '../form/Container.mjs';
@@ -223,7 +223,7 @@ class MainView extends FormContainer {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 Bonus: Inspect the DOM Inside the `TabContainer`.
 You will notice that only the active Tab is mounted inside the DOM.
@@ -244,7 +244,7 @@ since it does rely on defining child modules inside their own class files
 and dynamically importing them.
 
 In a nutshell:
-<pre data-code-readonly>
+```javascript readonly
 {
     module: TabContainer,
     items : [
@@ -252,4 +252,4 @@ In a nutshell:
         {module: () => import('./MyChildForm2.mjs')}
     ]
 }
-</pre>
+```

package/learn/benefits/MultiWindow.md

@@ -14,7 +14,7 @@ running the code. Even though it's running in a new window, it's still part of t
 (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. — the code doesn't care that some code is running in a
 separate window.
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -31,6 +31,6 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 </details>

package/learn/benefits/OffTheMainThread.md

@@ -89,13 +89,13 @@ The worst case that could happen now is that your app worker will slow down and
 this will not affect your UI (rendering thread → main).
 Probably the best solution for single page apps (SPAs) as well as multi-window apps (MWAs) looks like this:
 
-<pre data-neo-component>
+```json neo-component
 {
     "cls" : "neo-worker-setup",
     "tag" : "element-loader",
     "vdom": {"src": "./resources/images/workers-focus.svg"}
 }
-</pre>
+```
 
 To prevent the app worker from handling too much logic, we can optionally spawn more workers.
 Each thread has its fixed scope. Let us take a quick look into each of them.

package/learn/benefits/Speed.md

@@ -20,7 +20,7 @@ Click on Preview, then use your mouse or trackpad to pan and zoom — the he
 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 — but we've never actually hit the limit.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 import Helix     from '../component/Helix.mjs';
 
@@ -43,7 +43,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</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, 

package/learn/gettingstarted/ComponentModels.md

@@ -3,7 +3,7 @@ Neo has a feature that allows shared, bindable, data.
 A _state provider_ — `Neo.state.Provider` — instance holds properties that 
 can be bound to component properties.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from  '../container/Base.mjs';
 import Label     from  '../component/Label.mjs';
 import TextField from  '../form/field/Text.mjs';
@@ -35,7 +35,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 View model properties are visible down the containment hierarchy:
 Properties introduced in a parent container will be available to any child component, and properties
@@ -55,7 +55,7 @@ usually coded as separate classes.)
 
 Below is another example.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from  '../container/Base.mjs';
 import Label     from  '../component/Label.mjs';
 import Panel     from  '../container/Panel.mjs';
@@ -107,7 +107,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 In this case, the main view has three child items of type `MyPanel`, each containing a label. 
 The main view has a state provider with a `foo` property, and the third child has its own state provider with a `foo` property.

package/learn/gettingstarted/Config.md

@@ -17,7 +17,7 @@ Here's an example of a new component class `Simple` with three config properties
 The `Simple` class introduces syntax. It doesn't have any content, so if you run the code you won't 
 see anything. We'll change that in the next example.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -48,7 +48,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ## Detecting when a value changes
 
@@ -57,7 +57,7 @@ a _lifecyle property_. A lifecycle property provides methods that are run as the
 updated or accessed. You're free to implment these methods to provide business rules, normalize
 values, or have side-effects, such as updating a view or firing an event.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -98,7 +98,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 This time if you run the code you'll see "hi there" in the view. That's because the Simple instance is
 configured with `bar: 'hi there'`, and since that's a lifecycle property the `afterSetBar()` method
@@ -110,7 +110,7 @@ Typically, the _afterSet_ method is used to update a view or to fire an event.
 
 Look at this code: `afterSetBar()` fires an event, and the config in the `items[]` is listening to it.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -149,5 +149,5 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 

package/learn/gettingstarted/DescribingTheUI.md

@@ -10,7 +10,7 @@ use to describe the component you're creating> You can also access or set the pr
 
 ## A view with one component
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -27,7 +27,7 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 
 The button config is just an object describing the button being created. In the example, it has three
@@ -46,7 +46,7 @@ Let's put a second button in the container.
 
 ## A view with two components
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -67,7 +67,7 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 If you run the example you'll see two buttons, arranged according to the `layout`. If you'd like, 
 modify the code to specify `ntype:'hbox'` and run it again. 

package/learn/gettingstarted/Events.md

@@ -13,7 +13,7 @@ pairs as you need.
 The code below shows two text fields, with `listeners` for `change` and `focusEnter`.
 (The events for any component are documented in the API docs.)
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
 
@@ -38,7 +38,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 If you run the example, and open the browser's debugger, you'll see the console being logged as you type or give
 focus to either field.
@@ -52,7 +52,7 @@ that with a _component controller_.
 A `Neo.controller.Component` is a simple class associated with a component class. As a view is created, an 
 instance of its associated controller is automatically created. 
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Base from '../controller/Component.mjs';
 
 class MainViewController extends Base {
@@ -86,7 +86,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 
 
@@ -116,7 +116,7 @@ automatically get lifecycle methods run before the value is assigned, after the
 before the value is accessed. We're using the _after_ method to fire a `change` event.
 
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -154,4 +154,4 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```

package/learn/gettingstarted/Extending.md

@@ -5,7 +5,7 @@ to test.
 
 Consider this code. It's a panel with a header and a table. The table has a store. 
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button from '../button/Base.mjs';
 import Panel  from '../container/Panel.mjs';
 import Table  from '../table/Container.mjs';
@@ -42,13 +42,13 @@ class MainView extends Panel {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 If you wanted, any of the configs can be refactored into their own class. Here, the button, store, and table
 have been refactored into their own classes, and the main view is using them. The main view is simpler and
 more abstract, and each class can be reused, tested, and maintained independently. 
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button from '../button/Base.mjs';
 import Panel  from '../container/Panel.mjs';
 import Store  from '../data/Store.mjs';
@@ -103,7 +103,7 @@ class MainView extends Panel {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 There are several use-cases for creating your own classes:
 

package/learn/gettingstarted/References.md

@@ -10,7 +10,7 @@ There are two common ways of doing that:
 Here's an example with one button. Clicking on the button will disable it. 
 As you can see, the handler uses the component reference pass in via `data.component`.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button     from '../button/Base.mjs';
 import Container  from '../container/Base.mjs';
 import Controller from '../controller/Component.mjs';
@@ -39,7 +39,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ## Using getReference() 
 
@@ -47,7 +47,7 @@ But what if we need to get a reference to another component in the view? In that
 you tag the component you need with a `reference` config, then use `getReference()` in
 the controller.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button     from '../button/Base.mjs';
 import Container  from '../container/Base.mjs';
 import Controller from '../controller/Component.mjs';
@@ -84,7 +84,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ## Getting a reference when debugging
 
@@ -102,7 +102,7 @@ But app logic should never use `Neo.findFirst()` and very rarely use `up()` or `
 The following example gets a reference to the _Learn_ button at the top of this site, and changes its `text`.
 Again &mdash; that use of `Neo.findFirst()` might be handy when debugging, but it should never be used in app logic.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -128,4 +128,4 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```

package/learn/gettingstarted/Workspaces.md

@@ -40,7 +40,7 @@ as well as create new views classes, their controllers, and other application lo
 
 Now let's look at a source file. This is the contents of `MainView.mjs`.
 
-<pre data-code-readonly>
+```javascript readonly
 import Container  from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller from './MainViewController.mjs';
 import ViewModel  from './MainViewModel.mjs';
@@ -58,7 +58,7 @@ class MainView extends Container {
 Neo.setupClass(MainView);
 
 export default MainView;
-</pre>
+```
 
 Neo.mjs views are composed of components. A component can be a "container", which means it
 visually holds or groups other components, or a regular component, like a button. The main
@@ -78,7 +78,7 @@ you see how a component is configured let's put a button in the container.
 First, we need to import the class that defines buttons. Then we'll describe the new button in the
 `items:[].`
 
-<pre data-code-readonly>
+```javascript readonly
 import Button     from '../../../node_modules/neo.mjs/src/button/Base.mjs';
 import Container  from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller from './MainViewController.mjs';
@@ -100,7 +100,7 @@ class MainView extends Container {
 Neo.setupClass(MainView);
 
 export default MainView;
-</pre>
+```
 
 
 Note the entry in `items:[]`. That's a description of the button that will be the single item in our 
@@ -120,7 +120,7 @@ Here's a simplified running example. The `model` and `controller` are omitted, b
 actually used in the example, and the import root path is different to reflect the location of the 
 Neo.mjs library relative to the examples.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -136,5 +136,5 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 

package/learn/guides/ApplicationBootstrap.md

@@ -14,20 +14,20 @@ using Web Workers.
 
 ## Bootstrap Sequence
 
-```
+```text
 myapp/
 ├── view/
 │   └── Viewport.mjs // The app main view
-├── app.mjs           // The entry-point for your code inside the app worker
-├── index.html        // The entry-point for a main-thread
-└── neo-config.json   // Framework global configs for your app
+├── app.mjs          // The entry-point for your code inside the app worker
+├── index.html       // The entry-point for a main-thread
+└── neo-config.json  // Framework global configs for your app
 ```
 
 ### 1. Entry Point: index.html
 
 The bootstrap process begins with a minimal HTML file:
 
-```html
+```html readonly
 <!DOCTYPE HTML>
 <html>
 <head>
@@ -51,7 +51,7 @@ The only JavaScript file imported is the `MicroLoader.mjs`, which is loaded as a
 
 The `MicroLoader.mjs` is a small script that fetches the application configuration and bootstraps the main thread:
 
-```javascript
+```javascript readonly
 fetch('./neo-config.json').then(r => r.json()).then(d => {
     globalThis.Neo = {config: {...d}};
     import(d.mainPath)
@@ -69,7 +69,7 @@ It performs these steps:
 The `neo-config.json` file contains essential configuration for the application bootstrap. For a complete overview 
 of all available configuration options, you can refer to the `src/DefaultConfig.mjs` file in the Neo.mjs framework:
 
-```json
+```json readonly
 {
     "appPath"         : "apps/myapp/app.mjs",
     "basePath"        : "../../",
@@ -88,23 +88,23 @@ of all available configuration options, you can refer to the `src/DefaultConfig.
 ```
 
 **Key Configuration Properties:**
-- **`appPath`** - Points to your application's entry point (app.mjs)
-- **`basePath`** - Root path for resolving other paths
-- **`environment`** - Controls optimization and debugging features
-- **`mainPath`** - Framework's main thread bootstrap file
-- **`mainThreadAddons`** - Additional features to load in the main thread
-- **`themes`** - CSS themes to load
-- **`useCanvasWorker`** - Controls whether to use a separate worker for canvas operations
-- **`useDataWorker`** - Controls whether to use a separate worker for data operations
-- **`useServiceWorker`** - Controls whether to use a service worker for caching
-- **`useSharedWorkers`** - When set to true, ALL workers (App, VDom, Data, etc.) will be created as SharedWorkers, 
+- `appPath` - Points to your application's entry point (app.mjs)
+- `basePath` - Root path for resolving other paths
+- `environment` - Controls optimization and debugging features
+- `mainPath` - Framework's main thread bootstrap file
+- `mainThreadAddons` - Additional features to load in the main thread
+- `themes` - CSS themes to load
+- `useCanvasWorker` - Controls whether to use a separate worker for canvas operations
+- `useDataWorker` - Controls whether to use a separate worker for data operations
+- `useServiceWorker` - Controls whether to use a service worker for caching
+- `useSharedWorkers` - When set to true, ALL workers (App, VDom, Data, etc.) will be created as SharedWorkers, 
   enabling multi-window applications. When false, all workers will be dedicated workers (better for single-page applications). 
-  The `worker.Base` class provides an abstraction layer that supports both types with a consistent API, allowing developers 
+  The worker.Base class provides an abstraction layer that supports both types with a consistent API, allowing developers 
   to create an app with dedicated workers first (which are easier to debug) and then switch to shared workers with just 
   a one-line configuration change.
-- **`useTaskWorker`** - Controls whether to use a separate worker for background tasks
-- **`useVdomWorker`** - Controls whether to use a separate worker for virtual DOM operations
-- **`workerBasePath`** - Location of worker initialization files
+- `useTaskWorker` - Controls whether to use a separate worker for background tasks
+- `useVdomWorker` - Controls whether to use a separate worker for virtual DOM operations
+- `workerBasePath` - Location of worker initialization files
 
 **Configuration Categories:**
 - **Path Resolution** - Where to find files and modules (auto-generated by default)
@@ -116,7 +116,7 @@ of all available configuration options, you can refer to the `src/DefaultConfig.
 
 The MicroLoader imports `Main.mjs`, which initializes the main thread:
 
-```javascript
+```javascript readonly
 import Neo           from './Neo.mjs';
 import * as core     from './core/_export.mjs';
 import DomAccess     from './main/DomAccess.mjs';
@@ -160,7 +160,7 @@ The Main class:
 
 ### 5. Neo.worker.Manager: Creating Workers
 
-```javascript
+```javascript readonly
 class Manager extends core.Base {
     // ...
 
@@ -230,7 +230,7 @@ The App worker receives the 'loadApplication' message and loads the application.
 in Neo.mjs is an instance of Neo.controller.Application, which is not common in other frameworks like React, Angular, 
 or Vue (which typically just use a tag):
 
-```javascript
+```javascript readonly
 class App extends Base {
     // ...
 
@@ -282,7 +282,7 @@ The App worker:
 
 Finally, the application's `app.mjs` file is loaded and executed:
 
-```javascript
+```javascript readonly
 import Overwrites from './Overwrites.mjs';    // Optional class config default value changes for framework classes
 import Viewport   from './view/Viewport.mjs'; // Your main UI component
 
@@ -301,7 +301,7 @@ The app.mjs file:
 
 When Neo.app() is called, it creates an Application controller and instantiates your mainView component:
 
-```javascript
+```javascript readonly
 // Your Viewport component
 class Viewport extends Container {
     static config = {

package/learn/guides/ComponentsAndContainers.md

@@ -25,7 +25,7 @@ primitive. Components introduce various properties, such as `width`, `height`, `
 
 Here's a container, with one child item.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -42,12 +42,12 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 Components also have an `html`. The `html` property is rarely used, and goes against the abstract philosophy of Neo.mjs, but
 sometimes it's handy as a placeholder as you stub out views.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -65,7 +65,7 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 
 ## Layout
@@ -77,7 +77,7 @@ some commonly-used layouts.
 
 Fix is used when there's a single child. The component is sized to fit the container.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -92,13 +92,13 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ### Vbox and hbox
 
 With `vbox` and `hbox`, items are arranged vertically or horizontally.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -119,13 +119,13 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ### Card
 
 A card container has multiple child items, one of which is visible. 
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -167,7 +167,7 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 
 
@@ -177,7 +177,7 @@ MainView = Neo.setupClass(MainView);
 Neo.mjs is class-based, and thus, any component or container can be defined as its own class, and reused like any
 other component in the framework.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button from '../button/Base.mjs';
 // In practice this would be some handy reusable component
 class MySpecialButton extends Button {
@@ -209,5 +209,5 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```