@webqit/webflo 0.9.7 → 0.10.2

package/package.json

@@ -12,7 +12,7 @@
     "vanila-javascript"
   ],
   "homepage": "https://webqit.io/tooling/webflo",
-  "version": "0.9.7",
+  "version": "0.10.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -40,17 +40,21 @@
     "@webqit/oohtml-ssr": "^1.0.3",
     "@webqit/util": "^0.8.9",
     "client-sessions": "^0.8.0",
+    "esbuild": "^0.14.38",
     "form-data-encoder": "^1.6.0",
     "formdata-node": "^4.3.0",
     "formidable": "^2.0.0-dev.20200131.2",
-    "is-glob": "^4.0.1",
-    "micromatch": "^3.1.10",
     "mime-types": "^2.1.33",
-    "minimatch": "^3.0.4",
     "node-fetch": "^2.6.1",
     "simple-git": "^2.20.1",
     "stream-slice": "^0.1.2",
-    "webpack": "^5.50.0"
+    "urlpattern-polyfill": "^4.0.3"
+  },
+  "devDependencies": {
+    "chai": "^4.3.6",
+    "coveralls": "^3.1.1",
+    "mocha": "^10.0.0",
+    "mocha-lcov-reporter": "^1.3.0"
   },
   "author": "Oxford Harrison <oxharris.dev@gmail.com>",
   "maintainers": [

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

@@ -22,9 +22,11 @@ export default class Client extends Configurator {
     // Defaults merger
     withDefaults(config) {
         return _merge(true, {
+            bundle_filename: 'bundle.js',
             support_oohtml: true,
             support_service_worker: true,
             worker_scope: '/',
+            worker_filename: 'worker.js',
         }, config);
     }
 
@@ -32,6 +34,12 @@ export default class Client extends Configurator {
     questions(config, choices = {}) {
         // Questions
         return [
+            {
+                name: 'bundle_filename',
+                type: 'text',
+                message: 'Specify the bundle filename',
+                initial: config.bundle_filename,
+            },
             {
                 name: 'support_oohtml',
                 type: 'toggle',
@@ -54,6 +62,12 @@ export default class Client extends Configurator {
                 message: 'Specify the Service Worker scope',
                 initial: config.worker_scope,
             },
+            {
+                name: 'worker_filename',
+                type: (prev, answers) => answers.support_service_worker ? 'text' : null,
+                message: 'Specify the Service Worker filename',
+                initial: config.worker_filename,
+            },
         ];
     }
 }

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

@@ -2,7 +2,6 @@
 /**
  * imports
  */
-import Path from 'path';
 import { _merge } from '@webqit/util/obj/index.js';
 import Configurator from '../../Configurator.js';
 
@@ -29,14 +28,6 @@ export default class Server extends Configurator {
                 certdoms: ['*'],
                 force: false,
             },
-            process: {
-                name: Path.basename(process.cwd()),
-                errfile: '',
-                outfile: '',
-                exec_mode: 'fork',
-                autorestart: true,
-                merge_logs: false,
-            },
             force_www: '',
             shared: false,
         }, config);
@@ -46,10 +37,6 @@ export default class Server extends Configurator {
     questions(config, choices = {}) {
         // Choices
         const CHOICES = _merge({
-            exec_mode: [
-                {value: 'fork',},
-                {value: 'cluster',},
-            ],
             force_www: [
                 {value: '', title: 'do nothing'},
                 {value: 'add',},
@@ -67,10 +54,10 @@ export default class Server extends Configurator {
             },
             {
                 name: 'https',
-                initial: config.https,
                 controls: {
                     name: 'https',
                 },
+                initial: config.https,
                 questions: [
                     {
                         name: 'port',
@@ -105,55 +92,6 @@ export default class Server extends Configurator {
                     },
                 ],
             },
-            {
-                name: 'process',
-                initial: config.process,
-                controls: {
-                    name: 'background process',
-                },
-                questions: [
-                    {
-                        name: 'name',
-                        type: 'text',
-                        message: 'Enter a name for process',
-                        validation: ['important'],
-                    },
-                    {
-                        name: 'errfile',
-                        type: 'text',
-                        message: 'Enter path to error file',
-                        validation: ['important'],
-                    },
-                    {
-                        name: 'outfile',
-                        type: 'text',
-                        message: 'Enter path to output file',
-                        validation: ['important'],
-                    },
-                    {
-                        name: 'exec_mode',
-                        type: 'select',
-                        message: 'Select exec mode',
-                        choices: CHOICES.exec_mode,
-                        validation: ['important'],
-                    },
-                    {
-                        name: 'autorestart',
-                        type: 'toggle',
-                        message: 'Server autorestart on crash?',
-                        active: 'YES',
-                        inactive: 'NO',
-                        initial: config.autorestart,
-                    },
-                    {
-                        name: 'merge_logs',
-                        type: 'toggle',
-                        message: 'Server merge logs?',
-                        active: 'YES',
-                        inactive: 'NO',
-                    },
-                ],
-            },
             {
                 name: 'force_www',
                 type: 'select',

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

@@ -3,7 +3,6 @@
  * imports
  */
 import Url from 'url';
-import Micromatch from 'micromatch';
 import { _merge } from '@webqit/util/obj/index.js';
 import { _isObject } from '@webqit/util/js/index.js';
 import Configurator from '../../../Configurator.js';
@@ -27,18 +26,6 @@ export default class Headers extends Configurator {
         }, config);
     }
 
-    // Match
-    async match(url) {
-        if (!_isObject(url)) {
-            url = Url.parse(url);
-        }
-        return ((await this.read()).entries || []).filter(header => {
-            var regex = Micromatch.makeRe(header.url, {dot: true});
-            var rootMatch = url.pathname.split('/').filter(seg => seg).map(seg => seg.trim()).reduce((str, seg) => str.endsWith(' ') ? str : ((str = str + '/' + seg) && str.match(regex) ? str + ' ' : str), '');
-            return rootMatch.endsWith(' ');
-        });
-    }
-
     // Questions generator
     questions(config, choices = {}) {
         const CHOICES = _merge({

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

@@ -5,8 +5,7 @@
 import Url from 'url';
 import { _merge } from '@webqit/util/obj/index.js';
 import { _after } from '@webqit/util/str/index.js';
-import { _isObject } from '@webqit/util/js/index.js';
-import Micromatch from 'micromatch';
+import { _isObject, _isNumeric } from '@webqit/util/js/index.js';
 import Configurator from '../../../Configurator.js';
 
 export default class Redirects extends Configurator {
@@ -28,33 +27,6 @@ export default class Redirects extends Configurator {
         }, config);
     }
 
-    // Match
-    async match(url) {
-        if (!_isObject(url)) {
-            url = Url.parse(url);
-        }
-        return ((await this.read()).entries || []).reduce((match, rdr) => {
-            if (match) {
-                return match;
-            }
-            var regex = Micromatch.makeRe(rdr.from, {dot: true});
-            var rootMatch = url.pathname.split('/').filter(seg => seg).map(seg => seg.trim()).reduce((str, seg) => str.endsWith(' ') ? str : ((str = str + '/' + seg) && str.match(regex) ? str + ' ' : str), '');
-            if (rootMatch.endsWith(' ')) {
-                var leaf = _after(url.pathname, rootMatch.trim());
-                var [ target, targetQuery ] = rdr.to.split('?');
-                if (rdr.reuseQuery) {
-                    targetQuery = [(url.search || '').substr(1), targetQuery].filter(str => str).join('&');
-                }
-                // ---------------
-                return {
-                    target: target + leaf + (targetQuery ? (leaf.endsWith('?') || leaf.endsWith('&') ? '' : (leaf.includes('?') ? '&' : '?')) + targetQuery : ''),
-                    query: targetQuery,
-                    code: rdr.code,
-                };
-            }
-        }, null);
-    }
-
     // Questions generator
     questions(config, choices = {}) {
         // Choices
@@ -86,19 +58,12 @@ export default class Redirects extends Configurator {
                         message: 'Enter "to" URL',
                         validation: ['important'],
                     },
-                    {
-                        name: 'reuseQuery',
-                        type: 'toggle',
-                        message: 'Reuse query parameters from matched URL in destination URL?',
-                        active: 'YES',
-                        inactive: 'NO',
-                    },
                     {
                         name: 'code',
                         type: 'select',
                         choices: CHOICES.code,
                         message: 'Enter redirect code',
-                        validation: ['number', 'important'],
+                        validation: ['number'],
                     },
                 ],
             },

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

@@ -4,7 +4,6 @@
  */
 import { _merge } from '@webqit/util/obj/index.js';
 import { _isObject } from '@webqit/util/js/index.js';
-import Micromatch from 'micromatch';
 import Configurator from '../../Configurator.js';
 
 export default class Ssg extends Configurator {
@@ -26,26 +25,6 @@ export default class Ssg extends Configurator {
         }, config);
     }
 
-    // Match
-    async match(url) {
-        var pathname = url;
-        if (_isObject(url)) {
-            pathname = url.pathname;
-        }
-        return ((await this.read()).entries || []).reduce((match, prerend) => {
-            if (match) {
-                return match;
-            }
-            var regex = Micromatch.makeRe(prerend.page, {dot: true});
-            var rootMatch = pathname.split('/').filter(seg => seg).map(seg => seg.trim()).reduce((str, seg) => str.endsWith(' ') ? str : ((str = str + '/' + seg) && str.match(regex) ? str + ' ' : str), '');
-            if (rootMatch.endsWith(' ')) {
-                return {
-                    url: prerend.page,
-                };
-            }
-        }, null);
-    }
-
     // Questions generator
     questions(config, choices = {}) {
         // Questions
@@ -59,7 +38,7 @@ export default class Ssg extends Configurator {
                 initial: config.entries,
                 questions: [
                     {
-                        name: 'page',
+                        name: 'url',
                         type: 'text',
                         message: 'Page URL',
                         validation: ['important'],

package/src/index.js

@@ -6,6 +6,7 @@ import * as config from './config-pi/index.js';
 import * as deployment from './deployment-pi/index.js';
 import * as runtime from './runtime-pi/index.js';
 import * as services from './services-pi/index.js';
+import Context from './Context.js';
 
 /**
  * @exports
@@ -15,4 +16,5 @@ export {
     deployment,
     runtime,
     services,
+    Context,
 }

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

@@ -186,19 +186,21 @@ export default class Runtime {
      * @return Response
      */
     async go(url, init = {}, detail = {}) {
-        if (this._abortController) {
-            this._abortController.abort();
-        }
-        this._abortController = new AbortController();
-        this._xRedirectCode = 200;
-        // ------------
         url = typeof url === 'string' ? new whatwag.URL(url) : url;
         init = { referrer: this.location.href, ...init };
         // ------------
+		// Put his forward before instantiating a request and aborting previous
+		// Same-page hash-links clicks on chrome recurse here from histroy popstate
         if (detail.srcType !== 'init' && (_before(url.href, '#') === _before(init.referrer, '#') && (init.method || 'GET').toUpperCase() === 'GET')) {
 			return;
         }
 		// ------------
+        if (this._abortController) {
+            this._abortController.abort();
+        }
+        this._abortController = new AbortController();
+        this._xRedirectCode = 200;
+        // ------------
         if (['link', 'form'].includes(detail.srcType)) {
             Observer.set(detail.src, 'active', true);
             Observer.set(detail.submitter || {}, 'active', true);

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

@@ -15,10 +15,12 @@ export default class RuntimeClient {
      */
 	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);
-		});
+		if (this.cx.support_service_worker) {
+			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);
+			});
+		}
 	}
 
 	 /**

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

@@ -5,10 +5,11 @@
 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';
+import { gzipSync, brotliCompressSync } from 'zlib';
+import EsBuild from 'esbuild';
 
 /**
  * @generate
@@ -29,7 +30,7 @@ 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 bundleOutput = { path: Path.resolve(cx.CWD || '', layoutConfig.PUBLIC_DIR), };
+    const dirPublic = Path.resolve(cx.CWD || '', layoutConfig.PUBLIC_DIR);
     const dirSelf = Path.dirname(Url.fileURLToPath(import.meta.url)).replace(/\\/g, '/');
     // -----------
     // Generate client build
@@ -37,13 +38,13 @@ export async function generate() {
     if (clientConfig.support_oohtml) {
         genClient.imports = { [`${dirSelf}/generate.oohtml.js`]: null, ...genClient.imports };
     }
-    await bundle.call(cx, genClient, { ...bundleOutput, filename: 'bundle.js', }, true/* asModule */);
+    await bundle.call(cx, genClient, `${dirPublic}/${clientConfig.bundle_filename}`, 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', });
+        await bundle.call(cx, genWorker, `${dirPublic}/${clientConfig.worker_filename}`);
         cx.logger && cx.logger.log('');
     }
 }
@@ -181,14 +182,16 @@ function declareParamsObj(gen, paramsObj, varName = null, indentation = 0) {
  * Bundle generated file
  * 
  * @param object    gen
- * @param object    output
+ * @param String    outfile
  * @param boolean   asModule
  * 
  * @return Promise
  */
-function bundle(gen, output, asModule = false) {
+async function bundle(gen, outfile, asModule = false) {
     const cx = this || {};
-    const moduleFile = Path.join(output.path, `${_beforeLast(output.filename, '.')}.esm.js`);
+    const compression = cx.flags.compress;
+    const moduleFile = `${_beforeLast(outfile, '.')}.esm.js`;
+
     // ------------------
     // >> Show waiting...
     if (cx.logger) {
@@ -200,43 +203,58 @@ function bundle(gen, output, asModule = false) {
     } 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;
-        }
+    const bundlingConfig = {
+        entryPoints: [ moduleFile ],
+        outfile,
+        bundle: true,
+        minify: true,
+        banner: { js: '/** @webqit/webflo */', },
+        footer: { js: '', },
+        format: 'esm',
+    };
+    if (!asModule) {
+        // Support top-level await
+        // See: https://github.com/evanw/esbuild/issues/253#issuecomment-826147115
+        bundlingConfig.banner.js += '(async () => {';
+        bundlingConfig.footer.js += '})();';
     }
+
     // ----------------
     // The bundling process
-    return new Promise(resolve => {
-        let waiting;
+    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}`);
+        waiting.start();
+    }
+    // Run
+    await EsBuild.build(bundlingConfig);
+    if (waiting) waiting.stop();
+    // Remove moduleFile build
+    Fs.unlinkSync(bundlingConfig.entryPoints[0]);
+
+    // ----------------
+    // Compress...
+    if (compression) {
         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 = cx.logger.waiting(`Compressing...`);
             waiting.start();
         }
-        // Run
-        let compiler = Webpack(bundlingConfig);
-        compiler.run((err, stats) => {
+        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();
-            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);
-        });
-    });
+            cx.logger.log('');
+            cx.logger.log('> Compression: .gz, .br');
+        }
+    }
 }

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

@@ -2,12 +2,9 @@
 /**
  * @imports
  */
-import _isGlobe from 'is-glob';
-import Minimatch from 'minimatch';
 import { _any } from '@webqit/util/arr/index.js';
-import { _after, _afterLast } from '@webqit/util/str/index.js';
-import { HttpEvent, Request, Response } from '../Runtime.js';
-import { Observer } from '../Runtime.js';
+import { HttpEvent, Request, Response, Observer } from '../Runtime.js';
+import { urlPattern } from '../../util.js';
 
 /**
  * ---------------------------
@@ -46,8 +43,8 @@ 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);
-					return cache.addAll(cache_only_urls.filter(url => !_isGlobe(url) && !_afterLast(url, '.').includes('/')));
+					const cache_only_urls = (this.cx.params.cache_only_urls || []).map(c => c.trim()).filter(c => c && !c.endsWith('/') && !urlPattern(c, self.origin).isPattern());
+					return cache.addAll(cache_only_urls);
 				}) );
 			}
 		});
@@ -80,8 +77,8 @@ export default class Worker {
 			if (!evt.request.url.startsWith('http')) return;
 			const deriveInit = req => [
 				'method', 'headers', 'body', 'mode', 'credentials', 'cache', 'redirect', 'referrer', 'integrity',
-			].reduce((init, prop) => ({ [prop]: req[prop], ...init }), {});
-			const requestInit = deriveInit(evt.request);
+			].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 }));
 		});
 
@@ -110,9 +107,8 @@ export default class Worker {
 		init = { referrer: this.location.href, ...init };
         // ------------
 		// The request object
-		let request = this.generateRequest(url.href, init);
-		if (detail.event instanceof self.Request) {
-			request = detail.event.request;
+		let request = await this.generateRequest(url.href, init);
+		if (detail.event) {
 			Object.defineProperty(detail.event, 'request', { value: request });
 		}
 		// The navigation event
@@ -130,14 +126,13 @@ export default class Worker {
 		} else {
 			response = await this.remoteFetch(httpEvent.request);
 		}
-		return response;
 		let finalResponse = this.handleResponse(httpEvent, response);
         // Return value
         return finalResponse;
 	}
 
     // Generates request object
-    generateRequest(href, init) {
+    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.
@@ -146,7 +141,12 @@ export default class Worker {
 		if (init.mode === 'navigate' && init.cache === 'force-cache') {
 			init = { ...init, cache: 'default' };
 		}
-        let request = new Request(href, init);
+		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 };
+		}
+		let request = new Request(href, init);
 		return request;
     }
 
@@ -163,18 +163,19 @@ export default class Worker {
 		if (arguments.length > 1) {
 			request = this.generateRequest(request, ...args);
 		}
+		const matchUrl = (patterns, url) => _any((patterns || []).map(p => p.trim()).filter(p => p), p => urlPattern(p, self.origin).test(url));
 		const execFetch = () => {
-			if (_any((this.cx.params.cache_only_urls || []).map(c => c.trim()).filter(c => c), pattern => Minimatch.Minimatch(request.url, pattern))) {
+			if (matchUrl(this.cx.params.cache_only_urls, request.url)) {
 				Observer.set(this.network, 'strategy', 'cache-only');
 				return this.cacheFetch(request, { networkFallback: false, cacheRefresh: false });
 			}
 			// network_only_urls
-			if (_any((this.cx.params.network_only_urls || []).map(c => c.trim()).filter(c => c), pattern => Minimatch.Minimatch(request.url, pattern))) {
+			if (matchUrl(this.cx.params.network_only_urls, request.url)) {
 				Observer.set(this.network, 'strategy', 'network-only');
 				return this.networkFetch(request, { cacheFallback: false, cacheRefresh: false });
 			}
 			// cache_first_urls
-			if (_any((this.cx.params.cache_first_urls || []).map(c => c.trim()).filter(c => c), pattern => Minimatch.Minimatch(request.url, pattern))) {
+			if (matchUrl(this.cx.params.cache_first_urls, request.url)) {
 				Observer.set(this.network, 'strategy', 'cache-first');
 				return this.cacheFetch(request, { networkFallback: true, cacheRefresh: true });
 			}

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

@@ -54,56 +54,55 @@ export default class Router extends _Router {
     /**
      * Reads a static file from the public directory.
      * 
-     * @param ServerNavigationEvent event
+     * @param ServerNavigationEvent httpEvent
      * 
      * @return Promise
      */
-    file(event) {
-        var filename = event.url.pathname;
-        var _filename = Path.join(this.cx.CWD, this.cx.layout.PUBLIC_DIR, decodeURIComponent(filename));
-        var autoIndex;
-        if (Fs.existsSync(_filename)) {
-            // based on the URL path, extract the file extention. e.g. .js, .doc, ...
-            var ext = Path.parse(filename).ext;
-            // read file from file system
-            return new Promise((resolve, reject) => {
-                // if is a directory search for index file matching the extention
-                if (!ext && Fs.lstatSync(_filename).isDirectory()) {
-                    ext = '.html';
-                    _filename += '/index' + ext;
-                    autoIndex = 'index.html';
-                    if (!Fs.existsSync(_filename)) {
-                        resolve();
-                        return;
+    file(httpEvent) {
+        let filename = Path.join(this.cx.CWD, this.cx.layout.PUBLIC_DIR, decodeURIComponent(httpEvent.url.pathname));
+        let index, ext = Path.parse(httpEvent.url.pathname).ext;
+        // if is a directory search for index file matching the extention
+        if (!ext && Fs.existsSync(filename) && Fs.lstatSync(filename).isDirectory()) {
+            ext = '.html';
+            index = `index${ext}`;
+            filename = Path.join(filename, index);
+        }
+        let enc, acceptEncs = [], supportedEncs = { gzip: '.gz', br: '.br' };
+        // based on the URL path, extract the file extention. e.g. .js, .doc, ...
+        // and process encoding
+        if ((acceptEncs = (httpEvent.request.headers.get('Accept-Encoding') || '').split(',').map(e => e.trim())).length
+        && (enc = acceptEncs.reduce((prev, _enc) => prev || (Fs.existsSync(filename + supportedEncs[_enc]) && _enc), null))) {
+            filename = filename + supportedEncs[enc];
+        } else {
+            if (!Fs.existsSync(filename)) return;
+            if (Object.values(supportedEncs).includes(ext)) {
+                enc = Object.keys(supportedEncs).reduce((prev, _enc) => prev || (supportedEncs[_enc] === ext && _enc), null);
+                ext = Path.parse(filename.substring(0, filename.length - ext.length)).ext;
+            }
+        }
+        // read file from file system
+        return new Promise(resolve => {
+            Fs.readFile(filename, function(err, data) {
+                let response;
+                if (err) {
+                    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);
+                    response = new httpEvent.Response(data, { headers: {
+                        contentType: type === 'application/javascript' ? 'text/javascript' : type,
+                        contentLength: Buffer.byteLength(data),
+                    } });
+                    if (enc) {
+                        response.headers.set('Content-Encoding', enc);
                     }
                 }
-                Fs.readFile(_filename, function(err, data){
-                    if (err) {
-                        // To be thrown by caller
-                        reject({
-                            errorCode: 500,
-                            error: 'Error reading static file: ' + filename + '.',
-                        });
-                    } else {
-
-                        // if the file is found, set Content-type and send data
-                        const type = Mime.lookup(ext);
-                        resolve( new event.Response(data, {
-                            headers: {
-                                contentType: type === 'application/javascript' ? 'text/javascript' : type,
-                                contentLength: Buffer.byteLength(data),
-                            },
-                            meta: {
-                                filename: _filename,
-                                static: true,
-                                autoIndex,
-                            }
-                        } ) );
-                        
-                    }
-                });
+                response.attrs.filename = filename;
+                response.attrs.static = true;
+                response.attrs.index = index;
+                resolve(response);
             });
-        }
+        });
     }
 
     /**

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

@@ -11,8 +11,9 @@ import Sessions from 'client-sessions';
 import { Observer } from '@webqit/oohtml-ssr/apis.js';
 import { _each } from '@webqit/util/obj/index.js';
 import { _isEmpty } from '@webqit/util/js/index.js';
-import { _from as _arrFrom } from '@webqit/util/arr/index.js';
+import { _from as _arrFrom, _any } from '@webqit/util/arr/index.js';
 import { slice as _streamSlice } from 'stream-slice';
+import { urlPattern } from '../util.js';
 import * as whatwag from './whatwag.js';
 import xURL from '../xURL.js';
 import xFormData from "../xFormData.js";
@@ -276,14 +277,16 @@ export default class Runtime {
             rdr = { status: 302, headers: { Location: ( url.hostname = url.hostname.substr(4), url.href ) } };
         } else if (!url.hostname.startsWith('www.') && _context.server.force_www === 'add') {
             rdr = { status: 302, headers: { Location: ( url.hostname = `www.${url.hostname}`, url.href ) } };
-        } else if (_context.config.Redirects && (rdr = await (new _context.config.Redirects(_context)).match(url.href))) {
-            rdr = { status: rdr.code || 301 /* Permanent */, headers: { Location: rdr.target } };
+        } else if (_context.config.runtime.server.Redirects) {
+            rdr = ((await (new _context.config.runtime.server.Redirects(_context)).read()).entries || []).reduce((_rdr, entry) => {
+                return _rdr || ((_rdr = urlPattern(entry.from, url.origin).exec(url.href)) && { status: entry.code || 302, headers: { Location: _rdr.render(entry.to) } });
+            }, null);
         }
         if (rdr) {
-            return Response(null, rdr);
+            return new Response(null, rdr);
         }
-        const autoHeaders = _context.config.Headers 
-            ? await (new _context.config.Headers(_context)).match(url.href)
+        const autoHeaders = _context.config.runtime.server.Headers 
+            ? ((await (new _context.config.runtime.server.Headers(_context)).read()).entries || []).filter(entry => urlPattern(entry.url, url.origin).exec(url.href))
             : [];
         // ------------
 
@@ -377,7 +380,6 @@ export default class Runtime {
 
         // ----------------
         // Mock-Cookies?
-        // ----------------
         if (!(e.detail.request && e.detail.response)) {
             for (let cookieName of Object.getOwnPropertyNames(this.mockSessionStore)) {
                 response.headers.set('Set-Cookie', `${cookieName}=1`);      // We just want to know availability... not validity, as this is understood to be for testing purposes only
@@ -386,13 +388,11 @@ export default class Runtime {
 
         // ----------------
         // Auto-Headers
-        // ----------------
         response.headers.set('Accept-Ranges', 'bytes');
         this._autoHeaders(response.headers, autoHeaders);
 
         // ----------------
         // Redirects
-        // ----------------
         if (response.headers.redirect) {
             let xRedirectPolicy = e.request.headers.get('X-Redirect-Policy');
             let xRedirectCode = e.request.headers.get('X-Redirect-Code') || 300;
@@ -410,7 +410,6 @@ export default class Runtime {
 
         // ----------------
         // 404
-        // ----------------
         if (response.bodyAttrs.input === undefined || response.bodyAttrs.input === null) {
             response.attrs.status = response.status !== 200 ? response.status : 404;
             response.attrs.statusText  = `${e.request.url} not found!`;
@@ -419,7 +418,6 @@ export default class Runtime {
 
         // ----------------
         // Not acceptable
-        // ----------------
         if (e.request.headers.get('Accept') && !e.request.headers.accept.match(response.headers.contentType)) {
             response.attrs.status = 406;
             return response;
@@ -428,14 +426,12 @@ export default class Runtime {
         // ----------------
         // Important no-caching
         // for non-"get" requests
-        // ----------------
         if (e.request.method !== 'GET' && !response.headers.get('Cache-Control')) {
             response.headers.set('Cache-Control', 'no-store');
         }
 
         // ----------------
         // Body
-        // ----------------
         let rangeRequest, body = response.body;
         if ((rangeRequest = e.request.headers.range) && !response.headers.get('Content-Range')
         && ((body instanceof ReadableStream) || (ArrayBuffer.isView(body) && (body = ReadableStream.from(body))))) {
@@ -501,6 +497,7 @@ export default class Runtime {
         log.push(style.url(e.request.url));
         if (response.attrs.hint) log.push(`(${style.comment(response.attrs.hint)})`);
         if (response.headers.contentType) log.push(`(${style.comment(response.headers.contentType)})`);
+        if (response.headers.get('Content-Encoding')) log.push(`(${style.comment(response.headers.get('Content-Encoding'))})`);
         if (errorCode) log.push(style.err(`${errorCode} ${response.statusText}`));
         else log.push(style.val(`${statusCode} ${response.statusText}`));
         if (redirectCode) log.push(`- ${style.url(response.headers.redirect)}`);

package/src/runtime-pi/util.js

@@ -2,14 +2,13 @@
 /**
  * @imports
  */
-import _isArray from '@webqit/util/js/isArray.js';
-import _isNumeric from '@webqit/util/js/isNumeric.js';
-import _isString from '@webqit/util/js/isString.js';
-import _isObject from '@webqit/util/js/isObject.js';
-import _beforeLast from '@webqit/util/str/beforeLast.js';
-import _afterLast from '@webqit/util/str/afterLast.js';
-import _arrFrom from '@webqit/util/arr/from.js';
-  
+import { _isString, _isObject, _isNumeric, _isArray } from '@webqit/util/js/index.js';
+import { _beforeLast, _afterLast } from '@webqit/util/str/index.js';
+import { _from as _arrFrom } from '@webqit/util/arr/index.js';
+if (typeof URLPattern === 'undefined') {
+    await import('urlpattern-polyfill');
+}
+
 /**
  * ---------------
  * @wwwFormPathUnserializeCallback
@@ -132,3 +131,32 @@ export const path = {
         return this.join(path, "..");
     }
 };
+
+export const urlPattern = (pattern, baseUrl = null) => ({
+    pattern: new URLPattern(pattern, baseUrl),
+    isPattern() {
+        return Object.keys(this.pattern.keys).some(compName => this.pattern.keys[compName].length);
+    },
+    test(...args) { this.pattern.test(...args) }, 
+    exec(...args) {
+        let components = this.pattern.exec(...args);
+        if (!components) return;
+        components.vars = Object.keys(this.pattern.keys).reduce(({ named, unnamed }, compName) => {
+            this.pattern.keys[compName].forEach(key => {
+                let value = components[compName].groups[key.name];
+                if (typeof key.name === 'number') {
+                    unnamed.push(value);
+                } else {
+                    named[key.name] = value;
+                }
+            });
+            return { named, unnamed };
+        }, { named: {}, unnamed: [] });
+        components.render = str => {
+            return str.replace(/\$(\$|[0-9A-Z]+)/gi, (a, b) => {
+                return b === '$' ? '$' : (_isNumeric(b) ? components.vars.unnamed[b - 1] : components.vars.named[b]) || '';
+            });
+        }
+        return components;
+    }
+});

package/src/runtime-pi/xHttpMessage.js

@@ -89,30 +89,30 @@ const xHttpMessage = (whatwagHttpMessage, Headers, FormData) => {
         }
                 
         // Resolve
-        resolve(force = false) {
-            if (!this.bodyAttrs.resolved || force) {
-                this.bodyAttrs.resolved = new Promise(async (resolve, reject) => {
-                    var messageInstance = this, resolved, contentType = messageInstance.headers.get('content-type') || '';
+        jsonfy(force = false) {
+            if (!this.bodyAttrs.jsonfied || force) {
+                this.bodyAttrs.jsonfied = new Promise(async (resolve, reject) => {
+                    var messageInstance = this, jsonfied, contentType = messageInstance.headers.get('content-type') || '';
                     var type = contentType === 'application/json' || this.bodyAttrs.json ? 'json' : (
-                        contentType === 'application/x-www-form-urlencoded' || contentType.startsWith('multipart/') || this.bodyAttrs.formData ? 'formData' : (
+                        contentType === 'application/x-www-form-urlencoded' || contentType.startsWith('multipart/form-data') || this.bodyAttrs.formData ? 'formData' : (
                             contentType === 'text/plain' ? 'plain' : 'other'
                         )
                     );
                     try {
                         if (type === 'formData') {
-                            resolved = (await messageInstance.formData()).json();
+                            jsonfied = (await messageInstance.formData()).json();
                         } else {
-                            resolved = type === 'json' ? await messageInstance.json() : (
+                            jsonfied = type === 'json' ? await messageInstance.json() : (
                                 type === 'plain' ? await messageInstance.text() : messageInstance.body
                             );
                         }
-                        resolve(resolved);
+                        resolve(jsonfied);
                     } catch(e) {
                         reject(e);
                     }
                 });
             }
-            return this.bodyAttrs.resolved;
+            return this.bodyAttrs.jsonfied;
         }
 
     };
@@ -173,7 +173,7 @@ export function encodeBody(body, FormData, Blob) {
                 contentLength: (new Blob([ detailsObj.body ])).size, // Buffer.byteLength(detailsObj.body, 'utf8') isn't cross-environment
             };
         }
-        detailsObj.resolved = body;
+        detailsObj.jsonfied = body;
     }
     return detailsObj;
 }

package/src/runtime-pi/xRequest.js

@@ -62,6 +62,13 @@ const xRequest = (whatwagRequest, Headers, FormData, Blob) => class extends xHtt
         return 'referrer' in this.attrs ? this.attrs.referrer : super.referrer;
     }
 
+    static compat(request, url = null) {
+        if (request instanceof whatwagRequest) {
+            return Object.setPrototypeOf(request, new this);
+        }
+        return new this(url, request);
+    }
+
 };
 
 export default xRequest;

package/test/index.test.js

@@ -1,8 +1,7 @@
 /**
  * @imports
  */
-import Context from "../src/Context.js";
-import * as WebfloPI from '../src/index.js';
+import { config, runtime, Context } from '../src/index.js';
 
 let client = {
     handle: function(httpEvent) {
@@ -19,8 +18,8 @@ let client = {
     },
 };
 
-const cx = Context.create({ config: WebfloPI.config, });
+const cx = Context.create({ config: config, });
 const clientCallback = (_cx, hostName, defaultClientCallback) => client;
-const app = await WebfloPI.runtime.server.start.call(cx, clientCallback);
+const app = await runtime.server.start.call(cx, clientCallback);
 
 const response = await app.go('http://localhost/', { headers: { range: 'bytes=0-5, 6' } } );