@webqit/webflo 1.0.19 → 1.0.21

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

@@ -1,6 +1,7 @@
 import { WebfloClient } from './WebfloClient.js';
 import { Context } from './Context.js';
 import { Workport } from './Workport.js';
+import { Capabilities } from './Capabilities.js';
 
 const { Observer } = webqit;
 
@@ -10,6 +11,8 @@ export class WebfloRootClient1 extends WebfloClient {
 
 	static get Workport() { return Workport; }
 
+	static get Capabilities() { return Capabilities; }
+
 	static create(host, cx = {}) {
         return new this(host, this.Context.create(cx));
     }
@@ -17,6 +20,15 @@ export class WebfloRootClient1 extends WebfloClient {
 	#cx;
 	get cx() { return this.#cx; }
 
+    #network;
+    get network() { return this.#network; }
+
+    #workport;
+    get workport() { return this.#workport; }
+
+    #capabilities;
+    get capabilities() { return this.#capabilities; }
+
 	constructor(host, cx) {
 		if (!(host instanceof Document)) {
 			throw new Error('Argument #1 must be a Document instance');
@@ -26,11 +38,42 @@ export class WebfloRootClient1 extends WebfloClient {
 			throw new Error('Argument #2 must be a Webflo Context instance');
 		}
 		this.#cx = cx;
+		this.#network = { status: window.navigator.onLine };
 	}
 
-	initialize() {
-		// Main initializations
-		let undoControl = super.initialize();
+	async initialize() {
+		// --------
+		// INITIALIZATIONS
+		const cleanups = [await super.initialize()];
+		// --------
+		// Service Worker && Capabilities
+		if (this.cx.params.capabilities?.service_worker?.filename) {
+			const { service_worker: { filename, ...restServiceWorkerParams } = {} } = this.cx.params.capabilities;
+			this.#workport = await this.constructor.Workport.initialize(null, (this.cx.params.public_base_url || '') + filename, restServiceWorkerParams);
+			cleanups.push(() => this.#workport.close());
+		}
+		this.#capabilities = await this.constructor.Capabilities.initialize({ ...this.cx.params.capabilities, env: this.cx.params.env });
+		cleanups.push(() => this.#capabilities.close());
+		// --------
+        // Bind network status handlers
+        const onlineHandler = () => Observer.set(this.network, 'status', window.navigator.onLine);
+        window.addEventListener('online', onlineHandler);
+        window.addEventListener('offline', onlineHandler);
+		cleanups.push(() => {
+			window.removeEventListener('online', onlineHandler);
+            window.removeEventListener('offline', onlineHandler);
+		});
+		// --------
+		// Window opener pinging
+		let beforeunloadCleanup;
+		if (window.opener) {
+			const beforeunloadHandler = () => window.opener.postMessage('close');
+			window.addEventListener('beforeunload', beforeunloadHandler);
+			cleanups.push(() => {
+				window.removeEventListener('beforeunload', beforeunloadHandler);
+			});
+		}
+		// --------
 		// Bind global prompt handlers
         const promptsHandler = (e) => {
             e.stopPropagation();
@@ -49,9 +92,10 @@ export class WebfloRootClient1 extends WebfloClient {
 				});
             }, 10);
         };
-        this.backgroundMessaging.handleMessages('confirm', promptsHandler);
-        this.backgroundMessaging.handleMessages('prompt', promptsHandler);
-		// Respond to background activity request at pageload
+		cleanups.push(this.backgroundMessaging.handleMessages('confirm', promptsHandler));
+        cleanups.push(this.backgroundMessaging.handleMessages('prompt', promptsHandler));
+		// --------
+		// HYDRATION
 		const scope = {};
         if (scope.backgroundMessagingMeta = document.querySelector('meta[name="X-Background-Messaging"]')) {
 			scope.backgroundMessaging = this.$createBackgroundMessagingFrom(scope.backgroundMessagingMeta.content);
@@ -66,32 +110,9 @@ export class WebfloRootClient1 extends WebfloClient {
 				});
 			} catch(e) {}
         }
-		// Service Worker && COMM
-		if (this.cx.params.service_worker?.filename) {
-			const { public_base_url: base, service_worker: { filename, ...restServiceWorkerParams } } = this.cx.params;
-			const { vapid_key_env, push_registration_url_env, ..._restServiceWorkerParams } = restServiceWorkerParams;
-			const swParams = {
-				..._restServiceWorkerParams,
-				VAPID_PUBLIC_KEY: this.cx.params.env[vapid_key_env],
-				PUSH_REGISTRATION_PUBLIC_URL: this.cx.params.env[push_registration_url_env],
-				startMessages: true
-			};
-			this.workport = new this.constructor.Workport;
-			this.workport.registerServiceWorker(base + filename, swParams);
-		}
-		if (window.opener) {
-			// Window opener pinging
-			const $undoControl = undoControl;
-			const beforeunloadHandler = () => {
-				window.opener.postMessage('close');
-			};
-			window.addEventListener('beforeunload', beforeunloadHandler);
-			undoControl = () => {
-				window.removeEventListener('beforeunload', beforeunloadHandler);
-				$undoControl();
-			};
-		}
-		return undoControl
+		// --------
+		// CLEAN UP
+		return () => cleanups.forEach((c) => c());
 	}
 
 	/**
@@ -102,7 +123,7 @@ export class WebfloRootClient1 extends WebfloClient {
 
 	control() {
 		// IMPORTANT: we're calling super.controlClassic()
-		const undoControl = super.controlClassic((newHref) => {
+		const cleanupSuper = super.controlClassic((newHref) => {
             try {
                 // Save current scroll position
                 window.history.replaceState({
@@ -134,7 +155,7 @@ export class WebfloRootClient1 extends WebfloClient {
 		window.addEventListener('popstate', popstateHandler);
         return () => {
             this.host.removeEventListener('popstate', popstateHandler);
-            undoControl();
+            cleanupSuper();
         };
 	}
 

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

@@ -9,14 +9,14 @@ export class WebfloRootClient2 extends WebfloRootClient1 {
 		let navigationOrigins = [];
         // Capture all link-clicks
 		const clickHandler = (e) => {
-			if (!this._canIntercept(e)) return;
+			if (!this._canIntercept(e) || e.defaultPrevented) return;
 			let anchorEl = e.target.closest('a');
 			if (!anchorEl || !anchorEl.href || anchorEl.target) return;
 			navigationOrigins = [anchorEl, null, anchorEl.closest('[navigationcontext]')];
 		};
         // Capture all form-submits
 		const submitHandler = (e) => {
-			if (!this._canIntercept(e)) return;
+			if (!this._canIntercept(e) || e.defaultPrevented) return;
 			navigationOrigins = [e.submitter, e.target.closest('form'), e.target.closest('[navigationcontext]')];
 		};
 		// Handle navigation event which happens after the above

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

@@ -50,9 +50,9 @@ export class WebfloSubClient extends WebfloClient {
 				this.location = newValue;
 			}
 	
-			connectedCallback() {
+			async connectedCallback() {
 				this.#superRuntime = (this.parentNode?.closest(embedTagNames) || document).webfloRuntime;
-				this.#webfloControllerUninitialize = WebfloSubClient.create(this, this.#superRuntime).initialize();
+				this.#webfloControllerUninitialize = await WebfloSubClient.create(this, this.#superRuntime).initialize();
 			}
 	
 			disconnectedCallback() {
@@ -70,8 +70,12 @@ export class WebfloSubClient extends WebfloClient {
 	
 	get cx() { return this.#superRuntime.cx; }
 
+    get network() { return this.#superRuntime.network; }
+
 	get workport() { return this.#superRuntime.workport; }
 
+    get capabilities() { return this.#superRuntime.capabilities; }
+
     get withViewTransitions() { return this.host.hasAttribute('viewtransitions'); }
 
 	constructor(host, superRuntime) {
@@ -85,11 +89,11 @@ export class WebfloSubClient extends WebfloClient {
 		this.#superRuntime = superRuntime;
 	}
 
-	initialize() {
+	async initialize() {
 		if (this.host.location.origin !== window.location.origin) {
 			throw new Error(`Webflo embeddable origin violation in "${window.location}"`);
 		}
-		const uncontrols = super.initialize();
+		const cleanupSuper = await super.initialize();
 		this.backgroundMessaging.setParent(this.#superRuntime.backgroundMessaging);
 		if (this.host.getAttribute('location')) {
 			this.navigate(this.location.href);
@@ -98,7 +102,7 @@ export class WebfloSubClient extends WebfloClient {
 			if (this.backgroundMessaging.parentNode === this.#superRuntime.backgroundMessaging) {
 				this.backgroundMessaging.setParent(null);
 			}
-			uncontrols();
+			cleanupSuper();
 		};
 	}
 	

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

@@ -1,118 +1,91 @@
-export class Workport {
+import { _isObject } from '@webqit/util/js/index.js';
+import { WebfloMessagingAPI } from '../WebfloMessagingAPI.js';
+import { WebfloMessageEvent } from '../WebfloMessageEvent.js';
 
-    #swFile;
-    #swParams = {};
+export class Workport extends WebfloMessagingAPI {
 
-    #swReady;
-    get swReady() { return this.#swReady; }
-    #swRegistration;
+    #registration;
+    get registration() { return this.#registration; }
 
-    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 || '/' });
+    #params;
+    get params() { return this.#params; }
+
+    #ready;
+    get ready() { return this.#ready; }
+
+    #active;
+    get active() { return this.#active; }
+
+    static async initialize(parentNode, file, params = {}) {
+        const registration = (await navigator.serviceWorker.getRegistration())
+            || (await navigator.serviceWorker.register(file, { scope: '/', ...params }));
+        return new this(parentNode, registration, params);
+    }
+
+    #messageHandler;
+    constructor(parentNode, registration, params = {}) {
+        super(parentNode, params);
+        this.#registration = registration;
+        this.#params = params;
+        this.#ready = navigator.serviceWorker ? navigator.serviceWorker.ready : new Promise(() => {});
         // 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);
+                const existing = this.#active;
+                this.#active = target;
+                if (!existing) {
+                    this.$emit('connected');
+                }
             }
         }
         // 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));
+        const initial = this.#registration.active || this.#registration.waiting || this.#registration.installing;
+        if (initial)  {
+            stateChange(initial);
+            initial.addEventListener('statechange', (e) => stateChange(e.target));
             // "updatefound" event - a new worker that will control
             // this page is installing somewhere
-            this.#swRegistration.addEventListener('updatefound', () => {
+            this.#registration.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));
+                stateChange(this.#registration.installing);
+                this.#registration.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);
+        this.#messageHandler = async (event) => {
+            if (!_isObject(event.data) || !['messageType', 'message'].every((k) => k in event.data)) {
+                return;
             }
-        });
+            this.dispatchEvent(new WorkerMessageEvent(
+                this,
+                event.data.messageType,
+                event.data.message,
+                event.ports
+            ));
+        };
+        navigator.serviceWorker.addEventListener('message', this.#messageHandler);
     }
 
-    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)
-                });
+    postMessage(message, transferOrOptions = []) {
+        this.on('connected', () => {
+            if (Array.isArray(transferOrOptions)) {
+                transferOrOptions = { transfer: transferOrOptions };
             }
-        }
-        return subscription;
+            const { messageType = 'message', ...options } = transferOrOptions;
+            return this.#active.postMessage({
+                messageType,
+                message
+            }, options);
+        });
+        super.postMessage(message, transferOrOptions);
     }
 
-    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)
-                });
-            }
-        }
+    close() {
+        navigator.serviceWorker.removeEventListener('message', this.#messageHandler);
     }
 }
 
-// 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;
-}
+export class WorkerMessageEvent extends WebfloMessageEvent {}

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

@@ -25,13 +25,14 @@ export async function generate() {
     if (!cx.config.deployment?.Layout) {
         throw new Error(`The Client configurator "config.deployment.Layout" is required in context.`);
     }
+    const env = {};
     const clientConfig = await (new cx.config.runtime.Client(cx)).read();
-    clientConfig.env = {};
-    if (clientConfig.service_worker?.filename && !cx.config.runtime.client?.Worker) {
+    clientConfig.env = env;
+    if (clientConfig.capabilities?.service_worker && !cx.config.runtime.client?.Worker) {
         throw new Error(`The Service Worker configurator "config.runtime.client.Worker" is required in context.`);
     }
     const workerConfig = await (new cx.config.runtime.client.Worker(cx)).read();
-    workerConfig.env = {};
+    workerConfig.env = env;
     // -----------
     if (!cx.config.deployment?.Layout) {
         throw new Error(`The Layout configurator "config.deployment.Layout" is required in context.`);
@@ -42,20 +43,15 @@ export async function generate() {
     const dirClient = Path.resolve(cx.CWD || '', layoutConfig.CLIENT_DIR);
     const dirWorker = Path.resolve(cx.CWD || '', layoutConfig.WORKER_DIR);
     const dirSelf = Path.dirname(Url.fileURLToPath(import.meta.url)).replace(/\\/g, '/');
-    if (clientConfig.bundle_public_env || workerConfig.bundle_public_env) {
+    if (clientConfig.copy_public_variables) {
         if (!cx.config.deployment?.Env) {
             throw new Error(`The Layout configurator "config.deployment.Env" is required in context to bundle public env.`);
         }
         const envConfig = await (new cx.config.deployment.Env(cx)).read();
-        const env = { ...envConfig.entries, ...process.env };
-        for (const key in env) {
+        const $env = { ...envConfig.entries, ...process.env };
+        for (const key in $env) {
             if (!key.includes('PUBLIC_') && !key.includes('_PUBLIC')) continue;
-            if (clientConfig.bundle_public_env) {
-                clientConfig.env[key] = env[key];
-            }
-            if (workerConfig.bundle_public_env) {
-                workerConfig.env[key] = env[key];
-            }
+            env[key] = $env[key];
         }
     }
     // -----------
@@ -114,7 +110,14 @@ export async function generate() {
         gen.code.push(`const { start } = webqit.Webflo`);
         // ------------------
         // Bundle
-        declareStart.call(cx, gen, dirClient, dirPublic, clientConfig, spaRouting);
+        const paramsObj = structuredClone(clientConfig);
+        if (paramsObj.capabilities?.service_worker) {
+            paramsObj.capabilities.service_worker = {
+                filename: workerConfig.filename,
+                scope: workerConfig.scope
+            };
+        }
+        declareStart.call(cx, gen, dirClient, dirPublic, paramsObj, spaRouting);
         await bundle.call(cx, gen, Path.join(dirPublic, outfileMain), true/* asModule */);
         // ------------------
         // Embed/unembed
@@ -192,8 +195,14 @@ export async function generate() {
                 }
             }
         }
-        declareStart.call(cx, gen, dirWorker, dirPublic, workerConfig, workerRouting);
-        await bundle.call(cx, gen, Path.join(dirPublic, workerroot, clientConfig.service_worker.filename));
+        const paramsObj = structuredClone(workerConfig);
+        if (clientConfig.capabilities?.webpush) {
+            paramsObj.capabilities = {
+                webpush: true
+            };
+        }
+        declareStart.call(cx, gen, dirWorker, dirPublic, paramsObj, workerRouting);
+        await bundle.call(cx, gen, Path.join(dirPublic, workerroot, workerConfig.filename));
         // ------------------
         // Recurse
         workerGraphCallback && workerGraphCallback(workerroot, subworkerroots);
@@ -214,7 +223,7 @@ export async function generate() {
         await generateClient();
         Fs.existsSync(sparootsFile) && Fs.unlinkSync(sparootsFile);
     }
-    if (clientConfig.service_worker.filename) {
+    if (clientConfig.capabilities?.service_worker) {
         await generateWorker('/');
     }
 }

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

@@ -2,11 +2,12 @@ import { WebfloRootClient1 } from './WebfloRootClient1.js';
 import { WebfloRootClient2 } from './WebfloRootClient2.js';
 import { WebfloSubClient } from './WebfloSubClient.js';
 
-export function start() {
+export async function start() {
     const WebfloRootClient = window.navigation ? WebfloRootClient2 : WebfloRootClient1;
     const instance = WebfloRootClient.create(document, this || {});
-    instance.initialize();
+    await instance.initialize();
     WebfloSubClient.defineElement();
+    return instance;
 }
 
 export { WebfloSubClient } from './WebfloSubClient.js';

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

@@ -8,10 +8,12 @@ export class CookieStorage extends WebfloCookieStorage {
         );
     }
 
-    commit(response) {
-        for (const cookieStr of this.render()) {
-            response.headers.append('Set-Cookie', cookieStr);
+    async commit(response = null) {
+        if (response) {
+            for (const cookieStr of await this.render()) {
+                response.headers.append('Set-Cookie', cookieStr);
+            }
         }
-        super.commit();
+        await super.commit();
     }
 }

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

@@ -2,14 +2,10 @@ import { WebfloStorage } from '../../WebfloStorage.js';
 
 export class SessionStorage extends WebfloStorage {
     static create(request) {
-        return new this(request);
+        return new this({}, null, request);
     }
 
-    constructor(request) {
-        super(request, true);
-    }
-
-    async commit(response) {
-        super.commit();
+    async commit(response = null) {
+        await super.commit();
     }
 }