pinstripe 0.24.1 → 0.27.0

package/LICENSE

@@ -1,5 +1,5 @@
 
-Copyright (c) 2022 Jody Salt
+Copyright (c) 2020 Jody Salt
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -3,7 +3,9 @@
 
 ## What is Pinstripe?
 
-A slick web framework for Node.js.
+Is front-end framework that surgically updates your app's DOM when a page changes.
+
+This gives the performance of a SPA using with a fraction of the complexity using well established classical patterns.
 
 ## 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 '@blognami/util';

package/lib/component.js

@@ -1,16 +1,15 @@
 
-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;
 
 export const Component = Class.extend().include({
     meta(){
+        this.assignProps({ name: 'Component' });
+
         this.include(Registry);
 
         this.assignProps({
@@ -18,7 +17,7 @@ export const Component = Class.extend().include({
                 if(!node._component){
                     node._component = Component.new(node, true);
                     node._component = Component.create(
-                        node._component.attributes['data-component'] || node._component.type,
+                        node._component.attributes['data-component'] || (node._component.type == '#document' ? 'pinstripe-document' : node._component.type),
                         node
                     );
                     if(node.isConnected) node._component.trigger('init', { bubbles: false });
@@ -30,30 +29,6 @@ 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){
@@ -64,38 +39,17 @@ export const Component = Class.extend().include({
         this._registeredAbortControllers = [];
         this._virtualNodeFilters = [];
 
-        if(skipInit) return;
-
         this.addVirtualNodeFilter(function(){
             this.traverse(normalizeVirtualNode);
         });
 
+        if(skipInit) return;
+
         const { autofocus } = this.attributes;
 
         if(autofocus){
             this.setTimeout(() => this.node.focus());
         }
-
-        const { autosubmit, trigger, decorate } = this.data;
-
-        // replace with pinstripe-autosubmitter?
-        if(autosubmit){
-            let hash = JSON.stringify(this.values);
-            this.setInterval(() => {
-                const newHash = JSON.stringify(this.values);
-                if(hash != newHash){
-                    hash = newHash;
-                    this.trigger('submit');
-                }
-            }, 100);
-        }
-
-        // replace with script?
-        if(trigger){
-            this.setTimeout(() => {
-                this.trigger(trigger);
-            }, 0);
-        }
     },
 
     get type(){
@@ -112,21 +66,13 @@ export const Component = Class.extend().include({
         return out;
     },
 
-    get data(){
-        const { attributes } = this;
+    get params(){
         const out = {};
+        const { attributes } = this;
         Object.keys(attributes).forEach(name => {
-            let normalizedName = name;
-            const matches = normalizedName.match(/^data-(.+)$/);
-            if(matches) normalizedName = matches[1];
-            normalizedName = normalizedName.toLowerCase().replace(/-[a-z]/g, item => item[1].toUpperCase());
-            const value = attributes[name];
-            try {
-                out[normalizedName] = JSON.parse(value);
-            } catch(e){
-                out[normalizedName] = value;
-            }
-        })
+            const normalizedName = name.replace(/^data-/, '').replace(/-[a-z]/g, item => item[1].toUpperCase());
+            out[normalizedName] = attributes[name];
+        });
         return out;
     },
 
@@ -134,6 +80,10 @@ export const Component = Class.extend().include({
         return this.node.textContent;
     },
 
+    get html(){
+        return this.node.innerHTML;
+    },
+
     get realParent(){
         if(this.node.parentNode) return this.constructor.instanceFor(this.node.parentNode);
         if(this.node.host instanceof Element) return this.constructor.instanceFor(this.node.host);
@@ -365,7 +315,7 @@ export const Component = Class.extend().include({
     remove(){
         if(this.realParent){
             clean.call(this);
-            this.realParent.node.removeChild(this.node);
+            remove.call(this);
         }
         return this;
     },
@@ -385,9 +335,9 @@ export const Component = Class.extend().include({
             const html = arg1;
             cleanChildren.call(this);
             if(TEXT_ONLY_TAGS.includes(this.type)){
-                insert.call(this, { type: '#text', attributes: { value: html }, children: [] });
+                insert.call(new Component(this.node, true), { type: '#text', attributes: { value: html }, children: [] }, null, false);
             } else {
-                patchChildren.call(this, createVirtualNode.call(this, html).children);
+                patchChildren.call(new Component(this.node, true), createVirtualNode.call(this, html).children);
             }
             initChildren.call(this);
             return this.children;
@@ -493,13 +443,17 @@ export const Component = Class.extend().include({
         return this[collection].find(item => item.is(selector));
     },
 
-    findAll(){
+    findAll(...args){
         if(args.length == 1) args.unshift('descendants');
         const [ collection, selector ] = args;
         return this[collection].filter(item => item.is(selector));
     }
 });
 
+function remove(){
+    this.node.parentNode.removeChild(this.node);
+}
+
 const matchesSelector = (() => {
     if(typeof window == 'undefined') return () => false;
     const node = document.documentElement;
@@ -551,10 +505,10 @@ function initChildren(){
 function prepend(html, referenceChild){
     const out = [];
     if(TEXT_ONLY_TAGS.includes(this.type)){
-        out.push(insert.call(this, { type: '#text', attributes: { value: html }, children: [] }, referenceChild));
+        out.push(insert.call(new Component(this.node, true), { type: '#text', attributes: { value: html }, children: [] }, referenceChild));
     } else {
         createVirtualNode.call(this, html).children.forEach((virtualChild) => {
-            out.push(insert.call(this, virtualChild, referenceChild));
+            out.push(insert.call(new Component(this.node, true), virtualChild, referenceChild));
         });
     }
     return out;
@@ -574,11 +528,10 @@ function patch(attributes, virtualChildren){
     }
     patchAttributes.call(this, attributes);
     if(isEmptyFrame) return;
-    if(this.is('pinstripe-silo, [data-component="pinstripe-silo"]')){
-        patchChildren.call(this.shadow, virtualChildren);
-        patchChildren.call(this, []);
+    if(this.type == 'template'){
+        patchChildren.call(new Component(this.node.content, true), virtualChildren);
     } else {
-        patchChildren.call(this, virtualChildren);
+        patchChildren.call(new Component(this.node, true), virtualChildren);
     }
 }
 
@@ -620,22 +573,22 @@ function patchChildren(virtualChildren){
         } else if(virtualChild.type == '#doctype'){
             // ignore
         } else if(virtualChild.type.match(/^#(text|comment)/)){
-            insert.call(this, virtualChild, child);
+            insert.call(this, virtualChild, child, false);
         } else {
             while(children.length > 0 && children[0].type.match(/^#/)){
-                children.shift().remove();
+                remove.call(children.shift());
             }
             child = children[0]
             if(child && child.type == virtualChild.type){
-                patch.call(children.shift(), virtualChild.attributes, virtualChild.children);
+                patch.call(new Component(children.shift().node, true), virtualChild.attributes, virtualChild.children);
             } else {
-                insert.call(this, virtualChild, child);
+                insert.call(new Component(this.node, true), virtualChild, child, false);
             }
         }
     }
 
     while(children.length > 0){
-        children.shift().remove();
+        remove.call(children.shift());
     }
 }
 
@@ -656,26 +609,30 @@ function insert(virtualNode, referenceChild, returnComponent = true){
     }
 
     children.forEach(child => {
-        insert.call(new Component(node, true), child, null, false);
+        if(type == 'template'){
+            insert.call(new Component(node.content, true), child, null, false);
+        } else {
+            insert.call(new Component(node, true), child, null, false);
+        }
     })
     
-    if(this.is('pinstripe-silo, [data-component="pinstripe-silo"]')){
-        this.shadow.node.insertBefore(
-            node,
-            referenceChild && referenceChild.node
-        );
-    } else {
-        this.node.insertBefore(
-            node,
-            referenceChild && referenceChild.node
-        );
-    }
+    this.node.insertBefore(
+        node,
+        referenceChild && referenceChild.node
+    );
     
     if(returnComponent){
         return Component.instanceFor(node);
     }
 }
 
+const COMPONENT_MAP = {
+    a: 'pinstripe-anchor',
+    body: 'pinstripe-body',
+    form: 'pinstripe-body',
+    
+};
+
 function normalizeVirtualNode(){
     if(!this.parent && this.children.some(child => child.type == 'html')){
         this.children = [
@@ -695,6 +652,24 @@ function normalizeVirtualNode(){
     if(this.parent && this.parent.type == 'textarea' && this.type == '#text'){
         this.attributes.value = this.attributes.value.replace(/^\n/, '');
     }
+
+    if(!this.attributes['data-component']){
+        if(this.type == 'a'){
+            this.attributes['data-component'] = 'pinstripe-anchor';
+        }
+
+        if(this.type == 'body'){
+            this.attributes['data-component'] = 'pinstripe-body';
+        }
+
+        if(this.type == 'form'){
+            this.attributes['data-component'] = 'pinstripe-form';
+        }
+
+        if(this.type == 'script' && this.attributes.type == 'pinstripe'){
+            this.attributes['data-component'] = 'pinstripe-script';
+        }
+    }
 }
 
 ComponentEvent.Component = Component;

package/lib/components/_file_importer.js

@@ -1 +1 @@
-export { Component as default } from 'pinstripe';
+export { Component as default } from '../component.js';

package/lib/components/index.js

@@ -0,0 +1 @@
+

package/lib/components/{a.js → pinstripe_anchor.js}

@@ -4,18 +4,15 @@ import { loadFrame, getFrame } from "./helpers.js";
 export default {
     initialize(...args){
         this.constructor.parent.prototype.initialize.call(this, ...args);
-
-        const { ignoreEventsFromChildren = false } = this.data;
         this.on('click', (event) => {
-            if(ignoreEventsFromChildren && event.target != this) return;
-            const { confirm, target = '_self', method = 'GET', href, placeholder } = { ...this.attributes, ...this.data };
+            const { confirm, target = '_self', method = 'GET', href, placeholder } = this.params;
             if(new URL(href, window.location.href).host != window.location.host) return;
             event.preventDefault();
             event.stopPropagation();
             loadFrame.call(this, confirm, target, method, href, placeholder);
         });
 
-        const { target = '_self', method = 'GET', href, preload, placeholder } =  { ...this.attributes, ...this.data };
+        const { target = '_self', method = 'GET', href, placeholder, preload } = this.params;
         if(method == 'GET' && target != '_blank'){
             const frame = target == '_overlay' ? this.frame : getFrame.call(this, target);
             if(preload != undefined) this.document.preload(new URL(href, frame.url));

package/lib/components/{document.js → pinstripe_document.js}

@@ -6,6 +6,17 @@ const preloading = {};
 export default {
     meta(){
         this.include('pinstripe-frame');
+
+        this.prototype.assignProps({
+            get meta(){
+                const out = {};
+                this.head.findAll('meta').forEach(({ params }) => {
+                    const { name, content } = params;
+                    if(name) out[name] = content;
+                });
+                return out;
+            }
+        })
     },
 
     initialize(...args){    
@@ -17,6 +28,13 @@ export default {
     },
 
     isDocument: true,
+
+    get head(){
+        if(!this._head){
+            this._head = this.find('head');
+        }
+        return this._head;
+    },
     
     get body(){
         if(!this._body){

package/lib/components/{form.js → pinstripe_form.js}

@@ -5,7 +5,7 @@ export default {
     initialize(...args){
         this.constructor.parent.prototype.initialize.call(this, ...args);
 
-        const { confirm, target = '_self', method = 'GET', action } = { ...this.attributes, ...this.data };
+        const { confirm, target = '_self', method = 'GET', action } = this.params;
         
         this.on('submit', (event) => {
             event.preventDefault();
@@ -20,6 +20,6 @@ export default {
     isForm: true,
         
     get hasUnsavedChanges(){
-        return this.data.hasUnsavedChanges || JSON.stringify(this.values) != this._initialHash;
+        return this.params.hasUnsavedChanges == 'true' || JSON.stringify(this.values) != this._initialHash;
     }
 };

package/lib/components/pinstripe_frame.js

@@ -5,12 +5,14 @@ export default {
     initialize(...args){
         this.constructor.parent.prototype.initialize.call(this, ...args);
 
-        let { loadOnInit } = this.data;
-        if(loadOnInit == undefined) loadOnInit = this.children.length == 0;
-        
-        if(loadOnInit){
-            this.on('init', () => this.load());
+        let { loadOnInit } = this.params;
+        if(loadOnInit == undefined) {
+            loadOnInit = this.children.length == 0;
+        } else {
+            loadOnInit = loadOnInit == 'true';
         }
+        
+        if(loadOnInit) this.on('init', () => this.load());
     },
 
     isFrame: true,
@@ -18,7 +20,7 @@ export default {
     get url(){
         if(this._url === undefined){
             this._url = new URL(
-                this.attributes['data-url'] || window.location,
+                this.params.url || window.location,
                 this.frame ? this.frame.url : window.location
             );
         }
@@ -34,13 +36,18 @@ export default {
 
     loading: false,
 
+    loadWasBlocked: false,
+
     async load(url = this.url, options = {}){
-        if(this.loading) return;
+        if(this.loading) {
+            this.loadWasBlocked = true;
+            return;
+        };
         this.loading = true;
         this.abort();
         const { method = 'GET', placeholderUrl } = options;
         const cachedHtml = method == 'GET' ? loadCache.get(url.toString()) : undefined;
-        const out = cachedHtml ? this.patch(cachedHtml) : undefined;
+        if(cachedHtml) this.patch(cachedHtml);
         let minimumDelay = 0;
         if(!cachedHtml && placeholderUrl){
             const placeholderHtml = loadCache.get(placeholderUrl.toString());
@@ -53,7 +60,8 @@ export default {
         const response = await this.fetch(url, { minimumDelay, ...options });
         const html = await response.text();
         this.loading = false;
-        if(html == cachedHtml) return out;
+        if(html == cachedHtml && !this.loadWasBlocked) return;
+        this.loadWasBlocked = false;
         if(method == 'GET') loadCache.put(url.toString(), html);
         this.patch(html);
     }

package/lib/components/pinstripe_overlay.js

@@ -35,7 +35,7 @@ export default {
         if(window.getSelection().type == 'Range') return;
 
         let canRemove = true;
-        this.descendants.filter(n => n.isForm).forEach(({ hasUnsavedChanges, data: { unsavedChangesConfirm } }) => {
+        this.descendants.filter(n => n.isForm).forEach(({ hasUnsavedChanges, params: { unsavedChangesConfirm } }) => {
             if(hasUnsavedChanges && unsavedChangesConfirm && !confirm(unsavedChangesConfirm)){
                 canRemove = false;
             }

package/lib/components/{script.js → pinstripe_script.js}

@@ -3,8 +3,6 @@
 export default {
     initialize(...args){
         this.constructor.parent.prototype.initialize.call(this, ...args);
-        
-        if(this.attributes.type != 'pinstripe') return;
 
         this.setTimeout(() => (new Function(this.text)).call(this));
     }

package/lib/components/pinstripe_skeleton.js

@@ -3,7 +3,7 @@ export default {
     initialize(...args){
         this.constructor.parent.prototype.initialize.call(this, ...args);
 
-        const { height = 'auto', width = '100%', radius = '3px' } = this.attributes
+        const { height = 'auto', width = '100%', radius = '3px' } = this.params
         
         this.shadow.patch(`
             <style>

package/lib/constants.js

@@ -1,26 +1,2 @@
 
-export const SELF_CLOSING_TAGS = [
-    'area',
-    'base',
-    'br',
-    'embed',
-    'hr',
-    'iframe',
-    'img',
-    'input',
-    'link',
-    'meta',
-    'param',
-    'slot',
-    'source',
-    'track'
-];
-
-export const TEXT_ONLY_TAGS = [
-    'script',
-    'style'
-];
-
-export const IS_SERVER = typeof window == 'undefined';
-
-export const IS_CLIENT = !IS_SERVER;
+export { SELF_CLOSING_TAGS, TEXT_ONLY_TAGS, IS_SERVER, IS_CLIENT } from '@blognami/util';

package/lib/index.js

@@ -1,14 +1,5 @@
 
-// pinstripe-if-client: import './initialize.js';
+import './initialize.js';
+
+export { Component } from './component.js';
 
-export * from './app.js'; // pinstripe-if-client: export const App = undefined;
-export * from './command.js'; // pinstripe-if-client: export const Command = undefined;
-export * from './context.js'; // pinstripe-if-client: export const Context = undefined;
-export * from './component.js';
-export * from './database.js'; // pinstripe-if-client: export const Database = undefined;
-export * from './html.js'; // pinstripe-if-client: export const Html = undefined;
-export * from './import_all.js'; // pinstripe-if-client: export const importAll = undefined;
-export * from './project.js'; // pinstripe-if-client: export const project = undefined;
-export * from './service_factory.js';  // pinstripe-if-client: export const ServiceFactory = undefined;
-export * from './view.js';  // pinstripe-if-client: export const View = undefined;
-export * from './workspace.js'; // pinstripe-if-client: export const Workspace = undefined;