@webqit/webflo 0.8.47 → 0.8.51

package/docker/Dockerfile

@@ -0,0 +1,25 @@
+# Base installations
+FROM node:12-alpine
+RUN apk --no-cache 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
+
+# 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,71 @@
+# 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
+```
+
+docker run -d -v /Users/ox-harris/Documents/CODE/webqit/webqit.io:/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.47",
+  "version": "0.8.51",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -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.29",
+    "@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",
-    "minimist": "^1.2.5",
+    "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.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

@@ -6,8 +6,8 @@ import Fs from 'fs';
 import Url from 'url';
 import Path from 'path';
 import Webpack from 'webpack';
-import _isEmpty from '@webqit/util/js/isEmpty.js';
-import _beforeLast from '@webqit/util/str/beforeLast.js';
+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'
 
@@ -23,147 +23,94 @@ export const desc = {
  * @build
  */
 export async function build(Ui, flags = {}, layout = {}) {
+
     const config = await client.read(flags, layout);
     // Consistent forward slashing
     const forwardSlash = str => str.replace(/\\/g, '/');
-    var clientModulesDir = forwardSlash(Url.fileURLToPath(Path.join(import.meta.url, '../../modules/client')));
+    var modulesDir = forwardSlash(Url.fileURLToPath(Path.join(import.meta.url, '../../modules/client')));
+    
+    var workerDirSplit = Path.resolve(layout.WORKER_DIR).replace(/\\/g, '/').split('/');
+    var workerParams = config.worker || {};
+    const workerBundlingConfig = workerParams.bundling || {};
+
     var clientDirSplit = Path.resolve(layout.CLIENT_DIR).replace(/\\/g, '/').split('/');
     var clientParams = config; // Yes root config object
-    var workerParams = config.worker || {};
-    var createWorker = !_isEmpty(workerParams);
+    const clientBundlingConfig = clientParams.bundling || {};
+
     var waiting;
 
     // -------------------
     // Create the Service Worker file
     // -------------------
 
-    if (createWorker) {
-
-        var workerBundlingConfig = workerParams.bundling || {};
-        if (!workerBundlingConfig.intermediate) {
-            workerBundlingConfig.intermediate = clientDirSplit.join('/') + '/worker.js';
-        }
-        if (!workerBundlingConfig.output) {
-            workerBundlingConfig.output = {
-                filename: 'worker.js',
-                path: Path.resolve(layout.PUBLIC_DIR),
-            };
-        }
-
-        var workerBuild = {
-            imports: {},
-            code: [],
-        };
-
-        // >> Import the Webflo Client file
-        var navigatorWorker = clientModulesDir + '/Worker.js';
-        workerBuild.imports[navigatorWorker] = 'Worker';
+    if (!_isEmpty(workerParams)) {
 
         Ui.log('');
         Ui.title(`SERVICE WORKER BUILD`);
-        // >> Routes mapping
-        buildRoutes(Ui, Path.resolve(layout.WORKER_DIR), workerBuild, 'Worker-Side Routing:');
 
-        // >> Params
+        const workerBuild = { imports: {}, code: [], };
+        workerBuild.imports[modulesDir + '/Worker.js'] = 'Worker';
+       
+        // ------------------
+        // >> Routes mapping
+        buildRoutes(workerBuild, Ui, Path.resolve(layout.WORKER_DIR), 'Worker-Side Routing:');
         workerBuild.code.push(``);
         workerBuild.code.push(`// >> Worker Params`);
-        workerBuild.code.push(`const params = {`);
-        Object.keys(workerParams).forEach(name => {
-            if (name !== 'bundling') {
-                workerBuild.code.push(`   ${name}: ${[ 'boolean', 'number' ].includes(typeof workerParams[name]) ? workerParams[name] : (Array.isArray(workerParams[name]) ? (!workerParams[name].length ? `[]` : `['${workerParams[name].join(`', '`)}']`) : `'${workerParams[name]}'`)},`);
-            }
-        });
-        workerBuild.code.push(`};`);
-
-        // >> instantiation
+        buildParams(workerBuild, workerParams, 'params');
         workerBuild.code.push(``);
         workerBuild.code.push(`// >> Worker Instantiation`);
         workerBuild.code.push(`Worker.call(null, layout, params);`);
