neo.mjs 6.9.10 → 6.9.11

package/apps/ServiceWorker.mjs

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

package/apps/learnneo/neo-config.json

@@ -3,5 +3,9 @@
     "basePath"        : "../../",
     "environment"     : "development",
     "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["DragDrop", "HighlightJS", "Stylesheet", "Markdown"]
+    "mainThreadAddons": ["DragDrop", "HighlightJS", "Stylesheet", "Markdown"],
+    "themes": [
+        "neo-theme-neo-light"
+    ]
+    
 }

package/apps/learnneo/store/Content.mjs

@@ -53,7 +53,7 @@ class Content extends Store {
     }
 
     get contentPath() {
-        return `../../../resources/data/${this.deck}`;
+        return `../../../resources/data/deck/${this.deck}`;
     }
     doLoadStore() {
         debugger;

package/apps/learnneo/view/Viewport.mjs

@@ -1,4 +1,4 @@
-import BaseViewport       from '../../../src/container/Viewport.mjs';
+import BaseViewport from '../../../src/container/Viewport.mjs';
 import ViewportController from './ViewportController.mjs';
 
 /**
@@ -27,6 +27,17 @@ class Viewport extends BaseViewport {
          */
         layout: {ntype: 'card'}
     }
+    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.addCls(me.deck);
+            });
+    }
 }
 
 Neo.applyClassConfig(Viewport);

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

@@ -19,13 +19,11 @@ class ContentTreeList extends TreeList {
         /**
          * @member {Neo.data.Store} store=ContentStore
          */
-        store: ContentStore,
-
-        cls: 'topics-tree'
+        store: ContentStore
     }
 
     get contentPath() {
-        return `../../../resources/data/${this.deck}`;
+        return `../../../resources/data/deck/${this.deck}`;
     }
 
     /**
@@ -44,7 +42,12 @@ class ContentTreeList extends TreeList {
 
             await Neo.main.addon.Markdown.markdownToHtml(content)
                 .then(
-                    html => me.fire('contentChange', {component: me, html}),
+                    html => me.fire('contentChange', {
+                        component: me,
+                        html,
+                        record,
+                        isLab: record.name?.startsWith('Lab:')
+                    }),
                     () => me.fire('contentChange', {component: me}));
         }
     }

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

@@ -0,0 +1,60 @@
+import Component from '../../../../src/component/Base.mjs';
+
+/**
+ * @class LearnNeo.view.home.ContentView
+ * @extends Neo.component.Base
+ */
+class ContentView extends Component {
+    static config = {
+        /**
+         * @member {String} className='LearnNeo.view.home.ContentView'
+         * @protected
+         */
+        className: 'LearnNeo.view.home.ContentView',
+        /**
+         * @member {String[]} baseCls=['learn-content']
+         * @protected
+         */
+        baseCls: ['learn-content']
+    }
+
+    /**
+     * @member {Object} record=null
+     */
+    record = null
+
+    /**
+     * @param {Object} data
+     */
+    onClick(data) {
+        let me     = this,
+            record = me.record;
+
+        if (data.altKey && data.shiftKey && !data.metaKey) {
+            me.fire('edit', {component: me, record})
+        }
+        // Command/windows shift click = refresh
+        else if (!data.altKey && data.shiftKey && data.metaKey) {
+            me.fire('refresh', {component: me, record})
+        }
+    }
+
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        let me = this;
+
+        me.addDomListeners({
+            click: me.onClick,
+            scope: me
+        })
+    }
+
+}
+
+Neo.applyClassConfig(ContentView);
+
+export default ContentView;

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

@@ -1,9 +1,9 @@
-import Container               from '../../../../src/container/Base.mjs';
-import ContentComponent        from './ContentComponent.mjs';
-import ContentTreeList         from './ContentTreeList.mjs';
+import Container from '../../../../src/container/Base.mjs';
+import ContentView from './ContentView.mjs';
+import ContentTreeList from './ContentTreeList.mjs';
 import MainContainerController from './MainContainerController.mjs';
