@webqit/webflo 0.11.61 → 0.20.2-next.0

package/src/config-pi/runtime/Server.js

@@ -20,16 +20,22 @@ export default class Server extends Dotfile {
     withDefaults(config) {
         return this.merge({
             port: process.env.PORT || 3000,
-            domains: [],
+            hostnames: [],
             https: {
                 port: process.env.SSL_PORT || 0,
-                domains: [],
+                hostnames: [],
                 keyfile: '/etc/letsencrypt/live/[domain]/privkey.pem',
                 certfile: '/etc/letsencrypt/live/[domain]/fullchain.pem',
                 force: false,
             },
             force_www: '',
-            oohtml_support: 'full',
+            capabilities: {
+                database: false,
+                database_dialect: 'postgres',
+                redis: false,
+                webpush: false,
+                vapid_subject: 'mailto:foo@example.com',
+            },
         }, config, 'patch');
     }
 
@@ -42,13 +48,6 @@ export default class Server extends Dotfile {
                 {value: 'add',},
                 {value: 'remove',},
             ],
-            oohtml_support: [
-                {value: 'full', title: 'full'},
-                {value: 'namespacing', title: 'namespacing'},
-                {value: 'scripting', title: 'scripting'},
-                {value: 'templating', title: 'templating'},
-                {value: 'none', title: 'none'},
-            ],
         }, choices, 'patch');
         // Questions
         return [
@@ -60,9 +59,10 @@ export default class Server extends Dotfile {
                 validation: ['important'],
             },
             {
-                name: 'domains',
+                name: 'hostnames',
                 type: 'list',
-                message: '[domains]: Enter a list of allowed domains if necessary (comma-separated)',
+                message: '[hostnames]: Enter a list of allowed hostnames if necessary (comma-separated)',
+                initial: (config.hostnames || []).join(', '),
                 validation: ['important'],
             },
             {
@@ -98,9 +98,9 @@ export default class Server extends Dotfile {
                         validation: ['important'],
                     },
                     {
-                        name: 'domains',
+                        name: 'hostnames',
                         type: 'list',
-                        message: '[domains]: Enter the CERT domains (comma-separated)',
+                        message: '[hostnames]: Enter the CERT hostnames (comma-separated)',
                         validation: ['important'],
                     },
                     {
@@ -113,12 +113,44 @@ export default class Server extends Dotfile {
                 ],
             },
             {
-                name: 'oohtml_support',
-                type: 'select',
-                message: '[oohtml_support]: Specify OOHTML support level',
-                choices: CHOICES.oohtml_support,
-                initial: this.indexOfInitial(CHOICES.oohtml_support, config.oohtml_support),
-                validation: ['important'],
+                name: 'capabilities',
+                controls: {
+                    name: 'capabilities',
+                },
+                initial: config.capabilities,
+                schema: [
+                    {
+                        name: 'database',
+                        type: 'toggle',
+                        message: 'Add database integration?',
+                        active: 'YES',
+                        inactive: 'NO',
+                    },
+                    {
+                        name: 'database_dialect',
+                        type: (prev, answers) => !answers.database ? null : 'text',
+                        message: 'Enter the database dialect (postgres for now)',
+                    },
+                    {
+                        name: 'redis',
+                        type: 'toggle',
+                        message: 'Add redis integration?',
+                        active: 'YES',
+                        inactive: 'NO',
+                    },
+                    {
+                        name: 'webpush',
+                        type: 'toggle',
+                        message: 'Add webpush integration?',
+                        active: 'YES',
+                        inactive: 'NO',
+                    },
+                    {
+                        name: 'vapid_subject',
+                        type: (prev, answers) => !answers.webpush ? null : 'text',
+                        message: 'Enter the vapid_subject URL',
+                    }
+                ]
             },
         ];
     }

package/src/config-pi/runtime/client/Worker.js

