@webqit/webflo 0.8.71-0 → 0.8.73

package/package.json

@@ -12,7 +12,7 @@
     "vanila-javascript"
   ],
   "homepage": "https://webqit.io/tooling/webflo",
-  "version": "0.8.71-0",
+  "version": "0.8.73",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/runtime/_MessageStream.js

@@ -104,26 +104,30 @@ const _MessageStream = (NativeMessageStream, Headers, FormData) => {
         }
                 
         // Payload
-        jsonBuild(force = false) {
-            if (!this._typedDataCache.jsonBuild || force) {
-                this._typedDataCache.jsonBuild = new Promise(async resolve => {
-                    var request = this, jsonBuild, contentType = request.headers.get('content-type') || '';
+        data(force = false) {
+            if (!this._typedDataCache.data || force) {
+                this._typedDataCache.data = new Promise(async (resolve, reject) => {
+                    var messageInstance = this, data, contentType = messageInstance.headers.get('content-type') || '';
                     var type = contentType === 'application/json' || this._typedDataCache.json ? 'json' : (
-                        contentType === 'application/x-www-form-urlencoded' || contentType.startsWith('multipart/') || this._typedDataCache.formData || (!contentType && !['get'].includes((request.method || '').toLowerCase())) ? 'formData' : (
+                        contentType === 'application/x-www-form-urlencoded' || contentType.startsWith('multipart/') || this._typedDataCache.formData ? 'formData' : (
                             contentType === 'text/plain' ? 'plain' : 'other'
                         )
                     );
-                    if (type === 'formData') {
-                        jsonBuild = (await request.formData()).json();
-                    } else {
-                        jsonBuild = type === 'json' ? await request.json() : (
-                            type === 'plain' ? await request.text() : request.body
-                        );
+                    try {
+                        if (type === 'formData') {
+                            data = (await messageInstance.formData()).json();
+                        } else {
+                            data = type === 'json' ? await messageInstance.json() : (
+                                type === 'plain' ? await messageInstance.text() : messageInstance.body
+                            );
+                        }
+                        resolve(data);
+                    } catch(e) {
+                        reject(e);
                     }
-                    resolve(jsonBuild);
                 });
             }
-            return this._typedDataCache.jsonBuild;
+            return this._typedDataCache.data;
         }
 
     };
@@ -178,7 +182,7 @@ export function encodeBody(body, globals) {
                 contentLength: Buffer.byteLength(detailsObj.body, 'utf8'), // Buffer.from(string).length
             };
         }
-        detailsObj.jsonBuild = body;
+        detailsObj.data = body;
     }
     return detailsObj;
 }

package/src/runtime/_NavigationEvent.js

@@ -22,12 +22,14 @@ const _NavigationEvent = globals => {
         /**
          * Initializes a new NavigationEvent instance.
          * 
-         * @param Request       request 
-         * @param Object        sessionStore 
+         * @param Request       _request 
+         * @param Object        _session 
+         * @param Function      _sessionFactory 
          */
-        constructor(_request, _session = null) {
+        constructor(_request, _session = {}, _sessionFactory = null) {
             this._request = _request;
             this._session = _session;
+            this.sessionFactory = _sessionFactory;
             // -------
             this.URL = URL;
             // -------
@@ -73,7 +75,7 @@ const _NavigationEvent = globals => {
                 init._proxy.referrer = this.request.url;
                 request = new NavigationEvent.Request(this._request, init);
             }            
-            return new NavigationEvent(request, this._session);
+            return new NavigationEvent(request, this._session, this.sessionFactory);
         }
 
     }

package/src/runtime/_ResponseHeaders.js

@@ -69,6 +69,14 @@ const _ResponseHeaders = NativeHeaders => class extends _Headers(NativeHeaders)
         return value;
     }
 
+    get location() {
+        return this.get('Location');
+    }
+
+    set location(value) {
+        return this.set('Location', value);
+    }
+
     get redirect() {
         return this.get('Location');
     }
@@ -76,6 +84,7 @@ const _ResponseHeaders = NativeHeaders => class extends _Headers(NativeHeaders)
     set redirect(value) {
         return this.set('Location', value);
     }
+
 }
 
 export default _ResponseHeaders;

package/src/runtime/client/Http.js

@@ -39,25 +39,105 @@ export default class Http {
 			/**
 			 * Performs a request.
 			 *
-			 * @param string 	href
-			 * @param object 	request
-			 * @param object 	src
+			 * @param object|string 	href
+			 * @param object 			options
 			 *
-			 * @return UserEvent
+			 * @return void
 			 */
-			go(href, request = {}, src = null) {
-				return Observer.set(this.location, 'href', href, {
-					detail: {request, src,},
-				});
+			async go(url, options = {}) {
+				if (this.abortController) {
+					this.abortController.abort();
+				}
+				this.abortController = new AbortController();
+				let xRedirectCode = 300;
+				// Generates request object
+				let generateRequest = (url, options) => {
+					return new StdRequest(url, {
+						...options,
+						headers: {
+							'Accept': 'application/json',
+							'X-Redirect-Policy': 'manual-when-cross-origin',
+							'X-Redirect-Code': xRedirectCode,
+							'X-Powered-By': '@webqit/webflo',
+							...(options.headers || {}),
+						},
+						referrer: window.document.location.href,
+						signal: this.abortController.signal,
+					});
+				};
+				// Handles response object
+				let handleResponse = (response) => {
+					if (!response) return;
+					if (response.redirected && this.isSameOrigin(response.url)) {
+						Observer.set(this.location, { href: response.url }, {
+							detail: { isRedirect: true },
+						});
+					} else if (response.headers.get('Location') && response.status === xRedirectCode) {
+						window.location = response.headers.get('Location');
+					}
+				};
+				url = typeof url === 'string' ? { href: url } : url;
+				options = { referrer: this.location.href, ...options };
+				Observer.set(this.location, url, { detail: options, });
+				if (!(_before(url.href, '#') === _before(options.referrer, '#') && (options.method || 'GET').toUpperCase() === 'GET')) {
+					handleResponse(await client.call(this, generateRequest(url.href, options)));
+				}
+			},
+
+			/**
+			 * Checks if an URL is same origin.
+			 *
+			 * @param object|string 	url
+			 *
+			 * @return Bool
+			 */
+			isSameOrigin(url) {
+				if (typeof url === 'string') {
+					let href = url;
+					url = window.document.createElement('a');
+					url.href = href
+				}
+				return !url.origin || url.origin === this.location.origin;
+			},
+
+			/**
+			 * History object
+			 */
+			get history() {
+				return window.history;
 			}
+
 		};
 
+		// -----------------------
+		// Initialize network
+		Observer.set(instance, 'network', {});
+		window.addEventListener('online', () => Observer.set(instance.network, 'online', navigator.onLine));
+		window.addEventListener('offline', () => Observer.set(instance.network, 'online', navigator.onLine));
+
+		// -----------------------
+		// Initialize location
+		Observer.set(instance, 'location', new Url(window.document.location));
+		// -----------------------
+		// Syndicate changes to the browser;s location bar
+		Observer.observe(instance.location, [[ 'href' ]], ([e]) => {
+			if (e.value === 'http:' || (e.detail || {}).src === window.document.location) {
+				// Already from a "popstate" event as above, so don't push again
+				return;
+			}
+			if (e.value === window.document.location.href || e.value + '/' === window.document.location.href) {
+				instance.history.replaceState(instance.history.state, '', instance.location.href);
+			} else {
+				try { instance.history.pushState(instance.history.state, '', instance.location.href); } catch(e) {}
+			}
+		}, { diff: true });
+
 		/**
 		 * ----------------
-		 * instance.location
+		 * Navigation Interception
 		 * ----------------
 		 */
-		Observer.set(instance, 'location', new Url(window.document.location));
+
 		// -----------------------
 		// This event is triggered by
 		// either the browser back button,
@@ -67,10 +147,9 @@ export default class Http {
 		window.addEventListener('popstate', e => {
 			// Needed to allow window.document.location
 			// to update to window.location
+			let referrer = window.document.location.href;
 			window.setTimeout(() => {
-				Observer.set(instance.location, Url.copy(window.document.location), {
-					detail: { type: 'history', src: window.document.location },
-				});
+				instance.go(Url.copy(window.document.location), { referrer, src: window.document.location, srcType: 'history', });
 			}, 0);
 		});
 
@@ -78,24 +157,17 @@ export default class Http {
 		// Capture all link-clicks
 		// and fire to this router.
 		window.addEventListener('click', e => {
-			var anchor, href;
-			if ((anchor = e.target.closest('a')) && (href = anchor.href)
-			// And not towards any target nor have a download directive
-			&& !anchor.target && !anchor.download
-			// Same origin... but...
-			&& (!anchor.origin || anchor.origin === instance.location.origin)) {
-				if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) {
-					return;
-				}
+			var anchor = e.target.closest('a');
+			if (!anchor || !anchor.href) return;
+			if (!anchor.target && !anchor.download && (!anchor.origin || anchor.origin === instance.location.origin)) {
+				if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
 				// Publish everything, including hash
-				Observer.set(instance.location, Url.copy(anchor), {
-					detail: { type: 'link', src: anchor, },
-				});
+				instance.go(Url.copy(anchor), { src: anchor, srcType: 'link', });
 				// URLs with # will cause a natural navigation
 				// even if pointing to a different page, a natural navigation will still happen
 				// because with the Observer.set() above, window.document.location.href would have become
 				// the destination page, which makes it look like same page navigation
-				if (!href.includes('#')) {
+				if (!anchor.href.includes('#')) {
 					e.preventDefault();
 				}
 			}
@@ -105,25 +177,27 @@ export default class Http {
 		// Capture all form-submit
 		// and fire to this router.
 		window.addEventListener('submit', e => {
-			var actionEl = window.document.createElement('a'),
-				form = e.target.closest('form'),
-				submits = [e.submitter]; //_arrFrom(form.elements).filter(el => el.matches('button,input[type="submit"],input[type="image"]'));
+			var form = e.target.closest('form'), submitter = e.submitter;
 			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];
+				params[prop] = submitter && submitter.hasAttribute(`form${prop.toLowerCase()}`) ? submitter[`form${_toTitle(prop)}`] : form[prop];
 				return params;
 			}, {});
 			// We support method hacking
+			submitParams.method = (submitter && submitter.dataset.method) || form.dataset.method || submitParams.method;
+			submitParams.submitter = submitter;
 			// ---------------
-			submitParams.method = e.submitter.dataset.method || form.dataset.method || submitParams.method;
+			var actionEl = window.document.createElement('a');
+			actionEl.href = submitParams.action;
 			// ---------------
-			if ((actionEl.href = submitParams.action) && !submitParams.target
-			// Same origin... but...
-			&& (!actionEl.origin || actionEl.origin === instance.location.origin)) {
+			// If not targeted and same origin...
+			if (!submitParams.target && (!actionEl.origin || actionEl.origin === instance.location.origin)) {
+				if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
+				// Build data
 				var formData = new FormData(form);
-				if (e.submitter.name) {
-					formData.set(e.submitter.name, e.submitter.value);
+				if ((submitter || {}).name) {
+					formData.set(submitter.name, submitter.value);
 				}
-				if (submitParams.method === 'get') {
+				if (submitParams.method.toUpperCase() === 'GET') {
 					var query = wwwFormUnserialize(actionEl.search);
 					Array.from(formData.entries()).forEach(_entry => {
 						wwwFormSet(query, _entry[0], _entry[1], false);
@@ -131,13 +205,7 @@ export default class Http {
 					actionEl.search = wwwFormSerialize(query);
 					formData = null;
 				}
-				if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) {
-					return;
-				}
-				// Publish everything, including hash
-				Observer.set(instance.location, Url.copy(actionEl), {
-					detail: { type: 'form', src: form, submitParams, data: formData },
-				});
+				instance.go(Url.copy(actionEl), { ...submitParams, body: formData, src: form, srcType: 'form', });
 				// URLs with # will cause a natural navigation
 				// even if pointing to a different page, a natural navigation will still happen
 				// because with the Observer.set() above, window.document.location.href would have become
@@ -148,69 +216,9 @@ export default class Http {
 			}
 		});
 
-		/**
-		 * ----------------
-		 * instance.history
-		 * ----------------
-		 */
-
-		instance.history = window.history;
 		// -----------------------
-		// Syndicate changes to
-		// the browser;s location bar
-		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
-				return;
-			}
-			if (e.value === 'http:') return;
-			if (e.value === window.document.location.href || e.value + '/' === window.document.location.href) {
-				instance.history.replaceState(instance.history.state, '', instance.location.href);
-			} else {
-				try {
-					instance.history.pushState(instance.history.state, '', instance.location.href);
-				} catch(e) {}
-			}
-		}, { diff: true });
-
-		// ----------------------------------
-		const createRequest = (url, referrer, e = {}) => {
-			var detail = e.detail || {};
-			var options = {
-				method: (detail.submitParams || detail.src || {}).method || 'get',
-				body: detail.data,
-				headers: { ...(detail.headers || {}), 'X-Powered-By': '@webqit/webflo', },
-				referrer,
-			};
-			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 handleResponse(await client.call(instance, createRequest(e.value, e.oldValue, e), e));
-			}
-		}, {diff: false /* method might be the difference */});
 		// Startup route
-
-		handleResponse(await client.call(instance, createRequest(window.document.location.href, document.referrer)));
-
+		instance.go(window.document.location.href, { referrer: document.referrer });
 		return instance;
 	}
 

package/src/runtime/client/NavigationEvent.js

@@ -17,4 +17,5 @@ export default _NavigationEvent({
     File,
     Blob,
     ReadableStream,
+    fetch,
 });

package/src/runtime/client/Navigator.js

@@ -0,0 +1,250 @@
+
+/**
+ * @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 Url from './Url.js';
+
+export default class Navigator {
+
+    constructor(client) {
+        this.client = client;
+
+		/**
+		 * ----------------
+		 * Navigator location
+		 * ----------------
+		 */
+
+		// -----------------------
+		// Initialize location
+		Observer.set(this, 'location', new Url(window.document.location));
+		// -----------------------
+		// Syndicate changes to the browser;s location bar
+		Observer.observe(this.location, [[ 'href' ]], ([e]) => {
+			if (e.value === 'http:' || (e.detail || {}).src === window.document.location) {
+				// Already from a "popstate" event as above, so don't push again
+				return;
+			}
+			if (e.value === window.document.location.href || e.value + '/' === window.document.location.href) {
+				window.history.replaceState(window.history.state, '', this.location.href);
+			} else {
+				try { window.history.pushState(window.history.state, '', this.location.href); } catch(e) {}
+			}
+		}, { diff: true });
+
+		// -----------------------
+		// This event is triggered by
+		// either the browser back button,
+		// the window.history.back(),
+		// the window.history.forward(),
+		// or the window.history.go() action.
+		window.addEventListener('popstate', e => {
+			// Needed to allow window.document.location
+			// to update to window.location
+			window.setTimeout(() => {
+				this.go(Url.copy(window.document.location), { src: window.document.location, srcType: 'history', });
+			}, 0);
+		});
+
+		// -----------------------
+		// Capture all link-clicks
+		// and fire to this router.
+		window.addEventListener('click', e => {
+			var anchor = e.target.closest('a');
+			if (!anchor || !anchor.href) return;
+			if (!anchor.target && !anchor.download && (!anchor.origin || anchor.origin === this.location.origin)) {
+				if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
+				// Publish everything, including hash
+				this.go(Url.copy(anchor), { src: anchor, srcType: 'link', });
+				// URLs with # will cause a natural navigation
+				// even if pointing to a different page, a natural navigation will still happen
+				// because with the Observer.set() above, window.document.location.href would have become
+				// the destination page, which makes it look like same page navigation
+				if (!anchor.href.includes('#')) {
+					e.preventDefault();
+				}
+			}
+		});
+
+		// -----------------------
+		// Capture all form-submit
+		// and fire to this router.
+		window.addEventListener('submit', e => {
+			var form = e.target.closest('form'), submitter = e.submitter;
+			var submitParams = [ 'action', 'enctype', 'method', 'noValidate', 'target' ].reduce((params, prop) => {
+				params[prop] = submitter && submitter.hasAttribute(`form${prop.toLowerCase()}`) ? submitter[`form${_toTitle(prop)}`] : form[prop];
+				return params;
+			}, {});
+			// We support method hacking
+			submitParams.method = (submitter && submitter.dataset.method) || form.dataset.method || submitParams.method;
+			submitParams.submitter = submitter;
+			// ---------------
+			var actionEl = window.document.createElement('a');
+			actionEl.href = submitParams.action;
+			// ---------------
+			// If not targeted and same origin...
+			if (!submitParams.target && (!actionEl.origin || actionEl.origin === this.location.origin)) {
+				if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
+				// Build data
+				var formData = new FormData(form);
+				if ((submitter || {}).name) {
+					formData.set(submitter.name, submitter.value);
+				}
+				if (submitParams.method.toUpperCase() === 'GET') {
+					var query = wwwFormUnserialize(actionEl.search);
+					Array.from(formData.entries()).forEach(_entry => {
+						wwwFormSet(query, _entry[0], _entry[1], false);
+					});
+					actionEl.search = wwwFormSerialize(query);
+					formData = null;
+				}
+				this.go(Url.copy(actionEl), { ...submitParams, body: formData, src: form, srcType: 'form', });
+				// URLs with # will cause a natural navigation
+				// even if pointing to a different page, a natural navigation will still happen
+				// because with the Observer.set() above, window.document.location.href would have become
+				// the destination page, which makes it look like same page navigation
+				if (!actionEl.hash) {
+					e.preventDefault();
+				}
+			}
+		});
+
+		/**
+		 * ----------------
+		 * 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' });
+     }
+
+    /**
+     * History object
+     */
+    get history() {
+        return window.history;
+    }
+
+    /**
+     * Performs a request.
+     *
+     * @param object|string 	href
+     * @param object 			params
+     *
+     * @return void
+     */
+    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;
+            }
+        };
+
+        // ------------
+        url = typeof url === 'string' ? { href: url } : url;
+        params = { referrer: this.location.href, ...params };
+        // ------------
+        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 (this._abortController) {
+            this._abortController.abort();
+        }
+        this._abortController = new AbortController();
+        let xRedirectCode = 300;
+
+        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);
+        }
+
+        return this._abortController;
+    }
+
+    /**
+     * Checks if an URL is same origin.
+     *
+     * @param object|string 	url
+     *
+     * @return Bool
+     */
+    isSameOrigin(url) {
+        if (typeof url === 'string') {
+            let href = url;
+            url = window.document.createElement('a');
+            url.href = href
+        }
+        return !url.origin || url.origin === this.location.origin;
+    }
+
+}

