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

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>
+```