@webqit/webflo 0.10.5 → 0.11.2

package/package.json

@@ -12,7 +12,7 @@
     "vanila-javascript"
   ],
   "homepage": "https://webqit.io/tooling/webflo",
-  "version": "0.10.5",
+  "version": "0.11.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
   "dependencies": {
     "@octokit/webhooks": "^7.15.1",
     "@webqit/backpack": "^0.1.0",
-    "@webqit/oohtml-ssr": "^1.0.6",
+    "@webqit/oohtml-ssr": "^1.1.0",
     "@webqit/util": "^0.8.9",
     "client-sessions": "^0.8.0",
     "esbuild": "^0.14.38",

package/src/config-pi/runtime/Client.js

@@ -24,7 +24,7 @@ export default class Client extends Dotfile {
         return _merge(true, {
             bundle_filename: 'bundle.js',
             public_base_url: '/',
-            address_bar_synchrony: 'standard',
+            spa_routing: true,
             oohtml_support: 'full',
             service_worker_support: true,
             worker_scope: '/',
@@ -36,10 +36,6 @@ export default class Client extends Dotfile {
     questions(config, choices = {}) {
         // Choices
         const CHOICES = _merge({
-            address_bar_synchrony: [
-                {value: 'standard', title: 'standard - on response'},
-                {value: 'instant', title: 'instant - on request'},
-            ],
             oohtml_support: [
                 {value: 'full', title: 'Full'},
                 {value: 'namespacing', title: 'namespacing'},
@@ -64,11 +60,12 @@ export default class Client extends Dotfile {
                 validation: ['important'],
             },
             {
-                name: 'address_bar_synchrony',
-                type: 'select',
-                message: '[address_bar_synchrony]: Specify how the address bar synchronizes with navigation',
-                choices: CHOICES.address_bar_synchrony,
-                initial: this.indexOfInitial(CHOICES.address_bar_synchrony, config.address_bar_synchrony),
+                name: 'spa_routing',
+                type: 'toggle',
+                message: '[spa_routing]: Enable Single Page Routing Mode',
+                active: 'YES',
+                inactive: 'NO',
+                initial: config.spa_routing,
                 validation: ['important'],
             },
             {

package/src/config-pi/runtime/client/Worker.js

@@ -23,10 +23,11 @@ export default class Worker extends Dotfile {
     withDefaults(config) {
         return _merge(true, {
             cache_name: 'cache_v0',
-            cache_only_urls: [],
+            default_fetching_strategy: 'network-first',
+            network_first_urls: [],
             cache_first_urls: [],
             network_only_urls: [],
-            network_first_urls: [],
+            cache_only_urls: [ '/page-3/{*.json}' ],
             skip_waiting: false,
             // -----------------
             support_push: false,
@@ -42,6 +43,15 @@ export default class Worker extends Dotfile {
         if (config.cache_name && config.cache_name.indexOf('_v') > -1 && _isNumeric(_after(config.cache_name, '_v'))) {
             config.cache_name = _before(config.cache_name, '_v') + '_v' + (parseInt(_after(config.cache_name, '_v')) + 1);
         }
+        // Choices
+        const CHOICES = _merge({
+            default_fetching_strategy: [
+                {value: 'network-first', title: 'Network-first (Webflo default)'},
+                {value: 'cache-first', title: 'Cache-first'},
+                {value: 'network-only', title: 'Network-only'},
+                {value: 'cache-only', title: 'Cache-only'},
+            ],
+        }, choices);
         // Questions
         return [
             {
@@ -51,28 +61,36 @@ export default class Worker extends Dotfile {
                 initial: config.cache_name,
             },
             {
-                name: 'cache_only_urls',
-                type: 'list',
-                message: 'Specify URLs for a "cache-only" fetching strategy (comma-separated, globe supported)',
-                initial: (config.cache_only_urls || []).join(', '),
+                name: 'default_fetching_strategy',
+                type: 'select',
+                message: '[default_fetching_strategy]: Choose the default fetching strategy',
+                choices: CHOICES.default_fetching_strategy,
+                initial: this.indexOfInitial(CHOICES.default_fetching_strategy, config.default_fetching_strategy),
+                validation: ['important'],
+            },
+            {
+                name: 'network_first_urls',
+                type: (prev, answers) => answers.default_fetching_strategy === 'network-first' ? null : 'list',
+                message: 'Specify URLs for a "network-first-then-cache" fetching strategy (comma-separated, globe supported)',
+                initial: (config.network_first_urls || []).join(', '),
             },
             {
                 name: 'cache_first_urls',
-                type: 'list',
+                type: (prev, answers) => answers.default_fetching_strategy === 'cache-first' ? null : 'list',
                 message: 'Specify URLs for a "cache-first-then-network" fetching strategy (comma-separated, globe supported)',
                 initial: (config.cache_first_urls || []).join(', '),
             },
             {
                 name: 'network_only_urls',
-                type: 'list',
+                type: (prev, answers) => answers.default_fetching_strategy === 'network-only' ? null : 'list',
                 message: 'Specify URLs for a "network-only" fetching strategy (comma-separated, globe supported)',
                 initial: (config.network_only_urls || []).join(', '),
             },
             {
-                name: 'network_first_urls',
-                type: 'list',
-                message: 'Specify URLs for a "network-first-then-cache" fetching strategy (comma-separated, globe supported)',
-                initial: (config.network_first_urls || []).join(', '),
+                name: 'cache_only_urls',
+                type: (prev, answers) => answers.default_fetching_strategy === 'cache-only' ? null : 'list',
+                message: 'Specify URLs for a "cache-only" fetching strategy (comma-separated, globe supported)',
+                initial: (config.cache_only_urls || []).join(', '),
             },
             {
                 name: 'skip_waiting',

package/src/runtime-pi/Router.js

@@ -46,7 +46,7 @@ export default class Router {
         // The loop
         // ----------------
         const next = async function(thisTick) {
-            const thisContext = {};
+            const thisContext = { };
             if (!thisTick.trail || thisTick.trail.length < thisTick.destination.length) {
                 thisTick = await $this.readTick(thisTick);
                 // -------------

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);
@@ -162,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' });
         // ---------------
@@ -180,16 +202,37 @@ export default class Runtime {
 		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.scope) && this.cx.params.routing.subscopes.reduce((prev, subscope) => {
-			return prev && !match(subscope);
+		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.
      *
@@ -206,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) {
@@ -215,62 +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.network, 'redirecting', null);
-		if (this.cx.params.address_bar_synchrony === 'instant') {
-			Observer.set(this.location, url, { detail: { ...init, ...detail }, });
-		}
-        // ------------
+		// 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);
-		// ------------
-		if (this.cx.params.address_bar_synchrony !== 'instant') {
-			Observer.set(this.location, url, { detail: { ...init, ...detail }, });
+		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);
 		});
 	}
@@ -278,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 && (new whatwag.URL(response.url)).origin === this.location.origin) {
-			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;
 			}

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.service_worker_support) {
-			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);
-			});
-		}
 	}
 
 	 /**
@@ -35,44 +27,26 @@ export default class RuntimeClient {
 		// The app router
         const router = new Router(this.cx, httpEvent.url.pathname);
         const handle = async () => {
-			if (this.cx.params.address_bar_synchrony === 'instant') {
-				await this.render(httpEvent, {}, router);
-			}
 			// --------
 			// 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) {
-		let data = response.json ? await response.json() : response;
+    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
@@ -88,23 +62,21 @@ export default class RuntimeClient {
 						url: this.cx.runtime.location,
 					}, { update: true });
 				}
-				window.document.setState({ page: data }, { update: 'merge' });
+				window.document.setState({ data }, { update: 'merge' });
 			}
 			if (window.document.templates) {
-				window.document.body.setAttribute('template', 'page/' + httpEvent.url.pathname.split('/').filter(a => a).map(a => a + '+-').join('/'));
+				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() {
+	async unrender(httpEvent) {
 		if (window.document.state) {
-			window.document.setState({ page: {} }, { update: 'merge' });
-		}
-		if (window.document.templates) {
-			window.document.body.setAttribute('template', '');
+			window.document.setState({ data: {} }, { update: 'merge' });
 		}
 	}
 

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;
+}