neo.mjs 6.12.1 → 6.13.0

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

@@ -1,4 +1,10 @@
-import Component from '../../../../src/component/Base.mjs';
+import Component   from '../../../../src/component/Base.mjs';
+import LivePreview from './LivePreview.mjs';
+import {marked}    from '../../../../node_modules/marked/lib/marked.esm.js';
+
+const
+    labCloseRegex = /<!--\s*\/lab\s*-->/g,
+    labOpenRegex  = /<!--\s*lab\s*-->/g;
 
 /**
  * @class Portal.view.learn.ContentView
@@ -15,46 +21,252 @@ class ContentView extends Component {
          * @member {String[]} baseCls=['learn-content']
          * @protected
          */
-        baseCls: ['learn-content']
+        baseCls: ['learn-content'],
+        /**
+         * @member {Object} bind
+         */
+        bind: {
+            record: data => data.currentPageRecord
+        },
+        /**
+         * @member {Object} record_=null
+         */
+        record_: null
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners({
+            click    : me.onClick,
+            intersect: 'onIntersect', // view controller
+            scope    : me
+        });
+
+        Neo.main.addon.HighlightJS.loadLibrary({
+            appName        : me.appName,
+            highlightJsPath: '../../docs/resources/highlight/highlight.pack.js',
+            themePath      : '../../docs/resources/highlightjs-custom-github-theme.css'
+        })
+    }
+
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        let me = this;
+
+        value && setTimeout(() => {
+            Neo.main.addon.IntersectionObserver.register({
+                callback: 'findTopmostItem',
+                id      : me.id,
+                root    : `#${me.parentId}`,
+                windowId: me.windowId
+            })
+        }, 50)
     }
 
     /**
-     * @member {Object} record=null
+     * Triggered after the nextPageRecord config got changed
+     * @param {Object} value
+     * @param {Object} oldValue
      */
-    record = null
+    afterSetRecord(value, oldValue) {
+        value && this.doFetchContent(value)
+    }
+
+    /**
+     * @param {Object} record
+     * @returns {Promise<void>}
+     */
+    async doFetchContent(record) {
+        let me   = this,
+            path = me.getModel().getData('contentPath'),
+            content, data, html, modifiedHtml, neoDivs;
+
+        path += `/pages/${record.id}.md`;
+
+        if (record.isLeaf && path) {
+            data         = await fetch(path);
+            content      = await data.text();
+            content      = me.updateContentSectionsStore(content); // also replaces ## with h2 tags
+            content      = `# ${record.name}\n${content}`;
+            modifiedHtml = await me.highlightPreContent(content);
+            neoDivs      = {};
+
+            // Replace <pre data-neo></neo> with <div id='neo-preview-1'/>
+            // and create a map keyed by ID, whose value is the javascript
+            // from the <pre>
+            modifiedHtml = me.extractNeoContent(modifiedHtml, neoDivs);
+
+            html = marked.parse(modifiedHtml);
+            html = me.insertLabDivs(html);
+
+            me.toggleCls('lab', record.name?.startsWith('Lab:'));
+
+            me.html = html;
+
+            await me.timeout(50);
+
+            Object.keys(neoDivs).forEach(key => {
+                // Create LivePreview for each iteration, set value to neoDivs[key]
+                Neo.create(LivePreview, {
+                    appName        : me.appName,
+                    parentComponent: me,
+                    parentId       : key,
+                    value          : neoDivs[key],
+                    windowId       : me.windowId
+                })
+            });
+
+            Neo.main.addon.IntersectionObserver.observe({
+                disconnect: true,
+                id        : me.id,
+                observe   : '.neo-h2',
+                windowId  : me.windowId
+            })
+        }
+    }
+
+    /**
+     * @param {String} htmlString
+     * @param {Object} map
+     * @returns {String}
+     */
+    extractNeoContent(htmlString, map) {
+        // 1. Replace <pre data-neo> with <div id='neo-preview-2'/>
+        // and update map with key/value pairs, where the key is the ID and the value is the <pre> contents.
+
+        // Define a regular expression to match <pre data-javascript> tags
+        const preRegex = /<pre\s+data-neo\s*>([\s\S]*?)<\/pre>/g;
+
+        let count = 0;
+
+        // Replace the content with tokens, and create a promise to update the corresponding content
+        return htmlString.replace(preRegex, (match, preContent) => {
+            const key = `pre-live-preview-${Neo.core.IdGenerator.getId()}-${count++}`;
+            map[key] = preContent;
+            return `<div id="${key}"></div>`
+        })
+    }
+
+    /**
+     * @param preContent
+     * @param token
+     * @param id
+     * @returns {Object}
+     */
+    getHighlightPromise(preContent, token, id) {
+        // Resolves to an object of the form {after, token}, where after is the updated <pre> tag content
+        return Neo.main.addon.HighlightJS.highlightAuto({html: preContent, windowId: this.windowId})
+            .then(highlight => ({after: `<pre data-javascript id="${id}">${highlight.value}</pre>`, token}))
+    }
+
+    /**
+     * @param {String} htmlString
+     * @returns {Promise<*>}
+     */
+    async highlightPreContent(htmlString) {
+        // 1. Replace <pre data-javascript> with unique tokens and create a HighlightJS.highlightAuto promise for each
+        // 2. When all promises are resolved, use their values to replace the tokens.
+
+        // Note that if we were to import HighlightJS directly, we wouldn't need all this async code.
+
+        // Define a regular expression to match <pre data-javascript> tags
+        const preRegex = /<pre\s+data-javascript\s*>([\s\S]*?)<\/pre>/g;
+
+        // Create an array to store promises for each replacement
+        const replacementPromises = [];
+        let count = 0;
+
+        // Replace the content with tokens, and create a promise to update the corresponding content
+        let updatedHtml = htmlString.replace(preRegex, (match, preContent) => {
+            const token = `__NEO-PRE-TOKEN-${++count}__`;
+            replacementPromises.push(this.getHighlightPromise(preContent, token, `pre-preview-${Neo.core.IdGenerator.getId()}`));
+            return token
+        });
+
+        // Assert: updateHtml is the original, but with <pre data-javascript> replaced with tokens.
+
+        // Wait for all replacement promises to resolve
+        let replacements = await Promise.all(replacementPromises)
+
+        // Replace each token with the resolved content
+        replacements.forEach((replacement) => updatedHtml = updatedHtml.replace(replacement.token, replacement.after));
+
+        // Return the final updated HTML string
+        return updatedHtml
+    }
+
+    /**
+     * @param {String} inputString
+     * @returns {String}
+     */
+    insertLabDivs(inputString) {
+        // Replace <!-- lab --> with <div class="lab">
+        inputString = inputString.replace(labOpenRegex, '<div class="lab">');
+
+        // Replace <!-- /lab --> with </div>
+        inputString = inputString.replace(labCloseRegex, '</div>');
+
+        return inputString
+    }
 
     /**
      * @param {Object} data
      */
     onClick(data) {
-        let me     = this,
+        let me = this,
             record = me.record;
 
         if (data.altKey && data.shiftKey && !data.metaKey) {
-            me.fire('edit', {component: me, record})
+            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})
+            me.fire('refresh', { component: me, record })
         }
     }
 
     /**
-     *
+     * Updates the contentSections VM store and replaces ## with h2 tags
+     * @param {String} content
+     * @returns {String}
      */
