neo.mjs 6.9.6 → 6.9.8

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.8'
          */
-        version: '6.9.6'
+        version: '6.9.8'
     }
 
     /**

package/apps/learnneo/neo-config.json

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

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,45 @@ 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();
         })
     }
+
+    async doFetchContent(record) {
+        let me   = this,
+            path = `${me.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();
+            await Neo.main.addon.Markdown.markdownToHtml(content)
+                .then(
+                    html => me.fire('contentChange', {component: me, html}),
+                    ()   => me.fire('contentChange', {component: me}));
+        }
+    }
 }
 
 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
@@ -14,35 +15,43 @@ class MainContainerController extends Component {
     }
 
     /**
-     * @param {Object} record
+     * @param {Object} data
      */
-    async onContentListLeafClick(record) {
+    async onContentListLeafClick(data) {
         const
-            contentContainer = this.getReference('content-container'),
-            path             = '../../../resources/data/learnneo/pages';
-
-        console.log('onContentListLeafClick', {contentContainer, record});
-        console.log('onContentListLeafClick', {contentContainer, record});
+            me      = this,
+            content = me.getReference('content');
 
-        if (record.isLeaf && record.path) {
-            const data    = await fetch(`${path}/${record.path}`);
-            const content = await data.text();
+        content.html = data.html;
 
-            contentContainer.removeAll();
+        await this.timeout(200);
 
-            await this.timeout(50);
+        // todo: we need to add the links as neo configs
+        await Neo.main.addon.HighlightJS.loadLibrary({
+            appName        : me.appName,
+            highlightJsPath: '../../docs/resources/highlight/highlight.pack.js',
+            themePath      : '../../docs/resources/highlightjs-custom-github-theme.css'
+        });
 
-            contentContainer.add({
-                ntype: 'component',
-                html : content
-            });
+        await this.timeout(200);
 
-            await this.timeout(50);
+        Neo.main.addon.HighlightJS.syntaxHighlightInit({
+            appName: me.appName,
+            vnodeId: content.id
+        })
 
+        // 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/docs/app/view/MainContainerController.mjs

@@ -19,6 +19,18 @@ class MainContainerController extends Component {
         ntype: 'docs-maincontainer-controller'
     }
 
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        // todo: remove once paths are neo configs
+        Neo.main.addon.HighlightJS.loadLibrary({
+            appName: this.appName
+        })
+    }
+
     /**
      * @param {Object} record
      */

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.8'
          */
-        version: '6.9.6'
+        version: '6.9.8'
     }
 
     /**

package/examples/button/base/neo-config.json

@@ -2,5 +2,6 @@
     "appPath"    : "examples/button/base/app.mjs",
     "basePath"   : "../../../",
     "environment": "development",
-    "mainPath"   : "./Main.mjs"
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-neo-light"]   
 }

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.8",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

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

@@ -0,0 +1,102 @@
+# This is a h1
+## This is a h2
+### This is a h3
+#### This is a h4
+
+
+Neo.mjs is a framework used to create <mark>browser-based</mark> 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,110 @@
+Neo.mjs classes are standard JavaScript classes. Every source file
+you write will be a class definition, extending some Neo.mjs
+class.
+
+<pre>
+<code class="javascript">
+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.
+</code>
+</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>
+<code class="javascript">
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+        name     : 'Anonymous'
+    }
+}
+
+const myMammal = Neo.create(Mammal);
+console.log(myMammal.name);           // Logs "Anonymous"
+myMammal.name = 'Herbert';
+console.log(myMammal.name);           // Logs "Herbert"
+
+Neo.applyClassConfig(Mammal);
+
+export default Mammal;
+</code>
+</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>
+<code class="javascript">
+const myMammal = Neo.create(Mammal, {
+    name: 'Creature'
+});
+console.log(myMammal.name);           // Logs "Creature"
+</code>
+</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>
+<code class="javascript">
+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`);
+    }
+}
+
+const myMammal = Neo.create(Mammal, {
+    name: 'Creature'
+});
+
+myMammal.speak(); // Logs "Creature is grunting."
+
+Neo.applyClassConfig(Mammal);
+
+export default Mammal;
+</code>
+</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>