@webqit/webflo 0.10.4 → 0.11.1

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

@@ -5,6 +5,7 @@
 import { _any } from '@webqit/util/arr/index.js';
 import { HttpEvent, Request, Response, Observer } from '../Runtime.js';
 import { urlPattern } from '../../util.js';
+import Workport from './Workport.js';
 
 /**
  * ---------------------------
@@ -43,7 +44,7 @@ export default class Worker {
 				// Add files to cache
 				evt.waitUntil( self.caches.open(this.cx.params.cache_name).then(cache => {
 					if (this.cx.logger) { this.cx.logger.log('[ServiceWorker] Pre-caching resources.'); }
-					const cache_only_urls = (this.cx.params.cache_only_urls || []).map(c => c.trim()).filter(c => c && !c.endsWith('/') && !urlPattern(c, self.origin).isPattern());
+					const cache_only_urls = (this.cx.params.cache_only_urls || []).map(c => c.trim()).filter(c => c && !urlPattern(c, self.origin).isPattern());
 					return cache.addAll(cache_only_urls);
 				}) );
 			}
@@ -71,11 +72,13 @@ export default class Worker {
 		});
 
 		// -------------
-		// ONFETCH		
+		// ONFETCH
 		self.addEventListener('fetch', event => {
 			// URL schemes that might arrive here but not supported; e.g.: chrome-extension://
 			if (!event.request.url.startsWith('http')) return;
 			event.respondWith((async (req, evt) => {
+				let requestingClient = await self.clients.get(event.clientId);
+				this.workport.setCurrentClient(requestingClient);
 				const requestInit = [
 					'method', 'headers', 'mode', 'credentials', 'cache', 'redirect', 'referrer', 'integrity',
 				].reduce((init, prop) => ({ [prop]: req[prop], ...init }), {});
@@ -93,6 +96,33 @@ export default class Worker {
 			})(event.request, event));
 		});
 
+		// -------------
+		// Workport
+		let workport = new Workport();
+		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);
+				}
+			}
+		});
+		workport.notifications.listen(async evt => {
+			let client = this.clients.get('*');
+			client.alert && await client.alert(evt);
+		});
+		workport.push.listen(async evt => {
+			let client = this.clients.get('*');
+			client.alert && await client.alert(evt);
+		});
+
 		// ---------------
         Observer.set(this, 'location', {});
         Observer.set(this, 'network', {});
@@ -163,22 +193,26 @@ export default class Worker {
 		}
 		const matchUrl = (patterns, url) => _any((patterns || []).map(p => p.trim()).filter(p => p), p => urlPattern(p, self.origin).test(url));
 		const execFetch = () => {
-			if (matchUrl(this.cx.params.cache_only_urls, request.url)) {
-				Observer.set(this.network, 'strategy', 'cache-only');
-				return this.cacheFetch(request, { networkFallback: false, cacheRefresh: false });
+			// network_first_urls
+			if (!this.cx.params.default_fetching_strategy || this.cx.params.default_fetching_strategy === 'network-first' || matchUrl(this.cx.params.network_first_urls, request.url)) {
+				Observer.set(this.network, 'strategy', 'network-first');
+				return this.networkFetch(request, { cacheFallback: true, cacheRefresh: true });
+			}
+			// cache_first_urls
+			if (this.cx.params.default_fetching_strategy === 'cache-first' || matchUrl(this.cx.params.cache_first_urls, request.url)) {
+				Observer.set(this.network, 'strategy', 'cache-first');
+				return this.cacheFetch(request, { networkFallback: true, cacheRefresh: true });
 			}
 			// network_only_urls
-			if (matchUrl(this.cx.params.network_only_urls, request.url)) {
+			if (this.cx.params.default_fetching_strategy === 'network-only' || matchUrl(this.cx.params.network_only_urls, request.url)) {
 				Observer.set(this.network, 'strategy', 'network-only');
 				return this.networkFetch(request, { cacheFallback: false, cacheRefresh: false });
 			}
-			// cache_first_urls
-			if (matchUrl(this.cx.params.cache_first_urls, request.url)) {
-				Observer.set(this.network, 'strategy', 'cache-first');
-				return this.cacheFetch(request, { networkFallback: true, cacheRefresh: true });
+			// cache_only_urls
+			if (this.cx.params.default_fetching_strategy === 'cache-only' || matchUrl(this.cx.params.cache_only_urls, request.url)) {
+				Observer.set(this.network, 'strategy', 'cache-only');
+				return this.cacheFetch(request, { networkFallback: false, cacheRefresh: false });
 			}
-			Observer.set(this.network, 'strategy', 'network-first');
-			return this.networkFetch(request, { cacheFallback: true, cacheRefresh: true });
 		};
 		let response = execFetch(request);
 		// This catch() is NOT intended to handle failure of the fetch
@@ -187,18 +221,6 @@ export default class Worker {
 		return response.then(_response => Response.compat(_response));
 	}
 
-	// Caching strategy: cache_first
-	cacheFetch(request, params = {}) {
-		return this.getRequestCache(request).then(cache => cache.match(request).then(response => {
-			// Nothing cache, use network
-			if (!response && params.networkFallback) return this.networkFetch(request, { ...params, cacheFallback: false });
-			// Note: fetch, but for refreshing purposes only... not the returned response
-			if (response && params.cacheRefresh) this.networkFetch(request, { ...params, justRefreshing: true });
-			Observer.set(this.network, 'cache', true);
-			return response;
-		}));
-	}
-
 	// Caching strategy: network_first
 	networkFetch(request, params = {}) {
 		if (!params.cacheFallback) {
@@ -215,6 +237,18 @@ export default class Worker {
 		}));
 	}
 
+	// Caching strategy: cache_first
+	cacheFetch(request, params = {}) {
+		return this.getRequestCache(request).then(cache => cache.match(request).then(response => {
+			// Nothing cache, use network
+			if (!response && params.networkFallback) return this.networkFetch(request, { ...params, cacheFallback: false });
+			// Note: fetch, but for refreshing purposes only... not the returned response
+			if (response && params.cacheRefresh) this.networkFetch(request, { ...params, justRefreshing: true });
+			Observer.set(this.network, 'cache', true);
+			return response;
+		}));
+	}
+
 	// Caches response 
 	refreshCache(request, response) {
 		// Check if we received a valid response

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

@@ -0,0 +1,80 @@
+
+export default class Workport {
+
+    constructor() {
+        // --------
+        // Post messaging
+        // --------
+        this.messaging = {
+            post: (message, client = this.client) => {
+                if (!client) throw new Error(`No client for this operation.`);
+                client.postMessage(message);
+                return this.post;
+            },
+            listen: (callback, client = this.client) => {
+                if (!client) {
+                    self.addEventListener('message', evt => {
+                        this.client = evt.source;
+                        callback(evt);
+                    });
+                    return this.post;
+                }
+                client.addEventListener('message', callback);
+                return this.post;
+            },
+            request: (message, client = this.client) => {
+                if (!client) throw new Error(`No client for this operation.`);
+                return new Promise(res => {
+                    let messageChannel = new MessageChannel();
+                    client.postMessage(message, [ messageChannel.port2 ]);
+                    messageChannel.port1.onmessage = e => res(e.data);
+                });
+            },
+            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 (!(self.Notification && self.Notification.permission === 'granted')) {
+                        return rej(self.Notification && self.Notification.permission);
+                    }
+                    notification.addEventListener('error', rej);
+                    let notification = new self.Notification(title, params);
+                    notification.addEventListener('click', res);
+                    notification.addEventListener('close', res);
+                });
+            },
+            listen: callback => {
+                self.addEventListener('notificationclick', callback);
+                return this.notifications;
+            },
+        };
+
+        // --------
+        // Push Notifications
+        // --------
+        this.push = {
+            listen: callback => {
+                self.addEventListener('push', callback);
+                return this.post;
+            },
+        };
+    }
+
+    setCurrentClient(client) {
+        this.client = client;
+    }
+
+}

package/src/runtime-pi/server/Router.js

@@ -88,9 +88,9 @@ export default class Router extends _Router {
                     response = new httpEvent.Response(null, { status: 500, statusText: `Error reading static file: ${filename}` } );
                 } else {
                     // if the file is found, set Content-type and send data
-                    const type = Mime.lookup(ext);
+                    let mime = Mime.lookup(ext);
                     response = new httpEvent.Response(data, { headers: {
-                        contentType: type === 'application/javascript' ? 'text/javascript' : type,
+                        contentType: mime === 'application/javascript' ? 'text/javascript' : mime,
                         contentLength: Buffer.byteLength(data),
                     } });
                     if (enc) {

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

@@ -245,9 +245,14 @@ export default class Runtime {
         Observer.set(this, 'location', {});
         Observer.set(this, 'network', {});
         // ---------------
-        if (this.cx.app.title && this.cx.logger) {
-            this.cx.logger.info(`> Server running (${this.cx.app.title || ''})`);
-        }
+        this.ready.then(() => {
+            if (!this.cx.logger) return;
+            if (this.cx.server.shared) {
+                this.cx.logger.info(`> Server running (shared)`);
+            } else {
+                this.cx.logger.info(`> Server running (${this.cx.app.title || ''})::${this.cx.server.port}`);
+            }
+        });
      }
 
     /**
@@ -302,19 +307,25 @@ export default class Runtime {
             return this.getSession(_context, httpEvent, id, options, callback);
         });
         // Response
-        let client = this.clients.get('*');
+        let client = this.clients.get('*'), response, finalResponse;
         if (this.cx.server.shared) {
             client = this.clients.get(url.hostname);
         }
-        let response = await client.handle(httpEvent, ( ...args ) => this.remoteFetch( ...args ));
-        let finalResponse = await this.handleResponse(httpEvent, response, autoHeaders.filter(header => header.type === 'response'));
+        try {
+            response = await client.handle(httpEvent, ( ...args ) => this.remoteFetch( ...args ));
+            finalResponse = await this.handleResponse(_context, httpEvent, response, autoHeaders.filter(header => header.type === 'response'));
+        } catch(e) {
+            finalResponse = new Response(null, { status: 500, statusText: e.message });
+            console.error(e);
+        }
         // Logging
         if (this.cx.logger) {
             let log = this.generateLog(httpEvent, finalResponse);
             this.cx.logger.log(log);
         }
+        // ------------
         // Return value
-        return finalResponse;
+		return finalResponse;
     }
 
     // Generates request object
@@ -373,7 +384,7 @@ export default class Runtime {
     }
 
     // Handles response object
-    async handleResponse(e, response, autoHeaders = []) {
+    async handleResponse(cx, e, response, autoHeaders = []) {
         if (!(response instanceof Response)) { response = new Response(response); }
         Observer.set(this.network, 'remote', false);
         Observer.set(this.network, 'error', null);
@@ -396,14 +407,22 @@ export default class Runtime {
         if (response.headers.redirect) {
             let xRedirectPolicy = e.request.headers.get('X-Redirect-Policy');
             let xRedirectCode = e.request.headers.get('X-Redirect-Code') || 300;
-            let isSameOriginRedirect = (new whatwag.URL(response.headers.location, e.url.origin)).origin === e.url.origin;
-            if (xRedirectPolicy === 'manual' || (!isSameOriginRedirect && xRedirectPolicy === 'manual-when-cross-origin') || (isSameOriginRedirect && xRedirectPolicy === 'manual-when-same-origin')) {
-                response.attrs.status = xRedirectCode;
+            let destinationUrl = new whatwag.URL(response.headers.location, e.url.origin);
+            let isSameOriginRedirect = destinationUrl.origin === e.url.origin;
+            let isSameSpaRedirect, sparootsFile = Path.join(cx.CWD, cx.layout.PUBLIC_DIR, 'sparoots.json');
+            if (isSameOriginRedirect && xRedirectPolicy === 'manual-when-cross-spa' && Fs.existsSync(sparootsFile)) {
+                // Longest-first sorting
+                let sparoots = _arrFrom(JSON.parse(Fs.readFileSync(sparootsFile))).sort((a, b) => a.length > b.length ? -1 : 1);
+                let matchRoot = path => sparoots.reduce((prev, root) => prev || (`${path}/`.startsWith(`${root}/`) && root), null);
+                isSameSpaRedirect = matchRoot(destinationUrl.pathname) === matchRoot(e.url.pathname);
+            }
+            if (xRedirectPolicy === 'manual' || (!isSameOriginRedirect && xRedirectPolicy === 'manual-when-cross-origin') || (!isSameSpaRedirect && xRedirectPolicy === 'manual-when-cross-spa')) {
                 response.headers.json({
                     'X-Redirect-Code': response.status,
                     'Access-Control-Allow-Origin': '*',
                     'Cache-Control': 'no-store',
                 });
+                response.attrs.status = xRedirectCode;
             }
             return response;
         }

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

@@ -45,12 +45,13 @@ export default class RuntimeClient {
             // --------
             // Rendering
             // --------
+
             if (response.ok && response.bodyAttrs.inputType === 'object' && httpEvent.request.headers.accept.match('text/html')) {
                 let rendering = await this.render(httpEvent, router, response);
-                if (typeof rendering !== 'string') {
-                    throw new Error('render() must return a window object or a string response.');
+                if (typeof rendering !== 'string' && !(typeof rendering === 'object' && rendering && typeof rendering.toString === 'function')) {
+                    throw new Error('render() must return a string response or an object that implements toString()..');
                 }
-                response = new httpEvent.Response(rendering, {
+                response = new httpEvent.Response(rendering.toString(), {
                     status: response.status,
                     headers: { ...response.headers.json(), contentType: 'text/html' },
                 });
@@ -78,22 +79,31 @@ export default class RuntimeClient {
                 pathnameSplit.pop();
             }
             const instanceParams = QueryString.stringify({
-                SOURCE: renderFile,
-                URL: httpEvent.url.href,
-                ROOT: this.cx.CWD,
+                file: renderFile,
+                url: httpEvent.url.href,
+                root: this.cx.CWD,
+                oohtml_level: this.cx.server.oohtml_support,
             });
             const { window } = await import('@webqit/oohtml-ssr/instance.js?' + instanceParams);
             // --------
             // OOHTML would waiting for DOM-ready in order to be initialized
-            await new Promise(res => window.WebQit.DOM.ready(res));
-            await new Promise(res => (window.document.templatesReadyState === 'complete' && res(), window.document.addEventListener('templatesreadystatechange', res)));
-            if (!window.document.state.env) {
-                window.document.setState({
-                    env: 'server',
-                }, { update: true });
+            if (window.WebQit.DOM) {
+                await new Promise(res => window.WebQit.DOM.ready(res));
+            }
+            if (window.document.templates) {
+                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: 'server',
+                    }, { update: true });
+                }
+                window.document.setState({ data, url: httpEvent.url }, { update: 'merge' });
+            }
+            if (window.document.templates) {
+                window.document.body.setAttribute('template', 'routes/' + httpEvent.url.pathname.split('/').filter(a => a).map(a => a + '+-').join('/'));
             }
-            window.document.setState({ page: data, url: httpEvent.url }, { update: 'merge' });
-            window.document.body.setAttribute('template', 'page/' + httpEvent.url.pathname.split('/').filter(a => a).map(a => a + '+-').join('/'));
             await new Promise(res => setTimeout(res, 10));
             return window;
         });

package/src/runtime-pi/util.js

@@ -135,9 +135,9 @@ export const path = {
 export const urlPattern = (pattern, baseUrl = null) => ({
     pattern: new URLPattern(pattern, baseUrl),
     isPattern() {
-        return Object.keys(this.pattern.keys).some(compName => this.pattern.keys[compName].length);
+        return Object.keys(this.pattern.keys || {}).some(compName => this.pattern.keys[compName].length);
     },
-    test(...args) { this.pattern.test(...args) }, 
+    test(...args) { return this.pattern.test(...args) }, 
     exec(...args) {
         let components = this.pattern.exec(...args);
         if (!components) return;

package/test/site/package.json

@@ -0,0 +1,9 @@
+{
+  "title": "Webflo Test",
+  "type": "module",
+  "scripts": {
+    "generate": "webflo generate::client --recursive --compression --auto-embed",
+    "bundle": "cd public && oohtml bundle --recursive --auto-embed=routes",
+    "build": "npm run generate && npm run bundle"
+  }
+}

package/test/site/public/bundle.html

@@ -0,0 +1,6 @@
+
+<template name="page-3">
+    <img src="/page-3/logo-130x130.png"  exportgroup="logo-130x130.png" />
+</template>
+<template name="page-4">
+</template>

package/test/site/public/bundle.html.json

@@ -0,0 +1,4 @@
+{
+    "page-3": {},
+    "page-4": {}
+}

package/test/site/public/bundle.js

@@ -0,0 +1,2 @@
+/** @webqit/webflo */
+var{start:e}=WebQit.Webflo,r={},o={bundle_filename:"bundle.js",public_base_url:"/",spa_routing:!0,oohtml_support:"full",service_worker_support:!0,worker_scope:"/",worker_filename:"worker.js",routing:{root:"/",subroots:["/page-2","/page-4/subpage"],targets:2}};e.call({layout:r,params:o});