neo.mjs 6.17.1 → 6.18.0

package/apps/portal/view/learn/LivePreview.mjs

@@ -12,6 +12,14 @@ const
  * @extends Neo.container.Base
  */
 class LivePreview extends Container {
+    /**
+     * Valid values for iconPosition
+     * @member {String[]} activeViews=['preview','source']
+     * @protected
+     * @static
+     */
+    static activeViews = ['preview', 'source']
+
     static config = {
         /**
          * @member {String} className='Portal.view.learn.LivePreview'
@@ -23,13 +31,19 @@ class LivePreview extends Container {
          * @protected
          */
         ntype: 'live-preview',
-
-        baseCls   : ['learn-live-preview'],
-        value_    : null,
-        autoMount : true,
-        autoRender: true,
-        height    : 400,
-        layout    : 'fit',
+        /**
+         * Valid values are 'preview' and 'source'
+         * @member {String} activeView_='source'
+         */
+        activeView_: 'source',
+
+        baseCls         : ['learn-live-preview'],
+        value_          : null,
+        autoMount       : true,
+        autoRender      : true,
+        disableRunSource: false,
+        height          : 400,
+        layout          : 'fit',
         /**
          * @member {Object[]} items
          */
@@ -75,7 +89,17 @@ class LivePreview extends Container {
      * @returns {Neo.component.Base|null}
      */
     get tabContainer() {
-        return this.getReference('tab-container')
+        return this.getItem('tab-container')
+    }
+
+    /**
+     * Triggered after the activeView config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetActiveView(value, oldValue) {
+        this.tabContainer.activeIndex = value === 'source' ? 0 : 1
     }
 
     /**
@@ -90,6 +114,17 @@ class LivePreview extends Container {
         }
     }
 
+    /**
+     * Triggered before the activeView config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @returns {String}
+     * @protected
+     */
+    beforeSetActiveView(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'activeView')
+    }
+
     /**
      *
      */
@@ -115,10 +150,12 @@ class LivePreview extends Container {
      *
      */
     doRunSource() {
-        let me     = this,
-            source = me.editorValue || me.value;
+        if (this.disableRunSource) {
+            return
+        }
 
-        const
+        let me                = this,
+            source            = me.editorValue || me.value,
             cleanLines        = [],
             importModuleNames = [],
             moduleNameAndPath = [],
@@ -137,7 +174,7 @@ class LivePreview extends Container {
             } else if (line.match(exportRegex)) {
                 // Skip export statements
             } else {
-                cleanLines.push(line);
+                cleanLines.push(`    ${line}`);
             }
         });
 
@@ -161,21 +198,23 @@ class LivePreview extends Container {
 
         let promises = moduleNameAndPath.map(item => {
             params.push(`${item.moduleName}Module`);
-            vars.push(`const ${item.moduleName} = ${item.moduleName}Module.default`);
-            return `import("${item.path}")`
+            vars.push(`    const ${item.moduleName} = ${item.moduleName}Module.default;`);
+            return `import('${item.path}')`
         });
 
-        const codeString = `
-            Promise.all([
-                ${promises.join(',\n')}
-            ])
-            .then(([${params.join(', ')}]) => {
-                    ${vars.join('\n')}
-                    ${cleanLines.join('\n')}
-                    if (${className} && Neo.component.Base.isPrototypeOf(${className})) container.add({module:${className}});
-                })
-            .catch(error=>container.add({ntype:'component',html:error.message}));
-        `;
+        const codeString = [
+            'Promise.all([',
+            `    ${promises.join(',\n')}`,
+            `]).then(([${params.join(', ')}]) => {`,
+            `${vars.join('\n')}`,
+            `    ${cleanLines.join('\n')}`,
+            '',
+            `    if (${className} && Neo.component.Base.isPrototypeOf(${className})) {`,
+            `        container.add({module:${className}})`,
+            '    }',
+            '})',
+            '.catch(error => container.add({ntype:\'component\', html:error.message}));'
+        ].join('\n')
 
         const container = me.getPreviewContainer();
         container.removeAll();
@@ -233,6 +272,7 @@ class LivePreview extends Container {
         }
 
         this.getReference('popout-window-button').hidden = data.value !== 1
+        this.disableRunSource = false;
     }
 
     /**
@@ -241,8 +281,8 @@ class LivePreview extends Container {
     onConstructed() {
         super.onConstructed();
 
-        let me           = this,
-            tabContainer = me.getReference('tab-container');
+        let me             = this,
+            {tabContainer} = me;
 
         // we want to add a normal (non-header) button
         tabContainer.getTabBar().add({
@@ -254,7 +294,10 @@ class LivePreview extends Container {
             ui       : 'ghost'
         });
 
-        tabContainer.on('activeIndexChange', me.onActiveIndexChange, me)
+        tabContainer.on('activeIndexChange', me.onActiveIndexChange, me);
+
+        // changing the activeView initially will not trigger our onActiveIndexChange() logic
+        me.activeView === 'preview' && me.doRunSource()
     }
 
     /**
@@ -267,7 +310,7 @@ class LivePreview extends Container {
         await me.createPopupWindow();
 
         // this component requires a view controller to manage connected apps
-        me.getController()?.connectedApps.push(me.id)
+        me.getController('viewport-controller')?.connectedApps.push(me.id)
     }
 }
 

package/apps/portal/view/learn/MainContainerController.mjs

@@ -1,4 +1,5 @@
-import Controller from '../../../../src/controller/Component.mjs';
+import Controller        from '../../../../src/controller/Component.mjs';
+import {getSearchParams} from '../../Util.mjs';
 
 /**
  * @class Portal.view.learn.MainContainerController
@@ -19,41 +20,24 @@ class MainContainerController extends Controller {
         }
     }
 
-    /**
-     * @member {String[]} connectedApps=[]
-     */
-    connectedApps = []
-
     /**
      * @param {Object} config
      */
     construct(config) {
         super.construct(config);
 
-        let me = this,
-            search, searchString;
+        let {windowId} = this;
 
         Neo.Main.getByPath({
-            path    : 'location.search',
-            windowId: me.windowId
+            path: 'location.search',
+            windowId
         }).then(data => {
-            searchString = data?.substr(1) || '';
-            search       = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
-
-            me.getModel().setData({
-                deck: search.deck || 'learnneo'
+            this.getModel().setData({
+                deck: getSearchParams(data).deck || 'learnneo'
             })
         })
     }
 
-    /**
-     * @param {String} searchString
-     * @returns {Object}
-     */
-    decodeUri(searchString) {
-        return searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {}
-    }
-
     /**
      * @param {String} learnItem
      */
@@ -64,65 +48,6 @@ class MainContainerController extends Controller {
         })
     }
 
-    /**
-     * @param {Object} data
-     * @param {String} data.appName
-     * @param {Number} data.windowId
-     */
-    async onAppConnect(data) {
-        let me              = this,
-            app             = Neo.apps[data.appName],
-            mainView        = app.mainView,
-            {windowId}      = data,
-            searchString    = await Neo.Main.getByPath({path: 'location.search', windowId}),
-            livePreviewId   = me.decodeUri(searchString.substring(1)).id,
-            livePreview     = Neo.getComponent(livePreviewId),
-            sourceContainer = livePreview.getReference('preview'),
-            tabContainer    = livePreview.tabContainer,
-            sourceView      = sourceContainer.removeAt(0, false);
-
-        livePreview.previewContainer = mainView;
-        mainView.add(sourceView);
-
-        tabContainer.activeIndex = 0; // switch to the source view
-
-        tabContainer.getTabAtIndex(1).disabled = true
-    }
-
-    /**
-     * @param {Object} data
-     * @param {String} data.appName
-     * @param {Number} data.windowId
-     */
-    async onAppDisconnect(data) {
-        let me                  = this,
-            {appName, windowId} = data,
-            app                 = Neo.apps[appName],
-            mainView            = app.mainView;
-
-        // Closing a code preview window needs to drop the preview back into the related main app
-        if (appName !== 'Portal') {
-            let searchString    = await Neo.Main.getByPath({path: 'location.search', windowId}),
-                livePreviewId   = me.decodeUri(searchString.substring(1)).id,
-                livePreview     = Neo.getComponent(livePreviewId),
-                sourceContainer = livePreview.getReference('preview'),
-                tabContainer    = livePreview.tabContainer,
-                sourceView      = mainView.removeAt(0, false);
-
-            livePreview.previewContainer = null;
-            sourceContainer.add(sourceView);
-
-            tabContainer.activeIndex = 1; // switch to the source view
-
-            livePreview.getReference('popout-window-button').disabled = false;
-            tabContainer.getTabAtIndex(1).disabled = false
-        }
-        // Close popup windows when closing or reloading the main window
-        else {
-            Neo.Main.windowClose({names: me.connectedApps, windowId})
-        }
-    }
-
     /**
      *
      */
@@ -131,16 +56,11 @@ class MainContainerController extends Controller {
 
         let me = this;
 
-        Neo.currentWorker.on({
-            connect   : me.onAppConnect,
-            disconnect: me.onAppDisconnect,
-            scope     : me
-        });
-
         Neo.Main.getByPath({path: 'location.search'})
             .then(data => {
-                const search = me.decodeUri(data?.substring(1) || '');
-                me.getModel().setData('deck', search.deck || 'learnneo');
+                me.getModel().setData({
+                    deck: getSearchParams(data).deck || 'learnneo'
+                });
             });
 
         // todo: target file does not exist inside the repo

package/apps/realworld/api/Article.mjs

@@ -48,6 +48,4 @@ class Article extends Base {
     }
 }
 
-let instance = Neo.setupClass(Article);
-
-export default instance;
+export default Neo.setupClass(Article);

package/apps/realworld/api/Favorite.mjs

@@ -32,6 +32,4 @@ class Favorite extends Base {
     }
 }
 
-let instance = Neo.setupClass(Favorite);
-
-export default instance;
+export default Neo.setupClass(Favorite);

package/apps/realworld/api/Profile.mjs

@@ -36,6 +36,4 @@ class Profile extends Base {
     }
 }
 
