@webqit/webflo 0.8.76 → 0.9.0

package/src/index.js

@@ -1,151 +1,18 @@
-#!/usr/bin/env node
 
 /**
- * imports
+ * @imports
  */
-import _isEmpty from '@webqit/util/js/isEmpty.js';
-import _merge from '@webqit/util/obj/merge.js';
-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 runtime from './runtime/index.js';
-import * as services from './services/index.js';
+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';
 
-// ------------------------------------------
-
-const commands = {
-    config: 'Starts a configuration process.',
-    build: build.client.desc.build,
-    deploy: services.origins.desc.deploy,
-    ...runtime.server.desc,
-};
-
-// ------------------------------------------
-
-const { command, keywords, flags, options, ellipsis } = parseArgs(process.argv);
-
-// ------------------------------------------
-
-console.log('');
-
-(async function() {
-    const layout = await config.layout.read({});
-    layout.PKG = DotJson.read('./package.json');
-    switch(command) {
-
-        // --------------------------
-
-        case 'build':
-            build.client.build(Ui, flags, layout);
-        break;
-
-        // --------------------------
-
-        case 'config':
-            
-            var domain = Object.keys(keywords)[0];
-            // ----------------
-            if (!domain && ellipsis) {
-                domain = await Promptx({
-                    name: 'domain',
-                    type: 'select',
-                    choices: Object.keys(config).map(c => ({value: c})),
-                    message: 'Please select a configuration domain',
-                }).then(d => d.domain);
-            }
-            if (!domain || !config[domain]) {
-                Ui.log(Ui.f`Please add a configuration domain 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);
-            });
-
-        break;
-
-        // --------------------------
-
-        case 'start':
-           runtime.server.start(Ui, flags, layout);
-        break;
-        
-        case 'stop':
-        case 'restart':
-            var _runtime = Object.keys(keywords)[0];
-            // ----------------
-            if (!_runtime && ellipsis) {
-                _runtime = await Promptx({
-                    name: 'runtime',
-                    type: 'select',
-                    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 runtime.server[command](Ui, _runtime || 'all', flags);
-            process.exit();
-        break;
-
-        case 'processes':
-            const processes = await runtime.server.processes(Ui, flags);
-            Ui.title(`SERVERS`);
-            if (processes.length) {
-                processes.forEach(service => {
-                    Ui.log(Ui.f`> ${service}`);
-                });
-            } else {
-                Ui.log(Ui.f`> (empty)`);
-            }
-            process.exit();
-        break;
-
-        // --------------------------
-
-        case 'deploy':
-            var origin = Object.keys(keywords)[0],
-                options;
-            // ----------------
-            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: options.map(r => ({value: r.TAG})),
-                    message: 'Please select a origin',
-                }).then(d => d.origin);
-            }
-            if (!origin) {
-                Ui.log(Ui.f`Please add an origin name to the ${command} command. For options, use the ellipsis ${'...'}`);
-                return;
-            }
-            // ----------------
-            services.origins.deploy(Ui, origin, flags, layout);
-        break;
-
-        // --------------------------
-
-        case 'cert':
-            var domains = Object.keys(keywords);
-           services.certbot.generate(Ui, domains, flags, layout);
-        break;
-        
-        case 'help':
-        default:
-            Ui.title(`NAVIGATOR HELP`);
-            Ui.log('');
-            Ui.log(Ui.f`Say ${'webflo'} <${'command'}>`);
-            Ui.log('');
-            Ui.log(Ui.f`Where <${'command'}> is one of:`);
-            Ui.log(Ui.f`${commands}`);
-            Ui.log('');
-            Ui.log(Ui.f`You may also refer to the Webflo DOCS as ${'https://webqit.io/tooling/webflo'}`);
-    }    
-})();
+/**
+ * @exports
+ */
+export {
+    config,
+    deployment,
+    runtime,
+    services,
+}

package/src/{runtime → runtime-pi}/Router.js

@@ -2,10 +2,8 @@
 /**
  * @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';
+import { _isString, _isFunction, _isArray } from '@webqit/util/js/index.js';
+import { _from as _arrFrom } from '@webqit/util/arr/index.js';
 
 /**
  * ---------------------------
@@ -19,16 +17,14 @@ export default class Router {
 	 * Constructs a new Router instance
      * over route definitions.
 	 *
-	 * @param string|array	    path
-	 * @param object	        layout
-     * @param object            context
+	 * @param Context	        cx
+	 * @param String|Array	    path
 	 *
 	 * @return void
 	 */
-	constructor(path, layout, context) {
+	constructor(cx, path) {
+        this.cx = cx;
         this.path = _isArray(path) ? path : (path + '').split('/').filter(a => a);
-        this.layout = layout;
-        this.context = context;
     }
 
     /**
@@ -38,10 +34,11 @@ export default class Router {
      * @param Object            event
      * @param any               arg
      * @param function          _default
+     * @param function          remoteFetch
      * 
      * @return object
      */
-     async route(method, event, arg, _default) {
+    async route(method, event, arg, _default, remoteFetch = null) {
 
         const $this = this;
 
@@ -49,15 +46,17 @@ export default class Router {
         // The loop
         // ----------------
         const next = async function(thisTick) {
-            const _this = { ...$this.context };
+            const thisContext = {};
             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);
+                thisContext.pathname = `/${thisTick.trail.join('/')}`;
+                thisContext.stepname = thisTick.trail[thisTick.trail.length - 1];
+                $this.finalizeHandlerContext(thisContext, thisTick);
                 // -------------
                 if (thisTick.exports) {
+                    // Broadcast any hints exported by handler
+                    if (thisTick.exports.hints) { await event.port.post({ ...thisTick.exports.hints, $type: 'handler:hints' }); }
                     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) {
@@ -102,7 +101,7 @@ export default class Router {
                         _next.pathname = nextPathname.join('/');
                         _next.stepname = nextPathname[0];
                         // -------------
-                        return await handler.call(_this, thisTick.event, thisTick.arg, _next/*next*/);
+                        return await handler.call(thisContext, thisTick.event, thisTick.arg, _next/*next*/, remoteFetch);
                     }
                     // Handler not found but exports found
                     return next(thisTick);
@@ -115,7 +114,7 @@ export default class Router {
             // Local file
             // -------------
             if (_default) {
-                return await _default.call(_this, thisTick.event, thisTick.arg);
+                return await _default.call(thisContext, thisTick.event, thisTick.arg, remoteFetch);
             }
         };
         
@@ -126,5 +125,6 @@ export default class Router {
             arg,
          });
 
-    } 
-};
+    }
+
+}

package/src/runtime-pi/client/Context.js

@@ -0,0 +1,7 @@
+
+/**
+ * @imports
+ */
+import _Contex from '../../Context.js';
+
+export default class Context extends _Contex {}

package/src/{runtime → runtime-pi}/client/Router.js

@@ -14,8 +14,8 @@ import _Router from '../Router.js';
 export default class Router extends _Router {
 
     async readTick(thisTick) {
-        var routeTree = this.layout;
-        var routePaths = Object.keys(this.layout);
+        var routeTree = this.cx.layout;
+        var routePaths = Object.keys(this.cx.layout);
         if (thisTick.trail) {
             thisTick.currentSegment = thisTick.destination[thisTick.trail.length];
             thisTick.currentSegmentOnFile = [ thisTick.currentSegment, '-' ].reduce((_segmentOnFile, _seg) => {

package/src/{runtime/client/Navigator.js → runtime-pi/client/Runtime.js}

@@ -2,22 +2,64 @@
 /**
  * @imports
  */
-import _before from '@webqit/util/str/before.js';
-import _toTitle from '@webqit/util/str/toTitle.js';
-import { wwwFormUnserialize, wwwFormSet, wwwFormSerialize } from '../util.js';
-import { Observer } from './Runtime.js';
+import { _before, _toTitle } from '@webqit/util/str/index.js';
+import { Observer } from '@webqit/oohtml-ssr/apis.js';
+import Storage from './Storage.js';
 import Url from './Url.js';
+import { wwwFormUnserialize, wwwFormSet, wwwFormSerialize } from '../util.js';
+import * as whatwag from './whatwag.js';
+import xURL from '../xURL.js';
+import xFormData from "../xFormData.js";
+import xRequestHeaders from "../xRequestHeaders.js";
+import xResponseHeaders from "../xResponseHeaders.js";
+import xRequest from "../xRequest.js";
+import xResponse from "../xResponse.js";
+import xfetch from '../xfetch.js';
+import xHttpEvent from '../xHttpEvent.js';
+
+const URL = xURL(whatwag.URL);
+const FormData = xFormData(whatwag.FormData);
+const ReadableStream = whatwag.ReadableStream;
+const RequestHeaders = xRequestHeaders(whatwag.Headers);
+const ResponseHeaders = xResponseHeaders(whatwag.Headers);
+const Request = xRequest(whatwag.Request, RequestHeaders, FormData);
+const Response = xResponse(whatwag.Response, ResponseHeaders, FormData);
+const fetch = xfetch(whatwag.fetch);
+const HttpEvent = xHttpEvent(Request, Response, URL);
+
+export {
+	URL,
+	FormData,
+	ReadableStream,
+	RequestHeaders,
+	ResponseHeaders,
+	Request,
+	Response,
+	fetch,
+	HttpEvent,
+	Observer,
+}
 
-export default class Navigator {
+export default class Runtime {
 
-    constructor(client) {
-        this.client = client;
+    /**
+     * Runtime
+     * 
+     * @param Object        cx
+     * @param Function      clientCallback
+     * 
+     * @return void
+     */
+	constructor(cx, clientCallback) {
 
-		/**
-		 * ----------------
-		 * Navigator location
-		 * ----------------
-		 */
+        // ---------------
+		this.cx = cx;
+        this.clients = new Map;
+        // ---------------
+		this.cx.runtime = this;
+		let client = clientCallback(this.cx, '*');
+        if (!client || !client.handle) throw new Error(`Application instance must define a ".handle()" method.`);
+		this.clients.set('*', client);
 
 		// -----------------------
 		// Initialize location
@@ -113,26 +155,16 @@ export default class Navigator {
 			}
 		});
 
-		/**
-		 * ----------------
-		 * Navigator network
-		 * ----------------
-		 */
-
 		// -----------------------
 		// Initialize network
 		Observer.set(this, 'network', {});
 		window.addEventListener('online', () => Observer.set(this.network, 'online', navigator.onLine));
 		window.addEventListener('offline', () => Observer.set(this.network, 'online', navigator.onLine));
 
-		/**
-		 * ----------------
-		 * Initial navigation
-		 * ----------------
-		 */
-
-        this.go(this.location, { srcType: 'init' });
-     }
+        // ---------------
+        this.go(this.location, {}, { srcType: 'init' });
+        // ---------------
+	}
 
     /**
      * History object
@@ -145,91 +177,100 @@ export default class Navigator {
      * Performs a request.
      *
      * @param object|string 	href
-     * @param object 			params
+     * @param object 			init
+     * @param object 			src
      *
-     * @return void
+     * @return Response
      */
-    async go(url, params = {}) {
-
-        // Generates request object
-        const generateRequest = (url, params) => {
-            return new Request(url, {
-                ...params,
-                headers: {
-                    'Accept': 'application/json',
-					'Cache-Control': 'no-store',
-                    'X-Redirect-Policy': 'manual-when-cross-origin',
-                    'X-Redirect-Code': xRedirectCode,
-                    'X-Powered-By': '@webqit/webflo',
-                    ...(params.headers || {}),
-                },
-                referrer: window.document.location.href,
-                signal: this._abortController.signal,
-            });
-        };
-
-        // Initiates remote fetch and sets the status
-        const remoteRequest = request => {
-            Observer.set(this.network, 'remote', true);
-            let _response = fetch(request);
-            // This catch() is NOT intended to handle failure of the fetch
-            _response.catch(e => Observer.set(this.network, 'error', e.message));
-            // Save a reference to this
-            return _response.then(async response => {
-                // Stop loading status
-                Observer.set(this.network, 'remote', false);
-                return response;
-            });
-        };
-
-        // Handles response object
-        const handleResponse = async (response, params) => {
-            response = await response;
-            Observer.set(this.network, 'remote', false);
-            Observer.set(this.network, 'error', null);
-            if (['link', 'form'].includes(params.srcType)) {
-                Observer.set(params.src, 'active', false);
-                Observer.set(params.submitter || {}, 'active', false);
-            }
-            if (!response) return;
-            if (response.redirected && this.isSameOrigin(response.url)) {
-                Observer.set(this.location, { href: response.url }, {
-                    detail: { isRedirect: true },
-                });
-                return;
-            }
-            let location = response.headers.get('Location');
-            if (location && response.status === xRedirectCode) {
-                Observer.set(this.network, 'redirecting', location);
-                window.location = location;
-            }
-        };
-
+    async go(url, init = {}, detail = {}) {
+        if (this._abortController) {
+            this._abortController.abort();
+        }
+        this._abortController = new AbortController();
+        this._xRedirectCode = 300;
         // ------------
-        url = typeof url === 'string' ? { href: url } : url;
-        params = { referrer: this.location.href, ...params };
+        url = typeof url === 'string' ? new whatwag.URL(url) : url;
+        init = { referrer: this.location.href, ...init };
         // ------------
-        Observer.set(this.location, url, { detail: params, });
-        Observer.set(this.network, 'redirecting', null);
-        // ------------
-        if (['link', 'form'].includes(params.srcType)) {
-            Observer.set(params.src, 'active', true);
-            Observer.set(params.submitter || {}, 'active', true);
+        if (detail.srcType !== 'init' && (_before(url.href, '#') === _before(init.referrer, '#') && (init.method || 'GET').toUpperCase() === 'GET')) {
+			return;
+        }
+		// ------------
+        if (['link', 'form'].includes(detail.srcType)) {
+            Observer.set(detail.src, 'active', true);
+            Observer.set(detail.submitter || {}, 'active', true);
         }
         // ------------
+        Observer.set(this.location, url, { detail: { ...init, ...detail }, });
+        Observer.set(this.network, 'redirecting', null);
+        // ------------
+		// The request object
+		let request = this.generateRequest(url.href, init);
+		// The navigation event
+		let httpEvent = new HttpEvent(request, detail, (id = null, persistent = false) => this.getSession(httpEvent, id, persistent));
+		// Response
+		let response = await this.clients.get('*').handle(httpEvent, (...args) => this.remoteFetch(...args));
+		let finalResponse = this.handleResponse(httpEvent, response);
+        // Return value
+		return finalResponse;
+    }
 
-        if (this._abortController) {
-            this._abortController.abort();
-        }
-        this._abortController = new AbortController();
-        let xRedirectCode = 300;
+	// Generates request object
+	generateRequest(href, init) {
+		return new Request(href, {
+			signal: this._abortController.signal,
+			...init,
+			headers: {
+				'Accept': 'application/json',
+				'X-Redirect-Policy': 'manual-when-cross-origin',
+				'X-Redirect-Code': this._xRedirectCode,
+				'X-Powered-By': '@webqit/webflo',
+				...(init.headers || {}),
+			},
+		});
+	}
 
-        if (params.srcType === 'init' || !(_before(url.href, '#') === _before(params.referrer, '#') && (params.method || 'GET').toUpperCase() === 'GET')) {
-            handleResponse(this.client.call(this, generateRequest(url.href, params), params, remoteRequest), params);
-        }
+	// Generates session object
+    getSession(e, id = null, persistent = false) {
+		return Storage(id, persistent);
+	}
 
-        return this._abortController;
-    }
+	// Initiates remote fetch and sets the status
+	remoteFetch(request) {
+		Observer.set(this.network, 'remote', true);
+		let _response = fetch(request);
+		// This catch() is NOT intended to handle failure of the fetch
+		_response.catch(e => Observer.set(this.network, 'error', e.message));
+		// Return xResponse
+		return _response.then(async response => {
+			// Stop loading status
+			Observer.set(this.network, 'remote', false);
+			return new Response(response);
+		});
+	}
+
+	// Handles response object
+	handleResponse(e, response) {
+		if (!(response instanceof Response)) { response = new Response(response); }
+		Observer.set(this.network, 'remote', false);
+		Observer.set(this.network, 'error', null);
+		if (['link', 'form'].includes(e.detail.srcType)) {
+			Observer.set(e.detail.src, 'active', false);
+			Observer.set(e.detail.submitter || {}, 'active', false);
+		}
+		if (response.redirected && this.isSameOrigin(response.url)) {
+			Observer.set(this.location, { href: response.url }, {
+				detail: { isRedirect: true },
+			});
+		} else {
+			let location = response.headers.get('Location');
+			if (location && response.status === this._xRedirectCode) {
+				Observer.set(this.network, 'redirecting', location);
+				window.location = location;
+			}
+		}
+		return response;
+	}
 
     /**
      * Checks if an URL is same origin.

package/src/runtime-pi/client/RuntimeClient.js

@@ -0,0 +1,114 @@
+
+/**
+ * @imports
+ */
+import { Observer } from './Runtime.js';
+import WorkerComm from './WorkerComm.js';
+import Router from './Router.js';
+
+export default class RuntimeClient {
+
+	/**
+     * RuntimeClient
+     * 
+     * @param Context cx
+     */
+	constructor(cx) {
+		this.cx = cx;
+		const workerComm = new WorkerComm('/worker.js', { startMessages: true });
+		Observer.observe(workerComm, changes => {
+			//console.log('SERVICE_WORKER_STATE_CHANGE', changes[0].name, changes[0].value);
+		});
+	}
+
+	 /**
+     * Handles HTTP events.
+     * 
+     * @param HttpEvent       httpEvent
+     * @param Function        remoteFetch
+     * 
+     * @return Response
+     */
+	async handle(httpEvent, remoteFetch) {
+		// The app router
+        const router = new Router(this.cx, httpEvent.url.pathname);
+        const handle = async () => {
+			// --------
+			// ROUTE FOR DATA
+			// --------
+			let httpMethodName = httpEvent.request.method.toLowerCase();
+			let response = await router.route([httpMethodName === 'delete' ? 'del' : httpMethodName, 'default'], httpEvent, {}, async event => {
+				return remoteFetch(event.request);
+			}, remoteFetch);
+			if (!(response instanceof httpEvent.Response)) {
+                response = new httpEvent.Response(response);
+            }
+
+            // --------
+            // Rendering
+            // --------
+            if (response.ok && response.headers.contentType === 'application/json') {
+                await this.render(httpEvent, response, router);
+				await this.scrollIntoView(httpEvent);
+            } else if (!response.ok) {
+				await this.unrender();
+			}
+
+            return response;
+		};
+		
+		// --------
+        // PIPE THROUGH MIDDLEWARES
+        // --------
+        return (this.cx.middlewares || []).concat(handle).reverse().reduce((next, fn) => {
+            return () => fn.call(this.cx, httpEvent, router, next);
+        }, null)();
+	}
+
+	// Renderer
+    async render(httpEvent, response, router) {
+		let data = await response.json();
+		return router.route('render', httpEvent, data, async (httpEvent, data) => {
+			// --------
+			// OOHTML would waiting for DOM-ready in order to be initialized
+			await new Promise(res => window.WebQit.DOM.ready(res));
+			if (!window.document.state.env) {
+				window.document.setState({
+					env: 'client',
+					onHydration: (httpEvent.detail || {}).srcType === 'init',
+					network: this.cx.runtime.network,
+					url: this.cx.runtime.location,
+				}, { update: true });
+			}
+			window.document.setState({ page: data }, { update: 'merge' });
+			window.document.body.setAttribute('template', 'page/' + httpEvent.url.pathname.split('/').filter(a => a).map(a => a + '+-').join('/'));
+            await new Promise(res => (window.document.templatesReadyState === 'complete' && res(), window.document.addEventListener('templatesreadystatechange', res)));
+			return true;
+		});
+	}
+
+	// Unrender
+	async unrender() {
+		window.document.setState({ page: {} }, { update: 'merge' });
+		window.document.body.setAttribute('template', '');
+	}
+
+	// Normalize scroll position
+	async scrollIntoView(httpEvent) {
+		if (!(httpEvent.detail.src instanceof Element)) return;
+		await new Promise(res => setTimeout(res, 10));
+		let viewportTop;
+		if (httpEvent.url.hash && (urlTarget = document.querySelector(httpEvent.url.hash))) {
+			urlTarget.scrollIntoView();
+		} else if (viewportTop = Array.from(document.querySelectorAll('[data-viewport-top]')).pop()) {
+			viewportTop.focus();
+		} else {
+			document.documentElement.classList.add('scroll-reset');
+			document.body.scrollIntoView();
+			await new Promise(res => setTimeout(res, 600));
+			document.documentElement.classList.remove('scroll-reset');
+		}
+	}
+
+}
+