pinstripe 0.22.0 → 0.24.0

package/lib/commands/generate_static_site.js

@@ -0,0 +1,74 @@
+
+import { default as mimeTypes } from 'mime-types';
+
+export default {
+    async run(){
+        this.pages = {};
+        const urls = this.viewNames.filter(path => !path.match(/(^|\/)_/)).map(path => {
+            return new URL(path, 'http://127.0.0.1/');
+        });
+
+        while(urls.length){
+            await this.crawlPage({ _url: urls.shift() });
+        }
+
+        const pages = Object.values(this.pages).filter(page => page.status == 200 && Object.keys(page.params).length == 1);
+        const { inProjectRootDir, generateDir, generateFile, echo } = this.fsBuilder;
+
+        await inProjectRootDir(async () => {
+            await generateDir('build/static', async () => {
+                while(pages.length){
+                    const { params, headers } = pages.shift();
+                    const contentType = headers['content-type'];
+
+                    const path = params._url.pathname;
+                    let filePath = path.replace(/^\//, '');
+                    if(filePath.match(/(^|\/)$/)){
+                        filePath = `${filePath}index`;
+                    }
+                    if(!filePath.match(/[^/]+\.[^/]+$/)){
+                        filePath = `${filePath}.${mimeTypes.extension(contentType)}`
+                    }
+                    
+                    const data = (await this.fetch({ _url: new URL(path, 'http://127.0.0.1/') }))[2];
+
+                    await generateFile(filePath, () => {
+                        echo(data.join(''));
+                    });
+                }
+            });
+        });
+    },
+
+    async crawlPage(params){
+        const hash = JSON.stringify(params);
+        if(this.pages[hash]) return;
+        const page = { params };
+        this.pages[hash] = page;
+        const [ status, headers, data ] = await this.fetch(params);
+        page.status = status;
+        page.headers = headers;
+        if(status != 200 || headers['content-type'] != 'text/html') return;
+        const html = data.join('');
+        const virtualDom = this.parseHtml(html);
+        const urls = this.extractUrls(virtualDom);
+        while(urls.length){
+            const url = urls.shift();
+            await this.crawlPage({ ...url.params, _url: url });
+        }
+    },
+
+    extractUrls(virtualDom){
+        const out = [];
+        virtualDom.traverse(({ attributes }) => {
+            ['src', 'href'].forEach(name => {
+                const value = attributes[name];
+                if(!value) return;
+                const url = new URL(value, 'http://127.0.0.1/');
+                if(url.host != '127.0.0.1') return;
+                out.push(url);
+            });
+        });
+        return out;
+    }
+};

package/lib/commands/generate_view.js

@@ -0,0 +1,44 @@
+
+export default {
+    async run(){
+        const [ name = '' ] = this.args;
+        let normalizedName = name.replace(/^\//, '');
+        if(name == ''){
+            console.error('A view name must be given.');
+            process.exit();
+        }
+    
+        if(!normalizedName.match(/\.[^\/]+$/)){
+            normalizedName = `${normalizedName}.js`;
+        }
+    
+        const { inProjectRootDir, generateFile, line, indent } = this.fsBuilder;
+    
+        await inProjectRootDir(async () => {
+    
+            await generateFile(`lib/views/_file_importer.js`, { skipIfExists: true }, () => {
+                line();
+                line(`export { View as default } from 'pinstripe';`);
+                line();
+            });
+    
+            await generateFile(`lib/views/${normalizedName}`, () => {
+                line();
+                line('export default {');
+                indent(() => {
+                    line('render(){')
+                    indent(() => {
+                        line('return this.renderHtml`')
+                        indent(() => {
+                            line(`<h1>${normalizedName} view<h1></h1>`);
+                        });
+                        line('`;')
+                    });
+                    line('}')
+                });
+                line('};');
+                line();
+            });
+        });
+    }
+};

package/lib/commands/init_database.js

@@ -0,0 +1,9 @@
+
+import { Command } from 'pinstripe';
+
+export default {
+    async run(){
+        await this.runCommand('migrate-database');
+        await this.runCommand('seed-database');
+    }
+}

package/lib/commands/list_apps.js

@@ -0,0 +1,15 @@
+
+import chalk from 'chalk';
+import { App } from 'pinstripe';
+
+export default {
+    run(){
+        console.log('');
+        console.log('The following apps are available:');
+        console.log('');
+        App.names.forEach(appName => {
+            console.log(`  * ${chalk.green(appName)} (composed of ${JSON.stringify(App.create(appName, this.context).compose())} views)`);
+        });
+        console.log('');
+    }
+};

package/lib/commands/list_commands.js

@@ -0,0 +1,15 @@
+
+import chalk from 'chalk';
+import { Command } from 'pinstripe';
+
+export default {
+    run(){
+        console.log('');
+        console.log('The following commands are available:');
+        console.log('');
+        Command.names.forEach(commandName => {
+            console.log(`  * ${chalk.green(commandName)}`);
+        });
+        console.log('');
+    }
+};

package/lib/commands/list_components.js

@@ -0,0 +1,16 @@
+
+import chalk from 'chalk';
+import { Component } from 'pinstripe';
+
+export default {
+    run(){
+        console.log('');
+        console.log('The following components are available:');
+        console.log('');
+        Component.names.forEach(componentName => {
+            console.log(`  * ${chalk.green(componentName)}`);
+        });
+        console.log('');
+    }
+};
+

package/lib/commands/list_migrations.js

@@ -0,0 +1,15 @@
+
+import chalk from 'chalk';
+import { Migration } from 'pinstripe/database';
+
+export default {
+    run(){
+        console.log('');
+        console.log('The following migrations are available:');
+        console.log('');
+        Migration.names.forEach(migrationName => {
+            console.log(`  * ${chalk.green(migrationName)}`);
+        });
+        console.log('');
+    }
+};

package/lib/commands/list_models.js

@@ -0,0 +1,15 @@
+
+import chalk from 'chalk';
+import { Row } from 'pinstripe/database';
+
+export default {
+    run(){
+        console.log('');
+        console.log('The following models are available:');
+        console.log('');
+        Row.names.forEach(modelName => {
+            console.log(`  * ${chalk.green(modelName)}`);
+        });
+        console.log('');
+    }
+};

package/lib/commands/list_services.js

@@ -0,0 +1,15 @@
+
+import chalk from 'chalk';
+import { ServiceFactory } from 'pinstripe';
+
+export default {
+    run(){
+        console.log('');
+        console.log('The following views are available:');
+        console.log('');
+        ServiceFactory.names.forEach(serviceFactoryName => {
+            console.log(`  * ${chalk.green(serviceFactoryName)}`);
+        });
+        console.log('');
+    }
+};

package/lib/commands/list_views.js

@@ -0,0 +1,39 @@
+
+import chalk from 'chalk';
+import { App, View } from 'pinstripe';
+
+export default {
+    run(){
+        const { extractOptions } = this.cliUtils;
+
+        const { app } = extractOptions();
+
+        if(app){
+            this.listComposedViews(typeof app == 'string' ? app : 'main');
+        } else {
+            this.listAllViews();
+        }
+    },
+
+    listComposedViews(appName){
+        const { viewNames, resolveView } = View.mapperFor(App.create(appName, this.context).compose());
+        console.log('');
+        console.log(`The following views have been composed for app "${appName}":`);
+        console.log('');
+        viewNames.forEach(viewName => {
+            console.log(`  * ${chalk.green(viewName)} -> ${chalk.green(resolveView(viewName))}`);
+        });
+        console.log('');
+    },
+
+    listAllViews(){
+        console.log('');
+        console.log(`The following views are available:`);
+        console.log('');
+        View.names.forEach(viewName => {
+            console.log(`  * ${chalk.green(viewName)}`);
+        });
+        console.log('');
+    }
+};
+

package/lib/commands/migrate_database.js

@@ -0,0 +1,6 @@
+
+export default {
+    async run(){
+        await this.database.migrate();
+    }
+};

package/lib/commands/purge_old_sessions.js

@@ -0,0 +1,12 @@
+
+export default {
+    meta(){
+        this.schedule('*/5 * * * *');
+    },
+
+    minutesUntilExpiry: 30,
+
+    async run(){
+        // await this.database.withoutMultiTenancy.sessions.lastAccessedAtLt(Date.now() - (1000 * 60 * this.minutesUntilExpiry)).delete();
+    }
+};

package/lib/commands/reset_database.js

@@ -0,0 +1,9 @@
+
+import { Command } from 'pinstripe';
+
+export default {
+    async run(){
+        await this.runCommand('drop-database');
+        await this.runCommand('init-database');
+    }
+};

package/lib/commands/seed_database.js

@@ -0,0 +1,6 @@
+
+export default {
+    run(){
+        // do nothing
+    }
+};

package/lib/commands/show_config.js

@@ -0,0 +1,6 @@
+
+export default {
+    async run(){
+        console.log(JSON.stringify(await this.config, null, 2));
+    }
+};

package/lib/commands/start_repl.js

@@ -0,0 +1,6 @@
+
+export default {
+    async run(){
+        await this.repl.start()
+    }
+};

package/lib/commands/start_server.js

@@ -0,0 +1,31 @@
+
+export default {
+    run(){
+        const { extractOptions } = this.cliUtils;
+
+        const { app, withoutBot } = extractOptions({
+            app: `main:${process.env.HOST || '127.0.0.1'}:${parseInt(process.env.PORT || '3000')}`,
+            withoutBot: false
+        });
+
+        
+        const apps = [];
+        let currentPort = 3000;
+
+        app.trim().split(/\s+/).forEach((app) => {
+            const [name, ...serverConfig] = app.split(/:/);
+            const [ port, host = '127.0.0.1'] = serverConfig.reverse();
+
+            if(port){
+                apps.push({ name, port: parseInt(port), host });
+            } else {
+                while(apps.filter(app => app.host == host).map(({ port }) => port).includes(currentPort)) currentPort++;
+                apps.push({ name, port: currentPort, host });
+            }
+        });
+
+        this.server.start(apps);
+
+        // if(!withoutBot) this.bot.start();
+    }
+};

package/lib/component.js

@@ -1,7 +1,13 @@
 
-import { Class, TEXT_ONLY_TAGS, Inflector, VirtualNode, Registry } from "haberdash";
+import { fileURLToPath } from 'url'; // pinstripe-if-client: const fileURLToPath = undefined;
 
-import { EventWrapper } from './event_wrapper.js';
+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(){
@@ -24,6 +30,30 @@ 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){
@@ -46,8 +76,9 @@ export const Component = Class.extend().include({
             this.setTimeout(() => this.node.focus());
         }
 
-        const { autosubmit, trigger } = this.data;
+        const { autosubmit, trigger, decorate } = this.data;
 
+        // replace with pinstripe-autosubmitter?
         if(autosubmit){
             let hash = JSON.stringify(this.values);
             this.setInterval(() => {
@@ -59,6 +90,7 @@ export const Component = Class.extend().include({
             }, 100);
         }
 
+        // replace with script?
         if(trigger){
             this.setTimeout(() => {
                 this.trigger(trigger);
@@ -103,7 +135,9 @@ export const Component = Class.extend().include({
     },
 
     get realParent(){
-        return this.node.parentNode ? this.constructor.instanceFor(this.node.parentNode) : null;
+        if(this.node.parentNode) return this.constructor.instanceFor(this.node.parentNode);
+        if(this.node.host instanceof Element) return this.constructor.instanceFor(this.node.host);
+        return null;
     },
 
     get parent(){
@@ -122,6 +156,10 @@ export const Component = Class.extend().include({
         return out;
     },
 
+    get parentsIncludingThis(){
+        return [this, ...this.parents];
+    },
+
     get children(){
         return [...this.node.childNodes].map(
             node => this.constructor.instanceFor(node)
@@ -241,7 +279,7 @@ export const Component = Class.extend().include({
     },
 
     get document(){
-        return this.parents.find(({ isDocument }) => isDocument) || this;
+        return this.find('parentsIncludingThis', ({ isDocument }) => isDocument);
     },
 
     get overlay(){
@@ -251,6 +289,7 @@ export const Component = Class.extend().include({
     get shadow(){
         if(!this.node.shadowRoot){
             this.node.attachShadow({ mode: 'open' });
+            this.shadow.observe({ add: true }, component => component.descendants);
             this.shadow.patch(`<slot>`);
         }
         return Component.instanceFor(this.node.shadowRoot);
@@ -277,7 +316,7 @@ export const Component = Class.extend().include({
         const selector = args.pop()
 
         const wrapperFn = (event, ...args) => {
-            const eventWrapper = EventWrapper.instanceFor(event)
+            const eventWrapper = ComponentEvent.instanceFor(event)
             if(selector){
                 if(eventWrapper.target.is(selector)){
                     return fn.call(eventWrapper.target, eventWrapper, ...args);
@@ -325,8 +364,8 @@ export const Component = Class.extend().include({
 
     remove(){
         if(this.realParent){
-            clearTimers.call(this);
-            if(this.realParent) this.realParent.node.removeChild(this.node);
+            clean.call(this);
+            this.realParent.node.removeChild(this.node);
         }
         return this;
     },
@@ -414,20 +453,25 @@ export const Component = Class.extend().include({
     },
 
     async fetch(url, options = {}){
+        const { minimumDelay = 0, ...otherOptions } = options;
         const { progressBar } = this.document;
         const frame = this.frame || this;
         const normalizedUrl = new URL(url, frame.url);
         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 {
-            const out = await fetch(normalizedUrl, Object.assign({
-                signal: abortController.signal
-            }, options));
+            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){
@@ -454,7 +498,6 @@ export const Component = Class.extend().include({
         const [ collection, selector ] = args;
         return this[collection].filter(item => item.is(selector));
     }
-
 });
 
 const matchesSelector = (() => {
@@ -464,10 +507,15 @@ const matchesSelector = (() => {
 })();
 
 function cleanChildren(){
+    if(this.node.shadowRoot){
+        this.shadow.children.forEach(child => clean.call(child));
+    }
     this.children.forEach(child => clean.call(child));
 }
 
 function clean(){
+    this.trigger('clean', { bubbles: false });
+
     [...this.node.childNodes].forEach(node => node._component && clean.call(node._component));
 
     while(this._registeredEventListeners.length){
@@ -494,6 +542,9 @@ function clearTimers(){
 }
 
 function initChildren(){
+    if(this.node.shadowRoot){
+        this.shadow.children.forEach(child => initChildren.call(child));
+    }
     this.children.forEach(child => initChildren.call(child));
 }
 
@@ -516,13 +567,19 @@ function createVirtualNode(html){
 }
 
 function patch(attributes, virtualChildren){
-    const isEmptyFrame = this.is('.frame') && virtualChildren.length == 0;
+    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){
         attributes['data-load-on-init'] = 'true';
     }
     patchAttributes.call(this, attributes);
     if(isEmptyFrame) return;
-    patchChildren.call(this, virtualChildren);
+    if(this.is('pinstripe-silo, [data-component="pinstripe-silo"]')){
+        patchChildren.call(this.shadow, virtualChildren);
+        patchChildren.call(this, []);
+    } else {
+        patchChildren.call(this, virtualChildren);
+    }
 }
 
 function patchAttributes(attributes){
@@ -534,11 +591,12 @@ function patchAttributes(attributes){
         const currentAttributes = this.attributes;
         Object.keys(currentAttributes).forEach((key) => {
             if(attributes[key] === undefined){
-                this.node.removeAttribute(key);
+                Element.prototype.removeAttribute.call(this.node, key); // work around for https://github.com/cypress-io/cypress/issues/26206
+                // this.node.removeAttribute(key);
             }
         })
         Object.keys(attributes).forEach((key) => {
-            if(currentAttributes[key] != attributes[key]){
+            if(!currentAttributes.hasOwnProperty(key) || currentAttributes[key] != attributes[key]){
                 this.node.setAttribute(key, attributes[key]);
                 if(key == 'value'){
                     this.node.value = attributes[key];
@@ -601,10 +659,17 @@ function insert(virtualNode, referenceChild, returnComponent = true){
         insert.call(new Component(node, true), child, null, false);
     })
     
-    this.node.insertBefore(
-        node,
-        referenceChild && referenceChild.node
-    );
+    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
+        );
+    }
     
     if(returnComponent){
         return Component.instanceFor(node);
@@ -632,17 +697,4 @@ function normalizeVirtualNode(){
     }
 }
 
-EventWrapper.Component = Component;
-
-[
-    ['#document', 'pinstripe-document'],
-    ['a', 'pinstripe-anchor'],
-    ['body', 'pinstripe-body'],
-    ['form', 'pinstripe-form']
-].forEach(([name, include]) => {
-    Component.register(name, {
-        meta(){
-            this.include(include);
-        }
-    })
-});
+ComponentEvent.Component = Component;

package/lib/component_event.js

@@ -0,0 +1,28 @@
+
+import { Class } from './class.js';
+import { trapify } from './trapify.js';
+
+export const ComponentEvent = Class.extend().include({
+    meta(){
+        this.assignProps({
+            instanceFor(event){
+                if(!event._componentEvent){
+                    event._componentEvent = ComponentEvent.new(event);
+                }
+                return event._componentEvent;
+            }
+        });
+    },
+
+    initialize(event){
+        this.event = event;
+        return trapify(this);
+    },
+
+    __get(target, name){
+        const out = target.event[name];
+        if(out instanceof Node) return ComponentEvent.Component.instanceFor(out);
+        if(typeof out == 'function') return (...args) => out.call(target.event, ...args);
+        return out;
+    }
+});

package/lib/components/_file_importer.js

@@ -0,0 +1 @@
+export { Component as default } from 'pinstripe';

package/lib/components/a.js

@@ -0,0 +1,27 @@
+
+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 };
+            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 };
+        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));
+            if(placeholder != undefined) this.document.preload(new URL(placeholder, frame.url));
+        }
+
+        if(this.is('input, textarea')) this.on('keyup', (event) => this.trigger('click'));
+    }
+};