pinstripe 0.23.0 → 0.24.1

package/lib/app.js

@@ -0,0 +1,35 @@
+
+import { Class } from './class.js';
+import { Registry } from './registry.js';
+import { View } from './view.js';
+import { ServiceConsumer } from './service_consumer.js';
+
+export const App = Class.extend().include({
+    meta(){
+        this.include(Registry);
+        this.include(ServiceConsumer);
+    },
+
+    compose(){
+        return [];
+    },
+
+    get viewMapper(){
+        if(!this._viewMapper){
+            this._viewMapper = View.mapperFor(this.compose());
+        }
+        return this._viewMapper;
+    },
+
+    renderView(...args){
+        return this.viewMapper.renderView(this.context, ...args);
+    },
+
+    isView(...args){
+        return this.viewMapper.isView(...args);
+    },
+
+    get viewNames(){
+        return this.viewMapper.viewNames;
+    }
+});

package/lib/apps/_file_importer.js

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

package/lib/apps/docs.js

@@ -0,0 +1,6 @@
+
+export default {
+    compose(){
+        return ['shared', 'docs'];
+    }
+};

package/lib/apps/main.js

@@ -0,0 +1,6 @@
+
+export default {
+    compose(){
+        return ['shared', 'main'];
+    }
+};

package/lib/command.js

