pinstripe 0.33.0 → 0.35.0

package/README.md

@@ -1,7 +1,7 @@
 
 # Welcome to Pinstripe
 
-A slick web framework for Node.js.
+A slick web framework for your browser.
 
 ## License
 

package/lib/class.js

@@ -1,64 +1,2 @@
 
-export class Class {
-
-    static extend(){
-        return class extends this {};
-    }
-
-    static include(...includes){
-        includes.forEach(include => {
-            if(typeof include.meta == 'function') include.meta.call(this);
-            this.prototype.assignProps(include, name => name != 'meta');
-        });
-        return this;
-    }
-
-    static assignProps(...sources){
-        return assignProps(this, ...sources);
-    }
-
-    static new(...args){
-        return new this(...args);
-    }
-
-    static get parent(){
-        return this.__proto__;
-    }
-
-    constructor(...args){
-        let out = this.initialize(...args);
-        if(typeof out?.then == 'function'){
-            return out.then(out => out || this);
-        }
-        return out || this;
-    }
-
-    initialize(){
-
-    }
-
-    assignProps(...sources){
-        return assignProps(this, ...sources);
-    }
-}
-
-const assignProps = (target, ...sources) => {
-    const fn = typeof sources[sources.length - 1] == 'function' ?  sources.pop() :  () => true;
-
-    sources.forEach(source => {
-        Object.getOwnPropertyNames(source).forEach(name => {
-            if(!fn(name)){
-                return;
-            }
-            const descriptor = { ...Object.getOwnPropertyDescriptor(source, name) };
-            const { get: targetGet, set: targetSet } = (Object.getOwnPropertyDescriptor(target, name) || {});
-            const { get = targetGet, set = targetSet } = descriptor;
-            
-            if(get) descriptor.get = get;
-            if(set) descriptor.set = set;
-
-            Object.defineProperty(target, name, descriptor);
-        });
-    });
-    return target;
-};
+export { Class } from '@sintra/utils';

package/lib/component.js

@@ -1,13 +1,10 @@
 
-import { fileURLToPath } from 'url'; // pinstripe-if-client: const fileURLToPath = undefined;
-
 import { Class } from './class.js';
 import { TEXT_ONLY_TAGS } from './constants.js';
 import { Inflector } from './inflector.js';
 import { VirtualNode } from './virtual_node.js';
 import { Registry } from './registry.js';
 import { ComponentEvent } from './component_event.js';
