neo.mjs 6.12.0 → 6.13.0

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

@@ -1,153 +0,0 @@
-All components fire events. For example, form fields fire a `change` event, various 
-focus events, and others. Some other types fire events too, such as `Neo.data.Store`, 
-which fires a `load` event after the store is loaded with data.
-
-Some terminology related to events is that events are _fired_, and as a result, some 
-event _handler_ — or _listener_ — is run.
-
-To specify an event handler, use `listeners: {}`, specifying in as many event/handler
-pairs as you need. 
-
-The code below shows two text fields, with `listeners` for `change` and `focusEnter`.
-(The events for any component are documened in the API docs.)
-
-<pre data-neo>
-import Base from '../../../../src/container/Base.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
-class MainView extends Base {
-    static config = {
-        className : 'Example.view.MainView',
-        layout: {ntype:'vbox', align:'start'},
-        items : [{
-            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}`) 
-            }
-        },
-        {
-            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}`) 
-            }
-        }]
-    }
-}
-Neo.applyClassConfig(MainView);
-</pre>
-
-If you run the example, and open the browser's debugger, you'll see the console being logged as you type or give
-focus to either field.
-
-Note that the handlers specify an in-line function. For trivial cases, that might be ok. But normally
-you'd want better separation of concerns by placing those event handlers in a separate class. Neo.mjs provides
-that with a _component controller_. 
-
-A `Neo.controller.Component` is a simple class associated with a component class. As a view is created, an 
-instance of its associated contoller is automatically created. 
-
-<pre data-neo>
-import Base        from  '../../../../src/container/Base.mjs';
-import Controller  from  '../../../../src/controller/Component.mjs';
-import TextField  from   '../../../../src/form/field/Text.mjs';
-
-class MainViewController extends Controller {
-    static config = {
-        className: 'Example.view.MainViewController'
-    }
-    onChange(data){
-        console.log(data.value);
-    }
-}
-Neo.applyClassConfig(MainViewController);
-
-
-class MainView extends Base {
-    static config = {
-        className : 'Example.view.MainView',
-        controller: MainViewController,
-        layout: {ntype:'vbox', align:'start'},
-        items : [{
-            module: TextField,
-            labelText  : 'Name',
-            listeners: {
-                change: 'onChange'
-            }
-        }]
-    }
-}
-Neo.applyClassConfig(MainView);
-</pre>
-
-(It's important to keep in mind that in Neo.mjs, all class definitions are coded in their own
-source file: one class per file. In the examples we're putting all the relevant classes together
-to make it easier to see the source code for every class being used. But in an 
-actual applications the controller class would be coded in its own source file &mdash; named something
-like `MainViewController.mjs` &mdash; and that would be imported into the view.)
-
-The ability to fire events and add listeners is provided by `Neo.core.Observable`, which is mixed into 
-classes that need that ability. All components are observable, `Neo.data.Store` is observable, and some
-others. `Neo.core.Observable` introduces a few methods and properties, such as `listeners`, which
-is used in the examples above, `on()` for procedurally adding an event listener, and `fire()`, which is 
-how you fire events in the custom classes you create.
-
-Here's example illustrating how `fire()` is used. The code defines a `ToggleButton`
-class, which is just a button with a `checked` property: the button shows a checked or unchecked
-checkbox depending on the value of `checked`. 
-
-The code uses a special Neo.mjs feature you haven't seen yet &mdash; the use of an underscore property. 
-We'll discuss that at length later, but in a nutshell, config properties ending in an underscore 
-automatically get lifecycle methods run before the value is assigned, after the value is assigned, and 
-before the value is accessed. We're using the _after_ method to fire a `change` event.
-
-<pre data-neo>
-import Base        from  '../../../../src/container/Base.mjs';
-import Button  from  '../../../../src/button/Base.mjs';
-import TextField  from   '../../../../src/form/field/Text.mjs';
-
-class ToggleButton extends Button {
-    static config = {
-        className: 'Example.view.ToggleButton',
-        checked_: false
-    }
-    afterSetChecked(checked){
-        this.iconCls = checked?'fa fa-square-check':'fa fa-square';
-        this.fire('change', {component: this, checked}); // This is where our custom event is being fired
-    }
-    onClick(data){
-        super.onClick(data); 
-        this.checked = !this.checked;      
-    }
-}
-Neo.applyClassConfig(ToggleButton);
-
-
-class MainView extends Base {
-    static config = {
-        className : 'Example.view.MainView',
-        layout: {ntype:'vbox', align:'start'},
-        items : [{
-            module: ToggleButton,
-            text: 'Toggle',
-            listeners: {
-                change: data => console.log(data.checked) // Here, we're listening to the custom event
-            }
-        }]
-    }
-}
-Neo.applyClassConfig(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>

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

@@ -1 +0,0 @@
-### todo: Setup

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

@@ -1,80 +0,0 @@
-
-#hi
-
-
-Neo.mjs is a framework used to create browser-based applications.
-
-Some key features and benefits of Neo.mjs are:
-
-<div type="expander" caption="Multi-Threaded">
-<p>
-When a Neo.mjs application starts, the framework spawns three web-workers. 
-Web-workers are each run in their own thread. As a result, a typical Neo.mjs application
-has four threads:
-<ol>
-<li>The _main_ thread, where DOM updates are applied
-<li>An _application_ web-worker where normal application locic is run
-    <li>A _data_ web-worker were HTTP and socket calls are run
-<li>A _view_ web-worker that manages delta updates
-</ol>
-</div>
-
-<div type="expander" caption="Extreme Speed">
-<p>
-The Neo.mjs web-worker proccesses are automatically run in parallel, on separate CPU cores.
-</p>
-<p>
-By contrast, other JavaScript frameworks run in a single thread. That means 
-in a typical framework all business logic, data handling, and DOM rendering compete for 
-CPU reasources.
-</p>
-<p>
-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. 
-</p>
-<p>
-If the default four threads aren't enough, you're free to launch additional web-worker threads 
-to run other specialized logic. 
-</p>
-</div>
-
-<div type="expander" caption="Quick Application Development">
-<p>
-Neo.js classes let you specify properties in a way that allows code to detect "before" and "after"
-changes. This makes it easy to handle value validation and transformation, and react to changes. 
-</p>
-<p>
-Neo.mjs also 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 propery, a change to the 
-property will automatically be applied to both components.
-</p>
-</div>
-
-<div type="expander" caption="Multi-Window Applications">
-<p>
-Neo.mjs applications can also launch as _shared web workers_, which allows you to have a single 
-application run in multiple browser windows; those windows could be moved to multiple monitors.
-</p>
-<p>
-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. 
-</p>
-</div>
-
-<div type="expander" caption="Open-Source and Standards-Based">
-<p>
-Neo.mjs is an open-source library. Features needed for the community can be added to the
-library via pull-requests. And since Neo.mjs uses the standard JavaScript class system, 
-all Neo.mjs classes can be extended.
-</p>
-<p>
-Neo.mjs uses standard modular JavaScript, so developers don't need to learn non-standard language
-syntax, and there's no need for special pre-compilers or WebPack modules.
-That means fewer dependencies and easier configuration. Furthermore, the use of
-standard JavaScript makes debugging easier: any statement you write while developing your
-applcation can also be run in the debugging console.
-</p>
-</div>

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

@@ -1,38 +0,0 @@
-{"data": [
-    {"name": "Why Neo.mjs? ",                               "parentId": null,                "isLeaf": true,  "id": "2023-10-01T18-29-19-158Z"},
-    {"name": "Getting Started",                             "parentId": null,                "isLeaf": false, "id": "GettingStarted"},
-        {"name": "Setup",                                   "parentId": "GettingStarted",    "isLeaf": true,  "id": "Setup"},
-        {"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"},
-        {"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"},
-        {"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/src/data/field/Field.mjs

@@ -1,48 +0,0 @@
-import Base from '../../core/Base.mjs';
-
-/**
- * @class Neo.data.field.Field
- * @extends Neo.core.Base
- */
-class Field extends Base {
-    static config = {
-        /**
-         * @member {String} className='Neo.data.field.Field'
-         * @protected
-         */
-        className: 'Neo.data.field.Field',
-        /**
-         * @member {String} ntype='data-field'
-         * @protected
-         */
-        ntype: 'data-field',
-        /**
-         * @member {*|null} defaultValue=null
-         */
-        defaultValue: null,
-        /**
-         * @member {*|null} nullableValue=true
-         * @protected
-         */
-        nullableValue: true,
-        /**
-         * @member {*|null} value_=null
-         * @protected
-         */
-        value_: null
-    }
-
-    /**
-     * Triggered after the value config got changed
-     * @param {*|null} value
-     * @param {*|null} oldValue
-     * @protected
-     */
-    afterSetValue(value, oldValue) {
-        console.log('afterSetValue', value, oldValue);
-    }
-}
-
-Neo.applyClassConfig(Field);
-
-export default Field;

package/src/data/field/Float.mjs

@@ -1,42 +0,0 @@
-import Field from './Field.mjs';
-
-/**
- * @class Neo.data.field.Float
- * @extends Neo.data.field.Field
- */
-class FloatField extends Field {
-    static config = {
-        /**
-         * @member {String} className='Neo.data.field.Field'
-         * @protected
-         */
-        className: 'Neo.data.field.Float',
-        /**
-         * @member {String} ntype='data-field-float'
-         * @protected
-         */
-        ntype: 'data-field-float',
-        /**
-         * @member {Number|null} defaultValue=0
-         */
-        defaultValue: 0
-    }
-
-    /**
-     * Triggered before the value config gets changed.
-     * @param {Number|null} value
-     * @param {Number|null} oldValue
-     * @returns {Number}
-     * @protected
-     */
-    beforeSetValue(value, oldValue) {
-        let me           = this,
-            defaultValue = me.defaultValue ? me.defaultValue : me.nullableValue ? null : undefined;
-
-        return (value === null || value === undefined) ? defaultValue : parseFloat(value);
-    }
-}
-
-Neo.applyClassConfig(FloatField);
-
-export default FloatField;

package/src/data/field/Integer.mjs

@@ -1,42 +0,0 @@
-import Field from './Field.mjs';
-
-/**
- * @class Neo.data.field.Integer
- * @extends Neo.data.field.Field
- */
-class IntegerField extends Field {
-    static config = {
-        /**
-         * @member {String} className='Neo.data.field.Integer'
-         * @protected
-         */
-        className: 'Neo.data.field.Integer',
-        /**
-         * @member {String} ntype='data-field-integer'
-         * @protected
-         */
-        ntype: 'data-field-integer',
-        /**
-         * @member {Number|null} defaultValue=0
-         */
-        defaultValue: 0
-    }
-
-    /**
-     * Triggered before the value config gets changed.
-     * @param {Number|null} value
-     * @param {Number|null} oldValue
-     * @returns {Number}
-     * @protected
-     */
-    beforeSetValue(value, oldValue) {
-        let me           = this,
-            defaultValue = me.defaultValue ? me.defaultValue : me.nullableValue ? null : undefined;
-
-        return (value === null || value === undefined) ? defaultValue : parseInt(value, 10);
-    }
-}
-
-Neo.applyClassConfig(IntegerField);
-
-export default IntegerField;

package/src/data/field/String.mjs

@@ -1,42 +0,0 @@
-import Field from './Field.mjs';
-
-/**
- * @class Neo.data.field.String
- * @extends Neo.data.field.Field
- */
-class StringField extends Field {
-    static config = {
-        /**
-         * @member {String} className='Neo.data.field.String'
-         * @protected
-         */
-        className : 'Neo.data.field.String',
-        /**
-         * @member {String} ntype='data-field-string'
-         * @protected
-         */
-        ntype: 'data-field-string',
-        /**
-         * @member {String|null} defaultValue=''
-         */
-        defaultValue: ''
-    }
-
-    /**
-     * Triggered before the value config gets changed.
-     * @param {String|null} value
-     * @param {String|null} oldValue
-     * @returns {String}
-     * @protected
-     */
-    beforeSetValue(value, oldValue) {
-        let me           = this,
-            defaultValue = me.defaultValue ? me.defaultValue : me.nullableValue ? null : undefined;
-
-        return (value === null || value === undefined) ? defaultValue : String(value);
-    }
-}
-
-Neo.applyClassConfig(StringField);
-
-export default StringField;