neo.mjs 6.12.1 → 6.13.0

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

@@ -1,31 +1,21 @@
-##Introduction 
+## Introduction 
 
 In this topic you'll create an application that fetches data on earthquakes in Iceland,
 and show the information in two views: a table, and a map.
 
-You'll do this in a series of labs:
-
-1. Generate a workspace
-1. Generate a starter app
-1. Learn some debugging tricks
-1. Generate the earthquakes starter app
-1. Refactor a config into its own class
-1. Add a map
-1. Listen to events
-1. Make the app multi-window
+You'll do this in a series of labs. 
 
 ## Goals 
 
-What's the goal of this lengthy topic?
+What are the goals of this lengthy topic?
 
 - To give you hands-on coding a simple app
 - To introduce fundamental Neo concepts
-- To do some coding without emphasizing syntax details
 
-Most of these labs are copy-and-paste because we're focusing on _what_ it's doing on rather than _how_.
+Most of these labs are copy-and-paste because we're focusing on _what_ the code is doing on rather than _how_.
 
-As we progress through the training we'll spend more and more time on syntax and how, and you'll 
-become more and more proficient at writing your own code.
+For this tutorial don't worry about syntax details. Other tutorials and guides will spend more and 
+more time on syntax.e
 
 ## Key concepts
 
@@ -45,11 +35,19 @@ A word of advice: Keep a high-level perspective, especially early on. We'll have
 into the code, and we'll do most things multiple times. In other words, focus on what you're accomplishing,
 and don't worry about syntax details. 
 
-## Lab. Generate a workspace
+## Lab. Generate a Workspace
 
 In this lab, you'll generate a Neo.mjs workspace and run the starter app.
 
 <!-- lab -->
+
+<details>
+<summary>Wait!</summary>
+You may already have a workspace! If so, you can skip this lab. For example, if you followed the _Getting Started > Setup_ topic, above, you should already have a workspace.
+
+If you don't have a workspace, then continue on to the next step.
+</details>
+
 <details>
 <summary>Use the command-line to generate the workspace</summary>
 
@@ -58,7 +56,7 @@ then run
 
     npx neo-app@latest
 
-You'll be propted for a workspace name, starter app name, etc &mdash; accept the default for everything.
+You'll be prompted for a workspace name, starter app name, etc &mdash; accept the default for everything.
 As the command finishes it starts a server and opens a browser window.
 </details>
 
@@ -126,8 +124,8 @@ Parallel processing &mdash; along wih the efficient way the `neomjs-vdom-worker`
 
 ##Commonly-used Scripts
 
-If you look in the `package.json` script block you'll see several scripts used for generating applications and classes, 
-doing builds, and starting a server. We'll use several of them throughout the tutorials.
+If you look in the `package.json` script block you'll see several scripts used for generating applications 
+and classes, doing builds, and starting a server. We'll use several of them throughout the tutorials.
 
 - create-app &mdash; creates a simple demo app
 - create-app-minimal &mdash; creates a application shell with no content
@@ -137,7 +135,7 @@ doing builds, and starting a server. We'll use several of them throughout the tu
 - watch-themes &mdash; creates app .css as you save changes to any app
 
 
-##Lab. Create the earthquakes starter app
+##Lab. Create the Earthquakes Starter App
 
 <!-- lab -->
 
@@ -193,9 +191,9 @@ following class definition:
 
 <pre data-javascript>
 
