@webqit/webflo 0.11.61 → 1.0.0

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

@@ -0,0 +1,179 @@
+import { WebfloClient } from './WebfloClient.js';
+import { Context } from './Context.js';
+
+const { Observer } = webqit;
+
+export class WebfloRootClient1 extends WebfloClient {
+
+	static get Context() { return Context; }
+
+	static create(host, cx = {}) {
+        return new this(host, this.Context.create(cx));
+    }
+
+	#cx;
+	get cx() { return this.#cx; }
+
+	constructor(host, cx) {
+		if (!(host instanceof Document)) {
+			throw new Error('Argument #1 must be a Document instance');
+		}
+		super(host);
+		if (!(cx instanceof this.constructor.Context)) {
+			throw new Error('Argument #2 must be a Webflo Context instance');
+		}
+		this.#cx = cx;
+	}
+
+	initialize() {
+		// Main initializations
+		let undoControl = super.initialize();
+		// Bind global prompt handlers
+        const promptsHandler = (e) => {
+            e.stopPropagation();
+            setTimeout(() => {
+                if (e.defaultPrevented || e.immediatePropagationStopped) return;
+				let message = e.data;
+				if (e.data?.message) {
+					message = e.data.message + (e.data.details ? `\r\n${e.data.details}` : '');
+				}
+                window.queueMicrotask(() => {
+					if (e.type === 'confirm') {
+						e.respondWith(confirm(message));
+					} else if (e.type === 'prompt') {
+						e.respondWith(prompt(message));
+					}
+				});
+            }, 10);
+        };
+        this.backgroundMessaging.handleMessages('confirm', promptsHandler);
+        this.backgroundMessaging.handleMessages('prompt', promptsHandler);
+		// Respond to background activity request at pageload
+		const scope = {};
+        if (scope.backgroundMessagingMeta = document.querySelector('meta[name="X-Background-Messaging"]')) {
+			scope.backgroundMessaging = this.$createBackgroundMessagingFrom(scope.backgroundMessagingMeta.content);
+			this.backgroundMessaging.add(scope.backgroundMessaging);
+        }
+        if (scope.hydrationData = document.querySelector('script[rel="hydration"][type="application/json"]')) {
+			try {
+				const hydrationDataJson = JSON.parse((scope.hydrationData.textContent + '').trim());
+				const httpEvent = this.constructor.HttpEvent.create(null, { url: this.location.href});
+				window.queueMicrotask(() => {
+					this.render(httpEvent, hydrationDataJson);
+				});
+			} catch(e) {}
+        }
+		// Service Worker && COMM
+		if (this.cx.params.service_worker?.filename) {
+			const { public_base_url: base, service_worker: { filename, ...restServiceWorkerParams } } = this.cx.params;
+			const { vapid_key_env, push_registration_url_env, ..._restServiceWorkerParams } = restServiceWorkerParams;
+			const swParams = {
+				..._restServiceWorkerParams,
+				VAPID_PUBLIC_KEY: this.cx.params.env[vapid_key_env],
+				PUSH_REGISTRATION_PUBLIC_URL: this.cx.params.env[push_registration_url_env],
+				startMessages: true
+			};
+			//this.workport.registerServiceWorker(base + filename, swParams);
+		}
+		if (window.opener) {
+			// Window opener pinging
+			const $undoControl = undoControl;
+			const beforeunloadHandler = () => {
+				window.opener.postMessage('close');
+			};
+			window.addEventListener('beforeunload', beforeunloadHandler);
+			undoControl = () => {
+				window.removeEventListener('beforeunload', beforeunloadHandler);
+				$undoControl();
+			};
+		}
+		return undoControl
+	}
+
+	/**
+	 * The following methods
+	 * are not to be inherited
+	 * by sub classes
+	 */
+
+	control() {
+		// IMPORTANT: we're calling super.controlClassic()
+		const undoControl = super.controlClassic((newHref) => {
+            try {
+                // Save current scroll position
+                this.host.history.replaceState({
+                    ...(this.currentEntry()?.getState?.() || {}),
+                    scrollPosition: this.host === window.document ? [window.scrollX, window.scrollY] : [this.host.scrollLeft, this.host.scrollTop,],
+                }, '', this.location.href);
+            } catch (e) { }
+            // Do actual location update
+            try { this.host.history.pushState({}, '', newHref); } catch (e) { }
+        });
+		// 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);
+        return () => {
+            this.host.removeEventListener('popstate', popstateHandler);
+            undoControl();
+        };
+	}
+
+    reload() {
+		return window.history.reload();
+	}
+
+	back() {
+		return window.history.back();
+	}
+
+	forward() {
+		return window.history.forward();
+	}
+
+	traverseTo(...args) {
+		return window.history.go(...args);
+	}
+
+	entries() {
+		return window.history;
+	}
+
+	currentEntry() {
+		return this._asEntry(history.state);
+	}
+
+	async updateCurrentEntry(params, url = null) {
+		window.history.replaceState(params.state, '', url);
+	}
+
+	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);
+	}
+
+	async applyPostRenderState(httpEvent) {
+		const destinationState = httpEvent.detail.destination?.getState() || {};
+		if (destinationState.scrollPosition?.length) {
+			window.scroll(...destinationState.scrollPosition);
+			(document.querySelector('[autofocus]') || document.body).focus();
+		}
+	}
+}

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