package/src/runtime/client/Runtime.js

@@ -10,7 +10,7 @@ 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';
+import Navigator from './Navigator.js';
 
 /**
  * ---------------------------
@@ -21,192 +21,107 @@ import Http from './Http.js';
 export const { Observer } = window.WebQit;
 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};
-	window.addEventListener('online', () => Observer.set(networkWatch, 'online', navigator.onLine));
-	window.addEventListener('offline', () => Observer.set(networkWatch, 'online', navigator.onLine));
-	var networkProgressOngoing;
-
-	/**
-	 * ----------------
-	 * Apply routing
-	 * ----------------
-	 */	
-
-	Http.createClient(async function(request, event = null) {
 
-		const httpInstance = this;
-
-        // -------------------
-        // Resolve canonicity
-        // -------------------
-
-		// The srvice object
-		const $context = {
-			layout,
-			onHydration: !event && (await window.WebQit.OOHTML.meta.get('isomorphic')),
-			response: null,
-		}
+	const session = Storage();
+	const workerClient = new WorkerClient('/worker.js', { startMessages: true });
+	const navigator = new Navigator(async (request, params, remoteFetch) => {
 		
-		// The app router
-		const clientNavigationEvent = new NavigationEvent(request, session);
-		const requestPath = clientNavigationEvent.url.pathname;
-		const router = new Router(requestPath, layout, $context);
-		if (networkProgressOngoing) {
-			networkProgressOngoing.setActive(false);
-			networkProgressOngoing = null;
-		}
+		// The navigation event
+		const clientNavigationEvent = new NavigationEvent(
+			new NavigationEvent.Request(request),
+			session,
+		);
 
-		try {
+		// The app router
+		const router = new Router(clientNavigationEvent.url.pathname, layout, {
+			layout,
+			onHydration: params.srcType === 'init',
+		});
 
-			// --------
-			// ROUTE FOR DATA
-			// --------
-			const httpMethodName = clientNavigationEvent.request.method.toLowerCase();
-			$context.response = await router.route([httpMethodName === 'delete' ? 'del' : httpMethodName, 'default'], clientNavigationEvent, document.state, async function(event) {
-				// -----------------
-				var networkProgress = networkProgressOngoing = new RequestHandle();
-				networkProgress.setActive(true, event.request._method || event.request.method);
-				// -----------------
-				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');
-				}
-				// -----------------
-				// 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(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;
+		// --------
+		// ROUTE FOR DATA
+		// --------
+		const httpMethodName = clientNavigationEvent.request.method.toLowerCase();
+		const response = await router.route([httpMethodName === 'delete' ? 'del' : httpMethodName, 'default'], clientNavigationEvent, document.state, async function(event) {
+			return remoteFetch(event.request).then(response => {
+				return new clientNavigationEvent.Response(response.body, {
+					status: response.status,
+					statusText: response.statusText,
+					headers: response.headers,
+					_proxy: {
+						url: response.url,
+						ok: response.ok,
+						redirected: response.redirected
+					},
 				});
 			});
-			if ($context.response instanceof clientNavigationEvent.Response) {
-                $context.response = await $context.response.jsonBuild();
-            }
+		}).catch(e => {
+			window.document.body.setAttribute('template', '');
+			throw e;
+		});
 
-			// --------
-			// Render
-			// --------
-			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));
-				if (!window.document.state.env) {
-					window.document.setState({
-						env: 'client',
-						onHydration: $context.onHydration,
-						network: networkWatch,
-						url: httpInstance.location,
-						session,
-					}, { update: true });
-				}
-				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));
-					if (window.document.templatesReadyState === 'complete') {
-						res(window);
-					}
-				});
-			});
 