-import { Client } from './client.js'; // pinstripe-if-client: const Client = undefined;
 import { generateProofOfWork } from './proof_of_work.js';
 
 export const Component = Class.extend().include({
@@ -24,7 +21,7 @@ export const Component = Class.extend().include({
                         node._component.attributes['data-component'] || (node._component.type == '#document' ? 'pinstripe-document' : node._component.type),
                         node
                     );
-                    (node._component.attributes.class || '').trim().split(/\s+/).forEach((className) => {
+                    if(!this.isFromCachedHtml) (node._component.attributes.class || '').trim().split(/\s+/).forEach((className) => {
                         const decoratorMethodName = `.${className}`;
                         if(typeof node._component[decoratorMethodName] == 'function'){
                             node._component[decoratorMethodName]();
@@ -39,38 +36,11 @@ export const Component = Class.extend().include({
                 return Inflector.instance.dasherize(name);
             }
         });
-
-        this.FileImporter.register('js', {
-            meta(){
-                const { importFile } = this.prototype;
-
-                this.include({
-                    async importFile(params){
-                        const { filePath, relativeFilePathWithoutExtension } = params;
-                        if((await import(filePath)).default){
-                            Client.instance.addModule(`
-                                import { Component } from ${JSON.stringify(fileURLToPath(`${import.meta.url}/../index.js`))};
-                                import include from ${JSON.stringify(filePath)};
-                                Component.register(${JSON.stringify(relativeFilePathWithoutExtension)}, include);
-                            `);
-                        } else {
-                            Client.instance.addModule(`
-                                import ${JSON.stringify(filePath)};
-                            `);
-                        }
-                        return importFile.call(this, params);
-                    }
-                });
-            }
-        });
     },
 
     initialize(node, skipInit = false){
         this.node = node;
-        this._registeredEventListeners = [];
-        this._registeredObservers = [];
-        this._registeredTimers = [];
-        this._registeredAbortControllers = [];
+        this._managedResources = [];
         this._virtualNodeFilters = [];
 
         this.addVirtualNodeFilter(function(){
@@ -84,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(){
@@ -290,6 +282,14 @@ export const Component = Class.extend().include({
         return Component.instanceFor(this.node.shadowRoot);
     },
 
+    get isFromPlaceholderHtml(){
+        return this.frame?.status == 'using-placeholder-html';
+    },
+
+    get isFromCachedHtml(){
+        return this.frame?.status == 'using-cached-html';
+    },
+
     focus(){
         this.node.focus();
         return this;
@@ -306,6 +306,20 @@ export const Component = Class.extend().include({
         }
     },
 
+    manage(resource){
+        const destroy = resource.destroy;
+        const that = this;
+        Object.assign(resource, {
+            destroy(){
+                const out = destroy.call(this);
+                that._managedResources = that._managedResources.filter(item => item !== this);
+                return out;
+            }
+        });
+        this._managedResources.push(resource);
+        return resource;
+    },
+
     on(name, ...args){
         const fn = args.pop()
         const selector = args.pop()
@@ -323,9 +337,9 @@ export const Component = Class.extend().include({
 
         this.node.addEventListener(name, wrapperFn);
 
-        this._registeredEventListeners.push([name, wrapperFn]);
-
-        return this;
+        return this.manage({
+            destroy: () => this.node.removeEventListener(name, wrapperFn)
+        });
     },
     
     trigger(name, options = {}){
@@ -345,16 +359,22 @@ export const Component = Class.extend().include({
         return this;
     },
 
-    setTimeout(...args){
-        const out = setTimeout(...args);
-        this._registeredTimers.push(out);
+    setTimeout(fn, ...args){
+        const timeout = setTimeout(() => {
+            fn();
+            out.destroy();
+        }, ...args);
+        const out = this.manage({
+            destroy: () => clearTimeout(timeout)
+        });
         return out;
     },
 
     setInterval(...args){
-        const out = setInterval(...args);
-        this._registeredTimers.push(out);
-        return out;
+        const interval = setInterval(...args);
+        return this.manage({
+            destroy: () => clearInterval(interval)
+        });
     },
 
     remove(){
@@ -442,53 +462,57 @@ export const Component = Class.extend().include({
             subtree: true
         });
 
-        this._registeredObservers.push(observer);
-
-        return this;
+        return this.manage({
+            destroy: () => observer.disconnect()
+        });
     },
 
-    async fetch(url, options = {}){
-        const { minimumDelay = 0, requiresProofOfWork = false, ...otherOptions } = options;
-        const { progressBar } = this.document;
-        const frame = this.frame || this;
-        const normalizedUrl = new URL(url, frame.url);
+    fetch(url, options = {}){
         const abortController = new AbortController();
-        this._registeredAbortControllers.push(abortController);
-        progressBar.start();
         let minimumDelayTimeout;
-        const cleanUp = () => {
-            clearTimeout(minimumDelayTimeout);
-            this._registeredAbortControllers = this._registeredAbortControllers.filter(item => item !== abortController);
-            progressBar.stop();
-        };
-        try {
-            if(requiresProofOfWork){
-                if(!(otherOptions.body instanceof FormData)) throw new Error(`Proof of work requires form data to be present`);
-                const values = {};
-                otherOptions.body.forEach((value, key) => values[key] = value);
-                otherOptions.body.append('_proofOfWork', await generateProofOfWork(values, { 
-                    abortSignal: abortController.signal,
-                    onProgress: progress => this.trigger('proofOfWorkProgress', { data: progress, bubbles: false })
-                }))
+        let rejectMinimumDelay;
+        let isSuccess = false;
+
+        const promise = (async () => {
+            const { minimumDelay = 0, requiresProofOfWork = false, ...otherOptions } = options;
+            const frame = this.frame || this;
+            const normalizedUrl = new URL(url, frame.url);
+            
+            try {
+                if(requiresProofOfWork){
+                    if(!(otherOptions.body instanceof FormData)) throw new Error(`Proof of work requires form data to be present`);
+                    const values = {};
+                    otherOptions.body.forEach((value, key) => values[key] = value);
+                    otherOptions.body.append('_proofOfWork', await generateProofOfWork(values, { 
+                        abortSignal: abortController.signal,
+                        onProgress: progress => this.trigger('proofOfWorkProgress', { data: progress, bubbles: false })
+                    }))
+                }
+                const promises = [
+                    fetch(normalizedUrl, { signal: abortController.signal, ...otherOptions }), 
+                    new Promise((resolve, reject) => {
+                        minimumDelayTimeout = setTimeout(resolve, minimumDelay);
+                        rejectMinimumDelay = reject;
+                    })
+                ];
+                const [ out ] = await Promise.all(promises);
+                isSuccess = true;
+                promise.destroy();
+                return out;
+            } catch(e){
+                promise.destroy();
+                throw e;
             }
-            const promises = [
-                fetch(normalizedUrl, { signal: abortController.signal, ...otherOptions }), 
-                new Promise(resolve => minimumDelayTimeout = setTimeout(resolve, minimumDelay))
-            ];
-            const [ out ] = await Promise.all(promises);
-            cleanUp();
-            return out;
-        } catch(e){
-            cleanUp();
-            throw e;
-        }
-    },
-
-    abort(){
-        while(this._registeredAbortControllers.length){
-            this._registeredAbortControllers.pop().abort();
-        }
-        return this;
+        })();
+
+        return this.manage(Object.assign(promise, { 
+            destroy: () => {
+                if(isSuccess) return;
+                if(!abortController.signal.aborted) abortController.abort(`Request aborted`);
+                clearTimeout(minimumDelayTimeout);
+                if(rejectMinimumDelay) rejectMinimumDelay();
+            }
+        }));
     },
 
     find(...args){
@@ -526,29 +550,15 @@ function clean(){
 
     [...this.node.childNodes].forEach(node => node._component && clean.call(node._component));
 
-    while(this._registeredEventListeners.length){
-        this.node.removeEventListener(...this._registeredEventListeners.pop());
-    }
-
-    while(this._registeredObservers.length){
-        this._registeredObservers.pop().disconnect();
+    while(this._managedResources.length){
+        this._managedResources.pop().destroy();
     }
 
-    clearTimers.call(this);
-
-    this.abort();
-
     if(this._overlayChild) this._overlayChild.remove();
 
     delete this.node._component;
 }
 
-function clearTimers(){
-    while(this._registeredTimers.length){
-        clearTimeout(this._registeredTimers.pop());
-    }
-}
-
 function initChildren(){
     if(this.node.shadowRoot){
         this.shadow.children.forEach(child => initChildren.call(child));
@@ -577,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);
@@ -614,6 +624,8 @@ function patchAttributes(attributes){
 }
 
 function patchChildren(virtualChildren){
+    if(this.type == 'head') return patchHeadChildren.call(this, virtualChildren);
+
     const children = [...this.node.childNodes].map(
         node => new Component(node, true)
     );
@@ -646,6 +658,40 @@ function patchChildren(virtualChildren){
     }
 }
 
+function patchHeadChildren(virtualChildren){
+    const children = [...this.node.childNodes].map(
+        node => new Component(node, true)
+    );
+
+    const stylesheets = {};
+    for(let i = 0; i < virtualChildren.length; i++){
+        const virtualChild = virtualChildren[i];
+        if(virtualChild.type != 'link') continue;
+        if(virtualChild.attributes.rel != 'stylesheet') continue;
+        const href = virtualChild.attributes.href;
+        stylesheets[href] = virtualChild;
+    }
+    while(children.length > 0){
+        const child = children.shift();
+        if(child.type == 'link' && child.attributes.rel == 'stylesheet'){
+            const { href } = child.attributes;
+            const stylesheet = stylesheets[href];
+            if(stylesheet){
+                patch.call(child, stylesheet.attributes, stylesheet.children);
+                continue;
+            }
+        }
+        remove.call(child);
+    }
+
+    for(let i = 0; i < virtualChildren.length; i++){
+        const virtualChild = virtualChildren[i];
+        if(virtualChild.type == 'script') continue;
+        if(virtualChild.type == 'link' && virtualChild.attributes.rel == 'stylesheet' && stylesheets[virtualChild.attributes.href]) continue;
+        insert.call(this, virtualChild, null, false);
+    }
+}
+
 function insert(virtualNode, referenceChild, returnComponent = true){
     const { type, attributes, children } = virtualNode;
 

package/lib/components/helpers.js

@@ -3,7 +3,7 @@ import { LruCache } from '../lru_cache.js';
 
 export const loadCache = LruCache.new();
 
-export function loadFrame(confirm, target, method, url, placeholderUrl, requiresProofOfWork = false){
+export function loadFrame({ confirm, target, method, url, placeholderUrl, requiresProofOfWork = false, values = this.values }){
     if(confirm && !window.confirm(confirm)){
         return;
     }
@@ -11,15 +11,17 @@ export function loadFrame(confirm, target, method, url, placeholderUrl, requires
     let frame;
     
     if(target == '_overlay'){
-        this.document.body.clip();
         frame = this.document.descendants.find(node => node.is('body')).append(`<pinstripe-overlay load-on-init="false"></pinstripe-overlay>`).pop();
         frame._parent = this;
         this._overlayChild = frame;
-    } else {
+    } else if(target) {
         frame = getFrame.call(this, target);
-        if(!frame) return;
+    } else if(this.isFrame) {
+        frame = this;
     }
 
+    if(!frame) return;
+
     url = normalizeUrl(url || frame.url, this.frame.url);
     if(url.protocol != 'data:' && (url.host != frame.url.host || url.port != frame.url.port)){
         return;
@@ -29,7 +31,6 @@ export function loadFrame(confirm, target, method, url, placeholderUrl, requires
 
     if(method.match(/POST|PUT|PATCH/i)){
         const formData = new FormData();
-        const values = this.values;
         Object.keys(values).forEach((name) => formData.append(name, values[name]));
         frame.load(url, { method, body: formData, placeholderUrl, requiresProofOfWork });
     } else {

package/lib/components/index.js

@@ -1 +1,15 @@
 
+import './pinstripe_anchor.js';
+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_anchor.js

@@ -1,15 +1,16 @@
 
+import { Component } from "../component.js";
 import { loadFrame, getFrame, normalizeUrl } from "./helpers.js";
 
-export default {
+Component.register('pinstripe-anchor', {
     initialize(...args){
         this.constructor.parent.prototype.initialize.call(this, ...args);
         this.on('click', (event) => {
             const { confirm, target = '_self', method = 'GET', href, placeholder } = this.params;
+            if(target == '_blank') return;
             if(normalizeUrl(href, window.location.href).host != window.location.host) return;
             event.preventDefault();
-            event.stopPropagation();
-            loadFrame.call(this, confirm, target, method, href, placeholder);
+            loadFrame.call(this, { confirm, target, method, url: href, placeholderUrl: placeholder });
         });
 
         const { target = '_self', method = 'GET', href, placeholder, preload } = this.params;
@@ -21,4 +22,4 @@ export default {
 
         if(this.is('input, textarea')) this.on('keyup', (event) => this.trigger('click'));
     }
-};
+});

package/lib/components/pinstripe_body.js

@@ -1,5 +1,7 @@
 
-export default {
+import { Component } from "../component.js";
+
+Component.register('pinstripe-body',  {
     initialize(...args){
         this.constructor.parent.prototype.initialize.call(this, ...args);
 
@@ -8,6 +10,8 @@ export default {
             <slot>
             <div class="styles"></div>
         `);
+
+        this.clipCounter = 0;
     },
 
     get progressBar(){
@@ -18,7 +22,8 @@ export default {
     },
     
     clip(){
-        this.shadow.find('.styles').patch(`
+        this.clipCounter++;
+        if(this.clipCounter == 1) this.shadow.find('.styles').patch(`
             <style>
                 :host {
                     overflow: hidden !important;
@@ -28,6 +33,10 @@ export default {
     },
 
     unclip(){
-        this.shadow.find('.styles').patch('');
+        this.clipCounter--;
+        if(this.clipCounter <= 0){
+            this.clipCounter = 0;
+            this.shadow.find('.styles').patch('');
+        }
     }
-};
+});

package/lib/components/pinstripe_document.js

@@ -1,9 +1,10 @@
 
+import { Component } from "../component.js";
 import { loadCache, normalizeUrl } from "./helpers.js";
 
 const preloading = {};
 
-export default {
+Component.register('pinstripe-document', {
     meta(){
         this.include('pinstripe-frame');
 
@@ -51,6 +52,21 @@ export default {
         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();
@@ -77,4 +93,22 @@ export default {
         loadCache.put(`${this.document.loadCacheNamespace}:${url}`, html);
         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_form.js

@@ -1,12 +1,14 @@
 
+import { Component } from "../component.js";
 import { loadFrame, getFrame, normalizeUrl } from "./helpers.js";
 
-export default {
+Component.register('pinstripe-form', {
     initialize(...args){
         this.constructor.parent.prototype.initialize.call(this, ...args);
 
         const { confirm, target = '_self', method = 'GET', action, placeholder, requiresProofOfWork, disabled } = this.params;
-        
+        const frame = target == '_overlay' ? this.frame : getFrame.call(this, target);
+
         this.on('submit', (event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -16,14 +18,31 @@ export default {
                 ...this.attributes,
                 [this.params.component ? 'data-loading' : 'loading']: 'true'
             });
+
+            delete frame._previousHash;
+            this._watchInterval?.destroy();
             
-            loadFrame.call(this, confirm, target, method, action, placeholder, requiresProofOfWork == 'true');
+            loadFrame.call(this, { confirm, target, method, url: action, placeholderUrl: placeholder, requiresProofOfWork: requiresProofOfWork == 'true' });
         });
     
         this._initialHash = JSON.stringify(this.values);
 
-        const frame = target == '_overlay' ? this.frame : getFrame.call(this, target);
+        if(this.isFromPlaceholderHtml) return;
+        
         if(placeholder != undefined) this.document.preload(normalizeUrl(placeholder, frame.url));
+        
+        const hasValuesToWatch = Object.keys(valuesToWatch.call(this)).length > 0;
+        if(!hasValuesToWatch) return;
+        
+        frame._previousHash ||= JSON.stringify(valuesToWatch.call(this));
+
+        this._watchInterval = this.setInterval(() => {
+            const currentHash = JSON.stringify(valuesToWatch.call(this));
+            if(frame._previousHash == currentHash) return;
+            console.log(`${frame._previousHash} != ${currentHash}`)
+            frame._previousHash = currentHash;
+            loadFrame.call(this, { target, method: 'PATCH', url: action });
+        }, 100);
     },
 
     isForm: true,
@@ -31,4 +50,16 @@ export default {
     get hasUnsavedChanges(){
         return this.params.hasUnsavedChanges == 'true' || JSON.stringify(this.values) != this._initialHash;
     }
-};
+});
+
+function valuesToWatch(){
+    const out = {}
+    this.inputs.forEach(input => {
+        if(input.params.watch != 'true') return;
+        const value = input.value;
+        if(value !== undefined){
+            out[input.name] = value
+        }
+    })
+    return out;
+}