-import MainContainerModel      from './MainContainerModel.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
@@ -24,23 +24,29 @@ class MainContainer extends Container {
          * @member {Object[]} items
          */
         items: [{
-            module  : Container,
-            layout  : 'fit',
+            module: Container,
+            layout: 'fit',
             minWidth: 350,
-            width   : 350,
+            width: 350,
 
             items: [{
-                module   : ContentTreeList,
+                module: ContentTreeList,
                 reference: 'tree',
-                listeners: {contentChange: 'onContentListLeafClick'}
+                listeners: {
+                    contentChange: 'onContentChange',
+                }
             }]
         }, {
-            module      : Splitter,
+            module: Splitter,
             resizeTarget: 'previous',
-            size        : 5
+            size: 5
         }, {
-            module   : ContentComponent,
-            reference: 'content'
+            module: ContentView,
+            reference: 'content',
+            listeners: {
+                edit: 'onContentEdit',
+                refresh: 'onContentRefresh'
+            }
         }],
         /**
          * @member {Object} layout={ntype:'hbox',align:'stretch'}
@@ -51,6 +57,8 @@ class MainContainer extends Container {
          */
         model: MainContainerModel
     }
+
+
 }
 
 Neo.applyClassConfig(MainContainer);

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

@@ -1,11 +1,10 @@
-import Component from '../../../../src/controller/Component.mjs';
-
+import Controller from '../../../../src/controller/Component.mjs';
 
 /**
  * @class LearnNeo.view.home.MainContainerController
  * @extends Neo.controller.Component
  */
