neo.mjs 7.0.6 → 7.1.0

package/resources/data/deck/learnneo/pages/Earthquakes-Lab-04-fetch-data.md

@@ -1,146 +0,0 @@
-<details>
-<summary>Copy the table into its own class</summary>
-
-Create a new file named `apps/earthquakes/view/earthquakes/Table.mjs` with this content.
-
-<pre data-javascript>
-import Base from '../../../../node_modules/neo.mjs/src/table/Container.mjs';
-
-class Table extends Base {
-    static config = {
-        className: 'Earthquakes.view.earthquakes.Table',
-        ntype: 'earthquakes-table',
-        layout: {ntype: 'vbox', align: 'stretch'},
-        style: {width: '100%'},
-        columns: [{
-            dataField: "timestamp",
-            text: "Date",
-            renderer: (data) => data.value.toLocaleDateString(undefined, {weekday: "long", year: "numeric", month: "long", day: "numeric"}),
-        }, {
-            dataField: "humanReadableLocation",
-            text: "Location",
-        }, {
-            dataField: "size",
-            text: "Magnitude",
-            align: "right",
-            renderer: (data) => data.value.toLocaleString(),
-        }],
-    }
-}
-
-Neo.setupClass(Table);
-
-export default Table;
-</pre>
-
-</details>
-
-<details>
-<summary>Review the code</summary>
-
-- The class extends `Neo.table.Container`
-- It has an `ntype`, which we can use when creating an instance, or when debugging
-- Each column has `text` and `dataField` configs, and some have renderers
-
-</details>
-
-<details>
-<summary>Use the new component</summary>
-
-Edit `apps/earthquakes/view/MainView` and make these changes.
-
-- Add `import EarthquakesTable from './earthquakes/Table.mjs';`
-- Replace the `module: Table` with `module: EarthquakesTable`
-- Remove the `columns:[]` config
-- Leave the `store` config alone
-
-Save and refresh the browser, and your app should run as before.
-
-You can confim that the  new class _is being loaded_ by using DevTools to try to open `earthquakes/Table` &mdash; if it
-was imported, it'll be listed.
-
-You can confirm that an instance _was created_ by using the DevTools console and searching for it via
-
-    Neo.first('earthquakes-table')
-
-</details>
-
-<details>
-<summary>Here's the code</summary>
-
-<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 ViewModel        from './MainViewModel.mjs';
-
-class MainView extends Base {
-static config = {
-        className: 'Earthquakes.view.MainView',
-        ntype: 'earthquakes-main',
-
-        controller: {module: Controller},
-        model: {module: ViewModel},
-
-        layout: {ntype: 'vbox', align: 'stretch'},
-        items: [{
-            module: EarthquakesTable,
-            store: {
-                module: Store,
-                model: {
-                    fields: [{
-                        name: "humanReadableLocation",
-                    }, {
-                        name: "size",
-                    }, {
-                        name: "timestamp",
-                        type: "Date",
-                    }],
-                },
-                url: "https://apis.is/earthquake/is",
-                responseRoot: "results",
-                autoLoad: true,
-            },
-            style: {width: '100%'},
-        }],
-    }
-}
-
-Neo.setupClass(MainView);
-
-export default MainView;
-</pre>
-
-</details>
-
-<details>
-<summary>Why are some things in `MainView` and not in `Table`?</summary>
-
-When we refactored the table into its own class we didn't move all the configs. Both
-the width styling and `store` were left in `MainView`. Why?
-
-It's a matter of re-use and what you need in a given situation. By leaving the width specification
-outside the table class we're to specify a different value in all the places we're using the table.
-
-Similarly, if the store were in the table class, it would be using that specific store and
-each instance of the table would have its own instance of the store. If we want multiple
-instance of the table with each using a different store &mdash; or if
-we wanted to share the store with other components &mdash; then it makes sense for the
-store to be outside the table class.
-
-</details>
-
-<details>
-<summary>Make a second instance of the table</summary>
-
-To further illustrate that the table is reusable, let's create a second instance.
-
-Simply copy-and-paste the value in the `MainView` `items` with an identical second item.
-
-Save and refresh and you should see two tables.
-
-<img style="width:80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EarthquakesTwoTables.png"></img>
-
-</details>
-

