neo.mjs 7.0.6 → 7.2.0

package/resources/data/deck/learnneo/pages/Earthquakes-Lab-01-generate-a-workspace.md

@@ -1,47 +0,0 @@
-In this lab, you'll generate a Neo.mjs workspace and run the starter app.
-
-<details>
-<summary>Wait!</summary>
-You may already have a workspace! If so, you can skip this lab. For example, if you followed the <a href="#/learn/Setup">Getting Started > Setup</a> 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>
-
-Use a terminal window to navigate to some parent folder, 
-then run 
-
-    npx neo-app@latest
-
-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>
-
-<details>
-<summary>Inspect the workspace</summary>
-
-The workspace contains a local copy of the API docs, an `apps` directory (where your apps are found), 
-and some other directories.
-</details>
-
-<details>
-<summary>Start the server</summary>
-From the root of the `workspace` start the server via `npm run server-start`. That starts a server
-at port 8080 and opens a new browser window.
-
-<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/StartServer.png" style="width:80%"/>
-
-</details>
-
-
-<details>
-<summary>Run the starter app</summary>
-
-By default, an app named `myapp` was created. You can run it by entering the `apps` directory and 
-clicking `myapp`. It's a folder containing an `index.html` along with the source code for the app.
-
-<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/RunTheStarterApp.png" style="width:80%"/>
-
-</details>

package/resources/data/deck/learnneo/pages/Earthquakes-Lab-02-generate-the-starter-app.md

@@ -1,150 +0,0 @@
-In this lab you'll create a starter app and add a single component.
-
-<details>
-
-<summary>Use the command-line to create a starter app</summary>
-
-Use a terminal window to navigate to the workspace and run the following script. Use "Earthquakes"
-as the app name, and defaults for everything else.
-
-    npm run create-app-minimal
-
-After the script runs yous should see these files in the `app/earthquakes` directory.
-
-`view/MainContainer.mjs`
-- `app.mjs`
-- `index.html`
-- `neo-config.json`
-
-If you look in `neo-config.json` you should see this content. Note the `mainThreadAddons` block 
-&mdash; it reflects the add-ons you chose when you followed the instructions in the script.
-<pre>
-{
-    "appPath": "../../apps/earthquakes/app.mjs",
-    "basePath": "../../",
-    "environment": "development",
-    "mainPath": "../node_modules/neo.mjs/src/Main.mjs",
-    "mainThreadAddons": [
-        "DragDrop",
-        "Stylesheet"
-    ],
-    "workerBasePath": "../../node_modules/neo.mjs/src/worker/"
-}</pre>
-
-You're free to edit `neo-config.json` if you were to change your mind later about the theme or need for other add-ons.
-
-If you refresh browser at <a href="http://localhost:8080/apps/" target="apps">http://localhost:8080/apps/</a>
-you'll see the new _earthquakes_ app listed, and if you run it you'll see... nothing! That's because the 
-minimal starter app is the shell of an application without any view content. We'll add a little content
-later in the lab.
-
-<img style="width:80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EmptyEarthquakes.png"></img>
-
-</details>
-
-<details>
-<summary>Look at the main view source</summary>
-
-Use a code editor and look at `workspace/apps/earthquakes/src/view/MainView.mjs`. You'll see the 
-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';
-
-class MainView extends Base {
-    static config = {
-        className: 'Earthquakes.view.MainView',
-        ntype: 'earthquakes-main',
-        
-        controller: {module: Controller},
-        model: {module: ViewModel},
-
-        layout: {ntype: 'fit'},
-        items: [],
-    }
-}
-
-Neo.setupClass(MainView);
-
-export default MainView;
-</pre>
-
-As you can see, `MainView extends Base`, and `Base` is a _container_ (`Neo.container.Base`). 
-A container is a component &mdash; it holds other components, specified in `items:[]`. There 
-are no items in the starter app. The `layout` config specifies how the items are arranged.
-
-</details>
-
-<details>
-<summary>Add a component</summary>
-
-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 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';
-
-class MainView extends Base {
-    static config = {
-        className: 'Earthquakes.view.MainView',
-        ntype: 'earthquakes-main',
-
-        controller: {module: Controller},
-        model: {module: ViewModel},
-
-        layout: {ntype: 'fit'},
-        items: [{
-            module: Button,
-            text: 'Button!'
-        }],
-    }
-}
-
-Neo.setupClass(MainView);
-
-export default MainView;
-</pre>
-
-
-When you run the app you'll see the single button.
-
-<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EarthquakesSingleFitButton.png" style="width:80%"/>
-
-The button takes up the full width. Buttons look different depending on the theme. We're using
-the _neo-theme-neo-light_ theme, which controls button height. Otherwise, child items a using the _fit_ layout
-take up the full window.
-</details>
-
-
-<details>
-<summary>Modify the layout</summary>
-The `layout` configures how child items are visually arranged. First, note that the config
-specifies `ntype`. We used `module` for the button config. An `ntype` is a class alias &mdash; if a class
-has already been imported, you can use the `ntype` rather than importing it again and using the `module`
-config. We haven't imported any layouts, but it turns out that `Neo.container.Base` _does_ import all the 
-layout types, which means we're always free to use `ntype` with layouts. You're free to specify an `ntype`
-for the classes you define.
-
-Let's change the layout to arrange items vertically, with items aligned horizontally at the start.
-
-<pre data-javascript>
-layout: {
-    ntype: 'vbox',
-    align: 'start'
-}
-</pre>
-
-<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EarthquakesSingleVoxStartButton.png" style="width:80%"/>
-
-
-</details>

