neo.mjs 6.9.5 → 6.9.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.9.5",
+    "version": "6.9.7",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/data/learnneo/p/2023-10-01T18-29-19-158Z.md

@@ -0,0 +1,96 @@
+Neo.mjs is a framework used to create browser-based applications.
+
+Some key features and benefits of Neo.mjs are:
+
+<details>
+<summary>Multi-Threaded</summary>
+<p>
+When a Neo.mjs application starts, the framework spawns three web-workers, in addition
+to the main browser thread, resulting in:
+<ol>
+<li>The <b>main</b> browser thread, where DOM updates are applied
+<li>An <b>application</b> web-worker where normal application locic is run
+<li>A <b>data</b> web-worker were HTTP and socket calls are run
+<li>A <b>view</b> web-worker that manages delta updates
+</ol>
+</details>
+<details>
+<summary>Extreme Speed</summary>
+<p>
+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>
+</details>
+<details>
+<summary>Quick Application Development</summary>
+<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>
+<p>
+Debugging is also 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 &dash; these updates are immediately reflected in the running application.
+</p>
+</details>
+<details>
+<summary>Multi-Window Applications</summary>
+<p>
+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 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>
+</details>
+<details>
+<summary>Open-Source and Standards-Based</summary>
+<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>
+</details>
+<details>
+<summary>Scalable</summary>
+<p>
+Applications can become exponentially difficult to implement as application 
+complexity increases. In contrast, the effort to code applications in Neo.mjs 
+is fairly linear. This is because of the Neo.mjs approach to binding, separation
+of concerns, extensibility, and being standards based
+</p>
+<p>
+Neo.mjs isn't just architecturally scalable &mdash; because of its multi-threaded 
+nature, it's designed to handles rapid DOM updates, data traffic, and processor-
+intensive business logic.
+</p>
+</details>

package/resources/data/learnneo/p/2023-10-07T19-18-28-517Z.md

@@ -0,0 +1,102 @@
+Neo.mjs classes are standard JavaSript classes. Every source file
+you write will be a class definition, extending some Neo.mjs
+class.
+
+<pre class="neo">
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal'
+    }
+}
+
+const myMammal = Neo.create(Mammal);
+
+Neo.applyClassConfig(Mammal); // Where Neo.mjs initialializes the class config. 
+export default Mammal;        // Makes the class available elsewhere.
+</pre>
+
+In the example above, we're extending the Neo.mjs base class. The static
+config block describes the class we're defining. 
+
+All classes specify `className`; you'll add other config properties to describe the class.
+
+The `const myMammal = Neo.create(Mammal);` statement creates an instance of
+our class. For the sake of our discussion we're putting that statement in the same source
+file where the class is defined, but normally your code would import the class elsewhere, 
+and create instances as needed.
+
+Let's add a `name` propery to the class.
+
+<pre class="neo" style="color:gray">
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        <span style="color:#b91010">name: 'Anonymous'</span>
+    }
+}
+
+const myMammal = Neo.create(Mammal);
+console.log(<span style="color:#b91010">myMammal.name</span>);           // Logs "Anonymous"
+<span style="color:#b91010">myMammal.name</span> = 'Herbert';
+console.log(<span style="color:#b91010">myMammal.name</span>);           // Logs "Herbert"
+
+Neo.applyClassConfig(Mammal);
+
+export default Mammal;
+</pre>
+
+In Neo.mjs, instance properties are usually added in the `static config` block.
+The `static config` block does two things: 
+- It formally describes the properties API for your class.
+- It lets Neo.mjs manage the initialization and lifecycle of those properties.
+
+Think of the `static config` block as "these are the properties
+that can be set as instances are created." Config properties can be introduced 
+anywhere in the class hierarchy. 
+
+Since our class defines a `name` property, we can specify that when creating
+the instance, using the second argument to the `create` method. 
+
+<pre class="neo" style="color:gray">
+const myMammal = Neo.create(Mammal, <span style="color:#b91010">{
+    name: 'Creature'
+}</span>);
+console.log(myMammal.name);           // Logs "Creature"
+</pre>
+
+
+Since _you_ define those properties, you can
+look for them in class methods and use them as needed.
+Let's add a `speak()` method that uses the `name` property.
+
+<pre class="neo" style="color:gray">
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    <span style="color:#b91010">speak(){
+        console.log(`${this.name} is grunting`);
+    }</span>
+}
+
+const myMammal = Neo.create(Mammal, {
+    name: 'Creature'
+});
+<span style="color:#b91010">myMammal.speak();</span>        // Logs "Creature is grunting."
+
+Neo.applyClassConfig(Mammal);
+
+export default Mammal;
+</pre>
+
+
+