package/resources/data/deck/learnneo/pages/Earthquakes-Lab-05-refactor-the-table.md

@@ -1,146 +0,0 @@
-<details>
-<summary>Copy the table into its own class</summary>
-
-Create a new file named `apps/earthquakes/view/earthquakes/Table.mjs` with this content.
-
-<pre data-javascript>
-import Base from '../../../../node_modules/neo.mjs/src/table/Container.mjs';
-
-class Table extends Base {
-    static config = {
-        className: 'Earthquakes.view.earthquakes.Table',
-        ntype: 'earthquakes-table',
-        layout: {ntype: 'vbox', align: 'stretch'},
-        style: {width: '100%'},
-        columns: [{
-            dataField: "timestamp",
-            text: "Date",
-            renderer: (data) => data.value.toLocaleDateString(undefined, {weekday: "long", year: "numeric", month: "long", day: "numeric"}),
-        }, {
-            dataField: "humanReadableLocation",
-            text: "Location",
-        }, {
-            dataField: "size",
-            text: "Magnitude",
-            align: "right",
-            renderer: (data) => data.value.toLocaleString(),
-        }],
-    }
-}
-
-Neo.setupClass(Table);
-
-export default Table;
-</pre>
-
-</details>
-
-<details>
-<summary>Review the code</summary>
-
-- The class extends `Neo.table.Container`
-- It has an `ntype`, which we can use when creating an instance, or when debugging
-- Each column has `text` and `dataField` configs, and some have renderers
-
-</details>
-
-<details>
-<summary>Use the new component</summary>
-
-Edit `apps/earthquakes/view/MainView` and make these changes.
-
-- Add `import EarthquakesTable from './earthquakes/Table.mjs';`
-- Replace the `module: Table` with `module: EarthquakesTable`
-- Remove the `columns:[]` config
-- Leave the `store` config alone
-
-Save and refresh the browser, and your app should run as before.
-
-You can confim that the  new class _is being loaded_ by using DevTools to try to open `earthquakes/Table` &mdash; if it
-was imported, it'll be listed.
-
-You can confirm that an instance _was created_ by using the DevTools console and searching for it via
-
-    Neo.first('earthquakes-table')
-
-</details>
-
-<details>
-<summary>Here's the code</summary>
-
-<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 ViewModel        from './MainViewModel.mjs';
-
-class MainView extends Base {
-static config = {
-        className: 'Earthquakes.view.MainView',
-        ntype: 'earthquakes-main',
-
-        controller: {module: Controller},
-        model: {module: ViewModel},
-
-        layout: {ntype: 'vbox', align: 'stretch'},
-        items: [{
-            module: EarthquakesTable,
-            store: {
-                module: Store,
-                model: {
-                    fields: [{
-                        name: "humanReadableLocation",
-                    }, {
-                        name: "size",
-                    }, {
-                        name: "timestamp",
-                        type: "Date",
-                    }],
-                },
-                url: "https://apis.is/earthquake/is",
-                responseRoot: "results",
-                autoLoad: true,
-            },
-            style: {width: '100%'},
-        }],
-    }
-}
-
-Neo.setupClass(MainView);
-
-export default MainView;
-</pre>
-
-</details>
-
-<details>
-<summary>Why are some things in `MainView` and not in `Table`?</summary>
-
-When we refactored the table into its own class we didn't move all the configs. Both
-the width styling and `store` were left in `MainView`. Why?
-
-It's a matter of re-use and what you need in a given situation. By leaving the width specification
-outside the table class we're free to specify a different value the various places we might be using the table.
-
-Similarly, if the store were in the table class, it would be using that specific store and
-each instance of the table would have its own instance of the store. If we want multiple
-instance of the table with each using a different store &mdash; or if
-we wanted to share the store with other components &mdash; then it makes sense for the
-store to be outside the table class.
-
-</details>
-
-<details>
-<summary>Make a second instance of the table</summary>
-
-To further illustrate that the table is reusable, let's create a second instance.
-
-Simply copy-and-paste the value in the `MainView` `items` with an identical second item.
-
-Save and refresh and you should see two tables.
-
-<img style="width:80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EarthquakesTwoTables.png"></img>
-
-</details>
-

