@webqit/webflo 0.11.61-0 → 0.20.1

package/src/runtime-pi/{util-url.js → webflo-url/util.js}

@@ -1,147 +1,109 @@
-
-/**
- * @imports
- */
-import { _isString, _isNumeric, _isArray, _isTypeObject } from '@webqit/util/js/index.js';
-if (typeof URLPattern === 'undefined') {
-    await import('urlpattern-polyfill');
-}
-
-export const params = {
-    // Parse a search params string into an object
-    parse(str, delim = '&') {
-        str = str || '';
-        const target = {};
-        (str.startsWith('?') ? str.substr(1) : str)
-            .split(delim).filter(q => q).map(q => q.split('=').map(q => q.trim()))
-            .forEach(q => this.set(target, q[0], decodeURIComponent(q[1])));
-        return target;
-    },
-    // Stringify an object into a search params string
-    stringify(targetObject, delim = '&') {
-        const q = [];
-        Object.keys(targetObject).forEach(key => {
-            this.reduceValue(targetObject[key], key, (_value, _pathNotation, suggestedKeys = undefined) => {
-                if (suggestedKeys) return suggestedKeys;
-                q.push(`${_pathNotation}=${encodeURIComponent(_value)}`);
-            });
-        });
-        return q.join(delim);
-    },
-
-    // Get value by path notation
-    get(targetObject, pathNotation) {
-        return this.reducePath(pathNotation, targetObject, (key, _targetObject) => {
-            if (!_targetObject && _targetObject !== 0) return;
-            return _targetObject[key];
-        });
-    },
-    // Set value by path notation
-    set(targetObject, pathNotation, value) {
-        this.reducePath(pathNotation, targetObject, function(_key, _targetObject, suggestedBranch = undefined) {
-            let _value = value;
-            if (suggestedBranch) { _value = suggestedBranch; }
-            if (_key === '' && _isArray(_targetObject)) {
-                _targetObject.push(_value);
-            } else {
-                _targetObject[_key] = _value;
-            }
-            return _value;
-        });
-    },
-    
-    // Resolve a value to its leaf nodes
-    reduceValue(value, contextPath, callback) {
-        if (_isTypeObject(value)) {
-            let suggestedKeys = Object.keys(value);
-            let keys = callback(value, contextPath, suggestedKeys);
-            if (_isArray(keys)) {
-                return keys.forEach(key => {
-                    this.reduceValue(value[key], contextPath ? `${contextPath}[${key}]` : key, callback);
-                });
-            }
-        }
-        callback(value, contextPath);
-    },
-    // Resolve a path to its leaf index
-    reducePath(pathNotation, contextObject, callback) {
-        if (_isString(pathNotation) && pathNotation.endsWith(']') && _isTypeObject(contextObject)) {
-            let [ key, ...rest ] = pathNotation.split('[');
-            if (_isNumeric(key)) { key = parseInt(key); }
-            rest = rest.join('[').replace(']', '');
-            let branch;
-            if (key in contextObject) {
-                branch = contextObject[key];
-            } else {
-                let suggestedBranch = rest === '' || _isNumeric(rest.split('[')[0]) ? [] : {};
-                branch = callback(key, contextObject, suggestedBranch);
-            }
-            return this.reducePath(rest, branch, callback);
-        }
-        if (_isNumeric(pathNotation)) { pathNotation = parseInt(pathNotation); }
-        return callback(pathNotation, contextObject);
-    },    
-};
-
-export const path = {
-    join(/* path segments */) {
-        // Split the inputs into a list of path commands.
-        var parts = [], backsteps = 0;
-        for (var i = 0, l = arguments.length; i < l; i++) {
-            parts = parts.concat(arguments[i].split("/"));
-        }
-        // Interpret the path commands to get the new resolved path.
-        var newParts = [];
-        for (i = 0, l = parts.length; i < l; i++) {
-            var part = parts[i];
-            // Remove leading and trailing slashes
-            // Also remove "." segments
-            if (!part || part === ".") continue;
-            // Interpret ".." to pop the last segment
-            if (part === "..") {
-                if (!newParts.length) backsteps ++;
-                else newParts.pop();
-            }
-            // Push new path segments.
-            else newParts.push(part);
-        }
-        // Preserve the initial slash if there was one.
-        if (parts[0] === "") newParts.unshift("");
-        // Turn back into a single string path.
-        return '../'.repeat(backsteps) + newParts.join("/") || (newParts.length ? "/" : ".");
-    },
-    // A simple function to get the dirname of a path
-    // Trailing slashes are ignored. Leading slash is preserved.
-    dirname(path) {
-        return this.join(path, "..");
-    }
-};
-
-export const pattern = (pattern, baseUrl = null) => ({
-    pattern: new URLPattern(pattern, baseUrl),
-    isPattern() {
-        return Object.keys(this.pattern.keys || {}).some(compName => this.pattern.keys[compName].length);
-    },
-    test(...args) { return this.pattern.test(...args) }, 
-    exec(...args) {
-        let components = this.pattern.exec(...args);
-        if (!components) return;
-        components.vars = Object.keys(this.pattern.keys).reduce(({ named, unnamed }, compName) => {
-            this.pattern.keys[compName].forEach(key => {
-                let value = components[compName].groups[key.name];
-                if (typeof key.name === 'number') {
-                    unnamed.push(value);
-                } else {
-                    named[key.name] = value;
-                }
-            });
-            return { named, unnamed };
-        }, { named: {}, unnamed: [] });
-        components.render = str => {
-            return str.replace(/\$(\$|[0-9A-Z]+)/gi, (a, b) => {
-                return b === '$' ? '$' : (_isNumeric(b) ? components.vars.unnamed[b - 1] : components.vars.named[b]) || '';
-            });
-        }
-        return components;
-    }
-});
+import { _isString, _isNumeric, _isArray, _isTypeObject } from '@webqit/util/js/index.js';
+
+export const DeepURLSearchParams = {
+    // Parse a search params string into an object
+    eval(targetObject, str, delim = '&') {
+        str = str || '';
+        (str.startsWith('?') ? str.substr(1) : str)
+            .split(delim).filter(q => q).map(q => q.split('=').map(q => q.trim()))
+            .forEach(q => this.set(targetObject, q[0], decodeURIComponent(q[1])));
+        return targetObject;
+    },
+    // Stringify an object into a search params string
+    stringify(targetObject, delim = '&') {
+        const q = [];
+        Object.keys(targetObject).forEach(key => {
+            this.reduceValue(targetObject[key], key, (_value, _pathNotation, suggestedKeys = undefined) => {
+                if (suggestedKeys) return suggestedKeys;
+                q.push(`${_pathNotation}=${encodeURIComponent(_value)}`);
+            });
+        });
+        return q.join(delim);
+    },
+    // Get value by path notation
+    get(targetObject, pathNotation) {
+        return this.reducePath(pathNotation, targetObject, (key, _targetObject) => {
+            if (!_targetObject && _targetObject !== 0) return;
+            return _targetObject[key];
+        });
+    },
+    // Set value by path notation
+    set(targetObject, pathNotation, value) {
+        this.reducePath(pathNotation, targetObject, function(_key, _targetObject, suggestedBranch = undefined) {
+            let _value = value;
+            if (suggestedBranch) { _value = suggestedBranch; }
+            if (_key === '' && _isArray(_targetObject)) {
+                _targetObject.push(_value);
+            } else {
+                _targetObject[_key] = _value;
+            }
+            return _value;
+        });
+    },
+    
+    // Resolve a value to its leaf nodes
+    reduceValue(value, contextPath, callback) {
+        if (_isTypeObject(value)) {
+            let suggestedKeys = Object.keys(value);
+            let keys = callback(value, contextPath, suggestedKeys);
+            if (_isArray(keys)) {
+                return keys.forEach(key => {
+                    this.reduceValue(value[key], contextPath ? `${contextPath}[${key}]` : key, callback);
+                });
+            }
+        }
+        callback(value, contextPath);
+    },
+    // Resolve a path to its leaf index
+    reducePath(pathNotation, contextObject, callback) {
+        if (_isString(pathNotation) && pathNotation.endsWith(']') && _isTypeObject(contextObject)) {
+            let [ key, ...rest ] = pathNotation.split('[');
+            if (_isNumeric(key)) { key = parseInt(key); }
+            rest = rest.join('[').replace(']', '');
+            let branch;
+            if (key in contextObject) {
+                branch = contextObject[key];
+            } else {
+                let suggestedBranch = rest === '' || _isNumeric(rest.split('[')[0]) ? [] : {};
+                branch = callback(key, contextObject, suggestedBranch);
+            }
+            return this.reducePath(rest, branch, callback);
+        }
+        if (_isNumeric(pathNotation)) { pathNotation = parseInt(pathNotation); }
+        return callback(pathNotation, contextObject);
+    },    
+};
+
+export const path = {
+    join(/* path segments */) {
+        // Split the inputs into a list of path commands.
+        let parts = [], backsteps = 0;
+        for ( let i = 0, l = arguments.length; i < l; i++ ) {
+            parts = parts.concat( arguments[ i ].split( '/' ) );
+        }
+        // Interpret the path commands to get the new resolved path.
+        let newParts = [];
+        for ( let i = 0, l = parts.length; i < l; i++ ) {
+            let part = parts[ i ];
+            // Remove leading and trailing slashes
+            // Also remove "." segments
+            if ( !part || part === '.' ) continue;
+            // Interpret ".." to pop the last segment
+            if ( part === '..' ) {
+                if ( !newParts.length ) backsteps ++;
+                else newParts.pop();
+            }
+            // Push new path segments.
+            else newParts.push( part );
+        }
+        // Preserve the initial slash if there was one.
+        if ( parts[ 0 ] === '' ) newParts.unshift( '' );
+        // Turn back into a single string path.
+        return '../'.repeat( backsteps ) + newParts.join( '/' ) || ( newParts.length ? '/' : '.' );
+    },
+    // A simple function to get the dirname of a path
+    // Trailing slashes are ignored. Leading slash is preserved.
+    dirname( path ) {
+        return this.join( path, '..' );
+    }
+};

