neo.mjs 6.9.6 → 6.9.7

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.9.6'
+         * @member {String} version='6.9.7'
          */
-        version: '6.9.6'
+        version: '6.9.7'
     }
 
     /**

package/apps/learnneo/neo-config.json

@@ -2,5 +2,6 @@
     "appPath": "apps/learnneo/app.mjs",
     "basePath": "../../",
     "environment": "development",
+    "mainThreadAddons": ["DragDrop", "Stylesheet", "Markdown"],
     "mainPath": "./Main.mjs"
 }

package/apps/learnneo/store/Content.mjs

@@ -1,5 +1,5 @@
 import ContentModel from '../model/Content.mjs';
-import Store        from '../../../src/data/Store.mjs';
+import Store from '../../../src/data/Store.mjs';
 
 /**
  * @class LearnNeo.store.Content
@@ -15,7 +15,57 @@ class Content extends Store {
         /**
          * @member {Neo.data.Model} model=ContentModel
          */
-        model: ContentModel
+        model: ContentModel,
+        // autoLoad: true
+
+
+    }
+
+    xonConstructed() {
+        super.onConstructed();
+
+        let me = this;
+
+        // Neo.Main.getByPath({path: 'location.search'})
+        //     .then(data => {
+        //         const searchString = data?.substr(1) || '';
+        //         const search = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
+        //         this.deck = search.deck || 'learnneo';
+        //         this.url = `${this.contentPath}/tree.json`;
+        //         this.load();
+        //         // this.doLoadStore();
+        //         console.log(search);
+        //     });
+
+    }
+    xload() {
+        this.model = ContentModel;
+        Neo.Main.getByPath({path: 'location.search'})
+            .then(data => {
+                const searchString = data?.substr(1) || '';
+                const search = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
+                this.deck = search.deck || 'learnneo';
+                this.url = `${this.contentPath}/tree.json`;
+                // this.load();
+                super.load();
+                console.log(search);
+            });
+    }
+
+    get contentPath() {
+        return `../../../resources/data/${this.deck}`;
+    }
+    doLoadStore() {
+        debugger;
+        const me = this;
+        Neo.Xhr.promiseJson({
+            url: `${this.contentPath}/tree.json`
+        }).then(data => {
+            // TODO: Tree lists should do this themselves when their store is loaded.
+            me.data = data.json.data;
+            // me.createItems(null, me.getListItemsRoot(), 0);
+            // me.update();
+        })
     }
 }
 

package/apps/learnneo/view/home/ContentTreeList.mjs

@@ -1,5 +1,5 @@
 import ContentStore from '../../store/Content.mjs'
-import TreeList     from '../../../../src/tree/List.mjs';
+import TreeList from '../../../../src/tree/List.mjs';
 
 /**
  * @class LearnNeo.view.home.ContentTreeList
@@ -23,17 +23,47 @@ class ContentTreeList extends TreeList {
      */
     onConstructed() {
         super.onConstructed();
-
         let me = this;
-
+        Neo.Main.getByPath({path: 'location.search'})
+            .then(data => {
+                const searchString = data?.substr(1) || '';
+                const search = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
+                me.deck = search.deck || 'learnneo';
+                me.doLoadStore();
+                console.log(search);
+            });
+    }
+    get contentPath() {
+        return `../../../resources/data/${this.deck}`;
+    }
+    doLoadStore() {
+        const me = this;
         Neo.Xhr.promiseJson({
-            url: '../../../resources/data/learnneo/content.json'
+            url: `${this.contentPath}/t.json`
         }).then(data => {
+            // TODO: Tree lists should do this themselves when their store is loaded.
             me.store.data = data.json.data;
             me.createItems(null, me.getListItemsRoot(), 0);
             me.update();
         })
     }
+    onLeafItemClick(record) {
+        super.onLeafItemClick(record);
+        this.doFetchContent(record);
+    }
+    async doFetchContent(record) {
+        let path = `${this.contentPath}`;
+        path += record.path ? `/pages/${record.path}` : `/p/${record.id}.md`;
+
+        if (record.isLeaf && path) {
+            const data = await fetch(path);
+            const content = await data.text();
+            Neo.main.addon.Markdown.markdownToHtml(content)
+                .then(
+                    html => this.fire('contentChange', {component: this, html}),
+                    () => this.fire('contentChange', {component: this}));
+        }
+    }
 }
 
 Neo.applyClassConfig(ContentTreeList);

package/apps/learnneo/view/home/MainContainer.mjs

@@ -1,47 +1,35 @@
-import Container               from '../../../../src/container/Base.mjs';
-import ContentTreeList         from './ContentTreeList.mjs';
+import Container from '../../../../src/container/Base.mjs';
+import Component from '../../../../src/component/Base.mjs';
+import ContentTreeList from './ContentTreeList.mjs';
 import MainContainerController from './MainContainerController.mjs';
-import Splitter                from '../../../../src/component/Splitter.mjs';
+import MainContainerModel from './MainContainerModel.mjs';
+import Splitter from '../../../../src/component/Splitter.mjs';
 