-    onConstructed() {
-        super.onConstructed();
+    updateContentSectionsStore(content) {
+        let me           = this,
+            contentArray = content.split('\n'),
+            i            = 1,
+            storeData    = [];
 
-        let me = this;
+        contentArray.forEach((line, index) => {
+            if (line.startsWith('##') && line.charAt(2) !== '#') {
+                line = line.substring(2).trim();
 
-        me.addDomListeners({
-            click: me.onClick,
-            scope: me
-        })
-    }
+                storeData.push({id: i, name: line, sourceId: me.id});
 
+                contentArray[index] = `<h2 class="neo-h2" data-record-id="${i}">${line}</h2>`;
+
+                i++
+            }
+        });
+
+        me.getModel().getStore('contentSections').data = storeData;
+
+        return contentArray.join('\n')
+    }
 }
 
-Neo.applyClassConfig(ContentView);
+Neo.setupClass(ContentView);
 
 export default ContentView;

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

@@ -1,95 +1,138 @@
-import Base from '../../../../src/container/Base.mjs';
+import Container    from '../../../../src/container/Base.mjs';
+import MonacoEditor from '../../../../src/component/wrapper/MonacoEditor.mjs'
 import TabContainer from '../../../../src/tab/Container.mjs';
-import TextArea from '../../../../src/form/field/TextArea.mjs';
+
+const
+    classDeclarationRegex = /class\s+([a-zA-Z$_][a-zA-Z0-9$_]*)\s*(?:extends\s+[a-zA-Z$_][a-zA-Z0-9$_]*)?\s*{[\s\S]*?}/g,
+    exportRegex           = /export\s+(?:default\s+)?(?:const|let|var|class|function|async\s+function|generator\s+function|async\s+generator\s+function|(\{[\s\S]*?\}))/g,
+    importRegex           = /import\s+([\w-]+)\s+from\s+['"]([^'"]+)['"]/;
 
 /**
  * @class Portal.view.learn.LivePreview
  * @extends Neo.container.Base
  */