package/src/runtime-pi/webflo-url/xURL.js

@@ -0,0 +1,94 @@
+import { _isObject } from '@webqit/util/js/index.js';
+import { Observer } from '@webqit/quantum-js';
+import { DeepURLSearchParams } from './util.js';
+
+export class xURL extends URL {
+	
+	// constructor
+	constructor(...args) {
+		super(...args);
+		const query = DeepURLSearchParams.eval({}, this.search);
+		const updateSearch = () => {
+			// "query" was updated. So we update "search"
+			let search = DeepURLSearchParams.stringify(query);
+			search = search ? '?' + search : '';
+			if (search !== this.search) {
+				this.search = search;
+			}
+		};
+		const $this = this;
+		this._query = new Proxy(query, {
+			set(t, k, v) {
+				t[k] = v;
+				if (!$this._updatingSearch) updateSearch();
+				return true;
+			},
+			deleteProperty(t, k) {
+				delete t[k];
+				if (!$this._updatingSearch) updateSearch();
+				return true;
+			}
+		});
+	}
+
+	// Set search
+	set search(value) {
+		super.search = value;
+		// "search" was updated. So we update "query"
+		this._updatingSearch = true;
+		const query = DeepURLSearchParams.eval({}, value);
+		const keys_a = Object.keys(query);
+		const keys_b = Object.keys(this._query);
+		for (const k of new Set([...keys_a,...keys_b])) {
+			if (!keys_a.includes(k)) delete this.query[k];
+			if (!keys_b.includes(k)) this.query[k] = query[k];
+		}
+		this._updatingSearch = false;
+	}
+
+	// Get search
+	get search() {
+		return super.search;
+	}
+
+	// Get query
+	get query() {
+		return this._query;
+	}
+
+};
+
+xURL.Observable = class extends xURL {
+
+	constructor() {
+		super(...arguments);
+		Observer.accessorize(this, [
+			'protocol', 
+			'username',
+			'password',
+			'host',
+			'hostname',
+			'port',
+			'origin',
+			'pathname',
+			'search',
+			'query',
+			'hash',
+			'href',
+		]);
+	}
+
+};
+
+const _strictEven = (a, b) => {
+	if (_isObject(a) && _isObject(b)) {
+		return _strictEven(Object.keys(a), Object.keys(b)) 
+		&& _strictEven(Object.values(a), Object.values(b));
+	}
+	if (Array.isArray(a) && Array.isArray(b)) {
+		return a.length === b.length 
+		&& a.reduce((recieved, item, i) => recieved && item === b[i], true);
+	}
+	return a === b;
+};
+

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