-import Base        from '../../../node_modules/neo.mjs/src/container/Base.mjs';
-import Controller  from './MainViewController.mjs';
-import ViewModel   from './MainViewModel.mjs';
+import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Controller from './MainViewController.mjs';
+import ViewModel  from './MainViewModel.mjs';
 
 class MainView extends Base {
     static config = {
@@ -210,7 +208,7 @@ class MainView extends Base {
     }
 }
 
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 
 export default MainView;
 </pre>
@@ -227,15 +225,15 @@ are no items in the starter app. The `layout` config specifies how the items are
 Let's add a button. To do that, add an import for the button base class, then configure it
 in the container's `items:[]`. If you were to read the API docs for buttons, you'd see 
 that buttons have various configs, such as `text`, which is the button text, `iconCls`, which
-is typically a FontAwesome CSS class used to show an icon, and `handler`, which specified
+is typically a FontAwesome CSS class used to show an icon, and `handler`, which specifies
 which method to run when the button is clicked. We'll use `text`.
 
 <pre data-javascript>
 
-import Base        from '../../../node_modules/neo.mjs/src/container/Base.mjs';
-import Button      from '../../../node_modules/neo.mjs/src/button/Base.mjs';
-import Controller  from './MainViewController.mjs';
-import ViewModel   from './MainViewModel.mjs';
+import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Button     from '../../../node_modules/neo.mjs/src/button/Base.mjs';
+import Controller from './MainViewController.mjs';
+import ViewModel  from './MainViewModel.mjs';
 
 class MainView extends Base {
     static config = {
@@ -253,7 +251,7 @@ class MainView extends Base {
     }
 }
 
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 
 export default MainView;
 </pre>
@@ -307,19 +305,20 @@ choose that worker in the DevTools JavaScript context dropdown.
 
 <img width="80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/DevToolsJavaScriptContext.png">
 
-A basic debugging (and coding!) task is getting a referernce to a component.
-You can then see and update the component's state and run its methods.
+A basic debugging (and coding!) task is getting a reference to a component.
+You can then get or update the component's state and run its methods.
+
+When you're debugging, there are a few ways to get a component reference.
 
-There are a few ways to get a component reference.
-- `Neo.manager.Component.items` <tt>// Returns [Component]</tt>
-- `Neo.find({property:'value'})` <tt>// Returns [{}] of instances<t/t>
-- `Neo.findFirst({property:'value'})` <tt>// Returns first instance</tt>
 - Doing a Shift-Ctrl-right-click on a component
+- `Neo.manager.Component.items` &mdash; Returns an array of all components in the app
+- `Neo.find({property:'value'})` &mdash; Returns an array of components matching the specified properties
+- `Neo.findFirst({property:'value'})` &mdash; Returns the first component that matches the specified properties
 
 Keep in mind that `Neo.manager.Component.items`, `Neo.find()` and `Neo.findFirst()`
-are debugging aids _only_, and _should never be used in app logic_.
+are debugging aids _only_, and <u>_should never be used in app logic_</u>.
 
-Why? There's nothing stopping you from using then, and they would work fine,
+Why? There's nothing stopping you from using these statements, and they would work fine,
 but those methods completely break encapsulation and scoping principles! Their 
 use would make an application brittle and hard to maintain.
 
@@ -331,7 +330,7 @@ context, we can inspect the button.
 <img width="80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EarthquakesFindFirstButton.png">
 
 Once we find the component, we can expand it and scroll down until we see the grayed-out properties &mdash; 
-those are setter/getter properties.
+those are set/get properties.
 
 We can choose whatever property we're interested in, and click on the ellipses. That runs the getter, and if 
 we change the value we'll be running the setter. An obvious button property to change is `text`.
@@ -355,6 +354,8 @@ and inspect or update component.
 In this lab you'll get a little debugging practice by getting component references, changing properties, 
 and runing methods.
 
+Remember that when using the debugger console you need to be in the _neo-app-worker_ context.
+
 <!-- lab -->
 
 <details>
@@ -430,10 +431,10 @@ Edit `apps/earthquakes/view/MainView.mjs` and add a method.
 
 <pre data-javascript>
 
-import Base        from '../../../node_modules/neo.mjs/src/container/Base.mjs';
-import Button      from '../../../node_modules/neo.mjs/src/button/Base.mjs';
-import Controller  from './MainViewController.mjs';
-import ViewModel   from './MainViewModel.mjs';
+import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Button     from '../../../node_modules/neo.mjs/src/button/Base.mjs';
+import Controller from './MainViewController.mjs';
+import ViewModel  from './MainViewModel.mjs';
 
 class MainView extends Base {
     static config = {
@@ -453,12 +454,12 @@ class MainView extends Base {
             text: 'Button!'
         }],
     }
-    doFoo (){
+    doFoo() {
         console.log('foo!');
     }
 }
 
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 
 export default MainView;
 </pre>
@@ -491,9 +492,9 @@ Then run `doFoo()` using that variable.
 
 <!-- /lab -->
 
-At this point we have a application with minimal content. You also know how to do some debugging. Let's do something more interesting.
+At this point we have a application with minimal content. You also know how to do some debugging. Now let's do something more interesting.
 
-##Lab. Fetch earthquakes data and show it in a table
+##Lab. Fetch Earthquakes Data and Show it in a Table
 
 <!-- lab -->
 
@@ -504,11 +505,11 @@ Replace the button with a table by replacing `MainView.mjs` with the following c
 
 <pre data-javascript>
 
-import Base        from '../../../node_modules/neo.mjs/src/container/Base.mjs';
-import Table       from '../../../node_modules/neo.mjs/src/table/Container.mjs';
-import Store       from '../../../node_modules/neo.mjs/src/data/Store.mjs';
-import Controller  from './MainViewController.mjs';
-import ViewModel   from './MainViewModel.mjs';
+import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Table      from '../../../node_modules/neo.mjs/src/table/Container.mjs';
+import Store      from '../../../node_modules/neo.mjs/src/data/Store.mjs';
+import Controller from './MainViewController.mjs';
+import ViewModel  from './MainViewModel.mjs';
 
 class MainView extends Base {
     static config = {
@@ -541,21 +542,23 @@ class MainView extends Base {
             columns: [{
                 dataField: "timestamp",
                 text: "Date",
-                renderer: (data) => data.value.toLocaleDateString(undefined, {weekday: "long", year: "numeric", month: "long", day: "numeric"}),
+                renderer: (data) => data.value.toLocaleDateString(undefined,
+                    {weekday: "long", year: "numeric", month: "long", day: "numeric"}
+                )
             }, {
                 dataField: "humanReadableLocation",
-                text: "Location",
+                text: "Location"
             }, {
                 dataField: "size",
                 text: "Magnitude",
                 align: "right",
-                renderer: (data) => data.value.toLocaleString(),
-            }],
-        }],
+                renderer: (data) => data.value.toLocaleString()
+            }]
+        }]
     }
 }
 
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 
 export default MainView;
 </pre>
