@webqit/webflo 0.8.77 → 0.9.1

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

@@ -0,0 +1,114 @@
+
+/**
+ * @imports
+ */
+import { Observer } from './Runtime.js';
+import WorkerComm from './WorkerComm.js';
+import Router from './Router.js';
+
+export default class RuntimeClient {
+
+	/**
+     * RuntimeClient
+     * 
+     * @param Context cx
+     */
+	constructor(cx) {
+		this.cx = cx;
+		const workerComm = new WorkerComm('/worker.js', { startMessages: true });
+		Observer.observe(workerComm, changes => {
+			//console.log('SERVICE_WORKER_STATE_CHANGE', changes[0].name, changes[0].value);
+		});
+	}
+
+	 /**
+     * Handles HTTP events.
+     * 
+     * @param HttpEvent       httpEvent
+     * @param Function        remoteFetch
+     * 
+     * @return Response
+     */
+	async handle(httpEvent, remoteFetch) {
+		// The app router
+        const router = new Router(this.cx, httpEvent.url.pathname);
+        const handle = async () => {
+			// --------
+			// ROUTE FOR DATA
+			// --------
+			let httpMethodName = httpEvent.request.method.toLowerCase();
+			let response = await router.route([httpMethodName === 'delete' ? 'del' : httpMethodName, 'default'], httpEvent, {}, async event => {
+				return remoteFetch(event.request);
+			}, remoteFetch);
+			if (!(response instanceof httpEvent.Response)) {
+                response = new httpEvent.Response(response);
+            }
+
+            // --------
+            // Rendering
+            // --------
+            if (response.ok && response.headers.contentType === 'application/json') {
+                await this.render(httpEvent, response, router);
+				await this.scrollIntoView(httpEvent);
+            } else if (!response.ok) {
+				await this.unrender();
+			}
+
+            return response;
+		};
+		
+		// --------
+        // PIPE THROUGH MIDDLEWARES
+        // --------
+        return (this.cx.middlewares || []).concat(handle).reverse().reduce((next, fn) => {
+            return () => fn.call(this.cx, httpEvent, router, next);
+        }, null)();
+	}
+
+	// Renderer
+    async render(httpEvent, response, router) {
+		let data = await response.json();
+		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 });
+			}
+			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', '');
+	}
+
+	// Normalize scroll position
+	async scrollIntoView(httpEvent) {
+		if (!(httpEvent.detail.src instanceof Element)) return;
+		await new Promise(res => setTimeout(res, 10));
+		let viewportTop, urlTarget;
+		if (httpEvent.url.hash && (urlTarget = document.querySelector(httpEvent.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();
+			await new Promise(res => setTimeout(res, 600));
+			document.documentElement.classList.remove('scroll-reset');
+		}
+	}
+
+}
+

package/src/{runtime → runtime-pi}/client/Storage.js

@@ -6,7 +6,7 @@
 import { _isString, _isUndefined } from '@webqit/util/js/index.js';
 import { Observer } from './Runtime.js';
 
-export default function(persistent = false, namespace = null) {
+export default function(namespace = null, persistent = false) {
 
     const storeType = persistent ? 'localStorage' : 'sessionStorage';
     if (!window[storeType]) {

package/src/{runtime → runtime-pi}/client/Url.js

@@ -2,12 +2,8 @@
 /**
  * @imports
  */
-import _isArray from '@webqit/util/js/isArray.js';
-import _isObject from '@webqit/util/js/isObject.js';
-import _isTypeObject from '@webqit/util/js/isTypeObject.js';
-import _isString from '@webqit/util/js/isString.js';
-import _isEmpty from '@webqit/util/js/isEmpty.js';
-import _with from '@webqit/util/obj/with.js';
+import { _with } from '@webqit/util/obj/index.js';
+import { _isArray, _isObject, _isTypeObject, _isString, _isEmpty } from '@webqit/util/js/index.js';
 import { wwwFormUnserialize, wwwFormSerialize } from '../util.js';
 import { Observer } from './Runtime.js';
 

package/src/{runtime/client/WorkerClient.js → runtime-pi/client/WorkerComm.js}

@@ -6,7 +6,7 @@
 import { _isFunction } from '@webqit/util/js/index.js';
 import { Observer } from './Runtime.js';
 
-export default class WorkerClient {
+export default class WorkerComm {
 
     constructor(file, params = {}) {
         this.ready = navigator.serviceWorker.ready;
@@ -73,7 +73,7 @@ export default class WorkerClient {
                 }
                 return this.post;
             },
-            receive: (callback, onAvailability = 1) => {
+            receive: callback => {
                 navigator.serviceWorker.addEventListener('message', callback);
                 return this.post;
             },

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

@@ -0,0 +1,242 @@
+
+/**
+ * imports
+ */
+import Fs from 'fs';
+import Url from 'url';
+import Path from 'path';
+import Webpack from 'webpack';
+import { _beforeLast } from '@webqit/util/str/index.js';
+import { _isObject, _isArray } from '@webqit/util/js/index.js';
+import * as DotJs from '@webqit/backpack/src/dotfiles/DotJs.js';
+
+/**
+ * @generate
+ */
+export async function generate() {
+    const cx = this || {};
+    // -----------
+    if (!cx.config.runtime?.Client) {
+        throw new Error(`The Client configurator "config.runtime.Client" is required in context.`);
+    }
+    const clientConfig = await (new cx.config.runtime.Client(cx)).read();
+    if (clientConfig.support_service_worker && !cx.config.runtime.client?.Worker) {
+        throw new Error(`The Service Worker configurator "config.runtime.client.Worker" is required in context.`);
+    }
+    const workerConfig = await (new cx.config.runtime.client.Worker(cx)).read();
+    // -----------
+    if (!cx.config.deployment?.Layout) {
+        throw new Error(`The Layout configurator "config.deployment.Layout" is required in context.`);
+    }
+    const layoutConfig = await (new cx.config.deployment.Layout(cx)).read();
+    const bundleOutput = { path: Path.resolve(cx.CWD || '', layoutConfig.PUBLIC_DIR), };
+    const dirSelf = Path.dirname(Url.fileURLToPath(import.meta.url)).replace(/\\/g, '/');
+    // -----------
+    // Generate client build
+    let genClient = getGen.call(cx, dirSelf, layoutConfig.CLIENT_DIR, clientConfig, `The Client Build.`);
+    if (clientConfig.support_oohtml) {
+        genClient.imports = { [`${dirSelf}/generate.oohtml.js`]: null, ...genClient.imports };
+    }
+    await bundle.call(cx, genClient, { ...bundleOutput, filename: 'bundle.js', }, true/* asModule */);
+    cx.logger && cx.logger.log('');
+    // -----------
+    // Generate worker build
+    if (clientConfig.support_service_worker) {
+        let genWorker = getGen.call(cx, `${dirSelf}/worker`, layoutConfig.WORKER_DIR, workerConfig, `The Worker Build.`);
+        await bundle.call(cx, genWorker, { ...bundleOutput, filename: 'worker.js', });
+        cx.logger && cx.logger.log('');
+    }
+}
+
+/**
+ * Compile routes.
+ * 
+ * @param string modulesDir
+ * @param string routesDir
+ * @param object paramsObj
+ * @param string desc
+ * 
+ * @return Object
+ */
+function getGen(modulesDir, routesDir, paramsObj, desc) {
+    const cx = this || {};
+    if (cx.logger) {
+        cx.logger.log(cx.logger.style.comment(`-----------------`));
+        cx.logger.log(desc);
+        cx.logger.log(cx.logger.style.comment(`-----------------`));
+        cx.logger.log('');
+    }
+    // ------------------
+    const gen = { imports: {}, code: [], };
+    // ------------------
+    // >> Modules import
+    gen.imports[`${modulesDir}/index.js`] = `{ start }`;
+    gen.code.push(``);
+    // ------------------
+    // >> Routes mapping
+    gen.code.push(`// >> Routes`);
+    declareRoutesObj.call(cx, gen, routesDir, 'layout', '');
+    gen.code.push(``);
+    // ------------------
+    // >> Params
+    gen.code.push(`// >> Params`);
+    declareParamsObj.call(cx, gen, paramsObj, 'params');
+    gen.code.push(``);
+    // ------------------
+    // >> Startup
+    gen.code.push(`// >> Startup`);
+    gen.code.push(`start.call({ layout, params })`);
+    return gen;
+}
+
+/**
+ * Compile routes.
+ * 
+ * @param object gen
+ * @param string routesDir
+ * @param string varName
+ * 
+ * @return void
+ */
+function declareRoutesObj(gen, routesDir, varName) {
+    const cx = this || {};
+    cx.logger && cx.logger.log(`> Declaring routes...`);
+    // ----------------
+    // Directory walker
+    const walk = (dir, callback) => {
+        Fs.readdirSync(dir).forEach(f => {
+            let resource = Path.join(dir, f);
+            if (Fs.statSync(resource).isDirectory()) {
+                walk(resource, callback);
+            } else {
+                let ext = Path.extname(resource) || '';
+                callback(resource, ext);
+            }
+        });
+    };
+    // ----------------
+    // >> Routes mapping
+    gen.code.push(`const ${varName} = {};`);
+    let indexCount = 0;
+    if (routesDir && Fs.existsSync(routesDir)) {
+        let clientDirname = routesDir.replace(/\\/g, '/').split('/').pop();
+        walk(routesDir, (file, ext) => {
+            //relativePath = relativePath.replace(/\\/g, '/');
+            if (file.replace(/\\/g, '/').endsWith('/index.js')) {
+                let relativePath = Path.relative(routesDir, file).replace(/\\/g, '/');
+                // Import code
+                let routeName = 'index' + (++ indexCount);
+                // IMPORTANT: we;re taking a step back here so that the parent-child relationship for 
+                // the directories be involved
+                gen.imports[`../${clientDirname}/${relativePath}`] = '* as ' + routeName;
+                // Definition code
+                let routePath = _beforeLast('/' + relativePath, '/index.js');
+                gen.code.push(`${varName}['${routePath || '/'}'] = ${routeName};`);
+                // Show
+                cx.logger && cx.logger.log(`> ./${relativePath}`);
+            }
+        });
+    }
+    if (!indexCount) {
+        cx.logger && cx.logger.log(`> (none)`);
+    }
+    cx.logger && cx.logger.log(``);
+}
+
+/**
+ * Compile params.
+ * 
+ * @param object    gen
+ * @param object    paramsObj
+ * @param string   varName
+ * 
+ * @return void
+ */
+function declareParamsObj(gen, paramsObj, varName = null, indentation = 0) {
+    const cx = this || {};
+    // ----------------
+    // Params compilation
+    if (varName) gen.code.push(`const ${varName} = {`);
+    _isArray(paramsObj)
+    Object.keys(paramsObj).forEach(name => {
+        let _name = `    ${'    '.repeat(indentation)}${(_isArray(paramsObj) ? '' : (name.includes(' ') ? `'${name}'` : name) + ': ')}`;
+        if ([ 'boolean', 'number' ].includes(typeof paramsObj[name])) {
+            gen.code.push(`${_name}${paramsObj[name]},`);
+        } else if (_isArray(paramsObj[name])) {
+            gen.code.push(`${_name}[`);
+            declareParamsObj.call(cx, gen, paramsObj[name], null, indentation + 1);
+            gen.code.push(`    ${'    '.repeat(indentation)}],`);
+        } else if (_isObject(paramsObj[name])) {
+            gen.code.push(`${_name}{`);
+            declareParamsObj.call(cx, gen, paramsObj[name], null, indentation + 1);
+            gen.code.push(`    ${'    '.repeat(indentation)}},`);
+        } else {
+            gen.code.push(`${_name}'${paramsObj[name]}',`);
+        }
+    });
+    if (varName) gen.code.push(`};`);
+}
+
+/**
+ * Bundle generated file
+ * 
+ * @param object    gen
+ * @param object    output
+ * @param boolean   asModule
+ * 
+ * @return Promise
+ */
+function bundle(gen, output, asModule = false) {
+    const cx = this || {};
+    const moduleFile = Path.join(output.path, `${_beforeLast(output.filename, '.')}.esm.js`);
+    // ------------------
+    // >> Show waiting...
+    if (cx.logger) {
+        let waiting = cx.logger.waiting(cx.logger.f`Writing the ES module file: ${moduleFile}`);
+        waiting.start();
+        DotJs.write(gen, moduleFile, 'ES Module file');
+        waiting.stop();
+        cx.logger.info(cx.logger.f`The module file: ${moduleFile}`);
+    } else {
+        DotJs.write(gen, moduleFile, 'ES Module file');
+    }
+    // ----------------
+    // >> Webpack config
+    const bundlingConfig = { entry: moduleFile, output };
+    if (asModule) {
+        bundlingConfig.experiments = { outputModule: true, };
+        bundlingConfig.output.environment = bundlingConfig.output.environment || {};
+        if (!('module' in bundlingConfig.output)) {
+            bundlingConfig.output.module = true;
+            bundlingConfig.output.environment.module = true;
+        }
+    }
+    // ----------------
+    // The bundling process
+    return new Promise(resolve => {
+        let waiting;
+        if (cx.logger) {
+            waiting = cx.logger.waiting(`Bundling...`);
+            cx.logger.log('');
+            cx.logger.log('> Bundling...');
+            cx.logger.info(cx.logger.f`FROM: ${bundlingConfig.entry}`);
+            cx.logger.info(cx.logger.f`TO: ${bundlingConfig.output.path + '/' + bundlingConfig.output.filename}`);
+            cx.logger.log('');
+            waiting.start();
+        }
+        // Run
+        let compiler = Webpack(bundlingConfig);
+        compiler.run((err, stats) => {
+            waiting.stop();
+            if (err) {
+                cx.logger.title(`Errors!`);
+                cx.logger.error(err);
+            }
+            let log = stats.toString({ colors: true, });
+            cx.logger && cx.logger.log(log);
+            // Remove moduleFile build
+            //Fs.unlinkSync(bundlingConfig.entry);
+            resolve(log);
+        });
+    });
+}

package/src/runtime-pi/client/generate.oohtml.js

@@ -0,0 +1,7 @@
+
+/**
+ * @imports
+ */
+import { OOHTML } from '@webqit/oohtml-ssr/apis.js';
+
+OOHTML.call( window );

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

@@ -0,0 +1,18 @@
+
+/**
+ * @imports
+ */
+import Context from './Context.js';
+import RuntimeClient from './RuntimeClient.js';
+import Runtime from './Runtime.js';
+
+/**
+ * @start
+ */
+export async function start(clientCallback = null) {
+    const cx = this || {};
+    const defaultClientCallback = _cx => new RuntimeClient(_cx);
+    return new Runtime(Context.create(cx), ( ...args ) => {
+        return clientCallback ? clientCallback( ...args.concat( defaultClientCallback ) ) : defaultClientCallback( ...args );
+    });
+}

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

@@ -0,0 +1,27 @@
+
+const {
+    URL,
+    fetch,
+    Headers,
+    Request,
+    Response,
+    FormData,
+    ReadableStream,
+    File,
+    Blob
+} = globalThis;
+
+/**
+ * @exports
+ */
+export {
+    URL,
+    fetch,
+    Headers,
+    Request,
+    Response,
+    FormData,
+    ReadableStream,
+    File,
+    Blob,
+}

package/src/runtime-pi/client/worker/Context.js

@@ -0,0 +1,7 @@
+
+/**
+ * @imports
+ */
+import _Contex from '../Context.js';
+
+export default class Context extends _Contex {}