@webqit/webflo 0.8.77 → 0.9.1

package/src/runtime/client/Runtime.js

@@ -1,126 +0,0 @@
-
-/**
- * @imports
- */
-import _isObject from '@webqit/util/js/isObject.js';
-import _before from '@webqit/util/str/before.js';
-import _unique from '@webqit/util/arr/unique.js';
-import _fetch from '@webqit/browser-pie/src/apis/fetch.js';
-import NavigationEvent from './NavigationEvent.js';
-import WorkerClient from './WorkerClient.js';
-import Storage from './Storage.js';
-import Router from './Router.js';
-import Navigator from './Navigator.js';
-
-/**
- * ---------------------------
- * The Client Initializer
- * ---------------------------
- */
-
-export const { Observer } = window.WebQit;
-export default function(layout, params) {
-
-	layout = {...layout};
-	params = {...params};
-
-	const session = Storage();
-	const workerClient = new WorkerClient('/worker.js', { startMessages: true });
-	const navigator = new Navigator(async (request, params, remoteFetch) => {
-		
-		// The navigation event
-		const clientNavigationEvent = new NavigationEvent(
-			new NavigationEvent.Request(request),
-			session,
-		);
-
-		// The app router
-		const router = new Router(clientNavigationEvent.url.pathname, layout, {
-			layout,
-			onHydration: params.srcType === 'init',
-		});
-
-		// --------
-		// ROUTE FOR DATA
-		// --------
-		const httpMethodName = clientNavigationEvent.request.method.toLowerCase();
-		const response = await router.route([httpMethodName === 'delete' ? 'del' : httpMethodName, 'default'], clientNavigationEvent, document.state, async function(event) {
-			return remoteFetch(event.request).then(response => {
-				return new clientNavigationEvent.Response(response.body, {
-					status: response.status,
-					statusText: response.statusText,
-					headers: response.headers,
-					_proxy: {
-						url: response.url,
-						ok: response.ok,
-						redirected: response.redirected
-					},
-				});
-			});
-		}).catch(e => {
-			window.document.body.setAttribute('template', '');
-			throw e;
-		});
-
-
-		// --------
-		// Render
-		// --------
-		const data = response instanceof clientNavigationEvent.Response ? await response.data() : response;
-		await router.route('render', clientNavigationEvent, data, async function(event, data) {
-			// --------
-			// OOHTML would waiting for DOM-ready in order to be initialized
-			await new Promise(res => window.WebQit.DOM.ready(res));
-			if (!window.document.state.env) {
-				window.document.setState({
-					env: 'client',
-					onHydration: params.srcType === 'init',
-					network: navigator.network,
-					url: navigator.location,
-					session,
-				}, { update: true });
-			}
-			window.document.setState({ page: data }, { update: 'merge' });
-			window.document.body.setAttribute('template', 'page/' + clientNavigationEvent.url.pathname.split('/').filter(a => a).map(a => a + '+-').join('/'));
-			return new Promise(res => {
-				window.document.addEventListener('templatesreadystatechange', () => res(window));
-				if (window.document.templatesReadyState === 'complete') {
-					res(window);
-				}
-			});
-		});
-
-		// --------
-		// Render...
-		// --------
-
-		if (params.src instanceof Element) {
-			setTimeout(() => {
-				let viewportTop;
-				if (clientNavigationEvent.url.hash && (urlTarget = document.querySelector(clientNavigationEvent.url.hash))) {
-					urlTarget.scrollIntoView();
-				} else if (viewportTop = Array.from(document.querySelectorAll('[data-viewport-top]')).pop()) {
-					viewportTop.focus();
-				} else {
-					document.documentElement.classList.add('scroll-reset');
-					document.body.scrollIntoView();
-					setTimeout(() => {
-						document.documentElement.classList.remove('scroll-reset');
-					}, 600);
-				}
-			}, 0);
-		}
-		
-		return response;
-	});
-
-	Observer.observe(session, changes => {
-		//console.log('SESSION_STATE_CHANGE', changes[0].name, changes[0].value);
-	});
-	Observer.observe(workerClient, changes => {
-		//console.log('SERVICE_WORKER_STATE_CHANGE', changes[0].name, changes[0].value);
-	});
-	Observer.observe(navigator, changes => {
-		//console.log('NAVIGATORSTATE_CHANGE', changes[0].name, changes[0].value);
-	});
-};