@@ -0,0 +1,109 @@
+import { WebfloRootClient1 } from './WebfloRootClient1.js';
+
+const { Observer } = webqit;
+
+export class WebfloRootClient2 extends WebfloRootClient1 {
+
+	control() {
+		// Detect source elements
+		let navigationOrigins = [];
+        // Capture all link-clicks
+		const clickHandler = (e) => {
+			if (!this._canIntercept(e)) 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)) 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) 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() { await runtime.navigate(url, init, detail); },
+			});
+		};
+		window.addEventListener('click', clickHandler);
+		window.addEventListener('submit', submitHandler);
+		window.navigation.addEventListener('navigate', navigateHandler);
+        return () => {
+            this.host.removeEventListener('click', clickHandler);
+            this.host.removeEventListener('submit', submitHandler);
+			window.navigation.removeEventListener('navigate', navigateHandler);
+        };
+	}
+
+    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);
+	}
+
+	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; }
+	}
+
+	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);
+	}
+}

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

@@ -0,0 +1,165 @@
+import { WebfloClient } from './WebfloClient.js';
+import { Url } from './Url.js';
+
+const { Observer } = webqit;
+
+export class WebfloSubClient extends WebfloClient {
+
+	static defineElement() {
+		const embedTagNames = 'webflo-embedded';
+		window.customElements.define(embedTagNames, class extends HTMLElement {
+	
+			#superRuntime;
+			#webfloControllerUninitialize;
+			#location;
+			#reflectAction;
+	
+			static get observedAttributes() { return ['location']; }
+
+			get startupFlight() {
+				return this.hasAttribute('location');
+			}
+	
+			get location() {
+				if (!this.#location) {
+					this.#location = new URL(this.getAttribute('location') || '', window.location.origin);
+				}
+				return this.#location;
+			}
+	
+			set location(value) {
+				if (!(value instanceof URL)) {
+					value = new URL(value, window.location.origin);
+				}
+				if (value.href === this.location.href) return;
+				this.#location = value;
+				this.setAttribute('location', value.href.replace(value.origin, ''));
+				if (!this.#reflectAction) {
+					this.webfloRuntime.navigate(value);
+				}
+			}
+
+			reflectLocation(location) {
+				this.#reflectAction = true;
+				this.location = location;
+				this.#reflectAction = false;
+			}
+	
+			attributeChangedCallback(name, oldValue, newValue) {
+				if (oldValue === newValue) return;
+				this.location = newValue;
+			}
+	
+			connectedCallback() {
+				this.#superRuntime = (this.parentNode?.closest(embedTagNames) || document).webfloRuntime;
+				this.#webfloControllerUninitialize = WebfloSubClient.create(this, this.#superRuntime).initialize();
+			}
+	
+			disconnectedCallback() {
+				this.#webfloControllerUninitialize();
+			}
+		});
+	}
+
+	static create(host, superRuntime) {
+        return new this(host, superRuntime);
+    }
+
+	#superRuntime;
+	get superRuntime() { return this.#superRuntime; }
+	
+	get cx() { return this.#superRuntime.cx; }
+
+	get workport() { return this.#superRuntime.workport; }
+
+	constructor(host, superRuntime) {
+		if (!(host instanceof HTMLElement)) {
+			throw new Error('Argument #1 must be a HTMLElement instance');
+		}
+		super(host);
+		if (!(superRuntime instanceof WebfloClient)) {
+			throw new Error('Argument #2 must be a Webflo Client instance');
+		}
+		this.#superRuntime = superRuntime;
+	}
+
+	initialize() {
+		if (this.host.location.origin !== window.location.origin) {
+			throw new Error(`Webflo embeddable origin violation in "${window.location}"`);
+		}
+		const uncontrols = super.initialize();
+		this.backgroundMessaging.setParent(this.#superRuntime.backgroundMessaging);
+		this.navigate(this.location.href);
+		return () => {
+			if (this.backgroundMessaging.parentNode === this.#superRuntime.backgroundMessaging) {
+				this.backgroundMessaging.setParent(null);
+			}
+			uncontrols();
+		};
+	}
+	
+	control() {
+		return super.controlClassic((newHref) => {
+			this.host.reflectLocation(newHref);
+		});
+	}
+
+    reload(params) {
+	}
+
+	back() {
+	}
+
+	forward() {
+	}
+
+	traverseTo(...args) {
+	}
+
+	entries() {
+	}
+
+	currentEntry() {
+	}
+
+	async updateCurrentEntry(params, url = null) {
+		this.host.reflectLocation(url);
+	}
+
+	async push(url, state = {}) {
+	}
+
+    hardRedirect(location, backgroundMessaging = 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 (backgroundMessaging) {
+			backgroundMessaging.postMessage('keepAlive');
+			Observer.set(this.navigator, 'redirecting', new Url/*NOT URL*/(location), { diff: true });
+			backgroundMessaging.addEventListener('close', (e) => {
+				Observer.set(this.navigator, 'redirecting', null);
+				popup.postMessage('timeout:5');
+				setTimeout(() => {
+					popup.close();
+				}, 5000);
+			});
+			window.addEventListener('message', (e) => {
+				if (e.source === popup && e.data === 'close') {
+					backgroundMessaging.close();
+				}
+			});
+		}
+    }
+
+	async applyPostRenderState(httpEvent) {
+		if (httpEvent.url.hash) {
+			this.host.querySelector(httpEvent.url.hash)?.scrollIntoView();
+		} else {
+			this.host.scrollTo(0, 0);
+		}
+		(this.host.querySelector('[autofocus]') || this.host).focus();
+	}
+}