package/resources/data/deck/learnneo/pages/Earthquakes-Lab-03-debugging.md

@@ -1,136 +0,0 @@
-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.
-
-<details>
-<summary>Use `Neo.manager.Component.items`</summary>
-
-While running the _earthquakes_ app, open Chrome devtools, choose the _neomjs-app-worker_ JavaScript
-context, and run this statement:
-
-    Neo.manager.Component.items
-
-The `items` property is an array of all created components. The array may have a lot of entries, depending on
-the complexity of an app and how much you've done while running it. But it's an easy way to explore what's
-been created.
-
-</details>
-
-<details>
-<summary>Store as global variable</summary>
-
-Any time you have a object reference in the console &mdash; even if it's nested within an array or object &mdash;
-you can right click on the object and choose _Store as global_ variable. Chrome will create a variable named
-`temp1`, `temp2`, etc., that references the object. That  can make it easier to inspect the object and run its methods..
-
-
-<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/StoreAsGlobal.png" style="width:80%"/>
-
-</details>
-
-
-<details>
-<summary>Use `Neo.find()` and `Neo.findFirst()`</summary>
-
-If you know what you're looking for, and don't want to bother inspecting everything in `Neo.manager.Component.items`,
-you can use `Neo.find()`, passing an object used to match against what you're searching for.
-
-`Neo.find()` returns an array of matching instances, and `Neo.findFirst()` returns the first matching item.
-Often you know there's only a single instance, so in practice `Neo.findFirst()` is more commonly used.
-
-You could find the button via Neo.find({ntype:'button'}) or Neo.find({text:'Button!'} (assuming you haven't changed
-the button's text.) You can even match a property you give the button. For example, if you configured it with a made-up
-property `foo:true`, you could find it via `Neo.findFirst({foo:true})`. The point is you can search for any properties
-you'd like.
-
-Try this out.
-
-`Neo.findFirst({text:'Button!'}).text = 'Foo!'
-
-You should see the button's text change immediately.
-
-</details>
-
-
-<details>
-<summary>Use `Shift-Ctrl-right-click`</summary>
-
-With your cursor over the button, press _Shift-Ctrl-right-click_. The console will log the button, its parent `MainView`
-and the subsequent parent `Viewport. The button reference shows up as `Base` because the button class name is `Neo.button.Base`.
-
-<img width="80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EarthquakesDemoShiftCtrl.png">
-
-Note that _Shift-Ctrl-right-click_ is only available during development &mdash; it isn't available in a build.
-
-</details>
-
-
-<details>
-<summary>Add a method</summary>
-
-As we mentioned, when debugging, if you a have a reference you can access or update its properties, or run
-its methods. Let's try that out by adding a method.
-
-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';
-
-class MainView extends Base {
-    static config = {
-        className: 'Earthquakes.view.MainView',
-        ntype: 'earthquakes-main',
-
-        controller: {module: Controller},
-        model: {module: ViewModel},
-
-        layout: {
-            ntype: 'vbox',
-            align: 'start'
-        },
-        items: [{
-            module: Button,
-            foo: true,
-            text: 'Button!'
-        }],
-    }
-    doFoo() {
-        console.log('foo!');
-    }
-}
-
-Neo.setupClass(MainView);
-
-export default MainView;
-</pre>
-
-Save your changes.
-
-As you can see, the code defined an instance method `doFoo()` that simply logs a message. We'll run the method via debugging techniques in the next step.
-
-</details>
-
-<details>
-<summary>Use `Neo.component.Manager.items` to run the method</summary>
-
-On the console run `Neo.component.Manager.items`. Expand the array and right-click on the entry for `MainView` and
-choose `Store object as global variable`. Then type `temp1.doFoo()` &mdash; you should see "foo!" being logged.
-
-Remember that you _must_ run console statement in the _neomjs-app-worker_ context, and every time your choose
-`Store object as global variable` it'll increment the name of the temp variable: `temp1`, `temp2`, etc.
-</details>
-
-<details>
-<summary>Use _Shift-Ctrl-right-click_ to run the method</summary>
-
-Now try the _Shift-Ctrl-right-click_ technique.
-
-With your cursor over the button, do a _Shift-Ctrl-right-click_ &mdash; you'll see the component hierarchy logged.
-As you did in the previous step, right-click on the entry for `MainView` and choose `Store object as global variable`.
-Then run `doFoo()` using that variable.
-</details>

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