@webqit/webflo 0.8.76 → 0.9.0

package/src/runtime/client/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;
-	}
-
-}

package/src/runtime/client/NavigationEvent.js

@@ -1,21 +0,0 @@
-
-/**
- * @imports
- */
-import _NavigationEvent from '../_NavigationEvent.js';
-import _FormData from '../_FormData.js';
-
-/**
- * The ClientNavigationEvent class
- */
-export default _NavigationEvent({
-    URL,
-    Request,
-    Response,
-    Headers,
-    FormData: _FormData(FormData),
-    File,
-    Blob,
-    ReadableStream,
-    fetch,
-});

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/StdRequest.js

@@ -1,74 +0,0 @@
-
-/**
- * @imports
- */
-import { _isTypeObject, _isFunction } from '@webqit/util/js/index.js';
-import { wwwFormUnserialize, wwwFormSet } from '../util.js';
-
-/**
- * The Request class
- */
-export default class StdRequest extends Request {
-    
-    constructor(input, init) {
-        var src;
-        if (input instanceof Request) {
-            src = input.clone();
-        }
-        super(...arguments);
-        this.src = src;
-    }
-
-    get destination() {
-        return this.src ? this.src.destination : '';
-    }
-
-    clone() {
-        return new this.constructor(this.src || super.clone());
-    }
-
-    get cookies() {
-        if (!this._cookies) {
-            this._cookies = wwwFormUnserialize(this.headers.cookie, {}, ';');
-        }
-        return this._cookies;
-    }
-            
-    // Payload
-    parse(force = false) {
-        if (!this._submits || force) {
-            this._submits = new Promise(async resolve => {
-                var request = this.clone();
-                var contentType = request.headers['content-type'] || '';
-                var submits = {
-                    inputs: {},
-                    files: {},
-                    type: contentType === 'application/x-www-form-urlencoded' || contentType.startsWith('multipart/') || (!contentType && !['get'].includes(request.method.toLowerCase())) ? 'form-data' 
-                        : (contentType === 'application/json' ? 'json'
-                            : (contentType === 'text/plain' ? 'plain' 
-                                : 'other')),
-                };
-                if (submits.type === 'form-data') {
-                    try {
-                        const payload = await request.formData();
-                        for(var [ name, value ] of payload.entries()) {
-                            if (value instanceof File) {
-                                wwwFormSet(submits.files, name, value);
-                            } else {
-                                wwwFormSet(submits.inputs, name, value);
-                            }
-                        }
-                    } catch(e) { }
-                } else {
-                    submits.inputs = await (submits.type === 'json' 
-                        ? request.json() : (
-                            submits.type === 'plain' ? request.text() : request.arrayBuffer()
-                        )
-                    )
-                }
-                resolve(submits);
-            });
-        }
-        return this._submits;
-    }
-}