neo.mjs 6.41.0 → 6.42.0

package/apps/ServiceWorker.mjs

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

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

@@ -55,7 +55,7 @@ class ContentView extends Component {
             scope    : me
         });
 
-        Neo.main.addon.HighlightJS.loadLibrary({
+        Neo.main.addon.HighlightJS.loadFiles({
             appName        : me.appName,
             highlightJsPath: '../../docs/resources/highlight/highlight.pack.js',
             themePath      : '../../docs/resources/highlightjs-custom-github-theme.css'

package/apps/portal/view/services/Component.mjs

@@ -24,7 +24,7 @@ class Component extends BaseComponent {
             {cls: ['info-block'], cn: [
                 {tag: 'h2', html: 'Weekly Workshops'},
                 {tag: 'p',  html: [
-                    'We are doing weekly workshops on Thursdays 17:30 CEST (11:30am EST) for 60m free of charge.</br>',
+                    'We are doing weekly workshops on Thursdays 18:30 CEST (12:30am EST) for 60m free of charge.</br>',
                     'Ping us inside our ',
                     '<a href="https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA">Slack Channel</a>, ',
                     'in case you would like to join us.'

package/docs/app/view/MainContainerController.mjs

@@ -42,7 +42,7 @@ class MainContainerController extends Component {
             opts.themePath       = '../../docs/resources/highlightjs-custom-github-theme.css'
         }
 
-        Neo.main.addon.HighlightJS.loadLibrary(opts)
+        Neo.main.addon.HighlightJS.loadFiles(opts)
     }
 
     /**

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.41.0",
+    "version": "6.42.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/data/deck/learnneo/pages/benefits/FormsEngine.md

@@ -248,8 +248,8 @@ In a nutshell:
 {
     module: TabContainer,
     items : [
-        {module: () => import('./MyChildForm1')},
-        {module: () => import('./MyChildForm2')}
+        {module: () => import('./MyChildForm1.mjs')},
+        {module: () => import('./MyChildForm2.mjs')}
     ]
 }
 </pre>

package/resources/data/deck/learnneo/pages/benefits/Multi-Threading.md

@@ -24,7 +24,7 @@ On its own, a Browser will just use ***one*** core per tab / window.
 Meaning: your Angular or React apps look like this:
 
 <p style="overflow-x: auto;">
-    <img alt="Current State of Apps" src="https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/apps-today.png">
+    <img style="height: 279px; width: 481px;" alt="Current State of Apps" src="https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/apps-today.png">
 </p>
 
 The more JavaScript tasks are running inside your app, the slower it will get.
@@ -82,7 +82,7 @@ To resolve this performance bottleneck, we want to get main threads as idle as p
 rendering / dynamically manipulating the DOM:
 
 <p style="overflow-x: auto;">
-    <img alt="App Worker Concept" src="https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/app-worker.png">
+    <img style="height: 481px; width: 442px;" alt="App Worker Concept" src="https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/app-worker.png">
 </p>
 
 The worst case that could happen now is that your app worker will slow down and this core runs at 100%. However,

package/resources/scss/src/apps/portal/HeaderToolbar.scss

@@ -2,12 +2,10 @@
     box-shadow: 0 5px 10px rgba(0,0,0,.3);
     z-index   : 8;
 
-    .logo {
-        margin-left: 1em;
-    }
-
     .neo-button {
-        margin-left: 10px;
+        &:not(:first-child) {
+            margin-left: 10px;
+        }
 
         &.no-text {
             margin-left: 0;

package/resources/scss/src/apps/portal/home/ContentBox.scss

@@ -1,28 +1,61 @@
 .portal-content-box {
     border-radius  : 3px;
     box-shadow     : 0 3px 6px rgba(0, 0, 0, 0.3);
-    cursor         : pointer;
     color          : #000;
+    cursor         : pointer;
     min-width      : 300px;
     padding        : 0 1em 1em 1em;
+    position       : relative;
     text-decoration: none;
 
     &:hover {
         background-color: var(--sem-color-surface-primary-background);
+
+        &:after {
+            background-color: var(--purple-200);
+            border-radius   : 2px;
+            bottom          : 10px;
+            content         : attr(href) ' \2192';
+            font-size       : 0.7em;
+            left            : -1px;
+            opacity         : 0.7;
+            padding         : 3px 20px;
+            position        : absolute;
+            right           : -1px;
+            text-align      : center;
+        }
+
+        .portal-content-box-headline {
+            border-bottom-color: #b7c0da;
+        }
     }
 
     .portal-content-box-content {
+        margin-top  : 0.75em;
         padding-left: 1.3em;
-        margin-top: 0.75em;
     }
 
     .portal-content-box-headline {
-        border-bottom: 1px solid #ececec;
+        border-bottom : 1px solid #ececec;
+        letter-spacing: 1.5px !important;
+        margin        : 1em auto 0 auto;
+        max-width     : 85%;
         padding-bottom: 0.75em;
-        max-width: 85%;
-        margin: 1em auto 0 auto;
-        text-align: center;
-        letter-spacing: 1.5px!important;
-        word-spacing: 1.5px;
+        text-align    : center;
+        word-spacing  : 1.5px;
+    }
+}
+
+.neo-no-mouse {
+    .portal-content-box {
+        &:after {
+            bottom     : .5em;
+            color      : var(--purple-200);
+            content    : '\f08e';
+            font-family: var(--fa-style-family-classic);
+            font-weight: 600;
+            position   : absolute;
+            right      : .5em;
+        }
     }
 }

package/resources/scss/src/toolbar/Base.scss

@@ -5,6 +5,10 @@
 
     .neo-button {
         margin: 0;
+
+        @media (max-width: 600px) {
+            padding: 0 5px;
+        }
     }
 
     &.neo-dock-left {

package/src/DefaultConfig.mjs

@@ -260,12 +260,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.41.0'
+     * @default '6.42.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.41.0'
+    version: '6.42.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/Video.mjs

@@ -1,5 +1,7 @@
 import BaseComponent from '../component/Base.mjs';
-import VDomUtil from '../util/VDom.mjs';
+import VDomUtil      from '../util/VDom.mjs';
+
+let isOperaMini = null;
 
 /**
  * @class Neo.component.Video
@@ -39,7 +41,7 @@ class Video extends BaseComponent {
         autoplay: false,
         /**
          * In case the browser does not support the video source the component should show an error.
-         * @member {Boolean} errorMsg='The browser does not support the video'
+         * @member {String} errorMsg='The browser does not support the video'
          */
         errorMsg: 'Your browser does not support the video tag.',
         /**
@@ -109,32 +111,35 @@ class Video extends BaseComponent {
     }
 
     /**
-     * afterSetUrl
      * Add a source element into the video element containing the url
-     *
      * @param {String} value
      * @param {String|null} oldValue
      */
-    afterSetUrl(value, oldValue) {
+    async afterSetUrl(value, oldValue) {
         if (!value) return;
 
-        let {vdom}      = this,
-            media       = VDomUtil.getFlags(vdom, 'media')[0],
-            ua          = navigator.userAgent || navigator.vendor || window.opera,
-            isOperaMini = /Opera Mini/i.test(ua);
+        let me     = this,
+            {vdom} = me,
+            media  = VDomUtil.getFlags(vdom, 'media')[0],
+            userAgent;
+
+        if (isOperaMini === null) {
+            userAgent   = await Neo.Main.getByPath({path: 'navigator.userAgent'});
+            isOperaMini = userAgent.includes('Opera Mini');
+        }
 
         media.cn = [{
-            tag: 'source',
-            src: value,
-            type: this.type
+            tag : 'source',
+            src : value,
+            type: me.type
         }];
 
         // Opera Mini might not support the video-source => check the user agent string
         if (isOperaMini) {
             media.cn.push({
-                tag: 'span',
-                html: this.errorMsg,
-            });
+                tag : 'span',
+                html: me.errorMsg
+            })
         }
 
         this.update()
@@ -144,7 +149,7 @@ class Video extends BaseComponent {
      * autoplay - run the event listeners
      * Only called in constructor and sets playing => calls update already
      *
-     * Rationale: update() sends the vdom & vnode on a workers roundtrip to get the deltas. 
+     * Rationale: update() sends the vdom & vnode on a workers roundtrip to get the deltas.
      * While this is happening,  the component locks itself for future updates until the new vnode got back (async).
      * After the delay the framework  would trigger a 2nd roundtrip to get the deltas for the visible node.
      *

package/src/main/DomAccess.mjs

@@ -566,18 +566,21 @@ class DomAccess extends Base {
 
     /**
      * Include a script into the document.head
+     * You can add more attributes if needed. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
      * @param {String} src
-     * @param {Boolean} [async=true]
+     * @param {Object} opts=defer:true}
+     * @param {Boolean} [opts.async]
+     * @param {Boolean} [opts.defer]
      * @returns {Promise<unknown>}
      */
-    loadScript(src, async=true) {
+    loadScript(src, opts={defer:true}) {
         let script;
 
         return new Promise((resolve, reject) => {
             script = document.createElement('script');
 
             Object.assign(script, {
-                async,
+                ...opts,
                 onerror: reject,
                 onload : resolve,
                 src

package/src/main/addon/AmCharts.mjs

@@ -20,12 +20,6 @@ class AmCharts extends Base {
          * @protected
          */
         charts: {},
-        /**
-         * Stores all chart config objects which arrived before the chart lib scripts got loaded
-         * @member {Object[]} chartsToCreate=[]
-         * @protected
-         */
-        chartsToCreate: [],
         /**
          * Stores all chart data inside an object. key => chart id
          * No array since in case a chart gets loaded multiple times, we only want to apply the last data on mount.
@@ -45,7 +39,7 @@ class AmCharts extends Base {
         fallbackPath: 'https://neomjs.github.io/pages/resources_pub/amCharts/',
         /**
          * Remote method access for other workers
-         * @member {Object} remote={app: [//...]}
+         * @member {Object} remote
          * @protected
          */
         remote: {
@@ -57,39 +51,21 @@ class AmCharts extends Base {
                 'setProperty',
                 'updateData'
             ]
-        },
-        /**
-         * @member {Boolean} scriptsLoaded_=true
-         * @protected
-         */
-        scriptsLoaded_: false
-    }
-
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-
-        this.insertAmChartsScripts()
+        }
     }
 
     /**
-     * Triggered after the scriptsLoaded config got changed
+     * Triggered after the isReady config got changed
      * @param {Boolean} value
      * @param {Boolean} oldValue
      * @protected
      */
-    afterSetScriptsLoaded(value, oldValue) {
+    afterSetIsReady(value, oldValue) {
+        super.afterSetIsReady(value, oldValue);
+
         if (value) {
             let me = this;
 
-            me.chartsToCreate.forEach(config => {
-                me.create(config)
-            });
-
-            me.chartsToCreate = [];
-
             me.timeout(1000).then(() => {
                 Object.entries(me.dataMap).forEach(([key, dataValue]) => {
                     me.updateData(dataValue)
@@ -107,15 +83,21 @@ class AmCharts extends Base {
      * @param {Array} [data.params]
      */
     callMethod(data) {
-        if (this.hasChart(data.id)) {
-            let chart      = this.charts[data.id],
-                pathArray  = data.path.split('.'),
-                methodName = pathArray.pop(),
-                scope      = pathArray.length < 1 ? chart:  Neo.ns(pathArray.join('.'), false, chart);
+        let me = this;
 
-            scope[methodName].call(scope, ...data.params || [])
+        if (!me.isReady) {
+            return me.cacheMethodCall({fn: 'callMethod', data})
         } else {
-            // todo
+            if (me.hasChart(data.id)) {
+                let chart      = me.charts[data.id],
+                    pathArray  = data.path.split('.'),
+                    methodName = pathArray.pop(),
+                    scope      = pathArray.length < 1 ? chart:  Neo.ns(pathArray.join('.'), false, chart);
+
+                scope[methodName].call(scope, ...data.params || [])
+            } else {
+                // todo
+            }
         }
     }
 
@@ -149,11 +131,10 @@ class AmCharts extends Base {
     create(data) {
         let me = this;
 
-        if (!me.scriptsLoaded) {
-            me.chartsToCreate.push(data)
+        if (!me.isReady) {
+            return me.cacheMethodCall({fn: 'create', data})
         } else {
             // todo: check if globalThis[data.package] exists, if not load it and call create afterwards
-
             am4core.useTheme(am4themes_dark);
 
             me.charts[data.id] = am4core.createFromConfig(data.config, data.id, globalThis[data.package][data.type || 'XYChart']);
@@ -181,8 +162,14 @@ class AmCharts extends Base {
      * @param {String} data.id
      */
     destroy(data) {
-        this.charts[data.id]?.dispose?.();
-        delete this.charts[data.id]
+        let me = this;
+
+        if (!me.isReady) {
+            return me.cacheMethodCall({fn: 'destroy', data})
+        } else {
+            me.charts[data.id]?.dispose?.();
+            delete me.charts[data.id]
+        }
     }
 
     /**
@@ -197,11 +184,14 @@ class AmCharts extends Base {
      * Async approach
      * core.js has to arrive first or the other scripts will cause JS errors since they rely on it
      * => fetching the other files after core.js is loaded
+     * @param {Boolean} useFallback=false
      */
-    insertAmChartsScripts(useFallback=false) {
+    loadFiles(useFallback=false) {
         let me       = this,
             basePath = useFallback ? me.fallbackPath : me.downloadPath;
 
+        me.isLoading = true;
+
         DomAccess.loadScript(basePath + 'core.js').then(() => {
             Promise.all([
                 DomAccess.loadScript(basePath + 'charts.js'),
@@ -209,11 +199,12 @@ class AmCharts extends Base {
                 DomAccess.loadScript(basePath + 'themes/dark.js'),
                 DomAccess.loadScript(basePath + 'geodata/worldLow.js')
             ]).then(() => {
-                me.scriptsLoaded = true
-            });
+                me.isLoading = false;
+                me.isReady   = true
+            })
         }).catch(e => {
             console.log('Download from amcharts.com failed, switching to fallback', e);
-            me.insertAmChartsScripts(true)
+            me.loadFiles(true)
         })
     }
 
@@ -223,13 +214,19 @@ class AmCharts extends Base {
      * @param {Object} data.properties
      */
     setProperties(data) {
-        Object.entries(data.properties).forEach(([key, value]) => {
-            this.setProperty({
-                id   : data.id,
-                path : key,
-                value
+        let me = this;
+
+        if (!me.isReady) {
+            return me.cacheMethodCall({fn: 'setProperties', data})
+        } else {
+            Object.entries(data.properties).forEach(([key, value]) => {
+                me.setProperty({
+                    id   : data.id,
+                    path : key,
+                    value
+                })
             })
-        })
+        }
     }
 
     /**
@@ -240,15 +237,21 @@ class AmCharts extends Base {
      * @param {*} data.value
      */
     setProperty(data) {
-        if (this.hasChart(data.id)) {
-            let chart        = this.charts[data.id],
-                pathArray    = data.path.split('.'),
-                propertyName = pathArray.pop(),
-                scope        = Neo.ns(pathArray.join('.'), false, chart);
+        let me = this;
 
-            scope[propertyName] = data.isColor ? am4core.color(data.value) : data.value
+        if (!me.isReady) {
+            return me.cacheMethodCall({fn: 'setProperty', data})
         } else {
-            // todo
+            if (this.hasChart(data.id)) {
+                let chart        = this.charts[data.id],
+                    pathArray    = data.path.split('.'),
+                    propertyName = pathArray.pop(),
+                    scope        = Neo.ns(pathArray.join('.'), false, chart);
+
+                scope[propertyName] = data.isColor ? am4core.color(data.value) : data.value
+            } else {
+                // todo
+            }
         }
     }
 
@@ -261,10 +264,12 @@ class AmCharts extends Base {
     updateData(data) {
         let me = this;
 
-        if (!me.scriptsLoaded || !me.hasChart(data.id)) {
+        if (!me.isReady) {
+            return me.cacheMethodCall({fn: 'updateData', data})
+        } else if (!me.hasChart(data.id)) {
             me.dataMap[data.id] = data
         } else {
-            const chart = me.charts[data.id];
+            let chart = me.charts[data.id];
 
             if (data.dataPath === '') {
                 chart.data = data.data

package/src/main/addon/Base.mjs

@@ -17,7 +17,94 @@ class Base extends CoreBase {
          * @member {Boolean} isMainThreadAddon=true
          * @protected
          */
-        isMainThreadAddon: true
+        isMainThreadAddon: true,
+        /**
+         * Will get set to true once all addon related files got loaded (if there is a need to load)
+         * @member {Boolean} isReady_=false
+         * @protected
+         */
+        isReady_: false,
+        /**
+         * Amount in ms to delay the loading of library files, unless remote method access happens
+         * Change the value to false in case you don't want an automated preloading
+         * @member {Boolean|Number} preloadFilesDelay=5000
+         * @protected
+         */
+        preloadFilesDelay: 5000,
+    }
+
+    /**
+     * @member {Object[]} cache=[]
+     */
+    cache = []
+    /**
+     * Will get set to true once we start loading Monaco related files
+     * @member {Boolean} isLoading=false
+     */
+    isLoading = false
+    /**
+     * Internal flag to store the setTimeout() id for loading external files
+     * @member {Number|null} loadingTimeoutId=null
+     */
+    loadingTimeoutId = null
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        if (me.loadFiles) {
+            if (me.preloadFilesDelay === 0) {
+                me.loadFiles()
+            } else if (Neo.isNumber(me.preloadFilesDelay)) {
+                me.loadingTimeoutId = setTimeout(() => {
+                    me.loadFiles()
+                }, me.preloadFilesDelay)
+            }
+        }
+    }
+
+    /**
+     * Triggered after the isReady config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetIsReady(value, oldValue) {
+        if (value) {
+            let me = this,
+                returnValue;
+
+            me.cache.forEach(item => {
+                returnValue = me[item.fn](item.data);
+                item.resolve(returnValue)
+            });
+
+            me.cache = []
+        }
+    }
+
+    /**
+     * Internally caches call when isReady===false
+     * Loads the library files in case this is not already happening
+     * @param item
+     * @returns {Promise<unknown>}
+     */
+    cacheMethodCall(item) {
+        let me = this;
+
+        if (!me.isLoading) {
+            me.loadingTimeoutId && clearTimeout(me.loadingTimeoutId);
+            me.loadingTimeoutId = null;
+            me.loadFiles()
+        }
+
+        return new Promise((resolve, reject) => {
+            me.cache.push({...item, resolve})
+        })
     }
 }
 

package/src/main/addon/HighlightJS.mjs

@@ -23,11 +23,6 @@ class HighlightJS extends Base {
          * @protected
          */
         highlightJsLineNumbersPath: Neo.config.basePath + 'node_modules/highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js',
-        /**
-         * @member {Boolean} libraryLoaded_=true
-         * @protected
-         */
-        libraryLoaded_: false,
         /**
          * Remote method access for other workers
          * @member {Object} remote
@@ -36,7 +31,7 @@ class HighlightJS extends Base {
         remote: {
             app: [
                 'highlightAuto',
-                'loadLibrary',
+                'loadFiles',
                 'scrollIntoView',
                 'syntaxHighlight',
                 'switchTheme',
@@ -51,43 +46,6 @@ class HighlightJS extends Base {
         themePath: './resources/highlightjs-custom-github-theme.css'
     }
 
-    /**
-     * @member {Object[]} cache=[]
-     * @protected
-     */
-    cache = []
-
-    /**
-     * Triggered after the libraryLoaded config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @protected
-     */
-    afterSetLibraryLoaded(value, oldValue) {
-        if (value) {
-            let me = this,
-                returnValue;
-
-            me.cache.forEach(item => {
-                returnValue = me[item.fn](item.data);
-                item.resolve(returnValue)
-            });
-
-            me.cache = []
-        }
-    }
-
-    /**
-     * Internally caches call when the hljs namespace does not exist yet
-     * @param item
-     * @returns {Promise<unknown>}
-     */
-    cacheMethodCall(item) {
-        return new Promise((resolve, reject) => {
-            this.cache.push({...item, resolve})
-        })
-    }
-
     /**
      * See: https://highlightjs.readthedocs.io/en/latest/api.html#highlightauto
      * @param {Object} data
@@ -95,31 +53,42 @@ class HighlightJS extends Base {
      * @returns {Object} of the form {language, relevance, value, secondBest}
      */
     highlightAuto(data) {
-        if (window.hljs) {
-            return hljs.highlightAuto(data.html)
-        } else {
+        if (!this.isReady) {
             return this.cacheMethodCall({fn: 'highlightAuto', data})
         }
+
+        return hljs.highlightAuto(data.html)
     }
 
     /**
      * @param {Object} data
      * @returns {Boolean}
      */
-    async loadLibrary(data) {
-        delete data.appName;
-
+    async loadFiles(data) {
         let me = this;
 
-        me.set(data);
+        if (me.isLoading || me.isReady) {
+            return true
+        }
+
+        me.isLoading = true;
+
+        if (data) {
+            delete data.appName;
+            delete data.windowId;
+
+            me.set(data);
+        }
 
-        await DomAccess.loadScript(me.highlightJsPath).then(() => {
-            DomAccess.addScript({src: me.highlightJsLineNumbersPath})
-        });
+        await DomAccess.loadScript(me.highlightJsPath);
 
-        Neo.main.addon.Stylesheet.createStyleSheet(null, 'hljs-theme', me.themePath);
+        await Promise.all([
+            DomAccess.loadScript(me.highlightJsLineNumbersPath),
+            Neo.main.addon.Stylesheet.createStyleSheet(null, 'hljs-theme', me.themePath)
+        ]);
 
-        this.libraryLoaded = true;
+        me.isLoading = false;
+        me.isReady   = true;
 
         return true
     }
@@ -131,6 +100,10 @@ class HighlightJS extends Base {
      * @protected
      */
     scrollIntoView(data) {
+        if (!this.isReady) {
+            return this.cacheMethodCall({fn: 'scrollIntoView', data})
+        }
+
         let parentEl = DomAccess.getElement(data.vnodeId),
             el       = parentEl.querySelector('[data-list-header="' + data.text + '"]');
 
@@ -162,28 +135,28 @@ class HighlightJS extends Base {
      * @param {String} data.vnodeId
      */
     syntaxHighlight(data) {
-        if (window.hljs) {
-            let node = document.getElementById(data.vnodeId);
-
-            if (node) {
-                hljs.highlightBlock(node);
-                hljs.lineNumbersBlock(node)
-            }
-        } else {
+        if (!this.isReady) {
             return this.cacheMethodCall({fn: 'syntaxHighlight', data})
         }
+
+        let node = document.getElementById(data.vnodeId);
+
+        if (node) {
+            hljs.highlightBlock(node);
+            hljs.lineNumbersBlock(node)
+        }
     }
 
     /**
      * @param {Object} data
      */
     syntaxHighlightInit(data) {
-        if (window.hljs) {
-            let blocks = document.querySelectorAll('pre code:not(.hljs)');
-            Array.prototype.forEach.call(blocks, hljs.highlightBlock)
-        } else {
+        if (!this.isReady) {
             return this.cacheMethodCall({fn: 'syntaxHighlightInit', data})
         }
+
+        let blocks = document.querySelectorAll('pre code:not(.hljs)');
+        Array.prototype.forEach.call(blocks, hljs.highlightBlock)
     }
 
     /**
@@ -193,7 +166,7 @@ class HighlightJS extends Base {
      * @param {Number} data.removeLine
      */
     syntaxHighlightLine(data) {
-        if (!window.hljs) {
+        if (!this.isReady) {
             return this.cacheMethodCall({fn: 'syntaxHighlightLine', data})
         }
 

package/src/main/addon/MonacoEditor.mjs

@@ -39,25 +39,12 @@ class MonacoEditor extends Base {
         }
     }
 
-    /**
-     * Will get set to true once all Monaco related files got loaded
-     * @member {Boolean} isReady=false
-     */
-    isReady = false
     /**
      * Stores component DOM ids as keys and editor instances as values
      * @member {Object} map={}
      */
     map = {}
 
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-        this.loadFiles()
-    }
-
     /**
      * For a complete list of options see:
      * https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOptions.html
@@ -68,12 +55,16 @@ class MonacoEditor extends Base {
             {id} = data,
             editor;
 
-        delete data.appName;
-        delete data.id;
+        if (!me.isReady) {
+            return me.cacheMethodCall({fn: 'createInstance', data})
+        } else {
+            delete data.appName;
+            delete data.id;
 
-        editor = me.map[id] = monaco.editor.create(DomAccess.getElement(id), data);
+            editor = me.map[id] = monaco.editor.create(DomAccess.getElement(id), data);
 
-        editor.getModel().onDidChangeContent(me.onContentChange.bind(me, id))
+            editor.getModel().onDidChangeContent(me.onContentChange.bind(me, id))
+        }
     }
 
     /**
@@ -81,8 +72,14 @@ class MonacoEditor extends Base {
      * @param {String} data.id
      */
     destroyInstance(data) {
-        // todo: destroy the editor instance if possible
-        delete this.map[data.id]
+        let me = this;
+
+        if (!me.isReady) {
+            return me.cacheMethodCall({fn: 'destroyInstance', data})
+        } else {
+            // todo: destroy the editor instance if possible
+            delete this.map[data.id]
+        }
     }
 
     /**
@@ -91,7 +88,13 @@ class MonacoEditor extends Base {
      * @returns {Object}
      */
     getValue(data) {
-        return this.map[data.id].getModel().getValue()
+        let me = this;
+
+        if (!me.isReady) {
+            return me.cacheMethodCall({fn: 'getValue', data})
+        } else {
+            return me.map[data.id].getModel().getValue()
+        }
     }
 
     /**
@@ -100,23 +103,29 @@ class MonacoEditor extends Base {
      * @param {String} data.id
      */
     layoutEditor(data) {
-        this.map[data.id].layout()
+        this.isReady && this.map[data.id].layout()
     }
 
     /**
      *
      */
     async loadFiles() {
-        let path = this.libraryBasePath;
+        let me   = this,
+            path = me.libraryBasePath;
+
+        me.isLoading = true;
 
         window.require = {paths: {vs: path}};
 
-        await DomAccess.loadStylesheet(path + '/editor/editor.main.css', {name: 'vs/editor/editor.main'});
-        await DomAccess.loadScript(path + '/loader.js');
-        await DomAccess.loadScript(path + '/editor/editor.main.nls.js');
-        await DomAccess.loadScript(path + '/editor/editor.main.js');
+        await Promise.all([
+            DomAccess.loadStylesheet(path + '/editor/editor.main.css', {name: 'vs/editor/editor.main'}),
+            DomAccess.loadScript(path + '/loader.js'),
+            DomAccess.loadScript(path + '/editor/editor.main.nls.js'),
+            DomAccess.loadScript(path + '/editor/editor.main.js')
+        ])
 
-        this.isReady = true
+        me.isLoading = false;
+        me.isReady   = true
     }
 
     /**
@@ -143,7 +152,13 @@ class MonacoEditor extends Base {
      * @param {String} data.value
      */
     setLanguage(data) {
-        this.map[data.id].getModel().setLanguage(data.value)
+        let me = this;
+
+        if (!me.isReady) {
+            return me.cacheMethodCall({fn: 'setLanguage', data})
+        } else {
+            me.map[data.id].getModel().setLanguage(data.value)
+        }
     }
 
     /**
@@ -152,7 +167,13 @@ class MonacoEditor extends Base {
      * @param {String} data.value
      */
     setTheme(data) {
-        this.map[data.id]._themeService.setTheme(data.value)
+        let me = this;
+
+        if (!me.isReady) {
+            return me.cacheMethodCall({fn: 'setTheme', data})
+        } else {
+            me.map[data.id]._themeService.setTheme(data.value)
+        }
     }
 
     /**
@@ -161,7 +182,13 @@ class MonacoEditor extends Base {
      * @param {String} data.value
      */
     setValue(data) {
-        this.map[data.id].getModel().setValue(data.value)
+        let me = this;
+
+        if (!me.isReady) {
+            return me.cacheMethodCall({fn: 'setValue', data})
+        } else {
+            me.map[data.id].getModel().setValue(data.value)
+        }
     }
 
     /**
@@ -170,7 +197,13 @@ class MonacoEditor extends Base {
      * @param {Object} data.options
      */
     updateOptions(data) {
-        this.map[data.id].updateOptions(data.options)
+        let me = this;
+
+        if (!me.isReady) {
+            return me.cacheMethodCall({fn: 'updateOptions', data})
+        } else {
+            me.map[data.id].updateOptions(data.options)
+        }
     }
 }
 

package/src/worker/Manager.mjs

@@ -231,6 +231,9 @@ class Manager extends Base {
         NeoConfig.hasMouseEvents = matchMedia('(pointer:fine)').matches;
         NeoConfig.hasTouchEvents = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
 
+        // Useful for styling
+        !NeoConfig.hasMouseEvents && document.body.classList.add('neo-no-mouse');
+
         if (window.Worker) {
             me.webWorkersEnabled = true
         } else {