@@ -10,7 +10,9 @@ export const Command = Class.extend().include({
         this.include(ServiceConsumer);
 
         this.assignProps({
-            normalizeName: (...args) => inflector.dasherize(...args),
+            normalizeName(name){
+                return inflector.dasherize(name);
+            },
 
             get schedules(){
                 if(!this.hasOwnProperty('_schedules')){

package/lib/commands/generate_app.js

@@ -0,0 +1,41 @@
+
+
+export default {
+    async run(){
+        const [ name = '' ] = this.args;
+        const normalizedName = this.inflector.snakeify(name);
+        if(normalizedName == ''){
+            console.error('An app name must be given.');
+            process.exit();
+        }
+
+        const { inProjectRootDir, generateFile, line, indent } = this.fsBuilder;
+    
+        await inProjectRootDir(async () => {
+    
+            await generateFile(`lib/apps/_file_importer.js`, { skipIfExists: true }, () => {
+                line();
+                line(`export { App as default } from 'pinstripe';`);
+                line();
+            });
+    
+            await generateFile(`lib/apps/${normalizedName}.js`, () => {
+                line();
+                line(`export default {`);
+                indent(() => {
+                    line('compose(){');
+                    indent(() => {
+                        line(`return ['shared', '${this.inflector.dasherize(normalizedName)}'];`);
+                    });
+                    line('}');
+                });
+                line('};');
+                line();
+            });
+    
+        });
+
+        await this.runCommand('generate-view', `${normalizedName}/index`);
+    }
+}
+

package/lib/commands/generate_component.js

@@ -1,10 +1,10 @@
 
 export default {
     async run(){
-        const [ name = '' ] = this.args;
-        const normalizedName = this.inflector.snakeify(name);
-        if(normalizedName == ''){
-            console.error('A node wrapper name must be given.');
+        const { extractArg } = this.cliUtils;
+        const name = this.inflector.snakeify(extractArg(''));
+        if(name == ''){
+            console.error('A component name must be given.');
             process.exit();
         }
     
@@ -17,21 +17,35 @@ export default {
                 line(`export { Component as default } from 'pinstripe';`);
                 line();
             });
-    
-            await generateFile(`lib/components/${normalizedName}.js`, () => {
+
+            await generateFile(`lib/components/${name}.js`, () => {
                 line();
                 line(`export default {`);
                 indent(() => {
-                    line(`initialize(){`);
+                    line(`initialize(...args){`);
                         indent(() => {
                             line(`this.constructor.parent.prototype.initialize.call(this, ...args);`);
+                            line();
+                            line('this.shadow.patch(`');
+                            indent(() => {
+                                line(`<style>`);
+                                indent(() => {
+                                    line(`.root {`);
+                                    indent(() => {
+                                        line(`background: yellow;`)
+                                    })
+                                    line(`}`);
+                                });
+                                line(`</style>`);
+                                line(`<div class="root"><slot></div>`);
+                            });
+                            line('`);');
                         });
                     line(`}`);
                 });
                 line('};');
                 line();
             });
-    
         });
     }
 }

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_views.js

@@ -1,11 +1,34 @@
 
 import chalk from 'chalk';
-import { View } from 'pinstripe';
+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(`The following views are available:`);
         console.log('');
         View.names.forEach(viewName => {
             console.log(`  * ${chalk.green(viewName)}`);

package/lib/commands/start_server.js

@@ -1,9 +1,31 @@
 
 export default {
     run(){
-        this.server.start();
-    
-        //TODO: be able to pass a --without-bot option
-        this.bot.start();
+        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

@@ -13,8 +13,6 @@ export const Component = Class.extend().include({
     meta(){
         this.include(Registry);
 
-        const { importFile } = this;
-
         this.assignProps({
             instanceFor(node){
                 if(!node._component){
@@ -30,24 +28,32 @@ export const Component = Class.extend().include({
 
             normalizeName(name){
                 return Inflector.instance.dasherize(name);
-            },
-
-            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);
             }
         });
+
+        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){
@@ -70,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(() => {
@@ -83,6 +90,7 @@ export const Component = Class.extend().include({
             }, 100);
         }
 
+        // replace with script?
         if(trigger){
             this.setTimeout(() => {
                 this.trigger(trigger);
@@ -148,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)
@@ -267,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(){
@@ -277,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);
@@ -351,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;
     },
@@ -440,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){
@@ -480,7 +498,6 @@ export const Component = Class.extend().include({
         const [ collection, selector ] = args;
         return this[collection].filter(item => item.is(selector));
     }
-
 });
 
 const matchesSelector = (() => {
@@ -497,6 +514,8 @@ function cleanChildren(){
 }
 
 function clean(){
+    this.trigger('clean', { bubbles: false });
+
     [...this.node.childNodes].forEach(node => node._component && clean.call(node._component));
 
     while(this._registeredEventListeners.length){
@@ -572,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];

package/lib/components/a.js

@@ -1,5 +1,5 @@
 
-import { loadFrame, removeFrame } from "./helpers.js";
+import { loadFrame, getFrame } from "./helpers.js";
 
 export default {
     initialize(...args){
@@ -8,14 +8,20 @@ export default {
         const { ignoreEventsFromChildren = false } = this.data;
         this.on('click', (event) => {
             if(ignoreEventsFromChildren && event.target != this) return;
-            const { action = 'load', confirm, target = '_self', method = 'GET', href } = { ...this.attributes, ...this.data };
+            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();
-            if(action == 'load') loadFrame.call(this, confirm, target, method, href);
-            if(action == 'remove') removeFrame.call(this, confirm, target);
+            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'));
     }
-};
+};

package/lib/components/document.js

@@ -1,4 +1,8 @@
 
+import { loadCache } from "./helpers.js";
+
+const preloading = {};
+
 export default {
     meta(){
         this.include('pinstripe-frame');
@@ -25,8 +29,8 @@ export default {
         return this.body.progressBar;
     },
 
-    async load(url, options = {}){
-        const { replace, method = 'GET', headers = {}, ...otherOptions } = options;
+    async load(url = this.url.toString(), options = {}){
+        const { replace, method = 'GET' } = options;
         const previousUrl = this.url.toString();
         const normalizedUrl = new URL(url, previousUrl).toString();
 
@@ -39,11 +43,16 @@ export default {
             }
         }
 
-        return this.constructor.for('pinstripe-frame').prototype.load.call(this, url, Object.assign({
-            method,
-            headers: Object.assign({
-                'x-pinstripe-frame-type': 'document'
-            }, headers)
-        }, otherOptions));
+        return this.constructor.for('pinstripe-frame').prototype.load.call(this, url, options);
+    },
+
+    async preload(url){
+        if(loadCache.get(url.toString())) return;
+        if(preloading[url.toString()]) return;
+        preloading[url.toString()] = true;
+        const response = await fetch(url);
+        const html = await response.text();
+        loadCache.put(url.toString(), html);
+        delete preloading[url.toString()];
     }
 };

package/lib/components/helpers.js

@@ -1,5 +1,9 @@
 
-export function loadFrame(confirm, target, method, url){
+import { LruCache } from '../lru_cache.js';
+
+export const loadCache = LruCache.new();
+
+export function loadFrame(confirm, target, method, url, placeholderUrl){
     if(confirm && !window.confirm(confirm)){
         return;
     }
@@ -21,31 +25,24 @@ export function loadFrame(confirm, target, method, url){
         return;
     }
 
+    if(placeholderUrl) placeholderUrl = new URL(placeholderUrl, this.frame.url);
+
     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 });
+        frame.load(url, { method, body: formData, placeholderUrl });
     } else {
-        frame.load(url, { method });
+        frame.load(url, { method, placeholderUrl });
     }    
 }
 
-export function removeFrame(confirm, target){
-    if(confirm && !window.confirm(confirm)){
-        return;
-    }
-
-    const frame = getFrame.call(this, target);
-    if(frame) frame.remove();
-}
-
-function getFrame(target){
+export function getFrame(target){
     if(target == '_self') return this.frame;
     if(target == '_top') return this.document;
     if(target.match(/^_parent/)){
         const index = target.split(/_/).length - 1;
         return this.parents.filter(n => n.isFrame)[index];
     }
-    return this.frame.decendants.find(n => n.isFrame && n.data.name == target);
+    return this.frame.descendants.find(n => n.isFrame && n.data.name == target);
 }

package/lib/components/pinstripe_frame.js

@@ -1,4 +1,6 @@
 
+import { loadCache } from "./helpers.js";
+
 export default {
     initialize(...args){
         this.constructor.parent.prototype.initialize.call(this, ...args);
@@ -30,18 +32,29 @@ export default {
         );
     },
 
+    loading: false,
+
     async load(url = this.url, options = {}){
+        if(this.loading) 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;
+        let minimumDelay = 0;
+        if(!cachedHtml && placeholderUrl){
+            const placeholderHtml = loadCache.get(placeholderUrl.toString());
+            if(placeholderHtml) {
+                this.patch(placeholderHtml);
+                minimumDelay = 300;
+            }
+        }
         this.url = url;
-
-        const { headers = {}, ...otherOptions } = options;
-        const response = await this.fetch(url, Object.assign({
-            headers: Object.assign({
-                'x-pinstripe-frame-type': 'basic'
-            }, headers)
-        }, otherOptions));
-
-        return this.patch(await response.text());
+        const response = await this.fetch(url, { minimumDelay, ...options });
+        const html = await response.text();
+        this.loading = false;
+        if(html == cachedHtml) return out;
+        if(method == 'GET') loadCache.put(url.toString(), html);
+        this.patch(html);
     }
 };

package/lib/components/pinstripe_markdown_editor.js

@@ -1,5 +1,6 @@
 
-import { Component } from '../component.js'
+import { Component } from '../component.js';
+import { Markdown } from '../markdown.js';
 
 export default {
     initialize(...args){
@@ -24,9 +25,7 @@ export default {
     
         this.on('submit', () => {
             const { value } = this.values;
-            const formData = new FormData();
-            formData.append('value', value);
-            previewFrame.load(previewFrame.url, { method: 'POST', body: formData });
+            previewFrame.patch(Markdown.render(value).toString());
             anchorTextarea.value = value;
         });
     },