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

package/learn/guides/WorkingWithVDom.md

@@ -15,7 +15,7 @@ While 99% of Neo.mjs development happens at the Component Tree layer, creating c
 Neo.mjs VDom nodes are plain JavaScript objects that represent DOM elements.
 **Important**: VDom only contains structure, styling, content, and attributes - **never event listeners**.
 
-```javascript
+```javascript readonly
 // Basic VDom node structure
 {
     tag      : 'div',                // HTML tag (default: 'div')
@@ -41,7 +41,7 @@ Neo.mjs VDom nodes are plain JavaScript objects that represent DOM elements.
 
 Components define their internal DOM structure via the `vdom` config:
 
-```javascript
+```javascript readonly
 import Component from './src/component/Base.mjs';
 
 class CustomButton extends Component {
@@ -81,7 +81,7 @@ For a comprehensive deep dive into all aspects of DOM event handling in Neo.mjs
 
 Here's a simple example of how an event handler defined via `domListeners` would interact with a component's VDom:
 
-```javascript
+```javascript readonly
 import Component from './src/component/Base.mjs';
 import VdomUtil  from './src/util/Vdom.mjs'; // For accessing VDom nodes by flag
 
@@ -144,7 +144,7 @@ class InteractiveComponent extends Component {
 
 The typical way to sync VDom changes to the DOM is through the component's `update()` method:
 
-```javascript
+```javascript readonly
 import Component from './src/component/Base.mjs'; // Required import
 
 class StandardComponent extends Component {
@@ -180,7 +180,7 @@ class StandardComponent extends Component {
 For performance-critical scenarios, you can bypass the VDom worker's diffing engine and send manually crafted deltas
 directly from the App Worker to the Main Thread. This offers precise control but requires careful manual delta construction.
 
-```javascript
+```javascript readonly
 import Component from './src/component/Base.mjs'; // Required import
 
 class AdvancedComponent extends Component {
@@ -240,7 +240,7 @@ class AdvancedComponent extends Component {
 
 Flags provide efficient, direct access to specific VDom nodes within a component's `vdom` structure, avoiding the need for DOM queries.
 
-```javascript
+```javascript readonly
 import Component from './src/component/Base.mjs';
 import VdomUtil  from './src/util/Vdom.mjs'; // Required import for VdomUtil
 import NeoArray  from './src/util/Array.mjs'; // Required import for NeoArray
@@ -304,7 +304,7 @@ class IconButton extends Component {
 
 Build VDom structures programmatically, often in response to data changes. This is common for lists or complex, data-driven UI fragments.
 
-```javascript
+```javascript readonly
 import Component from './src/component/Base.mjs'; // Required import
 
 class DataList extends Component {
@@ -380,7 +380,7 @@ class DataList extends Component {
 
 For sophisticated UI patterns like 3D visualizations or complex dynamic layouts, you might imperatively calculate and apply VDom properties or even use `Neo.applyDeltas()` for maximum performance.
 
-```javascript
+```javascript readonly
 import Component from './src/component/Base.mjs'; // Base component class
 
 class Helix extends Component {
@@ -452,7 +452,7 @@ class Helix extends Component {
 
 ### XSS Prevention
 
-```javascript
+```javascript readonly
 import Component from './src/component/Base.mjs'; // Required import
 // import DOMPurify from 'dompurify'; // Example for external sanitization library
 
@@ -499,7 +499,7 @@ this.update();
 
 ### 1. Batch VDom Updates
 
-```javascript
+```javascript readonly
 import Component from './src/component/Base.mjs'; // Required import
 import Neo from './src/Neo.mjs'; // Required import for Neo.applyDeltas
 
@@ -547,7 +547,7 @@ class PerformantComponent extends Component {
 
 ### 2. Efficient Event Delegation
 
-```javascript
+```javascript readonly
 import Component from './src/component/Base.mjs'; // Required import
 
 class EfficientEventComponent extends Component {
@@ -595,7 +595,7 @@ super.construct(config);
 
 ### 3. Memory Management
 
-```javascript
+```javascript readonly
 import Component from './src/component/Base.mjs'; // Required import
 
 class MemoryEfficientComponent extends Component {
@@ -632,7 +632,7 @@ class MemoryEfficientComponent extends Component {
 
 Dynamically show or hide VDom nodes by setting their `removeDom` property. This is efficient as the VDom node remains in the tree, but its corresponding DOM element is removed/added from the document flow by the framework.
 
-```javascript
+```javascript readonly
 import Component from './src/component/Base.mjs'; // Required import
 import VdomUtil  from './src/util/Vdom.mjs'; // Required import
 
@@ -673,7 +673,7 @@ class ConditionalComponent extends Component {
 
 Programmatically create and update lists of VDom nodes, typically from data. This approach is highly efficient as the VDom diffing engine optimizes the DOM updates.
 
-```javascript
+```javascript readonly
 import Component from './src/component/Base.mjs'; // Required import
 
 class ListComponent extends Component {

package/learn/guides/events/CustomEvents.md

@@ -1,7 +1,7 @@
 As you read in the <a href="#/learn/Events">Getting Started > Events</a> topic, components, stores, and many other objects fire events.
 
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
 
@@ -26,7 +26,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ## Event listeners
 
@@ -35,7 +35,7 @@ MainView = Neo.setupClass(MainView);
 The event listener function can be coded in-line. Normally you want event handlers to be in a view's 
 controller, but for very simple situation it can be convenient to use this syntax.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
 
@@ -54,7 +54,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ### As a view method
 
@@ -62,7 +62,7 @@ You can also use the `up.` qualifier to specify a method in the component's pare
 in-line syntax you saw above, using the `up.` syntax might be convenient for simple classees, 
 or when you simply haven't gotten around to defining a view's controller.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
 
@@ -84,7 +84,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ### As a controller method
 
@@ -92,7 +92,7 @@ Despite the examples above, the most correct way of setting up event handlers is
 Any view class can specify a controller &mdash; wWhen the view is created a controller instance is
 also created. 
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
@@ -125,7 +125,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ## Adding listeners procedurally
 
@@ -134,7 +134,7 @@ a listener procedurally.
 
 Any observable class has an `addListener` method, along with an easier-to-type version called `on`.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
@@ -167,11 +167,11 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 The method specified in `on()` doesn't have to be an arrow function; you can use a controller function.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
@@ -208,7 +208,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ## Events versus binding
 
@@ -241,7 +241,7 @@ will automatically be reflected in the view model.
 To contrast syntax, and to illustrate the simplicity of a binding, let's look at two exmaples of updating a component
 to reflect the value of a text field. THe first example uses events; the second uses bindings.
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
@@ -277,9 +277,9 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Component from '../component/Base.mjs';
 import Container from '../container/Base.mjs';
 import TextField from '../form/field/Text.mjs';
@@ -313,7 +313,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ##How are events set up?
 

package/learn/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-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -62,7 +62,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ### Handler inside the Component Tree
 
@@ -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-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -95,7 +95,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ### Handler inside a ViewController
 
@@ -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-code-livepreview>
+```javascript live-preview
 import Container  from '../container/Base.mjs';
 import Controller from '../controller/Component.mjs';
 
@@ -138,7 +138,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ## Listener Options
 
@@ -146,7 +146,7 @@ MainView = Neo.setupClass(MainView);
 
 We can further delegate listeners to specific DOM nodes within our Component:
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -172,7 +172,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 In case you click on the blue div, no console logs will appear.
 They do, when clicking on the white inner div.
@@ -184,7 +184,7 @@ we will get logs when clicking on the blue div too.
 
 We can prevent listeners from bubbling upwards:
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -221,7 +221,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 Clicking on the inner (white) div will only trigger the inner listener and you will get one log.
 
@@ -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-code-livepreview>
+```javascript live-preview
 import Container from '../container/Base.mjs';
 
 class MainView extends Container {
@@ -257,7 +257,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 Try it: In case you remove `priority: 2` inside the source view,
 the order of the logs will change.

package/learn/javascript/ClassFeatures.md

@@ -1,6 +1,7 @@
 Neo.mjs uses standard modular JavaScript, so you're free to use other class 
 features, like private members.
-<pre><code class="javascript">
+
+```javascript readonly
 class Human extends Mammal {
     static config = {
         className: 'Simple.example.Human',
@@ -33,4 +34,4 @@ const myPerson = Neo.create(Human, {
 });
 
 myPerson.speak(true);
-</code></pre>
+```

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