npm - neo.mjs - Versions diffs - 10.0.0-alpha.4 → 10.0.0-beta.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/ServiceWorker.mjs +2 -2
package/apps/portal/index.html +1 -1
package/apps/portal/resources/data/examples_devmode.json +26 -27
package/apps/portal/resources/data/examples_dist_dev.json +26 -27
package/apps/portal/resources/data/examples_dist_esm.json +26 -27
package/apps/portal/resources/data/examples_dist_prod.json +27 -28
package/apps/portal/view/blog/List.mjs +1 -1
package/apps/portal/view/home/FooterContainer.mjs +1 -1
package/apps/portal/view/learn/ContentComponent.mjs +102 -111
package/buildScripts/buildThemes.mjs +1 -1
package/examples/grid/animatedRowSorting/Viewport.mjs +4 -4
package/examples/grid/bigData/ControlsContainer.mjs +3 -3
package/examples/grid/bigData/GridContainer.mjs +8 -8
package/examples/grid/cellEditing/MainContainer.mjs +5 -5
package/examples/grid/container/MainContainer.mjs +4 -4
package/examples/grid/nestedRecordFields/Viewport.mjs +5 -5
package/examples/table/cellEditing/MainContainer.mjs +1 -1
package/examples/table/container/MainContainer.mjs +3 -3
package/examples/table/nestedRecordFields/Viewport.mjs +6 -6
package/examples/tableFiltering/MainContainer.mjs +1 -1
package/examples/tablePerformance/MainContainer.mjs +1 -1
package/examples/tablePerformance/MainContainer2.mjs +1 -1
package/examples/tablePerformance/MainContainer3.mjs +2 -2
package/examples/tableStore/MainContainer.mjs +2 -2
package/learn/UsingTheseTopics.md +2 -2
package/learn/benefits/ConfigSystem.md +2 -2
package/learn/benefits/FormsEngine.md +14 -14
package/learn/benefits/MultiWindow.md +2 -2
package/learn/benefits/OffTheMainThread.md +2 -2
package/learn/benefits/Speed.md +2 -2
package/learn/gettingstarted/ComponentModels.md +4 -4
package/learn/gettingstarted/Config.md +6 -6
package/learn/gettingstarted/DescribingTheUI.md +4 -4
package/learn/gettingstarted/Events.md +6 -6
package/learn/gettingstarted/Extending.md +4 -4
package/learn/gettingstarted/References.md +6 -6
package/learn/gettingstarted/Workspaces.md +6 -6
package/learn/guides/ApplicationBootstrap.md +40 -42
package/learn/guides/ComponentsAndContainers.md +12 -12
package/learn/guides/CustomComponents.md +2 -2
package/learn/guides/MainThreadAddonIntro.md +2 -2
package/learn/guides/PortalApp.md +2 -2
package/learn/guides/StateProviders.md +12 -12
package/learn/guides/events/CustomEvents.md +16 -16
package/learn/guides/events/DomEvents.md +12 -12
package/learn/javascript/ClassFeatures.md +3 -2
package/learn/javascript/Classes.md +8 -8
package/learn/javascript/NewNode.md +4 -4
package/learn/javascript/Overrides.md +8 -8
package/learn/javascript/Super.md +10 -8
package/learn/tutorials/Earthquakes.md +54 -57
package/learn/tutorials/TodoList.md +4 -4
package/package.json +1 -1
package/resources/scss/src/apps/portal/learn/ContentComponent.scss +12 -0
package/resources/scss/src/grid/{View.scss → Body.scss} +2 -2
package/resources/scss/src/grid/VerticalScrollbar.scss +1 -1
package/resources/scss/src/grid/plugin/AnimateRows.scss +1 -1
package/resources/scss/src/grid/plugin/CellEditing.scss +1 -1
package/resources/scss/src/table/{View.scss → Body.scss} +1 -1
package/resources/scss/src/table/plugin/CellEditing.scss +1 -1
package/resources/scss/theme-dark/grid/{View.scss → Body.scss} +1 -1
package/resources/scss/theme-dark/table/{View.scss → Body.scss} +1 -1
package/resources/scss/theme-light/grid/{View.scss → Body.scss} +1 -1
package/resources/scss/theme-light/table/{View.scss → Body.scss} +1 -1
package/resources/scss/theme-neo-light/Global.scss +1 -2
package/resources/scss/theme-neo-light/grid/{View.scss → Body.scss} +1 -1
package/resources/scss/theme-neo-light/table/{View.scss → Body.scss} +1 -1
package/src/DefaultConfig.mjs +2 -2
package/src/core/Base.mjs +59 -12
package/src/core/Util.mjs +14 -2
package/src/draggable/grid/header/toolbar/SortZone.mjs +21 -21
package/src/draggable/table/header/toolbar/SortZone.mjs +1 -1
package/src/grid/{View.mjs → Body.mjs} +19 -20
package/src/grid/Container.mjs +58 -58
package/src/grid/ScrollManager.mjs +56 -56
package/src/grid/VerticalScrollbar.mjs +2 -2
package/src/grid/_export.mjs +2 -2
package/src/grid/column/AnimatedChange.mjs +5 -5
package/src/grid/column/Base.mjs +1 -1
package/src/grid/column/Component.mjs +6 -6
package/src/grid/header/Toolbar.mjs +9 -9
package/src/grid/plugin/AnimateRows.mjs +1 -2
package/src/main/addon/AmCharts.mjs +8 -11
package/src/main/addon/Base.mjs +150 -42
package/src/main/addon/GoogleMaps.mjs +9 -16
package/src/main/addon/HighlightJS.mjs +2 -13
package/src/main/addon/IntersectionObserver.mjs +21 -21
package/src/main/addon/MonacoEditor.mjs +1 -6
package/src/table/{View.mjs → Body.mjs} +19 -20
package/src/table/Container.mjs +43 -43
package/src/table/_export.mjs +2 -2
package/src/table/plugin/CellEditing.mjs +19 -19
package/src/util/Style.mjs +2 -6
package/src/vdom/Helper.mjs +10 -13
package/src/worker/App.mjs +6 -18
package/src/worker/Base.mjs +1 -1
package/src/worker/Manager.mjs +4 -8
package/src/worker/mixin/RemoteMethodAccess.mjs +1 -1

