neo.mjs 6.12.1 → 6.14.0

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

@@ -0,0 +1,241 @@
+## HTML Style
+
+In case you did not work with neo yet, but come from a more HTML driven ecosystem,
+you could achieve the task in a similar way.
+
+<pre data-neo>
+import Component from '../../../../src/component/Base.mjs';
+import NeoArray  from '../../../../src/util/Array.mjs';
+import VdomUtil  from '../../../../src/util/VDom.mjs';
+
+class MainComponent extends Component {
+    static config = {
+        className: 'Neo.examples.todoList.version1.MainComponent',
+        autoMount: true,
+        height   : 200,
+        margin   : 10,
+        maxWidth : 300,
+        style    : {border: '1px solid #000', margin: '20px', overflow: 'scroll'},
+        width    : 300,
+
+        items: [
+            {id: 1, done: true,  text: 'Todo Item 1'},
+            {id: 2, done: false, text: 'Todo Item 2'},
+            {id: 3, done: false, text: 'Todo Item 3'}
+        ],
+
+        inputValue: null,
+
+        vdom:
+        {cn: [
+            {tag: 'ol', cn: []},
+            {cn: [
+                {tag: 'input', cls: ['todo-input'], required: true, style: {marginLeft: '20px'}},
+                {tag: 'button', cls: ['todo-add-button'], html : 'Add Item', style: {marginLeft: '1em'}}
+            ]}
+        ]}
+    }
+
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners([
+            {click: me.onAddButtonClick,   delegate: 'todo-add-button'},
+            {click: me.onCheckIconClick,   delegate: 'todo-item'},
+            {input: me.onInputFieldChange, delegate: 'todo-input'}
+        ]);
+
+        me.createItems(me.items || [])
+    }
+
+    createItems(items) {
+        let me = this,
+            cls;
+
+        items.forEach(item => {
+            cls = ['todo-item'];
+
+            if (item.done) {
+                cls.push('fa', 'fa-check')
+            } else {
+                cls.push('far', 'fa-square')
+            }
+
+            me.vdom.cn[0].cn.push({
+                tag: 'li',
+                cn : [
+                    {tag: 'span', cls, style: {cursor: 'pointer', width: '20px'}},
+                    {vtype: 'text', html: item.text}
+                ]
+            });
+        });
+
+        me.update()
+    }
+
+    onAddButtonClick() {
+        let me = this;
+
+        if (me.inputValue) {
+            me.createItems([{
+                id  : null,
+                done: false,
+                text: me.inputValue
+            }])
+        }
+    }
+
+    onCheckIconClick(data) {
+        let me     = this,
+            cls    = ['far', 'fa-square'],
+            oldCls = ['fa',  'fa-check'],
+            node   = VdomUtil.findVdomChild(me.vdom, data.path[0].id).vdom;
+
+        if (data.path[0].cls.includes('fa-square')) {
+            cls    = ['fa',  'fa-check'];
+            oldCls = ['far', 'fa-square']
+        }
+
+        NeoArray.remove(node.cls, oldCls);
+        NeoArray.add(node.cls, cls);
+
+        me.update()
+    }
+
+    onInputFieldChange(data) {
+        this.inputValue = data.value
+    }
+}
+
+Neo.setupClass(MainComponent);
+</pre>
+
+## Neo Style
+
+content
+
+<pre data-neo>
+import Container from '../../../../src/container/Base.mjs';
+import List      from '../../../../src/list/Base.mjs';
+import Model     from '../../../../src/data/Model.mjs';
+import Store     from '../../../../src/data/Store.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+import Toolbar   from '../../../../src/toolbar/Base.mjs';
+
+class TodoListModel extends Model {
+    static config = {
+        className  : 'Neo.examples.todoList.version2.MainModel',
+        keyProperty: 'id',
+
+        fields: [{
+            name: 'id',
+            type: 'Int'
+        }, {
+            name: 'done',
+            type: 'Boolean'
+        }, {
+            name: 'text',
+            type: 'String'
+        }]
+    }
+}
+
+Neo.setupClass(TodoListModel);
+
+
+class TodoListStore extends Store {
+    static config = {
+        className  : 'Neo.examples.todoList.version2.TodoListStore',
+        keyProperty: 'id',
+        model      : TodoListModel,
+
+        data: [
+            {id: 1, done: true,  text: 'Todo Item 1'},
+            {id: 2, done: false, text: 'Todo Item 2'},
+            {id: 3, done: false, text: 'Todo Item 3'}
+        ],
+
+        sorters: [{
+            property : 'done',
+            direction: 'DESC'
+        }, {
+            property : 'id',
+            direction: 'ASC'
+        }]
+    }
+}
+
+Neo.setupClass(TodoListStore);
+
+
+class MainContainer extends Container {
+    static config = {
+        className: 'Neo.examples.todoList.version2.MainContainer',
+        style    : {padding: '20px'},
+
+        // custom configs
+        idCounter: 3,
+        store    : null
+    }
+
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.store = Neo.create({
+            module: TodoListStore
+        });
+
+        me.items = [{
+            module       : List,
+            displayField : 'text',
+            flex         : 1,
+            store        : me.store,
+            style        : {padding: '5px'},
+            useCheckBoxes: true
+        }, {
+            module: Toolbar,
+            flex  : 'none',
+            dock  : 'bottom',
+            items : [{
+                module       : TextField,
+                flex         : 1,
+                labelPosition: 'inline',
+                labelText    : 'Item Text',
+                reference    : 'addItemField'
+            }, '->', {
+                handler     : me.onAddButtonClick,
+                handlerScope: me,
+                scope       : me,
+                style       : {height: '27px', marginLeft: '1em'},
+                text        : 'Add Item'
+            }]
+        }];
+    }
+
+    onAddButtonClick() {
+        let me    = this,
+            field = me.down({reference: 'addItemField'}),
+            data;
+
+        if (field.value) {
+            me.idCounter++;
+
+            data = me.store.data;
+
+            data.push({
+                id  : me.idCounter,
+                done: false,
+                text: field.value
+            });
+
+            me.store.data = data
+        }
+    }
+}
+
+Neo.setupClass(MainContainer);
+</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,16 @@
+Neo.mjs applications can be written quickly thanks to its syntax, features, and debugging convenience.
+
+## Property lifecycle hooks
+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.
+
+## Elegant state management
+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.
+
+## Simple and powerful debugging
+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 — these updates are immediately reflected in the running application.
+

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,46 @@
-{
-    "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": "Todo List",                               "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "TodoList"},
+    {"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": "Components and Containers",               "parentId": "InDepth",           "isLeaf": true,  "id": "ComponentsAndContainers"},
+        {"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>
 

package/resources/data/deck/training/{p → pages}/2023-01-04T01-52-23-454Z.md

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

package/resources/data/deck/training/{p → pages}/2023-01-06T23-21-12-009Z.md

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

package/resources/data/deck/training/{p → pages}/2023-01-06T23-34-13-897Z.md

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

package/resources/data/deck/training/{p → pages}/2023-01-08T00-45-11-144Z.md

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

package/resources/data/deck/training/{p → pages}/2023-01-08T01-24-21-088Z.md

@@ -39,7 +39,7 @@ class MainContainerController extends ComponentController {
     }
 }
 
-Neo.applyClassConfig(MainContainerController);
+Neo.setupClass(MainContainerController);
 
 export default MainContainerController;
 </pre>

package/resources/data/deck/training/{p → pages}/2023-01-08T01-46-50-723Z.md

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

package/resources/data/deck/training/{p → pages}/2023-01-12T01-50-54-617Z.md

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

package/resources/data/deck/training/{p → pages}/2023-01-14T00-40-27-784Z.md

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

package/resources/data/deck/training/{p → pages}/2023-01-15T18-51-52-134Z.md

@@ -53,7 +53,7 @@ class Filter extends Base {
     }
 }
 
-Neo.applyClassConfig(Filter);
+Neo.setupClass(Filter);
 
 export default Filter;
 </pre>
@@ -80,4 +80,4 @@ Test your code by setting and getting `category` on the command line.
 
     Neo.findFirst({ntype:'yelp-filter'}).category
 
-You should see the value updating and the value being logged.
+You should see the value updating and the value being logged.