@webqit/webflo 0.10.2 → 0.10.5

package/package.json

@@ -12,7 +12,7 @@
     "vanila-javascript"
   ],
   "homepage": "https://webqit.io/tooling/webflo",
-  "version": "0.10.2",
+  "version": "0.10.5",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@octokit/webhooks": "^7.15.1",
-    "@webqit/backpack": "^0.0.37",
-    "@webqit/oohtml-ssr": "^1.0.3",
+    "@webqit/backpack": "^0.1.0",
+    "@webqit/oohtml-ssr": "^1.0.6",
     "@webqit/util": "^0.8.9",
     "client-sessions": "^0.8.0",
     "esbuild": "^0.14.38",

package/src/Context.js

@@ -17,10 +17,14 @@ export default class Context {
             this[prop] = this.dict[prop];
         }
         if (arguments.length > 1) {
-            this.dict.CWD = CD;
+            Object.defineProperty(this.dict, 'CWD', { get: () => CD });
         }
     }
 
+    get name() {
+        return 'webflo';
+    }
+
     // create
     static create(...args) {
         return new this(...args);
@@ -31,9 +35,9 @@ export default class Context {
         return this.dict.CWD || '';
     }
 
-    // webflo
-    get webflo() {
-        return this.dict.webflo || {};
+    // meta
+    get meta() {
+        return this.dict.meta || {};
     }
 
     // app

package/src/config-pi/deployment/Env.js

@@ -3,9 +3,9 @@
  * imports
  */
 import { _merge } from '@webqit/util/obj/index.js';
-import Configurator from '../../Configurator.js';
+import { Dotfile } from '@webqit/backpack';
 
-export default class Env extends Configurator {
+export default class Env extends Dotfile {
 
     // Base name
     get name() {

package/src/config-pi/deployment/Layout.js

@@ -3,9 +3,9 @@
  * imports
  */
 import { _merge } from '@webqit/util/obj/index.js';
-import Configurator from '../../Configurator.js';
+import { Dotfile } from '@webqit/backpack';
 
-export default class Layout extends Configurator {
+export default class Layout extends Dotfile {
 
     // Base name
     get name() {

package/src/config-pi/deployment/Origins.js

@@ -6,9 +6,9 @@ import Url from 'url';
 import { _merge } from '@webqit/util/obj/index.js';
 import { _before } from '@webqit/util/str/index.js';
 import { _isObject, _isTypeObject } from '@webqit/util/js/index.js';
-import Configurator from '../../Configurator.js';
+import { Dotfile } from '@webqit/backpack';
 
-export default class Origins extends Configurator {
+export default class Origins extends Dotfile {
 
     // Base name
     get name() {

package/src/config-pi/deployment/Virtualization.js

@@ -4,9 +4,9 @@
  */
 import { _merge } from '@webqit/util/obj/index.js';
 import { _isObject } from '@webqit/util/js/index.js';
-import Configurator from '../../Configurator.js';
+import { Dotfile } from '@webqit/backpack';
 
-export default class Virtualization extends Configurator {
+export default class Virtualization extends Dotfile {
 
     // Base name
     get name() {

package/src/config-pi/runtime/Client.js

@@ -5,9 +5,9 @@
 import { _merge } from '@webqit/util/obj/index.js';
 import { _isNumeric } from '@webqit/util/js/index.js';
 import { _before, _after } from '@webqit/util/str/index.js';
-import Configurator from '../../Configurator.js';
+import { Dotfile } from '@webqit/backpack';
 
-export default class Client extends Configurator {
+export default class Client extends Dotfile {
 
     // Base name
     get name() {
@@ -23,8 +23,10 @@ export default class Client extends Configurator {
     withDefaults(config) {
         return _merge(true, {
             bundle_filename: 'bundle.js',
-            support_oohtml: true,
-            support_service_worker: true,
+            public_base_url: '/',
+            address_bar_synchrony: 'standard',
+            oohtml_support: 'full',
+            service_worker_support: true,
             worker_scope: '/',
             worker_filename: 'worker.js',
         }, config);
@@ -32,6 +34,20 @@ export default class Client extends Configurator {
 
     // Questions generator
     questions(config, choices = {}) {
+        // Choices
+        const CHOICES = _merge({
+            address_bar_synchrony: [
+                {value: 'standard', title: 'standard - on response'},
+                {value: 'instant', title: 'instant - on request'},
+            ],
+            oohtml_support: [
+                {value: 'full', title: 'Full'},
+                {value: 'namespacing', title: 'namespacing'},
+                {value: 'scripting', title: 'scripting'},
+                {value: 'templating', title: 'templating'},
+                {value: 'none', title: 'none'},
+            ],
+        }, choices);
         // Questions
         return [
             {
@@ -41,30 +57,45 @@ export default class Client extends Configurator {
                 initial: config.bundle_filename,
             },
             {
-                name: 'support_oohtml',
-                type: 'toggle',
-                message: 'Support rendering with OOHTML? (Adds OOHTML to your app\'s bundle.)',
-                active: 'YES',
-                inactive: 'NO',
-                initial: config.support_oohtml,
+                name: 'public_base_url',
+                type: 'text',
+                message: '[public_base_url]: Enter the base-URL for public resource URLs',
+                initial: DATA.public_base_url,
+                validation: ['important'],
+            },
+            {
+                name: 'address_bar_synchrony',
+                type: 'select',
+                message: '[address_bar_synchrony]: Specify how the address bar synchronizes with navigation',
+                choices: CHOICES.address_bar_synchrony,
+                initial: this.indexOfInitial(CHOICES.address_bar_synchrony, config.address_bar_synchrony),
+                validation: ['important'],
+            },
+            {
+                name: 'oohtml_support',
+                type: 'select',
+                message: '[oohtml_support]: (Adds OOHTML to your app\'s bundle.) Specify OOHTML support level',
+                choices: CHOICES.oohtml_support,
+                initial: this.indexOfInitial(CHOICES.oohtml_support, config.oohtml_support),
+                validation: ['important'],
             },
             {
-                name: 'support_service_worker',
+                name: 'service_worker_support',
                 type: 'toggle',
                 message: 'Support Service Worker?',
                 active: 'YES',
                 inactive: 'NO',
-                initial: config.support_service_worker,
+                initial: config.service_worker_support,
             },
             {
                 name: 'worker_scope',
-                type: (prev, answers) => answers.support_service_worker ? 'text' : null,
+                type: (prev, answers) => answers.service_worker_support ? 'text' : null,
                 message: 'Specify the Service Worker scope',
                 initial: config.worker_scope,
             },
             {
                 name: 'worker_filename',
-                type: (prev, answers) => answers.support_service_worker ? 'text' : null,
+                type: (prev, answers) => answers.service_worker_support ? 'text' : null,
                 message: 'Specify the Service Worker filename',
                 initial: config.worker_filename,
             },

package/src/config-pi/runtime/Server.js

@@ -3,9 +3,9 @@
  * imports
  */
 import { _merge } from '@webqit/util/obj/index.js';
-import Configurator from '../../Configurator.js';
+import { Dotfile } from '@webqit/backpack';
 
-export default class Server extends Configurator {
+export default class Server extends Dotfile {
 
     // Base name
     get name() {
@@ -29,6 +29,7 @@ export default class Server extends Configurator {
                 force: false,
             },
             force_www: '',
+            oohtml_support: 'full',
             shared: false,
         }, config);
     }
@@ -42,13 +43,20 @@ export default class Server extends Configurator {
                 {value: 'add',},
                 {value: 'remove',},
             ],
+            oohtml_support: [
+                {value: 'full', title: 'full'},
+                {value: 'namespacing', title: 'namespacing'},
+                {value: 'scripting', title: 'scripting'},
+                {value: 'templating', title: 'templating'},
+                {value: 'none', title: 'none'},
+            ],
         }, choices);
         // Questions
         return [
             {
                 name: 'port',
                 type: 'number',
-                message: 'Enter port number',
+                message: '[port]: Enter port number',
                 initial: config.port,
                 validation: ['important'],
             },
@@ -62,31 +70,31 @@ export default class Server extends Configurator {
                     {
                         name: 'port',
                         type: 'number',
-                        message: 'Enter HTTPS port number',
+                        message: '[port]: Enter HTTPS port number',
                         validation: ['important'],
                     },
                     {
                         name: 'keyfile',
                         type: 'text',
-                        message: 'Enter SSL KEY file',
+                        message: '[keyfile]: Enter SSL KEY file',
                         validation: ['important'],
                     },
                     {
                         name: 'certfile',
                         type: 'text',
-                        message: 'Enter SSL CERT file',
+                        message: '[certfile]: Enter SSL CERT file',
                         validation: ['important'],
                     },
                     {
                         name: 'certdoms',
                         type: 'list',
-                        message: 'Enter the CERT domains (comma-separated)',
+                        message: '[certdoms]: Enter the CERT domains (comma-separated)',
                         validation: ['important'],
                     },
                     {
                         name: 'force',
                         type: 'toggle',
-                        message: 'Force HTTPS?',
+                        message: '[force]: Force HTTPS?',
                         active: 'YES',
                         inactive: 'NO',
                     },
@@ -95,14 +103,22 @@ export default class Server extends Configurator {
             {
                 name: 'force_www',
                 type: 'select',
-                message: 'Force add/remove "www" on hostname?',
+                message: '[force_www]: Force add/remove "www" on hostname?',
                 choices: CHOICES.force_www,
                 initial: this.indexOfInitial(CHOICES.force_www, config.force_www),
             },
+            {
+                name: 'oohtml_support',
+                type: 'select',
+                message: '[oohtml_support]: Specify OOHTML support level',
+                choices: CHOICES.oohtml_support,
+                initial: this.indexOfInitial(CHOICES.oohtml_support, config.oohtml_support),
+                validation: ['important'],
+            },
             {
                 name: 'shared',
                 type: 'toggle',
-                message: 'Shared server?',
+                message: '[shared]: Shared server?',
                 active: 'YES',
                 inactive: 'NO',
                 initial: config.shared,

package/src/config-pi/runtime/client/Worker.js

@@ -5,9 +5,9 @@
 import { _merge } from '@webqit/util/obj/index.js';
 import { _isNumeric } from '@webqit/util/js/index.js';
 import { _before, _after } from '@webqit/util/str/index.js';
-import Configurator from '../../../Configurator.js';
+import { Dotfile } from '@webqit/backpack';
 
-export default class Worker extends Configurator {
+export default class Worker extends Dotfile {
 
     // Base name
     get name() {

package/src/config-pi/runtime/server/Headers.js

@@ -5,9 +5,9 @@
 import Url from 'url';
 import { _merge } from '@webqit/util/obj/index.js';
 import { _isObject } from '@webqit/util/js/index.js';
-import Configurator from '../../../Configurator.js';
+import { Dotfile } from '@webqit/backpack';
 
-export default class Headers extends Configurator {
+export default class Headers extends Dotfile {
 
     // Base name
     get name() {

package/src/config-pi/runtime/server/Redirects.js

@@ -6,9 +6,9 @@ import Url from 'url';
 import { _merge } from '@webqit/util/obj/index.js';
 import { _after } from '@webqit/util/str/index.js';
 import { _isObject, _isNumeric } from '@webqit/util/js/index.js';
-import Configurator from '../../../Configurator.js';
+import { Dotfile } from '@webqit/backpack';
 
-export default class Redirects extends Configurator {
+export default class Redirects extends Dotfile {
 
     // Base name
     get name() {

package/src/config-pi/static/Manifest.js

@@ -8,9 +8,9 @@ import { _merge } from '@webqit/util/obj/index.js';
 import { _isNumeric } from '@webqit/util/js/index.js';
 import { _before, _after } from '@webqit/util/str/index.js';
 import { initialGetIndex } from '@webqit/backpack/src/cli/Promptx.js';
-import Configurator from '../../Configurator.js';
+import { Dotfile } from '@webqit/backpack';
 
-export default class Manifest extends Configurator {
+export default class Manifest extends Dotfile {
 
     // Base name
     get name() {

package/src/config-pi/static/Ssg.js

@@ -4,9 +4,9 @@
  */
 import { _merge } from '@webqit/util/obj/index.js';
 import { _isObject } from '@webqit/util/js/index.js';
-import Configurator from '../../Configurator.js';
+import { Dotfile } from '@webqit/backpack';
 
-export default class Ssg extends Configurator {
+export default class Ssg extends Dotfile {
 
     // Base name
     get name() {

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

@@ -88,7 +88,7 @@ export default class Runtime {
 			// Needed to allow window.document.location
 			// to update to window.location
 			window.setTimeout(() => {
-				this.go(Url.copy(window.document.location), { src: window.document.location, srcType: 'history', });
+				this.go(Url.copy(window.document.location), {}, { src: window.document.location, srcType: 'history', });
 			}, 0);
 		});
 
@@ -98,8 +98,7 @@ export default class Runtime {
 		window.addEventListener('click', e => {
 			var anchor = e.target.closest('a');
 			if (!anchor || !anchor.href) return;
-			if (!anchor.target && !anchor.download && (!anchor.origin || anchor.origin === this.location.origin)) {
-				if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
+			if (!anchor.target && !anchor.download && this.isSpaRoute(anchor, e)) {
 				// Publish everything, including hash
 				this.go(Url.copy(anchor), {}, { src: anchor, srcType: 'link', });
 				// URLs with # will cause a natural navigation
@@ -129,8 +128,7 @@ export default class Runtime {
 			actionEl.href = submitParams.action;
 			// ---------------
 			// If not targeted and same origin...
-			if (!submitParams.target && (!actionEl.origin || actionEl.origin === this.location.origin)) {
-				if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;
+			if (!submitParams.target && this.isSpaRoute(actionEl, e)) {
 				// Build data
 				var formData = new FormData(form);
 				if ((submitter || {}).name) {
@@ -176,6 +174,22 @@ export default class Runtime {
         return window.history;
     }
 
+	// Check is-route
+	isSpaRoute(url, e) {
+		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;
+		if (!this.cx.params.routing) return true;
+		let b = url.pathname.split('/').filter(s => s);
+		const match = a => {
+			a = a.split('/').filter(s => s);
+			return a.reduce((prev, s, i) => prev && (s === b[i] || [s, b[i]].includes('-')), true);
+		};
+		return match(this.cx.params.routing.scope) && this.cx.params.routing.subscopes.reduce((prev, subscope) => {
+			return prev && !match(subscope);
+		}, true);
+	}
+
     /**
      * Performs a request.
      *
@@ -206,8 +220,10 @@ export default class Runtime {
             Observer.set(detail.submitter || {}, 'active', true);
         }
         // ------------
-        Observer.set(this.location, url, { detail: { ...init, ...detail }, });
         Observer.set(this.network, 'redirecting', null);
+		if (this.cx.params.address_bar_synchrony === 'instant') {
+			Observer.set(this.location, url, { detail: { ...init, ...detail }, });
+		}
         // ------------
 		// The request object
 		let request = this.generateRequest(url.href, init);
@@ -216,6 +232,11 @@ export default class Runtime {
 		// Response
 		let response = await this.clients.get('*').handle(httpEvent, ( ...args ) => this.remoteFetch( ...args ));
 		let finalResponse = this.handleResponse(httpEvent, response);
+		// ------------
+		if (this.cx.params.address_bar_synchrony !== 'instant') {
+			Observer.set(this.location, url, { detail: { ...init, ...detail }, });
+		}
+		// ------------
         // Return value
 		return finalResponse;
     }
@@ -263,7 +284,7 @@ export default class Runtime {
 			Observer.set(e.detail.src, 'active', false);
 			Observer.set(e.detail.submitter || {}, 'active', false);
 		}
-		if (response.redirected && this.isSameOrigin(response.url)) {
+		if (response.redirected && (new whatwag.URL(response.url)).origin === this.location.origin) {
 			Observer.set(this.location, { href: response.url }, {
 				detail: { isRedirect: true },
 			});
@@ -277,20 +298,4 @@ export default class Runtime {
 		return response;
 	}
 
-    /**
-     * 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;
-    }
-
 }

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

@@ -15,7 +15,7 @@ export default class RuntimeClient {
      */
 	constructor(cx) {
 		this.cx = cx;
-		if (this.cx.support_service_worker) {
+		if (this.cx.service_worker_support) {
 			const workerComm = new WorkerComm(this.cx.worker_filename, { scope: this.cx.worker_scope, startMessages: true });
 			Observer.observe(workerComm, changes => {
 				//console.log('SERVICE_WORKER_STATE_CHANGE', changes[0].name, changes[0].value);
@@ -35,6 +35,9 @@ export default class RuntimeClient {
 		// The app router
         const router = new Router(this.cx, httpEvent.url.pathname);
         const handle = async () => {
+			if (this.cx.params.address_bar_synchrony === 'instant') {
+				await this.render(httpEvent, {}, router);
+			}
 			// --------
 			// ROUTE FOR DATA
 			// --------
@@ -69,30 +72,40 @@ export default class RuntimeClient {
 
 	// Renderer
     async render(httpEvent, response, router) {
-		let data = await response.json();
+		let data = response.json ? await response.json() : response;
 		return router.route('render', httpEvent, data, async (httpEvent, 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: (httpEvent.detail || {}).srcType === 'init',
-					network: this.cx.runtime.network,
-					url: this.cx.runtime.location,
-				}, { update: true });
+			if (window.WebQit.DOM) {
+				await new Promise(res => window.WebQit.DOM.ready(res));
+			}
+			if (window.document.state) {
+				if (!window.document.state.env) {
+					window.document.setState({
+						env: 'client',
+						onHydration: (httpEvent.detail || {}).srcType === 'init',
+						network: this.cx.runtime.network,
+						url: this.cx.runtime.location,
+					}, { update: true });
+				}
+				window.document.setState({ page: data }, { update: 'merge' });
+			}
+			if (window.document.templates) {
+				window.document.body.setAttribute('template', 'page/' + httpEvent.url.pathname.split('/').filter(a => a).map(a => a + '+-').join('/'));
+				await new Promise(res => (window.document.templatesReadyState === 'complete' && res(), window.document.addEventListener('templatesreadystatechange', res)));
 			}
-			window.document.setState({ page: data }, { update: 'merge' });
-			window.document.body.setAttribute('template', 'page/' + httpEvent.url.pathname.split('/').filter(a => a).map(a => a + '+-').join('/'));
-            await new Promise(res => (window.document.templatesReadyState === 'complete' && res(), window.document.addEventListener('templatesreadystatechange', res)));
 			return window;
 		});
 	}
 
 	// Unrender
 	async unrender() {
-		window.document.setState({ page: {} }, { update: 'merge' });
-		window.document.body.setAttribute('template', '');
+		if (window.document.state) {
+			window.document.setState({ page: {} }, { update: 'merge' });
+		}
+		if (window.document.templates) {
+			window.document.body.setAttribute('template', '');
+		}
 	}
 
 	// Normalize scroll position