@webqit/webflo 0.11.21 → 0.11.22

package/README.md

@@ -7,25 +7,31 @@
 
 <!-- /BADGES -->
 
-Webflo is a universal *web*, *mobile*, and *API backend* framework built to solve for the underrated `.html` + `.css` + `.js` stack! This has been written  to facilitate working and thinking in vanilla HTML, CSS and JavaScript - for building more authentic, web-native applications!
+Webflo is a universal *web*, *mobile*, and *API backend* framework that gets it all done in vanilla HTML, CSS, and JavaScript! It's a powerful little thing written to facilitate building more authentic, web-native applications!
 
-Ok, we've put all of that up for a 10min straight read!
+Here, we've put all of that up for a 10min straight read!
+
+TL;DR: here's what's ahead...
+
++ web-native development and the vanilla advantage!
++ the path of least engineering!
 
 ## The Catch...
 
-The overall motivation for Webflo is to facilitate *web-native* development; to be the cool framework that draws on native web platform features - including new fascinating features we're proposing as standards! So, it gets a little bit "futuristic"! You thus have to be excited about taking a plunge to happily meet Webflo!
+Webflo is a framework on its own track - working and thinking in vanilla HTML, CSS and JavaScript! Instead of trying to follow certain norms, it takes a plunge to draw on native web platform features - plus some more futurisric, fascinating stuffs we're proposing as standards! This means that you also have to be excited about taking a plunge to happily meet Webflo!
 
 ## The Wins...
 
 Much of what eludes the web today...
 
-+ An overarching HTML-first thinking!
-+ The build-less, vanilla advantage!
-+ (Futuristic) Native reactivity!
-+ (Futuristic) Minimalist-JS philosophy!
-+ Universal-everything!
++ the long-missing framework design and architecture for a HTML-first thinking!
++ a focused standards-based philosophy that breeds more authentic applications!
+
+Plus native support for how you want to work...
 
-(Details just ahead!)
++ a new approach to reactivity that's based on no syntax at all but plain old JavaScript!
++ a new "imports" feature for HTML that makes HTML more reusable!
++ and much more.
 
 ## Documentation
 
@@ -767,7 +773,7 @@ Here, you are able to define reusable contents in a `<template>` element...
 </body>
 ```
 
-The *module* element - `<template>` - is able to load its contents from a remote `.html` file that serves as a bundle:
+The *module* element - `<template>` - is also able to load its contents from a remote `.html` file that serves as a bundle:
 
 ```html
 <!--
@@ -859,7 +865,7 @@ public/products
 
 #### In a Single Page Layout
 
