neo.mjs 6.12.1 → 6.13.0

package/resources/data/deck/learnneo/{p → pages}/Extending.md

@@ -7,41 +7,42 @@ to test.
 Consider this code. It's a panel with a header and a table. The table has a store. 
 
 <pre data-neo>
-import Base        from  '../../../../src/container/Panel.mjs';
-import Button      from  '../../../../src/button/Base.mjs';
-import Table       from  '../../../../src/table/Container.mjs';
+import Button from '../../../../src/button/Base.mjs';
+import Panel  from '../../../../src/container/Panel.mjs';
+import Table  from '../../../../src/table/Container.mjs';
 
-class MainView extends Base {
+class MainView extends Panel {
     static config = {
-        className : 'Example.view.MainView',
-        headers: [{
-            dock: 'top',
+        className: 'Example.view.MainView',
+        headers  : [{
+            dock : 'top',
             items: [{
-                module: Button,
-                text: 'She loves me...',
+                module : Button,
+                text   : 'She loves me...',
                 handler: () => Neo.Main.alert({message: 'Yeah, yeah yeah!'})
             }]
         }],
-        items : [{
+        items: [{
             module: Table,
-            store: {
+            store : {
                 autoLoad: true,
-                url: '../../resources/data/deck/learnneo/data/theBeatles.json',
-                model: {
+                url     : '../../resources/data/deck/learnneo/data/theBeatles.json',
+                model   : {
                     fields: [{name: 'first'}, {name: 'last'}, {name: 'dob', type: 'date'}]
                 }
             },
             columns: [{
-                text: 'First',
                 dataField: 'first',
+                text     : 'First'
             }, {
-                text: 'Last',
                 dataField: 'last',
+                text     : 'Last'
             }]
         }]
     }
 }
-Neo.applyClassConfig(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
@@ -49,64 +50,60 @@ have been refactored into their own classes, and the main view is using them. Th
 more abstract, and each class can be reused, tested, and maintained independently. 
 
 <pre data-neo>
-import Base        from  '../../../../src/container/Panel.mjs';
-import Button      from  '../../../../src/button/Base.mjs';
-import Table       from  '../../../../src/table/Container.mjs';
-import Store       from  '../../../../src/data/Store.mjs';
+import Button from '../../../../src/button/Base.mjs';
+import Panel  from '../../../../src/container/Panel.mjs';
+import Store  from '../../../../src/data/Store.mjs';
+import Table  from '../../../../src/table/Container.mjs';
 
 class BeatlesButton extends Button {
     static config = {
         className: 'Example.view.BeatlesButton',
-        text: 'She loves me...',
-        handler: () => Neo.Main.alert({message: 'Yeah, yeah yeah!'})
+        text     : 'She loves me...',
+        handler  : () => Neo.Main.alert({message: 'Yeah, yeah yeah!'})
     }
 }
-Neo.applyClassConfig(BeatlesButton);
+Neo.setupClass(BeatlesButton);
 
 class BeatlesStore extends Store {
     static config = {
         className: 'Example.view.BeatlesStore',
-        autoLoad: true,
-        url: '../../resources/data/deck/learnneo/data/theBeatles.json',
-        model: {
+        autoLoad : true,
+        url      : '../../resources/data/deck/learnneo/data/theBeatles.json',
+        model    : {
             fields: [{name: 'first'}, {name: 'last'}, {name: 'dob', type: 'date'}]
         }
     }
 }
-Neo.applyClassConfig(BeatlesStore);
+Neo.setupClass(BeatlesStore);
 
 class BeatlesTable extends Table {
     static config = {
         className: 'Example.view.BeatlesTable',
-        columns: [{
-            text: 'First',
+        columns  : [{
             dataField: 'first',
+            text     : 'First'
         }, {
-            text: 'Last',
             dataField: 'last',
+            text     : 'Last'
         }]
    }
 }
-Neo.applyClassConfig(BeatlesTable);
+Neo.setupClass(BeatlesTable);
 
-class MainView extends Base {
+class MainView extends Panel {
     static config = {
-        className : 'Example.view.MainView',
-        headers: [{
-            dock: 'top',
-            items: [{
-                module: BeatlesButton,
-            }]
+        className: 'Example.view.MainView',
+        headers  : [{
+            dock : 'top',
+            items: [BeatlesButton]
         }],
         items : [{
             module: BeatlesTable,
-            store: {
-                module: BeatlesStore
-            },
+            store : BeatlesStore
         }]
     }
 }
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 </pre>
 
 There are several use-cases for creating your own classes:

package/resources/data/deck/learnneo/pages/GuideEvents.md

@@ -0,0 +1,12 @@
+[Add content on listeners options here]
+
+How are events set up? We don't really care, but in case you're curious: Neo.mjs has a `Neo.core.Observable` class
+that can be mixed into any class. It maintains a `listeners` object map that's a key-value pair, where
+the key is the event name, and the value is an array of function references. The first time a listener is 
+added an entry is added to the map using the event name as the key, and the event handler added as the first
+item in the associated array. If another listener is added for the same event, a second item is added to the
+array. If a new event is added, a new entry is added. Etc. When the event is fired, Neo.mjs looks up the map
+entry for the event name, then runs each function in the array, passing whatever data is specified in the
+call to `fire()`.
+
+<img style="width:80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/gettingStarted/events/ObservableInMemory.png"></img>

package/resources/data/deck/learnneo/{p → pages}/References.md

@@ -9,34 +9,34 @@ 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-neo>
-import Base        from  '../../../../src/container/Base.mjs';
-import Controller  from  '../../../../src/controller/Component.mjs';
-import Button      from   '../../../../src/Button/Base.mjs';
+import Button     from '../../../../src/Button/Base.mjs';
+import Container  from '../../../../src/container/Base.mjs';
+import Controller from '../../../../src/controller/Component.mjs';
 
 class MainViewController extends Controller {
     static config = {
         className: 'Example.view.MainViewController'
     }
-    onDisableButtonClick(data){
+    onDisableButtonClick(data) {
         data.component.disabled = true;
     }
 }
-Neo.applyClassConfig(MainViewController);
+Neo.setupClass(MainViewController);
 
 
-class MainView extends Base {
+class MainView extends Container {
     static config = {
         className : 'Example.view.MainView',
         controller: MainViewController,
-        layout: {ntype:'vbox', align:'start'},
-        items : [{
-            module: Button,
-            text: 'Disable this button',
+        layout    : {ntype:'vbox', align:'start'},
+        items     : [{
+            module : Button,
+            text   : 'Disable this button',
             handler: 'onDisableButtonClick'
         }]
     }
 }
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 </pre>
 
 But what if we need to get a reference to another component in the view? In that case
@@ -44,9 +44,9 @@ you tag the component you need with a `reference` config, then use `getReference
 the controller.
 
 <pre data-neo>
-import Base        from  '../../../../src/container/Base.mjs';
-import Controller  from  '../../../../src/controller/Component.mjs';
-import Button      from   '../../../../src/Button/Base.mjs';
+import Button     from '../../../../src/Button/Base.mjs';
+import Container  from '../../../../src/container/Base.mjs';
+import Controller from '../../../../src/controller/Component.mjs';
 
 class MainViewController extends Controller {
     static config = {
@@ -59,27 +59,27 @@ class MainViewController extends Controller {
         this.getReference('myButton').disabled = false;
     }
 }
-Neo.applyClassConfig(MainViewController);
+Neo.setupClass(MainViewController);
 
 
-class MainView extends Base {
+class MainView extends Container {
     static config = {
         className : 'Example.view.MainView',
         controller: MainViewController,
-        layout: {ntype:'vbox', align:'start'},
-        items : [{
-            module: Button,
+        layout    : {ntype:'vbox', align:'start'},
+        items     : [{
+            module   : Button,
             reference: 'myButton',
-            text: 'Disable this button',
-            handler: 'onDisableButtonClick'
+            text     : 'Disable this button',
+            handler  : 'onDisableButtonClick'
         }, {
-            module: Button,
-            text: 'Enable the other button',
+            module : Button,
+            text   : 'Enable the other button',
             handler: 'onEnableButtonClick'
         }]
     }
 }
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 </pre>
 
 
@@ -98,29 +98,29 @@ The following example gets a reference to the _Learn_ button at the top of this
 Again &mdash; that use of `Neo.findFirst()` might be handy when debugging, but it should never be used in app logic.
 
 <pre data-neo>
-import Base        from  '../../../../src/container/Base.mjs';
-import Button      from   '../../../../src/Button/Base.mjs';
+import Button    from '../../../../src/Button/Base.mjs';
+import Container from '../../../../src/container/Base.mjs';
 
-class MainView extends Base {
+class MainView extends Container {
     static config = {
-        className : 'Example.view.MainView',
-        layout: {ntype:'vbox', align:'start'},
-        items : [{
-            module: Button,
-            text: 'Change Learn caption',
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        items    : [{
+            module : Button,
+            text   : 'Change Learn caption',
             handler: data=>{
                 const component = Neo.findFirst({text:'Learn'});
-                if (component) component.text = 'Yikes!';
+                component?.set({text: 'Yikes!', ui: 'primary'});
             }
         }, {
-            module: Button,
-            text: 'Restore Learn caption',
+            module : Button,
+            text   : 'Restore Learn caption',
             handler: data=>{
                 const component = Neo.findFirst({text:'Yikes!'});
-                if (component) component.text = 'Learn';
+                component?.set({text: 'Learn', ui: 'ghost'});
             }
         }]
     }
 }
-Neo.applyClassConfig(MainView);
-</pre>
+Neo.setupClass(MainView);
+</pre>

package/resources/data/deck/learnneo/pages/Setup.md

@@ -0,0 +1,27 @@
+## Introduction
+
+Setting up Neo.mjs is pretty easy — all you have to do is confirm that you have some required
+software then follow a single npx script.
+
+## Prerequisites
+
+Before you get started, Neo.mjs requires that you have a few of things installed: 
+
+- npm (see <a href="https://docs.npmjs.com/downloading-and-installing-node-js-and-npm" target="_blank">https://docs.npmjs.com/downloading-and-installing-node-js-and-npm</a>)
+- npx (see <a href="https://www.npmjs.com/package/npx" target="_blank">https://www.npmjs.com/package/npx</a>)
+- node (see <a href="https://nodejs.org/en/download" target="_blank">https://nodejs.org/en/download</a>)
+
+## Installation
+
+Your neo.mjs work is done in a _workspace_, which is an npm project that includes the Neo.mjs package,
+and an `app` directory that holds your applications. To generate a Neo.mjs workspace follow these
+steps.
+
+Open a terminal window and navigate to an empty director on your computer.
+Then run the following command, choosing the defaults for each prompt.
+
+`npx neo-app@latest`
+
+When you're finished you should have a Neo.mjs workspace, as described in the _Workspaces and Applications_ topic, which follows.
+
+

package/resources/data/deck/learnneo/{p → pages}/TestLivePreview.md

@@ -28,5 +28,5 @@ class Bar extends Base {
         }]
     }
 }
-Neo.applyClassConfig(Bar);
+Neo.setupClass(Bar);
 </pre>

package/resources/data/deck/learnneo/pages/WhyNeo-Effort.md

@@ -0,0 +1,4 @@
+Neo.mjs applications can be very complex, but the relationship between complexity and effort is nearly linear. In a typical frameworks, trivial applications are simple to implement, but complex applications can be very expensive
+and difficult to implement. 
+
+<img width="85%" src="https://s3.amazonaws.com/mjs.neo.learning.images/whyneo/ComplexityAndEffort.png"></img>

package/resources/data/deck/learnneo/pages/WhyNeo-Intro.md

@@ -0,0 +1,11 @@
+Why would an organization choose Neo.mjs?
+
+- There are technical advantages relating to app development and debugging.
+
+- For managerial reasons, because Neo.mjs scales well, is coded in standards-based
+modular JavaSciript.
+
+- For strategic reasons — Neo.mjs provides a lightning fast user experience,
+and is unique in its ability to allow multi-window applications.
+
+Read on to learn more about Neo.mjs key features and benefits...

package/resources/data/deck/learnneo/pages/WhyNeo-Multi-Threaded.md

@@ -0,0 +1,13 @@
+When a Neo.mjs application starts, the framework spawns three web-workers, in addition
+to the main browser thread, resulting in:
+
+1. The <b>main</b> browser thread, where DOM updates are applied
+2. An <b>application</b> web-worker where normal application logic is run
+3. A <b>data</b> web-worker were HTTP and socket calls are run
+4. A <b>view</b> web-worker that manages delta updates
+
+The benefits of using web workers is that each runs in parallel its own thread. In a typical framework
+all code is run in the main thread, so processes compete for CPU cycles.
+
+Neo.mjs also allows you to easily spawn additional threads in order to have processor-intensive
+tasks to be run separately.

package/resources/data/deck/learnneo/pages/WhyNeo-Multi-Window.md

@@ -0,0 +1,36 @@
+Neo.mjs applications can also launch as <i>shared web workers</i>, which allows you to have a single 
+application run in multiple browser windows; those windows can be moved to multiple monitors.
+
+For example, you can have a data analysis application with a control panel on one monitor, 
+tabular data in another, and charts on another &mdash; all sharing the same data, handling events
+across windows, running seamlessly as a single application. 
+
+
+<details>
+<summary><h3>Example</h3></summary>
+An easy way to show this is by looking at a code preview example. Below, click Preview, 
+then click on the new window icon on the right side of the toolbar. This launches a new window 
+running the code. Even though it's running in a new window, it's still part of the app. 
+(In this case, the app is the Neo.mjs portal.) That means both the code in both windows seamlessly 
+share events, bound data, etc. &mdash; the code doesn't care that some code is running in a
+separate window.
+<pre data-neo>
+import Button    from '../../../../src/button/Base.mjs';
+import Container from '../../../../src/container/Base.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        items    : [{
+            module : Button,
+            iconCls: 'fa fa-home',
+            text   : 'Home'
+        }]
+    }
+}
+
+Neo.setupClass(MainView);
+</pre>
+
+</details>

package/resources/data/deck/learnneo/pages/WhyNeo-Quick.md

@@ -0,0 +1,21 @@
+Neo.mjs applications can be written quickly thanks to its syntax, features, and debugging convenience.
+
+
+<details>
+<summary><h3>Property lifecycle hooks</h3></summary>
+Neo.mjs classes let you specify properties in a way that allows code to detect "before" and "after" changes, which makes it easy to handle value validation and transformation, and react to changes.
+</details>
+
+<details>
+<summary><h3>Elegant state management</h3></summary>
+Neo.mjs has elegant yet powerful state management features that make it easy to create shared, bindable data.
+For example, if two components are bound to the same property, a change to the property will automatically be
+applied to both components.
+</details>
+
+<details>
+<summary><h3>Simple and powerful debugging</h3></summary>
+Debugging is easy because Neo.mjs uses standard JavaScript, the Neo.mjs class config system, and built-in 
+debugging tools. For example, while developing an application you can click on a component, and in the debugger
+easily inspect the component and update its properties &mdash; these updates are immediately reflected in the running application.
+</details>

package/resources/data/deck/learnneo/pages/WhyNeo-Speed.md

@@ -0,0 +1,27 @@
+Web-worker processes are automatically run in parallel, on separate CPU cores.
+
+By contrast, other JavaScript frameworks run in a single thread, so all business logic, 
+data handling, and DOM rendering compete for CPU resources.
+
+This means Neo.mjs applications run and render faster. This is 
+particularly beneficial for processor- and data-intensive applications, 
+and applications that need to rapidly update what's viewed. In testing, Neo.mjs applications 
+easily apply over 20,000 DOM updates per second. 
+
+If the default four threads aren't enough, you're free to launch additional web-worker threads 
+to run other specialized logic. 
+
+
+<details>
+<summary>Example</summary>
+Look at this example. It's complex. As you pan left and right, and zoom in and out, the upper-right
+shows you the number of delta updates being applied. If you move really 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 &mdash;
+but we've never actually hit the limit.
+
+<a href="https://neomjs.com/node_modules/neo.mjs/examples/component/helix/index.html" target="_example">Helix Example</a>
+
+<a href="https://neomjs.com/node_modules/neo.mjs/examples/component/helix/index.html" target="_example">
+<img width="75%" src="https://s3.amazonaws.com/mjs.neo.learning.images/Helix.png"></img>
+</a>
+</details>

package/resources/data/deck/learnneo/tree.json

@@ -1,27 +1,44 @@
-{
-    "data": [{
-        "id"      : 1,
-        "isLeaf"  : true,
-        "name"    : "Why neo.mjs",
-        "parentId": null,
-        "path"    : "whyneo.md"
-    }, {
-        "id"      : 2,
-        "isLeaf"  : false,
-        "name"    : "Class Definitions and Config",
-        "parentId": null,
-        "path"    : null
-    }, {
-        "id"      : 3,
-        "isLeaf"  : false,
-        "name"    : "Class Basics",
-        "parentId": 2,
-        "path"    : null
-    }, {
-        "id"      : 4,
-        "isLeaf"  : true,
-        "name"    : "Classes, Properties, and Methods",
-        "parentId": 3,
-        "path"    : null
-    }]
-}
+{"data": [
+    {"name": "Why Neo.mjs?",                                "parentId": null,                "isLeaf": false, "id": "WhyNeo"},
+        {"name": "Introduction ",                           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Intro"},
+        {"name": "Multi-Threaded",                          "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Multi-Threaded"},
+        {"name": "Extreme Speed",                           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Speed"},
+        {"name": "Quick Application Development",           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Quick"},
+        {"name": "Multi-Window Applications",               "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Multi-Window"},
+        {"name": "Complexity and Effort",                   "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Effort"},
+    {"name": "Getting Started",                             "parentId": null,                "isLeaf": false, "id": "GettingStarted"},
+        {"name": "Setup",                                   "parentId": "GettingStarted",    "isLeaf": true,  "id": "Setup", "hidden":  false},
+        {"name": "Workspaces and Applications",             "parentId": "GettingStarted",    "isLeaf": true,  "id": "2023-10-14T19-25-08-153Z"},
+        {"name": "Describing a View",                       "parentId": "GettingStarted",    "isLeaf": true,  "id": "DescribingTheUI"},
+        {"name": "Events",                                  "parentId": "GettingStarted",    "isLeaf": true,  "id": "Events"},
+        {"name": "Component References",                    "parentId": "GettingStarted",    "isLeaf": true,  "id": "References"},
+        {"name": "Extending Classes",                       "parentId": "GettingStarted",    "isLeaf": true,  "id": "Extending"},
+        {"name": "Config",                                  "parentId": "GettingStarted",    "isLeaf": true,  "id": "Config"},
+        {"name": "Shared Bindable Data",                    "parentId": "GettingStarted",    "isLeaf": true,  "id": "ComponentModels"},
+    {"name": "Tutorials",                                   "parentId": null,                "isLeaf": false, "expanded": false, "id": "Tutorials"},
+        {"name": "Rock Scissors Paper",                     "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "RSP", "hidden":  true},
+        {"name": "Earthquakes",                             "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "Earthquakes"},
+    {"name": "Guides",                                      "parentId": null,                "isLeaf": false, "expanded": false, "id": "InDepth"},
+        {"name": "Config",                                  "parentId": "InDepth",           "isLeaf": false, "id": "Config"},
+        {"name": "Instance Lifecycle",                      "parentId": "InDepth",           "isLeaf": false, "id": "InstanceLifecycle"},
+        {"name": "User Input (Forms)",                      "parentId": "InDepth",           "isLeaf": false, "id": "Forms"},
+        {"name": "Layouts",                                 "parentId": "InDepth",           "isLeaf": false, "id": "Layouts"},
+        {"name": "Custom Components",                       "parentId": "InDepth",           "isLeaf": false, "id": "CustomComponents"},
+        {"name": "Events",                                  "parentId": "InDepth",           "isLeaf": true,  "expanded": false, "id": "GuideEvents"},
+        {"name": "Tables (Stores)",                         "parentId": "InDepth",           "isLeaf": false, "id": "Tables"},
+        {"name": "Shared Bindable Data (Component Models)", "parentId": "InDepth",           "isLeaf": false, "id": "InDepthComponentModels"},
+        {"name": "Multi-Window Applications",               "parentId": "InDepth",           "isLeaf": false, "id": "MultiWindow"},
+        {"name": "Main Thread Addons",                      "parentId": "InDepth",           "isLeaf": false, "id": "MainThreadAddons"},
+            {"name": "Introduction",                        "parentId": "MainThreadAddons",  "isLeaf": true,  "id": "MainThreadAddonIntro"},
+            {"name": "Example",                             "parentId": "MainThreadAddons",  "isLeaf": true,  "id": "MainThreadAddonExample"},
+        {"name": "Mixins",                                  "parentId": "InDepth",           "isLeaf": false, "id": "Mixins"},
+    {"name": "JavaScript Classes",                          "parentId": null,                "isLeaf": false, "id": "JavaScriptClasses", "hidden":  true},
+        {"name": "Classes, Properties, and Methods",        "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-07T19-18-28-517Z"},
+        {"name": "Overriding Methods",                      "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-08T20-20-07-934Z"},
+        {"name": "Other JavaScript Class Features",         "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-08T20-20-37-336Z"},
+        {"name": "Super",                                   "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-08T21-58-25-809Z"},
+        {"name": "New Node",                                "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-31T13-59-37-550Z"},
+    {"name": "Appendix",                                    "parentId": null,                                 "id": "appendix"},
+        {"name": "Stylesheet",                              "parentId": "appendix",          "isLeaf": true,  "id": "stylesheet"},
+        {"name": "Test",                                    "parentId": "appendix",          "isLeaf": true,  "id": "TestLivePreview"}
+]}

package/resources/data/deck/training/{p → pages}/2022-12-27T21-55-23-144Z.md

@@ -38,6 +38,6 @@ class MainContainer extends Viewport {
         }]
     }
 }
-Neo.applyClassConfig(MainContainer);
+Neo.setupClass(MainContainer);
 export default MainContainer;
-</pre>
+</pre>

package/resources/data/deck/training/{p → pages}/2022-12-27T21-55-43-542Z.md

@@ -77,7 +77,7 @@ class MainContainer extends Viewport {
     }
 }
 
-Neo.applyClassConfig(MainContainer);
+Neo.setupClass(MainContainer);
 
 export default MainContainer;
 

package/resources/data/deck/training/{p → pages}/2022-12-29T18-36-56-893Z.md

@@ -106,7 +106,7 @@ class MainContainer extends Viewport {
     }
 }
 
-Neo.applyClassConfig(MainContainer);
+Neo.setupClass(MainContainer);
 
 export default MainContainer;
-</pre>
+</pre>

package/resources/data/deck/training/{p → pages}/2022-12-29T20-37-08-919Z.md

@@ -41,6 +41,6 @@ class MainContainer extends Viewport {
         }]
     }
 }
-Neo.applyClassConfig(MainContainer);
+Neo.setupClass(MainContainer);
 export default MainContainer;
-</pre>
+</pre>

package/resources/data/deck/training/{p → pages}/2022-12-29T20-37-20-344Z.md

@@ -38,6 +38,6 @@ class MainContainer extends Viewport {
         }]
     }
 }
-Neo.applyClassConfig(MainContainer);
+Neo.setupClass(MainContainer);
 export default MainContainer;
-</pre>
+</pre>

package/resources/data/deck/training/{p → pages}/2022-12-31T23-18-55-655Z.md

@@ -35,7 +35,7 @@ class Table extends Base {
     }
 }
 
-Neo.applyClassConfig(Table);
+Neo.setupClass(Table);
 export default Table;
 </pre>
 

package/resources/data/deck/training/{p → pages}/2023-01-01T18-44-07-034Z.md

@@ -25,10 +25,10 @@ class Table extends Base {
     }
 }
 
-Neo.applyClassConfig(Table);
+Neo.setupClass(Table);
 export default Table;
 
 </pre>
 
 Why isn't the store there? Because typically, the code _creating_ the table
-is responsible for providing the store.
+is responsible for providing the store.

package/resources/data/deck/training/{p → pages}/2023-01-01T21-14-45-740Z.md

@@ -76,7 +76,7 @@ class MainView extends Base {
     }
 }
 
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 
 export default MainView;
 </pre>
@@ -95,4 +95,4 @@ What does the code do?
 
 Verify that the app runs.
 
-</details>
+</details>

package/resources/data/deck/training/{p → pages}/2023-01-03T02-07-19-014Z.md

@@ -108,7 +108,7 @@ class MainViewModel extends Base {
     }
 }
 
-Neo.applyClassConfig(MainViewModel);
+Neo.setupClass(MainViewModel);
 export default MainViewModel;
 </pre>