-class MainContainerController extends Component {
+class MainContainerController extends Controller {
     static config = {
         /**
          * @member {String} className='LearnNeo.view.home.MainContainerController'
@@ -14,17 +13,40 @@ class MainContainerController extends Component {
         className: 'LearnNeo.view.home.MainContainerController'
     }
 
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        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.getModel().setData('deck', search.deck || 'learnneo');
+            });
+
+        fetch('../../../../resources/data/deck/EditorConfig.json')
+            .then(response => response.json()
+            .then(data =>
+                this.getModel().setData('editorConfig', data)
+            ))
+    }
+
     /**
      * @param {Object} data
+     * @returns {Promise<void>}
      */
-    async onContentListLeafClick(data) {
-        const
-            me      = this,
+    async onContentChange(data) {
+        let me      = this,
             content = me.getReference('content');
 
-        content.html = data.html;
+        content.toggleCls('lab', data.isLab);
+
+        content.html   = data.html;
+        content.record = data.record;
 
-        await this.timeout(200);
+        await me.timeout(200);
 
         // todo: we need to add the links as neo configs
         await Neo.main.addon.HighlightJS.loadLibrary({
@@ -33,25 +55,42 @@ class MainContainerController extends Component {
             themePath      : '../../docs/resources/highlightjs-custom-github-theme.css'
         });
 
-        await this.timeout(200);
+        await me.timeout(200);
 
         Neo.main.addon.HighlightJS.syntaxHighlightInit({
             appName: me.appName,
             vnodeId: content.id
         })
-
-        // contentContainer.removeAll();
-        // contentContainer.add({
-        //     ntype: 'component',
-        //     html: data.html
-        // });
-        // contentContainer.layout.activeIndex = 0;
     }
 
-    get contentPath() {
-        return `../../../resources/data/${this.deck}`;
+    /**
+     * @param {Object} data
+     * @returns {Promise<void>}
+     */
+    async onContentEdit(data) {
+        const vm = this.getModel();
+        console.log(data);
+        const editorConfig = vm.getData('editorConfig');
+        const subDir = vm.getData('deck')
+        if (!editorConfig || !subDir) return;
+
+        const filePath = `${editorConfig.root}/${subDir}/p/${data.record.id}.md`;
+
+        await fetch('http://localhost:3000/openInEditor', {
+            method: 'POST',
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({path: filePath, editor: editorConfig.editor})
+        })
     }
 
+    /**
+     * @param {Object} data
+     */
+    onContentRefresh(data) {
+        this.getReference('tree').doFetchContent(data.record)
+    }
 }
 
 Neo.applyClassConfig(MainContainerController);

package/apps/newwebsite/app.mjs

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

package/apps/newwebsite/index.html

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

package/apps/newwebsite/neo-config.json

@@ -0,0 +1,7 @@
+{
+    "appPath"    : "apps/newwebsite/app.mjs",
+    "basePath"   : "../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-neo-light"]
+}

package/apps/newwebsite/view/MainContainer.mjs

@@ -0,0 +1,59 @@
+import Button    from '../../../src/button/Base.mjs';
+import Container from '../../../src/container/Base.mjs';
+import Viewport  from '../../../src/container/Viewport.mjs';
+
+/**
+ * @class NewWebsite.view.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static config = {
+        /**
+         * @member {String} className='NewWebsite.view.MainContainer'
+         * @protected
+         */
+        className: 'NewWebsite.view.MainContainer',
+        /**
+         * @member {String[]} cls=['newwebsite-main-container']
+         */
+        cls: ['newwebsite-main-container'],
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Container,
+            cls   : ['vector'],
+            flex  : 'none'
+        }, {
+            cls : 'neo-h1',
+            flex: 'none',
+            html: 'The High-Performance Web Framework for Next Generation Interfaces'
+        }, {
+            module: Container,
+            cls   : ['button-group'],
+            flex  : 'none',
+
+            items: [{
+                module : Button,
+                cls    : 'get-started-button',
+                text   : 'Get started',
+                flex   : 'none',
+                tooltip: {
+                    text     : 'Coming soon',
+                    showDelay: 0,
+                    hideDelay: 0
+                }
+            }, {
+                module: Button,
+                flex  : 'none',
+                text  : 'View on GitHub',
+                ui    : 'secondary',
+                url   : 'https://github.com/neomjs/neo'
+            }]
+        }]
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/buildScripts/webpack/json/myApps.template.json

@@ -4,6 +4,7 @@
         "Docs",
         "Form",
         "Krausest",
+        "NewWebsite",
         "RealWorld",
         "RealWorld2",
         "SharedCovid",

package/examples/ConfigurationViewport.mjs

@@ -6,8 +6,9 @@ import Viewport     from '../src/container/Viewport.mjs';
 
 // add custom themes here
 const themes = [
-    {name: 'neo-theme-dark',  label: 'Theme Dark'},
-    {name: 'neo-theme-light', label: 'Theme Light'}
+    {name: 'neo-theme-light',     label: 'Theme Light'},
+    {name: 'neo-theme-dark',      label: 'Theme Dark'},
+    {name: 'neo-theme-neo-light', label: 'Theme Neo-Light'}
 ]
 
 /**
@@ -121,12 +122,12 @@ class ConfigurationViewport extends Viewport {
                     handler: bindAppend(me.onSwitchTheme, me, 'cmp'),
                     style  : {marginTop: '20px'},
                     text   : theme === 'neo-theme-dark' ? 'Theme Light' : 'Theme Dark',
-                    width  : 100
+                    width  : 130
                 }, {
                     module : Button,
                     handler: me.logInstance.bind(me),
                     text   : 'Log Instance',
-                    width  : 100
+                    width  : 130
                 }]
             }]
         }];
@@ -184,7 +185,7 @@ class ConfigurationViewport extends Viewport {
         let me          = this,
             button      = data.component,
             countThemes = themes.length,
-            newTheme, oldIndex, oldTheme, themeIndex;
+            futureIndex, newTheme, oldIndex, oldTheme, themeIndex;
 
         themes.forEach((theme, index) => {
             if (button.text === theme.label) {
@@ -193,14 +194,16 @@ class ConfigurationViewport extends Viewport {
             }
         });
 
-        oldIndex = (themeIndex + 1) % countThemes;
-        oldTheme = themes[oldIndex].name;
+        futureIndex = (themeIndex + countThemes +1) % countThemes;
+        oldIndex    = (themeIndex + countThemes -1) % countThemes;
+        oldTheme    = themes[oldIndex].name;
 
-        button.text = themes[oldIndex].label;
+
+        button.text = themes[futureIndex].label;
 
         if (target === 'cmp') {
             me.exampleComponent.theme = newTheme;
-        } else {
+        } else {console.log(newTheme, oldTheme);
             Neo.applyDeltas(me.appName, {
                 cls: {
                     add   : [newTheme],

package/examples/ServiceWorker.mjs

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.9.10",
+    "version": "6.9.11",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -52,7 +52,7 @@
         "envinfo": "^7.11.0",
         "fs-extra": "^11.1.1",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.11",
+        "inquirer": "^9.2.12",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.31",

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

@@ -1,12 +1,9 @@
-# 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:
+# Some key features and benefits of Neo.mjs are:
+
+<code><A code snippet></code>
 
 <details>
 <summary>Multi-Threaded</summary>

package/resources/data/deck/learnneo/p/stylesheet.md

@@ -0,0 +1,40 @@
+###Advice
+
+Training content is different than self-study content. 
+
+<details>
+<summary>Training material</summary>
+Training material _augments_ the lecture. The audience should be focused on what the speaker is
+saying; the slides support the lecture. An important concept in writing
+training material is to avoid a _wall of words_, where there are lengthy
+paragraphs. People will read what's in front of them. If you have a lecture slide
+with a lot of text, your audience will be reading while you are lecturing, 
+and information is lost.
+</details>
+
+# This is an h1
+## This is an h2
+### This is an h3
+#### This is an h4
+
+<br>
+
+&lt;code>Hi there&lt;/code>
+
+<code>Hi there</code>
+
+<br>
+
+Use a &lt;details> tag for expandable bullet points, and for lab steps.
+<pre>
+&lt;details>
+&lt;summary>This describes the item&lt;/summary>
+This is the item contents.
+&lt;/details>
+</pre>
+
+<details>
+<summary>This describes the item</summary>
+This is the item contents.
+</details>
+

package/resources/data/{learnneo → deck/learnneo}/t.json

@@ -4,7 +4,7 @@
             "id": "2023-10-01T18-29-19-158Z",
             "parentId": null,
             "isLeaf": true,
-            "name": "Why Neo.mjs?"
+            "name": "Why Neo.mjs? "
         },
         {
             "id": "2023-09-26T17-26-15-104Z",
@@ -124,7 +124,24 @@
             "id": "2023-10-16T19-38-29-590Z",
             "parentId": null,
             "isLeaf": false,
-            "name": "Mixins"
+            "name": "Mixins "
+        },
+        {
+            "id": "2023-10-31T13-59-37-550Z",
+            "parentId": "2023-10-16T19-38-29-590Z",
+            "isLeaf": true,
+            "name": "New Node"
+        },
+        {
+            "id": "appendix",
+            "parentId": null,
+            "name": "Appendix"
+        },
+        {
+            "id": "stylesheet",
+            "parentId": "appendix",
+            "name": "Stylesheet",
+            "isLeaf": true
         }
     ]
 }

package/resources/data/deck/training/p/2022-12-27T21-54-52-300Z.md

@@ -0,0 +1,11 @@
+If you look at _package.json_ you'll see what scripts you can use. 
+
+To generate a new app run<br>
+`npm run create-app`
+<br>You typicically choose all defaults when prompted. We'll use `create-app` a few times
+during this training, but in a work environment it's not used very often.
+
+At the start of your coding session you'll probably run <br>
+`npm run server-start`
+<br>and as you write code and need new classes you might run <br>
+`npm run create-class`.

package/resources/data/deck/training/p/2022-12-27T21-55-23-144Z.md

@@ -0,0 +1,43 @@
+Neo source files are JavaScript _modules_, using the `.msj` file extension.
+
+JavaScript modules support `import`, `export` (to control which values are
+available outside of the file). 
+
+<pre class="runnable text readonly">
+import Component from '../../../node_modules/neo.mjs/src/component/Base.mjs';
+import TabContainer from '../../../node_modules/neo.mjs/src/tab/Container.mjs';
+import Viewport from '../../../node_modules/neo.mjs/src/container/Viewport.mjs';
+
+class MainContainer extends Viewport {
+    static config = {
+        className: 'Starter.view.MainContainer',
+        ntype: 'main',
+        autoMount: true,
+        style: { padding: '20px' },
+        layout: { ntype: 'fit' },
+        items: [{
+            module: TabContainer,
+            itemDefaults: {
+                module: Component,
+                cls: ['neo-examples-tab-component'],
+                style: { padding: '20px' }
+            },
+            items: [{
+                tabButtonConfig: {
+                    iconCls: 'fa fa-home',
+                    text: 'Tab 1'
+                },
+                vdom: { innerHTML: 'Welcome to your new Neo App.' }
+            }, {
+                tabButtonConfig: {
+                    iconCls: 'fa fa-play-circle',
+                    text: 'Tab 2'
+                },
+                vdom: { innerHTML: 'Have fun creating something awesome!' }
+            }]
+        }]
+    }
+}
+Neo.applyClassConfig(MainContainer);
+export default MainContainer;
+</pre>

package/resources/data/deck/training/p/2022-12-27T21-55-30-948Z.md

@@ -0,0 +1 @@
+<img height="540" src="resources/images/FlowOfExecution.jpg"></img>