@webqit/webflo 0.20.4-next.2 → 0.20.4-next.4

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

@@ -0,0 +1,38 @@
+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(?:_|$)/;
+        config.ENV.data = config.ENV.data || {};
+        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');

package/src/runtime-pi/webflo-fetch/LiveResponse.js

@@ -1,16 +1,19 @@
-import { State, Observer } from '@webqit/quantum-js';
+import { Observer, LiveMode } from '@webqit/use-live';
 import { _isObject, _isTypeObject } from '@webqit/util/js/index.js';
 import { publishMutations, applyMutations } from '../webflo-messaging/wq-message-port.js';
-import { responseRealtime } from './response.js';
+import { WQBroadcastChannel } from '../webflo-messaging/WQBroadcastChannel.js';
+import { WQSockPort } from '../webflo-messaging/WQSockPort.js';
+import { response as responseShim } from './index.js';
 import { _wq, _await } from '../../util.js';
 import { isTypeStream } from './util.js';
 
 export class LiveResponse extends EventTarget {
 
-    /* STATIC methods for Input sources */
+    [Symbol.toStringTag] = 'LiveResponse';
 
     static test(data) {
-        if (data instanceof LiveResponse) {
+        if (data instanceof LiveResponse
+            || data?.[Symbol.toStringTag] === 'LiveResponse') {
             return 'LiveResponse';
         }
         if (data instanceof Response) {
@@ -19,121 +22,133 @@ export class LiveResponse extends EventTarget {
         if (isGenerator(data)) {
             return 'Generator';
         }
-        if (data instanceof State) {
-            return 'Quantum';
+        if (data instanceof LiveMode
+            || data?.[Symbol.toStringTag] === 'LiveMode') {
+            return 'LiveMode';
         }
         return 'Default';
     }
 
-    static from(data, ...args) {
-        if (data instanceof LiveResponse) {
+    static async from(data, ...args) {
+        if (this.test(data) === 'LiveResponse') {
             return data.clone(...args);
         }
-        if (data instanceof Response) {
-            return this.fromResponse(data, ...args);
+        if (this.test(data) === 'Response') {
+            return await this.fromResponse(data, ...args);
         }
-        if (isGenerator(data)) {
-            return this.fromGenerator(data, ...args);
+        if (this.test(data) === 'Generator') {
+            return await this.fromGenerator(data, ...args);
         }
-        if (data instanceof State) {
-            return this.fromQuantum(data, ...args);
+        if (this.test(data) === 'LiveMode') {
+            return this.fromLiveMode(data, ...args);
         }
         return new this(data, ...args);
     }
 
-    static fromResponse(response, options = {}) {
+    static async fromResponse(response, options = {}) {
         if (!(response instanceof Response)) {
             throw new Error('Argument must be a Response instance.');
         }
-        return response.parse().then((body) => {
-            // Instance
-            const instance = new this(body, {
-                status: response.status,
-                statusText: response.statusText,
-                headers: response.headers,
-                done: false,
-                ...options,
-            });
-            const responseMeta = _wq(response, 'meta');
-            _wq(instance).set('meta', responseMeta);
-            // Generator binding
-            if (response.isLive() === 2) {
-                if (_isTypeObject(body) && !isTypeStream(body)) {
-                    applyMutations.call(response.wqRealtime,
-                        body,
-                        response.headers.get('X-Live-Response-Message-ID').trim(),
-                        { signal: instance.#abortController.signal }
-                    );
-                }
-                // Capture subsequent frames?
-                response.wqRealtime.addEventListener('response.replace', (e) => {
-                    const { body, ...options } = e.data;
-                    instance.#replaceWith(body, options);
-                }, { signal: instance.#abortController.signal });
-                response.wqRealtime.addEventListener('close', () => {
-                    instance.#extendLifecycle(Promise.resolve());
-                }, { once: true, signal: instance.#abortController.signal });
-            }
-            // Data props
-            instance.#type = response.type;
-            instance.#redirected = response.redirected;
-            instance.#url = response.url;
-            // Lifecycle props
-            instance.#generator = response;
-            instance.#generatorType = 'Response';
-            return instance;
+
+        const body = await responseShim.prototype.parse.value.call(response);
+
+        // Instance
+        const instance = new this(body, {
+            status: responseShim.prototype.status.get.call(response),
+            statusText: response.statusText,
+            headers: response.headers,
+            done: false,
+            ...options,
         });
+        const responseMeta = _wq(response, 'meta');
+        _wq(instance).set('meta', responseMeta);
+
+        // Generator binding
+        if (this.hasBackground(response) === 2) {
+            const backgroundPort = this.getBackground(response);
+            if (_isTypeObject(body) && !isTypeStream(body)) {
+                applyMutations.call(backgroundPort,
+                    body,
+                    response.headers.get('X-Live-Response-Message-ID').trim(),
+                    { signal: instance.#abortController.signal }
+                );
+            }
+            // Capture subsequent frames?
+            backgroundPort.addEventListener('response.replace', (e) => {
+                const { body, ...options } = e.data;
+                instance.#replaceWith(body, options);
+            }, { signal: instance.#abortController.signal });
+            backgroundPort.addEventListener('close', () => {
+                instance.#extendLifecycle(Promise.resolve());
+            }, { once: true, signal: instance.#abortController.signal });
+        }
+
+        // Data props
+        instance.#type = response.type;
+        instance.#redirected = response.redirected;
+        instance.#url = response.url;
+        // Lifecycle props
+        instance.#generator = response;
+        instance.#generatorType = 'Response';
+
+        return instance;
     }
 
-    static fromGenerator(gen, options = {}) {
+    static async fromGenerator(gen, options = {}) {
         if (!isGenerator(gen)) {
             throw new Error('Argument must be a generator or async generator.');
         }
-        const $firstFrame = gen.next();
-        const instance = _await($firstFrame, (frame) => {
-            return _await(frame.value, (value) => {
-                const $options = { done: frame.done, ...options };
-                let instance, $$await;
-                if (value instanceof Response && frame.done && options.done !== false/* && value.responsesOK*/) {
-                    return value;
-                }
-                if (value instanceof LiveResponse) {
-                    instance = new this;
-                    const responseMeta = _wq(value, 'meta');
-                    _wq(instance).set('meta', responseMeta);
-                    $$await = instance.#replaceWith(value, $options);
-                } else {
-                    instance = this.from/*important*/(value, $options);
+
+        const firstFrame = await gen.next();
+        const firstValue = await firstFrame.value;
+
+        if (firstValue instanceof Response && firstFrame.done && options.done !== false/* && value.responsesOK*/) {
+            return firstValue;
+        }
+
+        let instance;
+        let frame = firstFrame;
+        let value = firstValue;
+        let $$await;
+
+        const $options = { done: firstFrame.done, ...options };
+        if (this.test(value) === 'LiveResponse') {
+            instance = new this;
+            const responseMeta = _wq(value, 'meta');
+            _wq(instance).set('meta', responseMeta);
+            $$await = instance.#replaceWith(value, $options);
+        } else {
+            instance = await this.from/*important*/(value, $options);
+        }
+
+        (async function () {
+            await $$await;
+            instance.#generator = gen;
+            instance.#generatorType = 'Generator';
+            while (!frame.done && !options.done && !instance.#abortController.signal.aborted) {
+                frame = await gen.next();
+                value = await frame.value;
+                if (!instance.#abortController.signal.aborted) {
+                    await instance.#replaceWith(value, { done: frame.done });
                 }
-                return _await(instance, (instance) => {
-                    (async function () {
-                        await $$await;
-                        instance.#generator = gen;
-                        instance.#generatorType = 'Generator';
-                        while (!frame.done && !options.done && !instance.#abortController.signal.aborted) {
-                            frame = await gen.next();
-                            value = await frame.value;
-                            if (!instance.#abortController.signal.aborted) {
-                                await instance.#replaceWith(value, { done: frame.done });
-                            }
-                        }
-                    })();
-                    return instance;
-                });
-            });
-        });
+            }
+        })();
+
         return instance;
     }
 
-    static fromQuantum(qState, options = {}) {
-        if (!(qState instanceof State)) {
-            throw new Error('Argument must be a Quantum State instance.');
+    static async fromLiveMode(liveMode, options = {}) {
+        if (!this.test(liveMode) === 'LiveMode') {
+            throw new Error('Argument must be a UseLive LiveMode instance.');
+        }
+        const instance = new this;
+        await instance.replaceWith(liveMode.value, { done: false, ...options });
+        if (instance.#generatorType === 'Default') {
+            instance.#generator = liveMode;
+            instance.#generatorType = 'LiveMode';
         }
-        const instance = new this(qState.value, { done: false, ...options });
-        instance.#generator = qState;
-        instance.#generatorType = 'Quantum';
         Observer.observe(
-            qState,
+            liveMode,
             'value',
             (e) => instance.#replaceWith(e.value),
             { signal: instance.#abortController.signal }
@@ -141,6 +156,33 @@ export class LiveResponse extends EventTarget {
         return instance;
     }
 
+    static hasBackground(respone) {
+        let liveLevel = (respone.headers?.get?.('X-Background-Messaging-Port')?.trim() || _wq(respone, 'meta').has('background_port')) && 1 || 0;
+        liveLevel += respone.headers?.get?.('X-Live-Response-Message-ID')?.trim() && 1 || 0;
+        return liveLevel;
+    }
+
+    static getBackground(respone) {
+        if (!/Response/.test(this.test(respone) )) return;
+        const responseMeta = _wq(respone, 'meta');
+        if (!responseMeta.has('background_port')) {
+            const value = respone.headers.get('X-Background-Messaging-Port')?.trim();
+            if (value) {
+                const [proto, portID] = value.split(':');
+                let backgroundPort;
+                if (proto === 'br') {
+                    backgroundPort = new WQBroadcastChannel(portID);
+                } else if (proto === 'ws') {
+                    backgroundPort = new WQSockPort(portID);
+                } else {
+                    throw new Error(`Unknown background messaging protocol: ${proto}`);
+                }
+                responseMeta.set('background_port', backgroundPort);
+            }
+        }
+        return responseMeta.get('background_port');
+    }
+
     #generator = null;
     #generatorType = 'Default';
     get generatorType() { return this.#generatorType; }
@@ -193,18 +235,10 @@ export class LiveResponse extends EventTarget {
 
     /* Level 3 props */
 
-    get wqRealtime() {
-        return responseRealtime.call(this);
-    }
+    get background() { return this.constructor.getBackground(this); }
 
     /* Lifecycle methods */
 
-    isLive() {
-        let liveLevel = (this.headers.get('X-Background-Messaging-Port')?.trim() || _wq(this, 'meta').has('wqRealtime')) && 1 || 0;
-        liveLevel += this.headers.get('X-Live-Response-Message-ID')?.trim() && 1 || 0;
-        return liveLevel;
-    }
-
     whileLive(returningThePromise = false) {
         if (returningThePromise) {
             return this.#lifeCycleResolutionPromise;
@@ -294,9 +328,10 @@ export class LiveResponse extends EventTarget {
         const execReplaceWithResponse = async (response, options) => {
             this.#generator = response;
             this.#generatorType = response instanceof Response ? 'Response' : 'LiveResponse';
+            const body = response instanceof Response ? await responseShim.prototype.parse.value.call(response) : response.body;
             execReplaceWith({
-                body: response instanceof Response ? await response.parse() : response.body,
-                status: response.status,
+                body,
+                status: responseShim.prototype.status.get.call(response),
                 statusText: response.statusText,
                 headers: response.headers,
                 ...options,
@@ -304,7 +339,7 @@ export class LiveResponse extends EventTarget {
                 redirected: response.redirected,
                 url: response.url,
             });
-            if (response instanceof LiveResponse) {
+            if (this.test(response) === 'LiveResponse') {
                 response.addEventListener('replace', () => execReplaceWith(response), { signal: this.#abortController.signal });
                 return await response.whileLive(true);
             }
@@ -332,7 +367,7 @@ export class LiveResponse extends EventTarget {
         };
 
         let donePromise;
-        if (body instanceof Response || body instanceof LiveResponse) {
+        if (/Response/.test(body)) {
             if (frameClosure) {
                 throw new Error('frameClosure unsupported for inputs of type response.');
             }
@@ -362,21 +397,25 @@ export class LiveResponse extends EventTarget {
         await this.#replaceWith(body, ...args);
     }
 
-    toResponse({ clientRequestRealtime, signal: abortSignal } = {}) {
-        const response = Response.from(this.body, {
+    toResponse({ client: clientPort, signal: abortSignal } = {}) {
+        const response = responseShim.from.value(this.body, {
             status: this.status,
             statusText: this.statusText,
             headers: this.headers,
         });
+
         const responseMeta = _wq(this, 'meta');
         _wq(response).set('meta', responseMeta);
-        if (clientRequestRealtime && this.whileLive()) {
+
+        if (clientPort && this.whileLive()) {
             const liveResponseMessageID = Date.now().toString();
             response.headers.set('X-Live-Response-Message-ID', liveResponseMessageID);
+
             // Publish mutations
             if (_isTypeObject(this.body) && !isTypeStream(this.body)) {
-                publishMutations.call(clientRequestRealtime, this.body, liveResponseMessageID, { signal: abortSignal/* stop observing mutations on body when we abort */ });
+                publishMutations.call(clientPort, this.body, liveResponseMessageID, { signal: abortSignal/* stop observing mutations on body when we abort */ });
             }
+
             // Publish replacements?
             const replaceHandler = () => {
                 const headers = Object.fromEntries([...this.headers.entries()]);
@@ -384,7 +423,7 @@ export class LiveResponse extends EventTarget {
                     delete headers['set-cookie'];
                     console.warn('Warning: The "set-cookie" header is not supported for security reasons and has been removed from the response.');
                 }
-                clientRequestRealtime.postMessage({
+                clientPort.postMessage({
                     body: this.body,
                     status: this.status,
                     statusText: this.statusText,
@@ -392,6 +431,7 @@ export class LiveResponse extends EventTarget {
                     done: !this.whileLive(),
                 }, { wqEventOptions: { type: 'response.replace', live: true/*gracefully ignored if not an object*/ }, observerOptions: { signal: abortSignal/* stop observing mutations on body when we abort */ } });
             };
+
             this.addEventListener('replace', replaceHandler, { signal: abortSignal/* stop listening when we abort */ });
         }
         return response;
@@ -406,8 +446,8 @@ export class LiveResponse extends EventTarget {
         }));
     }
 
-    toQuantum({ signal: abortSignal } = {}) {
-        const state = new StateX;
+    toLiveMode({ signal: abortSignal } = {}) {
+        const state = new LiveModeX;
         const replaceHandler = () => Observer.defineProperty(state, 'value', { value: this.body, enumerable: true, configurable: true });
         this.addEventListener('replace', replaceHandler, { signal: abortSignal });
         replaceHandler();
@@ -429,9 +469,7 @@ export const isGenerator = (obj) => {
         typeof obj?.return === 'function';
 };
 
-class StateX extends State {
+class LiveModeX extends LiveMode {
     constructor() { }
-    dispose() { }
+    abort() { }
 }
-
-globalThis.LiveResponse = LiveResponse;