@webqit/webflo 0.11.61-0 → 1.0.0

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

@@ -1,21 +1,16 @@
-
-/**
- * @imports
- */
-import Context from './Context.js';
-import Application from './Application.js';
-import Runtime from './Runtime.js';
-
-/**
- * @start
- */
-export async function start(applicationInstance = null) {
-    const cx = this || {};
-    const defaultApplicationInstance = _cx => new Application(_cx);
-    return new Runtime(Context.create(cx), applicationInstance || defaultApplicationInstance);
-}
-
-/**
- * @APIS
- */
-export * as APIS from './Runtime.js';
+import { WebfloRootClient1 } from './WebfloRootClient1.js';
+import { WebfloRootClient2 } from './WebfloRootClient2.js';
+import { WebfloSubClient } from './WebfloSubClient.js';
+
+export function start() {
+    const Controller = window.navigation ? WebfloRootClient2 : WebfloRootClient1;
+    const instance = Controller.create(document, this || {});
+    instance.initialize();
+    WebfloSubClient.defineElement();
+}
+
+export { WebfloSubClient } from './WebfloSubClient.js';
+export {
+    WebfloRootClient1,
+    WebfloRootClient2
+}

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

@@ -0,0 +1,5 @@
+import { MessagingOverBroadcast } from '../../MessagingOverBroadcast.js';
+
+export class ClientMessaging extends MessagingOverBroadcast {
+    get runtime() { return this.parentNode; }
+}

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

@@ -1,7 +1,3 @@
-
-/**
- * @imports
- */
-import _Contex from '../Context.js';
-
-export default class Context extends _Contex {}
+import { Context as AbstractContext } from '../Context.js';
+
+export class Context extends AbstractContext {}

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

@@ -0,0 +1,17 @@
+import { WebfloCookieStorage } from '../../WebfloCookieStorage.js';
+
+export class CookieStorage extends WebfloCookieStorage {
+    static create(request) {
+        return new this(
+            request,
+            request.headers.get('Cookie', true).map((c) => [c.name, c])
+        );
+    }
+
+    commit(response) {
+        for (const cookieStr of this.render()) {
+            response.headers.append('Set-Cookie', cookieStr);
+        }
+        super.commit();
+    }
+}

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

@@ -0,0 +1,13 @@
+import { WebfloStorage } from '../../WebfloStorage.js';
+
+export class SessionStorage extends WebfloStorage {
+    #type;
+
+    static async create(request) {
+        return new this;
+    }
+
+    async commit(response) {
+        super.commit();
+    }
+}

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