+        // ------------------
         
+        // ------------------
         // >> Write to file...
+        workerBundlingConfig.intermediate = workerBundlingConfig.intermediate || `${clientDirSplit.join('/')}/worker.js`;
+        workerBundlingConfig.output = workerBundlingConfig.output || {
+            filename: 'worker.js',
+            path: Path.resolve(layout.PUBLIC_DIR),
+        };
         waiting = Ui.waiting(Ui.f`Writing the Service Worker file: ${workerBundlingConfig.intermediate}`);
         waiting.start();
-
-        // Write
         DotJs.write(workerBuild, workerBundlingConfig.intermediate, 'Service Worker File');
-        
         waiting.stop();
         Ui.info(Ui.f`Service Worker file: ${workerBundlingConfig.intermediate}`);
-
+        // ------------------
     }
 
     // -------------------
     // Create the Client file
     // -------------------
 
-    var clientBundlingConfig = clientParams.bundling || {};
-    if (!clientBundlingConfig.intermediate) {
-        clientBundlingConfig.intermediate = clientDirSplit.join('/') + '/bundle.js';
-    }
-    if (!clientBundlingConfig.output) {
-        clientBundlingConfig.output = {
-            filename: 'bundle.js',
-            path: Path.resolve(layout.PUBLIC_DIR),
-        };
-    }
-
-    var clientBuild = {
-        imports: {},
-        code: [],
-    };
-
-    // >> Import the Webflo Client file
-    clientBuild.imports[clientModulesDir + '/Client.js'] = 'Client';
-
     Ui.log('');
     Ui.title(`CLIENT BUILD`);
-    // >> Routes mapping
-    buildRoutes(Ui, Path.resolve(layout.CLIENT_DIR), clientBuild, 'Client-Side Routing:');
 
-    // >> Client Params
+    const clientBuild = { imports: {}, code: [], };
+    clientBuild.imports[modulesDir + '/Client.js'] = 'Client';
+
+    // ------------------
+    // >> Routes mapping
+    buildRoutes(clientBuild, Ui, Path.resolve(layout.CLIENT_DIR), 'Client-Side Routing:');
     clientBuild.code.push(``);
     clientBuild.code.push(`// >> Client Params`);
-    clientBuild.code.push(`const params = {`);
-    clientBuild.code.push(`};`);
-
-    // >> Client Instantiation
+    buildParams(clientBuild, clientParams, 'params');
     clientBuild.code.push(``);
     clientBuild.code.push(`// >> Client Instantiation`);
     clientBuild.code.push(`Client.call(null, layout, params);`);
-
-    // Service Worker registration code?
-    if (createWorker) {
-        if (workerParams.support_push) {
-            clientBuild.imports[clientModulesDir + '/Push.js'] = 'Push';
-        }
-        clientBuild.code.push(...[
-            ``,
-            `// >> Service Worker Registration`,
-            `if ('serviceWorker' in navigator) {`,
-            `    window.addEventListener('load', () => {`,
-            `        navigator.serviceWorker.register('/${workerBundlingConfig.output.filename}', {scope: '${workerParams.scope}'}).then(async registration => {`,
-            `            console.log('Service worker registered.');`,
-            `            await /*SUPPORT_PUSH*/${workerParams.support_push} ? new Push(registration, {`,
-            `                registration_url: '${workerParams.push_registration_url}',`,
-            `                deregistration_url: '${workerParams.push_deregistration_url}',`,
-            `                public_key: '${workerParams.push_public_key}',`,
-            `            }) : null;`,
-            `        });`,
-            `    });`,
-            `}`,
-            ``,
-        ]);
-    }
+    // ------------------
     
+    // ------------------
     // >> Write to file...