@@ -0,0 +1,234 @@
+import { _any } from '@webqit/util/arr/index.js';
+import { WebfloRuntime } from '../WebfloRuntime.js';
+import { WQBroadcastChannel } from '../webflo-messaging/WQBroadcastChannel.js';
+import { WorkerSideWorkport } from './WorkerSideWorkport.js';
+import { WorkerSideCookies } from './WorkerSideCookies.js';
+import { HttpSession } from '../webflo-routing/HttpSession.js';
+import { HttpEvent } from '../webflo-routing/HttpEvent.js';
+import { HttpUser } from '../webflo-routing/HttpUser.js';
+import '../webflo-fetch/index.js';
+import '../webflo-url/index.js';
+
+export class WebfloWorker extends WebfloRuntime {
+
+	static get HttpEvent() { return HttpEvent; }
+
+	static get HttpCookies() { return WorkerSideCookies; }
+
+	static get HttpSession() { return HttpSession; }
+
+	static get HttpUser() { return HttpUser; }
+
+	static get Workport() { return WorkerSideWorkport; }
+
+	static create(cx) {
+		return new this(this.Context.create(cx));
+	}
+
+    #sdk = {};
+    get sdk() { return this.#sdk; }
+
+	async initialize() {
+		const instanceController = super.initialize();
+		// ONINSTALL
+		const installHandler = (event) => {
+			if (this.config.WORKER.skip_waiting) self.skipWaiting();
+			// Manage CACHE
+			if (this.config.WORKER.cache_name && (this.config.WORKER.cache_only_urls || []).length) {
+				// Add files to cache
+				event.waitUntil(self.caches.open(this.config.WORKER.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.config.WORKER[urls] || []).map(c => c.trim()).filter(c => c && !(new URLPattern(c, self.origin)).isPattern());
+						await cache.addAll(_urls);
+					}
+				}));
+			}
+		};
+		// ONACTIVATE
+		const activateHandler = (event) => {
+			event.waitUntil(new Promise(async resolve => {
+				if (this.config.WORKER.skip_waiting) { await self.clients.claim(); }
+				// Manage CACHE
+				if (this.config.WORKER.cache_name) {
+					// Clear outdated CACHES
+					await self.caches.keys().then(keyList => {
+						return Promise.all(keyList.map(key => {
+							if (key !== this.config.WORKER.cache_name && key !== this.config.WORKER.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, { signal: instanceController.signal });
+		self.addEventListener('activate', activateHandler, { signal: instanceController.signal });
+		this.control();
+		return instanceController;
+	}
+
+	control() {
+		const instanceController = super.control();
+		// ONFETCH
+		const fetchHandler = (event) => {
+			// Handle special requests
+			if (!event.request.url.startsWith('http') || event.request.mode === 'navigate') {
+				return event.respondWith(fetch(event.request));
+			}
+			// Handle external requests
+			if (!event.request.url.startsWith(self.origin)) {
+				return event.respondWith(this.remoteFetch(event.request));
+			}
+			event.respondWith((async (event) => {
+				const response = await this.navigate(event.request.url, event.request, { event });
+				return response;
+			})(event));
+		};
+		const webpushHandler = (event) => {
+			if (!(self.Notification && self.Notification.permission === 'granted')) return;
+			let data;
+			try {
+				data = event.data?.json() ?? {};
+			} catch(e) { return; }
+			const { type, title, ...params } = data;
+			if (type !== 'notification') return;
+			self.registration.showNotification(title, params);
+		};
+		self.addEventListener('fetch', fetchHandler, { signal: instanceController.signal });
+		self.addEventListener('push', webpushHandler, { signal: instanceController.signal });
+		return instanceController;
+	}
+
+	async navigate(url, init = {}, detail = {}) {
+		// Resolve inputs
+		const scopeObj = { url, init, detail };
+		if (typeof scopeObj.url === 'string') {
+			scopeObj.url = new URL(scopeObj.url, self.location.origin);
+		}
+		// Create and route request
+		scopeObj.request =  this.createRequest(scopeObj.url, scopeObj.init);
+		scopeObj.cookies = this.createHttpCookies({
+			request: scopeObj.request
+		});
+		scopeObj.session = this.createHttpSession({
+			store: this.#sdk.storage?.('session'),
+			request: scopeObj.request
+		});
+		const requestID = crypto.randomUUID();
+		scopeObj.clientRequestRealtime = new WQBroadcastChannel(requestID);
+		scopeObj.user = this.createHttpUser({
+			store: this.#sdk.storage?.('user'),
+			request: scopeObj.request,
+			realtime: scopeObj.clientRequestRealtime,
+			session: scopeObj.session,
+		});
+		scopeObj.httpEvent = this.createHttpEvent({
+			request: scopeObj.request,
+			realtime: scopeObj.clientRequestRealtime,
+			cookies: scopeObj.cookies,
+			session: scopeObj.session,
+			user: scopeObj.user,
+			detail: scopeObj.detail,
+			sdk: {}
+		});
+		// Dispatch for response
+		scopeObj.response = await this.dispatchNavigationEvent({
+			httpEvent: scopeObj.httpEvent,
+			crossLayerFetch: async (event) => {
+				// Was this nexted()? Tell the next layer we're in JSON mode by default
+				if (event !== scopeObj.httpEvent && !event.request.headers.has('Accept')) {
+					event.request.headers.set('Accept', 'application/json');
+				}
+				return await this.remoteFetch(event.request);
+			},
+			responseRealtime: `br:${scopeObj.httpEvent.realtime.name}`
+		});
+		return scopeObj.response;
+	}
+
+	async remoteFetch(request, ...args) {
+		if (arguments.length > 1) {
+			request = this.createRequest(request, ...args);
+		}
+		const scopeObj = {};
+		const matchUrl = (patterns, url) => _any((patterns || []).map(p => p.trim()).filter(p => p), p => (new URLPattern(p, self.origin)).test(url));
+		if (matchUrl(this.config.WORKER.cache_only_urls, request.url)) {
+			scopeObj.strategy = 'cache-only';
+			scopeObj.response = this.cacheFetch(request, { networkFallback: false, cacheRefresh: false });
+		} else if (matchUrl(this.config.WORKER.network_only_urls, request.url)) {
+			scopeObj.strategy = 'network-only';
+			scopeObj.response = this.networkFetch(request, { cacheFallback: false, cacheRefresh: false });
+		} else if (matchUrl(this.config.WORKER.cache_first_urls, request.url)) {
+			scopeObj.strategy = 'cache-first';
+			scopeObj.response = this.cacheFetch(request, { networkFallback: true, cacheRefresh: true });
+		} else if (matchUrl(this.config.WORKER.network_first_urls, request.url) || !this.config.WORKER.default_fetching_strategy) {
+			scopeObj.strategy = 'network-first';
+			scopeObj.response = this.networkFetch(request, { cacheFallback: true, cacheRefresh: true });
+		} else {
+			scopeObj.strategy = this.config.WORKER.default_fetching_strategy;
+			switch (this.config.WORKER.default_fetching_strategy) {
+				case 'cache-only':
+					scopeObj.response = this.cacheFetch(request, { networkFallback: false, cacheRefresh: false });
+					break;
+				case 'network-only':
+					scopeObj.response = this.networkFetch(request, { cacheFallback: false, cacheRefresh: false });
+					break;
+				case 'cache-first':
+					scopeObj.response = this.cacheFetch(request, { networkFallback: true, cacheRefresh: true });
+					break;
+				case 'network-first':
+					scopeObj.response = this.networkFetch(request, { cacheFallback: true, cacheRefresh: true });
+					break;
+			}
+		}
+		return await scopeObj.response;
+	}
+
+	async networkFetch(request, params = {}) {
+		if (!params.cacheFallback) {
+			return fetch(request);
+		}
+		return fetch(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();
+		await this.getRequestCache(request).then(cache => {
+			cache.put(request, responseToCache);
+		});
+		return response;
+	}
+
+	async getRequestCache(request) {
+		const cacheName = request.headers.get('X-Powered-By') === '@webqit/webflo'
+			? this.config.WORKER.cache_name + '_csr'
+			: this.config.WORKER.cache_name;
+		return self.caches.open(cacheName);
+	}
+}

package/src/runtime-pi/webflo-worker/WorkerSideCookies.js

@@ -0,0 +1,19 @@
+import { HttpCookies } from '../webflo-routing/HttpCookies.js';
+
+export class WorkerSideCookies extends HttpCookies {
+    static create({ request }) {
+        return new this({
+            request,
+            entries: request.headers.get('Cookie', true).map((c) => [c.name, c])
+        });
+    }
+
+    async commit(response = null) {
+        if (response) {
+            for (const cookieStr of await this.render()) {
+                response.headers.append('Set-Cookie', cookieStr);
+            }
+        }
+        await super.commit();
+    }
+}

package/src/runtime-pi/webflo-worker/WorkerSideWorkport.js

@@ -0,0 +1,18 @@
+export class WorkerSideWorkport {
+
+    showNotification(title, params = {}) {
+        return self.registration.showNotification(title, params);
+    }
+
+    handleNotificationClick(callback) {
+        const handler = (e) => e.waitUntil(callback(e));
+        self.addEventListener('notificationclick', handler);
+        return () => self.removeEventListener('notificationclick', handler);
+    }
+    
+    handlePush(callback) {
+        const handler = (e) => e.waitUntil(callback(e));
+        self.addEventListener('push', handler);
+        return () => self.removeEventListener('notificationclick', handler);
+    }
+}

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

@@ -0,0 +1,11 @@
+import { WebfloWorker } from './WebfloWorker.js';
+
+export async function start() {
+    const instance = WebfloWorker.create(this || {});
+    await instance.initialize();
+    return instance;
+}
+
+export {
+    WebfloWorker
+}