-/**
- * @class LearnNeo.view.home.MainContainer
- * @extends Neo.container.Base
- */
 class MainContainer extends Container {
     static config = {
-        /**
-         * @member {String} className='LearnNeo.view.home.MainContainer'
-         * @protected
-         */
         className: 'LearnNeo.view.home.MainContainer',
-        /**
-         * @member {Neo.controller.Component} controller=MainContainerController
-         */
+        model: MainContainerModel,
         controller: MainContainerController,
-        /**
-         * @member {Object[]} items
-         */
         items: [{
-            module  : Container,
-            layout  : 'fit',
+            module: Container,
+            layout: 'fit',
             minWidth: 350,
-            width   : 350,
+            width: 350,
 
             items: [{
-                module   : ContentTreeList,
-                listeners: {leafItemClick: 'onContentListLeafClick'}
+                module: ContentTreeList,
+                reference: 'tree',
+                listeners: {contentChange: 'onContentListLeafClick'},
             }]
         }, {
-            module      : Splitter,
+            module: Splitter,
             resizeTarget: 'previous'
         }, {
-            module   : Container,
-            layout   : {ntype: 'card', activeIndex: null},
-            reference: 'content-container'
+            module: Component,
+            layout: {ntype: 'card', activeIndex: null},
+            cls: 'learn-content',
+            reference: 'content'
         }],
-        /**
-         * @member {Object} layout={ntype:'hbox',align:'stretch'}
-         */
         layout: {ntype: 'hbox', align: 'stretch'}
     }
 }

package/apps/learnneo/view/home/MainContainerController.mjs

@@ -1,5 +1,6 @@
 import Component from '../../../../src/controller/Component.mjs';
 
+
 /**
  * @class LearnNeo.view.home.MainContainerController
  * @extends Neo.controller.Component
@@ -16,33 +17,22 @@ class MainContainerController extends Component {
     /**
      * @param {Object} record
      */
-    async onContentListLeafClick(record) {
-        const
-            contentContainer = this.getReference('content-container'),
-            path             = '../../../resources/data/learnneo/pages';
-
-        console.log('onContentListLeafClick', {contentContainer, record});
-        console.log('onContentListLeafClick', {contentContainer, record});
-
-        if (record.isLeaf && record.path) {
-            const data    = await fetch(`${path}/${record.path}`);
-            const content = await data.text();
-
-            contentContainer.removeAll();
-
-            await this.timeout(50);
-
-            contentContainer.add({
-                ntype: 'component',
-                html : content
-            });
-
-            await this.timeout(50);
-
+    onContentListLeafClick(data) {
+        const content = this.getReference('content');
+        content.html = data.html;
+
+        // contentContainer.removeAll();
+        // contentContainer.add({
+        //     ntype: 'component',
+        //     html: data.html
+        // });
+        // contentContainer.layout.activeIndex = 0;
+    }
 
-            contentContainer.layout.activeIndex = 0;
-        }
+    get contentPath() {
+        return `../../../resources/data/${this.deck}`;
     }
+
 }
 
 Neo.applyClassConfig(MainContainerController);

package/apps/learnneo/view/home/MainContainerModel.mjs

@@ -0,0 +1,35 @@
+import Component from '../../../../src/model/Component.mjs';
+import Tree from '../../store/Content.mjs';
+import Store from '../../../../src/data/Store.mjs';
+
+/**
+ * @class LearnNeo.view.home.MainContainerModel
+ * @extends Neo.model.Component
+ */
+class MainContainerModel extends Component {
+    static config = {
+        /**
+         * @member {String} className='LearnNeo.view.home.MainContainerModel'
+         * @protected
+         */
+        className: 'LearnNeo.view.home.MainContainerModel',
+        /**
+         * @member {Object} data
+         */
+        data: {},
+        /**
+         * @member {Object} stores
+         */
+        stores: {
+            tree: {
+                // module: Tree,
+                module: Store,
+                responseRoot: "data",
+            }
+        }
+    }
+}
+
+Neo.applyClassConfig(MainContainerModel);
+
+export default MainContainerModel;

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.9.6'
+         * @member {String} version='6.9.7'
          */