@@ -0,0 +1,294 @@
+import { _any } from '@webqit/util/arr/index.js';
+import { _isObject } from '@webqit/util/js/index.js';
+import { pattern } from '../../util-url.js';
+import { WebfloRuntime } from '../../WebfloRuntime.js';
+import { ClientMessaging } from './ClientMessaging.js';
+import { CookieStorage } from './CookieStorage.js';
+import { SessionStorage } from './SessionStorage.js';
+import { HttpEvent } from '../../HttpEvent.js';
+import { HttpUser } from '../../HttpUser.js';
+import { Workport } from './Workport.js';
+import { Context } from './Context.js';
+import { Router } from '../Router.js';
+import xfetch from '../../xfetch.js';
+import '../../util-http.js';
+
+export class WebfloWorker extends WebfloRuntime {
+
+	static get Context() { return Context; }
+
+	static get Router() { return Router; }
+
+	static get HttpEvent() { return HttpEvent; }
+
+	static get CookieStorage() { return CookieStorage; }
+
+	static get SessionStorage() { return SessionStorage; }
+
+    static get HttpUser() { return HttpUser; }
+
+	static get Workport() { return Workport; }
+
+	static create(cx) {
+        return new this(this.Context.create(cx));
+    }
+
+	#cx;
+	get cx() { return this.#cx; }
+
+	constructor(cx) {
+		super();
+		if (!(cx instanceof this.constructor.Context)) {
+			throw new Error('Argument #1 must be a Webflo Context instance');
+		}
+		this.#cx = cx;
+	}
+
+	initialize() {
+		// ONINSTALL
+		const installHandler = (event) => {
+			if (this.cx.params.skip_waiting) self.skipWaiting();
+			// Manage CACHE
+			if (this.cx.params.cache_name && (this.cx.params.cache_only_urls || []).length) {
+				// Add files to cache
+				event.waitUntil(self.caches.open(this.cx.params.cache_name).then(async cache => {
+					if (this.cx.logger) { this.cx.logger.log('[ServiceWorker] Pre-caching resources.'); }
+					for (const urls of [ 'cache_first_urls', 'cache_only_urls' ]) {
+						const _urls = (this.cx.params[urls] || []).map(c => c.trim()).filter(c => c && !pattern(c, self.origin).isPattern());
+						await cache.addAll(_urls);
+					}
+				}));
+			}
+		};
+		// ONACTIVATE
+		const activateHandler = (event) => {
+			event.waitUntil(new Promise(async resolve => {
+				if (this.cx.params.skip_waiting) { await self.clients.claim(); }
+				// Manage CACHE
+				if (this.cx.params.cache_name) {
+					// Clear outdated CACHES
+					await self.caches.keys().then(keyList => {
+						return Promise.all(keyList.map(key => {
+							if (key !== this.cx.params.cache_name && key !== this.cx.params.cache_name + '_json') {
+								if (this.cx.logger) { this.cx.logger.log('[ServiceWorker] Removing old cache:', key); }
+								return self.caches.delete(key);
+							}
+						}));
+					}) 
+				}
+				resolve();
+			}));
+		};
+		self.addEventListener('install', installHandler);
+		self.addEventListener('activate', activateHandler);
+		const uncontrols = this.control();
+        return () => {
+            self.removeEventListener('install', installHandler);
+            self.removeEventListener('activate', activateHandler);
+			uncontrols();
+        };
+	}
+
+	control() {
+		// ONFETCH
+		const fetchHandler = (event) => {
+			// URL schemes that might arrive here but not supported; e.g.: chrome-extension://
+			if (!event.request.url.startsWith('http')) return;
+			// Handle external requests
+			if (!event.request.url.startsWith(self.origin)) {
+				return event.respondWith(this.remoteFetch(event.request));
+			}
+			if (event.request.mode === 'navigate' || event.request.cache === 'force-cache'/* && event.request.mode === 'navigate' - even webflo client init call also comes with that... needs investigation */) {
+				// Now, the following is key:
+				// The browser likes to use "force-cache" for "navigate" requests, when, e.g: re-entering your site with the back button
+				// Problem here, force-cache forces out JSON not HTML as per webflo's design.
+				// So, we detect this scenerio and avoid it.
+				event.respondWith((async (event) => {
+					const { url, ...requestInit } = await Request.copy(event.request);
+					requestInit.cache = 'default';
+					return await this.navigate(url, requestInit, { event });
+				})(event));
+			} else {
+				event.respondWith(this.navigate(event.request.url, event.request, { event }));
+			}
+		};
+		self.addEventListener('fetch', fetchHandler);
+        return () => {
+            self.removeEventListener('fetch', fetchHandler);
+        };
+	}
+
+    createRequest(href, init = {}) {
+		return new Request(href, init);
+    }
+
+	async navigate(url, init = {}, detail = {}) {
+		// Resolve inputs
+        const scope = { url, init, detail };
+		if (typeof scope.url === 'string') {
+			scope.url = new URL(scope.url, self.location.origin);
+		}
+		scope.response = await new Promise(async (resolveResponse) => {
+            scope.handleRespondWith = async (response) => {
+				if (scope.finalResponseSeen) {
+                    throw new Error('Final response already sent');
+                }
+                if (scope.initialResponseSeen) {
+                    return await this.execPush(scope.clientMessaging, response);
+                }
+                resolveResponse(response);
+			};
+			// Create and route request
+			scope.request = this.createRequest(scope.url, scope.init);
+			scope.cookies = this.constructor.CookieStorage.create(scope.request);
+			scope.session = this.constructor.SessionStorage.create(scope.request, { secret: this.cx.env.entries.SESSION_KEY });
+			const portID = crypto.randomUUID();
+			scope.clientMessaging = new ClientMessaging(this, portID, { isPrimary: true });
+			scope.user = this.constructor.HttpUser.create(
+				scope.request,
+				scope.session,
+				scope.clientMessaging
+			);
+			scope.httpEvent = this.constructor.HttpEvent.create(scope.handleRespondWith, {
+                request: scope.request,
+                detail: scope.detail,
+                cookies: scope.cookies,
+                session: scope.session,
+                user: scope.user,
+                client: scope.clientMessaging
+            });
+			// Restore session before dispatching
+            if (scope.request.method === 'GET' 
+			&& (scope.redirectMessageID = scope.httpEvent.url.query['redirect-message'])
+			&& (scope.redirectMessage = scope.session.get(`redirect-message:${scope.redirectMessageID}`))) {
+				scope.session.delete(`redirect-message:${scope.redirectMessageID}`);
+			}
+			// Dispatch for response
+			scope.$response = await this.dispatch(scope.httpEvent, {}, async (event) => {
+				// Was this nexted()? Tell the next layer we're in JSON mode by default
+				if (event !== scope.httpEvent && !event.request.headers.has('Accept')) {
+					event.request.headers.set('Accept', 'application/json');
+				}
+				return await this.remoteFetch(event.request);
+			});
+			// Final reponse!!!
+            scope.finalResponseSeen = true;
+            if (scope.initialResponseSeen) {
+                // Send via background port
+                if (typeof scope.$response !== 'undefined') {
+					await this.execPush(scope.clientMessaging, scope.$response);
+                }
+				scope.clientMessaging.close();
+                return;
+            }
+			// Send normally
+			resolveResponse(scope.$response);
+		});
+		scope.initialResponseSeen = true;
+        scope.hasBackgroundActivity = !scope.finalResponseSeen || (scope.redirectMessage && !(scope.response instanceof Response && scope.response.headers.get('Location')));
+        scope.response = await this.normalizeResponse(scope.httpEvent, scope.response, scope.hasBackgroundActivity);
+		if (scope.hasBackgroundActivity) {
+			scope.response.headers.set('X-Background-Messaging', `ch:${scope.clientMessaging.port.name}`);
+        }
+		if (scope.response instanceof Response && scope.response.headers.get('Location')) {
+            if (scope.redirectMessage) {
+                scope.session.set(`redirect-message:${scope.redirectMessageID}`, scope.redirectMessage);
+            }
+		} else {
+			if (scope.redirectMessage) {
+				setTimeout(() => {
+					this.execPush(scope.clientMessaging, scope.redirectMessage);
+					if (scope.finalResponseSeen) {
+						scope.clientMessaging.close();
+					}
+				}, 500);
+			} else if (scope.finalResponseSeen) {
+				scope.clientMessaging.close();
+			}
+		}
+		return scope.response;
+	}
+
+	async remoteFetch(request, ...args) {
+		if (arguments.length > 1) {
+			request = this.createRequest(request, ...args);
+		}
+		const scope = {};
+		const matchUrl = (patterns, url) => _any((patterns || []).map(p => p.trim()).filter(p => p), p => pattern(p, self.origin).test(url));
+		if (matchUrl(this.cx.params.cache_only_urls, request.url)) {
+			scope.strategy = 'cache-only';
+			scope.response = this.cacheFetch(request, { networkFallback: false, cacheRefresh: false });
+		} else if (matchUrl(this.cx.params.network_only_urls, request.url)) {
+			scope.strategy = 'network-only';
+			scope.response = this.networkFetch(request, { cacheFallback: false, cacheRefresh: false });
+		} else if (matchUrl(this.cx.params.cache_first_urls, request.url)) {
+			scope.strategy = 'cache-first';
+			scope.response = this.cacheFetch(request, { networkFallback: true, cacheRefresh: true });
+		} else if (matchUrl(this.cx.params.network_first_urls, request.url) || !this.cx.params.default_fetching_strategy) {
+			scope.strategy = 'network-first';
+			scope.response = this.networkFetch(request, { cacheFallback: true, cacheRefresh: true });
+		} else {
+			scope.strategy = this.cx.params.default_fetching_strategy;
+			switch (this.cx.params.default_fetching_strategy) {
+				case 'cache-only':
+					scope.response = this.cacheFetch(request, { networkFallback: false, cacheRefresh: false });
+					break;
+				case 'network-only':
+					scope.response = this.networkFetch(request, { cacheFallback: false, cacheRefresh: false });
+					break;
+				case 'cache-first':
+					scope.response = this.cacheFetch(request, { networkFallback: true, cacheRefresh: true });
+					break;
+				case 'network-first':
+					scope.response = this.networkFetch(request, { cacheFallback: true, cacheRefresh: true });
+					break;
+			}
+		}
+		return await scope.response;
+	}
+
+	async networkFetch(request, params = {}) {
+		if (!params.cacheFallback) {
+			return xfetch(request);
+		}
+		return xfetch(request).then((response) => {
+			if (params.cacheRefresh) this.refreshCache(request, response);
+			return response;
+		}).catch((e) => this.getRequestCache(request).then(cache => {
+			return cache.match(request);
+		}));
+	}
+
+	async 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 });
+			return response;
+		}));
+	}
+
+	async refreshCache(request, response) {
+		// Check if we received a valid response
+		if (request.method !== 'GET' || !response || response.status !== 200 || (response.type !== 'basic' && response.type !== 'cors')) {
+			return response;
+		}
+		// IMPORTANT: Clone the response. A response is a stream
+		// and because we want the browser to consume the response
+		// as well as the cache consuming the response, we need
+		// to clone it so we have two streams.
+		var responseToCache = response.clone();
+		this.getRequestCache(request).then(cache => {
+			cache.put(request, responseToCache);
+		});
+		return response;
+	}
+
+	async getRequestCache(request) {
+		const cacheName = request.headers.get('Accept') === 'application/json'
+			? this.cx.params.cache_name + '_json' 
+			: this.cx.params.cache_name;
+		return self.caches.open(cacheName);
+	}
+}

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