@@ -21,14 +21,15 @@ export default class Worker extends Dotfile {
     // Defaults merger
     withDefaults(config) {
         return this.merge({
+            filename: 'app.worker.js',
+            scope: '/',
+            skip_waiting: true,
             cache_name: 'cache_v0',
             default_fetching_strategy: 'network-first',
             network_first_urls: [],
             cache_first_urls: [],
             network_only_urls: [],
             cache_only_urls: [],
-            skip_waiting: true,
-            bundle_public_env: false,
         }, config, 'patch');
     }
 
@@ -49,6 +50,24 @@ export default class Worker extends Dotfile {
         }, choices, 'patch');
         // Questions
         return [
+            {
+                name: 'filename',
+                type: 'text',
+                message: 'Specify the Service Worker filename',
+            },
+            {
+                name: 'scope',
+                type: 'text',
+                message: 'Specify the Service Worker scope',
+            },
+            {
+                name: 'skip_waiting',
+                type: 'toggle',
+                message: 'Choose whether to skip the "waiting" state for updated Service Workers',
+                active: 'YES',
+                inactive: 'NO',
+                initial: config.skip_waiting,
+            },
             {
                 name: 'cache_name',
                 type: 'text',
@@ -86,24 +105,7 @@ export default class Worker extends Dotfile {
                 type: (prev, answers) => answers.default_fetching_strategy === 'cache-only' ? null : 'list',
                 message: 'Specify URLs for a "cache-only" fetching strategy (comma-separated, globe supported)',
                 initial: (config.cache_only_urls || []).join(', '),
-            },
-            {
-                name: 'skip_waiting',
-                type: 'toggle',
-                message: 'Choose whether to skip the "waiting" state for updated Service Workers',
-                active: 'YES',
-                inactive: 'NO',
-                initial: config.skip_waiting,
-            },
-            {
-                name: 'bundle_public_env',
-                type: 'toggle',
-                message: '[bundle_public_env]: Bundle public ENV variables?',
-                active: 'YES',
-                inactive: 'NO',
-                initial: config.bundle_public_env,
-                validation: ['important'],
-            },
+            }
         ];
     }
 }

package/src/config-pi/static/Init.js

@@ -0,0 +1,57 @@
+
+/**
+ * imports
+ */
+import { Dotfile } from '@webqit/backpack';
+
+export default class Init extends Dotfile {
+
+    // Base name
+    get name() {
+        return 'init';
+    }
+
+    // @desc
+    static get ['@desc']() {
+        return 'Webflo starter app config.';
+    }
+
+    // Defaults merger
+    withDefaults(config) {
+        return this.merge({
+            template: 'web',
+            install: true,
+            git: true,
+        }, config, 'patch');
+    }
+
+    // Questions generator
+    getSchema(config, choices = {}) {
+        // Questions
+        return [
+            {
+                name: 'template',
+                type: 'text',
+                message: 'Enter the application template',
+                initial: config.template,
+                validation: ['important'],
+            },
+            {
+                name: 'install',
+                type: 'toggle',
+                message: 'Run "npm install" after initialization?',
+                active: 'YES',
+                inactive: 'NO',
+                initial: config.install,
+            },
+            {
+                name: 'git',
+                type: 'toggle',
+                message: 'Run "git init" after initialization?',
+                active: 'YES',
+                inactive: 'NO',
+                initial: config.git,
+            },
+        ];
+    }
+}

package/src/config-pi/static/index.js

@@ -2,6 +2,7 @@
 /**
  * @imports
  */
+import Init from  './Init.js';
 import Manifest from  './Manifest.js';
 import Ssg from  './Ssg.js';
 
@@ -9,6 +10,7 @@ import Ssg from  './Ssg.js';
  * @exports
  */
 export {
+    Init,
     Manifest,
     Ssg,
 }

package/src/deployment-pi/origins/index.js