-        version: '6.9.6'
+        version: '6.9.7'
     }
 
     /**

package/examples/form/field/textarea/MainContainer.mjs

@@ -113,6 +113,12 @@ class MainContainer extends ConfigurationViewport {
             labelText: 'resizable',
             listeners: {change: me.onConfigChange.bind(me, 'resizable')},
             style    : {marginTop: '10px'}
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.autoGrow,
+            labelText: 'autoGrow',
+            listeners: {change: me.onConfigChange.bind(me, 'autoGrow')},
+            style    : {marginTop: '10px'}
         }, {
             module   : CheckBox,
             checked  : me.exampleComponent.required,
@@ -175,7 +181,7 @@ class MainContainer extends ConfigurationViewport {
     createExampleComponent() {
         return Neo.create(TextAreaField, {
             clearable : true,
-            height    : 600,
+            height    : 60,
             labelText : 'Label',
             labelWidth: 70,
             value     : 'Hello World',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.9.6",
+    "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"
+        }
+    ]
+}

package/resources/deck/whyneo.md

@@ -0,0 +1,80 @@
+
+#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/scss/src/apps/learnneo/Viewport.scss

@@ -0,0 +1,57 @@
+.learn-content {
+
+    font-size: 13pt;
+    letter-spacing: 1px;
+
+    em,
+    i {
+        font-family: Palatino, "Times New Roman", serif;
+        font-size: 1.07em;
+    }
+
+    p {
+        margin: 0em 0.5em .7em 0.5em;
+    }
+
+    padding: 0.5em;
+
+    overflow: scroll;
+
+    details summary {
+        cursor: pointer;
+        transition: margin 300ms ease-out;
+    }
+
+    details[open] {
+        margin-bottom: 2em;
+    }
+
+    details summary {
+        list-style: none;
+        color: #555;
+        display: flex;
+        /* also removes the list marker */
+        align-items: center;
+        font-weight: bold;
+    }
+
+    details summary::before {
+        content: "\f055";
+    }
+
+    details[open] summary::before {
+        content: "\f056";
+    }
+
+    details summary::before {
+        font-family: var(--fa-style-family, "Font Awesome 6 Free");
+        font-weight: var(--fa-style, 900);
+        font-size: 1.3em;
+        margin: .4em;
+        color: #c4c4c4;
+    }
+
+    summary::-webkit-details-marker {
+        display: none;
+    }
+}

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.9.6'
+     * @default '6.9.7'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.9.6'
+    version: '6.9.7'
 };
 
 Object.assign(DefaultConfig, {

package/src/form/field/TextArea.mjs

@@ -27,6 +27,12 @@ class TextArea extends Text {
          * @protected
          */
         ntype: 'textarea',
+        /**
+         * Set this to `true` to have the text area grow and shrink to accommodate
+         * any height of text. Bounds can be set using the `minHeight` and `maxHeight` settings.
+         * @member {Boolean} autoGrow=false
+         */
+        autoGrow : false,
         /**
          * @member {String[]} baseCls=['neo-textarea','neo-textfield']
          */
@@ -88,6 +94,17 @@ class TextArea extends Text {
         this.changeInputElKey('tag', value);
     }
 
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+        this.syncAutoGrowHeight();
+    }
+
     /**
      * Triggered after the resizable config got changed
      * @param {Boolean} value
@@ -126,6 +143,7 @@ class TextArea extends Text {
         }
 
         super.afterSetValue(value, oldValue);
+        this.syncAutoGrowHeight();
     }
 
     /**
@@ -148,6 +166,40 @@ class TextArea extends Text {
     beforeSetWrap(value, oldValue) {
         return this.beforeSetEnumValue(value, oldValue, 'wrap', 'wrapValues');
     }
+
+    /**
+     * @param {Object} data
+     * @protected
+     */
+    onInputValueChange(data) {
+        this.syncAutoGrowHeight();
+        super.onInputValueChange(data);
+    }
+
+    /**
+     * @protected
+     */
+    async syncAutoGrowHeight() {
+        let me = this;
+
+        if (me.mounted && me.autoGrow) {
+            const
+                inputEl = me.getInputEl(),
+                dims = await Neo.main.DomAccess.getScrollingDimensions({
+                    appName : me.appName,
+                    id      : me.getInputElId()
+                });
+
+            // We must not show the scrollbar when autoGrowing
+            inputEl.style.overflowY = 'hidden';
+
+            if (dims.scrollHeight > dims.clientHeight - 5) {
+                inputEl.height = dims.scrollHeight;
+            }
+
+            me.update();
+        }
+    }
 }
 
 Neo.applyClassConfig(TextArea);

package/src/main/DomAccess.mjs

@@ -100,6 +100,7 @@ class DomAccess extends Base {
                 'focus',
                 'getAttributes',
                 'getBoundingClientRect',
+                'getScrollingDimensions',
                 'measure',
                 'scrollBy',
                 'scrollIntoView',
@@ -459,6 +460,28 @@ class DomAccess extends Base {
         return nodeId.nodeType ? nodeId : (nodeId === 'body' || nodeId === 'document.body') ? document.body : this.getElement(nodeId);
     }
 
+    /**
+     * @param {HTMLElement|Object} data
+     * @param {String|String[]} data.id
+     * @returns {Object}
+     */
+    getScrollingDimensions(data) {
+        const me = this;
+
+        if (Array.isArray(data.id)) {
+            return data.id.map(id => me.getScrollingDimensions({ id }));
+        } else {
+            const node = data.nodeType ? data : me.getElementOrBody(data.id);
+
+            return {
+                clientWidth : node?.clientWidth,
+                clientHeight: node?.clientHeight,
+                scrollWidth : node?.scrollWidth,
+                scrollHeight: node?.scrollHeight
+            };
+        }
+    }
+
     /**
      * @param {HTMLElement} el
      * @returns {Boolean}