@webqit/webflo 0.8.48-0 → 0.8.52

package/docker/Dockerfile

@@ -0,0 +1,26 @@
+# Base installations
+FROM node:12-alpine
+RUN apk add git
+
+# We'll install npm packages at one-level higher than
+# actuall app root, so that we can bind-mount host system's app root
+# without overriding the container's node_modules directory
+WORKDIR /home/www
+RUN npm install
+RUN npm install @webqit/webflo -g
+RUN npm install @webqit/playui-cli -g
+
+# Move one-level in, for the reasons above
+WORKDIR /home/www/app
+ENV NODE_OPTIONS=--openssl-legacy-provider
+
+# To auto-start app (flags optional), we would add...
+# CMD ["webflo", "start", "--env=dev", "--watch", "--http-only"]
+
+# To build the image locally...
+# docker build --no-cache -t webflo ./docker
+
+# To publish to docker hub...
+# docker login -u webqit
+# docker tag webflo webqit/webflo
+# docker push webqit/webflo

package/docker/README.md

@@ -0,0 +1,77 @@
+# Webflo Container
+
+This is simply a node.js container with the `@webqit/webflo` framework installed. Once started, any webflo app can be deployed into the container from any git repository.
+
+## Usage
+
+This container image lives on Docker Hub and can be pulled to a local machine or a remote Virtual Machine (VM) on any cloud platform.
+
++ [To Use Locally](#to-use-locally)
++ [To Use In the Cloud](#to-use-in-the-cloud)
+* [To Deploy An App From Any Repo](#to-deploy-an-app-from-any-repo)
+
+### To Use Locally
+
+Ensure you have docker installed on your computer and run the following command from any location on your terminal:
+
+```shell
+docker pull webqit/webflo:latest
+```
+
+The above command pulls the `webqit/webflo` image to your local machine. (But this can be automatically done by docker on running any docker commands that reference the `webqit/webflo` image.)
+
+Next is to use the following commands to start the container and the Webflo runtime. In each case, the first part of the command starts the container, while the second part (from `webflo start`) starts the application.
+
+#### To Start
+
+Start the container using `docker run`; map a port (e.g `80`) of your host machine to `3000` of the container (unless changed webflo expects to run on port `3000`); optionally, give your container a name; reference `webqit/webflo` as the image to use; and lastly, start webflo using `webflo start`.
+
+```shell
+docker run -d -p 80:3000 --name my-app webqit/webflo webflo start
+```
+
+Visit [localhost](http://localhost) to view your app. 
+
+#### To Start In Dev Mode
+
+Webflo's *dev* mode is the perfect mode for developing locally. All you do is append the `--env=dev --watch` flags to your webflo commands. [(Learn more)](#)
+
+```shell
+docker run -d -p 80:3000 --name my-app webqit/webflo webflo start --env=dev --watch
+```
+
+In *dev* mode, webflo automatically restarts as you make changes to your codebase. Since webflo now lives inside a container, you'll need to *bind* the directory of your source code on your host machine to the `/home/www/app` directory of the container.
+
+```shell
+docker run -d -v /Users/me/my-app:/home/www/app -p 80:3000 --name my-app webqit/webflo webflo start --env=dev --watch
+```
+
+### To Use In the Cloud
+
+TODO
+
+### To Deploy An App From Any Repo
+
+Whether running locally or in the cloud, webflo can easily take your application from any git repo. This follows webflo's normal `deploy` command.
+
+Simply point docker at your container (using `docker exec [container-name]`) and execute the `webflo deploy` command.
+
+```shell
+docker exec my-app webflo deploy https://github.com/me/my-app
+```
+
+If you will need to install any npm dependencies, you would run `npm install` on the appropriate directory in your container.
+
+```shell
+docker exec my-app npm install
+```
+
+If you will need to run additional webflo commands (e.g `webflo restart` to restart the application), you would follow the same pattern above.
+
+```shell
+docker exec my-app webflo restart
+```
+
+## Extending this Build
+
+TODO

package/package.json

@@ -12,7 +12,7 @@
     "vanila-javascript"
   ],
   "homepage": "https://webqit.io/tooling/webflo",
-  "version": "0.8.48-0",
+  "version": "0.8.52",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,8 +29,8 @@
   },
   "bin": {
     "webflo": "src/index.js",
-    "webflo-certbot-http-auth-hook": "src/modules/certbot/http-auth-hook.js",
-    "webflo-certbot-http-cleanup-hook": "src/modules/certbot/http-cleanup-hook.js"
+    "webflo-certbot-http-auth-hook": "src/services/certbot/http-auth-hook.js",
+    "webflo-certbot-http-cleanup-hook": "src/services/certbot/http-cleanup-hook.js"
   },
   "dependencies": {
     "@octokit/auth-basic": "^1.4.6",
@@ -38,25 +38,26 @@
     "@octokit/webhooks": "^7.15.1",
     "@webqit/backpack": "^0.0.37",
     "@webqit/browser-pie": "^0.0.16",
-    "@webqit/pseudo-browser": "^0.3.30",
+    "@webqit/pseudo-browser": "^0.3.35",
     "@webqit/util": "^0.8.7",
-    "accepts": "^1.3.7",
     "client-sessions": "^0.8.0",
     "cookie": "^0.4.1",
+    "form-data-encoder": "^1.6.0",
+    "formdata-node": "^4.3.0",
     "formidable": "^2.0.0-dev.20200131.2",
     "is-glob": "^4.0.1",
     "micromatch": "^3.1.10",
+    "mime-types": "^2.1.33",
     "minimatch": "^3.0.4",
+    "node-fetch": "^2.6.1",
     "pm2": "^5.1.0",
     "simple-git": "^2.20.1",
+    "stream-slice": "^0.1.2",
     "touch": "^3.1.0",
     "undici": "^4.3.1",
     "uuid": "^8.3.2",
     "webpack": "^5.50.0"
   },
-  "devDependencies": {
-    "nodemon": "^2.0.7"
-  },
   "author": "Oxford Harrison <oxharris.dev@gmail.com>",
   "maintainers": [
     "Oxford Harrison <oxharris.dev@gmail.com>"

package/src/{cmd/client.js → build/client/index.js}

@@ -9,7 +9,7 @@ import Webpack from 'webpack';
 import { _beforeLast } from '@webqit/util/str/index.js';
 import { _isObject, _isArray, _isEmpty } from '@webqit/util/js/index.js';
 import * as DotJs from '@webqit/backpack/src/dotfiles/DotJs.js';
-import * as client from '../config/client.js'
+import * as client from '../../config/client.js'
 
 
 /**
@@ -27,7 +27,7 @@ export async function build(Ui, flags = {}, layout = {}) {
     const config = await client.read(flags, layout);
     // Consistent forward slashing
     const forwardSlash = str => str.replace(/\\/g, '/');
-    var modulesDir = forwardSlash(Url.fileURLToPath(Path.join(import.meta.url, '../../modules/client')));
+    var modulesDir = forwardSlash(Url.fileURLToPath(Path.join(import.meta.url, '../../../runtime/client')));
     
     var workerDirSplit = Path.resolve(layout.WORKER_DIR).replace(/\\/g, '/').split('/');
     var workerParams = config.worker || {};
@@ -85,17 +85,17 @@ export async function build(Ui, flags = {}, layout = {}) {
     Ui.title(`CLIENT BUILD`);
 
     const clientBuild = { imports: {}, code: [], };
-    clientBuild.imports[modulesDir + '/Client.js'] = 'Client';
+    clientBuild.imports[modulesDir + '/Runtime.js'] = 'Runtime';
 
     // ------------------
     // >> Routes mapping
     buildRoutes(clientBuild, Ui, Path.resolve(layout.CLIENT_DIR), 'Client-Side Routing:');
     clientBuild.code.push(``);
-    clientBuild.code.push(`// >> Client Params`);
+    clientBuild.code.push(`// >> Runtime Params`);
     buildParams(clientBuild, clientParams, 'params');
     clientBuild.code.push(``);
-    clientBuild.code.push(`// >> Client Instantiation`);
-    clientBuild.code.push(`Client.call(null, layout, params);`);
+    clientBuild.code.push(`// >> Runtime Instantiation`);
+    clientBuild.code.push(`Runtime.call(null, layout, params);`);
     // ------------------
     
     // ------------------
@@ -107,9 +107,9 @@ export async function build(Ui, flags = {}, layout = {}) {
     };
     waiting = Ui.waiting(`Writing the client entry file: ${clientBundlingConfig.intermediate}`);
     waiting.start();
-    DotJs.write(clientBuild, clientBundlingConfig.intermediate, 'Client Build File');
+    DotJs.write(clientBuild, clientBundlingConfig.intermediate, 'Runtime Build File');
     waiting.stop();
-    Ui.info(Ui.f`Client Build file: ${clientBundlingConfig.intermediate}`);
+    Ui.info(Ui.f`Runtime Build file: ${clientBundlingConfig.intermediate}`);
     // ------------------
 
     // -------------------
@@ -124,10 +124,23 @@ export async function build(Ui, flags = {}, layout = {}) {
         await createBundle(Ui, workerBundlingConfig, 'Bundling the Service Worker Build file');
     }
     if (clientParams.bundling !== false) {
-        await createBundle(Ui, clientBundlingConfig, 'Bundling the Client Build file');
+        clientBundlingConfig.experiments = clientBundlingConfig.experiments || {};
+        if (!('outputModule' in clientBundlingConfig.experiments)) {
+            clientBundlingConfig.experiments.outputModule = true;
+            clientBundlingConfig.externalsType = 'module';
+        }
+        if (clientBundlingConfig.experiments.outputModule !== false) {
+            clientBundlingConfig.output = clientBundlingConfig.output || {};
+            clientBundlingConfig.output.environment = clientBundlingConfig.output.environment || {};
+            if (!('module' in clientBundlingConfig.output)) {
+                clientBundlingConfig.output.module = true;
+                clientBundlingConfig.output.environment.module = true;
+            }
+        }
+        await createBundle(Ui, clientBundlingConfig, 'Bundling the Runtime Build file');
     }
     
-};
+}
 
 /**
  * Creates a bundle using webpack
@@ -245,4 +258,4 @@ const buildParams = (build, params, varName = null, indentation = 0) => {
         }
     });
     if (varName) build.code.push(`};`);
-}
+};

package/src/build/index.js

@@ -0,0 +1,5 @@
+
+/**
+ * exports
+ */
+export * as client from './client/index.js';

package/src/index.js

@@ -9,16 +9,18 @@ import parseArgs from '@webqit/backpack/src/cli/parseArgs.js';
 import Ui from '@webqit/backpack/src/cli/Ui.js';
 import * as DotJson from '@webqit/backpack/src/dotfiles/DotJson.js';
 import { Promptx } from '@webqit/backpack/src/cli/Promptx.js';
+import * as build from './build/index.js';
 import * as config from './config/index.js';
-import * as cmd from './cmd/index.js';
+import * as runtime from './runtime/index.js';
+import * as services from './services/index.js';
 
 // ------------------------------------------
 
 const commands = {
     config: 'Starts a configuration process.',
-    build: cmd.client.desc.build,
-    deploy: cmd.origins.desc.deploy,
-    ...cmd.server.desc,
+    build: build.client.desc.build,
+    deploy: services.origins.desc.deploy,
+    ...runtime.server.desc,
 };
 
 // ------------------------------------------
@@ -37,60 +39,60 @@ console.log('');
         // --------------------------
 
         case 'build':
-            cmd.client.build(Ui, flags, layout);
+            build.client.build(Ui, flags, layout);
         break;
 
         // --------------------------
 
-        case 'deploy':
-            var origin = Object.keys(keywords)[0],
-                options;
+        case 'config':
+            
+            var domain = Object.keys(keywords)[0];
             // ----------------
-            if (!origin && ellipsis) {
-                if (!(options = (await config.origins.read(flags, layout)).REPOS) || _isEmpty(options)) {
-                    Ui.log(Ui.f`Please configure an origin (${'webflo config ...'}) to use the ${'deploy'} command.`);
-                    return;
-                }
-                origin = await Promptx({
-                    name: 'origin',
+            if (!domain && ellipsis) {
+                domain = await Promptx({
+                    name: 'domain',
                     type: 'select',
-                    choices: options.map(r => ({value: r.TAG})),
-                    message: 'Please select a origin',
-                }).then(d => d.origin);
+                    choices: Object.keys(config).map(c => ({value: c})),
+                    message: 'Please select a configuration domain',
+                }).then(d => d.domain);
             }
-            if (!origin) {
-                Ui.log(Ui.f`Please add an origin name to the ${command} command. For options, use the ellipsis ${'...'}`);
+            if (!domain || !config[domain]) {
+                Ui.log(Ui.f`Please add a configuration domain to the ${command} command. For options, use the ellipsis ${'...'}`);
                 return;
             }
             // ----------------
-            cmd.origins.deploy(Ui, origin, flags, layout);
+            const data = await config[domain].read(flags, layout);
+            Promptx(await config[domain].questions(data, {}, layout)).then(async _data => {
+                await config[domain].write(_merge(data, _data), flags, layout);
+            });
+
         break;
 
         // --------------------------
 
         case 'start':
-           cmd.server.start(Ui, flags, layout);
+           runtime.server.start(Ui, flags, layout);
         break;
         
         case 'stop':
         case 'restart':
-            var runtime = Object.keys(keywords)[0];
+            var _runtime = Object.keys(keywords)[0];
             // ----------------
-            if (!runtime && ellipsis) {
-                runtime = await Promptx({
+            if (!_runtime && ellipsis) {
+                _runtime = await Promptx({
                     name: 'runtime',
                     type: 'select',
-                    choices: (await cmd.server.processes(Ui)).map(r => ({title: r.name, description: r.status, value: r.name})).concat({description: 'All of the above', value: 'all'}),
+                    choices: (await runtime.server.processes(Ui)).map(r => ({title: r.name, description: r.status, value: r.name})).concat({description: 'All of the above', value: 'all'}),
                     message: 'Please select a runtime name',
                 }).then(d => d.runtime);
             }
             // ----------------
-            await cmd.server[command](Ui, runtime || 'all', flags);
+            await runtime.server[command](Ui, _runtime || 'all', flags);
             process.exit();
         break;
 
         case 'processes':
-            const processes = await cmd.server.processes(Ui, flags);
+            const processes = await runtime.server.processes(Ui, flags);
             Ui.title(`SERVERS`);
             if (processes.length) {
                 processes.forEach(service => {
@@ -104,35 +106,35 @@ console.log('');
 
         // --------------------------
 
-        case 'config':
-            
-            var domain = Object.keys(keywords)[0];
+        case 'deploy':
+            var origin = Object.keys(keywords)[0],
+                options;
             // ----------------
-            if (!domain && ellipsis) {
-                domain = await Promptx({
-                    name: 'domain',
+            if (!origin && ellipsis) {
+                if (!(options = (await config.origins.read(flags, layout)).REPOS) || _isEmpty(options)) {
+                    Ui.log(Ui.f`Please configure an origin (${'webflo config ...'}) to use the ${'deploy'} command.`);
+                    return;
+                }
+                origin = await Promptx({
+                    name: 'origin',
                     type: 'select',
-                    choices: Object.keys(config).map(c => ({value: c})),
-                    message: 'Please select a configuration domain',
-                }).then(d => d.domain);
+                    choices: options.map(r => ({value: r.TAG})),
+                    message: 'Please select a origin',
+                }).then(d => d.origin);
             }
-            if (!domain || !config[domain]) {
-                Ui.log(Ui.f`Please add a configuration domain to the ${command} command. For options, use the ellipsis ${'...'}`);
+            if (!origin) {
+                Ui.log(Ui.f`Please add an origin name to the ${command} command. For options, use the ellipsis ${'...'}`);
                 return;
             }
             // ----------------
-            const data = await config[domain].read(flags, layout);
-            Promptx(await config[domain].questions(data, {}, layout)).then(async _data => {
-                await config[domain].write(_merge(data, _data), flags, layout);
-            });
-
+            services.origins.deploy(Ui, origin, flags, layout);
         break;
 
         // --------------------------
 
         case 'cert':
             var domains = Object.keys(keywords);
-           cmd.certbot.generate(Ui, domains, flags, layout);
+           services.certbot.generate(Ui, domains, flags, layout);
         break;
         
         case 'help':

package/src/runtime/Router.js

@@ -0,0 +1,130 @@
+
+/**
+ * @imports
+ */
+import _isString from '@webqit/util/js/isString.js';
+import _isFunction from '@webqit/util/js/isFunction.js';
+import _isArray from '@webqit/util/js/isArray.js';
+import _arrFrom from '@webqit/util/arr/from.js';
+
+/**
+ * ---------------------------
+ * The Router class
+ * ---------------------------
+ */
+			
+export default class Router {
+
+	/**
+	 * Constructs a new Router instance
+     * over route definitions.
+	 *
+	 * @param string|array	    path
+	 * @param object	        layout
+     * @param object            context
+	 *
+	 * @return void
+	 */
+	constructor(path, layout, context) {
+        this.path = _isArray(path) ? path : (path + '').split('/').filter(a => a);
+        this.layout = layout;
+        this.context = context;
+    }
+
+    /**
+     * Performs dynamic routing.
+     * 
+     * @param array|string      method
+     * @param Object            event
+     * @param any               arg
+     * @param function          _default
+     * 
+     * @return object
+     */
+     async route(method, event, arg, _default) {
+
+        const $this = this;
+
+        // ----------------
+        // The loop
+        // ----------------
+        const next = async function(thisTick) {
+            const _this = { ...$this.context };
+            if (!thisTick.trail || thisTick.trail.length < thisTick.destination.length) {
+                thisTick = await $this.readTick(thisTick);
+                // -------------
+                _this.pathname = `/${thisTick.trail.join('/')}`;
+                _this.stepname = thisTick.trail[thisTick.trail.length - 1];
+                $this.finalizeHandlerContext(_this, thisTick);
+                // -------------
+                if (thisTick.exports) {
+                    const methods = _arrFrom(thisTick.method);
+                    const handler = _isFunction(thisTick.exports) && methods.includes('default') ? thisTick.exports : methods.reduce((_handler, name) => _handler || thisTick.exports[name.toLowerCase()], null);
+                    if (handler) {
+                        // -------------
+                        // Dynamic response
+                        // -------------
+                        const _next = async (..._args) => {
+                            const nextTick = { ...thisTick, arg: _args[0] };
+                            if (_args.length > 1) {
+                                var _url = _args[1], _request, requestInit = { ...(_args[2] || {}) };
+                                if (_args[1] instanceof nextTick.event.Request) {
+                                    _request = _args[1];
+                                    _url = _request.url;
+                                } else if (!_isString(_url)) {
+                                    throw new Error('Router redirect url must be a string!');
+                                }
+                                var newDestination = _url.startsWith('/') ? _url : $this.pathJoin(`/${thisTick.trail.join('/')}`, _url);
+                                if (newDestination.startsWith('../')) {
+                                    throw new Error('Router redirect cannot traverse beyond the routing directory! (' + _url + ' >> ' + newDestination + ')');
+                                }
+                                if (requestInit.method) {
+                                    nextTick.method = requestInit.method;
+                                    if (_isArray(requestInit.method)) {
+                                        requestInit.method = requestInit.method[0];
+                                    }
+                                }
+                                if (_request) {
+                                    nextTick.event = thisTick.event.retarget(_request, { ...requestInit, _proxy: { url: newDestination/** non-standard but works */ } });
+                                } else {
+                                    nextTick.event = thisTick.event.retarget(newDestination, requestInit);
+                                }
+                                
+                                nextTick.source = thisTick.destination.join('/');
+                                nextTick.destination = newDestination.split('?').shift().split('/').map(a => a.trim()).filter(a => a);
+                                nextTick.trail = _args[1].startsWith('/') ? [] : thisTick.trail.reduce((_commonRoot, _seg, i) => _commonRoot.length === i && _seg === nextTick.destination[i] ? _commonRoot.concat(_seg) : _commonRoot, []);
+                                nextTick.trailOnFile = thisTick.trailOnFile.slice(0, nextTick.trail.length);
+                            }
+                            return next(nextTick);
+                        };
+                        // -------------
+                        const nextPathname = thisTick.destination.slice(thisTick.trail.length);
+                        _next.pathname = nextPathname.join('/');
+                        _next.stepname = nextPathname[0];
+                        // -------------
+                        return await handler.call(_this, thisTick.event, thisTick.arg, _next/*next*/);
+                    }
+                    // Handler not found but exports found
+                    return next(thisTick);
+                } else if ((thisTick.currentSegmentOnFile || {}).dirExists) {
+                    // Exports not found but directory found
+                    return next(thisTick);
+                }
+            }
+            // -------------
+            // Local file
+            // -------------
+            if (_default) {
+                return await _default.call(_this, thisTick.event, thisTick.arg);
+            }
+        };
+        
+        return next({
+            destination: this.path,
+            event,
+            method,
+            arg,
+         });
+
+    } 
+};

package/src/runtime/_FormData.js

@@ -0,0 +1,60 @@
+
+/**
+ * @imports
+ */
+import { _isTypeObject, _isNumeric } from '@webqit/util/js/index.js';
+import { _before } from '@webqit/util/str/index.js';
+import { wwwFormSet, wwwFormPathSerializeCallback } from './util.js';
+
+ /**
+  * The _Headers Mixin
+  */
+const _FormData = NativeFormData => class extends NativeFormData {
+
+    tee(callback = null) {
+        const formData1 = new this.constructor, formData2 = new this.constructor;
+        for (var [ name, value ] of this.entries()) {
+            const formDataType = formDataType(value);
+            if ((callback && callback(value, name, formDataType)) || (!callback && !formDataType)) {
+                formData1.append(name, value);
+            } else {
+                formData2.append(name, value);
+            }
+        }
+        return [ formData1, formData2 ];
+    }
+
+    json(data = {}, callback = null) {
+        if (arguments.length) {
+            Object.keys(data).forEach(key => {
+                wwwFormPathSerializeCallback(key, data[key], (_wwwFormPath, _value) => {
+                    if (!callback || callback(_wwwFormPath, _value, _isTypeObject(_value))) {
+                        this.append(_wwwFormPath, _value);
+                    }
+                }, value => !formDataType(value));
+            });
+            return;
+        }
+        var jsonBuild; // We'll dynamically determine if this should be an array or an object
+        for (var [ name, value ] of this.entries()) {
+            if (!jsonBuild) {
+                jsonBuild = _isNumeric(_before(name, '[')) ? [] : {};
+            }
+            wwwFormSet(jsonBuild, name, value);
+        }
+        return jsonBuild;
+    }
+
+}
+
+export default _FormData;
+
+export const formDataType = (value, list = null) => {
+    if (!_isTypeObject(value)) {
+        return;
+    }
+    const toStringTag = value[Symbol.toStringTag];
+    return (list || [
+        'Uint8Array', 'Uint16Array', 'Uint32Array', 'ArrayBuffer', 'Blob', 'File', 'FormData', 'Stream'
+    ]).reduce((_toStringTag, type) => _toStringTag || (toStringTag === type ? type : null), null);
+};