package/resources/data/learnneo/p/2023-10-08T20-20-07-934Z.md

@@ -0,0 +1,75 @@
+In Neo.mjs you sub-class and override methods in the usual way. 
+
+Here, we'll extend `Mammal` and override the `speak()` method. 
+(For brevity, we'll exclude `export` and `import` statements.)
+
+<pre class="neo">
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    speak(){
+        console.log(`(${this.name} is grunting)`);
+    }
+}
+Neo.applyClassConfig(Mammal);
+</pre>
+<pre class="neo">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+    }
+    speak(){
+        console.log(`Hello! My name is ${this.name}. I am ${this.married?'':'not'} married.`);
+    }
+}
+
+const myMammal = Neo.create(Human, {
+    name: 'Herbert'
+});
+myMammal.speak();        // Logs "Hello! My name is Herbert. I am not married."
+
+Neo.applyClassConfig(Mammal);
+</pre>
+
+Any class in the hierarchy is free to add new properties and methods. Let's add
+a property and behavior (method) to the Human class.
+
+<pre class="neo">
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    speak(){
+        console.log(`(${this.name} is grunting)`);
+    }
+}
+</pre>
+<pre class="neo">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+        name: 'J. Doe',
+        married: false
+    }
+    speak(){
+        console.log(`Hello! My name is ${this.name}. I am ${this.married?'':'not'} married.`);
+    },
+    yodel(){
+        console.log('Yodelay hee hoo!');
+    }}
+
+const myPerson = Neo.create(Human, {
+    name: 'Herbert'
+});
+myPerson.speak();        // Logs "Hello! My name is Herbert. I am not married."
+myPerson.yodel();        // Logs "Yedelay hee hoo!"
+
+Neo.applyClassConfig(Human);
+</pre>

package/resources/data/learnneo/p/2023-10-08T20-20-37-336Z.md

@@ -0,0 +1,29 @@
+Neo.mjs uses standard modular JavaScript, so you're free to use other class 
+features, like private members.
+<pre class="neo">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+        name: 'J. Doe',
+        married: false,
+    }
+    static #privateStaticField = 'foo'
+    #privateInstanceField = 'bar'
+    #privateInstanceMethod(){
+        console.log(`Psst. Don't tell anyone, but ${this.#privateInstanceField} and ${Human.#privateStaticField}`);
+    }
+    speak(tellSecret){
+        console.log(`Hello! My name is ${this.name}. I am ${this.married?'':'not'} married.`);
+        if (tellSecret) this.#privateInstanceMethod();
+    }
+    yodel(){
+        console.log('Yodelay hee hoo!');
+    }}
+
+const myPerson = Neo.create(Human, {
+    name: 'Herbert'
+});
+myPerson.speak(true);
+
+Neo.applyClassConfig(Human);
+</pre>

package/resources/data/learnneo/p/2023-10-08T21-58-25-809Z.md