+		// --------
+		// Render
+		// --------
+		const data = response instanceof clientNavigationEvent.Response ? await response.data() : response;
+		console.log('----------------data', data);
+		await router.route('render', clientNavigationEvent, data, async function(event, data) {
 			// --------
-			// Render...
-			// --------
-
-			if (/*document.activeElement === document.body && */event && _isObject(event.detail) && (event.detail.src instanceof Element) && /* do only on url path change */ _before(event.value, '?') !== _before(event.oldValue, '?')) {
-				setTimeout(() => {
-					let vieportTop;
-					if (clientNavigationEvent.url.hash && (urlTarget = document.querySelector(clientNavigationEvent.url.hash))) {
-						urlTarget.scrollIntoView();
-					} else if (vieportTop = Array.from(document.querySelectorAll('[data-viewport-top]')).pop()) {
-						vieportTop.focus();
-					} else {
-						document.documentElement.classList.add('scroll-reset');
-						document.body.scrollIntoView();
-						setTimeout(() => {
-							document.documentElement.classList.remove('scroll-reset');
-						}, 600);
-					}
-				}, 0);
+			// 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: params.srcType === 'init',
+					network: navigator.network,
+					url: navigator.location,
+					session,
+				}, { update: true });
 			}
+			window.document.setState({ page: data }, { update: 'merge' });
+			window.document.body.setAttribute('template', 'page/' + clientNavigationEvent.url.pathname.split('/').filter(a => a).map(a => a + '+-').join('/'));
+			return new Promise(res => {
+				window.document.addEventListener('templatesreadystatechange', () => res(window));
+				if (window.document.templatesReadyState === 'complete') {
+					res(window);
+				}
+			});
+		});
 
