@webqit/webflo 0.20.56 → 0.20.57

package/src/webflo-runtime/webflo-client/DeviceCapabilities.js

@@ -1,150 +1,396 @@
-import { Observer } from '@webqit/observer';
+import { Observer, ListenerRegistry, Descriptor } from '@webqit/observer';
 
 export class DeviceCapabilities {
 
-    #runtime;
     #params;
 
     #exposed = {};
     get exposed() { return this.#exposed; }
 
-    #cleanups = [];
+    static async recognizesPermission(q) {
+        try {
+            await navigator.permissions.query(this.resolveQuery(q));
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
 
-    static async initialize(runtime, params) {
-        const instance = new this;
+    static resolveQuery(q) {
+        if (typeof q === 'string') {
+            q = { name: q };
+        } else q = { ...q };
+        if (q.name === 'push' && !q.userVisibleOnly) {
+            q = { ...q, userVisibleOnly: true };
+        }
+        if (q.name === 'top-level-storage-access' && !q.requestedOrigin) {
+            q = { ...q, requestedOrigin: window.location.origin };
+        }
+        return q;
+    }
 
-        instance.#runtime = runtime;
-        instance.#params = params;
+    constructor(params = {}) {
+        this.#params = params;
 
-        // --------
-        // Custom install
-        const onbeforeinstallprompt = (e) => {
-            if (instance.#params.custom_install && instance.#exposed.custom_install !== 'granted') {
-                e.preventDefault();
-                Observer.set(instance.#exposed, 'custom_install', e);
+        if (Array.isArray(this.#params.exposed) && this.#params.exposed.length) {
+            for (const capName of this.#params.exposed) {
+                const queryName = capName.trim().replace(/_/g, '-');
+                const capInstance = this.query(queryName);
+                this.#exposed[capName] = capInstance;
             }
+        }
+    }
+
+    close() {
+        this.#capInstances.forEach((c) => c.dispose());
+    }
+
+    #capInstances = new Map;
+
+    query(query) {
+        const _q = this.constructor.resolveQuery(query);
+
+        if (this.#capInstances.has(_q.name)) {
+            return this.#capInstances.get(_q.name);
+        }
+
+        let capInstance;
+        switch (_q.name) {
+            case 'pwa-install':
+                capInstance = new PWAInstallCapability;
+            case 'geolocation':
+                capInstance = new GeolocationCapability;
+            case 'notification':
+                //capInstance = new NotificationCapability;
+            case 'push':
+                //capInstance = new PushCapability;
+            case 'storage-access':
+                //capInstance = new StorageAccessCapability;
+        }
+
+        this.#capInstances.set(_q.name, capInstance);
+
+        return capInstance;
+    }
+}
+
+/**
+ * DeviceCapability
+ */
+
+class DeviceCapability {
+
+    #listenersRegistry;
+    _cleanups = [];
+
+    constructor() {
+        this.#listenersRegistry = ListenerRegistry.getInstance(this, true);
+    }
+
+    _fire(props, exec) {
+        const oldValues = {};
+        for (const prop of props) {
+            oldValues[prop] = this[prop];
+        }
+
+        if (exec) exec();
+
+        const descriptors = props.map((prop) => {
+            return new Descriptor(this, {
+                type: 'set',
+                key: prop,
+                value: this[prop],
+                oldValue: oldValues[prop],
+                isUpdate: true,
+                related: props.slice(),
+                operation: 'set',
+                detail: null,
+            });
+        });
+
+        this.#listenersRegistry.emit(descriptors);
+    }
+
+    dispose() {
+        this._cleanups.forEach((c) => c());
+    }
+}
+
+/**
+ * PWAInstallCapability
+ */
+
+class PWAInstallCapability extends DeviceCapability {
+
+    #status = 'unknown';
+    #displayMode = null;
+
+    get status() { return this.#status; }
+    get displayMode() { return this.#displayMode; }
+
+    #pwaInstallEvent;
+
+    constructor() {
+        super();
+
+        // --------------- beforeinstallprompt event
+
+        const onbeforeinstallprompt = (e) => {
+            this.#pwaInstallEvent = e;
+            this.#pwaInstallEvent.preventDefault();
+            this._fire(['status'], () => {
+                this.#status = 'prompt-available';
+            });
         };
+
         window.addEventListener('beforeinstallprompt', onbeforeinstallprompt);
-        instance.#cleanups.push(() => window.removeEventListener('beforeinstallprompt', onbeforeinstallprompt));
-        // --------
-        // Webhooks
-        if (instance.#runtime.env('GENERIC_PUBLIC_WEBHOOK_URL')) {
-            // --------
-            // app.installed
-            const onappinstalled = () => {
-                fetch(instance.#runtime.env('GENERIC_PUBLIC_WEBHOOK_URL'), {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ type: 'app.installed', data: true })
-                }).catch(() => {});
+        this._cleanups.push(() => window.removeEventListener('beforeinstallprompt', onbeforeinstallprompt));
+
+        // --------------- appinstalled event
+
+        const onappinstalled = async () => {
+            this._fire(['status'], () => {
+                this.#status = 'installed';
+            });
+        };
+
+        window.addEventListener('appinstalled', onappinstalled);
+        this._cleanups.push(() => window.removeEventListener('appinstalled', onappinstalled));
+
+        // --------------- displayMode
+
+        const _setDisplayMode = (dm) => {
+            this._fire(['displayMode'], () => {
+                this.#displayMode = dm;
+            });
+        };
+
+        const handleDisplayMode = () => {
+            if (document.referrer.startsWith('android-app://')) {
+                _setDisplayMode('twa');
+                return;
+            }
+
+            for (const dm of ['browser', 'standalone', 'minimal-ui', 'fullscreen', 'window-controls-overlay']) {
+                const mediaQuery = window.matchMedia(`(display-mode: ${dm})`);
+
+                if (mediaQuery.matches) {
+                    _setDisplayMode(dm);
+
+                    mediaQuery.addEventListener('change', handleDisplayMode, { once: true });
+                    this._cleanups.push(() => mediaQuery.removeEventListener('change', handleDisplayMode));
+
+                    return;
+                }
+            }
+        };
+
+        handleDisplayMode();
+    }
+
+    async prompt() {
+        if (!this.#pwaInstallEvent) return;
+
+        await this.#pwaInstallEvent.prompt?.();
+        const { outcome } = await this.#pwaInstallEvent.userChoice;
+
+        this._fire(['status'], () => {
+            this.#status = outcome;
+        });
+
+        this.#pwaInstallEvent = null;
+    }
+}
+
+/**
+ * GeolocationCapability
+ */
+
+class GeolocationCapability extends DeviceCapability {
+
+    #status = !navigator.geolocation ? 'unsupported' : 'unknown';
+    get status() { return this.#status; }
+
+    constructor() {
+        super();
+        if (!navigator.geolocation) return;
+
+        navigator.permissions.query({ name: 'geolocation' }).then((permissionStatus) => {
+            const handleChange = () => {
+                this._fire(['status'], () => {
+                    this.#status = permissionStatus.state;
+                });
+                if (permissionStatus.state === 'granted') {
+                    this.#initEnqueued();
+                }
             };
-            window.addEventListener('appinstalled', onappinstalled);
-            instance.#cleanups.push(() => window.removeEventListener('appinstalled', onappinstalled));
-            // --------
-            // push.subscribe/unsubscribe
-            if (instance.#params.webpush) {
-                try {
-                    const pushPermissionStatus = await navigator.permissions.query({ name: 'push', userVisibleOnly: true });
-                    const pushPermissionStatusHandler = async () => {
-                        const pushManager = (await navigator.serviceWorker.getRegistration()).pushManager;
-                        const eventPayload = pushPermissionStatus.state === 'granted'
-                            ? { type: 'push.subscribe', data: await pushManager.getSubscription() }
-                            : { type: 'push.unsubscribe' };
-                        if (eventPayload.type === 'push.subscribe' && !eventPayload.data) {
-                            return window.queueMicrotask(pushPermissionStatusHandler);
-                        }
-                        fetch(instance.#runtime.env('GENERIC_PUBLIC_WEBHOOK_URL'), {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify(eventPayload)
-                        }).catch(() => {});
+
+            handleChange();
+            permissionStatus.addEventListener('change', handleChange);
+            this._cleanups.push(() => permissionStatus.removeEventListener('change', handleChange));
+        });
+    }
+
+    #queryQueue = new Set;
+
+    #initEnqueued() {
+        this.#queryQueue.forEach((cb) => cb());
+        this.#queryQueue.clear();
+    }
+
+    async read({ live = false, ...options } = {}) {
+        const _options = {
+            enableHighAccuracy: true,
+            ...options
+        };
+
+        const process = () => {
+            return new Promise((res) => {
+                const locationData = {};
+                let resolved = false;
+
+                const successCallback = (pos) => {
+                    let coords = pos.coords.toJSON();
+                    
+                    if (!options.detailed) {
+                        coords = {
+                            lng: coords.longitude,
+                            lat: coords.latitude
+                        };
                     }
-                    pushPermissionStatus.addEventListener('change', pushPermissionStatusHandler);
-                    instance.#cleanups.push(() => pushPermissionStatus.removeEventListener('change', pushPermissionStatusHandler));
-                } catch(e) {}
-            }
-        }
-        // --------
-        // Exposure
-        if (Array.isArray(instance.#params.exposed) && instance.#params.exposed.length) {
-            const [permissions, cleanup] = await instance.query(instance.#params.exposed.map((s) => s.trim()), true);
-            instance.#exposed = permissions;
-            instance.#cleanups.push(cleanup);
-        }
-        
-        return instance;
-    }
-
-    async query(query, live = false) {
-        const permissions = {}, cleanups = [];
-        for (let q of [].concat(query)) {
-            q = this.resolveQuery(q);
-            // ------
-            // Display mode
-            if (q.name === 'display-mode') {
-                const handleDisplayMode = () => {
-                    if (document.referrer.startsWith('android-app://')) {
-                        Observer.set(permissions, 'display_mode', 'twa');
-                        return;
+
+                    if (!Object.keys(coords).every((n) => coords[n] === locationData[n])) {
+                        Observer.set(locationData, coords);
                     }
-                    for (const dm of ['browser', 'standalone', 'minimal-ui', 'fullscreen', 'window-controls-overlay']) {
-                        const mediaQuery = window.matchMedia(`(display-mode: ${dm})`);
-                        if (mediaQuery.matches) {
-                            Observer.set(permissions, 'display_mode', dm);
-                            if (live) {
-                                mediaQuery.addEventListener('change', handleDisplayMode, { once: true });
-                                cleanups.push(() => mediaQuery.removeEventListener('change', handleDisplayMode));
-                            }
-                            return;
-                        }
+
+                    if (!resolved) {
+                        res(locationData);
+                        resolved = true;
                     }
                 };
-                handleDisplayMode();
-                continue;
-            }
-            // ------
-            // Others
-            try {
-                const permissionStatus = await navigator.permissions.query(q);
-                permissions[permissionStatus.name.replace(/-/g, '_')] = permissionStatus.state;
+
+                const errrorCallback = (e) => {
+                    console.error(e);
+                };
+
                 if (live) {
-                    const onchange = () => {
-                        Observer.set(permissions, permissionStatus.name.replace(/-/g, '_'), permissionStatus.state);
-                    };
-                    permissionStatus.addEventListener('change', onchange);
-                    cleanups.push(() => permissionStatus.removeEventListener('change', onchange));
+                    const watchID = navigator.geolocation.watchPosition(
+                        successCallback,
+                        errrorCallback,
+                        _options
+                    );
+
+                    this._cleanups.push(() => navigator.geolocation.clearWatch(watchID));
+                    if (_options.signal) {
+                        _options.signal.addEventListener('abort', () => navigator.geolocation.clearWatch(watchID));
+                    }
+                } else {
+                    navigator.geolocation.getCurrentPosition(
+                        successCallback,
+                        errrorCallback,
+                        _options
+                    );
                 }
-            } catch(e) {
-                permissions[q.name.replace(/-/g, '_')] = 'unsupported';
-                console.log(e);
+            });
+        };
+
+        if (this.status !== 'granted') {
+            if (live) {
+                return new Promise((res) => {
+                    const handle = async () => {
+                        const liveData = await process();
+                        res(liveData);
+                    };
+
+                    this.#queryQueue.add(handle);
+                });
             }
+
+            return null;
         }
-        if (live) {
-            return [
-                permissions,
-                () => cleanups.forEach((c) => c())
-            ];
-        }
-        return permissions;
-    }
-
-    async request(name, params = {}) {
-        params = this.resolveRequest(name, params);
-        // ------
-        // install
-        if (name === 'install') {
-            let returnValue;
-            if (this.#exposed.custom_install === 'granted') return;
-            if (this.#exposed.custom_install) {
-                returnValue = await this.#exposed.custom_install.prompt?.();
-                const { outcome } = await this.#exposed.custom_install.userChoice;
-                if (outcome === 'dismissed') return;
+
+        return await process();
+    }
+
+    prompt() {
+        if (this.status === 'granted') return;
+
+        navigator.geolocation.getCurrentPosition(
+            () => { },
+            () => { },
+        );
+    }
+
+    dispose() {
+        this.#queryQueue.clear();
+        super.dispose();
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+/*
+
+
+
+// Public base64 to Uint
+function urlBase64ToUint8Array(base64String) {
+    const padding = '='.repeat((4 - base64String.length % 4) % 4);
+    const base64 = (base64String + padding)
+        .replace(/\-/g, '+')
+        .replace(/_/g, '/');
+    const rawData = window.atob(base64);
+    const outputArray = new Uint8Array(rawData.length);
+    for (let i = 0; i < rawData.length; ++i) {
+        outputArray[i] = rawData.charCodeAt(i);
+    }
+    return outputArray;
+}
+
+
+
+
+
+async #initWebpush() {
+    if (!this.#runtime?.env('GENERIC_PUBLIC_WEBHOOK_URL')) return;
+
+    try {
+        const pushPermissionStatus = await navigator.permissions.query({ name: 'push', userVisibleOnly: true });
+        const pushPermissionStatusHandler = async () => {
+            const reg = await navigator.serviceWorker.ready;
+            const pushManager = reg.pushManager;
+
+            const eventPayload = pushPermissionStatus.state === 'granted'
+                ? { type: 'push.subscribe', data: await pushManager.getSubscription() }
+                : { type: 'push.unsubscribe' };
+
+            if (eventPayload.type === 'push.subscribe' && !eventPayload.data) {
+                return window.queueMicrotask(pushPermissionStatusHandler);
             }
-            Observer.set(this.#exposed, 'custom_install', 'granted');
-            return returnValue;
+
+            await fetch(this.#runtime.env('GENERIC_PUBLIC_WEBHOOK_URL'), {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(eventPayload),
+            }).catch(() => { });
         }
-        // ------
-        // notification
+
+        pushPermissionStatus.addEventListener('change', pushPermissionStatusHandler);
+        this.#cleanups.push(() => pushPermissionStatus.removeEventListener('change', pushPermissionStatusHandler));
+    } catch (e) { }
+}
+
+
+
+// notification
         if (name === 'notification') {
             return await new Promise(async (resolve, reject) => {
                 const permissionResult = Notification.requestPermission(resolve);
@@ -153,36 +399,16 @@ export class DeviceCapabilities {
                 }
             });
         }
-        // ------
-        // push
+
+        // webpush
         if (name === 'push') {
-            const pushManager = (await navigator.serviceWorker.getRegistration()).pushManager;
+            const reg = await navigator.serviceWorker.ready;
+            const pushManager = reg.pushManager;
             const subscription = (await pushManager.getSubscription()) || await pushManager.subscribe(params);
             return subscription;
         }
-    }
 
-    async supports(q) {
-        try {
-            await navigator.permissions.query(this.resolveQuery(q));
-            return true;
-        } catch(e) {
-            return false;
-        }
-    }
 
-    resolveQuery(q) {
-        if (typeof q === 'string') {
-            q = { name: q };
-        }
-        if (q.name === 'push' && !q.userVisibleOnly) {
-            q = { ...q, userVisibleOnly: true };
-        }
-        if (q.name === 'top-level-storage-access' && !q.requestedOrigin) {
-            q = { ...q, requestedOrigin: window.location.origin };
-        }
-        return q;
-    }
 
     resolveRequest(name, params = {}) {
         if (name === 'push') {
@@ -195,22 +421,4 @@ export class DeviceCapabilities {
         }
         return params;
     }
-
-    close() {
-        this.#cleanups.forEach((c) => c());
-    }
-}
-
-// Public base64 to Uint
-function urlBase64ToUint8Array(base64String) {
-    const padding = '='.repeat((4 - base64String.length % 4) % 4);
-    const base64 = (base64String + padding)
-        .replace(/\-/g, '+')
-        .replace(/_/g, '/');
-    const rawData = window.atob(base64);
-    const outputArray = new Uint8Array(rawData.length);
-    for (let i = 0; i < rawData.length; ++i) {
-        outputArray[i] = rawData.charCodeAt(i);
-    }
-    return outputArray;
-}
+*/

package/src/webflo-runtime/webflo-client/WebfloClient.js

@@ -55,7 +55,11 @@ export class WebfloClient extends AppRuntime {
             rel: 'unrelated',
             phase: 0
         };
-        this.#background = new StarPort({ handshake: 1, autoClose: false });
+        this.#background = new StarPort({
+            handshake: 1,
+            postAwaitsOpen: false/* new additions shouldn't inherit old, initial messages */,
+            autoClose: false
+        });
     }
 
     async initialize() {

package/src/webflo-runtime/webflo-client/WebfloRootClientA.js

@@ -9,12 +9,6 @@ import { WebfloHMR } from './webflo-devmode.js';
 
 export class WebfloRootClientA extends WebfloClient {
 
-	static get Workport() { return ClientSideWorkport; }
-
-	static get DeviceCapabilities() { return DeviceCapabilities; }
-
-	static get DeviceViewport() { return DeviceViewport; }
-
 	static create(bootstrap, host) {
 		return new this(bootstrap, host);
 	}
@@ -77,16 +71,15 @@ export class WebfloRootClientA extends WebfloClient {
 		const cleanups = [];
 		instanceController.signal.addEventListener('abort', () => cleanups.forEach((c) => c()), { once: true });
 
-		// DeviceViewport, DeviceCapabilities, & Service Worker
-
-		this.#viewport = new this.constructor.DeviceViewport();
+		this.#viewport = new DeviceViewport();
 
-		this.#capabilities = await this.constructor.DeviceCapabilities.initialize(this, this.config.CLIENT.capabilities);
+		this.#capabilities = new DeviceCapabilities(this.config.CLIENT.capabilities, this);
+		await this.#capabilities.ready;
 		cleanups.push(() => this.#capabilities.close());
 
 		if (this.config.CLIENT.capabilities?.service_worker) {
 			const { filename, ...restServiceWorkerParams } = this.config.WORKER;
-			this.constructor.Workport.initialize(null, filename, restServiceWorkerParams).then((workport) => {
+			ClientSideWorkport.initialize(null, filename, restServiceWorkerParams).then((workport) => {
 				this.#workport = workport;
 				cleanups.push(() => this.#workport.close());
 			});

package/src/webflo-runtime/webflo-client/WebfloRootClientB.js

@@ -5,8 +5,10 @@ export class WebfloRootClientB extends WebfloRootClientA {
 
 	control() {
 		const instanceController = super.controlSuper/*IMPORTANT*/();
+
 		// Detect source elements
 		let navigationOrigins = [];
+
         // Capture all link-clicks
 		const clickHandler = (e) => {
 			if (!this._canIntercept(e) || e.defaultPrevented) return;
@@ -14,11 +16,13 @@ export class WebfloRootClientB extends WebfloRootClientA {
 			if (!anchorEl || !anchorEl.href || anchorEl.target) return;
 			navigationOrigins = [anchorEl, null, anchorEl.closest('[navigationcontext]')];
 		};
+
         // Capture all form-submits
 		const submitHandler = (e) => {
 			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
 		const navigateHandler = (e) => {
 			if (!e.canIntercept 
@@ -47,6 +51,7 @@ export class WebfloRootClientB extends WebfloRootClientA {
 				info
 			};
 			navigationOrigins = [];
+
 			// Traversal?
 			// Push
 			const url = new URL(destination.url, this.location.href);
@@ -55,6 +60,7 @@ export class WebfloRootClientB extends WebfloRootClientA {
 				body: formData,
 				//signal TODO: auto-aborts on a redirect response which thus fails to parse
 			};
+
 			const runtime = this;
 			e.intercept({
 				scroll: 'after-transition',
@@ -64,10 +70,12 @@ export class WebfloRootClientB extends WebfloRootClientA {
 				},
 			});
 		};
+
 		window.addEventListener('click', clickHandler, { signal: instanceController.signal });
 		window.addEventListener('submit', submitHandler, { signal: instanceController.signal });
 		window.navigation.addEventListener('navigate', navigateHandler, { signal: instanceController.signal });
-        return instanceController;
+        
+		return instanceController;
 	}
 
     reload(params) {