-class LivePreview extends Base {
+class LivePreview extends Container {
     static config = {
         /**
          * @member {String} className='Portal.view.learn.LivePreview'
          * @protected
          */
         className: 'Portal.view.learn.LivePreview',
-        baseCls: ['learn-live-preview'],
-        value_: null,
-        autoMount: true,
+        /**
+         * @member {String} ntype='live-preview'
+         * @protected
+         */
+        ntype: 'live-preview',
+
+        baseCls   : ['learn-live-preview'],
+        value_    : null,
+        autoMount : true,
         autoRender: true,
-        height: 400,
-        layout: 'fit',
+        height    : 400,
+        layout    : 'fit',
         /**
          * @member {Object[]} items
          */
         items: [{
-            module: TabContainer,
-            reference: 'tab-container',
-            cls: 'live-preview-container',
+            module             : TabContainer,
+            cls                : ['live-preview-container'],
+            reference          : 'tab-container',
+            removeInactiveCards: false,
+
             items: [{
-                module: TextArea,
-                hideLabel: true,
-                style: {height: '100%'},
-                reference: 'textArea',
+                module         : MonacoEditor,
+                hideLabel      : true,
+                style          : {height: '100%'},
+                reference      : 'editor',
                 tabButtonConfig: {
                     text: 'Source'
                 },
-                listeners: {
-                    change: data => data.component.up({className: 'Portal.view.learn.LivePreview'}).value = data.value
+                listeners      : {
+                    editorChange: data => {
+                        let container         = data.component.up({className: 'Portal.view.learn.LivePreview'});
+                        container.editorValue = data.value;
+
+                        if (container.previewContainer) {
+                            container.doRunSource()
+                        }
+                    }
                 }
             }, {
-                tabButtonConfig: {
-                    text: 'Preview'
-                },
-                reference: 'preview',
-                ntype: 'container'
+                module         : Container,
+                reference      : 'preview',
+                tabButtonConfig: {text: 'Preview'}
             }]
         }]
     }
 
+    /**
+     * Link the preview output to different targets
+     * @member {Neo.component.Base} previewContainer=null
+     */
+    previewContainer = null
+
+    /**
+     * @returns {Neo.component.Base|null}
+     */
+    get tabContainer() {
+        return this.getReference('tab-container')
+    }
+
+    /**
+     * Triggered after the value config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
     afterSetValue(value, oldValue) {
         if (value) {
-            this.getItem('textArea').value = value;
+            this.getItem('editor').value = value?.trim()
         }
     }
 
-    onConstructed() {
-        super.onConstructed();
+    /**
+     *
+     */
+    async createPopupWindow() {
+        let me      = this,
+            winData = await Neo.Main.getWindowData(),
+            rect    = await me.getDomRect(me.getReference('preview').id);
 
-        let me = this;
+        let {height, left, top, width} = rect;
 
-        me.getReference('tab-container').on('activeIndexChange', me.onActiveIndexChange, me)
+        height -= 50; // popup header in Chrome
+        left   += winData.screenLeft;
+        top    += (winData.outerHeight - winData.innerHeight + winData.screenTop);
+
+        Neo.Main.windowOpen({
+            url           : `./childapps/preview/index.html?id=${me.id}`,
+            windowFeatures: `height=${height},left=${left},top=${top},width=${width}`,
+            windowName    : me.id
+        })
     }
 
+    /**
+     *
+     */
     doRunSource() {
-        let source = this.value;
-
-        const importRegex = /import\s+([\w-]+)\s+from\s+['"]([^'"]+)['"]/;
-        const exportRegex = /export\s+(?:default\s+)?(?:const|let|var|class|function|async\s+function|generator\s+function|async\s+generator\s+function|(\{[\s\S]*?\}))/g;
-
-
-        const cleanLines = [];
-        const importPromises = [];
-        const importModuleNames = [];
-
-        const moduleNameAndPath = [];
-
-        const className = this.findLastClassName(source);
+        let me     = this,
+            source = me.editorValue || me.value;
 
+        const
+            cleanLines        = [],
+            importModuleNames = [],
+            moduleNameAndPath = [],
+            className         = me.findLastClassName(source);
 
         source.split('\n').forEach(line => {
             let importMatch = line.match(importRegex);
+
             if (importMatch) {
-                let moduleName = importMatch[1];
-                let path = importMatch[2];
-                moduleNameAndPath.push({
-                    moduleName,
-                    path
-                });
-                // importPromises.push(import(path));
-                // importPromises.push(import(path).then(module => {
-                //     eval(`const ${moduleName} = module.default;`)
-                // }));
+                let moduleName = importMatch[1],
+                    path       = importMatch[2];
+
+                moduleNameAndPath.push({moduleName, path});
+
                 importModuleNames.push(moduleName);
             } else if (line.match(exportRegex)) {
                 // Skip export statements
@@ -97,8 +140,9 @@ class LivePreview extends Base {
                 cleanLines.push(line);
             }
         });
+
         var params = [];
-        var vars = [];
+        var vars   = [];
         // Figure out the parts of the source we'll be running.
         // o The promises/import() corresponding to the user's import statements
         // o The vars holding the name of the imported module based on the module name for each import
@@ -118,8 +162,9 @@ class LivePreview extends Base {
         let promises = moduleNameAndPath.map(item => {
             params.push(`${item.moduleName}Module`);
             vars.push(`const ${item.moduleName} = ${item.moduleName}Module.default`);
-            return `import("${item.path}")`;
+            return `import("${item.path}")`
         });
+
         const codeString = `
             Promise.all([
                 ${promises.join(',\n')}
@@ -132,25 +177,43 @@ class LivePreview extends Base {
             .catch(error=>container.add({ntype:'component',html:error.message}));
         `;
 
-        const container = this.getReference('preview');
+        const container = me.getPreviewContainer();
         container.removeAll();
+
         try {
-            const dynamicCode = new Function('container', codeString);
-            dynamicCode(container);
+            new Function('container', codeString)(container);
         } catch (error) {
             container.add({
                 ntype: 'component',
-                html: error.message
+                html : error.message
             })
         }
     }
 
     /**
-    * @param {String} reference
-    * @returns {Object|Neo.component.Base|null}
-    */
-    getItem(reference, items = this.items) {
-        let i = 0,
+     * @param {String} sourceCode
+     * @returns {String|null}
+     */
+    findLastClassName(sourceCode) {
+        let lastClassName = null,
+            match;
+
+        // Iterate through all matches of the regular expression
+        while ((match = classDeclarationRegex.exec(sourceCode)) !== null) {
+            // Update the last class name found
+            lastClassName = match[1]
+        }
+
+        return lastClassName
+    }
+
+    /**
+     * @param {String} reference
+     * @param {Object[]} items=this.items
+     * @returns {Object|Neo.component.Base|null}
+     */
+    getItem(reference, items=this.items) {
+        let i   = 0,
             len = items.length,
             item,
             childItem;
@@ -163,13 +226,27 @@ class LivePreview extends Base {
                 childItem = this.getItem(reference, item.items);
 
                 if (childItem) {
-                    return childItem;
+                    return childItem
                 }
             }
         }
+
         return null
     }
 
+    /**
+     * @returns {Neo.component.Base|null}
+     */
+    getPreviewContainer() {
+        let me = this;
+
+        if (me.previewContainer) {
+            return me.previewContainer
+        }
+
+        return me.getReference('preview')
+    }
+
     /**
      * @param {Object} data
      * @param {Neo.component.Base} data.item
@@ -178,27 +255,49 @@ class LivePreview extends Base {
      * @param {Number} data.value
      */
     onActiveIndexChange(data) {
-        if (data.item.reference !== 'preview') return;
-        this.doRunSource();
+        if (data.item.reference === 'preview') {
+            this.doRunSource()
+        }
+
+        this.getReference('popout-window-button').hidden = data.value !== 1
     }
-    findLastClassName(sourceCode) {
-        // Define a regular expression to match class declarations
-        const classDeclarationRegex = /class\s+([a-zA-Z$_][a-zA-Z0-9$_]*)\s*(?:extends\s+[a-zA-Z$_][a-zA-Z0-9$_]*)?\s*{[\s\S]*?}/g;
 
-        let match;
-        let lastClassName = null;
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
 
-        // Iterate through all matches of the regular expression
-        while ((match = classDeclarationRegex.exec(sourceCode)) !== null) {
-            // Update the last class name found
-            lastClassName = match[1];
-        }
+        let me           = this,
+            tabContainer = me.getReference('tab-container');
+
+        // we want to add a normal (non-header) button
+        tabContainer.getTabBar().add({
+            handler  : me.popoutPreview.bind(me),
+            hidden   : tabContainer.activeIndex !== 1,
+            iconCls  : 'far fa-window-maximize',
+            reference: 'popout-window-button',
+            style    : {marginLeft: 'auto'},
+            ui       : 'ghost'
+        });
+
+        tabContainer.on('activeIndexChange', me.onActiveIndexChange, me)
+    }
+
+    /**
+     * @param {Object} data
+     */
+    async popoutPreview(data) {
+        let me = this;
 
-        return lastClassName;
+        data.component.disabled = true;
+        await me.createPopupWindow();
 
+        // this component requires a view controller to manage connected apps
+        me.getController()?.connectedApps.push(me.id)
     }
 }
 
-Neo.applyClassConfig(LivePreview);
+Neo.setupClass(LivePreview);
 
 export default LivePreview;