pome-ui 2.0.0-preview51 → 2.0.0-preview53

package/package.json

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

package/pome-skeleton.css

@@ -119,3 +119,18 @@
     background-size: 400% 100%;
     animation: _pome-sk-shimmer 1.4s ease infinite;
 }
+
+/* Layout skeleton overlay – covers viewport while Layout created() resolves.
+ * The real layout content (including <render-body> container) stays in the DOM
+ * behind this overlay so that container.open() can mount the page immediately.
+ */
+._pome-layout-skeleton {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    background: #fff;
+    overflow: hidden;
+}

package/pome-ui.dev.js

@@ -18201,6 +18201,37 @@ function build(options, exports) {
         // This function is kept as a hook point for future use.
     }
 
+    // Registry: kebab-name → pre-rendered skeleton HTML string
+    var _componentSkeletonRegistry = {};
+
+    function _toKebabCase(name) {
+        // ScalableSidebar → scalable-sidebar, menuBar → menu-bar
+        return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+    }
+
+    function _registerComponentSkeleton(name, opt, rawHtml, skeletonFileHtml) {
+        // skeletonFileHtml: content of <component>.skeleton.html (takes top priority)
+        // opt.skeleton === string: inline HTML declared in the JS
+        // opt.skeleton === true: auto-generate from rawHtml
+        var hasFile    = !!skeletonFileHtml;
+        var hasInline  = opt && typeof opt.skeleton === 'string';
+        var hasAuto    = opt && opt.skeleton === true;
+        if (!hasFile && !hasInline && !hasAuto) return;
+        var kebab = _toKebabCase(name);
+        var skHtml = hasFile   ? skeletonFileHtml
+                   : hasInline ? opt.skeleton
+                   : _generateSkeletonHtml(rawHtml || (opt && opt.template) || '');
+        _componentSkeletonRegistry[kebab] = skHtml;
+    }
+
+    // --- Extract a plain numeric value from a bound attribute like :default-width="230" ---
+    function _extractBoundNumber(el, attr) {
+        var val = el.getAttribute(':' + attr);
+        if (!val) return null;
+        var m = val.match(/^(\d+(?:\.\d+)?)/);
+        return m ? m[1] : null;
+    }
+
     // --- Known HTML tags for skeleton (custom components will be unwrapped) ---
     var _knownHtmlTags = null;
     function _isKnownHtmlTag(tag) {
@@ -18304,9 +18335,57 @@ function build(options, exports) {
 
             // 4. Replace custom/unknown elements with <div>, keep children
             if (!_isKnownHtmlTag(tag)) {
+                // Check if this component has declared its own skeleton
+                var registeredSkeleton = _componentSkeletonRegistry[tag];
+                if (registeredSkeleton) {
+                    // Parse the registered skeleton HTML and replace the element with it
+                    var skWrap = doc.createElement('div');
+                    skWrap.innerHTML = registeredSkeleton;
+                    if (child.getAttribute('class')) skWrap.setAttribute('class', child.getAttribute('class'));
+                    var existingStyleReg = child.getAttribute('style') || '';
+                    var styleExtraReg = '';
+                    var defWReg = _extractBoundNumber(child, 'default-width') || child.getAttribute('default-width');
+                    var minWReg = _extractBoundNumber(child, 'min-width') || child.getAttribute('min-width');
+                    if (defWReg) styleExtraReg += ';width:' + defWReg + 'px;flex-shrink:0';
+                    if (minWReg) styleExtraReg += ';min-width:' + minWReg + 'px';
+                    var combinedStyleReg = (existingStyleReg + styleExtraReg).replace(/^;+/, '');
+                    if (combinedStyleReg) skWrap.setAttribute('style', combinedStyleReg);
+                    // Replace the custom element with a wrapper containing the skeleton.
+                    // Use a fragment-like approach: move skWrap's children directly
+                    // so we don't add an extra div when the registered HTML already has one.
+                    var skNodes = Array.from(skWrap.childNodes);
+                    if (skNodes.length === 1 && skNodes[0].nodeType === 1) {
+                        var skRoot = skNodes[0];
+                        // Merge class / style from host element onto the single root node
+                        if (child.getAttribute('class')) skRoot.classList && skRoot.setAttribute('class', (skRoot.getAttribute('class') || '') + ' ' + child.getAttribute('class'));
+                        if (combinedStyleReg) skRoot.setAttribute('style', (skRoot.getAttribute('style') ? skRoot.getAttribute('style') + ';' : '') + combinedStyleReg);
+                        node.replaceChild(skRoot, child);
+                        i++;
+                    } else {
+                        while (skWrap.firstChild) node.insertBefore(skWrap.firstChild, child);
+                        node.removeChild(child);
+                        // i stays the same since we removed child and inserted nodes before it
+                    }
+                    continue;
+                }
+
                 var div = doc.createElement('div');
                 if (child.getAttribute('class')) div.setAttribute('class', child.getAttribute('class'));
-                if (child.getAttribute('style')) div.setAttribute('style', child.getAttribute('style'));
+
+                // Reconstruct inline style, preserving explicit style + any bound sizing attrs
+                var existingStyle = child.getAttribute('style') || '';
+                var styleExtra = '';
+                // :default-width / default-width → width + flex-shrink:0 so sidebar-like
+                // components keep their width in the skeleton
+                var defW = _extractBoundNumber(child, 'default-width') || child.getAttribute('default-width');
+                var minW = _extractBoundNumber(child, 'min-width') || child.getAttribute('min-width');
+                var maxW = _extractBoundNumber(child, 'max-width') || child.getAttribute('max-width');
+                if (defW) styleExtra += ';width:' + defW + 'px;flex-shrink:0';
+                if (minW) styleExtra += ';min-width:' + minW + 'px';
+                if (maxW) styleExtra += ';max-width:' + maxW + 'px';
+                var combinedStyle = (existingStyle + styleExtra).replace(/^;+/, '');
+                if (combinedStyle) div.setAttribute('style', combinedStyle);
+
                 while (child.firstChild) div.appendChild(child.firstChild);
                 node.replaceChild(div, child);
                 _skeletonStructurePass(div, doc); // recurse into replacement
@@ -18427,6 +18506,24 @@ function build(options, exports) {
             });
     };
 
+    // Fetch a .skeleton.html file, returning null when the file does not
+    // physically exist. Unlike _httpGet, this guards against SPA catch-all
+    // routes that return the app entry page (status 200) for any URL:
+    // if the response body starts with "<!DOCTYPE" or "<html" it is treated
+    // as a missing file and null is returned.
+    function _httpGetSkeletonFile(url) {
+        return _httpGet(url).then(function (text) {
+            if (!text) return null;
+            var trimmed = text.replace(/^[\s\uFEFF]+/, ''); // strip BOM / whitespace
+            if (/^<!DOCTYPE/i.test(trimmed) || /^<html/i.test(trimmed)) {
+                return null; // SPA fallback page, not a real skeleton file
+            }
+            return text;
+        }).catch(function () {
+            return null;
+        });
+    };
+
     function _serializeOptionsToUrl(options) {
         var fields = Object.getOwnPropertyNames(options);
         var str = '';
@@ -18647,19 +18744,27 @@ function build(options, exports) {
                 });
             })
             .then(function (component) {
-                var promise = null;
+                var htmlPromise;
                 if (mobile) {
-                    promise = _httpExist(url + '.m.html').then(function (res) {
+                    htmlPromise = _httpExist(url + '.m.html').then(function (res) {
                         return _httpGet(url + (res ? '.m.html' : '.html'));
                     });
                 } else {
-                    promise = _httpGet(url + '.html');
+                    htmlPromise = _httpGet(url + '.html');
                 }
+                // Load .skeleton.html in parallel; null if not found
+                var skeletonFilePromise = _httpGetSkeletonFile(url + '.skeleton.html');
 
-                return promise.then(function (template) {
+                return Promise.all([htmlPromise, skeletonFilePromise]).then(function (results) {
+                    var template = results[0];
+                    var skeletonFileHtml = results[1];
                     if (!component.template) {
                         component.template = _sanitizeTemplate(template);
                     }
+                    // .skeleton.html file takes top priority over skeleton: true / inline string
+                    if (skeletonFileHtml && component.skeleton) {
+                        component.skeleton = skeletonFileHtml;
+                    }
                     if (component.delayOpen) {
                         var dom = new DOMParser().parseFromString(component.template, 'text/html');
                         var children = dom.querySelector('body').children;
@@ -18684,7 +18789,8 @@ function build(options, exports) {
                         component.template = ret;
                     }
                     _patchComponent(url, component);
-                    _wrapTemplateWithSkeleton(component);
+                    // _wrapTemplateWithSkeleton is deferred to after _loadComponents
+                    // so the component skeleton registry is fully populated.
                     return Promise.resolve(component);
                 });
             })
@@ -18718,6 +18824,8 @@ function build(options, exports) {
 
                     return Promise.all([pageCssPromise, _loadComponents(components, url)]).then(function (results) {
                         var components = results[1];
+                        // Wrap skeleton template now that component registry is fully populated.
+                        _wrapTemplateWithSkeleton(component);
                         var ret = Vue.createApp(component);
 
                         for (var i = 0; i < components.length; ++i) {
@@ -18947,6 +19055,48 @@ function build(options, exports) {
 
             return _loadComponents(options.components || [], layout)
                 .then(function (components) {
+                    // Inject layout skeleton overlay now that component registry is populated.
+                    if (options._pomeLayoutSkeleton) {
+                        var ls = options._pomeLayoutSkeleton;
+                        var skHtml = ls.skeletonOverride
+                            ? ls.skeletonOverride
+                            : (function () {
+                                var html = _generateSkeletonHtml(ls.skeletonBody);
+                                // Post-process: remove empty top-level nodes (modals etc.),
+                                // set flex:1 on the main content area next to the sidebar.
+                                var tmp = document.createElement('div');
+                                tmp.innerHTML = html;
+                                var topChildren = Array.from(tmp.children);
+                                var sidebarIdx = -1;
+                                for (var ci = 0; ci < topChildren.length; ci++) {
+                                    var ch = topChildren[ci];
+                                    if (!ch.innerHTML.trim()) {
+                                        tmp.removeChild(ch);
+                                        topChildren = Array.from(tmp.children);
+                                        ci--;
+                                        continue;
+                                    }
+                                    if (sidebarIdx < 0 && /\bwidth\s*:/.test(ch.getAttribute('style') || '')) {
+                                        sidebarIdx = ci;
+                                    } else if (sidebarIdx >= 0 && ci === sidebarIdx + 1) {
+                                        ch.style.flex = '1';
+                                        ch.style.minWidth = '0';
+                                        ch.style.overflow = 'hidden';
+                                    }
+                                }
+                                return tmp.innerHTML;
+                            })();
+                        var appEl = document.querySelector(ls.appId);
+                        if (appEl) {
+                            var skDiv = document.createElement('div');
+                            skDiv.setAttribute('v-if', 'pomeSkeletonLoading');
+                            skDiv.className = '_pome-skeleton _pome-layout-skeleton ' + ls.bodyClass;
+                            if (ls.overlayStyle) skDiv.setAttribute('style', ls.overlayStyle);
+                            skDiv.innerHTML = skHtml;
+                            appEl.insertBefore(skDiv, appEl.firstChild);
+                        }
+                        delete options._pomeLayoutSkeleton;
+                    }
                     var app = Vue.createApp(options || {});
                     for (var i = 0; i < components.length; ++i) {
                         var com = components[i];
@@ -19448,27 +19598,59 @@ function build(options, exports) {
                     this.createdPromise = ret;
                     if (options.skeleton) {
                         var self = this;
-                        // For skeleton + delayOpen: start the delayOpen animation
-                        // IMMEDIATELY so the skeleton fades in right away.
-                        if (options.delayOpen) {
-                            self.$nextTick(function () {
-                                requestAnimationFrame(function () {
+                        var skeletonShowing = false;
+                        var resolved = false;
+                        // Only activate the skeleton if the promise is still pending
+                        // after skeletonDelay ms.  If it resolves faster, skip the
+                        // skeleton entirely to avoid a flash.
+                        var skeletonDelay = typeof options.skeletonDelay === 'number'
+                            ? options.skeletonDelay : 1000;
+                        var skeletonTimer = setTimeout(function () {
+                            if (resolved) return;
+                            skeletonShowing = true;
+                            self.pomeSkeletonLoading = true;
+                            // Skeleton is now visible. If delayOpen is also set, kick
+                            // off its animation so it's primed when skeleton disappears.
+                            if (options.delayOpen) {
+                                self.$nextTick(function () {
                                     requestAnimationFrame(function () {
-                                        self.pomeDelayOpening = false;
+                                        requestAnimationFrame(function () {
+                                            self.pomeDelayOpening = false;
+                                        });
                                     });
+                                    setTimeout(function () {
+                                        self.pomeDelayOpened = false;
+                                    }, options.delayOpen);
                                 });
-                                setTimeout(function () {
-                                    self.pomeDelayOpened = false;
-                                }, options.delayOpen);
-                            });
-                        }
+                            }
+                        }, skeletonDelay);
                         ret.then(function () {
+                            resolved = true;
+                            clearTimeout(skeletonTimer);
                             self.pomeSkeletonLoading = false;
+                            // Fast path: resolved before skeleton appeared – still need
+                            // to run the delayOpen animation now.
+                            if (!skeletonShowing && options.delayOpen) {
+                                self.$nextTick(function () {
+                                    requestAnimationFrame(function () {
+                                        requestAnimationFrame(function () {
+                                            self.pomeDelayOpening = false;
+                                        });
+                                    });
+                                    setTimeout(function () {
+                                        self.pomeDelayOpened = false;
+                                    }, options.delayOpen);
+                                });
+                            }
                         }).catch(function (err) {
+                            resolved = true;
+                            clearTimeout(skeletonTimer);
+                            self.pomeSkeletonLoading = false;
                             console.error('[SKELETON] created Promise REJECTED:', err);
                         });
                     }
                 } else if (options.skeleton) {
+                    // Sync created – nothing to wait for, ensure skeleton is off.
                     this.pomeSkeletonLoading = false;
                 }
 
@@ -19608,9 +19790,17 @@ function build(options, exports) {
             if (layout) {
                 var layoutName = layout + (mobile ? '.m' : '');
                 var _layoutHtml;
-                return _httpGet(layoutName + '.html').then(function (layoutHtml) {
-                    _layoutHtml = layoutHtml;
-                    return _httpGet(layout + ".js");
+                var _layoutSkeletonFileHtml; // hoisted so LayoutNext closure can access it
+                // Load layout .html, .js and optional .skeleton.html all in parallel
+                return Promise.all([
+                    _httpGet(layoutName + '.html'),
+                    _httpGet(layout + '.js'),
+                    _httpGetSkeletonFile(layoutName + '.skeleton.html')
+                ]).then(function (layoutResults) {
+                    _layoutHtml = layoutResults[0];
+                    var js = layoutResults[1];
+                    _layoutSkeletonFileHtml = layoutResults[2]; // null when absent
+                    return js;
                 }).then(function (js) {
                     var _opt = null;
                     var Layout = function (options) {
@@ -19634,6 +19824,37 @@ function build(options, exports) {
                         var appId = 'pomelo-' + ticks;
                         var containerId = 'container-' + ticks;
                         var body = document.querySelector('body').innerHTML.replace('<render-body></render-body>', '<div id="' + containerId + '"></div>');
+                        // Layout skeleton: defer generation to Root→_loadComponents so the
+                        // component skeleton registry is fully populated before we generate HTML.
+                        if (options.skeleton) {
+                            _ensureSkeletonStyle();
+                            var bodyEl = document.querySelector('body');
+                            var bodyClass = bodyEl.getAttribute('class') || '';
+                            var bodyInlineStyle = bodyEl.getAttribute('style') || '';
+                            var bodyComputed = window.getComputedStyle(bodyEl);
+                            var overlayStyle = bodyInlineStyle;
+                            if (bodyComputed.display && bodyComputed.display.indexOf('flex') >= 0) {
+                                if (overlayStyle) overlayStyle += ';';
+                                overlayStyle += 'display:' + bodyComputed.display
+                                    + ';flex-direction:' + bodyComputed.flexDirection
+                                    + ';align-items:' + bodyComputed.alignItems;
+                            } else {
+                                if (overlayStyle) overlayStyle += ';';
+                                overlayStyle += 'display:flex;flex-direction:row;align-items:stretch';
+                            }
+                            var skeletonBody = body.replace('<div id="' + containerId + '"></div>', '<div style="flex:1;min-width:0"></div>');
+                            // Store pending data; Root will inject the overlay div after
+                            // _loadComponents so registered component skeletons are available.
+                            options._pomeLayoutSkeleton = {
+                                appId: '#' + appId,
+                                bodyClass: bodyClass,
+                                overlayStyle: overlayStyle,
+                                skeletonBody: skeletonBody,
+                                // Priority: .skeleton.html file > inline string in JS
+                                skeletonOverride: _layoutSkeletonFileHtml
+                                    || (typeof options.skeleton === 'string' ? options.skeleton : null)
+                            };
+                        }
                         _ensureVueCloakStyle();
                         document.querySelector('body').innerHTML = '<div id="' + appId + '" class="_pome-vue-cloak">' + body + '</div>';
                         options.template = null;
@@ -19807,10 +20028,15 @@ function build(options, exports) {
             var _html;
             var _name;
             var _opt;
-            return _httpGet(c + ".html").then(function (comHtml) {
-                _html = comHtml;
-                return _httpGet(c + ".js");
-            }).then(function (comJs) {
+            // Load .html, .js and optional .skeleton.html in parallel
+            return Promise.all([
+                _httpGet(c + '.html'),
+                _httpGet(c + '.js'),
+                _httpGetSkeletonFile(c + '.skeleton.html')
+            ]).then(function (results) {
+                _html = results[0];
+                var comJs = results[1];
+                var skeletonFileHtml = results[2]; // null when file does not exist
                 var Component = function (name, options) {
                     _opt = options;
                     _name = name;
@@ -19824,6 +20050,9 @@ function build(options, exports) {
                 }
                 _hookSetup(_opt);
                 _patchComponent(c, _opt);
+                // Register the component's skeleton BEFORE wrapping the template,
+                // so _generateSkeletonHtml still sees the clean original template.
+                _registerComponentSkeleton(_name, _opt, _opt.template, skeletonFileHtml);
                 _wrapTemplateWithSkeleton(_opt);
                 _hookData(_opt);
                 var cssPreloadPromise = Promise.resolve();
@@ -19933,7 +20162,9 @@ function build(options, exports) {
             var data = func1.call(this, app);
             var data2 = { pomeUiSubTitles: [] };
             if (opt.skeleton) {
-                data2.pomeSkeletonLoading = true;
+                // Start hidden; skeleton is only shown after skeletonDelay ms
+                // to avoid a flash when loading completes quickly.
+                data2.pomeSkeletonLoading = false;
             }
             if (opt.skeleton && opt.delayOpen) {
                 data2.pomeDelayOpened = true;