@webqit/webflo 0.10.2 → 0.10.5

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

@@ -5,11 +5,13 @@
 import Fs from 'fs';
 import Url from 'url';
 import Path from 'path';
-import { _beforeLast } from '@webqit/util/str/index.js';
+import Jsdom from 'jsdom';
+import EsBuild from 'esbuild';
+import { _afterLast, _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';
+import { jsFile } from '@webqit/backpack/src/dotfile/index.js';
 import { gzipSync, brotliCompressSync } from 'zlib';
-import EsBuild from 'esbuild';
+import { urlPattern } from '../util.js';
 
 /**
  * @generate
@@ -20,6 +22,9 @@ export async function generate() {
     if (!cx.config.runtime?.Client) {
         throw new Error(`The Client configurator "config.runtime.Client" is required in context.`);
     }
+    if (!cx.config.deployment?.Layout) {
+        throw new Error(`The Client configurator "config.deployment.Layout" 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.`);
@@ -30,88 +35,201 @@ export async function generate() {
         throw new Error(`The Layout configurator "config.deployment.Layout" is required in context.`);
     }
     const layoutConfig = await (new cx.config.deployment.Layout(cx)).read();
+    // -----------
     const dirPublic = Path.resolve(cx.CWD || '', layoutConfig.PUBLIC_DIR);
+    const dirClient = Path.resolve(cx.CWD || '', layoutConfig.CLIENT_DIR);
+    const dirWorker = Path.resolve(cx.CWD || '', layoutConfig.WORKER_DIR);
     const dirSelf = Path.dirname(Url.fileURLToPath(import.meta.url)).replace(/\\/g, '/');
     // -----------
+    // Scan Subdocuments
+    const scanSubscopes = scope => {
+        let dir = Path.join(dirPublic, scope), passes = 0;
+        return [ Fs.readdirSync(dir).reduce((scopes, f) => {
+            let resource = Path.join(dir, f);
+            if (Fs.statSync(resource).isDirectory()) {
+                let subscope = Path.join(scope, f);
+                if (Fs.existsSync(Path.join(resource, 'index.html'))) {
+                    return scopes.concat(subscope);
+                }
+                passes ++;
+                return scopes.concat(scanSubscopes(subscope)[ 0 ]);
+            }
+            return scopes;
+        }, []), passes ];
+    };
+    // -----------
     // 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, `${dirPublic}/${clientConfig.bundle_filename}`, true/* asModule */);