package/src/runtime/client/Worker.js

@@ -1,317 +0,0 @@
-
-/**
- * @imports
- */
-import Router from './Router.js';
-import _isGlobe from 'is-glob';
-import Minimatch from 'minimatch';
-import Observer from '@webqit/observer';
-import _isArray from '@webqit/util/js/isArray.js';
-import _afterLast from '@webqit/util/str/afterLast.js';
-import _after from '@webqit/util/str/after.js';
-import _before from '@webqit/util/str/before.js';
-import _any from '@webqit/util/arr/any.js';
-import _copy from '@webqit/util/obj/copy.js';
-import NavigationEvent from './NavigationEvent.js';
-
-/**
- * ---------------------------
- * The Worker Initializer
- * ---------------------------
- */
-
-export default function(layout, params) {
-
-	// Copy...
-	layout = { ...layout };
-	params = { ...params };
-	const sessionStores = Object.create(null);
-	const localStores = Object.create(null);
-
-	/**
-	 * -------------
-	 * ONINSTALL
-	 * -------------
-	 */
-
-	self.addEventListener('install', evt => {
-
-		if (params.skip_waiting) {
-			self.skipWaiting();
-		}
-		// Manage CACHE
-		if (params.cache_name && params.static_caching_list) {
-			// Add files to cache
-			evt.waitUntil(
-				self.caches.open(params.cache_name).then(cache => {
-					if (params.lifecycle_logs) {
-						console.log('[ServiceWorker] Pre-caching resources.');
-					}
-					const cache_only_url_list = (params.cache_only_url_list || []).map(c => c.trim()).filter(c => c);//.reduce((all, url) => all.concat(Micromatch.brace(url, { expand: true })), []);
-					return cache.addAll(cache_only_url_list.filter(url => !_isGlobe(url) && !_afterLast(url, '.').includes('/')));
-				})
-			);
-		}
-
-	});
-
-	/**
-	 * -------------
-	 * ONACTIVATE
-	 * -------------
-	 */
-
-	self.addEventListener('activate', evt => {
-
-		evt.waitUntil(
-			new Promise(async resolve => {
-				if (params.skip_waiting) {
-					await self.clients.claim();
-				}
-				// Manage CACHE
-				if (params.cache_name) {
-					// Clear outdated CACHES
-					await self.caches.keys().then(keyList => {
-						return Promise.all(keyList.map(key => {
-							if (key !== params.cache_name && key !== params.cache_name + '_json') {
-								if (params.lifecycle_logs) {
-									console.log('[ServiceWorker] Removing old cache:', key);
-								}
-								return self.caches.delete(key);
-							}
-						}));
-					}) 
-				}
-				resolve();
-			})
-		);
-
-	});
-	  
-	/**
-	 * -------------
-	 * ONFETCH
-	 * -------------
-	 */
-	
-	// Listen now...
-	self.addEventListener('fetch', async evt => {
-		// URL schemes that might arrive here but not supported; e.g.: chrome-extension://
-		if (!evt.request.url.startsWith('http')) return;
-		// Fetches request
-		const handleFetch = async evt => {
-
-			if (evt.request.url.startsWith(self.origin) && (evt.request.mode === 'navigate' || evt.request.headers.get('X-Powered-By') === '@webqit/webflo')) {
-				// -----------------
-				// We must patch the event object with the new request instance
-				// cos the body of the original gets consumed (thus invalidated) by the new instance
-				Object.defineProperty(evt, 'request', {
-					value: new NavigationEvent.Request(evt.request),
-				});
-				// Sync session data to cache to be available to service-worker routers
-				// Sync only takes for requests that actually do send the "$session" cookie
-				const sessionData = Observer.proxy(sessionStores[evt.clientId] || {});
-				const clientNavigationEvent = new NavigationEvent(evt.request, sessionData);
-				// -----------------
-				// The app router
-				const router = new Router(_before(evt.request.url, '?'), layout, { layout });
-				const httpMethodName = evt.request.method.toLowerCase();
-				const _response = await router.route([httpMethodName === 'delete' ? 'del' : httpMethodName, 'default'], clientNavigationEvent, null, (event, arg) => defaultFetch(evt));
-				if (!(_response instanceof Response)/* _response being a native Response instance is fine */) {
-					return new NavigationEvent.Response(_response);
-				}
-				return _response;
-			}
-			
-			return defaultFetch(evt);
-		};
-		let response = handleFetch(evt);
-		evt.respondWith(response);
-	});
-
-	const defaultFetch = function(evt) {
-		if (_any((params.cache_only_url_list || []).map(c => c.trim()).filter(c => c), pattern => Minimatch.Minimatch(evt.request.url, pattern))) {
-			return cache_fetch(evt);
-		}
-		// Now, the following is key:
-		// The browser likes to use "force-cache" for "navigate" requests
-		// when, for example, the back button was used.
-		// Thus the origin server would still not be contacted by the self.fetch() below, leading to inconsistencies in responses.
-		// So, we detect this scenerio and avoid it.
-		if (evt.request.mode === 'navigate' && evt.request.cache === 'force-cache' && evt.request.destination === 'document') {
-			return cache_fetch(evt, false, true);
-		}
-		if (_any((params.cache_first_url_list || []).map(c => c.trim()).filter(c => c), pattern => Minimatch.Minimatch(evt.request.url, pattern))) {
-			return cache_fetch(evt, true/** cacheRefresh */);
-		}
-		if (_any((params.network_first_url_list || []).map(c => c.trim()).filter(c => c), pattern => Minimatch.Minimatch(evt.request.url, pattern))) {
-			return network_fetch(evt, true/** cacheFallback */);
-		}
-		return network_fetch(evt);
-	};
-
-	//evt.request.mode navigate evt.request.cache force-cache evt.request.destination document request.headers.get('Accept') text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
-
-	const getCacheName = request => request.headers.get('Accept') === 'application/json'
-			? params.cache_name + '_json' 
-			: params.cache_name;
-
-	// Caching strategy: cache_first
-	const cache_fetch = (evt, cacheRefresh = false, is_Navigate_ForceCache_Document = false) => {
-
-		return self.caches.open(getCacheName(evt.request)).then(cache => {
-			return cache.match(evt.request).then(response => {
-				const force_network_fetch = evt => {
-					let request = evt.request;
-					if (is_Navigate_ForceCache_Document) {
-						let url = new URL(request.url);
-						url.searchParams.set('$force-cache', '1');
-						request = new Request(url, {
-							method: request.method, 
-							headers: request.headers,
-							body: request.body,
-							mode: request.mode === 'navigate'/* throws */ ? null : request.mode,
-							credentials: request.credentials,
-							cache: request.cache,
-							redirect: request.redirect,
-							referrer: request.referrer,
-							integrity: request.integrity,
-						});
-					}
-					return self.fetch(request);
-				}
-				if (response) {
-					if (cacheRefresh) {
-						// Fetch, but return this immediately
-						force_network_fetch(evt).then(response => refreshCache(evt.request, response));
-					}
-					return response;
-				}
-				return force_network_fetch(evt).then(response => refreshCache(evt.request, response));
-			});
-		});
-		
-	};
-
-	// Caching strategy: network_first
-	const network_fetch = (evt, cacheFallback) => {
-		if (!cacheFallback) {
-			return self.fetch(evt.request);
-		}
-		return self.fetch(evt.request).then(response => refreshCache(evt.request, response)).catch(e => {
-			return self.caches.open(getCacheName(evt.request)).then(cache => {
-				return cache.match(evt.request);
-			});
-		});
-	};
-
-	// Caches response 
-	const refreshCache = (request, response) => {
-
-		// Check if we received a valid response
-		if ((request._method || 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();
-		self.caches.open(getCacheName(request)).then(cache => {
-			if (params.lifecycle_logs) {
-				console.log('[ServiceWorker] Refreshing cache:', request.url);
-			}
-			cache.put(request, responseToCache);
-		});
-
-		return response;
-	};
-
-	// -----------------------------
-
-	const relay = function(evt, messageData) {
-		return self.clients.matchAll().then(clientList => {
-			clientList.forEach(client => {
-				if (client.id === evt.source.id) {
-					return;
-				}
-				client.postMessage(messageData);
-			});
-		});
-	};
-	
-	self.addEventListener('message', evt => {
-
-		// Handle normally
-		const router = new Router('/', layout, { layout });
-		evt.waitUntil(
-			router.route('postmessage', evt, null, function() {
-				return self;
-			})
-		);
-
-	});
-
-	self.addEventListener('push', evt => {
-		const router = new Router('/', layout, { layout });
-		evt.waitUntil(
-			router.route('push', evt, null, function() {
-				return self;
-			})
-		);
-	});
-
-	self.addEventListener('notificationclick', evt => {
-		const router = new Router('/', layout, { layout });
-		evt.waitUntil(
-			router.route('notificationclick', evt, null, function() {
-				return self;
-			})
-		);
-	});
-
-	self.addEventListener('notificationclose', evt => {
-		const router = new Router('/', layout, { layout });
-		evt.waitUntil(
-			router.route('notificationclose', evt, null, function() {
-				return self;
-			})
-		);
-	});
-
-};
-
-/**
- * @utils
- */
-const matchClientUrl = (client, url) => '/' + _after(_after(client.url, '//'), '/') === url;
-
-/**
-
-if (notificationData) {
-	var title = params.NOTIFICATION_TITLE || '';
-	if (_isArray(notificationData)) {
-		title = notificationData[0];
-		notificationData = notificationData[1];
-	}
-	return self.registration.showNotification(title, notificationData);
-}
-
-var cuurentClientAtUrl = self.clients.matchAll().then(clientList => {
-	// Take the user to the app... the current open window or a new window
-	return clientList.reduce((cuurentClientAtUrl, client) => {
-		return cuurentClientAtUrl || matchClientUrl(client, pathname) ? client : null;
-	}, null);
-});
-if (cuurentClientAtUrl) {
-	return cuurentClientAtUrl.focus();
-}
-return self.clients.openWindow(pathname);
-
-return self.clients.matchAll().then(clientList => {
-	// Take the user to the app
-	return clientList.reduce((cuurentClientAtUrl, client) => cuurentClientAtUrl || matchClientUrl(client, pathname) ? client : null, null);
-});
-
- */

package/src/runtime/client/archive/Cache.js

@@ -1,38 +0,0 @@
-
-/**
- * @imports
- */
-
-export function syncToCache(name, data) {
-    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-    return caches.open(name)
-        .then(cache => cache.put('http://session.temp', new Response(blob)));
-}
-
-export function syncFromCache(name, del = false) {
-    return caches.open(name)
-        .then(cache => cache.match('http://session.temp')
-        .then(response => response ? response.json() : null))
-        .then(async data => (del ? await caches.delete(name) : null, data)).catch(e => null);
-}
-
-/**
-const sessionData = Object.keys(clientNavigationEvent.session)
-    .reduce((obj, key) => (obj[key] = clientNavigationEvent.session[key], obj), {});
-await syncToCache('$session', sessionData);
-*/
-/**
-response.finally(async () => {
-    // Sync session data from cache that may have been exposed by service-worker routers
-    const sessionData = await syncFromCache('$session', true);
-    if (!sessionData) return;
-    const keysInCache = Object.keys(sessionData);
-    _unique(Object.keys(clientNavigationEvent.session).concat(keysInCache)).forEach(key => {
-        if (!keysInCache.includes(key)) {
-            delete clientNavigationEvent.session[key];
-        } else {
-            clientNavigationEvent.session[key] = sessionData[key];
-        }
-    });
-});
-*/

package/src/runtime/client/archive/Http.js

@@ -1,225 +0,0 @@
-
-/**
- * @imports
- */
-import _before from '@webqit/util/str/before.js';
-import _after from '@webqit/util/str/after.js';
-import _toTitle from '@webqit/util/str/toTitle.js';
-import _arrFrom from '@webqit/util/arr/from.js';
-import { wwwFormUnserialize, wwwFormSet, wwwFormSerialize } from '../util.js';
-import StdRequest from './StdRequest.js';
-import { Observer } from './Runtime.js';
-import Url from './Url.js';
-
-/**
- * ---------------------------
- * The Client class
- * ---------------------------
- */
-
-export default class Http {
-
-	/**
-	 * Constructs a new Http instance. Typically,
-	 * 
-	 * @param function 	client
-	 * @param object 	params
-	 *
-	 * @return void
-	 */
-	static async createClient(client, params = {}) {
-
-		/**
-		 * ----------------
-		 * instance
-		 * ----------------
-		 */
-		const instance = {
-
-			/**
-			 * Performs a request.
-			 *
-			 * @param object|string 	href
-			 * @param object 			options
-			 *
-			 * @return void
-			 */
-			async go(url, options = {}) {
-				if (this.abortController) {
-					this.abortController.abort();
-				}
-				this.abortController = new AbortController();
-				let xRedirectCode = 300;
-				// Generates request object
-				let generateRequest = (url, options) => {
-					return new StdRequest(url, {
-						...options,
-						headers: {
-							'Accept': 'application/json',
-							'X-Redirect-Policy': 'manual-when-cross-origin',
-							'X-Redirect-Code': xRedirectCode,
-							'X-Powered-By': '@webqit/webflo',
-							...(options.headers || {}),
-						},
-						referrer: window.document.location.href,
-						signal: this.abortController.signal,
-					});
-				};
-				// Handles response object
-				let handleResponse = (response) => {
-					if (!response) return;
-					if (response.redirected && this.isSameOrigin(response.url)) {
-						Observer.set(this.location, { href: response.url }, {
-							detail: { isRedirect: true },
-						});
-					} else if (response.headers.get('Location') && response.status === xRedirectCode) {
-						window.location = response.headers.get('Location');
-					}
-				};
-				url = typeof url === 'string' ? { href: url } : url;
-				options = { referrer: this.location.href, ...options };
-				Observer.set(this.location, url, { detail: options, });
-				if (!(_before(url.href, '#') === _before(options.referrer, '#') && (options.method || 'GET').toUpperCase() === 'GET')) {
-					handleResponse(await client.call(this, generateRequest(url.href, options)));
-				}
-			},
-
-			/**
-			 * Checks if an URL is same origin.
-			 *
-			 * @param object|string 	url
-			 *
-			 * @return Bool
-			 */
-			isSameOrigin(url) {
-				if (typeof url === 'string') {
-					let href = url;
-					url = window.document.createElement('a');
-					url.href = href
-				}
-				return !url.origin || url.origin === this.location.origin;
-			},
-
-			/**
-			 * History object
-			 */
-			get history() {
-				return window.history;
-			}
-
-		};
-
-		// -----------------------
-		// Initialize network
-		Observer.set(instance, 'network', {});
-		window.addEventListener('online', () => Observer.set(instance.network, 'online', navigator.onLine));
-		window.addEventListener('offline', () => Observer.set(instance.network, 'online', navigator.onLine));
-
-		// -----------------------
-		// Initialize location
-		Observer.set(instance, 'location', new Url(window.document.location));
-		// -----------------------
-		// Syndicate changes to the browser;s location bar
-		Observer.observe(instance.location, [[ 'href' ]], ([e]) => {
-			if (e.value === 'http:' || (e.detail || {}).src === window.document.location) {
-				// Already from a "popstate" event as above, so don't push again
-				return;
-			}
-			if (e.value === window.document.location.href || e.value + '/' === window.document.location.href) {
-				instance.history.replaceState(instance.history.state, '', instance.location.href);
-			} else {
-				try { instance.history.pushState(instance.history.state, '', instance.location.href); } catch(e) {}
-			}
-		}, { diff: true });
-
-		/**
-		 * ----------------
-		 * Navigation Interception
-		 * ----------------
-		 */
-
-		// -----------------------
-		// This event is triggered by
-		// either the browser back button,
-		// the window.history.back(),
-		// the window.history.forward(),
-		// or the window.history.go() action.
-		window.addEventListener('popstate', e => {
-			// Needed to allow window.document.location
-			// to update to window.location
-			let referrer = window.document.location.href;
-			window.setTimeout(() => {
-				instance.go(Url.copy(window.document.location), { referrer, src: window.document.location, srcType: 'history', });
-			}, 0);
-		});
-
-		// -----------------------
-		// Capture all link-clicks
-		// and fire to this router.
-		window.addEventListener('click', e => {
-			var anchor = e.target.closest('a');
-			if (!anchor || !anchor.href) return;
-			if (!anchor.target && !anchor.download && (!anchor.origin || anchor.origin === instance.location.origin)) {
-				if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
-				// Publish everything, including hash
-				instance.go(Url.copy(anchor), { src: anchor, srcType: 'link', });
-				// URLs with # will cause a natural navigation
-				// even if pointing to a different page, a natural navigation will still happen
-				// because with the Observer.set() above, window.document.location.href would have become
-				// the destination page, which makes it look like same page navigation
-				if (!anchor.href.includes('#')) {
-					e.preventDefault();
-				}
-			}
-		});
-
-		// -----------------------
-		// Capture all form-submit
-		// and fire to this router.
-		window.addEventListener('submit', e => {
-			var form = e.target.closest('form'), submitter = e.submitter;
-			var submitParams = [ 'action', 'enctype', 'method', 'noValidate', 'target' ].reduce((params, prop) => {
-				params[prop] = submitter && submitter.hasAttribute(`form${prop.toLowerCase()}`) ? submitter[`form${_toTitle(prop)}`] : form[prop];
-				return params;
-			}, {});
-			// We support method hacking
-			submitParams.method = (submitter && submitter.dataset.method) || form.dataset.method || submitParams.method;
-			submitParams.submitter = submitter;
-			// ---------------
-			var actionEl = window.document.createElement('a');
-			actionEl.href = submitParams.action;
-			// ---------------
-			// If not targeted and same origin...
-			if (!submitParams.target && (!actionEl.origin || actionEl.origin === instance.location.origin)) {
-				if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
-				// Build data
-				var formData = new FormData(form);
-				if ((submitter || {}).name) {
-					formData.set(submitter.name, submitter.value);
-				}
-				if (submitParams.method.toUpperCase() === 'GET') {
-					var query = wwwFormUnserialize(actionEl.search);
-					Array.from(formData.entries()).forEach(_entry => {
-						wwwFormSet(query, _entry[0], _entry[1], false);
-					});
-					actionEl.search = wwwFormSerialize(query);
-					formData = null;
-				}
-				instance.go(Url.copy(actionEl), { ...submitParams, body: formData, src: form, srcType: 'form', });
-				// URLs with # will cause a natural navigation
-				// even if pointing to a different page, a natural navigation will still happen
-				// because with the Observer.set() above, window.document.location.href would have become
-				// the destination page, which makes it look like same page navigation
-				if (!actionEl.hash) {
-					e.preventDefault();
-				}
-			}
-		});
-
-		// -----------------------
-		// Startup route
-		instance.go(window.document.location.href, { referrer: document.referrer });
-		return instance;
-	}
-
-}