npm - neo.mjs - Versions diffs - 6.12.1 → 6.14.0 - Mend

neo.mjs 6.12.1 → 6.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (948) hide show

package/examples/worker/task/MainContainer.mjs ADDED Viewed

@@ -0,0 +1,48 @@
+import Button   from '../../../src/button/Base.mjs';
+import Viewport from '../../../src/container/Viewport.mjs';
+/**
+ * @class Neo.examples.worker.task.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.worker.task.MainContainer'
+         * @protected
+         */
+        className: 'Neo.examples.worker.task.MainContainer',
+        /**
+         * @member {Object} layout={ntype:'vbox'}
+         */
+        layout: {ntype: 'vbox'},
+        /**
+         * @member {Array} items
+         */
+        items: [{
+            module: Button,
+            text  : 'Execute in Task Worker',
+            handler: async data => {
+                console.log('Button click');
+                delete data.component; // we can not pass neo instances to other workers
+                const response = await Neo.examples.worker.task.MyTasks.compute(data);
+                console.log({
+                    response,
+                    workerId: Neo.workerId
+                })
+            }
+        }],
+        /**
+         * @member {Object} style={padding:'5em'}
+         */
+        style: {padding: '5em'}
+    }
+}
+Neo.setupClass(MainContainer);
+export default MainContainer;

package/examples/worker/task/MyTasks.mjs ADDED Viewed

@@ -0,0 +1,48 @@
+import Base from '../../../src/core/Base.mjs';
+/**
+ * @class Neo.examples.worker.task.MyTasks
+ * @extends Neo.core.Base
+ * @singleton
+ */
+class MyTasks extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.worker.task.MyTasks'
+         * @protected
+         */
+        className: 'Neo.examples.worker.task.MyTasks',
+        /**
+         * Remote method access for other workers
+         * @member {Object} remote
+         * @protected
+         */
+        remote: {
+            app: [
+                'compute'
+            ]
+        },
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }
+    /**
+     * @param {Object} data
+     * @returns {Object}
+     */
+    compute(data) {
+        console.log('compute', {
+            data,
+            workerId: Neo.workerId
+        });
+        return {success: true}
+    }
+}
+let instance = Neo.setupClass(MyTasks);
+export default instance;

package/examples/worker/task/app.mjs ADDED Viewed

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.worker.task'
+});

package/examples/worker/task/index.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo TaskWorker</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/worker/task/neo-config.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+    "appPath"      : "examples/worker/task/app.mjs",
+    "basePath"     : "../../../",
+    "environment"  : "development",
+    "mainPath"     : "./Main.mjs",
+    "useTaskWorker": true
+}

package/examples/worker/task/task.mjs ADDED Viewed

@@ -0,0 +1,5 @@
+import MyTasks from './MyTasks.mjs';
+export const onStart = () => {
+    console.log('task.mjs imported');
+};

package/package.json CHANGED Viewed

