@webqit/webflo 0.10.4 → 0.11.1

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

@@ -0,0 +1,163 @@
+
+
+/**
+ * @imports
+ */
+import { _isFunction, _isObject } from '@webqit/util/js/index.js';
+import { Observer } from './Runtime.js';
+
+export default class Workport {
+
+    constructor(file, params = {}) {
+        this.ready = navigator.serviceWorker.ready;
+
+        // --------
+        // Registration and lifecycle
+        // --------
+        this.registration = new Promise((resolve, reject) => {
+            const register = () => {
+                navigator.serviceWorker.register(file, { scope: params.scope || '/' }).then(async registration => {
+
+                    // Helper that updates instance's state
+                    const state = target => {
+                        // instance2.state can be any of: "installing", "installed", "activating", "activated", "redundant"
+                        const equivState = target.state === 'installed' ? 'waiting' : 
+                            (target.state === 'activating' || target.state === 'activated' ? 'active' : target.state)
+                        Observer.set(this, equivState, target);
+                    }
+
+                    // We're always installing at first for a new service worker.
+                    // An existing service would immediately be active
+                    const worker = registration.active || registration.waiting || registration.installing;
+                    state(worker);
+                    worker.addEventListener('statechange', e => state(e.target));
+                    
+                    // "updatefound" event - a new worker that will control
+                    // this page is installing somewhere
+                    registration.addEventListener('updatefound', () => {
+                        // If updatefound is fired, it means that there's
+                        // a new service worker being installed.
+                        state(registration.installing);
+                        registration.installing.addEventListener('statechange', e => state(e.target));
+                    });
+                    
+                    resolve(registration);
+                }).catch(e => reject(e));
+            };
+            if (params.onWondowLoad) {
+                window.addEventListener('load', register);
+            } else {
+                register();
+            }
+            if (params.startMessages) {
+                navigator.serviceWorker.startMessages();
+            }
+        });
+
+        // --------
+        // Post messaging
+        // --------
+        const postSendCallback = (message, callback, onAvailability = 1) => {
+            if (this.active) {
+                if (_isFunction(message)) message = message();
+                callback(this.active, message);
+            } else if (onAvailability) {
+                // Availability Handling
+                const availabilityHandler = entry => {
+                    if (_isFunction(message)) message = message();
+                    callback(entry.value, message);
+                    if (onAvailability !== 2) {
+                        Observer.unobserve(this, 'active', availabilityHandler);
+                    }
+                };
+                Observer.observe(this, 'active', availabilityHandler);
+            }
+        };
+        this.messaging = {
+            post: (message, onAvailability = 1) => {
+                postSendCallback(message, (active, message) => {
+                    active.postMessage(message);
+                }, onAvailability);
+                return this.post;
+            },
+            listen: callback => {
+                navigator.serviceWorker.addEventListener('message', callback);
+                return this.post;
+            },
+            request: (message, onAvailability = 1) => {
+                return new Promise(res => {
+                    postSendCallback(message, (active, message) => {
+                        let messageChannel = new MessageChannel();
+                        active.postMessage(message, [ messageChannel.port2 ]);
+                        messageChannel.port1.onmessage = e => res(e.data);
+                    }, onAvailability);
+                });
+            },
+            channel(channelId) {
+                if (!this.channels.has(channelId)) { this.channels.set(channelId, new BroadcastChannel(channel)); }
+                let channel = this.channels.get(channelId);
+                return {
+                    broadcast: message => channel.postMessage(message),
+                    listen: callback => channel.addEventListener('message', callback),
+                };
+            },
+            channels: new Map,
+        };
+
+        // --------
+        // Notifications
+        // --------
+        this.notifications = {
+            fire: (title, params = {}) => {
+                return new Promise((res, rej) => {
+                    if (typeof Notification === 'undefined' || Notification.permission !== 'granted') {
+                        return rej(typeof Notification !== 'undefined' && Notification && Notification.permission);
+                    }
+                    notification.addEventListener('error', rej);
+                    let notification = new Notification(title, params);
+                    notification.addEventListener('click', res);
+                    notification.addEventListener('close', res);
+                });
+            },
+        };
+
+        // --------
+        // Push notifications
+        // --------
+        this.push = {
+            getSubscription: async () => {
+                return (await this.registration).pushManager.getSubscription();
+            },
+            subscribe: async (publicKey, params = {}) => {
+                var subscription = await this.push.getSubscription();
+                return subscription ? subscription : (await this.registration).pushManager.subscribe(
+                    _isObject(publicKey) ? publicKey : {
+                        applicationServerKey: urlBase64ToUint8Array(publicKey),
+                        ...params,
+                    }
+                );
+            },
+            unsubscribe: async () => {
+                var subscription = await this.push.getSubscription();
+                return !subscription ? null : subscription.unsubscribe();
+            },
+        };
+    }
+
+}
+
+// Public base64 to Uint
+function urlBase64ToUint8Array(base64String) {
+    var padding = '='.repeat((4 - base64String.length % 4) % 4);
+    var base64 = (base64String + padding)
+        .replace(/\-/g, '+')
+        .replace(/_/g, '/');
+
+    var rawData = window.atob(base64);
+    var outputArray = new Uint8Array(rawData.length);
+
+    for (var i = 0; i < rawData.length; ++i) {
+        outputArray[i] = rawData.charCodeAt(i);
+    }
+    return outputArray;
+}

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 { 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,235 @@ 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 scanSubroots = (sparoot, rootFileName) => {
+        let dir = Path.join(dirPublic, sparoot), passes = 0;
+        return [ Fs.readdirSync(dir).reduce((sparoots, f) => {
+            let resource = Path.join(dir, f);
+            if (Fs.statSync(resource).isDirectory()) {
+                let subsparoot = Path.join(sparoot, f);
+                if (Fs.existsSync(Path.join(resource, rootFileName))) {
+                    return sparoots.concat(subsparoot);
+                }
+                passes ++;
+                return sparoots.concat(scanSubroots(subsparoot, rootFileName)[ 0 ]);
+            }
+            return sparoots;
+        }, []), 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(sparoot, spaGraphCallback = null) {
+        let [ subsparoots, targets ] = (sparoot && scanSubroots(sparoot, 'index.html')) || [ [], false ];
+        if (!sparoot) sparoot = '/';
+        let spaRouting = { root: sparoot, subroots: subsparoots, targets };
+        let codeSplitting = !!(sparoot !== '/' || subsparoots.length);
+        let outfileMain = Path.join(sparoot, 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 (sparoot === '/') {
+            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(`(sparoot:${sparoot}; 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, spaRouting);
+        await bundle.call(cx, gen, Path.join(dirPublic, outfileMain), true/* asModule */);
+        // ------------------
+        // Embed/unembed
+        let targetDocumentFile = Path.join(dirPublic, sparoot, 'index.html'),
+            outfileWebfloPublic = Path.join(clientConfig.public_base_url, outfileWebflo),
+            outfileMainPublic = Path.join(clientConfig.public_base_url, outfileMain),
+            embedList = [],
+            unembedList = [];
+        if (cx.flags['auto-embed']) {
+            if (codeSplitting) {
+                embedList.push(outfileWebfloPublic);
+            } else {
+                unembedList.push(outfileWebfloPublic);
+            }
+            embedList.push(outfileMainPublic);
+        } else {
+            unembedList.push(outfileWebfloPublic, outfileMainPublic);
+        }
+        handleEmbeds(targetDocumentFile, embedList, unembedList);
+        // ------------------
+        // Recurse
+        spaGraphCallback && spaGraphCallback(sparoot, subsparoots);
+        if (cx.flags.recursive) {
+            while (subsparoots.length) {
+                await generateClient(subsparoots.shift(), spaGraphCallback);
+            }
+        }
+    };
     // -----------
     // 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(workerroot, workerGraphCallbak = null) {
+        let [ subworkerroots, targets ] = workerroot && scanSubroots(workerroot, 'workerroot') || [ [], false ];
+        if (!workerroot) workerroot = '/';
+        let workerRouting = { root: workerroot, subroots: subworkerroots, targets };
+        let gen = { imports: {}, code: [], };
+        if (cx.logger) {
+            cx.logger.log(cx.logger.style.comment(`-----------------`));
+            cx.logger.log(`Worker Build - workerroot:${workerroot}`);
+            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) {
+            // Separate URLs from patterns
+            let [ urls, patterns ] = workerConfig.cache_only_urls.reduce(([ urls, patterns ], url) => {
+                let patternInstance = urlPattern(url, 'http://localhost'),
+                    isPattern = patternInstance.isPattern();
+                if (isPattern && (patternInstance.pattern.pattern.hostname !== 'localhost' || patternInstance.pattern.pattern.port)) {
+                    throw new Error(`Pattern URLs must have no origin part. Recieved "${url}".`);
+                }
+                return isPattern ? [ urls, patterns.concat(patternInstance) ] : [ urls.concat(url), patterns ];
+            }, [ [], [] ]);
+            // Resolve patterns
+            if (patterns.length) {
+                // List all files
+                let scan = dir => Fs.readdirSync(dir).reduce((result, f) => {
+                    let resource = Path.join(dir, f);
+                    return result.concat(Fs.statSync(resource).isDirectory() ? scan(resource) : '/' + Path.relative(dirPublic, resource));
+                }, []);
+                let files = scan(dirPublic);
+                // Resolve patterns from files
+                workerConfig.cache_only_urls = patterns.reduce((all, pattern) => {
+                    let matchedFiles = files.filter(file => pattern.test(file, 'http://localhost'));
+                    if (matchedFiles.length) return all.concat(matchedFiles);
+                    throw new Error(`The pattern "${pattern.pattern.pattern.pathname}" didn't match any files.`);
+                }, urls);
+            }
+        }
+        declareStart.call(cx, gen, dirWorker, dirPublic, workerConfig, workerRouting);
+        await bundle.call(cx, gen, Path.join(dirPublic, workerroot, clientConfig.worker_filename));
+        // ------------------
+        // Recurse
+        workerGraphCallbak && workerGraphCallbak(workerroot, subworkerroots);
+        if (cx.flags.recursive) {
+            while (subworkerroots.length) {
+                await generateWorker(subworkerroots.shift());
+            }
+        }
+    };
+    // -----------
+    // Generate now...
+    let sparootsFile = Path.join(dirPublic, 'sparoots.json');
+    if (clientConfig.spa_routing !== false) {
+        const sparoots = [];
+        await generateClient('/', root => sparoots.push(root));
+        Fs.writeFileSync(sparootsFile, JSON.stringify(sparoots, null, 4));
+    } else {
+        await generateClient();
+        Fs.existsSync(sparootsFile) && Fs.unlinkSync(sparootsFile);
+    }
+    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.root),
+        _targetDir = Path.join(targetDir, routing.root);
+    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.subroots.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 +271,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 +297,7 @@ function declareRoutesObj(gen, routesDir, varName) {
  * 
  * @param object    gen
  * @param object    paramsObj
- * @param string   varName
+ * @param string    varName
  * 
  * @return void
  */
@@ -189,7 +337,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`;
 
     // ------------------
@@ -199,7 +349,6 @@ async function bundle(gen, outfile, asModule = false) {
         waiting.start();
         jsFile.write(gen, moduleFile, 'ES Module file');
         waiting.stop();
-        cx.logger.info(cx.logger.f`The module file: ${moduleFile}`);
     } else {
         jsFile.write(gen, moduleFile, 'ES Module file');
     }
@@ -227,34 +376,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.existsSync(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 );