neo.mjs 6.9.9 → 6.9.11

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.9.9'
+         * @member {String} version='6.9.11'
          */
-        version: '6.9.9'
+        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

@@ -12,34 +12,49 @@ class ContentTreeList extends TreeList {
          * @protected
          */
         className: 'LearnNeo.view.home.ContentTreeList',
+        /**
+         * @member {String[]} cls=['topics-tree']
+         */
+        cls: ['topics-tree'],
         /**
          * @member {Neo.data.Store} store=ContentStore
          */
-        store: ContentStore,
+        store: ContentStore
+    }
 
-        cls: 'topics-tree'
+    get contentPath() {
+        return `../../../resources/data/deck/${this.deck}`;
     }
 
     /**
-     * todo: createItems() should get triggered onStoreLoad()
+     * @param {Object} record
+     * @returns {Promise<void>}
      */
-    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);
-            });
-    }
+    async doFetchContent(record) {
+        let me = this,
+            path = `${me.contentPath}`;
 
-    get contentPath() {
-        return `../../../resources/data/${this.deck}`;
+        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,
+                        record,
+                        isLab: record.name?.startsWith('Lab:')
+                    }),
+                    () => me.fire('contentChange', {component: me}));
+        }
     }
 
+    /**
+     *
+     */
     doLoadStore() {
         const me = this;
         Neo.Xhr.promiseJson({
@@ -52,26 +67,30 @@ class ContentTreeList extends TreeList {
         })
     }
 
-    onLeafItemClick(record) {
-        super.onLeafItemClick(record);
-        this.doFetchContent(record);
-    }
-
-    async doFetchContent(record) {
-        let me = this,
-            path = `${me.contentPath}`;
+    /**
+     * todo: createItems() should get triggered onStoreLoad()
+     */
+    onConstructed() {
+        super.onConstructed();
 
-        path += record.path ? `/pages/${record.path}` : `/p/${record.id}.md`;
+        let me = this;
 
-        if (record.isLeaf && path) {
-            const data = await fetch(path);
-            const content = await data.text();
+        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);
+            });
+    }
 
-            await Neo.main.addon.Markdown.markdownToHtml(content)
-                .then(
-                    html => me.fire('contentChange', {component: me, html}),
-                    () => me.fire('contentChange', {component: me}));
-        }
+    /**
+     * @param {Object} record
+     */
+    onLeafItemClick(record) {
+        super.onLeafItemClick(record);
+        this.doFetchContent(record);
     }
 }
 

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,15 +1,28 @@
 import Container from '../../../../src/container/Base.mjs';
-import Component from '../../../../src/component/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';
 
+/**
+ * @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',
-        model: MainContainerModel,
+        /**
+         * @member {Neo.controller.Component} controller=MainContainerController
+         */
         controller: MainContainerController,
+        /**
+         * @member {Object[]} items
+         */
         items: [{
             module: Container,
             layout: 'fit',
@@ -19,19 +32,33 @@ class MainContainer extends Container {
             items: [{
                 module: ContentTreeList,
                 reference: 'tree',
-                listeners: {contentChange: 'onContentListLeafClick'},
+                listeners: {
+                    contentChange: 'onContentChange',
+                }
             }]
         }, {
             module: Splitter,
-            resizeTarget: 'previous'
+            resizeTarget: 'previous',
+            size: 5
         }, {
-            module: Component,
-            layout: {ntype: 'card', activeIndex: null},
-            cls: 'learn-content',
-            reference: 'content'
+            module: ContentView,
+            reference: 'content',
+            listeners: {
+                edit: 'onContentEdit',
+                refresh: 'onContentRefresh'
+            }
         }],
-        layout: {ntype: 'hbox', align: 'stretch'}
+        /**
+         * @member {Object} layout={ntype:'hbox',align:'stretch'}
+         */
+        layout: {ntype: 'hbox', align: 'stretch'},
+        /**
+         * @member {Neo.model.Component} model=MainContainerModel
+         */
+        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.9'
+         * @member {String} version='6.9.11'
          */
-        version: '6.9.9'
+        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/examples/form/field/textarea/MainContainer.mjs

@@ -181,7 +181,7 @@ class MainContainer extends ConfigurationViewport {
     createExampleComponent() {
         return Neo.create(TextAreaField, {
             clearable : true,
-            height    : 60,
+            height    : 120,
             labelText : 'Label',
             labelWidth: 70,
             value     : 'Hello World',

package/package.json

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