@@ -1,86 +1,18 @@
-
-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) => {
-                (client || self).addEventListener('message', evt => {
-                    this.client = evt.source;
-                    const response = callback(evt);
-                    let responsePort = evt.ports[0];
-                    if (responsePort) {
-                        if (response instanceof Promise) {
-                            response.then(data => {
-                                responsePort.postMessage(data);
-                            });
-                        } else {
-                            responsePort.postMessage(response);
-                        }
-                    }
-                });
-                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);
-                });
-            },
-            handle: 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;
-    }
-
+export class Workport {
+
+    showNotification(title, params = {}) {
+        return self.registration.showNotification(title, params);
+    }
+
+    handleNotificationClick(callback) {
+        const handler = (e) => e.waitUntil(callback(e));
+        self.addEventListener('notificationclick', handler);
+        return () => self.removeEventListener('notificationclick', handler);
+    }
+    
+    handlePush(callback) {
+        const handler = (e) => e.waitUntil(callback(e));
+        self.addEventListener('push', handler);
+        return () => self.removeEventListener('notificationclick', handler);
+    }
 }

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

@@ -1,21 +1,10 @@
-
-/**
- * @imports
- */
-import Context from './Context.js';
-import Application from './Application.js';
-import Runtime from './Runtime.js';
-
-/**
- * @start
- */
-export async function start(applicationInstance = null) {
-    const cx = this || {};
-    const defaultApplicationInstance = _cx => new Application(_cx);
-    return new Runtime(Context.create(cx), applicationInstance || defaultApplicationInstance);
-}
-
-/**
- * @APIS
- */
-export * as APIS from './Runtime.js';
+import { WebfloWorker } from './WebfloWorker.js';
+
+export function start() {
+    const instance = WebfloWorker.create(this || {});
+    instance.initialize();
+}
+
+export {
+    WebfloWorker
+}