package/resources/data/deck/learnneo/pages/Earthquakes-Lab-06-use-a-view-model.md

@@ -1,301 +0,0 @@
-<details>
-<summary>Look at network traffic</summary>
-
-Before making any changes, open devtools in the Network tab and refresh _earthquakes_. You'll see two
-calls to the web service.
-
-<img style="width:80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EarthquakesTwoTablesTwoCalls.png"></img>
-
-</details>
-
-<details>
-<summary>Copy the store config to the view model</summary>
-
-View models have two key configs: `data` and `stores`.
-
-- `data` holds name/value pairs where the value can be a simple value, or object references
-- `stores` holds configs of 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 ViewModel        from './MainViewModel.mjs';
-
-class MainView extends Base {
-    static config = {
-        className: 'Earthquakes.view.MainView',
-        ntype: 'earthquakes-main',
-
-        controller: {module: Controller},
-        model: {
-            module: ViewModel,
-            stores: {
-                earthquakes: {
-                    module: Store,
-                    model: {
-                        fields: [{
-                            name: "humanReadableLocation"
-                        }, {
-                            name: "size"
-                        }, {
-                            name: "timestamp",
-                            type: "Date"
-                        }]
-                    },
-                    url: "https://apis.is/earthquake/is",
-                    responseRoot: "results",
-                    autoLoad: true
-                },    
-            }
-        },
-
-        layout: {
-            ntype: 'vbox', align: 'stretch'
-        },
-        items: [{
-            module: EarthquakesTable,
-            store: {
-                module: Store,
-                model: {
-                    fields: [{
-                        name: "humanReadableLocation"
-                    }, {
-                        name: "size"
-                    }, {
-                        name: "timestamp",
-                        type: "Date"
-                    }]
-                },
-                url: "https://apis.is/earthquake/is",
-                responseRoot: "results",
-                autoLoad: true
-            },
-            style: {width: '100%'}
-        },{
-            module: EarthquakesTable,
-            store: {
-                module: Store,
-                model: {
-                    fields: [{
-                        name: "humanReadableLocation"
-                    }, {
-                        name: "size"
-                    }, {
-                        name: "timestamp",
-                        type: "Date"
-                    }]
-                },
-                url: "https://apis.is/earthquake/is",
-                responseRoot: "results",
-                autoLoad: true
-            },
-            style: {width: '100%'}
-        }],
-    }
-}
-
-Neo.setupClass(MainView);
-
-export default MainView;
-
-</pre>
-
-In the `stores` config we named the store _earthquakes_. We could have named it anything, like _foo_
-or _myStore_. We're calling it _earthquakes_ simply because that seems like a good descriptive name
-of the data the store holds.
-
-At this point we have _three_ identical store configs! Save and refresh, and look at network traffic &mdash; you
-should see three calls.
-
-Having an instance in the view model means we can share it. It can be shared anywhere in the containment
-hierarchy. The app doesn't have much of a hierarchy: it's just the main view and two child components (the two
-tables). But now that the store is in the parent's view model we can share it.
-
-</details>
-
-<details>
-<summary>Use the shared store</summary>
-
-The way to bind an instance to a view model property is with the `bind` config. For example
-
-    bind: {
-        store: 'stores.earthquakes' 
-    }
-
-binds a `store` property to a store called `foo`. The code is saying _in the future, when the value
-of "stores.earthquakes" changes, assign it to this object's "store" property_. In this case, `stores.earthquakes`
-starts out undefined, then at runtime within a few milliseconds as the view model is processed, the configured
-store is created and a reference is assigned to `stores.earthquakes`. That wakes the binding up, and the
-value is assigned to the table's `store` property.
-
-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 ViewModel        from './MainViewModel.mjs';
-
-class MainView extends Base {
-    static config = {
-        className: 'Earthquakes.view.MainView',
-        ntype: 'earthquakes-main',
-        controller: {module: Controller},
-        model: {
-            module: ViewModel,
-            stores: {
-                earthquakes: {
-                    module: Store,
-                    model: {
-                        fields: [{
-                            name: "humanReadableLocation"
-                        }, {
-                            name: "size"
-                        }, {
-                            name: "timestamp",
-                            type: "Date"
-                        }]
-                    },
-                    url: "https://apis.is/earthquake/is",
-                    responseRoot: "results",
-                    autoLoad: true
-                },    
-            }
-        },
-
-        layout: { ntype: 'vbox', align: 'stretch' },
-        items: [{
-            module: EarthquakesTable,
-            bind: {
-                store: 'stores.earthquakes'
-            },
-            style: {width: '100%'}
-        },{
-            module: EarthquakesTable,
-            bind: {
-                store: 'stores.earthquakes'
-            },
-            style: {width: '100%'}
-        }],
-    }
-}
-
-Neo.setupClass(MainView);
-
-export default MainView;
-</pre>
-
-Save, refresh, and look at network traffic: you'll see a _single_ call to the web service.
-
-<img style="width:80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EarthquakesTwoTablesOneCall.png"></img>
-
-You can further prove we're using a shared instance by running these statements in the console.
-
-<pre data-javascript>
-a = Neo.findFirst({ntype:'earthquakes-main'}).model.stores.earthquakes;
-b = Neo.find({ntype:'earthquakes-table'})[0].store;
-c = Neo.find({ntype:'earthquakes-table'})[1].store;
-
-(a === b) && (a === c) && (b === c) // true
-</pre>
-
-</details>
-
-<details>
-<summary>Use the view model class</summary>
-
-We configured the view model in-line, in the `model` config at the top of `MainView`. But the starter app
-has a `MainViewModel` class. In theory, if you have a trivial view model you could configure it in-line. But
-in general you want to keep that code separate by coding it in a separate class. This is what we did for the
-table config &mdash; we started by coding it in-line in the main view, then we refactored it into its own
-class. The result was a simpler and more abstract main view. We want to do the same for the view model.
-
-Since the starter app already provides `MainViewModel`, all we need to do is copy the `stores` property.
-
-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';
-
-class MainViewModel extends Model {
-    static config = {
-        className: 'Earthquakes.view.MainViewModel',
-
-        data: {},
-        stores: {
-            earthquakes: {
-                module: Store,
-                model: {
-                    fields: [{
-                        name: "humanReadableLocation"
-                    }, {
-                        name: "size"
-                    }, {
-                        name: "timestamp",
-                        type: "Date"
-                    }]
-                },
-                url: "https://apis.is/earthquake/is",
-                responseRoot: "results",
-                autoLoad: true
-            },    
-        }
-    }
-}
-
-Neo.setupClass(MainViewModel);
-
-export default MainViewModel;
-</pre>
-
-And you need to remove the `stores` config from the main view as follows.
-
-<pre data-javascript>
-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 Container {
-    static config = {
-        className: 'Earthquakes.view.MainView',
-        ntype: 'earthquakes-main',
-        controller: {module: Controller},
-        model: {
-            module: ViewModel
-        },
-
-        layout: { ntype: 'vbox', align: 'stretch' },
-        items: [{
-            module: EarthquakesTable,
-            bind: {
-                store: 'stores.earthquakes'
-            },
-            style: {width: '100%'}
-        },{
-            module: EarthquakesTable,
-            bind: {
-                store: 'stores.earthquakes'
-            },
-            style: {width: '100%'}
-        }]
-    }
-}
-
-Neo.setupClass(MainView);
-
-export default MainView;
-</pre>
-
-The refactorings to have separate table and view model classes means the code is more modular, more reusable,
-and each class is simpler than using complex source files that try to configure every detail.
-
-</details>
-