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

package/examples/table/nestedRecordFields/Viewport.mjs

@@ -40,17 +40,17 @@ class Viewport extends BaseViewport {
             module: TableContainer,
             bind  : {store : 'stores.mainStore'},
 
+            bodyConfig: {
+                highlightModifiedCells: true
+            },
+
             columns: [
                 {dataField: 'user.firstname', text: 'Firstname'},
                 {dataField: 'user.lastname',  text: 'Lastname'},
                 {dataField: 'githubId',       text: 'Github Id'},
                 {dataField: 'country',        text: 'Country',     renderer: 'up.countryRenderer'},
                 {dataField: 'edit',           text: 'Edit Action', renderer: 'up.editRenderer'}
-            ],
-
-            viewConfig: {
-                highlightModifiedCells: true
-            }
+            ]
         }]
     }
 
@@ -118,7 +118,7 @@ class Viewport extends BaseViewport {
                 windowId
             }));
 
-        me.view.updateDepth = -1;
+        me.body.updateDepth = -1;
 
         return button.createVdomReference()
     }

package/examples/tableFiltering/MainContainer.mjs

@@ -46,10 +46,10 @@ class MainContainer extends Viewport {
             }]
         }, {
             module           : TableContainer,
+            bodyConfig       : {selectionModel: CellModel},
             id               : 'myTableFilterContainer',
             showHeaderFilters: true,
             store            : MainStore,
-            viewConfig       : {selectionModel: CellModel},
             width            : '100%',
             wrapperStyle     : {height: '300px'},
 

package/examples/tablePerformance/MainContainer.mjs

@@ -72,8 +72,8 @@ class MainContainer extends Container {
             }]
         }, {
             module    : TableContainer,
+            bodyConfig: {useRowRecordIds: false},
             reference : 'table',
-            viewConfig: {useRowRecordIds: false},
             width     : '100%',
 
             columnDefaults: {

package/examples/tablePerformance/MainContainer2.mjs

@@ -72,8 +72,8 @@ class MainContainer2 extends Container {
             }]
         }, {
             module    : TableContainer,
+            bodyConfig: {useRowRecordIds: false},
             reference : 'table',
-            viewConfig: {useRowRecordIds: false},
             width     : '100%',
 
             columnDefaults: {

package/examples/tablePerformance/MainContainer3.mjs

@@ -72,8 +72,8 @@ class MainContainer3 extends Container {
             }]
         }, {
             module             : TableContainer,
+            bodyConfig         : {useRowRecordIds: false},
             reference          : 'table',
-            viewConfig         : {useRowRecordIds: false},
             useCustomScrollbars: false,
             width              : '100%',
 
@@ -146,7 +146,7 @@ class MainContainer3 extends Container {
             rows      = me.getReference('amount-rows-field').value,
             inputData = me.up('viewport').createRandomData(columns, rows);
 
-        table.view.createViewData(inputData)
+        table.body.createViewData(inputData)
     }
 
     /**

package/examples/tableStore/MainContainer.mjs

@@ -151,10 +151,10 @@ class MainContainer extends Viewport {
             }]
         }, {
             module      : TableContainer,
+            bodyConfig  : {selectionModel: CellModel},
             id          : 'myTableStoreContainer',
             reference   : 'table',
             store       : MainStore,
-            viewConfig  : {selectionModel: CellModel},
             width       : '100%',
             wrapperStyle: {height: '300px'},
 
@@ -179,7 +179,7 @@ class MainContainer extends Viewport {
      */
     updateSelectionModel(data) {
         if (data.value) {
-            this.getReference('table').view.selectionModel = {
+            this.getReference('table').body.selectionModel = {
                 ntype: data.component.value
             }
         }

package/learn/UsingTheseTopics.md

@@ -41,7 +41,7 @@ You can also launch the preview in a window by going to the Preview tab, then cl
 icon on the right  <span class="far fa-xs fa-window-maximize"></span>. This web site is a Neo.mjs application,
 and the ability to launch browser windows &mdash; all integrated within a single app &mdash; is a unique feature of Neo.mjs!
 
-<pre data-code-livepreview>
+```javascript live-preview
 import Button    from '../button/Base.mjs';
 import Container from '../container/Base.mjs';
 
@@ -57,7 +57,7 @@ class MainView extends Container {
 }
 
 MainView = Neo.setupClass(MainView);
-</pre>
+```
 
 ---
 

package/learn/benefits/ConfigSystem.md

@@ -10,7 +10,7 @@ and nested approach to their configuration, a gap that a class config system aim
 ## A bad example
 I recently found this Angular code snippet (new public API draft) on LinkedIn:
 
-<pre data-code-readonly>
+```javascript readonly
 // MyComponent with an attribute
 <MyComponent myAttribute="someValue" />
 
@@ -25,7 +25,7 @@ I recently found this Angular code snippet (new public API draft) on LinkedIn:
 
 // Scoped inputs for MyDirective
 <MyComponent @MyDirective(input1="someString" [input2]="mySignal()") />
-</pre>
+```
 
 Now you might wonder why I think that this is not a good way to create apps.
 

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