@webqit/webflo 0.10.3 → 0.11.0

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

@@ -16,6 +16,7 @@ import xRequest from "../xRequest.js";
 import xResponse from "../xResponse.js";
 import xfetch from '../xfetch.js';
 import xHttpEvent from '../xHttpEvent.js';
+import Workport from './Workport.js';
 
 const URL = xURL(whatwag.URL);
 const FormData = xFormData(whatwag.FormData);
@@ -98,8 +99,7 @@ export default class Runtime {
 		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;
+			if (!anchor.target && !anchor.download && this.isSpaRoute(anchor, e)) {
 				// Publish everything, including hash
 				this.go(Url.copy(anchor), {}, { src: anchor, srcType: 'link', });
 				// URLs with # will cause a natural navigation
@@ -129,8 +129,7 @@ export default class Runtime {
 			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;
+			if (!submitParams.target && this.isSpaRoute(actionEl, e)) {
 				// Build data
 				var formData = new FormData(form);
 				if ((submitter || {}).name) {
@@ -164,6 +163,27 @@ export default class Runtime {
 		window.addEventListener('online', () => Observer.set(this.network, 'online', navigator.onLine));
 		window.addEventListener('offline', () => Observer.set(this.network, 'online', navigator.onLine));
 
+		// -----------------------
+		// Service Worker && COMM
+		if (this.cx.service_worker_support) {
+			let workport = new Workport(this.cx.worker_filename, { scope: this.cx.worker_scope, startMessages: true });
+			Observer.set(this, 'workport', workport);
+			workport.messaging.listen(async evt => {
+				let responsePort = evt.ports[0];
+				let client = this.clients.get('*');
+				let response = client.alert && await client.alert(evt);
+				if (responsePort) {
+					if (response instanceof Promise) {
+						response.then(data => {
+							responsePort.postMessage(data);
+						});
+					} else {
+						responsePort.postMessage(response);
+					}
+				}
+			});
+		}
+
         // ---------------
         this.go(this.location, {}, { srcType: 'init' });
         // ---------------
@@ -176,6 +196,43 @@ export default class Runtime {
         return window.history;
     }
 
+	// Check is-route
+	isSpaRoute(url, e) {
+		url = typeof url === 'string' ? new whatwag.URL(url) : url;
+		if (url.origin && url.origin !== this.location.origin) return false;
+		if (e && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) return false;
+		if (!this.cx.params.routing) return true;
+		if (this.cx.params.routing.targets === false/** explicit false means disabled */) return false;
+		let b = url.pathname.split('/').filter(s => s);
+		const match = a => {
+			a = a.split('/').filter(s => s);
+			return a.reduce((prev, s, i) => prev && (s === b[i] || [s, b[i]].includes('-')), true);
+		};
+		return match(this.cx.params.routing.root) && this.cx.params.routing.subroots.reduce((prev, subroot) => {
+			return prev && !match(subroot);
+		}, true);
+	}
+
+	// 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-spa',
+				'X-Redirect-Code': this._xRedirectCode,
+				'X-Powered-By': '@webqit/webflo',
+				...(init.headers || {}),
+			},
+		});
+	}
+
+	// Generates session object
+    getSession(e, id = null, persistent = false) {
+		return Storage(id, persistent);
+	}
+
     /**
      * Performs a request.
      *
@@ -192,7 +249,7 @@ export default class Runtime {
 		// Put his forward before instantiating a request and aborting previous
 		// Same-page hash-links clicks on chrome recurse here from histroy popstate
         if (detail.srcType !== 'init' && (_before(url.href, '#') === _before(init.referrer, '#') && (init.method || 'GET').toUpperCase() === 'GET')) {
-			return;
+			return new Response(null, { status: 304 }); // Not Modified
         }
 		// ------------
         if (this._abortController) {
@@ -201,55 +258,77 @@ export default class Runtime {
         this._abortController = new AbortController();
         this._xRedirectCode = 200;
         // ------------
+		// States
+		// ------------
+        Observer.set(this.network, 'error', null);
+        Observer.set(this.network, 'requesting', { ...init, ...detail });
         if (['link', 'form'].includes(detail.srcType)) {
-            Observer.set(detail.src, 'active', true);
-            Observer.set(detail.submitter || {}, 'active', true);
+            detail.src.state && (detail.src.state.active = true);
+            detail.submitter && detail.submitter.state && (detail.submitter.state.active = true);
         }
         // ------------
-        Observer.set(this.location, url, { detail: { ...init, ...detail }, });
-        Observer.set(this.network, 'redirecting', null);
-        // ------------
+		// Run
+		// ------------
 		// 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);
+		let client = this.clients.get('*'), response, finalResponse;
+		try {
+			// ------------
+			// Response
+			// ------------
+			response = await client.handle(httpEvent, ( ...args ) => this.remoteFetch( ...args ));
+			finalResponse = this.handleResponse(httpEvent, response);
+			// ------------
+			// Address bar
+			// ------------
+			if (response.redirected) {
+				Observer.set(this.location, { href: response.url }, { detail: { redirected: true }, });
+			} else if (![302, 301].includes(finalResponse.status)) {
+				Observer.set(this.location, url);
+			}
+			// ------------
+			// States
+			// ------------
+			Observer.set(this.network, 'requesting', null);
+			if (['link', 'form'].includes(detail.srcType)) {
+				detail.src.state && (detail.src.state.active = false);
+            	detail.submitter && detail.submitter.state && (detail.submitter.state.active = false);
+			}
+			// ------------
+			// Rendering
+			// ------------
+			if (finalResponse.ok && finalResponse.headers.contentType === 'application/json') {
+				client.render && await client.render(httpEvent, finalResponse);
+			} else if (!finalResponse.ok) {
+				if ([404, 500].includes(finalResponse.status)) {
+					Observer.set(this.network, 'error', new Error(finalResponse.statusText, { cause: finalResponse.status }));
+				}
+				client.unrender && await client.unrender(httpEvent);
+			}
+		} catch(e) {
+			console.error(e);
+			Observer.set(this.network, 'error', { ...e, retry: () => this.go(url, init = {}, detail) });
+			finalResponse = new Response(null, { status: 500, statusText: e.message });
+		}
+		// ------------
         // Return value
 		return finalResponse;
     }
 
-	// 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 || {}),
-			},
-		});
-	}
-
-	// Generates session object
-    getSession(e, id = null, persistent = false) {
-		return Storage(id, persistent);
-	}
-
 	// Initiates remote fetch and sets the status
 	remoteFetch(request, ...args) {
-		Observer.set(this.network, 'remote', true);
+		let href = typeof request === 'string' ? request : (request.url || request.href);
+		Observer.set(this.network, 'remote', href);
 		let _response = fetch(request, ...args);
 		// This catch() is NOT intended to handle failure of the fetch
-		_response.catch(e => Observer.set(this.network, 'error', e.message));
+		_response.catch(e => Observer.set(this.network, 'error', e));
 		// Return xResponse
 		return _response.then(async response => {
 			// Stop loading status
-			Observer.set(this.network, 'remote', false);
+			Observer.set(this.network, 'remote', null);
 			return new Response(response);
 		});
 	}
@@ -257,19 +336,10 @@ export default class Runtime {
 	// 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 {
+		if (!response.redirected) {
 			let location = response.headers.get('Location');
 			if (location && response.status === this._xRedirectCode) {
+				response.attrs.status = parseInt(response.headers.get('X-Redirect-Code'));
 				Observer.set(this.network, 'redirecting', location);
 				window.location = location;
 			}
@@ -277,20 +347,4 @@ export default class Runtime {
 		return response;
 	}
 
-    /**
-     * 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-pi/client/RuntimeClient.js

@@ -2,8 +2,6 @@
 /**
  * @imports
  */
-import { Observer } from './Runtime.js';
-import WorkerComm from './WorkerComm.js';
 import Router from './Router.js';
 
 export default class RuntimeClient {
@@ -15,12 +13,6 @@ export default class RuntimeClient {
      */
 	constructor(cx) {
 		this.cx = cx;
-		if (this.cx.support_service_worker) {
-			const workerComm = new WorkerComm(this.cx.worker_filename, { scope: this.cx.worker_scope, startMessages: true });
-			Observer.observe(workerComm, changes => {
-				//console.log('SERVICE_WORKER_STATE_CHANGE', changes[0].name, changes[0].value);
-			});
-		}
 	}
 
 	 /**
@@ -39,60 +31,53 @@ export default class RuntimeClient {
 			// ROUTE FOR DATA
 			// --------
 			let httpMethodName = httpEvent.request.method.toLowerCase();
-			let response = await router.route([httpMethodName === 'delete' ? 'del' : httpMethodName, 'default'], httpEvent, {}, async event => {
+			return 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)();
+		return await (this.cx.middlewares || []).concat(handle).reverse().reduce((next, fn) => {
+			return () => fn.call(this.cx, httpEvent, router, next);
+		}, null)();
 	}
 
 	// Renderer
-    async render(httpEvent, response, router) {
+    async render(httpEvent, response) {
 		let data = await response.json();
+		const router = new Router(this.cx, httpEvent.url.pathname);
 		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 });
+			if (window.WebQit.DOM) {
+				await new Promise(res => window.WebQit.DOM.ready(res));
 			}
-			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)));
+			if (window.document.state) {
+				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({ data }, { update: 'merge' });
+			}
+			if (window.document.templates) {
+				window.document.body.setAttribute('template', 'routes/' + 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)));
+			}
+			await this.scrollIntoView(httpEvent);
 			return window;
 		});
 	}
 
 	// Unrender
-	async unrender() {
-		window.document.setState({ page: {} }, { update: 'merge' });
-		window.document.body.setAttribute('template', '');
+	async unrender(httpEvent) {
+		if (window.document.state) {
+			window.document.setState({ data: {} }, { update: 'merge' });
+		}
 	}
 
 	// Normalize scroll position

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

@@ -0,0 +1,163 @@
+
+
+/**
+ * @imports
+ */
+import { _isFunction, _isObject } from '@webqit/util/js/index.js';
+import { Observer } from './Runtime.js';
+
+export default class Workport {
+
+    constructor(file, params = {}) {
+        this.ready = navigator.serviceWorker.ready;
+
+        // --------
+        // Registration and lifecycle
+        // --------
+        this.registration = new Promise((resolve, reject) => {
+            const register = () => {
+                navigator.serviceWorker.register(file, { scope: params.scope || '/' }).then(async registration => {
+
+                    // Helper that updates instance's state
+                    const state = target => {
+                        // instance2.state can be any of: "installing", "installed", "activating", "activated", "redundant"
+                        const equivState = target.state === 'installed' ? 'waiting' : 
+                            (target.state === 'activating' || target.state === 'activated' ? 'active' : target.state)
+                        Observer.set(this, equivState, target);
+                    }
+
+                    // We're always installing at first for a new service worker.
+                    // An existing service would immediately be active
+                    const worker = registration.active || registration.waiting || registration.installing;
+                    state(worker);
+                    worker.addEventListener('statechange', e => state(e.target));
+                    
+                    // "updatefound" event - a new worker that will control
+                    // this page is installing somewhere
+                    registration.addEventListener('updatefound', () => {
+                        // If updatefound is fired, it means that there's
+                        // a new service worker being installed.
+                        state(registration.installing);
+                        registration.installing.addEventListener('statechange', e => state(e.target));
+                    });
+                    
+                    resolve(registration);
+                }).catch(e => reject(e));
+            };
+            if (params.onWondowLoad) {
+                window.addEventListener('load', register);
+            } else {
+                register();
+            }
+            if (params.startMessages) {
+                navigator.serviceWorker.startMessages();
+            }
+        });
+
+        // --------
+        // Post messaging
+        // --------
+        const postSendCallback = (message, callback, onAvailability = 1) => {
+            if (this.active) {
+                if (_isFunction(message)) message = message();
+                callback(this.active, message);
+            } else if (onAvailability) {
+                // Availability Handling
+                const availabilityHandler = entry => {
+                    if (_isFunction(message)) message = message();
+                    callback(entry.value, message);
+                    if (onAvailability !== 2) {
+                        Observer.unobserve(this, 'active', availabilityHandler);
+                    }
+                };
+                Observer.observe(this, 'active', availabilityHandler);
+            }
+        };
+        this.messaging = {
+            post: (message, onAvailability = 1) => {
+                postSendCallback(message, (active, message) => {
+                    active.postMessage(message);
+                }, onAvailability);
+                return this.post;
+            },
+            listen: callback => {
+                navigator.serviceWorker.addEventListener('message', callback);
+                return this.post;
+            },
+            request: (message, onAvailability = 1) => {
+                return new Promise(res => {
+                    postSendCallback(message, (active, message) => {
+                        let messageChannel = new MessageChannel();
+                        active.postMessage(message, [ messageChannel.port2 ]);
+                        messageChannel.port1.onmessage = e => res(e.data);
+                    }, onAvailability);
+                });
+            },
+            channel(channelId) {
+                if (!this.channels.has(channelId)) { this.channels.set(channelId, new BroadcastChannel(channel)); }
+                let channel = this.channels.get(channelId);
+                return {
+                    broadcast: message => channel.postMessage(message),
+                    listen: callback => channel.addEventListener('message', callback),
+                };
+            },
+            channels: new Map,
+        };
+
+        // --------
+        // Notifications
+        // --------
+        this.notifications = {
+            fire: (title, params = {}) => {
+                return new Promise((res, rej) => {
+                    if (typeof Notification === 'undefined' || Notification.permission !== 'granted') {
+                        return rej(typeof Notification !== 'undefined' && Notification && Notification.permission);
+                    }
+                    notification.addEventListener('error', rej);
+                    let notification = new Notification(title, params);
+                    notification.addEventListener('click', res);
+                    notification.addEventListener('close', res);
+                });
+            },
+        };
+
+        // --------
+        // Push notifications
+        // --------
+        this.push = {
+            getSubscription: async () => {
+                return (await this.registration).pushManager.getSubscription();
+            },
+            subscribe: async (publicKey, params = {}) => {
+                var subscription = await this.push.getSubscription();
+                return subscription ? subscription : (await this.registration).pushManager.subscribe(
+                    _isObject(publicKey) ? publicKey : {
+                        applicationServerKey: urlBase64ToUint8Array(publicKey),
+                        ...params,
+                    }
+                );
+            },
+            unsubscribe: async () => {
+                var subscription = await this.push.getSubscription();
+                return !subscription ? null : subscription.unsubscribe();
+            },
+        };
+    }
+
+}
+
+// Public base64 to Uint
+function urlBase64ToUint8Array(base64String) {
+    var padding = '='.repeat((4 - base64String.length % 4) % 4);
+    var base64 = (base64String + padding)
+        .replace(/\-/g, '+')
+        .replace(/_/g, '/');
+
+    var rawData = window.atob(base64);
+    var outputArray = new Uint8Array(rawData.length);
+
+    for (var i = 0; i < rawData.length; ++i) {
+        outputArray[i] = rawData.charCodeAt(i);
+    }
+    return outputArray;
+}