@webqit/webflo 0.11.61 → 1.0.0

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

@@ -1,176 +1,104 @@
+export class Workport {
 
+    #swFile;
+    #swParams = {};
 
-/**
- * @imports
- */
-import { _isFunction, _isObject } from '@webqit/util/js/index.js';
-import { Observer } from './Runtime.js';
+    #swReady;
+    get swReady() { return this.#swReady; }
+    #swRegistration;
 
-export default class Workport {
-
-    constructor(file, params = {}, env = {}) {
-        this.ready = navigator.serviceWorker ? navigator.serviceWorker.ready : new Promise(() => {});
-
-        // --------
-        // Registration and lifecycle
-        // --------
-        this.registration = new Promise((resolve, reject) => {
-            if (!navigator.serviceWorker) return;
-            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.onWindowLoad) {
-                window.addEventListener('load', register);
-            } else {
-                register();
+    async registerServiceWorker(file, params = {}) {
+        if (this.#swRegistration) {
+            throw new Error('Service worker already registered');
+        }
+        this.#swFile = file;
+        this.#swParams = params;
+        this.#swReady = navigator.serviceWorker ? navigator.serviceWorker.ready : new Promise(() => {});
+        this.#swRegistration = await navigator.serviceWorker.register(this.#swFile, { scope: this.#swParams.scope || '/' });
+        // Helper that updates instance's state
+        const stateChange = (target) => {
+            // target.state can be any of: "parsed", "installing", "installed", "activating", "activated", "redundant"
+            if (target.state === 'redundant') {
+                this.remove(target);
+            } else if (target.state === 'activated') {
+                this.add(target);
             }
-            if (params.startMessages) {
-                navigator.serviceWorker.startMessages();
+        }
+        // We're always installing at first for a new service worker.
+        // An existing service would immediately be active
+        const worker = this.#swRegistration.active || this.#swRegistration.waiting || this.#swRegistration.installing;
+        if (worker)  {
+            stateChange(worker);
+            worker.addEventListener('statechange', (e) => stateChange(e.target));
+            // "updatefound" event - a new worker that will control
+            // this page is installing somewhere
+            this.#swRegistration.addEventListener('updatefound', () => {
+                // If updatefound is fired, it means that there's
+                // a new service worker being installed.
+                stateChange(this.#swRegistration.installing);
+                this.#swRegistration.installing.addEventListener('statechange', (e) => stateChange(e.target));
+            });
+        }
+    }
+
+    async requestNotificationPermission() {
+        return await new Promise(async (resolve, reject) => {
+            const permissionResult = Notification.requestPermission(resolve);
+            if (permissionResult) {
+                permissionResult.then(resolve, reject);
             }
         });
+    }
 
-        // --------
-        // 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 = Observer.observe(this, 'active', entry => {
-                    if (_isFunction(message)) message = message();
-                    callback(entry.value, message);
-                    if (onAvailability !== 2) { availabilityHandler.abort(); }
+    async showNotification(title, params = {}) {
+        await this.#swReady;
+        if (this.#swRegistration) {
+            return (await this.#swRegistration).showNotification(title, params);
+        }
+        return new Notification(title, params);
+    }
+    
+    async pushSubscription(autoPrompt = true) {
+        if (!this.#swRegistration) {
+            throw new Error(`Service worker not registered`);
+        }
+        await this.#swReady;
+        const pushManager = (await this.#swRegistration).pushManager;
+        let subscription = await pushManager.getSubscription();
+        if (!subscription && autoPrompt && this.#swParams.VAPID_PUBLIC_KEY) {
+            subscription = await pushManager.subscribe({
+                userVisibleOnly: true,
+                applicationServerKey: urlBase64ToUint8Array(this.#swParams.VAPID_PUBLIC_KEY),
+            });
+            if (this.#swParams.PUSH_REGISTRATION_PUBLIC_URL) {
+                await fetch(this.#swParams.PUSH_REGISTRATION_PUBLIC_URL, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', },
+                    body: JSON.stringify(subscription)
                 });
             }
-        };
-        this.messaging = {
-            post: (message, onAvailability = 1) => {
-                postSendCallback(message, (active, message) => {
-                    active.postMessage(message);
-                }, onAvailability);
-                return this;
-            },
-            listen: callback => {
-                if (navigator.serviceWorker) {
-                    navigator.serviceWorker.addEventListener('message', evt => {
-                        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;
-            },
-            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,
-        };
+        }
+        return subscription;
+    }
 
-        // --------
-        // Notifications
-        // --------
-        this.notifications = {
-            requestPermission: () => {
-                return new Promise(async (resolve, reject) => {
-                    const permissionResult = Notification.requestPermission(resolve);
-                    if (permissionResult) { permissionResult.then(resolve, reject); }
+    async pushUnsubscribe() {
+        if (!this.#swRegistration) {
+            throw new Error(`Service worker not registered`);
+        }
+        await this.#swReady;
+        const pushManager = (await this.#swRegistration).pushManager;
+        const subscription = await pushManager.getSubscription();
+        if (subscription) {
+            subscription.unsubscribe();
+            if (subscription && this.#swParams.PUSH_REGISTRATION_PUBLIC_URL) {
+                await fetch(this.#swParams.PUSH_REGISTRATION_PUBLIC_URL, {
+                    method: 'DELETE',
+                    headers: { 'Content-Type': 'application/json', },
+                    body: JSON.stringify(subscription)
                 });
-            },
-            fire: async (title, params = {}) => {
-                await this.ready;
-                return (await this.registration).showNotification(title, params);
-            },
-        };
-
-        // --------
-        // Push notifications
-        // --------
-        this.push = {
-            getSubscription: async (autoPrompt = true) => {
-                await this.ready;
-                let subscription = await (await this.registration).pushManager.getSubscription();
-                let VAPID_PUBLIC_KEY, PUSH_REGISTRATION_PUBLIC_URL;
-                if (!subscription && autoPrompt && (VAPID_PUBLIC_KEY = env[params.vapid_key_env])) {
-                    subscription = await (await this.registration).pushManager.subscribe({
-                        userVisibleOnly: true,
-                        applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY),
-                    });
-                    if (PUSH_REGISTRATION_PUBLIC_URL = env[params.push_registration_url_env]) {
-                        await fetch(PUSH_REGISTRATION_PUBLIC_URL, {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json', },
-                            body: JSON.stringify(subscription),
-                        });
-                    }
-                }
-                return subscription;
-            },
-            unsubscribe: async () => {
-                await this.ready;
-                const subscription = await (await this.registration).pushManager.getSubscription();
-                subscription?.unsubscribe();
-                let PUSH_REGISTRATION_PUBLIC_URL;
-                if (subscription && (PUSH_REGISTRATION_PUBLIC_URL = env[params.push_registration_url_env])) {
-                    await fetch(PUSH_REGISTRATION_PUBLIC_URL, {
-                        method: 'DELETE',
-                        headers: { 'Content-Type': 'application/json', },
-                        body: JSON.stringify(subscription),
-                    });
-                }
-            },
-        };
+            }
+        }
     }
-
 }
 
 // Public base64 to Uint

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

@@ -46,7 +46,7 @@ export async function generate() {
         }
         const envConfig = await (new cx.config.deployment.Env(cx)).read();
         for (const key in envConfig.entries) {
-            if (!key.includes('PUBLIC_')) continue;
+            if (!key.includes('PUBLIC_') && !key.includes('_PUBLIC')) continue;
             if (clientConfig.bundle_public_env) {
                 if (!clientConfig.env) { clientConfig.env = {}; }
                 clientConfig.env[key] = envConfig.entries[key];

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

@@ -1,21 +1,16 @@
+import { WebfloRootClient1 } from './WebfloRootClient1.js';
+import { WebfloRootClient2 } from './WebfloRootClient2.js';
+import { WebfloSubClient } from './WebfloSubClient.js';
 
-/**
- * @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);
+export function start() {
+    const Controller = window.navigation ? WebfloRootClient2 : WebfloRootClient1;
+    const instance = Controller.create(document, this || {});
+    instance.initialize();
+    WebfloSubClient.defineElement();
 }
 
-/**
- * @APIS
- */
-export * as APIS from './Runtime.js';
+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 @@
+import { Context as AbstractContext } from '../Context.js';
 
-/**
- * @imports
- */
-import _Context from '../Context.js';
-
-export default class Context extends _Context {}
+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);
+	}
+}