@webqit/webflo 0.11.61 → 0.20.2-next.0

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

@@ -0,0 +1,206 @@
+import { Observer } from '@webqit/quantum-js';
+import { WebfloClient } from './WebfloClient.js';
+import { ClientSideWorkport } from './ClientSideWorkport.js';
+import { DeviceCapabilities } from './DeviceCapabilities.js';
+import { WebfloHMR } from './webflo-devmode.js';
+
+export class WebfloRootClient1 extends WebfloClient {
+
+	static get Workport() { return ClientSideWorkport; }
+
+	static get DeviceCapabilities() { return DeviceCapabilities; }
+
+	static create(cx, host) {
+		return new this(this.Context.create(cx), host);
+	}
+
+	#network;
+	get network() { return this.#network; }
+
+	#workport;
+	get workport() { return this.#workport; }
+
+	#deviceCapabilities;
+	get deviceCapabilities() { return this.#deviceCapabilities; }
+
+	#hmr;
+
+	get withViewTransitions() {
+		return document.querySelector('meta[name="webflo:viewtransitions"]')?.value;
+	}
+
+	constructor(cx, host) {
+		if (!(host instanceof Document)) {
+			throw new Error('Argument #1 must be a Document instance');
+		}
+		super(cx, host);
+		this.#network = { status: window.navigator.onLine };
+	}
+
+	async initialize() {
+		// INITIALIZATIONS
+		const instanceController = await super.initialize();
+		// Bind network status handlers
+		const onlineHandler = () => Observer.set(this.network, 'status', window.navigator.onLine);
+		window.addEventListener('online', onlineHandler, { signal: instanceController.signal });
+		window.addEventListener('offline', onlineHandler, { signal: instanceController.signal });
+		// Window opener pinging
+		if (window.opener) {
+			const beforeunloadHandler = () => window.opener.postMessage('close');
+			window.addEventListener('beforeunload', beforeunloadHandler, { signal: instanceController.signal });
+		}
+		// Bind top-level User-Agent requests
+		this.background.handleRequests('ua:query', async (e) => {
+			if (e.data?.query === 'push_registration') {
+				const pushManager = (await navigator.serviceWorker.getRegistration()).pushManager;
+				return await pushManager.getSubscription();
+			}
+		}, { signal: instanceController.signal });
+		// Bind top-level Storage requests
+		this.background.handleRequests('storage:query', (e) => {
+			const { source, namespace, query, key, value } = e.data;
+			const storage = source === 'session' ? sessionStorage : (source === 'local' ? localStorage : null);
+			if (!storage) return;
+			const data = JSON.parse(storage.getItem(namespace) || (query === 'set' ? '{}' : 'null'));
+			switch (query) {
+				case 'has': return !!data && Reflect.has(data, key);
+				case 'get': return data && Reflect.get(data, key);
+				case 'set':
+					Reflect.set(data, key, value);
+					return storage.setItem(namespace, JSON.stringify(data))
+				case 'delete':
+					if (!data) return;
+					Reflect.deleteProperty(data, key);
+					return storage.setItem(namespace, JSON.stringify(data));
+				case 'clear': return storage.removeItem(namespace);
+				case 'keys': return data && Reflect.ownKeys(data) || [];
+				case 'values': return data && Object.values(data) || [];
+				case 'entries': return data && Object.entries(data) || [];
+				case 'size': return data && Object.keys(data).length || 0;
+			}
+		}, { signal: instanceController.signal });
+		return instanceController;
+	}
+
+	async setupCapabilities() {
+		const instanceController = await super.setupCapabilities();
+		// Service Worker && Capabilities
+		const cleanups = [];
+		instanceController.signal.addEventListener('abort', () => cleanups.forEach((c) => c()), { once: true });
+		this.#deviceCapabilities = await this.constructor.DeviceCapabilities.initialize(this, this.config.CLIENT.capabilities);
+		cleanups.push(() => this.#deviceCapabilities.close());
+		if (this.config.CLIENT.capabilities?.service_worker?.filename) {
+			const { service_worker: { filename, ...restServiceWorkerParams } = {} } = this.config.CLIENT.capabilities;
+			this.#workport = await this.constructor.Workport.initialize(null, (this.config.CLIENT.public_base_url || '') + filename, restServiceWorkerParams);
+			cleanups.push(() => this.#workport.close());
+		}
+		return instanceController;
+	}
+
+	async hydrate() {
+		const instanceController = await super.hydrate();
+		const scopeObj = {};
+		scopeObj.data = this.host.querySelector(`script[rel="hydration"][type="application/json"]`)?.textContent?.trim() || null;
+		scopeObj.response = new Response.from(scopeObj.data, { headers: { 'Content-Type': 'application/json' } });
+		for (const name of ['X-Background-Messaging-Port', 'X-Live-Response-Message-ID', 'X-Webflo-Dev-Mode']) {
+			const metaElement = this.host.querySelector(`meta[name="${name}"]`);
+			if (!metaElement) continue;
+			scopeObj.response.headers.set(name, metaElement.content?.trim() || '');
+		}
+		if (scopeObj.response.isLive()) {
+			this.background.addPort(scopeObj.response.wqRealtime);
+		}
+		if (scopeObj.response.body || scopeObj.response.isLive()) {
+			const httpEvent = this.createHttpEvent({ request: this.createRequest(this.location.href) }, true);
+			await this.render(httpEvent, scopeObj.response);
+		} else {
+			await this.navigate(this.location.href);
+		}
+		if (scopeObj.response.headers.get('X-Webflo-Dev-Mode') === 'true') {
+			this.enterDevMode();
+		}
+		return instanceController;
+	}
+
+	async enterDevMode() {
+		this.#hmr = WebfloHMR.manage(this);
+	}
+
+	control() {
+		// ON LOCATION CHANGE
+		const locationCallback = (newHref) => {
+			try {
+				const scrollPosition = this.host === window.document
+					? [window.scrollX, window.scrollY]
+					: [this.host.scrollLeft, this.host.scrollTop,];
+				const state = { ...(this.currentEntry()?.getState?.() || {}), scrollPosition };
+				window.history.replaceState(state, '', this.location.href);
+			} catch (e) { }
+			try { window.history.pushState({}, '', newHref); } catch (e) { }
+		};
+		const instanceController = super.controlClassic/*IMPORTANT*/(locationCallback);
+		// ONPOPSTATE
+		const popstateHandler = (e) => {
+			if (this.isHashChange(location)) {
+				Observer.set(this.location, 'href', location.href);
+				return;
+			}
+			// Navigation details
+			const detail = {
+				navigationType: 'traverse',
+				navigationOrigins: [],
+				destination: this._asEntry(e.state),
+				source: this.currentEntry(),
+				userInitiated: true,
+			};
+			// Traversal?
+			// Push
+			this.navigate(location.href, {}, detail);
+		};
+		window.addEventListener('popstate', popstateHandler, { signal: instanceController.signal });
+		return instanceController;
+	}
+
+	reload() {
+		return window.history.reload();
+	}
+
+	back() {
+		return window.history.back();
+	}
+
+	forward() {
+		return window.history.forward();
+	}
+
+	traverseTo(...args) {
+		return window.history.go(...args);
+	}
+
+	async push(url, state = {}) {
+		if (typeof url === 'string' && url.startsWith('&')) { url = this.location.href.split('#')[0] + (this.location.href.includes('?') ? url : url.replace('&', '?')); }
+		url = new URL(url, this.location.href);
+		window.history.pushState(state, '', url.href);
+		Observer.set(this.location, 'href', url.href);
+	}
+
+	entries() {
+		return window.history;
+	}
+
+	currentEntry() {
+		return this._asEntry(history.state);
+	}
+
+	async updateCurrentEntry(params, url = null) {
+		window.history.replaceState(params.state, '', url);
+	}
+
+	async applyPostRenderState(httpEvent) {
+		const destinationState = httpEvent.detail.destination?.getState() || {};
+		if (destinationState.scrollPosition?.length) {
+			window.scroll(...destinationState.scrollPosition);
+			(document.querySelector('[autofocus]') || document.body).focus();
+		} else await super.applyPostRenderState(httpEvent);
+	}
+}

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

@@ -0,0 +1,113 @@
+import { Observer } from '@webqit/quantum-js';
+import { WebfloRootClient1 } from './WebfloRootClient1.js';
+
+export class WebfloRootClient2 extends WebfloRootClient1 {
+
+	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;
+			let anchorEl = e.target.closest('a');
+			if (!anchorEl || !anchorEl.href || anchorEl.target) return;
+			navigationOrigins = [anchorEl, null, anchorEl.closest('[navigationcontext]')];
+		};
+        // Capture all form-submits
+		const submitHandler = (e) => {
+			if (!this._canIntercept(e) || 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 
+				|| e.downloadRequest !== null 
+				|| !this.isSpaRoute(e.destination.url)
+				|| e.navigationType === 'reload') return;
+			if (e.hashChange) {
+				Observer.set(this.location, 'href', e.destination.url);
+				return;
+			}
+			const { navigationType, destination, signal, formData, info, userInitiated } = e;
+			if (formData && navigationOrigins[1]?.hasAttribute('webflo-no-intercept')) return;
+			if (formData && (navigationOrigins[0] || {}).name) { formData.set(navigationOrigins[0].name, navigationOrigins[0].value); }
+			// Navigation details
+			const detail = {
+				navigationType,
+				navigationOrigins,
+				destination,
+				source: this.currentEntry(),
+				userInitiated,
+				info
+			};
+			navigationOrigins = [];
+			// Traversal?
+			// Push
+			const url = new URL(destination.url, this.location.href);
+			const init = {
+				method: formData && 'POST' || 'GET',
+				body: formData,
+				signal
+			};
+			this.updateCurrentEntry({
+				state: {
+					...(this.currentEntry().getState() || {}),
+					scrollPosition: [window.scrollX, window.scrollY],
+				}
+			});
+			const runtime = this;
+			e.intercept({
+				scroll: 'after-transition',
+				focusReset: 'after-transition',
+				async handler() {
+					if (navigationType === 'replace') return;
+					await runtime.navigate(url, init, detail);
+				},
+			});
+		};
+		window.addEventListener('click', clickHandler, { signal: instanceController.signal });
+		window.addEventListener('submit', submitHandler, { signal: instanceController.signal });
+		window.navigation.addEventListener('navigate', navigateHandler, { signal: instanceController.signal });
+        return instanceController;
+	}
+
+    reload(params) {
+		return window.navigation.reload(params);
+	}
+
+	back() {
+		return window.navigation.canGoBack && window.navigation.back();
+	}
+
+	forward() {
+		return window.navigation.canGoForward && window.navigation.forward();
+	}
+
+	traverseTo(...args) {
+		return window.navigation.traverseTo(...args);
+	}
+
+	async push(url, state = {}) {
+		if (typeof url === 'string' && url.startsWith('&')) { url = this.location.href.split('#')[0] + (this.location.href.includes('?') ? url : url.replace('&', '?')); }
+		url = new URL(url, this.location.href);
+		await window.navigation.navigate(url.href, state).committed;
+		Observer.set(this.location, 'href', url.href);
+	}
+
+	entries() {
+		return window.navigation.entries();
+	}
+
+	currentEntry() {
+		return window.navigation.currentEntry;
+	}
+
+	async updateCurrentEntry(params, url = null) {
+		if (!url || url === window.navigation.currentEntry.url) {
+			window.navigation.updateCurrentEntry(params);
+		} else {
+			await window.navigation.navigate(url, { ...params, history: 'replace' }).committed;
+		}
+	}
+}

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

@@ -0,0 +1,118 @@
+import { Observer } from '@webqit/quantum-js';
+import { WebfloClient } from './WebfloClient.js';
+import { defineElement } from './webflo-embedded.js';
+import { Url } from '../webflo-url/Url.js';
+import { _wq } from '../../util.js';
+
+export class WebfloSubClient extends WebfloClient {
+
+	static defineElement() {
+		defineElement(this);
+	}
+
+	static create(superRuntime, host) {
+		return new this(superRuntime, host);
+	}
+
+	#superRuntime;
+	get superRuntime() { return this.#superRuntime; }
+
+	get network() { return this.#superRuntime.network; }
+
+	get workport() { return this.#superRuntime.workport; }
+
+	get deviceCapabilities() { return this.#superRuntime.deviceCapabilities; }
+
+	get withViewTransitions() { return this.host.hasAttribute('viewtransitions'); }
+
+	constructor(superRuntime, host) {
+		if (!(superRuntime instanceof WebfloClient)) {
+			throw new Error('Argument #2 must be a Webflo Client instance');
+		}
+		if (!(host instanceof HTMLElement)) {
+			throw new Error('Argument #1 must be a HTMLElement instance');
+		}
+		super(superRuntime.cx, host);
+		this.#superRuntime = superRuntime;
+	}
+
+	async initialize() {
+		if (this.host.location.origin !== window.location.origin) {
+			throw new Error(`Webflo embeddable origin violation in "${window.location}"`);
+		}
+		const instanceController = await super.initialize();
+		_wq(this.background, 'meta').set('parentNode', this.#superRuntime.background);
+		instanceController.signal.addEventListener('abort', () => {
+			if (_wq(this.background, 'meta').get('parentNode') === this.#superRuntime.background) {
+				_wq(this.background, 'meta').set('parentNode', null);
+			}
+		}, { once: true });
+		return instanceController;
+	}
+
+	async hydrate() {
+		const instanceController = await super.hydrate();
+		if (this.host.hasAttribute('location')) {
+			await this.navigate(this.location.href);
+		}
+		return instanceController;
+	}
+
+	control() {
+		const locationCallback = (newHref) => {
+			this.host.reflectLocation(newHref);
+		};
+		return super.controlClassic/*IMPORTANT*/(locationCallback);
+	}
+
+	reload(params) {}
+
+	back() {}
+
+	forward() {}
+
+	traverseTo(...args) {}
+
+	async push(url, state = {}) {}
+
+	entries() {}
+
+	currentEntry() {}
+
+	async updateCurrentEntry(params, url = null) {
+		this.host.reflectLocation(url);
+	}
+
+	async applyPostRenderState(httpEvent) {
+		if (httpEvent.url.hash) {
+			this.host.querySelector(httpEvent.url.hash)?.scrollIntoView();
+		} else await super.applyPostRenderState(httpEvent);
+		(this.host.querySelector('[autofocus]') || this.host).focus();
+	}
+
+	redirect(location, responseRealtime = null) {
+		location = typeof location === 'string' ? new URL(location, this.location.origin) : location;
+		const width = Math.min(800, window.innerWidth);
+		const height = Math.min(600, window.innerHeight);
+		const left = (window.outerWidth - width) / 2;
+		const top = (window.outerHeight - height) / 2;
+		const popup = window.open(location, '_blank', `popup=true,width=${width},height=${height},left=${left},top=${top}`);
+		if (responseRealtime) {
+			Observer.set(this.navigator, 'redirecting', new Url/*NOT URL*/(location), { diff: true });
+			responseRealtime.addEventListener('close', (e) => {
+				window.removeEventListener('message', windowMessageHandler);
+				Observer.set(this.navigator, 'redirecting', null);
+				popup.postMessage('timeout:5');
+				setTimeout(() => {
+					popup.close();
+				}, 5000);
+			}, { once: true });
+			const windowMessageHandler = (e) => {
+				if (e.source === popup && e.data === 'close') {
+					responseRealtime.close();
+				}
+			};
+			window.addEventListener('message', windowMessageHandler);
+		}
+	}
+}

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

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