@@ -657,7 +660,7 @@ By default, a column just runs `toString()` on the record property specified in
 You can also provide a `renderer`, which is a function you provide to format the value any way you'd like.
 In the code above it's using standard JavaScript methods to format the data and magnitude.
 
-## Definining Views as Reusable Components
+## Defining Views as Reusable Components
 
 The way we've coded the app, the grid is _not_ reusable. In other words, if we needed two identical grids we'd 
 have to copy-and-paste the same config block.
@@ -702,7 +705,7 @@ class Table extends Base {
     }
 }
 
-Neo.applyClassConfig(Table);
+Neo.setupClass(Table);
 
 export default Table;
 </pre>
@@ -744,9 +747,9 @@ You can confirm that an instance _was created_ by using the DevTools console and
 
 <pre data-javascript>
 import Base             from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Controller       from './MainViewController.mjs';
 import EarthquakesTable from './earthquakes/Table.mjs';
 import Store            from '../../../node_modules/neo.mjs/src/data/Store.mjs';
-import Controller       from './MainViewController.mjs';
 import ViewModel        from './MainViewModel.mjs';
 
 class MainView extends Base {
@@ -781,7 +784,7 @@ static config = {
     }
 }
 
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 
 export default MainView;
 </pre>
@@ -868,11 +871,10 @@ View models have two key configs: `data` and `stores`.
 Add a `stores` property to the view model config that holds a copy of the store.
 
 <pre data-javascript>
-
 import Base             from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Controller       from './MainViewController.mjs';
 import EarthquakesTable from './earthquakes/Table.mjs';
 import Store            from '../../../node_modules/neo.mjs/src/data/Store.mjs';
-import Controller       from './MainViewController.mjs';
 import ViewModel        from './MainViewModel.mjs';
 
 class MainView extends Base {
@@ -888,17 +890,17 @@ class MainView extends Base {
                     module: Store,
                     model: {
                         fields: [{
-                            name: "humanReadableLocation",
+                            name: "humanReadableLocation"
                         }, {
-                            name: "size",
+                            name: "size"
                         }, {
                             name: "timestamp",
-                            type: "Date",
-                        }],
+                            type: "Date"
+                        }]
                     },
                     url: "https://apis.is/earthquake/is",
                     responseRoot: "results",
-                    autoLoad: true,
+                    autoLoad: true
                 },    
             }
         },
@@ -912,43 +914,43 @@ class MainView extends Base {
                 module: Store,
                 model: {
                     fields: [{
-                        name: "humanReadableLocation",
+                        name: "humanReadableLocation"
                     }, {
-                        name: "size",
+                        name: "size"
                     }, {
                         name: "timestamp",
-                        type: "Date",
-                    }],
+                        type: "Date"
+                    }]
                 },
                 url: "https://apis.is/earthquake/is",
                 responseRoot: "results",