-		} catch(e) {
-
-			window.document.body.setAttribute('template', '');
-			throw e;
-
+		// --------
+		// Render...
+		// --------
+
+		if (params.src instanceof Element) {
+			setTimeout(() => {
+				let viewportTop;
+				if (clientNavigationEvent.url.hash && (urlTarget = document.querySelector(clientNavigationEvent.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();
+					setTimeout(() => {
+						document.documentElement.classList.remove('scroll-reset');
+					}, 600);
+				}
+			}, 0);
 		}
 		
-		return $context.responseClone;
+		return response;
 	});
 
+	Observer.observe(session, changes => {
+		//console.log('SESSION_STATE_CHANGE', changes[0].name, changes[0].value);
+	});
+	Observer.observe(workerClient, changes => {
+		//console.log('SERVICE_WORKER_STATE_CHANGE', changes[0].name, changes[0].value);
+	});
+	Observer.observe(navigator, changes => {
+		//console.log('NAVIGATORSTATE_CHANGE', changes[0].name, changes[0].value);
+	});
 };
-
-const networkWatch = { progress: {}, online: navigator.onLine };
-class RequestHandle {
-	setActive(state, method = '') {
-		if (this.active === false) {
-			return;
-		}
-		this.active = state;
-		Observer.set(networkWatch, {
-			method,
-			error: '',
-			progress: {
-				active: state, 
-				determinate: false,
-				valuenow: 0,
-				valuetotal: NaN,
-			},
-		});
-	}
-	updateProgress(phase, valuenow, valuetotal) {
-		if (this.active === false) {
-			return;
-		}
-		Observer.set(networkWatch.progress, {
-			phase,
-			determinate: !isNaN(valuetotal),
-			valuenow,
-			valuetotal,
-		});
-	}
-	throw(message) {
-		if (this.active === false) {
-			return;
-		}
-		this.error = true;
-		Observer.set(networkWatch, 'error', message);
-	}
-};

