@webqit/webflo 0.11.61-0 → 0.20.1

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';
-
-/**
- * @exports
- */
-export {
-    config,
-    deployment,
-    runtime,
-    services,
-    Context,
+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 * as starter from './init-pi/index.js';
+
+export { Context } from './Context.js';
+export {
+    config,
+    deployment,
+    runtime,
+    services,
+    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>

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

@@ -0,0 +1,29 @@
+{
+  "name": "APP_TITLE",
+  "short_name": "APP_TITLE",
+  "description": "APP_DESCRIPTION",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#4e40ce",
+  "theme_color": "#4e40ce",
+  "scope": "/",
+  "icons": [
+    {
+      "src": "/assets/...",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/...",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "categories": [],
+  "related_applications": [],
+  "prefer_related_applications": false,
+  "lang": "en",
+  "dir": "ltr"
+}

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

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

package/src/init-pi/templates/web/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/web/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/web/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/web/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: data?.titleBar || data?.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="icon" href="/assets/..." type="image/png">
+    <link rel="apple-touch-icon" href="/assets/...">
+    <link rel="manifest" href="/manifest.json">
+    -->
+    <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>