package/src/runtime-pi/index.js

@@ -1,14 +1,7 @@
-
-/**
- * @imports
- */
-import * as server from './server/index.js';
-import * as client from './client/generate.js';
-
-/**
- * @exports
- */
-export {
-    server,
-    client,
+import * as server from './server/index.js';
+import * as client from './client/generate.js';
+
+export {
+    server,
+    client
 }

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

@@ -0,0 +1,18 @@
+import { MultiportMessagingAPI } from '../MultiportMessagingAPI.js';
+
+export class ClientMessaging extends MultiportMessagingAPI {
+
+    get runtime() { return this.parentNode.parentNode; }
+
+    #portID;
+    get portID() { return this.#portID; }
+
+    constructor(parentNode/*ClientMessagingRegistry*/, portID, params = {}) {
+        super(parentNode, params);
+        this.#portID = portID;
+    }
+
+    createBroadcastChannel(name) {
+        return this.parentNode.createBroadcastChannel(name);
+    }
+}

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

@@ -0,0 +1,57 @@
+import { ClientMessaging } from './ClientMessaging.js';
+import crypto from 'crypto';
+
+export class ClientMessagingRegistry extends Map {
+
+    #parentNode;
+    get parentNode() { return this.#parentNode; }
+
+    #sessionID;
+    get sessionID() { return this.#sessionID; }
+
+    #params;
+    get params() { return this.#params; }
+
+    #channels = new Map;
+
+    constructor(parentNode/*WebfloServer*/, sessionID, params = {}) {
+        super();
+        this.#parentNode = parentNode;
+        this.#sessionID = sessionID;
+        this.#params = params;
+    }
+
+    createPort() {
+        const portID = crypto.randomUUID();
+        const portInstance = new ClientMessaging(this, portID, this.#params);
+        this.set(portID, portInstance);
+        portInstance.on('empty', () => {
+            this.delete(portID);
+        });
+        setTimeout(() => {
+            if (portInstance.ports.size || !this.has(portID)) return;
+            this.delete(portID);
+        }, 30000/*30sec*/);
+        return portInstance;
+    }
+
+    createBroadcastChannel(name) {
+        if (!this.#channels.has(name)) {
+            this.#channels.set(name, new BroadcastChannel(this, name));
+        }
+        return this.#channels.get(name);
+    }
+}
+
+export class BroadcastChannel extends EventTarget {
+    #manager;
+    #name;
+    constructor(manager, name) {
+        super();
+        this.#manager = manager;
+        this.#name = name;
+    }
+
+    postMessage() {
+    }
+}

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

@@ -1,16 +1,12 @@
-
-/**
- * @imports
- */
-import _Contex from '../../Context.js';
-
-export default class Context extends _Contex {
-    // env
-    get env() {
-        return this.dict.env || {};
-    }
-
-    set env(value) {
-        this.dict.env = value;
-    }
+import { AbstractContext } from '../../AbstractContext.js';
+
+export class Context extends AbstractContext {
+    // env
+    get env() {
+        return this.dict.env || {};
+    }
+
+    set env(value) {
+        this.dict.env = value;
+    }
 }

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

@@ -0,0 +1,17 @@
+import { WebfloCookieStorage } from '../WebfloCookieStorage.js';
+
+export class CookieStorage extends WebfloCookieStorage {
+    static create(request) {
+        return new this(
+            request,
+            request.headers.get('Cookie', true).map((c) => [c.name, c])
+        );
+    }
+
+    commit(response) {
+        for (const cookieStr of this.render()) {
+            response.headers.append('Set-Cookie', cookieStr);
+        }
+        super.commit();
+    }
+}