@webqit/webflo 0.8.45 → 0.8.49

package/src/modules/client/Client.js

@@ -2,11 +2,14 @@
 /**
  * @imports
  */
+import { OOHTML, Observer } from '@webqit/pseudo-browser/index2.js';
 import _isObject from '@webqit/util/js/isObject.js';
 import _before from '@webqit/util/str/before.js';
+import _unique from '@webqit/util/arr/unique.js';
 import _fetch from '@webqit/browser-pie/src/apis/fetch.js';
-import { OOHTML, Observer } from '@webqit/pseudo-browser/index2.js';
-import ClientNavigationEvent from './ClientNavigationEvent.js';
+import NavigationEvent from './NavigationEvent.js';
+import WorkerClient from './WorkerClient.js';
+import Storage from './Storage.js';
 import Router from './Router.js';
 import Http from './Http.js';
 
@@ -26,6 +29,12 @@ OOHTML.call(window);
 
 export default function(layout, params) {
 
+	const session = Storage();
+	const workerClient = new WorkerClient('/worker.js', { startMessages: true });
+	Observer.observe(workerClient, changes => {
+		console.log('SERVICE_WORKER_STATE', changes[0].name, changes[0].value);
+	});
+
 	// Copy..
 	layout = {...layout};
 	params = {...params};
@@ -38,6 +47,7 @@ export default function(layout, params) {
 	 * Apply routing
 	 * ----------------
 	 */	
+
 	Http.createClient(async function(request, event = null) {
 
 		const httpInstance = this;
@@ -47,7 +57,6 @@ export default function(layout, params) {
         // -------------------
 
 		// The srvice object
-		const clientNavigationEvent = new ClientNavigationEvent(request);
 		const $context = {
 			layout,
 			onHydration: !event && (await window.WebQit.OOHTML.meta.get('isomorphic')),
@@ -55,6 +64,7 @@ export default function(layout, params) {
 		}
 		
 		// The app router
+		const clientNavigationEvent = new NavigationEvent(request, session);
 		const requestPath = clientNavigationEvent.url.pathname;
 		const router = new Router(requestPath, layout, $context);
 		if (networkProgressOngoing) {
@@ -68,32 +78,54 @@ export default function(layout, params) {
 			// ROUTE FOR DATA
 			// --------
 			const httpMethodName = clientNavigationEvent.request.method.toLowerCase();
-			$context.response = await router.route([httpMethodName === 'delete' ? 'del' : httpMethodName, 'default'], [clientNavigationEvent], null, async function() {
+			$context.response = await router.route([httpMethodName === 'delete' ? 'del' : httpMethodName, 'default'], clientNavigationEvent, document.state, async function(event) {
 				// -----------------
 				var networkProgress = networkProgressOngoing = new RequestHandle();
-				networkProgress.setActive(true);
+				networkProgress.setActive(true, event.request._method || event.request.method);
 				// -----------------
-				const headers = clientNavigationEvent.request.headers;
+				const headers = event.request.headers;
 				if (!headers.get('Accept')) {
 					headers.set('Accept', 'application/json');
+				}
+				if (!headers.get('Cache-Control')) {
 					headers.set('Cache-Control', 'no-store');
 				}
-				const response = _fetch(clientNavigationEvent.request, {}, networkProgress.updateProgress.bind(networkProgress));
+				// -----------------
+				// Sync session data to cache to be available to service-worker routers
+				const response = fetch(event.request, {}, networkProgress.updateProgress.bind(networkProgress));
+				// -----------------
 				// -----------------
 				response.catch(e => networkProgress.throw(e.message));
-				return response.then(response => {
+				return response.then(async _response => {
+					_response = new clientNavigationEvent.Response(_response.body, {
+						status: _response.status,
+						statusText: _response.statusText,
+						headers: _response.headers,
+						_proxy: {
+							url: _response.url,
+							ok: _response.ok,
+							redirected: _response.redirected
+						},
+					});
+					// Save a reference to this
+					$context.responseClone = _response;
+					// Return a promise that never resolves as a new response is underway
 					if (!networkProgress.active) {
 						return new Promise(() => {});
 					}
+					// Stop loading status
 					networkProgress.setActive(false);
-					return response.ok ? response.json() : null;
+					return _response;
 				});
-			}, []);
+			});
+			if ($context.response instanceof clientNavigationEvent.Response) {
+                $context.response = await $context.response.jsonBuild();
+            }
 
 			// --------
 			// Render
 			// --------
-			const rendering = await router.route('render', [clientNavigationEvent], $context.response, async function(data) {
+			const rendering = await router.route('render', clientNavigationEvent, $context.response, async function(event, data) {
 				// --------
 				// OOHTML would waiting for DOM-ready in order to be initialized
 				await new Promise(res => window.WebQit.DOM.ready(res));
@@ -103,9 +135,10 @@ export default function(layout, params) {
 						onHydration: $context.onHydration,
 						network: networkWatch,
 						url: httpInstance.location,
+						session,
 					}, { update: true });
 				}
-				window.document.setState({page: data}, { update: 'merge' });
+				window.document.setState({ page: data }, { update: 'merge' });
 				window.document.body.setAttribute('template', 'page/' + requestPath.split('/').filter(a => a).map(a => a + '+-').join('/'));
 				return new Promise(res => {
 					window.document.addEventListener('templatesreadystatechange', () => res(window));
@@ -113,19 +146,13 @@ export default function(layout, params) {
 						res(window);
 					}
 				});
-			}, []);
+			});
 
 			// --------
 			// Render...
 			// --------
 
-			if (_isObject(rendering) && rendering.document) {
-				//$context.response = window.print();
-			} else {
-				//$context.response = rendering;
-			}
-
-			if (event && _isObject(event.detail) && (event.detail.src instanceof Element) && /* do only on url path change */ _before(event.value, '?') !== _before(event.oldValue, '?')) {
+			if (!document.activeElement && event && _isObject(event.detail) && (event.detail.src instanceof Element) && /* do only on url path change */ _before(event.value, '?') !== _before(event.oldValue, '?')) {
 				setTimeout(() => {
 					var urlTarget;
 					if (clientNavigationEvent.url.hash && (urlTarget = document.querySelector(clientNavigationEvent.url.hash))) {
@@ -147,18 +174,20 @@ export default function(layout, params) {
 
 		}
 		
+		return $context.responseClone;
 	});
 
 };
 
-const networkWatch = {progress: {}, online: navigator.onLine};
+const networkWatch = { progress: {}, online: navigator.onLine };
 class RequestHandle {
-	setActive(state) {
+	setActive(state, method = '') {
 		if (this.active === false) {
 			return;
 		}
 		this.active = state;
 		Observer.set(networkWatch, {
+			method,
 			error: '',
 			progress: {
 				active: state, 

package/src/modules/client/Http.js

@@ -27,7 +27,7 @@ export default class Http {
 	 *
 	 * @return void
 	 */
-	static createClient(client, params = {}) {
+	static async createClient(client, params = {}) {
 
 		/**
 		 * ----------------
@@ -107,15 +107,22 @@ export default class Http {
 		window.addEventListener('submit', e => {
 			var actionEl = window.document.createElement('a'),
 				form = e.target.closest('form'),
-				submits = _arrFrom(form.elements).filter(el => el.matches('button,input[type="submit"],input[type="image"]'));
-			var submitParams = ['action', 'enctype', 'method', 'noValidate', 'target'].reduce((params, prop) => {
+				submits = [e.submitter]; //_arrFrom(form.elements).filter(el => el.matches('button,input[type="submit"],input[type="image"]'));
+			var submitParams = [ 'action', 'enctype', 'method', 'noValidate', 'target' ].reduce((params, prop) => {
 				params[prop] = submits.reduce((val, el) => val || (el.hasAttribute(`form${prop.toLowerCase()}`) ? el[`form${_toTitle(prop)}`] : null), null) || form[prop];
 				return params;
 			}, {});
+			// We support method hacking
+			// ---------------
+			submitParams.method = e.submitter.dataset.method || form.dataset.method || submitParams.method;
+			// ---------------
 			if ((actionEl.href = submitParams.action) && !submitParams.target
 			// Same origin... but...
 			&& (!actionEl.origin || actionEl.origin === instance.location.origin)) {
 				var formData = new FormData(form);
+				if (e.submitter.name) {
+					formData.set(e.submitter.name, e.submitter.value);
+				}
 				if (submitParams.method === 'get') {
 					var query = wwwFormUnserialize(actionEl.search);
 					Array.from(formData.entries()).forEach(_entry => {
@@ -129,7 +136,7 @@ export default class Http {
 				}
 				// Publish everything, including hash
 				Observer.set(instance.location, Url.copy(actionEl), {
-					detail: {type: 'form', src: form, submitParams, data: formData},
+					detail: { type: 'form', src: form, submitParams, data: formData },
 				});
 				// URLs with # will cause a natural navigation
 				// even if pointing to a different page, a natural navigation will still happen
@@ -151,7 +158,7 @@ export default class Http {
 		// -----------------------
 		// Syndicate changes to
 		// the browser;s location bar
-		Observer.observe(instance.location, [['href']], e => {
+		Observer.observe(instance.location, [[ 'href' ]], e => {
 			e = e[0];
 			if ((e.detail || {}).src === window.document.location) {
 				// Already from a "popstate" event as above, so don't push again
@@ -173,27 +180,35 @@ export default class Http {
 			var options = {
 				method: (detail.submitParams || detail.src || {}).method || 'get',
 				body: detail.data,
-				headers: { 'X-Powered-By': '@webqit/webflo', },
+				headers: { ...(detail.headers || {}), 'X-Powered-By': '@webqit/webflo', },
 				referrer,
 			};
-			if (detail.accept) {
-				options.headers.accept = detail.accept;
-			}
 			return new StdRequest(url, options);
 		};
+		const handleResponse = response => {
+			if (response && response.redirected) {
+				var actionEl = window.document.createElement('a');
+				if ((actionEl.href = response.url) && (!actionEl.origin || actionEl.origin === instance.location.origin)) {
+					Observer.set(instance.location, { href: response.url }, {
+						detail: { follow: false },
+					});
+				}
+			}
+		};
 		// ----------------------------------
 
 		// Observe location and route
 		Observer.observe(instance.location, [['href']], async e => {
 			e = e[0];
 			var detail = e.detail || {};
+			if (detail.follow === false) return;
 			var method = (detail.submitParams || detail.src || {}).method;
 			if ((_before(e.value, '#') !== _before(e.oldValue, '#')) || (method && method.toUpperCase() !== 'GET')) {
-				return await client.call(instance, createRequest(e.value, e.oldValue, e), e);
+				return handleResponse(await client.call(instance, createRequest(e.value, e.oldValue, e), e));
 			}
 		}, {diff: false /* method might be the difference */});
 		// Startup route
-		client.call(instance, createRequest(window.document.location.href, document.referrer));
+		handleResponse(await client.call(instance, createRequest(window.document.location.href, document.referrer)));
 
 		return instance;
 	}

package/src/modules/client/NavigationEvent.js

@@ -0,0 +1,20 @@
+
+/**
+ * @imports
+ */
+import _NavigationEvent from '../_NavigationEvent.js';
+import _FormData from '../_FormData.js';
+
+/**
+ * The ClientNavigationEvent class
+ */
+export default _NavigationEvent({
+    URL,
+    Request,
+    Response,
+    Headers,
+    FormData: _FormData(FormData),
+    File,
+    Blob,
+    ReadableStream,
+});

package/src/modules/client/Router.js

@@ -2,11 +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 { path as Path } from '../util.js';
+import _Router from '../Router.js';
 
 /**
  * ---------------------------
@@ -14,108 +11,37 @@ import { path as Path } from '../util.js';
  * ---------------------------
  */
 			
-export default class Router {
+export default class Router extends _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      target
-     * @param array             argsA
-     * @param any               input
-     * @param function          _default
-     * @param array             argsB
-     * 
-     * @return object
-     */
-     async route(target, argsA, input, _default, argsB = []) {
-
-        target = _arrFrom(target);
+    async readTick(thisTick) {
         var routeTree = this.layout;
-        var context = this.context;
-
-        // ----------------
-        // The loop
-        // ----------------
-        const next = async function(index, input, path) {
-
-            var exports;
-            if (index === 0) {
-                exports = routeTree['/'];
-            } else if (path[index - 1]) {
-                var currentHandlerPath = '/' + path.slice(0, index).join('/');
-                var wildcardCurrentHandlerPath = '/' + path.slice(0, index - 1).concat('-').join('/');
-                exports = routeTree[currentHandlerPath] || routeTree[wildcardCurrentHandlerPath];
-            }
+        var routePaths = Object.keys(this.layout);
+        if (thisTick.trail) {
+            thisTick.currentSegment = thisTick.destination[thisTick.trail.length];
+            thisTick.currentSegmentOnFile = [ thisTick.currentSegment, '-' ].reduce((_segmentOnFile, _seg) => {
+                if (_segmentOnFile.index) return _segmentOnFile;
+                var _currentPath = `/${thisTick.trailOnFile.concat(_seg).join('/')}`;
+                return routeTree[_currentPath] ? { seg: _seg, index: _currentPath } : (
+                    routePaths.filter(p => p.startsWith(`${_currentPath}/`)).length ? { seg: _seg, dirExists: true } : _segmentOnFile
+                );
+            }, { seg: null });
+            thisTick.trail.push(thisTick.currentSegment);
+            thisTick.trailOnFile.push(thisTick.currentSegmentOnFile.seg);
+            thisTick.exports = routeTree[thisTick.currentSegmentOnFile.index];
+        } else {
+            thisTick.trail = [];
+            thisTick.trailOnFile = [];
+            thisTick.currentSegmentOnFile = { index: '/' };
+            thisTick.exports = routeTree['/'];
+        }
+        return thisTick;
+    }
 
-            if (exports) {
-                const func = _isFunction(exports) && target.includes('default') ? exports : target.reduce((func, name) => func || exports[name], null);
-                if (func) {
-                    // -------------
-                    // Dynamic response
-                    // -------------
-                    const _next = (..._args) => {
-                        var _index;
-                        if (_args.length > 1) {
-                            if (!_isString(_args[1])) {
-                                throw new Error('Router redirect must be a string!');
-                            }
-                            var newPath = Path.join(path.slice(0, index).join('/'), _args[1]);
-                            if (newPath.startsWith('../')) {
-                                throw new Error('Router redirect cannot traverse beyond the routing directory! (' + _args[1] + ' >> ' + newPath + ')');
-                            }
-                            _args[1] = newPath.split('/').map(a => a.trim()).filter(a => a);
-                            _index = path.slice(0, index).reduce((build, seg, i) => build.length === i && seg === _args[1][i] ? build.concat(seg) : build, []).length;
-                        } else {
-                            _args[1] = path;
-                            _index = index;
-                        }
-                        return next(_index + 1, ..._args);
-                    };
-                    _next.pathname = path.slice(index).join('/');
-                    _next.stepname = _next.pathname.split('/').shift();
-                    // -------------
-                    const _this = {
-                        pathname: '/' + path.slice(0, index).join('/'),
-                        ...context
-                    };
-                    _this.stepname = _this.pathname.split('/').pop();
-                    // -------------
-                    return await func.bind(_this)(...argsA.concat([input, _next/*next*/].concat(argsB)));
-                } else {
-                    return next(index + 1, input, path);
-                }
-            }
+    finalizeHandlerContext(context, thisTick) {
+        return context.dirname = thisTick.currentSegmentOnFile.index;
+    }
 
-            if (_default) {
-                // -------------
-                // Local file
-                // -------------
-                const defaultThis = {pathname: '/' + path.join('/'), ...context};
-                return await _default.call(defaultThis, input);
-            }
-    
-            // -------------
-            // Recieved response or undefined
-            // -------------
-            return;
-        };
-        
-        return next(0, input, this.path);
-    } 
+    pathJoin(...args) {
+        return Path.join(...args);
+    }
 };

package/src/modules/client/StdRequest.js

@@ -2,7 +2,7 @@
 /**
  * @imports
  */
-import { _isTypeObject } from '@webqit/util/js/index.js';
+import { _isTypeObject, _isFunction } from '@webqit/util/js/index.js';
 import { wwwFormUnserialize, wwwFormSet } from '../util.js';
 
 /**
@@ -35,39 +35,40 @@ export default class StdRequest extends Request {
     }
             
     // Payload
-    parse() {
-        return new Promise(async resolve => {
-            var request = this.clone();
-            var contentType = request.headers['content-type'];
-            var submits = {
-                payload: null,
-                inputs: {},
-                files: {},
-                type: contentType === 'application/x-www-form-urlencoded' || contentType.startsWith('multipart/') ? 'form-data' 
-                    : (contentType === 'application/json' ? 'json'
-                        : (contentType === 'text/plain' ? 'plain' 
-                            : 'other')),
-            };
-            if (submits.type === 'form-data') {
-                submits.payload = await request.formData();
-                for(var [ name, value ] of submits.payload.entries()) {
-                    if (value instanceof File) {
-                        wwwFormSet(submits.files, name, value);
-                    } else {
-                        wwwFormSet(submits.inputs, name, value);
-                    }
-                }
-            } else {
-                submits.payload = await (submits.type === 'json' 
-                    ? request.json() : (
-                        submits.type === 'plain' ? request.text() : request.arrayBuffer()
+    parse(force = false) {
+        if (!this._submits || force) {
+            this._submits = new Promise(async resolve => {
+                var request = this.clone();
+                var contentType = request.headers['content-type'] || '';
+                var submits = {
+                    inputs: {},
+                    files: {},
+                    type: contentType === 'application/x-www-form-urlencoded' || contentType.startsWith('multipart/') || (!contentType && !['get'].includes(request.method.toLowerCase())) ? 'form-data' 
+                        : (contentType === 'application/json' ? 'json'
+                            : (contentType === 'text/plain' ? 'plain' 
+                                : 'other')),
+                };
+                if (submits.type === 'form-data') {
+                    try {
+                        const payload = await request.formData();
+                        for(var [ name, value ] of payload.entries()) {
+                            if (value instanceof File) {
+                                wwwFormSet(submits.files, name, value);
+                            } else {
+                                wwwFormSet(submits.inputs, name, value);
+                            }
+                        }
+                    } catch(e) { }
+                } else {
+                    submits.inputs = await (submits.type === 'json' 
+                        ? request.json() : (
+                            submits.type === 'plain' ? request.text() : request.arrayBuffer()
+                        )
                     )
-                )
-                if (submits.type === 'json' && _isTypeObject(submits.payload)) {
-                    submits.inputs = inputs;
                 }
-            }
-            resolve(submits);
-        });
+                resolve(submits);
+            });
+        }
+        return this._submits;
     }
 }

package/src/modules/client/Storage.js

@@ -0,0 +1,56 @@
+
+
+/**
+ * @imports
+ */
+import { Observer } from '@webqit/pseudo-browser/index2.js';
+import { _isString, _isUndefined } from '@webqit/util/js/index.js';
+
+export default function(persistent = false) {
+
+    const storeType = persistent ? 'localStorage' : 'sessionStorage';
+    if (!window[storeType]) {
+        throw new Error(`The specified Web Storage API ${storeType} is invalid or not supported`)
+    }
+
+    const _storage = {};
+    Observer.intercept(_storage, (event, received, next) => {
+        if (event.type === 'get' && _isString(event.name)) {
+            const value = window[storeType].getItem(event.name);
+            return !_isUndefined(value) ? JSON.parse(value) : value;
+        }
+        if (event.type === 'set') {
+            window[storeType].setItem(event.name, !_isUndefined(event.value) ? JSON.stringify(event.value) : event.value);
+            return true;
+        }
+        if (event.type === 'deleteProperty') {
+            window[storeType].removeItem(event.name);
+            return true;
+        }
+        if (event.type === 'has') {
+            for(var i = 0; i < window[storeType].length; i ++){
+                if (window[storeType].key(i) === event.name) {
+                    return true;
+                }
+            };
+            return false;
+        }
+        if (event.type === 'ownKeys') {
+            var keys = [];
+            for(var i = 0; i < window[storeType].length; i ++){
+                keys.push(window[storeType].key(i));
+            };
+            return keys;
+        }
+        if (event.type === 'getOwnPropertyDescriptor') {
+            return { enumerable: true, configurable: true };
+        }
+        return next();
+    });
+
+    return Observer.proxy(_storage);
+}
+
+export {
+    Observer,
+}

package/src/modules/client/Url.js

@@ -159,7 +159,7 @@ export default class Url {
 	 * @return object
 	 */
 	static parseUrl(href) {
-		var a = window.document.createElement('a');
+		var a = document.createElement('a');
 		a.href = href;
 		return this.copy(a);
 	}