-    cx.logger && cx.logger.log('');
+    const generateClient = async function(scope) {
+        let [ subscopes, passes ] = scanSubscopes(scope);
+        let routing = { scope, subscopes, passes };
+        let codeSplitting = !!(scope !== '/' || subscopes.length);
+        let outfileMain = Path.join(scope, clientConfig.bundle_filename),
+            outfileWebflo = _beforeLast(clientConfig.bundle_filename, '.js') + '.webflo.js';
+        let gen = { imports: {}, code: [], };
+        // ------------------
+        const initWebflo = gen => {
+            if (clientConfig.oohtml_support === 'namespacing') {
+                gen.imports[`${dirSelf}/oohtml/namespacing.js`] = null;
+            } else if (clientConfig.oohtml_support === 'scripting') {
+                gen.imports[`${dirSelf}/oohtml/scripting.js`] = null;
+            } else if (clientConfig.oohtml_support === 'templating') {
+                gen.imports[`${dirSelf}/oohtml/templating.js`] = null;
+            } else if (clientConfig.oohtml_support !== 'none') {
+                gen.imports[`${dirSelf}/oohtml/full.js`] = null;
+            }
+            gen.imports[`${dirSelf}/index.js`] = `* as Webflo`;
+            gen.code.push(``);
+            gen.code.push(`if (!globalThis.WebQit) {`);
+            gen.code.push(`    globalThis.WebQit = {}`);
+            gen.code.push(`}`);
+            gen.code.push(`WebQit.Webflo = Webflo`);
+            return gen;
+        };
+        // ------------------
+        if (!codeSplitting) {
+            initWebflo(gen);
+        } else if (scope === '/') {
+            if (cx.logger) {
+                cx.logger.log(cx.logger.style.keyword(`-----------------`));
+                cx.logger.log(`Base Build`);
+                cx.logger.log(cx.logger.style.keyword(`-----------------`));
+            }
+            let gen1 = initWebflo({ imports: {}, code: [], });
+            await bundle.call(cx, gen1, Path.join(dirPublic, outfileWebflo), true/* asModule */);
+        }
+        // ------------------
+        if (cx.logger) {
+            cx.logger.log(cx.logger.style.keyword(`-----------------`));
+            cx.logger.log(`Client Build ` + cx.logger.style.comment(`(scope:${scope}; is-split:${codeSplitting})`));
+            cx.logger.log(cx.logger.style.keyword(`-----------------`));
+        }
+        gen.code.push(`const { start } = WebQit.Webflo`);
+        // ------------------
+        // Bundle
+        declareStart.call(cx, gen, dirClient, dirPublic, clientConfig, routing);
+        await bundle.call(cx, gen, Path.join(dirPublic, outfileMain), true/* asModule */);
+        // ------------------
+        // Embed/unembed
+        let targetDocumentFile = Path.join(dirPublic, scope, 'index.html'),
+            outfileWebfloPublic = Path.join(clientConfig.public_base_url, outfileWebflo),
+            outfileMainPublic = Path.join(clientConfig.public_base_url, outfileMain),
+            embedList = [],
+            unembedList = [];
+        if (cx.flags['auto-embeds']) {
+            if (codeSplitting) {
+                embedList.push(outfileWebfloPublic);
+            } else {
+                unembedList.push(outfileWebfloPublic);
+            }
+            embedList.push(outfileMainPublic);
+        } else {
+            unembedList.push(outfileWebfloPublic, outfileMainPublic);
+        }
+        handleEmbeds(targetDocumentFile, embedList, unembedList);
+        // ------------------
+        // Recurse
+        if (cx.flags.recursive) {
+            while (subscopes.length) {
+                await generateClient(subscopes.shift());
+            }
+        }
+    };
     // -----------
     // 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, `${dirPublic}/${clientConfig.worker_filename}`);
-        cx.logger && cx.logger.log('');
+    const generateWorker = async function(scope) {
+        let subscopes = [];
+        let routing = { scope, subscopes };
+        let gen = { imports: {}, code: [], };
+        if (cx.logger) {
+            cx.logger.log(cx.logger.style.comment(`-----------------`));
+            cx.logger.log(`Worker Build - scope:${scope}`);
+            cx.logger.log(cx.logger.style.comment(`-----------------`));
+        }
+        // ------------------
+        // >> Modules import
+        gen.imports[`${dirSelf}/worker/index.js`] = `{ start }`;
+        gen.code.push(``);
+        // ------------------
+        // Bundle
+        if (workerConfig.cache_only_urls.length) {
+            workerConfig.cache_only_urls = workerConfig.cache_only_urls.reduce((urls, url) => {
+                // TODO: if (urlPattern(url, self.origin).isPattern()) {}
+                return urls.concat(url);
+            }, []);
+        }
+        declareStart.call(cx, gen, dirWorker, dirPublic, workerConfig, routing);
+        await bundle.call(cx, gen, Path.join(dirPublic, scope, clientConfig.worker_filename));
+        if (cx.flags.recursive) {
+            while (subscopes.length) {
+                await generateWorker(subscopes.shift());
+            }
+        }
+    };
+    // -----------
+    // Generate now...
+    await generateClient('/');
+    if (clientConfig.service_worker_support) {
+        await generateWorker('/');
     }
 }
 
 /**
  * Compile routes.
  * 
- * @param string modulesDir
- * @param string routesDir
- * @param object paramsObj
- * @param string desc
+ * @param object    gen
+ * @param string    routesDir
+ * @param string    targetPublic
+ * @param object    paramsObj
+ * @param object    routing
  * 
  * @return Object
  */
