pinstripe 0.26.0 → 0.29.0

package/lib/commands/generate_service.js

@@ -0,0 +1,34 @@
+
+export default {
+    async run(){
+        const [ name = '' ] = this.args;
+        if(name == ''){
+            console.error('A service name must be given.');
+            process.exit();
+        }
+    
+        const { inProjectRootDir, generateFile, line, indent } = this.fsBuilder;
+    
+        await inProjectRootDir(async () => {
+    
+            await generateFile(`lib/services/_file_importer.js`, { skipIfExists: true }, () => {
+                line();
+                line(`export { ServiceFactory as default } from 'pinstripe';`);
+                line();
+            });
+    
+            await generateFile(`lib/services/${this.inflector.snakeify(name)}.js`, () => {
+                line(`export default {`);
+                indent(() => {
+                    line('create(){');
+                    indent(() => {
+                        line(`return 'Example ${this.inflector.camelize(name)} service'`);
+                    });
+                    line('}');
+                });
+                line('};');
+            });
+    
+        });
+    }
+};

package/lib/commands/generate_static_site.js

@@ -0,0 +1,94 @@
+
+import { default as mimeTypes } from 'mime-types';
+
+import { App, View } from 'pinstripe';
+
+export default {
+    async run(){
+
+        const { extractOptions } = this.cliUtils;
+
+        const { app = 'main' } = extractOptions();
+
+        const { viewNames } = View.mapperFor(App.create(app, this.context).compose());
+
+        this.pages = {};
+        const urls = viewNames.filter(path => !path.match(/(^|\/)_/)).map(path => {
+            return new URL(path, 'http://127.0.0.1/');
+        });
+
+        urls.push(new URL('http://127.0.0.1/404'));
+
+        while(urls.length){
+            await this.crawlPage({ _url: urls.shift(), _headers: { 'x-app': app } });
+        }
+
+        const pages = Object.values(this.pages).filter(page => {
+            const { _method, _url, _headers, ...otherParams } = page.params;
+            return _url.pathname == '/404' || (page.status == 200 && !Object.keys(otherParams).length)
+        });
+
+        const { inProjectRootDir, generateDir, generateFile, echo } = this.fsBuilder;
+
+        const isGenerated = {};
+
+        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/'), _headers: { 'x-app': app } }))[2];
+
+                    if(!isGenerated[filePath]){
+                        isGenerated[filePath] = true;
+                        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, _headers: params._headers, _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,80 @@
+
+import { View } from 'pinstripe';
+import { readFile } from 'fs/promises';
+
+export default {
+    async run(){
+        const [ name = '' ] = this.args;
+        let normalizedName = name.replace(/^\//, '');
+        if(name == ''){
+            console.error('A view name must be given.');
+            process.exit();
+        }
+
+        const existingFilePaths = [ ...View.for(normalizedName).filePaths ];
+        const existingFilePath = existingFilePaths.pop();
+        const existingFileExtension = (existingFilePath ? existingFilePath.match(/^.*\.([^\/]+)$/) : [])[1];
+        if(!normalizedName.match(/\.[^\/]+$/)){
+            if(existingFileExtension) {
+                normalizedName = `${normalizedName}.${existingFileExtension}`;
+            } else {
+                normalizedName = `${normalizedName}.js`;
+            }
+        }
+
+        const normalizedNameExtension = normalizedName.match(/^.*\.([^\/]+)$/)[1];
+
+        const useExistingFile = normalizedNameExtension == existingFileExtension;
+    
+        const existingFileData = useExistingFile ? (await readFile(existingFilePath)).toString('utf8') : '';
+
+        const { inProjectRootDir, generateFile, line, indent, echo } = 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}`, () => {
+                if(useExistingFile){
+                    echo(existingFileData);
+                } else if(normalizedNameExtension == 'js') {
+                    line();
+                    line('export const styles = `');
+                    indent(() => {
+                        line(".root {");
+                        indent(() => {
+                            line("background: yellow;");
+                        });
+                        line("}");
+                    });
+                    line('`;');
+                    line();
+                    line('export default {');
+                    indent(() => {
+                        line('render(){')
+                        indent(() => {
+                            line('return this.renderHtml`')
+                            indent(() => {
+                                line('<div class="${this.cssClasses.root}">');
+                                indent(() => {
+                                    line(`<h1>${normalizedName} view</h1>`);
+                                });
+                                line(`</div>`)
+                            });
+                            line('`;');
+                        });
+                        line('}');
+                    });
+                    line('};');
+                    line();
+                } else {
+                    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/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,10 +1,13 @@
 
+import { fileURLToPath } from 'url'; // pinstripe-if-client: const fileURLToPath = undefined;
+
 import { Class } from './class.js';
-import { TEXT_ONLY_TAGS } from './constants.js';
+import { TEXT_ONLY_TAGS, IS_SERVER } 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(){
@@ -17,9 +20,15 @@ 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
                     );
+                    (node._component.attributes.class || '').trim().split(/\s+/).forEach((className) => {
+                        const decoratorMethodName = `.${className}`;
+                        if(typeof node._component[decoratorMethodName] == 'function'){
+                            node._component[decoratorMethodName]();
+                        }
+                    });
                     if(node.isConnected) node._component.trigger('init', { bubbles: false });
                 }
                 return node._component;
@@ -29,6 +38,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){
@@ -236,6 +269,14 @@ export const Component = Class.extend().include({
         return this.parents.find(({ isOverlay }) => isOverlay);
     },
 
+    get modal(){
+        return this.parents.find(({ isModal }) => isModal);
+    },
+
+    get form(){
+        return this.parents.find(({ isForm }) => isForm);
+    },
+
     get shadow(){
         if(!this.node.shadowRoot){
             this.node.attachShadow({ mode: 'open' });
@@ -403,7 +444,7 @@ export const Component = Class.extend().include({
     },
 
     async fetch(url, options = {}){
-        const { minimumDelay = 0, ...otherOptions } = options;
+        const { minimumDelay = 0, requiresProofOfWork = false, ...otherOptions } = options;
         const { progressBar } = this.document;
         const frame = this.frame || this;
         const normalizedUrl = new URL(url, frame.url);
@@ -417,6 +458,12 @@ export const Component = Class.extend().include({
             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, abortController.signal))
+            }
             const promises = [
                 fetch(normalizedUrl, { signal: abortController.signal, ...otherOptions }), 
                 new Promise(resolve => minimumDelayTimeout = setTimeout(resolve, minimumDelay))
@@ -645,6 +692,58 @@ 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';
+        }
+    }
+}
+
+async function generateProofOfWork(values, abortSignal){
+    const stringifiedValues = JSON.stringify(values);
+    const timestamp = getUTCTimestamp();
+    const random = btoa(`${Math.random()}`);
+    let counter = 0;
+    while(!abortSignal.aborted){
+        const candidateSolution = `1:20:${timestamp}:?::${random}:${btoa(`${counter}`)}`;
+        const hash = await createSha1Hash(candidateSolution.replace(/\?/, stringifiedValues));
+        if(hash.match(/^00000/)) return candidateSolution;
+        counter++;
+    }
+    return '';
+}
+
+function getUTCTimestamp() {
+    const now = new Date();
+  
+    const year = now.getUTCFullYear() % 100;
+    const month = String(now.getUTCMonth() + 1).padStart(2, '0');
+    const day = String(now.getUTCDate()).padStart(2, '0');
+    const hours = String(now.getUTCHours()).padStart(2, '0');
+    const minutes = String(now.getUTCMinutes()).padStart(2, '0');
+    const seconds = String(now.getUTCSeconds()).padStart(2, '0');
+  
+    return `${year}${month}${day}${hours}${minutes}${seconds}`;
+  }
+  
+
+async function createSha1Hash(input) {
+    const buffer = new TextEncoder().encode(input);
+    const hashArray = Array.from(new Uint8Array(await crypto.subtle.digest('SHA-1', buffer)));
+    return hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
 }
 
 ComponentEvent.Component = Component;

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){
+export function loadFrame(confirm, target, method, url, placeholderUrl, requiresProofOfWork = false){
     if(confirm && !window.confirm(confirm)){
         return;
     }
@@ -20,20 +20,20 @@ export function loadFrame(confirm, target, method, url, placeholderUrl){
         if(!frame) return;
     }
 
-    url = new URL(url || frame.url, this.frame.url);
+    url = normalizeUrl(url || frame.url, this.frame.url);
     if(url.protocol != 'data:' && (url.host != frame.url.host || url.port != frame.url.port)){
         return;
     }
 
-    if(placeholderUrl) placeholderUrl = new URL(placeholderUrl, this.frame.url);
+    if(placeholderUrl) placeholderUrl = normalizeUrl(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, placeholderUrl });
+        frame.load(url, { method, body: formData, placeholderUrl, requiresProofOfWork });
     } else {
-        frame.load(url, { method, placeholderUrl });
+        frame.load(url, { method, placeholderUrl, requiresProofOfWork });
     }    
 }
 
@@ -46,3 +46,16 @@ export function getFrame(target){
     }
     return this.frame.descendants.find(n => n.isFrame && n.data.name == target);
 }
+
+export function normalizeUrl(url, referenceUrl = window.location){
+    const matches = `${url}`.match(/^&(.*)$/);
+    const out = matches ? new URL(referenceUrl) : new URL(url, referenceUrl);
+    if(matches){
+        if(out.search){
+            out.search = `${out.search}&${matches[1]}`;
+        } else {
+            out.search = `?${matches[1]}`;
+        }
+    }
+    return out;
+}

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

@@ -1,12 +1,12 @@
 
-import { loadFrame, getFrame } from "./helpers.js";
+import { loadFrame, getFrame, normalizeUrl } from "./helpers.js";
 
 export default {
     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(new URL(href, window.location.href).host != window.location.host) return;
+            if(normalizeUrl(href, window.location.href).host != window.location.host) return;
             event.preventDefault();
             event.stopPropagation();
             loadFrame.call(this, confirm, target, method, href, placeholder);
@@ -15,8 +15,8 @@ export default {
         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));
-            if(placeholder != undefined) this.document.preload(new URL(placeholder, frame.url));
+            if(preload != undefined) this.document.preload(normalizeUrl(href, frame.url));
+            if(placeholder != undefined) this.document.preload(normalizeUrl(placeholder, frame.url));
         }
 
         if(this.is('input, textarea')) this.on('keyup', (event) => this.trigger('click'));