-                autoLoad: true,
+                autoLoad: true
             },
-            style: {width: '100%'},
+            style: {width: '100%'}
         },{
             module: EarthquakesTable,
             store: {
                 module: Store,
                 model: {
                     fields: [{
-                        name: "humanReadableLocation",
+                        name: "humanReadableLocation"
                     }, {
-                        name: "size",
+                        name: "size"
                     }, {
                         name: "timestamp",
-                        type: "Date",
-                    }],
+                        type: "Date"
+                    }]
                 },
                 url: "https://apis.is/earthquake/is",
                 responseRoot: "results",
-                autoLoad: true,
+                autoLoad: true
             },
-            style: {width: '100%'},
+            style: {width: '100%'}
         }],
     }
 }
 
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 
 export default MainView;
 
@@ -987,9 +989,9 @@ Replace each table's `store` config with the binding.
 <pre data-javascript>
 
 import Base             from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Controller       from './MainViewController.mjs';
 import EarthquakesTable from './earthquakes/Table.mjs';
 import Store            from '../../../node_modules/neo.mjs/src/data/Store.mjs';
-import Controller       from './MainViewController.mjs';
 import ViewModel        from './MainViewModel.mjs';
 
 class MainView extends Base {
@@ -1004,17 +1006,17 @@ class MainView extends Base {
                     module: Store,
                     model: {
                         fields: [{
-                            name: "humanReadableLocation",
+                            name: "humanReadableLocation"
                         }, {
-                            name: "size",
+                            name: "size"
                         }, {
                             name: "timestamp",
-                            type: "Date",
-                        }],
+                            type: "Date"
+                        }]
                     },
                     url: "https://apis.is/earthquake/is",
                     responseRoot: "results",
-                    autoLoad: true,
+                    autoLoad: true
                 },    
             }
         },
@@ -1025,18 +1027,18 @@ class MainView extends Base {
             bind: {
                 store: 'stores.earthquakes'
             },
-            style: {width: '100%'},
+            style: {width: '100%'}
         },{
             module: EarthquakesTable,
             bind: {
                 store: 'stores.earthquakes'
             },
-            style: {width: '100%'},
+            style: {width: '100%'}
         }],
     }
 }
 
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 
 export default MainView;
 </pre>
@@ -1071,11 +1073,10 @@ Since the starter app already provides `MainViewModel`, all we need to do is cop
 Here's the resulting code you should place into `MainViewModel.mjs`.
 
 <pre data-javascript>
+import Model from '../../../node_modules/neo.mjs/src/model/Component.mjs';
+import Store from '../../../node_modules/neo.mjs/src/data/Store.mjs';
 
-import Base   from '../../../node_modules/neo.mjs/src/model/Component.mjs';
-import Store  from '../../../node_modules/neo.mjs/src/data/Store.mjs';
-
-class MainViewModel extends Base {
+class MainViewModel extends Model {
     static config = {
         className: 'Earthquakes.view.MainViewModel',
 
@@ -1085,23 +1086,23 @@ class MainViewModel extends Base {
                 module: Store,
                 model: {
                     fields: [{
-                        name: "humanReadableLocation",
+                        name: "humanReadableLocation"
                     }, {
-                        name: "size",
+                        name: "size"
                     }, {
                         name: "timestamp",
-                        type: "Date",
-                    }],
+                        type: "Date"
+                    }]
                 },
                 url: "https://apis.is/earthquake/is",
                 responseRoot: "results",
-                autoLoad: true,
+                autoLoad: true
             },    
         }
     }
 }
 
-Neo.applyClassConfig(MainViewModel);
+Neo.setupClass(MainViewModel);
 
 export default MainViewModel;
 </pre>
@@ -1109,13 +1110,12 @@ export default MainViewModel;
 And you need to remove the `stores` config from the main view as follows.
 
 <pre data-javascript>
-
-import Base             from '../../../node_modules/neo.mjs/src/container/Base.mjs';
-import EarthquakesTable from './earthquakes/Table.mjs';
+import Container        from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller       from './MainViewController.mjs';
+import EarthquakesTable from './earthquakes/Table.mjs';
 import ViewModel        from './MainViewModel.mjs';
 