-In a Single Page layout (as seen [earlier](#layout-and-templating-overview)), page-specific contents - e.g. main sections - are typically bundled together into one `bundle.html` file that can be embedded on the document root. Nested routes end up as nested `<template>` elements that form the equivalent of the application's URL structure.
+In a Single Page layout (as seen [earlier](#layout-and-templating-overview)), page-specific contents - e.g. main sections - are typically bundled together into one `bundle.html` file that can be embedded on the document root. Notice how nested routes end up as nested `<template>` elements that form the equivalent of the application's URL structure.
 
 ```html
 <!--
@@ -1258,7 +1264,7 @@ Observer.observe(document.state, 'data', e => {
 
 #### The `document.state.url` Object
 
-This is a *live* object that reperesents the properties of the application URL at any point in time. The object exposes the same URL properties as with the [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) API, but as *live* properties that can be observed as navigation happens, and modified to initiate navigation - all using the [Observer API](#the-observer-api).
+This is a *live* object that reperesents the properties of the application URL at any point in time. The object exposes the same URL properties as of a standard [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) object, but, here, as *live* properties that can be observed as navigation happens, and modified to initiate navigation - all using the [Observer API](#the-observer-api).
 
 ```js
 console.log(document.state.url) // { hash, host, hostname, href, origin, password, pathname, port, protocol, search, searchParams, username }

package/package.json

@@ -12,7 +12,7 @@
     "vanila-javascript"
   ],
   "homepage": "https://webqit.io/tooling/webflo",
-  "version": "0.11.21",
+  "version": "0.11.22",
   "license": "MIT",
   "repository": {
     "type": "git",

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

@@ -52,7 +52,6 @@ export default class Runtime {
      * @return void
      */
 	constructor(cx, clientCallback) {
-
         // ---------------
 		this.cx = cx;
         this.clients = new Map;
@@ -97,12 +96,12 @@ export default class Runtime {
 		// 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 && this.isSpaRoute(anchor, e)) {
+			var anchorEl = e.target.closest('a');
+			if (!anchorEl || !anchorEl.href) return;
+			if (!anchorEl.target && !anchorEl.download && this.isSpaRoute(anchorEl, e)) {
 				// Publish everything, including hash
-				this.go(Url.copy(anchor), {}, { src: anchor, srcType: 'link', });
-				if (!(_before(window.document.location.href, '#') === _before(anchor.href, '#') && anchor.href.includes('#'))) {
+				this.go(Url.copy(anchorEl), {}, { src: anchorEl, srcType: 'link', });
+				if (!this.isHashAction(anchorEl)) {
 					e.preventDefault();
 				}
 			}
@@ -143,7 +142,7 @@ export default class Runtime {
 					method: submitParams.method,
 					body: formData,
 				}, { ...submitParams, src: form, srcType: 'form', });
-				if (!(_before(window.document.location.href, '#') === _before(actionEl.href, '#') && actionEl.href.includes('#'))) {
+				if (!this.isHashAction(actionEl)) {
 					e.preventDefault();
 				}
 			}
@@ -188,8 +187,14 @@ export default class Runtime {
         return window.history;
     }
 
-	// Check is-route
-	isSpaRoute(url, e) {
+	// Check is-hash-action
+	isHashAction(urlObj) {
+		const isHashNav = _before(window.document.location.href, '#') === _before(urlObj.href, '#') && urlObj.href.includes('#');
+		return isHashNav && urlObj.hash.length > 1 && document.querySelector(urlObj.hash);
+	}
+
+	// Check is-spa-route
+	isSpaRoute(url, e = undefined) {
 		url = typeof url === 'string' ? new whatwag.URL(url) : url;
 		if (url.origin && url.origin !== this.location.origin) return false;
 		if (e && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) return false;
@@ -278,13 +283,14 @@ export default class Runtime {
 			// ------------
 			if (response.redirected) {
 				Observer.set(this.location, { href: response.url }, { detail: { redirected: true }, });
+				Observer.set(this.network, 'requesting', null);
 			} else if (![302, 301].includes(finalResponse.status)) {
-				Observer.set(this.location, url);
+				Observer.set(this.location, Url.copy(url)/* copy() is important */);
+				Observer.set(this.network, 'requesting', null);
 			}
 			// ------------
 			// States
 			// ------------
-			Observer.set(this.network, 'requesting', null);
 			if (['link', 'form'].includes(detail.srcType)) {
 				detail.src.state && (detail.src.state.active = false);
             	detail.submitter && detail.submitter.state && (detail.submitter.state.active = false);
@@ -330,10 +336,20 @@ export default class Runtime {
 		if (!(response instanceof Response)) { response = new Response(response); }
 		if (!response.redirected) {
 			let location = response.headers.get('Location');
-			if (location && response.status === this._xRedirectCode) {
-				response.attrs.status = parseInt(response.headers.get('X-Redirect-Code'));
-				Observer.set(this.network, 'redirecting', location);
-				window.location = location;
+			if (location) {
+				let xActualRedirectCode = parseInt(response.headers.get('X-Redirect-Code'));
+				if (xActualRedirectCode && response.status === this._xRedirectCode) {
+					response.attrs.status = xActualRedirectCode;
+					Observer.set(this.network, 'redirecting', location);
+					window.location = location;
+				} else if ([302,301].includes(response.status)) {
+					if (!this.isSpaRoute(location)) {
+						Observer.set(this.network, 'redirecting', location);
+						window.location = location;
+					} else {
+						this.go(location, {}, { srcType: 'rdr' });
+					}
+				}
 			}
 		}
 		return response;

package/test/index.test.js

@@ -1,10 +1,11 @@
+
 /**
  * @imports
  */
 import { config, runtime, Context } from '../src/index.js';
 
 let client = {
-    handle: function(httpEvent) {
+    handle: function( httpEvent ) {
         return new httpEvent.Response({ abcd: '1234' }, {
             status: 302,
             headers: {
@@ -18,8 +19,8 @@ let client = {
     },
 };
 
-const cx = Context.create({ config: config, });
-const clientCallback = (_cx, hostName, defaultClientCallback) => client;
-const app = await runtime.server.start.call(cx, clientCallback);
+const cx = Context.create( { config: config, } );
+const clientCallback = ( _cx, hostName, defaultClientCallback ) => client;
+const app = await runtime.server.start.call( cx, clientCallback );
 
-const response = await app.go('http://localhost/', { headers: { range: 'bytes=0-5, 6' } } );
+const response = await app.go( 'http://localhost/', { headers: { range: 'bytes=0-5, 6' } } );