pome-ui 2.0.0-preview46 → 2.0.0-preview48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pome-ui",
-  "version": "2.0.0-preview46",
+  "version": "2.0.0-preview48",
   "description": "Front-end MVC library",
   "main": "pome-ui.js",
   "bin": {

package/pome-ui.dev.js

@@ -18123,6 +18123,7 @@ function build(options, exports) {
     var _options = {
         resolveModulesParallelly: true,
         removeStyleWhenUnmount: false,
+        preloadCss: true,
         mobile: function () {
             return false;
         },
@@ -18177,6 +18178,15 @@ function build(options, exports) {
 
     var _css = {};
 
+    var _cssCloakInjected = false;
+    function _ensureCssCloakStyle() {
+        if (_cssCloakInjected) return;
+        _cssCloakInjected = true;
+        var style = document.createElement('style');
+        style.textContent = '._pome-css-cloak{visibility:hidden!important}';
+        document.head.appendChild(style);
+    }
+
     function _httpCached(url) {
         return !!_cache[url];
     }
@@ -18476,7 +18486,16 @@ function build(options, exports) {
                     var components = component.components || [];
                     var directives = component.directives || [];
                     var _ret;
-                    return _loadComponents(components, url).then(function (components) {
+
+                    // Preload page's own CSS before mount
+                    var pageCssPromise = Promise.resolve();
+                    var viewName = url + (mobile ? '.m' : '');
+                    if (_options.preloadCss && component.style) {
+                        pageCssPromise = appendCssReferenceAsync(viewName, component.style);
+                    }
+
+                    return Promise.all([pageCssPromise, _loadComponents(components, url)]).then(function (results) {
+                        var components = results[1];
                         var ret = Vue.createApp(component);
 
                         for (var i = 0; i < components.length; ++i) {
@@ -19070,6 +19089,71 @@ function build(options, exports) {
         } catch (ex) { }
     }
 
+    function internalAppendCssReferenceAsync(viewName, href) {
+        if (document.querySelectorAll('link[data-style="' + viewName + '"][href="' + href + '"]').length) {
+            return Promise.resolve();
+        }
+
+        return new Promise(function (resolve) {
+            var link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.type = 'text/' + getStyleSheetType(href);
+            link.setAttribute('data-style', viewName);
+            function onReady() {
+                requestAnimationFrame(function () {
+                    resolve();
+                });
+            }
+            link.onload = onReady;
+            link.onerror = onReady;
+            link.href = href;
+            try {
+                document.querySelector('head').appendChild(link);
+            } catch (ex) {
+                resolve();
+            }
+        });
+    }
+
+    function appendCssReferenceAsync(view, style) {
+        var promises = [];
+        if (typeof style == 'boolean') {
+            var href = view + '.css';
+            if (_options.version) {
+                href += '?v=' + _options.version;
+            }
+            promises.push(internalAppendCssReferenceAsync(view, href));
+        } else if (typeof style == 'string') {
+            var href = parseMacroPath(view, style);
+            href = resolveRelativePath(href, getContainingFolder(view));
+            if (_options.version) {
+                if (href.indexOf('>') < 0) {
+                    href += '?v=' + _options.version;
+                } else {
+                    href += '&v=' + _options.version;
+                }
+            }
+            promises.push(internalAppendCssReferenceAsync(view, href));
+        } else if (style instanceof Array) {
+            for (var i = 0; i < style.length; ++i) {
+                if (typeof style[i] != 'string') {
+                    continue;
+                }
+                var href = parseMacroPath(view, style[i]);
+                href = resolveRelativePath(href, getContainingFolder(view));
+                if (_options.version) {
+                    if (href.indexOf('>') < 0) {
+                        href += '?v=' + _options.version;
+                    } else {
+                        href += '&v=' + _options.version;
+                    }
+                }
+                promises.push(internalAppendCssReferenceAsync(view, href));
+            }
+        }
+        return Promise.all(promises);
+    }
+
     function getStyleSheetType(styleSheetUrl) {
         var questionMarkIndex = styleSheetUrl.lastIndexOf('?');
         if (questionMarkIndex >= 0) {
@@ -19121,7 +19205,11 @@ function build(options, exports) {
                     _css[view] = 0;
                 }
                 if (_css[view] == 0) {
-                    appendCssReference(view, options.style);
+                    if (_options.preloadCss) {
+                        this._cssLoadPromise = appendCssReferenceAsync(view, options.style);
+                    } else {
+                        appendCssReference(view, options.style);
+                    }
                 }
                 ++_css[view];
                 this.createdPromise = Promise.resolve();
@@ -19136,16 +19224,30 @@ function build(options, exports) {
 
         var originalMounted = options.mounted;
         options.mounted = function () {
+            // CSS cloak: hide element until CSS is fully loaded
+            if (_options.preloadCss && this._cssLoadPromise) {
+                _ensureCssCloakStyle();
+                var el = this.$el;
+                if (el && el.nodeType === 1) {
+                    el.classList.add('_pome-css-cloak');
+                    this._cssLoadPromise.then(function () {
+                        el.classList.remove('_pome-css-cloak');
+                    });
+                }
+            }
+
             // Remove opening class if needed
             if (options.delayOpen) {
                 var self = this;
                 (self.createdPromise || Promise.resolve()).then(function () {
-                    setTimeout(function () {
-                        var doms = self.$el.parentNode.querySelectorAll('._pome-ui-opening');
-                        for (var i = 0; i < doms.length; ++i) {
-                            doms[i].classList.remove('_pome-ui-opening');
-                        }
-                    }, 1);
+                    requestAnimationFrame(function () {
+                        requestAnimationFrame(function () {
+                            var doms = self.$el.parentNode.querySelectorAll('._pome-ui-opening');
+                            for (var i = 0; i < doms.length; ++i) {
+                                doms[i].classList.remove('_pome-ui-opening');
+                            }
+                        });
+                    });
 
                     setTimeout(function () {
                         var doms = self.$el.parentNode.querySelectorAll('._pome-ui-opened');
@@ -19460,7 +19562,11 @@ function build(options, exports) {
                 _hookSetup(_opt);
                 _patchComponent(c, _opt);
                 _hookData(_opt);
-                return _resolveModules(_opt.modules, c);
+                var cssPreloadPromise = Promise.resolve();
+                if (_options.preloadCss && _opt.style) {
+                    cssPreloadPromise = appendCssReferenceAsync(c, _opt.style);
+                }
+                return Promise.all([cssPreloadPromise, _resolveModules(_opt.modules, c)]);
             }).then(function () {
                 // Recursively load sub-components for this component
                 var subComponentRefs = _opt.components || [];