-class MainView extends Base {
+class MainView extends Container {
     static config = {
         className: 'Earthquakes.view.MainView',
         ntype: 'earthquakes-main',
@@ -1130,18 +1130,18 @@ class MainView extends Base {
             bind: {
                 store: 'stores.earthquakes'
             },
-            style: {width: '100%'},
+            style: {width: '100%'}
         },{
             module: EarthquakesTable,
             bind: {
                 store: 'stores.earthquakes'
             },
-            style: {width: '100%'},
-        }],
+            style: {width: '100%'}
+        }]
     }
 }
 
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 
 export default MainView;
 </pre>
@@ -1194,7 +1194,7 @@ Marker store records are required to have these properties:
 <!-- lab -->
 
 <details>
-<summary>Specficy the main-thread add-on</summary>
+<summary>Specify the main-thread add-on</summary>
 
 Edit `apps/earthquakes/neo-config.json` and add entries for the Google Maps add-on and the map key.
 
@@ -1278,7 +1278,7 @@ and show it implace of the top table. The map should be centered on Iceland. To
         lat: 64.8014187,
         lng: -18.3096357
     },
-    zoom: 6,
+    zoom: 6
 }
 </pre>
 
@@ -1286,13 +1286,13 @@ If we replace the top table with the map, `view/MainView.mjs` ends up with this
 
 <pre data-javascript>
 
-import Base                from '../../../node_modules/neo.mjs/src/container/Base.mjs';
-import EarthquakesTable    from './earthquakes/Table.mjs';
+import Container           from '../../../node_modules/neo.mjs/src/container/Base.mjs';
 import Controller          from './MainViewController.mjs';
-import ViewModel           from './MainViewModel.mjs';
+import EarthquakesTable    from './earthquakes/Table.mjs';
 import GoogleMapsComponent from '../../../src/component/wrapper/GoogleMaps.mjs';
+import ViewModel           from './MainViewModel.mjs';
 
-class MainView extends Base {
+class MainView extends Container {
     static config = {
         className: 'Earthquakes.view.MainView',
         ntype: 'earthquakes-main',
@@ -1309,7 +1309,7 @@ class MainView extends Base {
                 lat: 64.8014187,
                 lng: -18.3096357
             },
-            zoom: 6,
+            zoom: 6
         },{
             module: EarthquakesTable,
             bind: {
@@ -1323,10 +1323,9 @@ class MainView extends Base {
     }
 }
 
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 
 export default MainView;
-
 </pre>
 
 <img style="width:80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/CenteredMap.png"></img>
@@ -1406,4 +1405,4 @@ Save, refresh, and confirm that you see the value logged when you click on a map
 
 
 
-<!-- /lab -->
+<!-- /lab -->

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

@@ -22,21 +22,21 @@ class MainView extends Base {
             module: TextField,
             labelText  : 'First name',
             listeners: {
-                change: data=>console.log(data.value), // There are other properties, like oldValue
-                focusEnter: data=>console.log(`Entering ${data.component.labelText}`) 
+                change: data => Neo.Main.log({value:data.value}),
+                focusEnter: data => Neo.Main.log({value: `Entering ${data.component.labelText}`}) 
             }
         },
         {
             module: TextField,
             labelText  : 'Last name',
             listeners: {
-                change: data=>console.log(data.value), // There are other properties, like oldValue
-                focusEnter: data=>console.log(`Entering ${data.component.labelText}`) 
+                change: data => Neo.Main.log({value: data.value}),
+                focusEnter: data => Neo.Main.log({value: `Entering ${data.component.labelText}`}) 
             }
         }]
     }
 }
-Neo.applyClassConfig(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
@@ -62,7 +62,7 @@ class MainViewController extends Controller {
         console.log(data.value);
     }
 }
-Neo.applyClassConfig(MainViewController);
+Neo.setupClass(MainViewController);
 
 
 class MainView extends Base {
@@ -79,7 +79,7 @@ class MainView extends Base {
         }]
     }
 }
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 </pre>
 
 (It's important to keep in mind that in Neo.mjs, all class definitions are coded in their own
@@ -122,7 +122,7 @@ class ToggleButton extends Button {
         this.checked = !this.checked;      
     }
 }
-Neo.applyClassConfig(ToggleButton);
+Neo.setupClass(ToggleButton);
 
 
 class MainView extends Base {
@@ -138,16 +138,5 @@ class MainView extends Base {
         }]
     }
 }
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 </pre>
-
-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>