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

package/learn/guides/CustomComponents.md

@@ -9,7 +9,7 @@ Neo.mjs is class-based, which means you're free to extend any component (or any
 
 ## Lifecycle config properties
 
-<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 {
@@ -41,5 +41,5 @@ class MainView extends Container {
 }
 
 Neo.setupClass(MainView);
-</pre>
+```
 

package/learn/guides/MainThreadAddonIntro.md

@@ -18,10 +18,10 @@ please return a specified `window` property." Neo.mjs
 lets you do that via `Neo.Main.getByPath()`. For
 example, the following statement logs the URL query string.
 
-<pre data-code-readonly>
+```javascript readonly
 const search = await Neo.Main.getByPath({path: 'window.location.search'});
 console.log(search); // Logs the search string
-</pre>
+```
 
 `Neo.Main` & `Neo.main.DomAccess` provide some basic methods for accessing the 
 main thread, but in case you want to use a third party library which relies on directly

package/learn/guides/PortalApp.md

@@ -27,9 +27,9 @@ The setting will get stored inside the LocalStorage,
 so you will need to click the following Button a 2nd time to deactivate it again.
 Or you can clear the LocalStorage manually.</br></br>
 
-<pre data-neo-component>
+```json neo-component
 {
     "className": "Portal.view.learn.CubeLayoutButton",
     "style"    : {"margin": 0}
 }
-</pre>
+```

package/learn/guides/StateProviders.md

@@ -10,7 +10,7 @@ Other libraries or frameworks often call state providers "Stores".
 
 ## Inline State Providers
 ### Direct Bindings
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 import Label     from '../component/Label.mjs';
@@ -49,7 +49,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 We use a Container with a stateProvider containing the data props `hello` and `world`.
 Inside the Container are 2 Labels which bind their `text` config to a data prop directly.
@@ -58,7 +58,7 @@ We can easily bind 1:1 to specific data props using the following syntax:</br>
 `bind: {text: data => data.hello}`
 
 ### Bindings with multiple data props
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 import Label     from '../component/Label.mjs';
@@ -104,7 +104,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 We use a Container with a stateProvider containing the data props `hello` and `world`.
 Inside the Container are 3 Labels which bind their `text` config to a combination of both data props.
@@ -128,7 +128,7 @@ data.component equals to the Button instance itself. Since the Button instance d
 `getStateProvider()` will return the closest stateProvider inside the parent chain.
 
 ### Nested Inline State Providers
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 import Label     from '../component/Label.mjs';
@@ -182,7 +182,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 The output of this demo is supposed to exactly look the same like the previous demo.
 
@@ -203,7 +203,7 @@ We can even change data props which live inside different stateProviders at once
 Hint: Modify the example code (Button handler) to try it out right away!
 
 ### Nested Data Properties
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 import Label     from '../component/Label.mjs';
@@ -244,7 +244,7 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 Data props inside VMs can be nested. Our stateProvider contains a `user` data prop as an object,
 which contains the nested props `firstname` and `lastname`.
 
@@ -262,7 +262,7 @@ Or we can directly pass the object containing the change(s):</br>
 Hint: This will not override left out nested data props (lastname in this case).
 
 ### Dialog connecting to a Container
-<pre data-code-livepreview>
+```javascript live-preview
 import Controller from '../controller/Component.mjs';
 import Dialog     from '../dialog/Base.mjs';
 import Panel      from '../container/Panel.mjs';
@@ -378,13 +378,13 @@ class MainView extends Viewport {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ## Class based State Providers
 When your stateProviders contain many data props or need custom logic, you can easily move them into their own classes.
 
 ### Direct Bindings
-<pre data-code-livepreview>
+```javascript live-preview
 import Button        from '../button/Base.mjs';
 import Container     from '../container/Base.mjs';
 import Label         from '../component/Label.mjs';
@@ -436,4 +436,4 @@ class MainView extends Container {
     }
 }
 MainView = Neo.setupClass(MainView);
-</pre>
+```

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