@@ -0,0 +1,68 @@
+To call a super-class method use the `super` keyword.
+
+<pre class="neo" style="color:gray">
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    doSomething(){
+        console.log(`${this.name} is doing something mammals do`)
+    }
+}
+Neo.applyClassConfig(Mammal);
+</pre>
+<pre class="neo" style="color:gray">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+    }
+    doSomething(){
+        <span style="color:#b91010">super.doSomething();</span>
+        console.log(`${this.name} is doing something humans do`)
+    }
+}
+
+const myPerson = Neo.create(Human, {
+    name: 'Herbert'
+});
+myPerson.doSomething();
+
+Neo.applyClassConfig(Mammal);
+</pre>
+
+Sometimes you aren't sure if a super class has a method. In that case use the
+conditional chaining operator &mdash; `?.`
+
+<pre class="neo" style="color:gray">
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    doSomething(){
+        console.log(`${this.name} is doing something mammals do`)
+    }
+}
+Neo.applyClassConfig(Mammal);
+</pre>
+<pre class="neo" style="color:gray">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+    }
+    doSomething(){
+        <span style="color:#b91010">super?.doSomething();</span>
+        console.log(`${this.name} is doing something humans do`)
+    }
+}
+
+const myPerson = Neo.create(Human, {
+    name: 'Herbert'
+});
+myPerson.doSomething();
+
+Neo.applyClassConfig(Mammal);
+</pre>

package/resources/data/learnneo/p/2023-10-14T19-25-08-153Z.md

@@ -0,0 +1,121 @@
+The purpose of this tutorial is to let you see the structure of a Neo.mjs workspace,
+and the strucure of an application.
+
+If you haven't already done it, run `npx neo-app` to create a Neo.mjs workspace.
+
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/learnneo/NeoWorkspace.png" style="height: 400px;">
+
+As you can see, a Neo.mjs workspace is a conventional npm workspace. If you run 
+the script `npm run server-start` from the workspace, Neo.mjs launches a web
+serve whose doc root is the workspace. 
+
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/learnneo/ServerRoot.png" style="height: 400px;">
+
+If you drill down into the `src` directory you'll see your applications.
+If you drill down into the `docs` directory you'll see the Neo.mjs API docs.
+
+In order to discuss the structure of an app, we'll create a simple starter 
+app. To do that, run this command from the workspace.
+
+`npm run create-app-empty`
+
+At the first prompt, name the app `Foo`, and accept the default for everything else.
+The script creates an application structured as follows.
+
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/learnneo/FooFolder.png" style="height: 400px;">
+
+These files are part of the typical structure of a Neo.mjs application. The files `index.html`, `app.mjs`, `neo-config.json`, `view/Viewport.mjs` are rarely modified.
+You will, however, edit the main container, and its associated "controller" and "model",
+as well as create new views, new controllers, etc. 
+
+Now let's look at a source file. This is the contents of `MainView.mjs`.
+
+<pre class="neo">
+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: 'Foo.view.MainView',
+        
+        controller: {module: Controller},
+        model: {module: ViewModel},
+
+        layout: {ntype: 'fit'},
+        items: [],
+    }
+}
+
+Neo.applyClassConfig(MainView);
+
+export default MainView;
+</pre>
+
+Neo.mjs views are composed of components. A component can be a "container", which means it
+visually holds or groups other components, or a regular component, like a button. The main
+view is a container, which you can see because `MainView extends Base`, and `Base` is 
+the container base class. The items in a container are configured in the `items:[]`, which
+is empty in this starter code.
+
+This view also has a "controller" and "model". We'll talk about those later, but in a nutshell,
+a controller is where event handling and app logic goes, and a model is where you set up shared
+bindable data.
+
+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. 
+
+First, we need to import the class that defines buttons. Then we'll describe the new button in the
+`items:[].`
+
+<pre class="neo">
+
+import Base        from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Controller  from './MainViewController.mjs';
+import ViewModel   from './MainViewModel.mjs';
+import Button      from '../../../node_modules/neo.mjs/src/button/Base.mjs';
+
+class MainView extends Base {
+    static config = {
+        className: 'Foo.view.MainView',
+        
+        controller: {module: Controller},
+        model: {module: ViewModel},
+
+        layout: {ntype: 'fit'},
+        items: [{
+            module: Button,
+            text: 'Button'
+        }],
+    }
+}
+
+Neo.applyClassConfig(MainView);
+
+export default MainView;
+</pre>
+
+Note the entry in +items:[]+. That's a description of the button that'll be created as the single
+item in our container. In Neo.mjs terms we're _configuring_ the button. Neo.mjs is _declarative_,
+which components and objects are _described_. It's an abstraction. In other words we're saying 
+what we want, but not how it's done. We want a button with some text &mdash; how that's done
+isn't important here in the container. A non-declarative approach would be more focused on _how_,
+where you might way "I want a &lt;button> HTML element with its innerHTML set to some value." 
+
+In another topic you'll learn about the Neo.mjs config system and declaratively describing
+views, controllers, and other things.
+
+If you run the +foo+ app you'll see one huge button. That's because the container is configured to 
+use the "fit" layout, which means the container is designed to hold one and only one component,
+and that component will take up all available space. We could get a more normal looking button
+by changing the layout.
+
+`layout: {type:'vbox', align:'start},`
+
+Change that line and look at the running application. 
+
+Neo.mjs has scores of component classes.
+You can extend them to create your own reusable components and sets of components.
+
+Other topics discuss coding applications, how the config system works, controllers,
+and bindable data. However, as long as we're here

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