+    clientBundlingConfig.intermediate = clientBundlingConfig.intermediate || clientDirSplit.join('/') + '/bundle.js';
+    clientBundlingConfig.output = clientBundlingConfig.output || {
+        filename: 'bundle.js',
+        path: Path.resolve(layout.PUBLIC_DIR),
+    };
     waiting = Ui.waiting(`Writing the client entry file: ${clientBundlingConfig.intermediate}`);
     waiting.start();
-
-    // Write
     DotJs.write(clientBuild, clientBundlingConfig.intermediate, 'Client Build File');
-        
     waiting.stop();
     Ui.info(Ui.f`Client Build file: ${clientBundlingConfig.intermediate}`);
+    // ------------------
 
     // -------------------
     // Run webpack
@@ -230,7 +177,7 @@ const createBundle = (Ui, config, desc) => {
  * 
  * @return void
  */
-const buildRoutes = (Ui, entry, build, desc) => {
+const buildRoutes = (build, Ui, entry, desc) => {
     // -------------------
     // Helper functions
     // -------------------
@@ -256,13 +203,16 @@ const buildRoutes = (Ui, entry, build, desc) => {
 
     var indexCount = 0;
     if (entry && Fs.existsSync(entry)) {
+        var clientDirname = entry.replace(/\\/g, '/').split('/').pop();
         walk(entry, (file, ext) => {
             //relativePath = relativePath.replace(/\\/g, '/');
             if (file.replace(/\\/g, '/').endsWith('/index.js')) {
                 var relativePath = Path.relative(entry, file).replace(/\\/g, '/');
                 // Import code
                 var routeName = 'index' + (++ indexCount);
-                build.imports['./' + relativePath] = '* as ' + routeName;
+                // IMPORTANT: we;re taking a step back here so that the parent-child relationship for 
+                // the directories be involved
+                build.imports[`../${clientDirname}/${relativePath}`] = '* as ' + routeName;
                 // Definition code
                 var routePath = _beforeLast('/' + relativePath, '/index.js');
                 build.code.push(`layout['${routePath || '/'}'] = ${routeName};`);
@@ -275,3 +225,24 @@ const buildRoutes = (Ui, entry, build, desc) => {
         Ui.log(`> (none)`);
     }
 };
+
+const buildParams = (build, params, varName = null, indentation = 0) => {
+    if (varName) build.code.push(`const ${varName} = {`);
+    Object.keys(params).forEach(name => {
+        var _name = `    ${'    '.repeat(indentation)}${(_isArray(params) ? '' : (name.includes(' ') ? `'${name}'` : name) + ': ')}`;
+        if ([ 'boolean', 'number' ].includes(typeof params[name])) {
+            build.code.push(`${_name}${params[name]},`);
+        } else if (_isArray(params[name])) {
+            build.code.push(`${_name}[`);
+            buildParams(build, params[name], null, indentation + 1);
+            build.code.push(`    ${'    '.repeat(indentation)}],`);
+        } else if (_isObject(params[name])) {
+            build.code.push(`${_name}{`);
+            buildParams(build, params[name], null, indentation + 1);
+            build.code.push(`    ${'    '.repeat(indentation)}},`);
+        } else {
+            build.code.push(`${_name}'${params[name]}',`);
+        }
+    });
+    if (varName) build.code.push(`};`);
+}

package/src/cmd/origins.js

@@ -64,9 +64,9 @@ export async function deploy(Ui, origin, flags = {}, layout = {}) {
             Fs.mkdirSync(origin.deploy_path, {recursive: true});
         }
     }
-    git.cwd(origin.deploy_path);
+    await git.cwd(origin.deploy_path);
     // Must come after git.cwd()
-    git.init();
+    await git.init();
 
     const hosts = {
         github: 'https://github.com',

package/src/cmd/server.js

@@ -61,7 +61,7 @@ export async function start(Ui, flags = {}, layout = {}) {
     if (flags.env !== 'prod' && flags.watch) {
         var nodemon, ecpt;
         try {
-            nodemon = await import('nodemon');
+            nodemon = await import(Path.resolve('./node_modules/nodemon/lib/nodemon.js'));
         } catch(e) {
             ecpt = e;
         }

package/src/modules/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/modules/_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);
+};