pinstripe 0.34.0 → 0.35.0

package/lib/component.js

@@ -54,6 +54,28 @@ export const Component = Class.extend().include({
         if(autofocus){
             this.setTimeout(() => this.node.focus());
         }
+
+        const { name } = this.constructor;
+
+        if(this.constructor.mixins[name]) return;
+
+        if(name.match(/^([a-z0-9]+|document-fragment)$/)) return;
+        
+        const { componentBase } = this.document;
+        if(!componentBase) return;
+
+        this.shadow.patch(`
+            <pinstripe-global-styles></pinstripe-global-styles>
+            <pinstripe-frame use-cache="true" load-on-init="false"></pinstripe-frame>
+        `);
+        const frame = this.shadow.find('pinstripe-frame');
+        
+        const url = new URL(`${componentBase}/${name}`, frame.url);
+        const { params } = this;
+        for(const [key, value] of Object.entries(params)){
+            url.searchParams.set(key, value);
+        }
+        frame.load(url);
     },
 
     get type(){
@@ -467,7 +489,7 @@ export const Component = Class.extend().include({
                     }))
                 }
                 const promises = [
-                    this.document.httpProxy.fetch(normalizedUrl, { signal: abortController.signal, ...otherOptions }), 
+                    fetch(normalizedUrl, { signal: abortController.signal, ...otherOptions }), 
                     new Promise((resolve, reject) => {
                         minimumDelayTimeout = setTimeout(resolve, minimumDelay);
                         rejectMinimumDelay = reject;
@@ -565,7 +587,7 @@ function createVirtualNode(html){
 function patch(attributes, virtualChildren){
     const isFrame = this.type == 'pinstripe-frame' || this.attributes['data-component'] == 'pinstripe-frame';
     const isEmptyFrame = isFrame && virtualChildren.length == 0;
-    if(isEmptyFrame && attributes['data-load-on-init'] === undefined){
+    if(isEmptyFrame && attributes['load-on-init'] === undefined && attributes['data-load-on-init'] === undefined){
         attributes['data-load-on-init'] = 'true';
     }
     patchAttributes.call(this, attributes);

package/lib/components/index.js

@@ -4,10 +4,12 @@ import './pinstripe_body.js';
 import './pinstripe_document.js';
 import './pinstripe_form.js';
 import './pinstripe_frame.js';
+import './pinstripe_global_styles.js';
 import './pinstripe_menu.js';
 import './pinstripe_modal.js';
 import './pinstripe_overlay.js';
 import './pinstripe_popover.js';
 import './pinstripe_progress_bar.js';
+import './pinstripe_redirect.js';
 import './pinstripe_script.js';
 import './pinstripe_skeleton.js';

package/lib/components/pinstripe_document.js

@@ -30,17 +30,6 @@ Component.register('pinstripe-document', {
 
     isDocument: true,
 
-    get httpProxy(){
-        if(!this._httpProxy){
-            this._httpProxy = {
-                fetch(...args){
-                    return fetch(...args);
-                }
-            };
-        }
-        return this._httpProxy;
-    },
-
     get head(){
         if(!this._head){
             this._head = this.find('head');
@@ -63,6 +52,21 @@ Component.register('pinstripe-document', {
         return this.head.find('meta[name="pinstripe-load-cache-namespace"]')?.params.content ?? 'default';
     },
 
+    get globalStyles(){
+        if(!this._globalStyles){
+            try {
+                this._globalStyles = mergeCssStylesheets(this.node.styleSheets ?? []);
+            } catch (e) {
+                this._globalStyles = undefined;
+            }
+        }
+        return this._globalStyles;
+    },
+
+    get componentBase(){
+        return this.head.find('meta[name="pinstripe-component-base"]')?.params.content;
+    },
+
     async load(url = this.url.toString(), options = {}){
         const { replace, method = 'GET' } = options;
         const previousUrl = this.url.toString();
@@ -90,3 +94,21 @@ Component.register('pinstripe-document', {
         delete preloading[url.toString()];
     }
 });
+
+
+export function mergeCssStylesheets(stylesheets, out = new CSSStyleSheet()) {
+    for(const sheet of stylesheets){
+        try {
+            for(const rule of sheet.cssRules) {
+                if(rule instanceof CSSImportRule) {
+                    mergeCssStylesheets([ rule.styleSheet ], out);
+                } else {
+                    out.insertRule(rule.cssText);
+                }
+            }
+        } catch (e) {
+            // Ignore errors from stylesheets that cannot be merged
+        }
+    }
+    return out;
+}

package/lib/components/pinstripe_frame.js

@@ -44,9 +44,16 @@ Component.register('pinstripe-frame', {
         await clearEventLoop();
         this.status = 'loading';
         this.url = url;
-        const { method = 'GET', placeholderUrl } = options;
+        const { method = 'GET', placeholderUrl, useCache = this.params.useCache == 'true' } = options;
         const cachedHtml = method == 'GET' ? loadCache.get(`${this.document.loadCacheNamespace}:${url}`) : undefined;
         if(cachedHtml) {
+            if(useCache){
+                this.status = 'complete';
+                this.patch(cachedHtml);
+                await clearEventLoop();
+                progressBar.stop();
+                return;
+            }
             this.status = 'using-cached-html';
             this.patch(cachedHtml);
         }

package/lib/components/pinstripe_global_styles.js

@@ -0,0 +1,13 @@
+
+import { Component } from "../component.js";
+
+Component.register('pinstripe-global-styles', {
+    initialize(...args){
+        this.constructor.parent.prototype.initialize.call(this, ...args);
+
+        const host = this.find('parents', el => el.node.shadowRoot );
+        if(!host) return;
+
+        host.shadow.node.adoptedStyleSheets = [ this.document.globalStyles ];
+    }
+});

package/lib/components/pinstripe_modal.js

@@ -138,7 +138,10 @@ Component.register('pinstripe-modal', {
             </div>
         `);
 
-        this.shadow.on('click', '.root, .container, .body, .close-button', () => this.trigger('close'));
+        this.shadow.on('click', '.root, .container, .body, .close-button', () => {
+            if(this.overlay.find('nextSiblings', 'pinstripe-overlay')) return;
+            this.trigger('close');
+        });
 
         this.on('clean', () => this.document.body.unclip());
 

package/lib/components/pinstripe_redirect.js

@@ -0,0 +1,18 @@
+
+import { Component } from "../component.js";
+import { loadFrame, getFrame, normalizeUrl } from "./helpers.js";
+
+Component.register('pinstripe-redirect', {
+    initialize(...args){
+        this.constructor.parent.prototype.initialize.call(this, ...args);
+
+        if(this.isFromCachedHtml) return;
+
+        const { delay = '0', confirm, target = '_self', method = 'GET', url, placeholder } = this.params;
+        this.setTimeout(() => {
+            if(target == '_blank') return;
+            if(normalizeUrl(url, window.location.href).host != window.location.host) return;
+            loadFrame.call(this, { confirm, target, method, url, placeholderUrl: placeholder });
+        }, parseInt(delay));
+    }
+});

package/lib/initialize.js

@@ -3,9 +3,17 @@ import './components/index.js';
 import { Component } from './component.js';
 
 if(typeof window != 'undefined'){
+    const originalDisplay = document.documentElement.style.display;
+    document.documentElement.style.display = 'none';
     window.addEventListener('DOMContentLoaded', () => {
         const documentComponent = Component.instanceFor(document);
         documentComponent.observe({ add: true }, component => component.descendants);
         documentComponent.patch(document.documentElement.outerHTML);
+
+        const interval = setInterval(() => {
+            documentComponent.progressBar.startCount == 0;
+            clearInterval(interval);
+            document.documentElement.style.display = originalDisplay;
+        }, 100);
     });
 }

package/package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "name": "pinstripe",
   "description": "A slick web framework for your browser.",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "author": "Jody Salt",
   "license": "MIT",
   "exports": {
@@ -12,7 +12,7 @@
     "clean": "rm -rf ./node_modules"
   },
   "dependencies": {
-    "@sintra/utils": "^0.34.0"
+    "@sintra/utils": "^0.35.0"
   },
   "devDependencies": {
     "esbuild": "^0.25.1"