@webqit/webflo 0.20.4-next.1 → 0.20.4-next.3

package/src/runtime-pi/WebfloRuntime.js

@@ -1,5 +1,6 @@
-import { Context } from '../Context.js';
 import { WebfloRouter } from './webflo-routing/WebfloRouter.js';
+import { LiveResponse, response as responseShim, headers as headersShim } from './webflo-fetch/index.js';
+import { AppBootstrap } from './AppBootstrap.js';
 import { _wq } from '../util.js';
 
 export class WebfloRuntime {
@@ -7,55 +8,57 @@ export class WebfloRuntime {
     #instanceController = new AbortController;
     get $instanceController() { return this.#instanceController; }
 
-    static get Context() { return Context; }
-
     static get Router() { return WebfloRouter; }
 
-    #cx;
-    get cx() { return this.#cx; }
+    static create(bootstrap) { return new this(bootstrap); }
 
-    #config;
-    get config() { return this.#config; }
+    #bootstrap;
 
-    #routes;
-    get routes() { return this.#routes; }
+    get bootstrap() { return this.#bootstrap; }
+    get cx() { return this.bootstrap.cx; }
+    get config() { return this.bootstrap.config; }
+    get routes() { return this.bootstrap.routes; }
 
-    constructor(cx) {
-        if (!(cx instanceof this.constructor.Context)) {
-            throw new Error('Argument #1 must be a Webflo Context instance');
-        }
-        this.#cx = cx;
-        this.#config = this.#cx.config;
-        this.#routes = this.#cx.routes;
+    constructor(bootstrap) {
+        this.#bootstrap = new AppBootstrap(bootstrap);
     }
 
     env(key) {
         const { ENV } = this.config;
         return key in ENV.mappings
-            ? ENV.data[ENV.mappings[key]]
-            : ENV.data[key];
+            ? ENV.data?.[ENV.mappings[key]]
+            : ENV.data?.[key];
     }
 
     async initialize() {
-        // Do init work
+        if (!this.bootstrap.init.createStorage) {
+            const inmemSessionRegistry = new Map;
+            this.bootstrap.init.createStorage = (namespace) => {
+                if (!inmemSessionRegistry.has(namespace)) {
+                    inmemSessionRegistry.set(namespace, new Map);
+                }
+                return inmemSessionRegistry.get(namespace);
+            };
+        }
         return this.#instanceController;
     }
 
     async setupCapabilities() {
-        // Do init work
         return this.#instanceController;
     }
 
     async hydrate() {
-        // Do hydration work
         return this.#instanceController;
     }
 
     control() {
-        // Do control work
         return this.#instanceController;
     }
 
+    async createStorage(namespace, ttl) {
+       return await this.bootstrap.init.createStorage(namespace, ttl);
+    }
+
     createRequest(href, init = {}) {
         return new Request(href, init);
     }
@@ -68,16 +71,16 @@ export class WebfloRuntime {
         return this.constructor.HttpSession.create({ store, request, ...rest });
     }
 
-    createHttpUser({ store, request, session, realtime, ...rest }) {
-        return this.constructor.HttpUser.create({ store, request, session, realtime, ...rest });
+    createHttpUser({ store, request, session, client, ...rest }) {
+        return this.constructor.HttpUser.create({ store, request, session, client, ...rest });
     }
 
-    createHttpEvent({ request, cookies, session, user, realtime, sdk, detail, signal, state, ...rest }) {
-        return this.constructor.HttpEvent.create(null, { request, cookies, session, user, realtime, sdk, detail, signal, state, ...rest });
+    createHttpEvent({ request, cookies, session, user, client, detail, signal, state, ...rest }) {
+        return this.constructor.HttpEvent.create(null, { request, cookies, session, user, client, detail, signal, state, ...rest });
     }
 
-    async dispatchNavigationEvent({ httpEvent, crossLayerFetch, responseRealtime }) {
-        const { flags: FLAGS } = this.cx;
+    async dispatchNavigationEvent({ httpEvent, crossLayerFetch, clientPortB }) {
+        const { flags: FLAGS, logger: LOGGER } = this.cx;
         // Resolve rid before dispatching
         if (httpEvent.request.method === 'GET' && httpEvent.url.query['_rid']) {
             const requestMeta = _wq(httpEvent.request, 'meta');
@@ -91,7 +94,7 @@ export class WebfloRuntime {
         // Do proper routing for respone
         const response = await new Promise(async (resolve) => {
             let autoLiveResponse, response;
-            httpEvent.realtime.wqLifecycle.messaging.then(() => {
+            httpEvent.client.wqLifecycle.messaging.then(() => {
                 autoLiveResponse = new LiveResponse(null, { status: 202, statusText: 'Accepted', done: false });
                 resolve(autoLiveResponse);
             });
@@ -100,10 +103,10 @@ export class WebfloRuntime {
                 const remoteFetch = (...args) => this.remoteFetch(...args);
                 return await router.route(routeMethods, httpEvent, crossLayerFetch, remoteFetch);
             };
-            const fullRoutingPipeline = (this.cx.middlewares || []).concat(route);
+            const fullRoutingPipeline = this.bootstrap.middlewares.concat(route);
             try {
                 response = await fullRoutingPipeline.reverse().reduce((next, fn) => {
-                    return () => fn.call(this.cx, httpEvent, router, next);
+                    return () => fn.call(this.cx, httpEvent, next);
                 }, null)()/*immediately calling the first*/;
             } catch (e) {
                 console.error(e);
@@ -111,7 +114,7 @@ export class WebfloRuntime {
             }
             if (!(response instanceof LiveResponse) && !(response instanceof Response)) {
                 response = LiveResponse.test(response) === 'Default'
-                    ? Response.from(response)
+                    ? responseShim.from.value(response)
                     : await LiveResponse.from(response, { responsesOK: true });
             }
             // Any "carry" data?
@@ -139,42 +142,42 @@ export class WebfloRuntime {
         if (!httpEvent.lifeCycleComplete()) {
             if (this.isClientSide) {
                 const responseMeta = _wq(response, 'meta');
-                responseMeta.set('wqRealtime', responseRealtime);
+                responseMeta.set('background_port', clientPortB);
             } else {
-                const upstreamBackgroundMessagingPort = response.headers.get('X-Background-Messaging-Port');
-                response.headers.set('X-Background-Messaging-Port', responseRealtime);
+                const upstreamBackgroundPort = response.headers.get('X-Background-Messaging-Port');
+                response.headers.set('X-Background-Messaging-Port', clientPortB);
             }
 
             // On navigation:
-            // Abort httpEvent.realtime and httpEvent itself
-            httpEvent.realtime.addEventListener('navigate', (e) => {
+            // Abort httpEvent.client and httpEvent itself
+            httpEvent.client.addEventListener('navigate', (e) => {
                 setTimeout(() => { // Allow for global handlers to see the events
                     if (e.defaultPrevented) {
-                        console.log(`Client Messaging Port on ${httpEvent.request.url} not auto-closed on user navigation.`);
+                        LOGGER.log(`Client Messaging Port on ${httpEvent.request.url} not auto-closed on user navigation.`);
                     } else {
-                        httpEvent.realtime.close();
+                        httpEvent.client.close();
                         httpEvent.abort();
                     }
                 }, 0);
             });
             // On close:
             // Abort httpEvent itself
-            httpEvent.realtime.wqLifecycle.close.then(() => {
+            httpEvent.client.wqLifecycle.close.then(() => {
                 httpEvent.abort();
             });
 
             // On ROOT event complete:
-            // Close httpEvent.realtime
+            // Close httpEvent.client
             httpEvent.lifeCycleComplete(true).then(() => {
-                httpEvent.realtime.close();
+                httpEvent.client.close();
             });
         }
 
         if (!this.isClientSide && response instanceof LiveResponse) {
             // Must convert to Response on the server-side before returning
-            return response.toResponse({ clientRequestRealtime: httpEvent.realtime });
+            return response.toResponse({ client: httpEvent.client });
         }
-        
+
         return response;
     }
 
@@ -210,8 +213,8 @@ export class WebfloRuntime {
             const flashResponses = requestMeta.get('carries')?.map((c) => c.response).filter((r) => r);
             if (flashResponses?.length) {
                 httpEvent.waitUntil(new Promise((resolve) => {
-                    httpEvent.realtime.wqLifecycle.open.then(() => {
-                        httpEvent.realtime.postMessage(flashResponses, { wqEventOptions: { type: 'flash' } });
+                    httpEvent.client.wqLifecycle.open.then(() => {
+                        httpEvent.client.postMessage(flashResponses, { wqEventOptions: { type: 'flash' } });
                         resolve();
                     }, { once: true });
                 }));
@@ -315,7 +318,7 @@ export class WebfloRuntime {
 
     createStreamingResponse(httpEvent, readStream, stats) {
         let response;
-        const requestRange = httpEvent.request.headers.get('Range', true); // Parses the Range header
+        const requestRange = headersShim.get.value.call(httpEvent.request.headers, 'Range', true); // Parses the Range header
         if (requestRange.length) {
             const streams = requestRange.reduce((streams, range) => {
                 if (!streams) return;

package/src/runtime-pi/apis.js

@@ -0,0 +1,9 @@
+import { LiveResponse } from './webflo-fetch/LiveResponse.js';
+import { Observer } from '@webqit/quantum-js';
+import { shim } from './webflo-fetch/index.js';
+
+export {
+    LiveResponse,
+    Observer,
+    shim,
+}

package/src/runtime-pi/index.js

@@ -1,7 +1,5 @@
-import * as server from './webflo-server/index.js';
-import * as client from './webflo-client/webflo-codegen.js';
+import { start } from './webflo-server/bootstrap.js';
 
 export {
-    server,
-    client
+    start,
 }

package/src/runtime-pi/webflo-client/WebfloClient.js

@@ -3,6 +3,7 @@ import { _isObject } from '@webqit/util/js/index.js';
 import { Observer } from '@webqit/quantum-js';
 import { WebfloRuntime } from '../WebfloRuntime.js';
 import { WQMessageChannel } from '../webflo-messaging/WQMessageChannel.js';
+import { LiveResponse, response as responseShim } from '../webflo-fetch/index.js';
 import { WQStarPort } from '../webflo-messaging/WQStarPort.js';
 import { ClientSideCookies } from './ClientSideCookies.js';
 import { HttpSession } from '../webflo-routing/HttpSession.js';
@@ -38,13 +39,10 @@ export class WebfloClient extends WebfloRuntime {
     #background;
     get background() { return this.#background; }
 
-    #sdk = {};
-    get sdk() { return this.#sdk; }
-
     get isClientSide() { return true; }
 
-    constructor(cx, host) {
-        super(cx);
+    constructor(bootstrap, host) {
+        super(bootstrap);
         this.#host = host;
         Object.defineProperty(this.host, 'webfloRuntime', { get: () => this });
         this.#location = new Url/*NOT URL*/(this.host.location);
@@ -88,12 +86,6 @@ export class WebfloClient extends WebfloRuntime {
         return instanceController;
     }
 
-    async setupCapabilities() {
-        const instanceController = await super.setupCapabilities();
-        this.#sdk.Observer = Observer;
-        return instanceController;
-    }
-
     controlSuper() {
         return super.control();
     }
@@ -241,7 +233,7 @@ export class WebfloClient extends WebfloRuntime {
             a = a.split('/').filter(s => s);
             return a.reduce((prev, s, i) => prev && (s === b[i] || [s, b[i]].includes('-')), true);
         };
-        return match(this.routes.$root) && this.routes.$sparoots.reduce((prev, subroot) => {
+        return match(this.bootstrap.$root) && this.bootstrap.$sparoots.reduce((prev, subroot) => {
             return prev && !match(subroot);
         }, true);
     }
@@ -277,15 +269,15 @@ export class WebfloClient extends WebfloRuntime {
             request: scopeObj.request
         });
         scopeObj.session = this.createHttpSession({
-			store: this.#sdk.storage?.('session'),
+			store: this.createStorage('session'),
 			request: scopeObj.request
 		});
         const wqMessageChannel = new WQMessageChannel;
         scopeObj.clientRequestRealtime = wqMessageChannel.port1;
         scopeObj.user = this.createHttpUser({
-            store: this.#sdk.storage?.('user'),
+            store: this.createStorage('user'),
             request: scopeObj.request,
-            realtime: scopeObj.clientRequestRealtime,
+            client: scopeObj.clientRequestRealtime,
             session: scopeObj.session,
         });
         if (window.webqit?.oohtml?.configs) {
@@ -294,11 +286,10 @@ export class WebfloClient extends WebfloRuntime {
         }
         scopeObj.httpEvent = this.createHttpEvent({
             request: scopeObj.request,
-            realtime: scopeObj.clientRequestRealtime,
+            client: scopeObj.clientRequestRealtime,
             cookies: scopeObj.cookies,
             session: scopeObj.session,
             user: scopeObj.user,
-            sdk: this.#sdk,
             detail: scopeObj.detail,
             signal: init.signal,
             state: scopeObj.UIState,
@@ -335,7 +326,7 @@ export class WebfloClient extends WebfloRuntime {
                 }
                 return await this.remoteFetch(event.request);
             },
-            responseRealtime: wqMessageChannel.port2,
+            clientPortB: wqMessageChannel.port2,
             originalRequestInit: scopeObj.init
         });
         // Decode response
@@ -357,8 +348,9 @@ export class WebfloClient extends WebfloRuntime {
             Observer.set(this.location, 'href', scopeObj.finalUrl);
             scopeObj.resetStates();
             // Error?
-            if ([404, 500].includes(scopeObj.response.status)) {
-                const error = new Error(scopeObj.response.statusText, { code: scopeObj.response.status });
+            const statusCode = responseShim.prototype.status.get.call(scopeObj.response);
+            if ([404, 500].includes(statusCode)) {
+                const error = new Error(scopeObj.response.statusText, { code: statusCode });
                 Object.defineProperty(error, 'retry', { value: async () => await this.navigate(scopeObj.url, scopeObj.init, scopeObj.detail) });
                 Observer.set(this.navigator, 'error', error);
             }
@@ -372,16 +364,18 @@ export class WebfloClient extends WebfloRuntime {
         });
     }
 
-    async dispatchNavigationEvent({ httpEvent, crossLayerFetch, responseRealtime, originalRequestInit, processObj = {} }) {
-        const response = await super.dispatchNavigationEvent({ httpEvent, crossLayerFetch, responseRealtime });
-        // Obtain and connect responseRealtime as first thing
-        if (response.isLive()) {
-            this.background.addPort(response.wqRealtime);
+    async dispatchNavigationEvent({ httpEvent, crossLayerFetch, clientPortB, originalRequestInit, processObj = {} }) {
+        const response = await super.dispatchNavigationEvent({ httpEvent, crossLayerFetch, clientPortB });
+        // Obtain and connect clientPortB as first thing
+        const backgroundPort = LiveResponse.getBackground(response);
+        if (backgroundPort) {
+            this.background.addPort(backgroundPort);
         }
         // Await a response with an "Accepted" or redirect status
-        if (response.status === 202 || (response.headers.get('Location') && this.processRedirect(response))) {
+        const statusCode = responseShim.prototype.status.get.call(response);
+        if (statusCode === 202 || (response.headers.get('Location') && this.processRedirect(response))) {
             return new Promise(async (resolve) => {
-                if (response.isLive()) {
+                if (LiveResponse.hasBackground(response)) {
                     const liveResponse = await LiveResponse.from(response);
                     liveResponse.addEventListener('replace', () => resolve(liveResponse), { once: true, signal: httpEvent.signal });
                 } // Never resolves otherwise
@@ -398,7 +392,7 @@ export class WebfloClient extends WebfloRuntime {
             if (!processObj.recurseController.signal.aborted) {
                 await new Promise((res) => setTimeout(res, parseInt(response.headers.get('Retry-After')) * 1000));
                 const eventClone = httpEvent.cloneWith({ request: this.createRequest(httpEvent.url, originalRequestInit) });
-                return await this.dispatchNavigationEvent({ httpEvent: eventClone, crossLayerFetch, responseRealtime, originalRequestInit, processObj });
+                return await this.dispatchNavigationEvent({ httpEvent: eventClone, crossLayerFetch, clientPortB, originalRequestInit, processObj });
             }
         } else if (processObj.recurseController) {
             // Abort the signal. This is the end of the loop
@@ -409,27 +403,29 @@ export class WebfloClient extends WebfloRuntime {
 
     processRedirect(response) {
         // Normalize redirect
+        let statusCode = responseShim.prototype.status.get.call(response);
         const xActualRedirectCode = parseInt(response.headers.get('X-Redirect-Code'));
-        if (xActualRedirectCode && response.status === this.#xRedirectCode) {
+        if (xActualRedirectCode && statusCode === this.#xRedirectCode) {
             const responseMeta = _wq(response, 'meta');
             responseMeta.set('status', xActualRedirectCode); // @NOTE 1
+            statusCode = xActualRedirectCode;
         }
         // Trigger redirect
-        if ([302, 301].includes(response.status)) {
+        if ([302, 301].includes(statusCode)) {
             const location = new URL(response.headers.get('Location'), this.location.origin);
             if (this.isSpaRoute(location)) {
                 this.navigate(location, {}, { navigationType: 'rdr' });
             } else {
-                this.redirect(location, response.wqRealtime);
+                this.redirect(location, LiveResponse.getBackground(response));
             }
             return true;
         }
     }
 
-    redirect(location, responseRealtime) {
-        if (responseRealtime) {
+    redirect(location, responseBackground) {
+        if (responseBackground) {
             // Redundant as this is a window reload anyways
-            responseRealtime.close();
+            responseBackground.close();
         }
         window.location = location;
     }
@@ -470,7 +466,7 @@ export class WebfloClient extends WebfloRuntime {
                     navigator: this.navigator,
                     location: this.location,
                     network: this.network, // request, redirect, error, status, remote
-                    capabilities: this.deviceCapabilities,
+                    capabilities: this.capabilities,
                     transition: this.transition,
                 }, { diff: true, merge });
                 $response.addEventListener('replace', (e) => {

package/src/runtime-pi/webflo-client/WebfloRootClient1.js

@@ -2,6 +2,7 @@ import { Observer } from '@webqit/quantum-js';
 import { WebfloClient } from './WebfloClient.js';
 import { ClientSideWorkport } from './ClientSideWorkport.js';
 import { DeviceCapabilities } from './DeviceCapabilities.js';
+import { LiveResponse, response as responseShim } from '../webflo-fetch/index.js';
 import { WebfloHMR } from './webflo-devmode.js';
 
 export class WebfloRootClient1 extends WebfloClient {
@@ -10,8 +11,8 @@ export class WebfloRootClient1 extends WebfloClient {
 
 	static get DeviceCapabilities() { return DeviceCapabilities; }
 
-	static create(cx, host) {
-		return new this(this.Context.create(cx), host);
+	static create(bootstrap, host) {
+		return new this(bootstrap, host);
 	}
 
 	#network;
@@ -20,8 +21,8 @@ export class WebfloRootClient1 extends WebfloClient {
 	#workport;
 	get workport() { return this.#workport; }
 
-	#deviceCapabilities;
-	get deviceCapabilities() { return this.#deviceCapabilities; }
+	#capabilities;
+	get capabilities() { return this.#capabilities; }
 
 	#hmr;
 
@@ -29,11 +30,11 @@ export class WebfloRootClient1 extends WebfloClient {
 		return document.querySelector('meta[name="webflo:viewtransitions"]')?.value;
 	}
 
-	constructor(cx, host) {
+	constructor(bootstrap, host) {
 		if (!(host instanceof Document)) {
 			throw new Error('Argument #1 must be a Document instance');
 		}
-		super(cx, host);
+		super(bootstrap, host);
 		this.#network = { status: window.navigator.onLine };
 	}
 
@@ -87,10 +88,10 @@ export class WebfloRootClient1 extends WebfloClient {
 		// Service Worker && Capabilities
 		const cleanups = [];
 		instanceController.signal.addEventListener('abort', () => cleanups.forEach((c) => c()), { once: true });
-		this.#deviceCapabilities = await this.constructor.DeviceCapabilities.initialize(this, this.config.CLIENT.capabilities);
-		cleanups.push(() => this.#deviceCapabilities.close());
-		if (this.config.CLIENT.capabilities?.service_worker?.filename) {
-			const { service_worker: { filename, ...restServiceWorkerParams } = {} } = this.config.CLIENT.capabilities;
+		this.#capabilities = await this.constructor.DeviceCapabilities.initialize(this, this.config.CLIENT.capabilities);
+		cleanups.push(() => this.#capabilities.close());
+		if (this.config.CLIENT.capabilities?.service_worker) {
+			const { filename, ...restServiceWorkerParams } = this.config.WORKER;
 			this.#workport = await this.constructor.Workport.initialize(null, (this.config.CLIENT.public_base_url || '') + filename, restServiceWorkerParams);
 			cleanups.push(() => this.#workport.close());
 		}
@@ -101,16 +102,17 @@ export class WebfloRootClient1 extends WebfloClient {
 		const instanceController = await super.hydrate();
 		const scopeObj = {};
 		scopeObj.data = this.host.querySelector(`script[rel="hydration"][type="application/json"]`)?.textContent?.trim() || null;
-		scopeObj.response = new Response.from(scopeObj.data, { headers: { 'Content-Type': 'application/json' } });
+		scopeObj.response = responseShim.from.value(scopeObj.data, { headers: { 'Content-Type': 'application/json' } });
 		for (const name of ['X-Background-Messaging-Port', 'X-Live-Response-Message-ID', 'X-Webflo-Dev-Mode']) {
 			const metaElement = this.host.querySelector(`meta[name="${name}"]`);
 			if (!metaElement) continue;
 			scopeObj.response.headers.set(name, metaElement.content?.trim() || '');
 		}
-		if (scopeObj.response.isLive()) {
-			this.background.addPort(scopeObj.response.wqRealtime);
+		const backgroundPort = LiveResponse.getBackground(scopeObj.response);
+		if (backgroundPort) {
+			this.background.addPort(backgroundPort);
 		}
-		if (scopeObj.response.body || scopeObj.response.isLive()) {
+		if (scopeObj.response.body || backgroundPort) {
 			const httpEvent = this.createHttpEvent({ request: this.createRequest(this.location.href) }, true);
 			await this.render(httpEvent, scopeObj.response);
 		} else {

package/src/runtime-pi/webflo-client/WebfloSubClient.js

@@ -21,7 +21,7 @@ export class WebfloSubClient extends WebfloClient {
 
 	get workport() { return this.#superRuntime.workport; }
 
-	get deviceCapabilities() { return this.#superRuntime.deviceCapabilities; }
+	get capabilities() { return this.#superRuntime.capabilities; }
 
 	get withViewTransitions() { return this.host.hasAttribute('viewtransitions'); }
 
@@ -32,7 +32,7 @@ export class WebfloSubClient extends WebfloClient {
 		if (!(host instanceof HTMLElement)) {
 			throw new Error('Argument #1 must be a HTMLElement instance');
 		}
-		super(superRuntime.cx, host);
+		super(superRuntime.bootstrap, host);
 		this.#superRuntime = superRuntime;
 	}
 
@@ -65,19 +65,19 @@ export class WebfloSubClient extends WebfloClient {
 		return super.controlClassic/*IMPORTANT*/(locationCallback);
 	}
 
-	reload(params) {}
+	reload(params) { }
 
-	back() {}
+	back() { }
 
-	forward() {}
+	forward() { }
 
-	traverseTo(...args) {}
+	traverseTo(...args) { }
 
-	async push(url, state = {}) {}
+	async push(url, state = {}) { }
 
-	entries() {}
+	entries() { }
 
-	currentEntry() {}
+	currentEntry() { }
 
 	async updateCurrentEntry(params, url = null) {
 		this.host.reflectLocation(url);
@@ -90,16 +90,16 @@ export class WebfloSubClient extends WebfloClient {
 		(this.host.querySelector('[autofocus]') || this.host).focus();
 	}
 
-	redirect(location, responseRealtime = null) {
+	redirect(location, responseBackground = null) {
 		location = typeof location === 'string' ? new URL(location, this.location.origin) : location;
 		const width = Math.min(800, window.innerWidth);
 		const height = Math.min(600, window.innerHeight);
 		const left = (window.outerWidth - width) / 2;
 		const top = (window.outerHeight - height) / 2;
 		const popup = window.open(location, '_blank', `popup=true,width=${width},height=${height},left=${left},top=${top}`);
-		if (responseRealtime) {
+		if (responseBackground) {
 			Observer.set(this.navigator, 'redirecting', new Url/*NOT URL*/(location), { diff: true });
-			responseRealtime.addEventListener('close', (e) => {
+			responseBackground.addEventListener('close', (e) => {
 				window.removeEventListener('message', windowMessageHandler);
 				Observer.set(this.navigator, 'redirecting', null);
 				popup.postMessage('timeout:5');
@@ -109,7 +109,7 @@ export class WebfloSubClient extends WebfloClient {
 			}, { once: true });
 			const windowMessageHandler = (e) => {
 				if (e.source === popup && e.data === 'close') {
-					responseRealtime.close();
+					responseBackground.close();
 				}
 			};
 			window.addEventListener('message', windowMessageHandler);

package/src/runtime-pi/webflo-client/bootstrap.js

@@ -0,0 +1,37 @@
+import Fs from 'fs';
+import Path from 'path';
+import {
+    readLayoutConfig,
+    readEnvConfig,
+    readClientConfig,
+    readWorkerConfig,
+    scanRoots,
+    scanRouteHandlers,
+} from '../../deployment-pi/util.js';
+
+export async function bootstrap(cx, offset = '') {
+    const $init = Fs.existsSync('./init.client.js')
+        ? Path.resolve('./init.client.js')
+        : null;
+    const config = {
+        LAYOUT: await readLayoutConfig(cx),
+        ENV: await readEnvConfig(cx),
+        CLIENT: await readClientConfig(cx),
+        WORKER: await readWorkerConfig(cx),
+    };
+    if (config.CLIENT.copy_public_variables) {
+        const publicEnvPattern = /(?:^|_)PUBLIC(?:_|$)/;
+        for (const key in process.env) {
+            if (publicEnvPattern.test(key)) {
+                config.ENV.data[key] = process.env[key];
+            }
+        }
+    }
+    const routes = {};
+    const $roots = Fs.existsSync(config.LAYOUT.PUBLIC_DIR) ? scanRoots(config.LAYOUT.PUBLIC_DIR, 'index.html') : [];
+    scanRouteHandlers(config.LAYOUT, 'client', (file, route) => {
+        routes[route] = file;
+    }, offset, $roots);
+    const outdir = Path.join(config.LAYOUT.PUBLIC_DIR, offset);
+    return { $init, config, routes, $roots, $sparoots: $roots, outdir, offset };
+}

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

@@ -2,16 +2,10 @@ import { WebfloRootClient1 } from './WebfloRootClient1.js';
 import { WebfloRootClient2 } from './WebfloRootClient2.js';
 import { WebfloSubClient } from './WebfloSubClient.js';
 
-export async function start() {
+export async function start(bootstrap) {
     const WebfloRootClient = window.navigation ? WebfloRootClient2 : WebfloRootClient1;
-    const instance = WebfloRootClient.create(this || {}, document);
+    const instance = WebfloRootClient.create(bootstrap, document);
     await instance.initialize();
     WebfloSubClient.defineElement();
     return instance;
 }
-
-export {
-    WebfloRootClient1,
-    WebfloRootClient2,
-    WebfloSubClient
-}

package/src/runtime-pi/webflo-client/webflo-devmode.js

@@ -45,7 +45,7 @@ export class WebfloHMR {
                     if (event.actionableEffect === 'unlink') {
                         delete this.#app.routes[event.affectedRoute];
                     } else {
-                        this.#app.routes[event.affectedRoute] = `/@dev?src=${event.affectedHandler}&t=${Date.now()}`;
+                        this.#app.routes[event.affectedRoute] = `/@hmr?src=${event.affectedHandler}&t=${Date.now()}`;
                     }
                     statuses.routesAffected.add(event.affectedRoute);
                 } else if (event.realm === 'worker') {
@@ -203,7 +203,7 @@ export class WebfloHMR {
         }
         const $url = node.$url;
         const url = encodeURIComponent($url.href.replace(`${$url.origin}/`, '')); // preserving origin query strings
-        const urlRewrite = `/@dev?src=${url}&t=${Date.now()}`;
+        const urlRewrite = `/@hmr?src=${url}&t=${Date.now()}`;
         if (node.matches(this.#selectors.remoteStyleSheet)) {
             node.setAttribute('href', urlRewrite);
             return 1;
@@ -216,7 +216,7 @@ export class WebfloHMR {
     }
 
     async loadHTMLModule(url) {
-        const urlRewrite = `/@dev?src=${url}?t=${Date.now()}`;
+        const urlRewrite = `/@hmr?src=${url}?t=${Date.now()}`;
         const fileContents = await fetch(urlRewrite).then((res) => res.text()).catch(() => null);
         if (fileContents === null) return null;
         const temp = document.createElement('template');