@webqit/webflo 0.11.20 → 0.11.23

package/README.md

@@ -7,41 +7,81 @@
 
 <!-- /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 specifically to draw directly on the plain old stack at the language level - to facilitate building 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 straight read!
+Here, we've put all of that up for a 10min straight read!
 
-> **Note**
-> <br>Depending on your current framework background, the hardest part of Webflo might be having to break ties with something that isn't conventional to the `.html` + `.css` + `.js` stack: all of that JSX, CSS-in-JS, etc.!
+TL;DR: here's what's ahead...
+
++ web-native development and the vanilla advantage!
++ the path of least engineering!
+
+## The Catch...
+
+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...
 
-## Documentation 
++ 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...
+
++ 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
+
+All of Webflo in a 10-min read!
 
 + [Overview](#overview)
 + [Installation](#installation)
 + [Concepts](#concepts)
+  + [Handler Functions and Layout](#handler-functions-and-layout)
+  + [Step Functions and Workflows](#step-functions-and-workflows)
+  + [Pages, Layout and Templating](#pages-layout-and-templating)
+  + [Client and Server-Side Rendering](#client-and-server-side-rendering)
+  + [Requests and Responses](#requests-and-responses)
 + [Webflo Applications](#webflo-applications)
+  + [Client-Side Applications](#client-side-applications)
+  + [Progressive Web Apps](#progressive-web-apps)
+  + [API Backends](#api-backends)
+  + [Static Sites](#static-sites)
 + [Webflo Config](#webflo-config)
-+ [Technology Stack](#technology-stack)
++ [Webflo Tooling](#webflo-tooling)
+  + [OOHTML](#oohtml)
+  + [OOHTML SSR](#oohtml-ssr)
+  + [OOHTML CLI](#oohtml-cli)
+  + [The Observer API](#the-observer-api)
 + [Getting Started](#getting-started)
 + [Getting Involved](#getting-involved)
 
 ## Overview
 
 <details>
- <summary><b>Build <i>anything</i></b> - from as basic as a static <code>index.html</code> page to as rich as a universal app that's either a <i>Multi Page Application (MPA)</i>, <i>Single Page Application (SPA)</i>, or a hybrid of these, implementing <i>Server Side Rendering (SSR)</i>, <i>Client Side Rendering (CSR)</i>, or a hybrid of these, offline and <i>PWA</i> capabilities, etc. - this time, <i>without loosing the vanilla advantage</i>!
+ <summary><b>Build <i>anything</i></b> - from as basic as a static <code>index.html</code> page to as rich as a universal app that's either a <i>Multi Page Application (MPA)</i>, <i>Single Page Application (SPA)</i>, or a hybrid of both, implementing <i>Server Side Rendering (SSR)</i>, <i>Client Side Rendering (CSR)</i>, or a hybrid of both, offline and <i>PWA</i> capabilities, etc. - this time, <i>without loosing the vanilla advantage</i>!
 </summary>
  
 Here's a glimpse of your Webflo app.
 
-For when your application has a Server side.
+For when your application is a static site, or has static files to serve.
 + The `public` directory for static files.
-+ The `server` directory for server-side routing. (i.e. dynamic request handling on the server - in the case of Multi Page Applications, API backends, etc.)
 
   ```shell
   my-app
-    ├── server/index.js
     └── public/logo.png
   ```
+
+For when your application has a Server side.
++ The `server` directory for server-side routing. (i.e. dynamic request handling on the server - in the case of Multi Page Applications, API backends, etc.)
+
+  ```shell
+  my-app
+    └── server/index.js
+  ```
   
   And a typical `index.js` route handler has the following anatomy.
 
@@ -100,7 +140,7 @@ For when your application has a Client side.
     └── worker/index.js
   ```
   
-  And in both cases, a typical `index.js` route handler has the following anatomy.
+  And in both cases, a typical `index.js` route handler has the following anatomy. (Same with server-side handlers.)
 
   ```js
   /**
@@ -385,7 +425,7 @@ export default function(event, context, next) {
 }
 ```
 
-This step-based workflow helps to decomplicate routing and gets us scaling horizontally as our application grows larger.
+We get a step-based workflow that helps to decomplicate routing and lets us scale horizontally as our application grows larger.
 
 <details>
 <summary>More details...</summary>
@@ -525,7 +565,7 @@ So, above, should our handler receive static file requests like `http://localhos
 
 ```shell
 my-app
-  ├── server/index.js ------------------------- http://localhost:3000, http://localhost:3000/prodcuts, http://localhost:3000/prodcuts/stickers, etc
+  ├── server/index.js ------------------------- http://localhost:3000, http://localhost:3000/products, http://localhost:3000/products/stickers, etc
   └── public/logo.png ------------------------- http://localhost:3000/logo.png
 ```
 
@@ -567,7 +607,7 @@ Now we get the following handler-to-URL mapping for our application:
 ```shell
 my-app
   ├── worker/index.js ------------------------- http://localhost:3000/about, http://localhost:3000/logo.png
-  ├── server/index.js ------------------------- http://localhost:3000, http://localhost:3000/prodcuts, http://localhost:3000/prodcuts/stickers, etc
+  ├── server/index.js ------------------------- http://localhost:3000, http://localhost:3000/products, http://localhost:3000/products/stickers, etc
   └── public/logo.png ------------------------- http://localhost:3000/logo.png
 ```
 
@@ -606,7 +646,7 @@ Our overall handler-to-URL mapping for this application now becomes:
 my-app
   ├── client/index.js ------------------------- http://localhost:3000/login
   ├── worker/index.js ------------------------- http://localhost:3000/about, http://localhost:3000/logo.png
-  ├── server/index.js ------------------------- http://localhost:3000, http://localhost:3000/prodcuts, http://localhost:3000/prodcuts/stickers, etc
+  ├── server/index.js ------------------------- http://localhost:3000, http://localhost:3000/products, http://localhost:3000/products/stickers, etc
   └── public/logo.png ------------------------- http://localhost:3000/logo.png
 ```
 
@@ -692,7 +732,7 @@ In a Multi Page Application (with an individual-page architecture), each page is
 my-app
   └── public
       ├── about/index.html ------------------------- <!DOCTYPE html>
-      ├── prodcuts/index.html ---------------------- <!DOCTYPE html>
+      ├── products/index.html ---------------------- <!DOCTYPE html>
       ├── index.html ------------------------------- <!DOCTYPE html>
       ├── header.html ------------------------------ <header></header> <!-- To appear at top of each index.html page -->
       └── footer.html ------------------------------ <footer></footer> <!-- To appear at bottom of each index.html page -->
@@ -704,7 +744,7 @@ In a Single Page Application, each page is the same `index.html` document, and i
 my-app
   └── public
       ├── about/main.html -------------------------- <main></main> <!-- To appear at main area of index.html -->
-      ├── prodcuts/main.html ----------------------- <main></main> <!-- To appear at main area of index.html -->
+      ├── products/main.html ----------------------- <main></main> <!-- To appear at main area of index.html -->
       ├── main.html -------------------------------- <main></main> <!-- To appear at main area of index.html -->
       └── index.html ------------------------------- <!DOCTYPE html>
 ```
@@ -733,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
 <!--
@@ -825,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
 <!--
@@ -876,7 +916,7 @@ It's all a *layout* thing, so a hybrid of the two architectures above is possibl
 my-app
   └── public
       ├── about/index.html ------------------------- <!DOCTYPE html> <!-- Document root 1 -->
-      ├── prodcuts
+      ├── products
       │     ├── free/main.html --------------------------- <main></main> <!-- To appear at main area of document root 2 -->
       │     ├── paid/main.html --------------------------- <main></main> <!-- To appear at main area of document root 2 -->
       │     ├── main.html -------------------------------- <main></main> <!-- To appear at main area of document root 2 -->
@@ -886,7 +926,7 @@ my-app
       └── footer.html ------------------------------ <footer></footer> <!-- To appear at bottom of each document root -->
 ```
 
-The above gives us three document roots: `/index.html`, `/about/index.html`, `/prodcuts/index.html`. The `/prodcuts` route doubles as a Single Page Application such that visiting the `/prodcuts` route loads the document root `/prodcuts/index.html` and lets Webflo SPA routing determine which of `/prodcuts/main.html`, `/prodcuts/free/main.html`, `/prodcuts/paid/main.html` is imported on a given URL.
+The above gives us three document roots: `/index.html`, `/about/index.html`, `/products/index.html`. The `/products` route doubles as a Single Page Application such that visiting the `/products` route loads the document root `/products/index.html` and lets Webflo SPA routing determine which of `/products/main.html`, `/products/free/main.html`, `/products/paid/main.html` is imported on a given URL.
 
 Webflo ensures that only the amount of JavaScript for a document root is actually loaded! So, above, a common JavaScript build is shared across the three document roots alongside an often tiny root-specific build.
 
@@ -1224,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 }
@@ -1973,10 +2013,15 @@ A simple tool, like [`staticgen`](https://github.com/tj/staticgen), or the basic
 
 Webflo comes *convention-first*! But it is entirely configurable for when you need it! The easiest way to do this is to run the command `webflo config` and follow the walkthrough. To simply get an overview, use the command `webflo config help`, and all commands and their description are shown.
 
-## Technology Stack
+## Webflo Tooling
 
 Webflo applications are often built on/with the following technologies.
 
++ [OOHTML](#oohtml)
++ [OOHTML SSR](#oohtml-ssr)
++ [OOHTML CLI](#oohtml-cli)
++ [The Observer API](#the-observer-api)
+
 ### OOHTML
 
 [OOHTML](https://github.com/webqit/oohtml) is a proposed set of new features for HTML that makes it fun to hand-author your HTML documents! Within OOHTML are [HTML Modules](https://github.com/webqit/oohtml#html-modules) and [HTML Imports](https://github.com/webqit/oohtml#html-imports), [Reactive Scripts](https://github.com/webqit/oohtml#subscript) and more!

package/package.json

@@ -12,7 +12,7 @@
     "vanila-javascript"
   ],
   "homepage": "https://webqit.io/tooling/webflo",
-  "version": "0.11.20",
+  "version": "0.11.23",
   "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' } } );