-let instance = Neo.setupClass(Profile);
-
-export default instance;
+export default Neo.setupClass(Profile);

package/apps/realworld/api/Tag.mjs

@@ -18,6 +18,4 @@ class Tag extends Base {
     }
 }
 
-let instance = Neo.setupClass(Tag);
-
-export default instance;
+export default Neo.setupClass(Tag);

package/apps/realworld/api/User.mjs

@@ -18,6 +18,4 @@ class User extends Base {
     }
 }
 
-let instance = Neo.setupClass(User);
-
-export default instance;
+export default Neo.setupClass(User);

package/apps/realworld2/api/Article.mjs

@@ -48,6 +48,4 @@ class Article extends Base {
     }
 }
 
-let instance = Neo.setupClass(Article);
-
-export default instance;
+export default Neo.setupClass(Article);

package/apps/realworld2/api/Favorite.mjs

@@ -32,6 +32,4 @@ class Favorite extends Base {
     }
 }
 
-let instance = Neo.setupClass(Favorite);
-
-export default instance;
+export default Neo.setupClass(Favorite);

package/apps/realworld2/api/Profile.mjs

@@ -36,6 +36,4 @@ class Profile extends Base {
     }
 }
 
-let instance = Neo.setupClass(Profile);
-
-export default instance;
+export default Neo.setupClass(Profile);

