pinstripe 0.13.0 → 0.14.0

package/lib/commands/generate_project.js

@@ -36,11 +36,29 @@ export default async ({
       await generateFile(`lib/index.js`, () => {
          line();
          line(`import { importAll } from 'pinstripe';`);
+         dependencies.forEach((dependency) => {
+            if(dependency != 'pinstripe') line(`import '${dependency}';`);
+         });
          line();
          line(`importAll(import.meta.url);`);
          line();
       });
 
+      await generateFile(`README.md`, () => {
+         line();
+         line(`# ${name}`);
+         line();
+         line('## Getting started');
+         line();
+         line('```bash');
+         indent(() => {
+            line('pinstripe init-database');
+            line('pinstripe start-server');
+         });
+         line('```');
+         line();
+      });
+
       spawnSync('yarn', [ 'add', ...dependencies ], {
          stdio: 'inherit'
       });

package/lib/commands/list_commands.js

@@ -1,13 +1,11 @@
 
 import chalk from 'chalk';
 
-import { Command } from '../command.js';
-
-export default () => {
+export default ({ commandNames }) => {
     console.log('');
     console.log('The following commands are available:');
     console.log('');
-    Object.keys(Command.classes).sort().forEach(commandName => {
+    commandNames.forEach(commandName => {
         console.log(`  * ${chalk.green(commandName)}`);
     });
     console.log('');

package/lib/commands/list_migrations.js

@@ -1,13 +1,11 @@
 
 import chalk from 'chalk';
 
-import { Migration } from '../database/migration.js'
-
-export default () => {
+export default ({ migrationNames }) => {
     console.log('');
     console.log('The following migrations are available:');
     console.log('');
-    Object.keys(Migration.classes).sort().forEach(migrationName => {
+    migrationNames.forEach(migrationName => {
         console.log(`  * ${chalk.green(migrationName)}`);
     });
     console.log('');

package/lib/commands/list_models.js

@@ -1,13 +1,11 @@
 
 import chalk from 'chalk';
 
-import { Row } from '../database/row.js';
-
-export default () => {
+export default ({ modelNames }) => {
     console.log('');
     console.log('The following models are available:');
     console.log('');
-    Object.keys(Row.classes).sort().forEach(modelName => {
+    modelNames.forEach(modelName => {
         console.log(`  * ${chalk.green(modelName)}`);
     });
     console.log('');

package/lib/commands/list_node_wrappers.js

@@ -1,13 +1,11 @@
 
 import chalk from 'chalk';
 
-import { NodeWrapper } from '../node_wrapper.js';
-
-export default () => {
+export default ({ nodeWrapperNames }) => {
     console.log('');
     console.log('The following node wrappers are available:');
     console.log('');
-    Object.keys(NodeWrapper.classes).sort().forEach(nodeWrapperName => {
+    nodeWrapperNames.forEach(nodeWrapperName => {
         console.log(`  * ${chalk.green(nodeWrapperName)}`);
     });
     console.log('');

package/lib/commands/list_services.js

@@ -1,13 +1,11 @@
 
 import chalk from 'chalk';
 
-import { ServiceFactory } from '../service_factory.js';
-
-export default () => {
+export default ({ serviceNames }) => {
     console.log('');
     console.log('The following services are available:');
     console.log('');
-    Object.keys(ServiceFactory.classes).sort().forEach(serviceName => {
+    serviceNames.forEach(serviceName => {
         console.log(`  * ${chalk.green(serviceName)}`);
     });
     console.log('');

package/lib/commands/list_views.js

@@ -1,13 +1,11 @@
 
 import chalk from 'chalk';
 
-import { View } from '../view.js';
-
-export default () => {
+export default ({ viewNames }) => {
     console.log('');
     console.log('The following views are available:');
     console.log('');
-    Object.keys(View.classes).sort().forEach(viewName => {
+    viewNames.forEach(viewName => {
         console.log(`  * ${chalk.green(viewName)}`);
     });
     console.log('');

package/lib/database/row.js

@@ -175,9 +175,10 @@ export const Row = Base.extend().include({
 
         const submitTitle = 'Save Changes';
         const cancelTitle = 'Cancel';
+        const unsavedChangesConfirm = 'There are unsaved changes are you sure you want to close?';
 
         return {
-            title, fields, submitTitle, cancelTitle,
+            title, fields, submitTitle, cancelTitle, unsavedChangesConfirm,
             
             submit: async (values, success) => {
                 return success(await this.update(values));

package/lib/database/table.js

@@ -227,9 +227,10 @@ export const Table = Base.extend().include({
 
         const submitTitle = title;
         const cancelTitle = 'Cancel';
+        const unsavedChangesConfirm = 'There are unsaved changes are you sure you want to close?';
 
         return {
-            title, fields, submitTitle, cancelTitle,
+            title, fields, submitTitle, cancelTitle, unsavedChangesConfirm,
             
             submit: async (values, success) => {
                 return success(await this.insert(values));

package/lib/initialize.client.js

@@ -2,33 +2,10 @@
 import { NodeWrapper } from './node_wrapper.js';
 
 if(typeof window != 'undefined'){
-    let ready = false;
-
-    function initializeTree(node){
-        NodeWrapper.instanceFor(node).descendants
-    }
-
-    const observer = new MutationObserver(mutations => {
-        if(ready){
-            mutations.forEach(
-                mutation => {
-                    mutation.addedNodes.forEach(node => initializeTree(node));
-                }
-            )
-        }
-    })
-
-    observer.observe(document.documentElement, {
-        attributes: false,
-        childList: true,
-        subtree: true
+    window.addEventListener('DOMContentLoaded', (event) => {
+        const documentNodeWrapper = NodeWrapper.instanceFor(document);
+        documentNodeWrapper.observe({ add: true }, nodeWrapper => nodeWrapper.descendants);
+        documentNodeWrapper.patch(document.documentElement.outerHTML);
     });
-
-    setTimeout(() => {
-        ready = true
-        NodeWrapper.instanceFor(document).patch(
-            document.documentElement.outerHTML
-        );
-    }, 0);
 }
 

package/lib/node_wrapper.js

@@ -45,6 +45,7 @@ export const NodeWrapper = Base.extend().include({
     initialize(node, skipInit = false){
         this.node = node;
         this._registeredEventListeners = [];
+        this._registeredObservers = [];
         this._registeredTimers = [];
         this._virtualNodeFilters = [];
 
@@ -54,6 +55,12 @@ export const NodeWrapper = Base.extend().include({
             this.traverse(normalizeVirtualNode);
         });
 
+        const { autofocus } = this.attributes;
+
+        if(autofocus){
+            this.setTimeout(() => this.node.focus());
+        }
+
         const { autosubmit, trigger } = this.data;
 
         if(autosubmit){
@@ -375,7 +382,45 @@ export const NodeWrapper = Base.extend().include({
     addVirtualNodeFilter(fn){
         this._virtualNodeFilters.push(fn);
         return this;
-    }
+    },
+
+    observe: overload({
+        ['object, function'](options, fn){
+            const { add = false, remove = false, alter = false } = options;
+
+            const observer = new MutationObserver(mutations => {
+                mutations.forEach(
+                    mutation => {
+                        if(mutation.type == 'childList'){
+                            if(add) mutation.addedNodes.forEach(node => fn(NodeWrapper.instanceFor(node), 'add'));
+                            if(remove) mutation.removedNodes.forEach(node => fn(NodeWrapper.instanceFor(node), 'remove'));
+                        }
+                        if(mutation.type == 'attributes' && alter){
+                            fn(NodeWrapper.instanceFor(mutation.target), 'alter', mutation.attributeName);
+                        }
+                        if(mutation.type == 'characterData' && alter){
+                            fn(NodeWrapper.instanceFor(mutation.target), 'alter', 'value');
+                        }
+                    }
+                )
+            });
+        
+            observer.observe(this.node, {
+                attributes: alter,
+                characterData: 'alter',
+                childList: add || remove,
+                subtree: true
+            });
+    
+            this._registeredObservers.push(observer);
+
+            return this;
+        },
+
+        function(fn){
+            return this.observe({ add: true, remove: true, alter: true }, fn);
+        }
+    })
 });
 
 function cleanChildren(){
@@ -391,6 +436,10 @@ function clean(){
         this.node.removeEventListener(...this._registeredEventListeners.pop());
     }
 
+    while(this._registeredObservers.length){
+        this._registeredObservers.pop().disconnect();
+    }
+
     clearTimers.call(this);
 
     if(this._overlayChild) this._overlayChild.remove();
@@ -427,8 +476,8 @@ function createVirtualNode(html){
 }
 
 function patch(attributes, virtualChildren){
-    if(this.is('.progress-bar')) return;
-    const isEmptyFrame = this.is('.frame') && virtualChildren.length == 0;
+    if(this.is('.ps-progress-bar')) return;
+    const isEmptyFrame = this.is('.ps-frame') && virtualChildren.length == 0;
     if(isEmptyFrame && attributes['data-load-on-init'] === undefined){
         attributes['data-load-on-init'] = 'true';
     }

package/lib/node_wrappers/anchor.client.js

@@ -14,5 +14,7 @@ export default {
             if(action == 'load') loadFrame.call(this, confirm, target, method, href);
             if(action == 'remove') removeFrame.call(this, confirm, target);
         });
+
+        if(this.is('input, textarea')) this.on('keyup', (event) => this.trigger('click'));
     }
 };

package/lib/node_wrappers/form.client.js

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

package/lib/node_wrappers/markdown_editor.client.js

@@ -13,6 +13,13 @@ export default {
         
         const previewFrame = this.frame.descendants.find(n => n.is('.ps-markdown-editor-preview-pane'));
 
+        previewFrame.observe((current) => {
+            while(current.parent && current.parent != previewFrame) {
+                current = current.parent;
+            }
+            if(current.node.scrollIntoView) current.node.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
+        })
+
         this.on('submit', () => {
             const { value } = this.values;
             previewFrame.load({ _method: 'post', value });

package/lib/node_wrappers/overlay.client.js

@@ -16,7 +16,20 @@ export default {
     },
 
     remove(...args){
+        if(window.getSelection().type == 'Range') return;
+
+        let canRemove = true;
+        this.descendants.filter(n => n.isForm).forEach(({ hasUnsavedChanges, data: { unsavedChangesConfirm } }) => {
+            if(hasUnsavedChanges && unsavedChangesConfirm && !confirm(unsavedChangesConfirm)){
+                canRemove = false;
+            }
+        })
+        if(!canRemove) return;
+
         this.constructor.parent.prototype.remove.call(this, ...args);
+
+        delete this.parent._overlayChild;
+        
         if(!this.document.descendants.find(node => node.is('body')).children.filter((child) => child.is('.ps-overlay')).length){
             this.document.descendants.filter(node => node.is('html')).forEach(node => {
                 node.removeClass('ps-has-overlay');

package/lib/services/command_names.js

@@ -0,0 +1,6 @@
+
+import { Command } from '../command.js';
+
+export default () => {
+    return Object.keys(Command.classes).sort();
+};

package/lib/services/config.js

@@ -1,6 +1,5 @@
 
 export default async ({ project }) => {
-
     if(process.env.DATABASE_ADAPTER == 'mysql'){
         return {
             database: {

package/lib/services/migration_names.js

@@ -0,0 +1,6 @@
+
+import { Migration } from '../database/migration.js'
+
+export default () => {
+    return Object.keys(Migration.classes).sort();
+};

package/lib/services/model_names.js

@@ -0,0 +1,6 @@
+
+import { Row } from '../database/row.js';
+
+export default () => {
+    return Object.keys(Row.classes).sort();
+};

package/lib/services/node_wrapper_names.js

@@ -0,0 +1,6 @@
+
+import { NodeWrapper } from '../node_wrapper.js';
+
+export default () => {
+    return Object.keys(NodeWrapper.classes).sort();
+};

package/lib/services/render_form.js

@@ -50,6 +50,7 @@ export default {
         const fields = extractFields(formAdapter, options);
         const submitTitle = options.submitTitle || formAdapter.submitTitle;
         const cancelTitle = options.cancelTitle || formAdapter.cancelTitle;
+        const unsavedChangesConfirm = options.unsavedChangesConfirm || formAdapter.unsavedChangesConfirm;
 
         const indexedFields = indexFieldsByName(fields);
         const otherErrors = [];
@@ -72,67 +73,74 @@ export default {
         return renderHtml`
             <div class="ps-modal" data-node-wrapper="anchor" data-action="remove" data-ignore-events-from-children="true">
                 <button data-node-wrapper="anchor" data-action="remove"></button>
-                <form method="post" enctype="multipart/form-data" autocomplete="off">
-                    <header>
-                        <p>${title}</p>
-                    </header>
-                    <section>
-                        ${() => {
-                            if(otherErrors.length){
+                <form
+                    class="ps-card"
+                    method="post"
+                    enctype="multipart/form-data"
+                    autocomplete="off"
+                    ${unsavedChangesConfirm ? renderHtml`data-unsaved-changes-confirm="${unsavedChangesConfirm}"` : undefined}
+                    ${unsavedChangesConfirm && params._method == 'POST' ? renderHtml`data-has-unsaved-changes="true"` : undefined}
+                >
+                        <div class="ps-card-header">
+                            <p class="ps-card-header-title">${title}</p>
+                        </div>
+                        <div class="ps-card-body">
+                            ${() => {
+                                if(otherErrors.length){
+                                    return renderHtml`
+                                        <div class="ps-field">
+                                            ${otherErrors.map(error => renderHtml`
+                                                <p class="ps-is-error">${error}</p>
+                                            `)}
+                                        </div>
+                                    `
+                                }
+                            }}
+                            ${fields.map(({ label, name, type, value, error }) => {
+                                if(type == 'hidden'){
+                                    return renderHtml`
+                                        <input type="hidden" name="${name}" value="${value}">
+                                    `;
+                                }
                                 return renderHtml`
-                                    <div class="ps-field">
-                                        ${otherErrors.map(error => renderHtml`
-                                            <p class="ps-is-error">${error}</p>
-                                        `)}
+                                    <div>
+                                        <label class="ps-label">${label}</label>
+                                        ${() => {
+                                            if(type == 'textarea'){
+                                                return renderHtml`
+                                                    <textarea class="ps-textarea${error ? ' ps-is-error' : ''}" name="${name}">${value}</textarea>
+                                                `
+                                            }
+                                            if(type == 'markdown'){
+                                                return renderHtml`
+                                                    <textarea class="ps-textarea${error ? ' ps-is-error' : ''}" name="${name}" data-node-wrapper="anchor" data-target="_overlay" data-href="&_part=markdown-editor">${value}</textarea>
+                                                `
+                                            }
+                                            if(type == 'checkbox'){
+                                                return renderHtml`
+                                                    <input class="ps-input${error ? ' ps-is-error' : ''}" type="checkbox" name="${name}" type="${type}" ${value ? 'checked' : ''} />
+                                                `
+                                            }
+                                            return renderHtml`
+                                                <input class="ps-input${error ? ' ps-is-error' : ''}" name="${name}" type="${type}" value="${value}">
+                                            ` 
+                                        }}
+                                        ${() => {
+                                            if(error){
+                                                return renderHtml`
+                                                    <p class="ps-is-error">${error}</p>
+                                                `
+                                            }
+                                        }}
                                     </div>
-                                `
-                            }
-                        }}
-                        ${fields.map(({ label, name, type, value, error }) => {
-                            if(type == 'hidden'){
-                                return renderHtml`
-                                    <input type="hidden" name="${name}" value="${value}">
                                 `;
-                            }
-                            return renderHtml`
-                                <div>
-                                    <label class="ps-label">${label}</label>
-                                    ${() => {
-                                        if(type == 'textarea'){
-                                            return renderHtml`
-                                                <textarea class="ps-textarea${error ? ' ps-is-error' : ''}" name="${name}">${value}</textarea>
-                                            `
-                                        }
-                                        if(type == 'markdown'){
-                                            return renderHtml`
-                                                <textarea class="ps-textarea${error ? ' ps-is-error' : ''}" name="${name}" data-node-wrapper="anchor" data-target="_overlay" data-href="&_part=markdown-editor">${value}</textarea>
-                                            `
-                                        }
-                                        if(type == 'checkbox'){
-                                            return renderHtml`
-                                                <input class="ps-input${error ? ' ps-is-error' : ''}" type="checkbox" name="${name}" type="${type}" ${value ? 'checked' : ''} />
-                                            `
-                                        }
-                                        return renderHtml`
-                                            <input class="ps-input${error ? ' ps-is-error' : ''}" name="${name}" type="${type}" value="${value}">
-                                        ` 
-                                    }}
-                                    ${() => {
-                                        if(error){
-                                            return renderHtml`
-                                                <p class="ps-is-error">${error}</p>
-                                            `
-                                        }
-                                    }}
-                                </div>
-                            `;
-                        })}
-                    </section>
-                    <footer>
-                        <button class="ps-button" type="submit">${submitTitle}</button>
-                        <button class="ps-button" data-node-wrapper="anchor" data-action="remove">${cancelTitle}</button>
-                    </footer>
-                </form>
+                            })}
+                        </div>
+                        <div class="ps-card-footer">
+                            <button class="ps-button" type="submit">${submitTitle}</button>
+                            <button class="ps-button" data-node-wrapper="anchor" data-action="remove">${cancelTitle}</button>
+                        </div>
+                    </div>
             </div>
         `;
     },

package/lib/services/render_table.js

@@ -26,15 +26,16 @@ export default ({ overload, renderList, renderHtml, params: { _headers = {} } })
                     return renderHtml`
                         <div class="ps-modal" data-node-wrapper="anchor" data-action="remove" data-ignore-events-from-children="true">
                             <button data-node-wrapper="anchor" data-action="remove"></button>
-                                <header>
+                             <div class="ps-card-body">
+                                <div class="ps-card-title">
                                     <p>${name}</p>
-                                </header>
-                                <div>
+                                </div>
+                                <div class="ps-card-body">
                                     ${out}
                                 </div>
-                                <footer>
+                                <div class="ps-card-footer">
                                     <button class="button" data-action="remove">Close</button>
-                                </footer>
+                                </div>
                             </div>
                         </div>
                     `;

package/lib/services/send_mail.js

@@ -0,0 +1,32 @@
+
+import { createTransport } from 'nodemailer';
+import chalk from 'chalk';
+
+export default async ({ config }) => {
+    const { mail: mailConfig = {} } = await config;
+    const transport = createTransport(mailConfig);
+    return (mailOptions = {}) => {
+        if(process.env.NODE_ENV == 'production') return transport.sendMail(mailOptions);
+        const { text, html, ...otherMailOptions } = mailOptions;
+        console.log('');
+        console.log('----------------------------------------');
+        console.log(chalk.green('sendMail'));
+        console.log('----------------------------------------');
+        Object.keys(otherMailOptions).forEach(name => {
+            console.log(`${name}: ${JSON.stringify(otherMailOptions[name])}`)
+        });
+        if(text){
+            console.log('text:')
+            console.log(text.replace(/(^|\n)/g, '$1  '));
+        }
+        if(html){
+            console.log('html:')
+            console.log(html.replace(/(^|\n)/g, '$1  '));
+        }
+        if(!Object.keys(mailOptions).length){
+            console.log('No mail options have been provided.')
+        }
+        console.log('----------------------------------------');
+        console.log('');
+    };
+};

package/lib/services/service_names.js

@@ -0,0 +1,6 @@
+
+import { ServiceFactory } from '../service_factory.js';
+
+export default () => {
+    return Object.keys(ServiceFactory.classes).sort();
+};

package/lib/services/stylesheet_view_names.js

@@ -0,0 +1,10 @@
+
+export default ({ viewNames }) => {
+    const nonComponentStylesheetViewNames = [
+        'stylesheets/vars.css',
+        'stylesheets/reset.css',
+        'stylesheets/global.css',
+    ];
+    const componentStylesheetViewNames = viewNames.filter(viewName => viewName.match(/\.css$/) && !nonComponentStylesheetViewNames.includes(viewName))
+    return [ ...nonComponentStylesheetViewNames, ...componentStylesheetViewNames ];
+};

package/lib/services/view_names.js

@@ -0,0 +1,6 @@
+
+import { View } from '../view.js';
+
+export default () => {
+    return Object.keys(View.classes).sort();
+};

package/lib/views/_layout.js

@@ -1,10 +1,12 @@
 
-export default async ({ params: { title, body, isSignedIn, user }, renderHtml }) => renderHtml`
+export default async ({ params: { title, body, isSignedIn, user }, renderHtml, stylesheetViewNames }) => renderHtml`
     <!DOCTYPE html>
     <html>
         <head>
             <title>${title}</title>
-            <link rel="stylesheet" href="/base.css">
+            ${stylesheetViewNames.map(viewName => renderHtml`
+                <link rel="stylesheet" href="/${viewName}">
+            `)}
             <script src="/bundle.js"></script>
         </head>
         <body>

package/lib/views/sign_in.js

@@ -1,10 +1,5 @@
 
 import * as crypto from 'crypto';
-import * as uuid from 'uuid';
-
-if(!crypto.randomUUID){
-    crypto.randomUUID = uuid.v4;
-}
 
 export default async ({ renderForm, database, renderHtml }) => renderForm({
     title: 'Sign In',