package/learn/guides/ApplicationBootstrap.md CHANGED Viewed

@@ -14,11 +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
+```
 ### 1. Entry Point: index.html
 The bootstrap process begins with a minimal HTML file:
-```html
+```html readonly
 <!DOCTYPE HTML>
 <html>
 <head>
@@ -42,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)
@@ -60,13 +69,13 @@ 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"        : "../../",
     "environment"     : "development",
     "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"],
+    "mainThreadAddons": ["DragDrop", "Navigator", "Stylesheet"],
     "themes"          : ["neo-theme-light"],
     "useCanvasWorker" : false,
     "useDataWorker"   : false,
@@ -79,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)
@@ -107,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';
@@ -149,12 +158,10 @@ The Main class:
 3. Listens for the 'domContentLoaded' event
 4. When the DOM is loaded, it loads any main thread addons and notifies the WorkerManager
-### 5. Worker Manager: Creating Workers
+### 5. Neo.worker.Manager: Creating Workers
-The `WorkerManager` is responsible for creating and managing the workers:
-```javascript
-class Manager extends Base {
+```javascript readonly
+class Manager extends core.Base {
     // ...
     createWorkers() {
@@ -198,24 +205,20 @@ class Manager extends Base {
         if (me.constructedThreads === me.activeWorkers) {
             // All workers are constructed, load the application
             NeoConfig.appPath && me.timeout(NeoConfig.loadApplicationDelay).then(() => {
-                me.loadApplication(NeoConfig.appPath)
+                me.loadApplication()
             })
         }
     }
-    loadApplication(path) {
-        this.sendMessage('app', {
-            action       : 'loadApplication',
-            path,
-            resourcesPath: NeoConfig.resourcesPath
-        })
+    loadApplication() {
+        this.sendMessage('app', {action: 'loadApplication' })
     }
     // ...
 }
 ```
-The WorkerManager:
+`Neo.worker.Manager`:
 1. Detects browser features (Web Workers, SharedWorkers)
 2. Creates workers for App, VDom, Data, etc. based on configuration
 3. Sends the Neo.config to each worker
@@ -227,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 {
     // ...
@@ -262,12 +265,7 @@ class App extends Base {
             path = path.slice(0, -4)
         }
-        return import(
-            /* webpackInclude: /(?:\/|\\)app.mjs$/ */
-            /* webpackExclude: /(?:\/|\\)(dist|node_modules)/ */
-            /* webpackMode: "lazy" */
-            `../../${path}.mjs`
-        )
+        return import(`../../${path}.mjs`)
     }
     // ...
@@ -284,8 +282,8 @@ The App worker:
 Finally, the application's `app.mjs` file is loaded and executed:
-```javascript
-import Overwrites from './Overwrites.mjs'; // Optional framework extensions
+```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
 export const onStart = () => Neo.app({
@@ -303,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 CHANGED Viewed

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

package/learn/guides/CustomComponents.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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