package/apps/realworld2/api/Tag.mjs

@@ -18,6 +18,4 @@ class Tag extends Base {
     }
 }
 
-let instance = Neo.setupClass(Tag);
-
-export default instance;
+export default Neo.setupClass(Tag);

package/apps/realworld2/api/User.mjs

@@ -18,6 +18,4 @@ class User extends Base {
     }
 }
 
-let instance = Neo.setupClass(User);
-
-export default instance;
+export default Neo.setupClass(User);

package/apps/realworld2/view/article/HelixContainer.mjs

@@ -1,12 +1,12 @@
-import ArticlePreviews    from '../../store/ArticlePreviews.mjs'
-import Helix              from './Helix.mjs'
-import HelixMainContainer from '../../../../examples/component/helix/MainContainer.mjs';
+import ArticlePreviews from '../../store/ArticlePreviews.mjs'
+import Helix           from './Helix.mjs'
+import Viewport        from '../../../../examples/component/helix/Viewport.mjs';
 
 /**
  * @class RealWorld2.view.article.HelixContainer
- * @extends Neo.examples.component.helix.MainContainer
+ * @extends Neo.examples.component.helix.Viewport
  */
-class HelixContainer extends HelixMainContainer {
+class HelixContainer extends Viewport {
     static config = {
         /**
          * @member {String} className='RealWorld2.view.article.HelixContainer'

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

@@ -1,5 +1,6 @@
 {
     "apps": [
+        "Colors",
         "Covid",
         "Docs",
         "Form",

package/buildScripts/webpack/webpack.server.config.mjs

@@ -2,6 +2,9 @@ export default {
     mode: 'production',
 
     devServer: {
-        static: process.cwd()
+        static: {
+            directory: process.cwd(),
+            watch    : false
+        }
     }
 };

package/docs/app/view/MainContainer.mjs

@@ -42,6 +42,11 @@ class MainContainer extends Viewport {
          * @member {Neo.collection.Base|null} store_=null
          */
         store_: null,
+        /**
+         * Important for the Portal App, until the new theme fully supports it
+         * @member {String} theme='neo-theme-light'
+         */
+        theme: 'neo-theme-light',
         /**
          * @member {Array} items=[//...]
          */

package/docs/app/view/classdetails/MembersList.mjs

@@ -246,7 +246,7 @@ class MembersList extends Base {
 
             // methods
             if (item.params && item.kind !== 'event') {
-                if (item.$kind === 'property') {console.log(item);
+                if (item.$kind === 'property') {
                     headerText = 'get ' + headerText
                 }
 

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.15.11'
+         * @member {String} version='6.18.0'
          */
-        version: '6.15.11'
+        version: '6.18.0'
     }
 
     /**
@@ -32,6 +32,4 @@ class ServiceWorker extends ServiceBase {
     workerId = 'service'
 }
 
-let instance = Neo.setupClass(ServiceWorker);
-
-export default instance;
+export default Neo.setupClass(ServiceWorker);