@@ -198,7 +198,7 @@ export async function webhook(httpEvent, router, next) {
                     }, _isNumeric(deployParams.ondeploy_autoexit) ? parseInt(deployParams.ondeploy_autoexit) : 0);
                 }
                 resolve(
-                    new httpEvent.Response(`Deployment ${  exitCode === 0 ? 'success' : 'error: ' + exitCode }!`, { status: exitCode === 0 ? 200 : 500 })
+                    new Response(`Deployment ${  exitCode === 0 ? 'success' : 'error: ' + exitCode }!`, { status: exitCode === 0 ? 200 : 500 })
                 );
                 if (cx.logger) {
                     cx.logger.log('');

package/src/deployment-pi/util.js

@@ -0,0 +1,161 @@
+import Fs from 'fs';
+import Path from 'path';
+
+function parseHostnames(hostnames) {
+    return [].concat(hostnames).reduce((arr, str) => arr.concat(str.split(',')), []).map((str) => str.trim()).filter(str => str);
+}
+
+function selectHostnames(serverDefs, matchingPort = null) {
+    return serverDefs.reduce((hosts, def) => hosts.length ? hosts : (((!matchingPort || def.port === matchingPort) && parseHostnames(def.hostnames)) || []), []);
+}
+
+// config.runtime
+
+export async function readInitConfig($context) {
+    if (!$context.config.static.Init) {
+        throw new Error(`The Client configurator "config.static.Init" is required in context.`);
+    }
+    return await (new $context.config.static.Init($context)).read();
+}
+
+export async function readClientConfig($context) {
+    if (!$context.config.runtime?.Client) {
+        throw new Error(`The Client configurator "config.runtime.Client" is required in context.`);
+    }
+    return await (new $context.config.runtime.Client($context)).read();
+}
+
+export async function readWorkerConfig($context) {
+    if (!$context.config.runtime?.client.Worker) {
+        throw new Error(`The Client configurator "config.runtime.client.Worker" is required in context.`);
+    }
+    return await (new $context.config.runtime.client.Worker($context)).read();
+}
+
+export async function readServerConfig($context) {
+    if (!$context.config.runtime?.Server) {
+        throw new Error(`The Client configurator "config.runtime.Server" is required in context.`);
+    }
+    const serverConfig = await (new $context.config.runtime.Server($context)).read();
+    serverConfig.hostnames = serverConfig.hostnames.length ? parseHostnames(serverConfig.hostnames) : ['*'];
+    if (serverConfig.https.port) {
+        serverConfig.https.hostnames = serverConfig.https.hostnames.length ? parseHostnames(serverConfig.https.hostnames) : ['*'];
+    }
+    return serverConfig;
+}
+
+export async function readHeadersConfig($context) {
+    if (!$context.config.runtime?.server.Headers) {
+        throw new Error(`The Client configurator "config.runtime.server.Headers" is required in context.`);
+    }
+    return await (new $context.config.runtime.server.Headers($context)).read();
+}
+
+export async function readRedirectsConfig($context) {
+    if (!$context.config.runtime?.server.Redirects) {
+        throw new Error(`The Client configurator "config.runtime.server.Redirects" is required in context.`);
+    }
+    return await (new $context.config.runtime.server.Redirects($context)).read();
+}
+
+// config.deployment
+
+export async function readLayoutConfig($context) {
+    if (!$context.config.deployment?.Layout) {
+        throw new Error(`The Client configurator "config.deployment.Layout" is required in context.`);
+    }
+    const layoutConfig = await (new $context.config.deployment.Layout($context)).read();
+    return Object.fromEntries(['CLIENT_DIR', 'WORKER_DIR', 'SERVER_DIR', 'PUBLIC_DIR', 'VIEWS_DIR'].map((name) => {
+        return [name, Path.resolve($context.CWD || '', layoutConfig[name])];
+    }));
+}
+
+export async function readEnvConfig($context) {
+    if (!$context.config.deployment?.Env) {
+        throw new Error(`The Client configurator "config.deployment.Env" is required in context.`);
+    }
+    return await (new $context.config.deployment.Env($context)).read();
+}
+
+export async function readOriginsConfig($context) {
+    if (!$context.config.deployment?.Origins) {
+        throw new Error(`The Client configurator "config.deployment.Origins" is required in context.`);
+    }
+    return await (new $context.config.deployment.Origins($context)).read();
+}
+
+export async function readProxyConfig($context) {
+    if (!$context.config.deployment?.Proxy) {
+        throw new Error(`The Client configurator "config.deployment.Proxy" is required in context.`);
+    }
+    const proxyConfig = await (new $context.config.deployment.Proxy($context)).read();
+    const entries = await Promise.all(proxyConfig.entries.map(async ({ ...proxy }) => {
+        if (proxy.hostnames) {
+            proxy.hostnames = parseHostnames(proxy.hostnames);
+        }
+        if (proxy.path) {
+            const $$context = $context.constructor.create($context, Path.join($context.CWD, proxy.path));
+            proxy.SERVER = await (new $$context.config.runtime.Server($$context)).read();
+            if (!proxy.port) {
+                // Dynamically figure the local port on which this could be running
+                proxy.port = proxy.SERVER.https.port || proxy.SERVER.port;
+            }
+            if (!proxy.proto) {
+                // Dynamically figure the proto to forward the request with - to match running server
+                proxy.proto = proxy.port === proxy.SERVER.https.port ? 'https' : 'http';
+            }
+            if (!proxy.hostnames?.length) {
+                // Dynamically figure the hostnames to forward
+                proxy.hostnames = selectHostnames([proxy.SERVER.https, proxy.SERVER], proxy.port);
+                if (!proxy.hostnames.length) {
+                    proxy.hostnames = selectHostnames([proxy.SERVER.https, proxy.SERVER]);
+                }
+            }
+        }
+        // Whether local or remote...
+        if (!proxy.hostnames) {
+            proxy.hostnames = ['*'];
+        }
+        return proxy;
+    }));
+    return { entries };
+}
+
+// -----------
+
+export function scanRoots(DIR, rootFileName, offset = '') {
+    return Fs.readdirSync(Path.join(DIR, offset)).reduce((roots, f) => {
+        const resource = Path.join(DIR, offset, f);
+        if (Fs.statSync(resource).isDirectory()) {
+            const $offset = Path.join(offset, f);
+            if (Fs.existsSync(Path.join(resource, rootFileName))) {
+                return roots.concat($offset.replace(/\\/g, '/'));
+            }
+            return roots.concat(scanRoots(DIR, rootFileName, $offset));
+        }
+        return roots;
+    }, []);
+}
+
+export function scanRouteHandlers(LAYOUT, which, callback, offset, roots = []) {
+    const routingDir = LAYOUT[`${which.toUpperCase()}_DIR`];
+    const dir = Path.join(routingDir, offset);
+    const routeFileEnding = new RegExp(`(?:handler\\.${which}|handler)\\.js$`);
+    const dedicatedRouteFileName = `handler.${which}.js`;
+    const hasDedicatedRouteFile = Fs.existsSync(Path.join(dir, dedicatedRouteFileName));
+    try {
+        Fs.readdirSync(dir).forEach((f) => {
+            const resource = Path.join(dir, f);
+            const fstat = Fs.statSync(resource);
+            if (fstat.isDirectory()) {
+                const $offset = Path.join(offset, f).replace(/\\/g, '/');
+                if (roots.includes($offset)) return;
+                scanRouteHandlers(LAYOUT, which, callback, $offset, roots);
+            } else {
+                if (!routeFileEnding.test(f)
+                    || (hasDedicatedRouteFile && f !== dedicatedRouteFileName)) return;
+                callback(resource, `/${offset}`, f, fstat);
+            }
+        });
+    } catch(e) {}
+}

package/src/index.js

@@ -1,20 +1,14 @@
-
-/**
- * @imports
- */
 import * as config from './config-pi/index.js';
 import * as deployment from './deployment-pi/index.js';
 import * as runtime from './runtime-pi/index.js';
 import * as services from './services-pi/index.js';
-import Context from './Context.js';
+import * as starter from './init-pi/index.js';
 
-/**
- * @exports
- */
+export { Context } from './Context.js';
 export {
     config,
     deployment,
     runtime,
     services,
-    Context,
+    starter,
 }

package/src/init-pi/index.js

@@ -0,0 +1,117 @@
+import Fs from 'fs';
+import Fs2 from 'fs/promises';
+import Path from 'path';
+import { exec } from 'child_process';
+import { _toTitle } from '@webqit/util/str/index.js';
+import { readInitConfig } from '../deployment-pi/util.js';
+import { Context } from '../Context.js';
+
+export const desc = {
+    init: 'Generate a preset Webflo starter app.',
+};
+
+export async function init(projectName = 'my-webflo-app', projectTitle = '', projectDescription = '') {
+    const $context = this;
+
+    if (!($context instanceof Context)) {
+        throw new Error(`The "this" context must be a Webflo Context object.`);
+    }
+
+    const { flags: FLAGS, logger: LOGGER } = $context;
+    const $config = {
+        INIT: await readInitConfig($context),
+    };
+
+    // Validate chosen tamplate
+    const template = FLAGS.template || $config.INIT.template;
+    const templateDir = Path.resolve(new URL(import.meta.url).pathname, '../templates', template);
+    if (!Fs.existsSync(templateDir)) {
+        LOGGER?.error(LOGGER.style.err(`Error: template "${template}" not found.`));
+        process.exit(1);
+    }
+
+    // Validate target dir
+    const targetDir = Path.resolve(process.cwd(), projectName);
+    if (Fs.existsSync(targetDir)) {
+        LOGGER?.error(LOGGER.style.err(`Error: directory ${projectName} already exists.`));
+        process.exit(1);
+    }
+
+    LOGGER?.log(LOGGER.style.keyword(`> `) + `Initializing your webflo app: "${projectName}" using template "${template}"...\n`);
+
+    // 1. Create project dir
+    await Fs2.mkdir(targetDir, { recursive: true });
+    // 2. Copy template files
+    await Fs2.cp(templateDir, targetDir, { recursive: true });
+
+    if (!projectTitle) {
+        projectTitle = _toTitle(projectName.replace(/-/g, ' '));
+    }
+    if (!projectDescription) {
+        projectDescription = `${projectTitle} - powered by Webflo`;
+    }
+
+    // 3. Customize package.json
+    const pkgFile = Path.join(targetDir, 'package.json');
+    if (Fs.existsSync(pkgFile)) {
+        const pkgData = JSON.parse(await Fs2.readFile(pkgFile, 'utf8'));
+        pkgData.name = projectName;
+        pkgData.title = projectTitle;
+        pkgData.description = projectDescription;
+        await Fs2.writeFile(pkgFile, JSON.stringify(pkgData, null, 2));
+    }
+
+    // 4. Customize index.html and manifest.json
+    for (const fileName of ['public/index.html', 'public/manifest.json']) {
+        const filePath = Path.join(targetDir, fileName);
+        if (Fs.existsSync(filePath)) {
+            let fileContents = await Fs2.readFile(filePath, 'utf8');
+            fileContents = fileContents.replace(/APP_NAME/g, projectName);
+            fileContents = fileContents.replace(/APP_TITLE/g, projectTitle);
+            fileContents = fileContents.replace(/APP_DESCRIPTION/g, projectDescription);
+            await Fs2.writeFile(filePath, fileContents);
+        }
+    }
+
+    // 5. Run setup commands
+    const comands = [];
+    const nextSteps = [];
+    if (FLAGS.install ?? $config.INIT.install) {
+        comands.push('npm install');
+        comands.push('npm run build');
+    } else {
+        nextSteps.push('npm install');
+    }
+    if (FLAGS.git ?? $config.INIT.git) {
+        comands.push('git init');
+    } else {
+        nextSteps.push('git init');
+    }
+    if (comands.length) {
+        LOGGER?.log(LOGGER.style.keyword(`> `) + `Running setup commands...`);
+        for (const cmd of comands) {
+            LOGGER?.log(LOGGER.style.token(`$ `) + cmd);
+            await new Promise((resolve, reject) => {
+                exec(cmd, { cwd: targetDir }, (error, stdout, stderr) => {
+                    if (error) {
+                        LOGGER?.log(LOGGER.style.err(stderr || error.message));
+                        return reject(error);
+                    }
+                    resolve();
+                });
+            });
+        }
+    }
+
+    // 6. Done message
+    LOGGER?.log(`\n✔ Successfully created "${projectName}" using template "${template}"`);
+    LOGGER?.log(`\nNext steps:`);
+    LOGGER?.log(`  cd ${projectName}`);
+    if (nextSteps.length) {
+        LOGGER?.log(`  # Additional setup commands:`);
+        for (const step of nextSteps) {
+            LOGGER?.log(`  ${step}`);
+        }
+    }
+    LOGGER?.log(`  npm run dev -- --open\n`);
+}

package/src/init-pi/templates/pwa/app/handler.server.js

@@ -0,0 +1,8 @@
+export default async function (event, next, fetch) {
+    if (next.stepname) return await next();
+    return {
+        title: 'Webflo PWA',
+        greeting: 'Hello World!',
+        menu: [{ title: 'Home', href: '/' }],
+    };
+}

package/src/init-pi/templates/pwa/app/page.html

@@ -0,0 +1,7 @@
+<ul render="#items: (item) of data?.menu / 'menu'">
+    <template def="menu" scoped="">
+        <li>
+            <a render="~href: item?.href; #text: item?.title;"></a>
+        </li>
+    </template>
+</ul>

package/src/init-pi/templates/pwa/package.json

@@ -0,0 +1,19 @@
+{
+  "title": "",
+  "name": "",
+  "description": "",
+  "type": "module",
+  "scripts": {
+    "build:html": "oohtml bundle --recursive --outdir=public/assets --auto-embed=app",
+    "build:js": "webflo generate::client --recursive --outdir=public/assets --auto-embed",
+    "build": "npm run build:html && npm run build:js",
+    "dev": "webflo start --dev --build-sensitivity=2",
+    "start": "webflo start"
+  },
+  "dependencies": {
+    "@webqit/webflo": "file:../../webflo"
+  },
+  "devDependencies": {
+    "@webqit/oohtml-cli": "latest"
+  }
+}

package/src/init-pi/templates/pwa/public/assets/app.css

@@ -0,0 +1,16 @@
+body {
+    background-color: #4e40ce;
+    margin: 0;
+    color: white;
+}
+h1 {
+    background-color: black;
+    padding: 2rem;
+}
+h1 span:first-of-type {
+    color: crimson;
+}
+ul {
+    padding: 2rem;
+    padding-inline: 3rem;
+}

package/src/init-pi/templates/pwa/public/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en-US">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title render="#text: titleBar || title">APP_TITLE</title>
+    <meta name="description" content="APP_DESCRIPTION">
+    <meta name="apple-mobile-web-app-title" content="APP_TITLE">
+    <meta name="color-scheme" content="dark">
+    <meta name="theme-color" content="#313131">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="manifest" href="/manifest.json">
+    <!--
+    <link rel="icon" href="/assets/..." type="image/png">
+    <link rel="apple-touch-icon" href="/assets/...">
+    -->
+    <script crossorigin ssr src="https://unpkg.com/@webqit/oohtml@latest/dist/main.lite.js"></script>
+    <template def="app" ssr src="/assets/app.html" by="oohtml-cli"></template>
+    <script type="module" src="/assets/app.js" by="webflo"></script>
+    <link rel="stylesheet" href="/assets/app.css">
+</head>
+
+<body importscontext="/app">
+
+    <h1>
+        <span><?{ data.title }?></span><br>
+        <span><?{ data.greeting }?></span>
+    </h1>
+    
+    <import ref="#page.html">
+        Import will show here...
+    </import>
+
+</body>
+
+</html>