@webqit/webflo 1.0.19 → 1.0.21

package/src/runtime-pi/WebfloRuntime.js

@@ -2,6 +2,11 @@ import { _isObject } from '@webqit/util/js/index.js';
 
 export class WebfloRuntime {
 
+    async setup(httpEvent) {
+        const router = new this.constructor.Router(this.cx, httpEvent.url.pathname);
+        return await router.route(['SETUP'], httpEvent);
+    }
+
     async dispatch(httpEvent, context, crossLayerFetch) {
         const requestLifecycle = {};
         requestLifecycle.responsePromise = new Promise(async (res) => {
@@ -25,16 +30,16 @@ export class WebfloRuntime {
         return await requestLifecycle.responsePromise;
    }
 
-    async normalizeResponse(httpEvent, response, forceCommit = false) {
+    async normalizeResponse(httpEvent, response) {
         // Normalize response
         if (!(response instanceof Response)) {
             response = typeof response === 'undefined'
                 ? new Response(null, { status: 404 })
                 : Response.create(response);
         }
-        // Commit data
-        for (const storage of [httpEvent.cookies, httpEvent.session, httpEvent.storage]) {
-            await storage?.commit?.(response, forceCommit);
+        // Commit data in the exact order. Reason: in how they depend on each other
+        for (const storage of [httpEvent.user, httpEvent.session, httpEvent.cookies]) {
+            await storage?.commit?.(response);
         }
         return response;
     }

package/src/runtime-pi/WebfloStorage.js

@@ -1,46 +1,109 @@
 import { _isObject } from '@webqit/util/js/index.js';
 import { _even } from '@webqit/util/obj/index.js';
 
-export class WebfloStorage extends Map {
+export class WebfloStorage {
     
     #request;
     #session;
+    #registry;
+    #key;
+    #store;
 
-    constructor(request, session, iterable = []) {
-        super(iterable);
+    constructor(registry, key, request, session = null) {
+        this.#registry = registry;
+        this.#key = key;
         this.#request = request;
         this.#session = session === true ? this : session;
     }
     
-    #originals;
-    saveOriginals() { this.#originals = new Map(this); }
-
-    getDeleted() {
-        if (!this.#originals) return [];
-        return [...this.#originals.keys()].filter((k) => {
-            return !this.has(k);
-        });
+    async store() {
+        if (!this.#key) {
+            return this.#registry;
+        }
+        if (!this.#store && !(this.#store = await this.#registry.get(this.#key))) {
+            this.#store = {};
+            await this.#registry.set(this.#key, this.#store);
+        }
+        return this.#store;
+    }
+
+    async commit() {
+        if (!this.#store || !this.#key) return;
+        await this.#registry.set(this.#key, this.#store);
+    }
+
+    get size() { return this.store().then((store) => Object.keys(store).length); }
+
+    [ Symbol.iterator ]() { return this.entries().then((entries) => entries[ Symbol.iterator ]()); }
+
+    async json(arg = null) {
+        if (!arguments.length || typeof arg === 'boolean') {
+            return { ...(await this.store()) };
+        }
+        if (!_isObject(arg)) {
+            throw new Error(`Argument must be a valid JSON object`);
+        }
+        return await Promise.all(Object.entries(arg).map(([key, value]) => {
+            return this.set(key, value);
+        }));
+    }
+
+    async get(key) { return Reflect.get(await this.store(), key); }
+
+    async has(key) { return Reflect.has(await this.store(), key); }
+
+    async keys() { return Object.keys(await this.store()); }
+
+    async values() { return Object.values(await this.store()); }
+
+    async entries() { return Object.entries(await this.store()); }
+
+    async forEach(callback) { (await this.entries()).forEach(callback); }
+
+    async set(key, value) {
+        Reflect.set(await this.store(), key, value);
+        await this.emit(key, value);
+        return this;
+    }
+
+    async delete(key) {
+        Reflect.deleteProperty(await this.store(), key);
+        await this.emit(key);
+        return this;
     }
 
-    getAdded() {
-        if (!this.#originals) return [...this.keys()];
-        return [...new Set([...this.keys(), ...this.#originals.keys()])].filter((k) => {
-            return !this.#originals.has(k) || (this.has(k) && ((a, b) => _isObject(a) && _isObject(b) ? !_even(a, b) : a !== b)(this.get(k, true), this.#originals.get(k)));
-        });
+    async clear() {
+        for (const key of await this.keys()) {
+            Reflect.deleteProperty(await this.store(), key);
+        }
+        await this.emit();
+        return this;
     }
 
-    commit() {
-        this.saveOriginals();
+    #listeners = new Set;
+    observe(attr, handler) {
+        const args = { attr, handler };
+        this.#listeners.add(args);
+        return () => {
+            this.#listeners.delete(args);
+        }
+    }
+
+    async emit(attr, value) {
+        const returnValues = [];
+        for (const { attr: $attr, handler } of this.#listeners) {
+            if (arguments.length && $attr !== attr) continue;
+            if (arguments.length > 1) {
+                returnValues.push(handler(value));
+            } else {
+                returnValues.push(handler());
+            }
+        }
+        return Promise.all(returnValues);
     }
 
     #handlers = new Map;
-    #reverseHandlers = new Map;
     defineHandler(attr, ...handlers) {
-        let registry = this.#handlers;
-        if (handlers[0] === false) {
-            registry = this.#reverseHandlers;
-            handlers.shift();
-        }
         const $handlers = [];
         for (let handler of handlers) {
             if (typeof handler === 'function') {
@@ -52,21 +115,15 @@ export class WebfloStorage extends Map {
             }
             $handlers.push(handler);
         }
-        registry.set(attr, $handlers);
-    }
-
-    defineReverseHandler(attr, ...handlers) {
-        return this.defineHandler(attr, false, ...handlers);
+        this.#handlers.set(attr, $handlers);
     }
 
     getHandlers() { return this.#handlers; }
 
-    getReverseHandlers() { return this.#reverseHandlers; }
-
     async require(attrs, callback = null, noNulls = false) {
         const entries = [];
         main: for await (const attr of [].concat(attrs)) {
-            if (!this.has(attr) || (noNulls && [undefined, null].includes(this.get(attr)))) {
+            if (!(await this.has(attr)) || (noNulls && [undefined, null].includes(await this.get(attr)))) {
                 const handlers = this.#handlers.get(attr);
                 if (!handlers) {
                     throw new Error(`No handler defined for the user attribute: ${attr}`);
@@ -94,14 +151,14 @@ export class WebfloStorage extends Map {
                         }
                         const messageID = (0 | Math.random() * 9e6).toString(36);
                         urlRewrite.searchParams.set('redirect-message', messageID);
-                        this.#session.set(`redirect-message:${messageID}`, { status: { type: handler.type || 'info', message: handler.message }});
+                        await this.#session.set(`redirect-message:${messageID}`, { status: { type: handler.type || 'info', message: handler.message }});
                     }
                     return new Response(null, { status: 302, headers: {
                         Location: urlRewrite
                     }});
                 }
             }
-            entries.push(this.get(attr));
+            entries.push(await this.get(attr));
         }
         if (callback) return await callback(...entries);
         return entries;

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

@@ -0,0 +1,211 @@
+const { Observer } = webqit;
+
+export class Capabilities {
+
+    #params;
+
+    #exposed = {};
+    get exposed() { return this.#exposed; }
+
+    #cleanups = [];
+
+    static async initialize(params) {
+        const instance = new this;
+        instance.#params = params;
+        instance.#params.generic_public_webhook_url = instance.#params.generic_public_webhook_url_variable && instance.#params.env[instance.#params.generic_public_webhook_url_variable];
+        instance.#params.vapid_public_key = instance.#params.vapid_public_key_variable && instance.#params.env[instance.#params.vapid_public_key_variable];
+        // --------
+        // Custom install
+        const onbeforeinstallprompt = (e) => {
+            if (instance.#params.custom_install && instance.#exposed.custom_install !== 'granted') {
+                e.preventDefault();
+                Observer.set(instance.#exposed, 'custom_install', e);
+            }
+        };
+        window.addEventListener('beforeinstallprompt', onbeforeinstallprompt);
+        instance.#cleanups.push(() => window.removeEventListener('beforeinstallprompt', onbeforeinstallprompt));
+        // --------
+        // Webhooks
+        if (instance.#params.generic_public_webhook_url) {
+            // --------
+            // app.installed
+            const onappinstalled = () => {
+                fetch(instance.#params.generic_public_webhook_url, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ type: 'app.installed', data: true })
+                }).catch(() => {});
+            };
+            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.#params.generic_public_webhook_url, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(eventPayload)
+                        }).catch(() => {});
+                    }
+                    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;
+                    }
+                    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;
+                        }
+                    }
+                };
+                handleDisplayMode();
+                continue;
+            }
+            // ------
+            // Others
+            try {
+                const permissionStatus = await navigator.permissions.query(q);
+                permissions[permissionStatus.name.replace(/-/g, '_')] = permissionStatus.state;
+                if (live) {
+                    const onchange = () => {
+                        Observer.set(permissions, permissionStatus.name.replace(/-/g, '_'), permissionStatus.state);
+                    };
+                    permissionStatus.addEventListener('change', onchange);
+                    cleanups.push(() => permissionStatus.removeEventListener('change', onchange));
+                }
+            } catch(e) {
+                permissions[q.name.replace(/-/g, '_')] = 'unsupported';
+                console.log(e);
+            }
+        }
+        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?.();
+            }
+            Observer.set(this.#exposed, 'custom_install', 'granted');
+            return returnValue;
+        }
+        // ------
+        // notification
+        if (name === 'notification') {
+            return await new Promise(async (resolve, reject) => {
+                const permissionResult = Notification.requestPermission(resolve);
+                if (permissionResult) {
+                    permissionResult.then(resolve, reject);
+                }
+            });
+        }
+        // ------
+        // push
+        if (name === 'push') {
+            const pushManager = (await navigator.serviceWorker.getRegistration()).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') {
+            if (!params.userVisibleOnly) {
+                params = { ...params, userVisibleOnly: true };
+            }
+            if (!params.applicationServerKey && this.#params.vapid_public_key) {
+                params = { ...params, applicationServerKey: urlBase64ToUint8Array(this.#params.vapid_public_key) };
+            }
+        }
+        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/runtime-pi/client/CookieStorage.js

@@ -8,10 +8,10 @@ export class CookieStorage extends WebfloCookieStorage {
         );
     }
 
-    commit(response) {
-        for (const cookieStr of this.render()) {
+    async commit(response) {
+        for (const cookieStr of await this.render()) {
             document.cookie = cookieStr;
         }
-        super.commit();
+        await super.commit();
     }
 }

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

@@ -1,33 +1,16 @@
 import { WebfloStorage } from '../WebfloStorage.js';
 
 export class SessionStorage extends WebfloStorage {
-    static get type() { return 'session'; }
-
     static create(request) {
-        const keys = [];
-        const storeType = this.type === 'user' ? 'localStorage' : 'sessionStorage';
-		for(let i = 0; i < window[storeType].length; i ++){
-			keys.push(window[storeType].key(i));
-		};
-        const instance = new this(
+        const registry = {
+            async get(key) { return localStorage.getItem(key) },
+            async set(key, value) { return localStorage.setItem(key, value) },
+        };
+        return new this(
+            registry,
+            'session',
             request,
-            keys.map((key) => [key, window[storeType].getItem(key)])
+            true
         );
-        return instance;
-    }
-
-    constructor(request, iterable) {
-        super(request, true, iterable);
-    }
-
-    commit() {
-        const storeType = this.constructor.type === 'user' ? 'localStorage' : 'sessionStorage';
-        for (const key of this.getAdded()) {
-            window[storeType].setItem(key, this.get(key));
-        }
-        for (const key of this.getDeleted()) {
-            window[storeType].removeItem(key);
-        }
-        super.commit();
     }
 }

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

@@ -32,9 +32,6 @@ export class WebfloClient extends WebfloRuntime {
     #host;
     get host() { return this.#host; }
 
-    #network;
-    get network() { return this.#network; }
-
     #location;
     get location() { return this.#location; }
 
@@ -55,7 +52,6 @@ export class WebfloClient extends WebfloRuntime {
         super();
         this.#host = host;
         Object.defineProperty(this.host, 'webfloRuntime', { get: () => this });
-        this.#network = { status: window.navigator.onLine };
         this.#location = new Url/*NOT URL*/(this.host.location);
         this.#navigator = {
             requesting: null,
@@ -72,7 +68,7 @@ export class WebfloClient extends WebfloRuntime {
         };
     }
 
-    initialize() {
+    async initialize() {
 		this.#backgroundMessaging = new MultiportMessagingAPI(this, { runtime: this });
         // Bind response and redirect handlers
         const responseHandler = (e) => {
@@ -92,19 +88,13 @@ export class WebfloClient extends WebfloRuntime {
                 });
             }, 10);
         };
-        this.backgroundMessaging.handleMessages('response', responseHandler);
-        this.backgroundMessaging.handleMessages('redirect', responseHandler);
-        // Bind network status handlers
-        const onlineHandler = () => Observer.set(this.network, 'status', window.navigator.onLine);
-        window.addEventListener('online', onlineHandler);
-        window.addEventListener('offline', onlineHandler);
-        // Start controlling
-        const uncontrols = this.control();
+        const responseHandler1Cleanup = this.backgroundMessaging.handleMessages('response', responseHandler);
+        const responseHandler2Cleanup = this.backgroundMessaging.handleMessages('redirect', responseHandler);
+        const controlCleanup = this.control();
         return () => {
-            this.#backgroundMessaging.close();
-            window.removeEventListener('online', onlineHandler);
-            window.removeEventListener('offline', onlineHandler);
-            uncontrols();
+            responseHandler1Cleanup();
+            responseHandler2Cleanup();
+            controlCleanup();
         };
     }
 
@@ -128,7 +118,7 @@ export class WebfloClient extends WebfloRuntime {
         // -----------------------
         // Capture all link-clicks
         const clickHandler = (e) => {
-            if (!this._canIntercept(e)) return;
+            if (!this._canIntercept(e) || e.defaultPrevented) return;
             var anchorEl = e.target.closest('a');
             if (!anchorEl || !anchorEl.href || (anchorEl.target && !anchorEl.target.startsWith('_webflo:')) || anchorEl.download || !this.isSpaRoute(anchorEl)) return;
             const resolvedUrl = new URL(anchorEl.hasAttribute('href') ? anchorEl.getAttribute('href') : '', this.location.href);
@@ -176,7 +166,7 @@ export class WebfloClient extends WebfloRuntime {
         // -----------------------
         // Capture all form-submits
         const submitHandler = (e) => {
-            if (!this._canIntercept(e)) return;
+            if (!this._canIntercept(e) || e.defaultPrevented) return;
             // ---------------
             // Declare form submission modifyers
             const form = e.target.closest('form');
@@ -348,8 +338,10 @@ export class WebfloClient extends WebfloRuntime {
             cookies: scope.cookies,
             session: scope.session,
             user: scope.user,
-            client: scope.clientMessaging
+            client: scope.clientMessaging,
+            sdk: {}
         });
+        await this.setup(scope.httpEvent);
         scope.httpEvent.onRequestClone = () => this.createRequest(scope.url, scope.init);
         // Ste pre-request states
         Observer.set(this.navigator, {
@@ -385,11 +377,11 @@ export class WebfloClient extends WebfloRuntime {
         });
         // ---------------
         // Response processing
-        scope.hasBackgroundActivity = scope.clientMessaging.isMessaging() || scope.eventLifecyclePromises.size || (scope.redirectMessage && !(scope.response instanceof Response && scope.response.headers.get('Location')));
         scope.response = await this.normalizeResponse(scope.httpEvent, scope.response);
+        scope.hasBackgroundActivity = scope.clientMessaging.isMessaging() || scope.eventLifecyclePromises.size || (scope.redirectMessage && !scope.response.headers.get('Location'));
         if (scope.response.headers.get('Location')) {
             if (scope.redirectMessage) {
-                scope.session.set(`redirect-message:${scope.redirectMessageID}`, scope.redirectMessage);
+                await scope.session.set(`redirect-message:${scope.redirectMessageID}`, scope.redirectMessage);
             }
 		} else {
 			if (scope.redirectMessage) {
@@ -539,8 +531,8 @@ export class WebfloClient extends WebfloRuntime {
                     navigator: this.navigator,
                     location: this.location,
                     network: this.network, // request, redirect, error, status, remote
+                    capabilities: this.capabilities,
                     transition: this.transition,
-                    background: null
                 }, { diff: true, merge });
                 let overridenKeys;
                 if (_isObject(data) && (overridenKeys = ['env', 'navigator', 'location', 'network', 'transition', 'background'].filter((k) => k in data)).length) {