package/src/runtime/client/Worker.js

@@ -117,7 +117,7 @@ export default function(layout, params) {
 				}
 				return _response;
 			}
-
+			
 			return defaultFetch(evt);
 		};
 		evt.respondWith(handleFetch(evt));
@@ -144,13 +144,12 @@ export default function(layout, params) {
 		return network_fetch(evt);
 	};
 
-	//evt.request.mode navigate evt.request.cache force-cache evt.request.destination document request.headers.get('Accept') text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
 	//evt.request.mode navigate evt.request.cache force-cache evt.request.destination document request.headers.get('Accept') text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
 
 	const getCacheName = request => request.headers.get('Accept') === 'application/json'
 			? params.cache_name + '_json' 
 			: params.cache_name;
-			
+
 	// Caching strategy: cache_first
 	const cache_fetch = (evt, cacheRefresh = false, is_Navigate_ForceCache_Document = false) => {
 
@@ -162,10 +161,10 @@ export default function(layout, params) {
 						let url = new URL(request.url);
 						url.searchParams.set('$force-cache', '1');
 						request = new Request(url, {
-							method: request.method,
+							method: request.method, 
 							headers: request.headers,
 							body: request.body,
-							mode: request.mode === 'navigate' ? null : request.mode,
+							mode: request.mode === 'navigate'/* throws */ ? null : request.mode,
 							credentials: request.credentials,
 							cache: request.cache,
 							redirect: request.redirect,

package/src/runtime/server/NavigationEvent.js

@@ -6,7 +6,7 @@ import { URL } from 'url';
 import { Readable } from "stream";
 import { FormData, File, Blob } from 'formdata-node';
 import { FormDataEncoder } from 'form-data-encoder';
-import { Request, Response, Headers } from 'node-fetch';
+import fetch, { Request, Response, Headers } from 'node-fetch';
 import _NavigationEvent from '../_NavigationEvent.js';
 import _FormData from '../_FormData.js';
 
@@ -34,5 +34,6 @@ export default _NavigationEvent({
     File,
     Blob,
     ReadableStream: Readable,
-    FormDataEncoder
+    FormDataEncoder,
+    fetch
 });

package/src/runtime/server/Runtime.js

@@ -17,7 +17,6 @@ import _isArray from '@webqit/util/js/isArray.js';
 import { _isString, _isPlainObject, _isPlainArray } from '@webqit/util/js/index.js';
 import _delay from '@webqit/util/js/delay.js';
 import { slice as _streamSlice } from 'stream-slice';
-import { v4 as uuidv4, v5 as uuidv5 } from 'uuid';
 import * as config from '../../config/index.js';
 import * as services from '../../services/index.js';
 import NavigationEvent from './NavigationEvent.js';
@@ -34,33 +33,11 @@ import Router from './Router.js';
 export default async function(Ui, flags = {}) {
 
     const layout = await config.layout.read(flags, {});
-    const setup = {
+    const v_setup = {}, setup = {
         layout,
         server: await config.server.read(flags, layout),
         variables: await config.variables.read(flags, layout),
     };
-
-    if (!setup.server.shared && setup.variables.autoload !== false) {
-        Object.keys(setup.variables.entries).forEach(key => {
-            if (!(key in process.env) || setup.variables.autoload === 2) {
-                process.env[key] = setup.variables.entries[key];
-            }
-        });
-    }
-
-    const getSessionInitializer = (sesskey, hostname = null) => {
-        const secret = sesskey || (hostname ? uuidv5(hostname, uuidv4()) : uuidv4());
-        return Sessions({
-            cookieName: '_session',             // cookie name dictates the key name added to the request object
-            secret,                             // should be a large unguessable string
-            duration: 24 * 60 * 60 * 1000,      // how long the session will stay valid in ms
-            activeDuration: 1000 * 60 * 5       // if expiresIn < activeDuration, the session will be extended by activeDuration milliseconds
-        });
-    };
-
-    const instanceSetup = setup;
-    
-    const v_setup = {};
     if (setup.server.shared) {
         await Promise.all(((await config.vhosts.read(flags, setup.layout)).entries || []).map(vh => new Promise(async resolve => {
             const vlayout = await config.layout.read(flags, {ROOT: Path.join(setup.layout.ROOT, vh.path)});
@@ -70,86 +47,57 @@ export default async function(Ui, flags = {}) {
                 variables: await config.variables.read(flags, vlayout),
                 vh,
             };
-            v_setup[vh.host].sessionInit = getSessionInitializer(v_setup[vh.host].variables.entries.sesskey, vh.host),
             resolve();
         })));
-    } else {
-        setup.sessionInit = getSessionInitializer(setup.variables.entries.sesskey);
-    }    
+    }  else if (setup.variables.autoload !== false) {
+        Object.keys(setup.variables.entries).forEach(key => {
+            if (!(key in process.env) || setup.variables.autoload === 2) {
+                process.env[key] = setup.variables.entries[key];
+            }
+        });
+    }
 
     // ---------------------------------------------
-    
-    const getVSetup = (request, response) => {
-        var _setup, v_hostname = (request.headers.host || '').split(':')[0];
-        if (_setup = v_setup[v_hostname]) {
-            return _setup;
+     
+    function handleRequest(protocol, request, response) {
+        let _setup = setup, hostname = (request.headers.host || '').split(':')[0];
+        if (setup.server.shared) {
+            if (!(_setup = v_setup[hostname])
+            && ((hostname.startsWith('www.') && (_setup = v_setup[hostname.substr(4)]) && _setup.server.force_www)
+            && (!hostname.startsWith('www.') && (_setup = v_setup['www.' + hostname]) && _setup.server.force_www))) {
+                response.statusCode = 500;
+                response.end('Unrecognized host');
+                return;
+            }
         }
-        if ((v_hostname.startsWith('www.') && (_setup = v_setup[v_hostname.substr(4)]) && _setup.server.force_www)
-        || (!v_hostname.startsWith('www.') && (_setup = v_setup['www.' + v_hostname]) && _setup.server.force_www)) {
-            return _setup;
+        if (protocol === 'http' && _setup.server.https.force && !flags['http-only'] && /** main server */setup.server.https.port) {
+            response.statusCode = 302;
+            response.setHeader('Location', 'https://' + request.headers.host + request.url);
+            response.end();
+            return;
         }
-        response.statusCode = 500;
-        response.end('Unrecognized host');
-    };
-
-    const goOrForceWww = (setup, request, response, protocol) => {
-        var hostname = request.headers.host || '';
         if (hostname.startsWith('www.') && setup.server.force_www === 'remove') {
             response.statusCode = 302;
             response.setHeader('Location', protocol + '://' + hostname.substr(4) + request.url);
             response.end();
-        } else if (!hostname.startsWith('www.') && setup.server.force_www === 'add') {
+            return;
+        }
+        if (!hostname.startsWith('www.') && setup.server.force_www === 'add') {
             response.statusCode = 302;
             response.setHeader('Location', protocol + '://www.' + hostname + request.url);
             response.end();
-        } else {
-            setup.sessionInit(request, response, () => {});
-            run(instanceSetup, setup, request, response, Ui, flags, protocol);
+            return;
         }
+        run(_setup, request, response, Ui, flags, protocol);
     };
 
     // ---------------------------------------------
-    
-    if (!flags['https-only']) {
-
-        Http.createServer((request, response) => {
-            if (setup.server.shared) {
-                var _setup;
-                if (_setup = getVSetup(request, response)) {
-                    goOrForceHttps(_setup, request, response);
-                }
-            } else {
-                goOrForceHttps(setup, request, response);
-            }
-        }).listen(process.env.PORT || setup.server.port);
-
-        const goOrForceHttps = ($setup, $request, $response) => {
-            if ($setup.server.https.force && !flags['http-only'] && /** main server */setup.server.https.port) {
-                $response.statusCode = 302;
-                $response.setHeader('Location', 'https://' + $request.headers.host + $request.url);
-                $response.end();
-            } else {
-                goOrForceWww($setup, $request, $response, 'http');
-            }
-        };
 
+    if (!flags['https-only']) {
+        Http.createServer((request, response) => handleRequest('http', request, response)).listen(process.env.PORT || setup.server.port);
     }
-
-    // ---------------------------------------------
-
     if (!flags['http-only'] && setup.server.https.port) {
-
-        const httpsServer = Https.createServer((request, response) => {
-            if (setup.server.shared) {
-                var _setup;
-                if (_setup = getVSetup(request, response)) {
-                    goOrForceWww(_setup, request, response, 'https');
-                }
-            } else {
-                goOrForceWww(setup, request, response, 'https');
-            }
-        });
-
+        const httpsServer = Https.createServer((request, response) => handleRequest('https', request, response));
         if (setup.server.shared) {
             _each(v_setup, (host, _setup) => {
                 if (Fs.existsSync(_setup.server.https.keyfile)) {
@@ -185,7 +133,6 @@ export default async function(Ui, flags = {}) {
                 });
             }
         }
-
         httpsServer.listen(process.env.PORT2 || setup.server.https.port);
     }
 };
@@ -193,7 +140,6 @@ export default async function(Ui, flags = {}) {
 /**
  * The Server.
  * 
- * @param Object    instanceSetup
  * @param Object    hostSetup
  * @param Request   request
  * @param Response  response
@@ -203,13 +149,12 @@ export default async function(Ui, flags = {}) {
  * 
  * @return void
  */
-export async function run(instanceSetup, hostSetup, request, response, Ui, flags = {}, protocol = 'http') {
+export async function run(hostSetup, request, response, Ui, flags = {}, protocol = 'http') {
 
     // --------
     // Request parsing
     // --------
 
-    const fullUrl = protocol + '://' + request.headers.host + request.url;
     const requestInit = { method: request.method, headers: request.headers };
     if (request.method !== 'GET' && request.method !== 'HEAD') {
         requestInit.body = await new Promise((resolve, reject) => {
@@ -257,10 +202,37 @@ export async function run(instanceSetup, hostSetup, request, response, Ui, flags
             });
         });
     }
-    // The Formidabble thing in NavigationEvent class would still need
-    // a reference to the Nodejs request
-    const _request = new NavigationEvent.Request(fullUrl, requestInit);
-    const serverNavigationEvent = new NavigationEvent(_request, request._session);
+
+    // --------
+    // NavigationEvent instance
+    // --------
+
+    const fullUrl = protocol + '://' + request.headers.host + request.url;
+    const _sessionFactory = function(id, params = {}, callback = null) {
+        let factory, secret = hostSetup.variables.entries.SESSION_KEY;
+        Sessions({
+            duration: 0,                        // how long the session will stay valid in ms
+            activeDuration: 0,                  // if expiresIn < activeDuration, the session will be extended by activeDuration milliseconds
+            ...params,
+            cookieName: id,                     // cookie name dictates the key name added to the request object
+            secret,                             // should be a large unguessable string
+        })(request, response, e => {
+            factory = Object.getOwnPropertyDescriptor(request, id);
+            if (callback) {
+                callback(e, factory);
+            } else if (e) {
+                // TODO
+            }
+        });
+        // Where theres no error, factory is available Sync
+        return !callback ? factory : undefined;
+    };
+    const serverNavigationEvent = new NavigationEvent(
+        new NavigationEvent.Request(fullUrl, requestInit),
+        _sessionFactory('_session', { duration: 60 * 60 }).get(),
+        _sessionFactory
+    );
+
     const $context = {
         rdr: null,
         layout: hostSetup.layout,
@@ -434,12 +406,7 @@ export async function run(instanceSetup, hostSetup, request, response, Ui, flags
                 // -------------------
                 // Chrome needs this for audio elements to play
                 response.setHeader('Accept-Ranges', 'bytes');
-                /*
-                if ($context.response.headers.contentLength && !$context.response.headers.contentRange) {
-                    $context.response.headers.contentRange = `bytes 0-${$context.response.headers.contentLength}/${$context.response.headers.contentLength}`;
-                }
 
-                */
                 // -------------------
                 // Automatic response headers
                 // -------------------
@@ -485,7 +452,7 @@ export async function run(instanceSetup, hostSetup, request, response, Ui, flags
                     if (name === 'set-cookie') {
                         setCookies(value);
                     } else {
-                        if (name.toLowerCase() === 'location' && !$context.response.status) {
+                        if (name.toLowerCase() === 'location' && $context.response.status === 200) {
                             response.statusCode = 302 /* Temporary */;
                         }
                         response.setHeader(name, value);
@@ -496,6 +463,15 @@ export async function run(instanceSetup, hostSetup, request, response, Ui, flags
                 // Send
                 // -------------------
                 if ($context.response.headers.redirect) {
+                    let xRedirectPolicy = serverNavigationEvent.request.headers.get('X-Redirect-Policy');
+                    let xRedirectCode = serverNavigationEvent.request.headers.get('X-Redirect-Code') || 300;
+                    let isSameOriginRedirect = (new serverNavigationEvent.globals.URL($context.response.headers.location)).origin === serverNavigationEvent.url.origin;
+                    if (xRedirectPolicy === 'manual' || (!isSameOriginRedirect && xRedirectPolicy === 'manual-when-cross-origin') || (isSameOriginRedirect && xRedirectPolicy === 'manual-when-same-origin')) {
+                        response.statusCode = xRedirectCode;
+                        response.setHeader('X-Redirect-Code', $context.response.status);
+                    } else {
+                        response.statusCode = $context.response.status;
+                    }
                     response.end();
                 } else if ($context.response.original !== undefined && $context.response.original !== null) {
                     response.statusCode = $context.response.status;
@@ -576,15 +552,23 @@ export async function run(instanceSetup, hostSetup, request, response, Ui, flags
     // --------
 
     if (flags.logs !== false) {
+        let errorCode = [ 404, 500 ].includes(response.statusCode) ? response.statusCode : 0;
+        let xRedirectCode = response.getHeader('X-Redirect-Code');
+        let redirectCode = xRedirectCode || ((response.statusCode + '').startsWith('3') ? response.statusCode : 0);
+        let statusCode = xRedirectCode || response.statusCode;
         Ui.log(''
             + '[' + (hostSetup.vh ? Ui.style.keyword(hostSetup.vh.host) + '][' : '') + Ui.style.comment((new Date).toUTCString()) + '] '
             + Ui.style.keyword(protocol.toUpperCase() + ' ' + serverNavigationEvent.request.method) + ' '
             + Ui.style.url(serverNavigationEvent.request.url) + ($context.response && ($context.response.meta || {}).autoIndex ? Ui.style.comment((!serverNavigationEvent.request.url.endsWith('/') ? '/' : '') + $context.response.meta.autoIndex) : '') + ' '
             + (' (' + Ui.style.comment($context.response && ($context.response.headers || {}).contentType ? $context.response.headers.contentType : 'unknown') + ') ')
             + (
-                [ 404, 500 ].includes(response.statusCode) 
-                ? Ui.style.err(response.statusCode + ($context.fatal ? ` [ERROR]: ${$context.fatal.error || $context.fatal.toString()}` : ``)) 
-                : Ui.style.val(response.statusCode) + ((response.statusCode + '').startsWith('3') ? ' - ' + Ui.style.val(response.getHeader('Location')) : ' (' + Ui.style.keyword(response.getHeader('Content-Range') || response.statusMessage) + ')')
+                errorCode
+                    ? Ui.style.err(errorCode + ($context.fatal ? ` [ERROR]: ${$context.fatal.error || $context.fatal.toString()}` : ``)) 
+                    : Ui.style.val(statusCode) + (
+                    redirectCode 
+                        ? ' - ' + Ui.style.val(response.getHeader('Location')) 
+                        : ' (' + Ui.style.keyword(response.getHeader('Content-Range') || response.statusMessage) + ')'
+                    )
             )
         );
     }