@@ -1,3 +1,7 @@
+
+#hi
+
+
 Neo.mjs is a framework used to create browser-based applications.
 
 Some key features and benefits of Neo.mjs are:

package/resources/data/learnneo/t.json

@@ -0,0 +1,130 @@
+{
+    "data": [
+        {
+            "id": "2023-10-01T18-29-19-158Z",
+            "parentId": null,
+            "isLeaf": true,
+            "name": "Why Neo.mjs?"
+        },
+        {
+            "id": "2023-09-26T17-26-15-104Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Getting Started"
+        },
+        {
+            "id": "2023-10-12T12-59-22-082Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Source Files"
+        },
+        {
+            "id": "2023-10-14T19-25-08-153Z",
+            "parentId": "2023-10-12T12-59-22-082Z",
+            "isLeaf": true,
+            "name": "Neo.mjs workspaces"
+        },
+        {
+            "id": "2023-10-08T18-26-31-357Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Class Definitions and Config"
+        },
+        {
+            "id": "2023-10-08T20-39-23-708Z",
+            "parentId": "2023-10-08T18-26-31-357Z",
+            "isLeaf": false,
+            "name": "Class Basics"
+        },
+        {
+            "id": "2023-10-07T19-18-28-517Z",
+            "parentId": "2023-10-08T20-39-23-708Z",
+            "isLeaf": true,
+            "name": "Classes, Properties, and Methods"
+        },
+        {
+            "id": "2023-10-08T20-20-07-934Z",
+            "parentId": "2023-10-08T20-39-23-708Z",
+            "isLeaf": true,
+            "name": "Overriding Methods"
+        },
+        {
+            "id": "2023-10-08T20-20-37-336Z",
+            "parentId": "2023-10-08T20-39-23-708Z",
+            "isLeaf": true,
+            "name": "Other JavaScript Class Features"
+        },
+        {
+            "id": "2023-10-08T21-58-25-809Z",
+            "parentId": "2023-10-08T20-39-23-708Z",
+            "isLeaf": true,
+            "name": "Super"
+        },
+        {
+            "id": "2023-10-08T20-37-30-658Z",
+            "parentId": "2023-10-08T18-26-31-357Z",
+            "isLeaf": true,
+            "name": "The Constructor"
+        },
+        {
+            "id": "2023-10-08T22-22-11-013Z",
+            "parentId": "2023-10-08T18-26-31-357Z",
+            "isLeaf": true,
+            "name": "super"
+        },
+        {
+            "id": "2023-09-25T20-27-55-600Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Config"
+        },
+        {
+            "id": "2023-09-25T20-27-38-129Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Component Basics"
+        },
+        {
+            "id": "2023-09-25T20-28-12-355Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "User Input (Forms)"
+        },
+        {
+            "id": "2023-09-25T20-28-33-035Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Data"
+        },
+        {
+            "id": "2023-09-25T20-28-51-807Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Component Models and Binding"
+        },
+        {
+            "id": "2023-09-25T20-29-19-770Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Multi-Window"
+        },
+        {
+            "id": "2023-09-25T20-29-28-307Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Main Thread Add-onss"
+        },
+        {
+            "id": "2023-09-26T17-31-48-754Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Custom Components and vdom"
+        },
+        {
+            "id": "2023-10-16T19-38-29-590Z",
+            "parentId": null,
+            "isLeaf": false,
+            "name": "Mixins"
+        }
+    ]
+}