-function getGen(modulesDir, routesDir, paramsObj, desc) {
+function declareStart(gen, routesDir, targetDir, paramsObj, routing) {
     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', '');
+    declareRoutesObj.call(cx, gen, routesDir, targetDir, 'layout', routing);
     gen.code.push(``);
     // ------------------
     // >> Params
     gen.code.push(`// >> Params`);
-    declareParamsObj.call(cx, gen, paramsObj, 'params');
+    declareParamsObj.call(cx, gen, { ...paramsObj, routing }, '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
+ * @param object    gen
+ * @param string    routesDir
+ * @param string    targetDir
+ * @param string    varName
+ * @param object    routing
  * 
  * @return void
  */
-function declareRoutesObj(gen, routesDir, varName) {
+function declareRoutesObj(gen, routesDir, targetDir, varName, routing) {
     const cx = this || {};
-    cx.logger && cx.logger.log(`> Declaring routes...`);
+    let _routesDir = Path.join(routesDir, routing.scope),
+        _targetDir = Path.join(targetDir, routing.scope);
+    cx.logger && cx.logger.log(cx.logger.style.keyword(`> `) + `Declaring routes...`);
     // ----------------
     // Directory walker
     const walk = (dir, callback) => {
         Fs.readdirSync(dir).forEach(f => {
             let resource = Path.join(dir, f);
+            let namespace = _beforeLast('/' + Path.relative(routesDir, resource), '/index.js') || '/';
             if (Fs.statSync(resource).isDirectory()) {
+                if (routing.subscopes.includes(namespace)) return;
                 walk(resource, callback);
             } else {
-                let ext = Path.extname(resource) || '';
-                callback(resource, ext);
+                let relativePath = Path.relative(_targetDir, resource);
+                callback(resource, namespace, relativePath);
             }
         });
     };
@@ -119,29 +237,25 @@ function declareRoutesObj(gen, routesDir, varName) {
     // >> 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) => {
+    if (Fs.existsSync(_routesDir)) {
+        walk(_routesDir, (file, namespace, relativePath) => {
             //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;
+                gen.imports[relativePath] = '* as ' + routeName;
                 // Definition code
-                let routePath = _beforeLast('/' + relativePath, '/index.js');
-                gen.code.push(`${varName}['${routePath || '/'}'] = ${routeName};`);
+                gen.code.push(`${varName}['${namespace}'] = ${routeName};`);
                 // Show
-                cx.logger && cx.logger.log(`> ./${relativePath}`);
+                cx.logger && cx.logger.log(cx.logger.style.comment(`  [${namespace}]:   `) + cx.logger.style.url(relativePath) + cx.logger.style.comment(` (${Fs.statSync(file).size / 1024} KB)`));
             }
         });
     }
     if (!indexCount) {
-        cx.logger && cx.logger.log(`> (none)`);
+        cx.logger && cx.logger.log(cx.logger.style.comment(`  (none)`));
     }
-    cx.logger && cx.logger.log(``);
 }
 
 /**
@@ -149,7 +263,7 @@ function declareRoutesObj(gen, routesDir, varName) {
  * 
  * @param object    gen
  * @param object    paramsObj
- * @param string   varName
+ * @param string    varName
  * 
  * @return void
  */
@@ -189,7 +303,9 @@ function declareParamsObj(gen, paramsObj, varName = null, indentation = 0) {
  */
 async function bundle(gen, outfile, asModule = false) {
     const cx = this || {};
-    const compression = cx.flags.compress;
+    const compression = !cx.flags.compression ? false : (
+        cx.flags.compression === true ? ['gz'] : cx.flags.compression.split(',').map(s => s.trim())
+    );
     const moduleFile = `${_beforeLast(outfile, '.')}.esm.js`;
 
     // ------------------
@@ -197,11 +313,10 @@ async function bundle(gen, outfile, asModule = false) {
     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');
+        jsFile.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');
+        jsFile.write(gen, moduleFile, 'ES Module file');
     }
 
     // ----------------
@@ -227,34 +342,93 @@ async function bundle(gen, outfile, asModule = false) {
     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.entryPoints[0]}`);
-        cx.logger.info(cx.logger.f`TO: ${bundlingConfig.outfile}`);
+        cx.logger.log(cx.logger.style.keyword(`> `) + 'Bundling...');
         waiting.start();
     }
-    // Run
+    // Main
     await EsBuild.build(bundlingConfig);
-    if (waiting) waiting.stop();
-    // Remove moduleFile build
-    Fs.unlinkSync(bundlingConfig.entryPoints[0]);
-
-    // ----------------
     // Compress...
+    let compressedFiles = [], removals = [];
     if (compression) {
-        if (cx.logger) {
-            waiting = cx.logger.waiting(`Compressing...`);
-            waiting.start();
-        }
         const contents = Fs.readFileSync(bundlingConfig.outfile);
-        const gzip = gzipSync(contents, {});
-        const brotli = brotliCompressSync(contents, {});
-        Fs.writeFileSync(`${bundlingConfig.outfile}.gz`, gzip);
-        Fs.writeFileSync(`${bundlingConfig.outfile}.br`, brotli);
-        if (waiting) {
-            waiting.stop();
-            cx.logger.log('');
-            cx.logger.log('> Compression: .gz, .br');
+        if (compression.includes('gz')) {
+            const gzip = gzipSync(contents, {});
+            Fs.writeFileSync(bundlingConfig.outfile + '.gz', gzip);
+            compressedFiles.push(bundlingConfig.outfile + '.gz');
+        } else {
+            removals.push(bundlingConfig.outfile + '.gz');
+        }
+        if (compression.includes('br')) {
+            const brotli = brotliCompressSync(contents, {});
+            Fs.writeFileSync(bundlingConfig.outfile + '.br', brotli);
+            compressedFiles.push(bundlingConfig.outfile + '.br');
+        } else {
+            removals.push(bundlingConfig.outfile + '.br');
+        }
+    }
+    // Remove moduleFile build
+    Fs.unlinkSync(bundlingConfig.entryPoints[0]);
+    removals.forEach(file => Fs.unlinkSync(file));
+    if (waiting) waiting.stop();
+    // ----------------
+    // Stats
+    if (cx.logger) {
+        [bundlingConfig.outfile].concat(compressedFiles).forEach(file => {
+            let ext = '.' + _afterLast(file, '.');
+            cx.logger.info(cx.logger.style.comment(`  [${ext}]: `) + cx.logger.style.url(file) + cx.logger.style.comment(` (${Fs.statSync(file).size / 1024} KB)`));
+        });
+        cx.logger.log('');
+    }
+}
+
+/**
+ * Handles auto-embeds
+ * 
+ * @param String    targetDocumentFile
+ * @param Array     embedList
+ * @param Array     unembedList
+ * 
+ * @return Void
+ */
+function handleEmbeds(targetDocumentFile, embedList, unembedList) {
+    let targetDocument, successLevel = 0;
+    if (Fs.existsSync(targetDocumentFile) && (targetDocument = Fs.readFileSync(targetDocumentFile).toString()) && targetDocument.trim().startsWith('<!DOCTYPE html')) {
+        successLevel = 1;
+        let dom = new Jsdom.JSDOM(targetDocument), by = 'webflo', touched;
+        let embed = (src, before) => {
+            let embedded = dom.window.document.querySelector(`script[src="${src}"]`);
+            if (!embedded) {
+                embedded = dom.window.document.createElement('script');
+                embedded.setAttribute('type', 'module');
+                embedded.setAttribute('src', src);
+                embedded.setAttribute('by', by);
+                if (before) {
+                    before.before(embedded, `\n\t\t`);
+                } else {
+                    dom.window.document.head.appendChild(embedded);
+                }
+                touched = true;
+            }
+            return embedded;
+        };
+        let unembed = src => {
+            src = Path.join('/', src);
+            let embedded = dom.window.document.querySelector(`script[src="${src}"][by="${by}"]`);
+            if (embedded) {
+                embedded.remove();
+                touched = true;
+            }
+        };
+        embedList.reverse().reduce((prev, src) => {
+            return embed(src, prev);
+        }, dom.window.document.querySelector(`script[src]`) || dom.window.document.querySelector(`script`));
+        unembedList.forEach(src => {
+            unembed(src);
+        });
+        if (touched) {
+            Fs.writeFileSync(targetDocumentFile, dom.serialize());
+            successLevel = 2;
         }
     }
+    return successLevel;
 }

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

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

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

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

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

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

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

@@ -43,7 +43,7 @@ export default class Worker {
 				// Add files to cache
 				evt.waitUntil( self.caches.open(this.cx.params.cache_name).then(cache => {
 					if (this.cx.logger) { this.cx.logger.log('[ServiceWorker] Pre-caching resources.'); }
-					const cache_only_urls = (this.cx.params.cache_only_urls || []).map(c => c.trim()).filter(c => c && !c.endsWith('/') && !urlPattern(c, self.origin).isPattern());
+					const cache_only_urls = (this.cx.params.cache_only_urls || []).map(c => c.trim()).filter(c => c && !urlPattern(c, self.origin).isPattern());
 					return cache.addAll(cache_only_urls);
 				}) );
 			}
@@ -72,14 +72,25 @@ export default class Worker {
 
 		// -------------
 		// ONFETCH		
-		self.addEventListener('fetch', async evt => {
+		self.addEventListener('fetch', event => {
 			// URL schemes that might arrive here but not supported; e.g.: chrome-extension://
-			if (!evt.request.url.startsWith('http')) return;
-			const deriveInit = req => [
-				'method', 'headers', 'body', 'mode', 'credentials', 'cache', 'redirect', 'referrer', 'integrity',
-			].reduce((init, prop) => ({ [prop]: prop === 'body' && !req.body ? req : req[prop], ...init }), {});
-			const requestInit = deriveInit(evt.request.clone());
-			evt.respondWith(this.go(evt.request.url, requestInit, { event: evt }));
+			if (!event.request.url.startsWith('http')) return;
+			event.respondWith((async (req, evt) => {
+				const requestInit = [
+					'method', 'headers', 'mode', 'credentials', 'cache', 'redirect', 'referrer', 'integrity',
+				].reduce((init, prop) => ({ [prop]: req[prop], ...init }), {});
+				if (!['GET', 'HEAD'].includes(req.method)) {
+					requestInit.body = await req.text();
+				}
+				// Now, the following is key:
+				// The browser likes to use "force-cache" for "navigate" requests, when, e.g: re-entering your site with the back button
+				// Problem here, force-cache forces out JSON not HTML as per webflo's design.
+				// So, we detect this scenerio and avoid it.
+				if (req.cache === 'force-cache'/* && req.mode === 'navigate' - even webflo client init call also comes with that... needs investigation */) {
+					requestInit.cache = 'default';
+				}
+				return this.go(req.url, requestInit, { event: evt });
+			})(event.request, event));
 		});
 
 		// ---------------
@@ -115,7 +126,7 @@ export default class Worker {
 		let httpEvent = new HttpEvent(request, detail, (id = null, persistent = false) => this.getSession(httpEvent, id, persistent));
 		httpEvent.port.listen(message => {
 			if (message.$type === 'handler:hints' && message.session) {
-				// TODO: Sync sesseion data from client
+				// TODO: Sync session data from client
 				return Promise.resolve();
 			}
 		});
@@ -132,20 +143,7 @@ export default class Worker {
 	}
 
     // Generates request object
-    async generateRequest(href, init) {
-		// Now, the following is key:
-		// The browser likes to use "force-cache" for "navigate" requests
-		// when, for example, the back button was used.
-		// Thus the origin server would still not be contacted by the self.fetch() below, leading to inconsistencies in responses.
-		// So, we detect this scenerio and avoid it.
-		if (init.mode === 'navigate' && init.cache === 'force-cache') {
-			init = { ...init, cache: 'default' };
-		}
-		if (init.method === 'POST' && init.body instanceof self.Request) {
-			init = { ...init, body: await init.body.text(), };
-		} else if (['GET', 'HEAD'].includes(init.method.toUpperCase()) && init.body) {
-			init = { ...init, body: null };
-		}
+    generateRequest(href, init) {
 		let request = new Request(href, init);
 		return request;
     }

package/src/runtime-pi/server/Router.js

@@ -88,9 +88,9 @@ export default class Router extends _Router {
                     response = new httpEvent.Response(null, { status: 500, statusText: `Error reading static file: ${filename}` } );
                 } else {
                     // if the file is found, set Content-type and send data
-                    const type = Mime.lookup(ext);
+                    let mime = Mime.lookup(ext);
                     response = new httpEvent.Response(data, { headers: {
-                        contentType: type === 'application/javascript' ? 'text/javascript' : type,
+                        contentType: mime === 'application/javascript' ? 'text/javascript' : mime,
                         contentLength: Buffer.byteLength(data),
                     } });
                     if (enc) {

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

@@ -245,9 +245,14 @@ export default class Runtime {
         Observer.set(this, 'location', {});
         Observer.set(this, 'network', {});
         // ---------------
-        if (this.cx.app.title && this.cx.logger) {
-            this.cx.logger.info(`> Server running (${this.cx.app.title || ''})`);
-        }
+        this.ready.then(() => {
+            if (!this.cx.logger) return;
+            if (this.cx.server.shared) {
+                this.cx.logger.info(`> Server running (shared)`);
+            } else {
+                this.cx.logger.info(`> Server running (${this.cx.app.title || ''})::${this.cx.server.port}`);
+            }
+        });
      }
 
     /**

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

@@ -45,12 +45,13 @@ export default class RuntimeClient {
             // --------
             // Rendering
             // --------
+
             if (response.ok && response.bodyAttrs.inputType === 'object' && httpEvent.request.headers.accept.match('text/html')) {
                 let rendering = await this.render(httpEvent, router, response);
-                if (typeof rendering !== 'string') {
-                    throw new Error('render() must return a window object or a string response.');
+                if (typeof rendering !== 'string' && !(typeof rendering === 'object' && rendering && typeof rendering.toString === 'function')) {
+                    throw new Error('render() must return a string response or an object that implements toString()..');
                 }
-                response = new httpEvent.Response(rendering, {
+                response = new httpEvent.Response(rendering.toString(), {
                     status: response.status,
                     headers: { ...response.headers.json(), contentType: 'text/html' },
                 });
@@ -81,19 +82,28 @@ export default class RuntimeClient {
                 SOURCE: renderFile,
                 URL: httpEvent.url.href,
                 ROOT: this.cx.CWD,
+                OOHTML_LEVEL: this.cx.server.oohtml_support,
             });
             const { window } = await import('@webqit/oohtml-ssr/instance.js?' + instanceParams);
             // --------
             // OOHTML would waiting for DOM-ready in order to be initialized
-            await new Promise(res => window.WebQit.DOM.ready(res));
-            await new Promise(res => (window.document.templatesReadyState === 'complete' && res(), window.document.addEventListener('templatesreadystatechange', res)));
-            if (!window.document.state.env) {
-                window.document.setState({
-                    env: 'server',
-                }, { update: true });
+            if (window.WebQit.DOM) {
+                await new Promise(res => window.WebQit.DOM.ready(res));
+            }
+            if (window.document.templates) {
+                await new Promise(res => (window.document.templatesReadyState === 'complete' && res(), window.document.addEventListener('templatesreadystatechange', res)));
+            }
+            if (window.document.state) {
+                if (!window.document.state.env) {
+                    window.document.setState({
+                        env: 'server',
+                    }, { update: true });
+                }
+                window.document.setState({ page: data, url: httpEvent.url }, { update: 'merge' });
+            }
+            if (window.document.templates) {
+                window.document.body.setAttribute('template', 'page/' + httpEvent.url.pathname.split('/').filter(a => a).map(a => a + '+-').join('/'));
             }
-            window.document.setState({ page: data, url: httpEvent.url }, { update: 'merge' });
-            window.document.body.setAttribute('template', 'page/' + httpEvent.url.pathname.split('/').filter(a => a).map(a => a + '+-').join('/'));
             await new Promise(res => setTimeout(res, 10));
             return window;
         });