@@ -1,6 +1,7 @@
 {
     "name": "neo.mjs",
-    "version": "6.12.1",
+    "version": "6.14.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -44,25 +45,26 @@
     "homepage": "https://neomjs.github.io/pages/",
     "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.5.1",
-        "autoprefixer": "^10.4.17",
+        "autoprefixer": "^10.4.18",
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^12.0.0",
-        "cssnano": "^6.0.3",
+        "cssnano": "^6.1.0",
         "envinfo": "^7.11.1",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.14",
+        "inquirer": "^9.2.16",
+        "marked": "^12.0.1",
+        "monaco-editor": "^0.47.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.35",
-        "sass": "^1.70.0",
+        "sass": "^1.72.0",
         "siesta-lite": "5.5.2",
-        "showdown": "^2.1.0",
         "url": "^0.11.3",
-        "webpack": "^5.90.1",
+        "webpack": "^5.90.3",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "5.0.1",
+        "webpack-dev-server": "^4.15.1",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/resources/data/deck/learnneo/{p → pages}/2023-10-07T19-18-28-517Z.md RENAMED Viewed

@@ -13,7 +13,7 @@ class Mammal extends Base {
 const myMammal = Neo.create(Mammal);
-Neo.applyClassConfig(Mammal); // Where Neo.mjs initializes the class config.
+Neo.setupClass(Mammal); // Where Neo.mjs initializes the class config.
 export default Mammal;        // Makes the class available elsewhere.
 </pre>
@@ -44,7 +44,7 @@ console.log(myMammal.name);           // Logs "Anonymous"
 myMammal.name = 'Herbert';
 console.log(myMammal.name);           // Logs "Herbert"
-Neo.applyClassConfig(Mammal);
+Neo.setupClass(Mammal);
 export default Mammal;
 </pre>
@@ -93,7 +93,7 @@ const myMammal = Neo.create(Mammal, {
 myMammal.speak(); // Logs "Creature is grunting."
-Neo.applyClassConfig(Mammal);
+Neo.setupClass(Mammal);
 export default Mammal;
 </pre>

package/resources/data/deck/learnneo/{p → pages}/2023-10-08T20-20-07-934Z.md RENAMED Viewed

@@ -14,7 +14,7 @@ class Mammal extends Base {
         console.log(`(${this.name} is grunting)`);
     }
 }
-Neo.applyClassConfig(Mammal);
+Neo.setupClass(Mammal);
 </pre>
 <pre data-javascript>
@@ -32,7 +32,7 @@ const myMammal = Neo.create(Human, {
 });
 myMammal.speak();        // Logs "Hello! My name is Herbert. I am not married."
-Neo.applyClassConfig(Mammal);
+Neo.setupClass(Mammal);
 </pre>
 Any class in the hierarchy is free to add new properties and methods. Let's add
@@ -73,5 +73,5 @@ const myPerson = Neo.create(Human, {
 myPerson.speak();        // Logs "Hello! My name is Herbert. I am not married."
 myPerson.yodel();        // Logs "Yodelay hee hoo!"
-Neo.applyClassConfig(Human);
+Neo.setupClass(Human);
 </pre>

package/resources/data/deck/learnneo/{p → pages}/2023-10-08T20-20-37-336Z.md RENAMED Viewed

@@ -26,7 +26,7 @@ class Human extends Mammal {
     }
 }
-Neo.applyClassConfig(Human);
+Neo.setupClass(Human);
 const myPerson = Neo.create(Human, {
     name: 'Herbert'

package/resources/data/deck/learnneo/{p → pages}/2023-10-08T21-58-25-809Z.md RENAMED Viewed

@@ -11,7 +11,7 @@ class Mammal extends Base {
         console.log(`${this.name} is doing something mammals do`)
     }
 }
-Neo.applyClassConfig(Mammal);
+Neo.setupClass(Mammal);
 </pre>
 <pre class="neo" style="color:gray">
 class Human extends Mammal {
@@ -29,7 +29,7 @@ const myPerson = Neo.create(Human, {
 });
 myPerson.doSomething();
-Neo.applyClassConfig(Mammal);
+Neo.setupClass(Mammal);
 </pre>
 Sometimes you aren't sure if a super class has a method. In that case use the
@@ -46,7 +46,7 @@ class Mammal extends Base {
         console.log(`${this.name} is doing something mammals do`)
     }
 }
-Neo.applyClassConfig(Mammal);
+Neo.setupClass(Mammal);
 </pre>
 <pre class="neo" style="color:gray">
 class Human extends Mammal {
@@ -64,5 +64,5 @@ const myPerson = Neo.create(Human, {
 });
 myPerson.doSomething();
-Neo.applyClassConfig(Mammal);
-</pre>
+Neo.setupClass(Mammal);
+</pre>

package/resources/data/deck/learnneo/{p → pages}/2023-10-14T19-25-08-153Z.md RENAMED Viewed

@@ -1,11 +1,18 @@
+## Introduction
 The purpose of this tutorial is to let you see the structure of a Neo.mjs workspace,
 and the structure of an application.
-If you wish, you can create a workspace for yourself by running `npx neo-app` workspace.
+If you wish, you can create a workspace by following the directions in the previous topic, _Setup_.
 <img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/learnneo/NeoWorkspace.png" style="height: 400px;">
-As you can see, a Neo.mjs workspace is a conventional npm package. If you run
+As you can see, a Neo.mjs workspace is a conventional npm package.
+## Browsing the workspace
+If you run
 the script `npm run server-start` from the workspace, Neo.mjs launches a web
 server whose doc root is the workspace.
@@ -14,6 +21,8 @@ server whose doc root is the workspace.
 If you drill down into the `src` directory you'll see your applications.
 The `docs` directory holds the Neo.mjs API docs.
+## The structure of a simple app
 In order to discuss the structure of an app, we'll create a simple starter
 app vis this script, run from the workspace. The script prompts for various
 application settings.
@@ -29,6 +38,8 @@ These files are part of the typical structure of a Neo.mjs application. The file
 You will, however, edit the main container, and its associated "controller" and "model",
 as well as create new views classes, their controllers, and other application logic.
+## Some source code
 Now let's look at a source file. This is the contents of `MainView.mjs`.
 <pre data-javascript>
@@ -46,7 +57,7 @@ class MainView extends Container {
     }
 }
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 export default MainView;
 </pre>
@@ -61,6 +72,8 @@ This view also has a "controller" and "model". We'll talk about those later, but
 a controller is where event handling and app logic goes, and a model is where you set up shared
 bindable data.
+## Adding a button to the view
 We'll go into a lot more depth about view, controllers, and models in other topics, but to let
 you see how a component is configured let's put a button in the container.
@@ -78,15 +91,15 @@ class MainView extends Container {
         className : 'Foo.view.MainView',
         controller: Controller,
         model     : ViewModel,
-        layout: {ntype:'vbox', align:'start'},
-        items : [{
+        layout    : {ntype:'vbox', align:'start'},
+        items     : [{
             module: Button,
             text  : 'Button'
         }]
     }
 }
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 export default MainView;
 </pre>
@@ -103,24 +116,27 @@ some value."
 In another topic you'll learn about the Neo.mjs config system and declaratively describing views,
 controllers, and other things.
+## A running example
 Here's a simplified running example. The `model` and `controller` are omitted, because they aren't
 actually used in the example, and the import root path is different to reflect the location of the
-Neo.mjs libarary relative to the examples.
+Neo.mjs library relative to the examples.
 <pre data-neo>
-import Base from '../../../../src/container/Base.mjs';
-import Button from '../../../../src/button/Base.mjs';
-import Split from '../../../../src/button/Split.mjs';
-class MainView extends Base {
+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 : [{
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        items    : [{
             module: Button,
             text  : 'Button'
         }]
     }
 }
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 </pre>

package/resources/data/deck/learnneo/{p → pages}/2023-10-31T13-59-37-550Z.md RENAMED Viewed

@@ -9,7 +9,7 @@ class Mammal extends Base {
 const myMammal = Neo.create(Mammal);
-Neo.applyClassConfig(Mammal); // Where Neo.mjs initializes the class config.
+Neo.setupClass(Mammal); // Where Neo.mjs initializes the class config.
 export default Mammal;        // Makes the class available elsewhere.
 </pre>
@@ -26,6 +26,6 @@ class Mammal extends Base {
 const myMammal = Neo.create(Mammal);
-Neo.applyClassConfig(Mammal); // Where Neo.mjs initializes the class config.
+Neo.setupClass(Mammal); // Where Neo.mjs initializes the class config.
 export default Mammal;        // Makes the class available elsewhere.
 </pre>

package/resources/data/deck/learnneo/{p → pages}/ComponentModels.md RENAMED Viewed

@@ -4,13 +4,13 @@ A _view model_ &mdash; `Neo.model.Component` &mdash; instance holds properties t
 can be bound to component properties.
 <pre data-neo>
-import Base            from  '../../../../src/container/Base.mjs';
-import Label           from  '../../../../src/component/Label.mjs';
-import TextField       from  '../../../../src/form/field/Text.mjs';
+import Container from  '../../../../src/container/Base.mjs';
+import Label     from  '../../../../src/component/Label.mjs';
+import TextField from  '../../../../src/form/field/Text.mjs';
-class MainView extends Base {
+class MainView extends Container {
     static config = {
-        className : 'Example.view.MainView',
+        className: 'Example.view.MainView',
         model: {
             data: {
@@ -29,12 +29,12 @@ class MainView extends Base {
                 value: {twoWay: true, value: data => data.foo}      // "twoWay" means data.foo is set as the text field changes
             },
             labelText: 'Bound to foo:',
-            width: 300,
+            width: 300
         }],
-        style: {padding: '1em'},
+        style: {padding: '1em'}
     }
 }
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 </pre>
 View model properties are visible down the containment hierarchy:
@@ -46,7 +46,7 @@ within the view and its children. The child items &mdash; a label and a text fie
 _foo_. As _foo_ changes, the properties are automatically updated. The example also shows that a binding can be
 `twoWay`, which means a change to the property in the view is _pushed_ to the view model.
-<img width="50%" src="https://s3.amazonaws.com/mjs.neo.learning.images/gettingStarted/vm/VisualHierarchy.png"></img>
+<img width="75%" src="https://s3.amazonaws.com/mjs.neo.learning.images/gettingStarted/vm/VisualHierarchy.png"></img>
 (Note that in the example above, the main view's view model is defined in-line. Normally your view model
 would be  coded in its own class that extends 'Neo.model.Component', and you'd use that in your component.
@@ -56,15 +56,15 @@ usually coded as separate classes.)
 Below is another example.
 <pre data-neo>
-import Base            from  '../../../../src/container/Base.mjs';
-import Panel           from  '../../../../src/container/Panel.mjs';
-import Label           from  '../../../../src/component/Label.mjs';
+import Container from  '../../../../src/container/Base.mjs';
+import Label     from  '../../../../src/component/Label.mjs';
+import Panel     from  '../../../../src/container/Panel.mjs';
 class MyPanel extends Panel {
     static config = {
-        className : 'Example.view.MyPanel',
+        className: 'Example.view.MyPanel',
         headers: [{
-            dock: 'top',
+            dock : 'top',
             items: [{ module: Label, text: 'MyPanel' }]
         }],
         items: [{
@@ -74,14 +74,14 @@ class MyPanel extends Panel {
             },
             style: {margin: '1em'}
         }],
-        style: {margin: '1em'},
+        style: {margin: '1em'}
     }
 }
-Neo.applyClassConfig(MyPanel);
+Neo.setupClass(MyPanel);
-class MainView extends Base {
+class MainView extends Container {
     static config = {
-        className : 'Example.view.MainView',
+        className: 'Example.view.MainView',
         model: {
             data: {
@@ -90,9 +90,9 @@ class MainView extends Base {
         },
         layout: 'hbox',
         items: [{
-            module: MyPanel,
+            module: MyPanel
         }, {
-            module: MyPanel,
+            module: MyPanel
         }, {
             module: MyPanel,
             // You wouldn't normally configure a view model. We're doing it here to illustrate view model scope.
@@ -102,16 +102,16 @@ class MainView extends Base {
                 }
             }
         }],
-        style: {margin: '1em'},
+        style: {margin: '1em'}
     }
 }
-Neo.applyClassConfig(MainView);
+Neo.setupClass(MainView);
 </pre>
 In this case, the main view has three child items of type `MyPanel`, each containing a label.
 The main view has a view model with a `foo` property, and the third child has its own view model with a `foo` property.
-<img width="60%" src="https://s3.amazonaws.com/mjs.neo.learning.images/gettingStarted/vm/VisualHierarchyFooShadowed.png"></img>
+<img width="75%" src="https://s3.amazonaws.com/mjs.neo.learning.images/gettingStarted/vm/VisualHierarchyFooShadowed.png"></img>
 `MyPanel` contains a `Neo.componnet.Label` whose `text` value is bound to `foo`. To resolve the binding,
 Neo.mjs looks up the containment hierarchy until it finds the value. For the first two panels the label