@webqit/webflo 0.20.56 → 0.20.58

package/src/webflo-runtime/webflo-client/webflo-elements.js

@@ -406,7 +406,7 @@ export class ModalElement extends BaseElement {
     }
 
     static get observedAttributes() {
-        return super.observedAttributes.concat(['class']);
+        return super.observedAttributes.concat(['class', 'open']);
     }
 
     get delegatesFocus() { return false; }
@@ -559,6 +559,13 @@ export class ModalElement extends BaseElement {
         super.attributeChangedCallback?.(name, old, _new);
 
         if (name === 'class' && old !== _new) this.#bindDimensionsWorker();
+        if (name === 'open' && this.isConnected) {
+            if (this.hasAttribute('open') && !this.matches(':popover-open')) {
+                this.showPopover();
+            } else if (!this.hasAttribute('open') && this.matches(':popover-open')) {
+                this.hidePopover();
+            }
+        }
     }
 
     connectedCallback() {
@@ -567,9 +574,6 @@ export class ModalElement extends BaseElement {
         if (!this.popover) {
             this.popover = 'manual';
         }
-        if (this.hasAttribute('open')) {
-            this.showPopover();
-        }
     }
 
     disconnectedCallback() {
@@ -612,6 +616,8 @@ export class ModalElement extends BaseElement {
                 this.#unbindDimensionsWorker = null;
                 this.#unbindMinmaxWorker?.();
                 this.#unbindMinmaxWorker = null;
+
+                this.removeAttribute('open');
             }
         });
 

package/src/webflo-runtime/webflo-messaging/ClientRequestPort001.js

@@ -1,12 +1,14 @@
 import { ClientPortMixin } from './ClientPortMixin.js';
-import { StarPort } from '@webqit/port-plus';
-import { _meta } from '../../util.js';
+import { StarPort, MessageEventPlus } from '@webqit/port-plus';
+import { _portPlusMeta } from '../../util.js';
 
 export class ClientRequestPort001 extends ClientPortMixin(StarPort) {
 
     #portID;
     get portID() { return this.#portID; }
 
+    get broadcast() { return _portPlusMeta(this).get('parentPort'); }
+
     #url;
     get url() { return this.#url; }
 
@@ -30,7 +32,7 @@ export class ClientRequestPort001 extends ClientPortMixin(StarPort) {
                 this.#navigatedAway = true;
                 lastNavigationEvent = 'navigateaway';
             }
-            const event = new Event(lastNavigationEvent);
+            const event = new MessageEventPlus(null, { type: lastNavigationEvent, target: this });
             this.dispatchEvent(event);
             if (event.defaultPrevented) {
                 e.preventDefault();
@@ -39,14 +41,14 @@ export class ClientRequestPort001 extends ClientPortMixin(StarPort) {
     }
 
     enterChannel(channelID, { resolveData = null } = {}) {
-        const webfloTenant = _meta(this).get('parentNode');
-        const clients = webfloTenant && _meta(webfloTenant).get('parentNode');
+        const webfloTenant = _portPlusMeta(this).get('parentPort');
+        const webfloTenancy = webfloTenant && _portPlusMeta(webfloTenant).get('parentPort');
 
-        if (!clients) {
-            throw new Error('Instance seem not connected to the messaging system.');
+        if (!webfloTenancy) {
+            throw new Error('Instance is not connected to the multi-tenant system.');
         }
 
-        const channel = clients.getChannel(channelID, true);
+        const channel = webfloTenancy.getChannel(channelID, true);
         const leave = channel.addPort(webfloTenant, { resolveData });
         
         return { channel, leave };

package/src/webflo-runtime/webflo-messaging/WebfloTenancy001.js

@@ -1,27 +1,35 @@
-import { RelayPort, StarPort } from '@webqit/port-plus';
+import { StarPort, RelayPort } from '@webqit/port-plus';
 import { WebfloTenant001 } from './WebfloTenant001.js';
 
 export class WebfloTenancy001 extends StarPort {
 
     #channels = new Map;
 
+    constructor() {
+        super({ handshake: 1, postAwaitsOpen: true, autoClose: false });
+    }
+
     getTenant(tenantID, autoCreate = false) {
-        if (autoCreate && !this.findPort((tenant) => tenant.tenantID === tenantID)) {
-            const tenant = new WebfloTenant001(tenantID, { handshake: 1, postAwaitsOpen: true, autoClose: false });
-            const cleanup = this.addPort(tenant);
-            tenant.readyStateChange('close').then(cleanup);
+        let tenant = this.findPort((tenant) => tenant.tenantID === tenantID);
+
+        if (!tenant && autoCreate) {
+            tenant = new WebfloTenant001(tenantID, { handshake: 1, postAwaitsOpen: true, autoClose: true });
+            this.addPort(tenant, { enableBubbling: true }); // auto-removed on close - given that handshake is 1, above
         }
-        return this.findPort((tenant) => tenant.tenantID === tenantID);
+
+        return tenant;
     }
 
     getChannel(channelName, autoCreate = false) {
-        if (!this.#channels.has(channelName) && autoCreate) {
-            const channel = new RelayPort(channelName, { handshake: 1, postAwaitsOpen: true, autoClose: true });
+        let channel = this.#channels.get(channelName);
+
+        if (!channel && autoCreate) {
+            channel = new RelayPort(channelName, { handshake: 1, postAwaitsOpen: true, autoClose: true });
 
             this.#channels.set(channelName, channel);
             channel.readyStateChange('close').then(() => this.#channels.delete(channelName));
         }
         
-        return this.#channels.get(channelName);
+        return channel;
     }
 }

package/src/webflo-runtime/webflo-messaging/WebfloTenant001.js

@@ -17,11 +17,15 @@ export class WebfloTenant001 extends StarPort {
 
     createRequestPort(portID, url = null) {
         const requestPort = new ClientRequestPort001(portID, url, { handshake: 1, postAwaitsOpen: true, autoClose: true });
-        this.addPort(requestPort);
+        this.addPort(requestPort, { enableBubbling: true });
+
         setTimeout(() => {
             if (requestPort.length || !this.findPort((port) => port === requestPort)) return;
-            requestPort.close(true);
-        }, 15000/*15sec*/);
+            if (requestPort.autoCloseXPromise) {
+                requestPort.autoCloseXPromise.then(() => requestPort.close(true));
+            } else requestPort.close(true);
+        }, 30000/*30sec*/);
+
         return requestPort;
     }
 }

package/src/webflo-runtime/webflo-routing/HttpEvent111.js

@@ -127,12 +127,53 @@ export class HttpEvent111 {
 
     // ------
 
-    async waitUntil(promise) {
-        return await this.#extendLifecycle(promise);
+    async waitUntil(promise, ...args) {
+        let gcArray = [];
+        const gc = () => {
+            gcArray.forEach((unsub) => unsub());
+            gcArray.splice(0);
+        };
+
+        if (args.length) {
+            promise = Promise.race([promise, new Promise((res, rej) => {
+                const timeout = typeof args[0] === 'number' ? args.shift() : null;
+
+                if (typeof args[0] === 'function') {
+                    const lifecycleEventsHandler = args.shift();
+                    const callLifecycleEventsHandler = (e) => lifecycleEventsHandler(e, res, rej);
+
+                    // On abort
+                    this.#abortController.signal.addEventListener('abort', callLifecycleEventsHandler);
+                    gcArray.push(() => this.#abortController.signal.removeEventListener('abort', callLifecycleEventsHandler));
+
+                    // On navigate
+                    this.client.addEventListener('navigate', callLifecycleEventsHandler);
+                    gcArray.push(() => this.client.removeEventListener('navigate', callLifecycleEventsHandler));
+
+                    // On auth switch
+                    gcArray.push(this.user.subscribe('id', callLifecycleEventsHandler, { scope: 2/* global */ }));
+
+                    // On timeout
+                    if (timeout) {
+                        const id = setTimeout(() => {
+                            callLifecycleEventsHandler(new CustomEvent('timeout', { detail: { timeout } }));
+                        }, timeout);
+                        gcArray.push(() => clearTimeout(id));
+                    }
+                } else if (timeout) {
+                    const id = setTimeout(() => {
+                        res(new CustomEvent('timeout', { detail: { timeout } }));
+                    }, timeout);
+                    gcArray.push(() => clearTimeout(id));
+                }
+            })]);
+        }
+
+        return await this.#extendLifecycle(promise).finally(gc);
     }
 
     async waitUntilNavigate() {
-        /* DO NOT AWAIT */this.waitUntil(new Promise(() => { }));
+        return this.waitUntil(new Promise(() => { }));
     }
 
     async respondWith(data, ...args) {

package/src/webflo-runtime/webflo-routing/HttpUser111.js

@@ -8,9 +8,7 @@ export class HttpUser111 extends HttpKeyvalInterface {
         const isSignedIn = await this.get('id');
         if (callback) {
             await callback(isSignedIn);
-            return options.once
-                ? undefined
-                : this.subscribe('id', callback, options);
+            return this.subscribe('id', (e) => callback(e.value), options);
         }
         return !!isSignedIn;
     }

package/src/webflo-runtime/webflo-routing/WebfloRouter111.js

@@ -161,14 +161,16 @@ export class WebfloRouter111 {
                     let resolved = 0;
 
                     // Monitor first respondWith()
-                    thisTick.event.internalLiveResponse.addEventListener('replace', () => {
+                    const internalLiveResponseHandler = () => {
                         if (!resolved) {
                             resolved = 1;
                             resolve(thisTick.event.internalLiveResponse);
                         } else if (resolved === 2) {
                             throw new Error(`Unexpected respondWith() after handler return.`);
                         }
-                    });
+                    };
+                    thisTick.event.internalLiveResponse.addEventListener('replace', internalLiveResponseHandler);
+                    const removeInternalLiveResponseHandler = () => thisTick.event.internalLiveResponse.removeEventListener('replace', internalLiveResponseHandler);
 
                     // Call the handler
                     const returnValue = await handler.call(thisContext, thisTick.event, $next/*next*/, $fetch/*fetch*/);
@@ -177,19 +179,20 @@ export class WebfloRouter111 {
                     if (LiveResponse.test(returnValue) === 'LiveProgramHandle') {
                         thisTick.event.signal.addEventListener('abort', () => {
                             returnValue.abort();
-                        });
+                        }, { once: true });
                     } else if (LiveResponse.test(returnValue) === 'Generator') {
                         thisTick.event.signal.addEventListener('abort', () => {
                             if (typeof returnValue.return === 'function') {
                                 returnValue.return();
                             }
-                        });
+                        }, { once: true });
                     }
 
                     // Handle return value
                     if (!resolved) {
                         resolved = 2;
                         resolve(returnValue);
+                        removeInternalLiveResponseHandler(); // Removing this line preserves error handling but introduces a memory leak
                     } else if (typeof returnValue !== 'undefined') {
                         thisTick.event.internalLiveResponse.replaceWith(returnValue, { done: true });
                     }

package/src/webflo-runtime/webflo-server/WebfloServer.js

@@ -9,7 +9,7 @@ import $glob from 'fast-glob';
 import EsBuild from 'esbuild';
 import { Readable } from 'stream';
 import { WebSocketServer } from 'ws';
-import { spawn } from 'child_process';
+import spawn from 'cross-spawn';
 import { createWindow } from '@webqit/oohtml-ssr';
 import { RequestPlus } from '@webqit/fetch-plus';
 import { HttpThread111 } from '../webflo-routing/HttpThread111.js';
@@ -38,8 +38,10 @@ export class WebfloServer extends AppRuntime {
     #keyvals;
     get keyvals() { return this.#keyvals; }
 
+    #tenancy = new WebfloTenancy001;
+    get tenancy() { return this.#tenancy; }
+
     #servers = new Map;
-    #tenancy = new WebfloTenancy001({ handshake: 1, postAwaitsOpen: true, autoClose: false });
     #hmr;
 
     #renderFileCache = new Map;
@@ -51,6 +53,12 @@ export class WebfloServer extends AppRuntime {
             : process.env[key];
     }
 
+    #buildContexts = {};
+    get buildContexts() { return this.#buildContexts; }
+
+    #buildOutputs = {};
+    get buildOutputs() { return this.#buildOutputs; }
+
     async initialize() {
         const { appMeta: APP_META, flags: FLAGS, logger: LOGGER, } = this.cx;
 
@@ -59,7 +67,7 @@ export class WebfloServer extends AppRuntime {
         if (FLAGS['dev']) {
             await this.enterDevMode();
         } else {
-            await this.buildRoutes({ server: true });
+            await this.buildRoutes(['server']);
         }
 
         // ----------
@@ -96,7 +104,6 @@ export class WebfloServer extends AppRuntime {
                     spawn('npx', ['webflo', 'start', ...flags], {
                         cwd: proxy.path,  // target directory
                         stdio: 'inherit', // inherit stdio so output streams to parent terminal
-                        shell: true       // for Windows compatibility
                     });
                 }
 
@@ -119,28 +126,61 @@ export class WebfloServer extends AppRuntime {
         return instanceController;
     }
 
-    async buildRoutes({ client = false, worker = false, server = false, ...options } = {}) {
-        const routeDirs = [...new Set([this.config.LAYOUT.CLIENT_DIR, this.config.LAYOUT.WORKER_DIR, this.config.LAYOUT.SERVER_DIR])];
-        const entryPoints = await $glob(routeDirs.map((d) => `${d}/**/handler{${client ? ',.client' : ''}${worker ? ',.worker' : ''}${server ? ',.server' : ''}}.js`), { absolute: true })
-            .then((files) => files.map((file) => file.replace(/\\/g, '/')));
-
-        const initFiles = await $glob(`${process.cwd()}/init.server.js`);
-
-        const bundlingConfig = {
-            entryPoints: entryPoints.concat(initFiles),
-            outdir: this.config.RUNTIME_DIR,
-            outbase: process.cwd(),
-            format: 'esm',
-            platform: server ? 'node' : 'browser',
-            bundle: server ? false : true,
-            minify: server ? false : true,
-            sourcemap: false,
-            treeShaking: true,
-            plugins: [UseLiveTransform()],
-            ...options,
+    async buildRoutes(realms = ['server'], { revalidate = false } = {}) {
+        const routeDirs = {
+            server: this.config.LAYOUT.SERVER_DIR,
+            client: this.config.LAYOUT.CLIENT_DIR,
+            worker: this.config.LAYOUT.WORKER_DIR
         };
+        let moduleGraph = {};
+
+        for (const realm of realms) {
+            if (revalidate
+                || !this.#buildContexts[realm]) {
+                await this.#buildContexts[realm]?.dispose();
+
+                const entryPoints = await $glob(`${routeDirs[realm]}/**/handler{,.${realm}}.js`, { absolute: true })
+                    .then((files) => files.map((f) => f.replace(/\\/g, '/')));
+
+                const bundlingConfig = {
+                    entryPoints: entryPoints,
+                    outbase: process.cwd(),
+                    format: 'esm',
+                    bundle: true,
+                    ...(realm === 'server' ? {
+                        platform: 'node',
+                        packages: 'external',
+                        outdir: this.config.RUNTIME_DIR,
+                        write: true,
+                    } : {
+                        platform: 'browser',
+                        minify: true,
+                        outdir: '.',
+                        write: false,
+                    }),
+                    sourcemap: 'inline',
+                    splitting: false,
+                    treeShaking: true,
+                    plugins: [UseLiveTransform()],
+                    metafile: true,
+                    logLevel: 'silent',
+                };
+
+                this.#buildContexts[realm] = await EsBuild.context(bundlingConfig);
+            }
 
-        return await EsBuild.build(bundlingConfig);
+            let buildResult;
+            try {
+                buildResult = await this.#buildContexts[realm].rebuild();
+            } catch (e) { continue; }
+
+            moduleGraph = { ...moduleGraph, ...buildResult.metafile.inputs };
+            this.#buildOutputs[realm] = Object.fromEntries(buildResult.outputFiles?.map((f) => {
+                return [Path.relative(process.cwd(), f.path), f.text];
+            }) ?? []);
+        }
+
+        return moduleGraph;
     }
 
     async enterDevMode() {
@@ -251,7 +291,7 @@ export class WebfloServer extends AppRuntime {
         const secret = this.env('SESSION_KEY');
 
         let tenantID = request.headers.get('Cookie', true).find((c) => c.name === '__sessid')?.value;
-        
+
         if (tenantID?.includes('.')) {
             if (secret) {
                 const [rand, signature] = tenantID.split('.');
@@ -426,7 +466,7 @@ export class WebfloServer extends AppRuntime {
                 wss.handleUpgrade(nodeRequest, socket, head, (ws) => {
                     wss.emit('connection', ws, nodeRequest);
                     const wsw = new WebSocketPort(ws, { handshake: 1, postAwaitsOpen: true });
-                    clientRequestPort.addPort(wsw);
+                    clientRequestPort.addPort(wsw, { enableBubbling: true });
                 });
             }
         };
@@ -568,13 +608,13 @@ export class WebfloServer extends AppRuntime {
 
         if (FLAGS['dev']) {
             if (httpEvent.url.pathname === '/@hmr') {
+                // This is purely a route handler source request from HMR
                 const filename = httpEvent.url.searchParams.get('src')?.split('?')[0] || '';
+                scopeObj.filename = Path.join(LAYOUT.PUBLIC_DIR, filename);
                 if (filename.endsWith('.js')) {
-                    // This is purely a route handler source request from HMR
-                    scopeObj.filename = Path.join(RUNTIME_LAYOUT.PUBLIC_DIR, filename);
-                } else {
-                    // This is a static asset (HTML) request from HMR
-                    scopeObj.filename = Path.join(LAYOUT.PUBLIC_DIR, filename);
+                    // Attempt reading from build output
+                    const buildOutputName = filename.replace('../', '');
+                    scopeObj.fileContents = this.#hmr.buildOutput[buildOutputName];
                 }
             } else {
                 if (this.#hmr.options.buildSensitivity === 1) {
@@ -654,7 +694,10 @@ export class WebfloServer extends AppRuntime {
         scopeObj.stats.mime = scopeObj.ext && (Mime.lookup(scopeObj.ext) || null)?.replace('application/javascript', 'text/javascript') || 'application/octet-stream';
 
         // Range support
-        const readStream = (params = {}) => Fs.createReadStream(scopeObj.filename, { ...params });
+        const readStream = (params = {}) => {
+            if (scopeObj.fileContents) return Readable.from(scopeObj.fileContents);
+            return Fs.createReadStream(scopeObj.filename, { ...params });
+        };
         scopeObj.response = this.createStreamingResponse(httpEvent, readStream, scopeObj.stats);
         const statusCode = scopeObj.response.status;
         if (statusCode === 416) return finalizeResponse(scopeObj.response);
@@ -717,7 +760,7 @@ export class WebfloServer extends AppRuntime {
         // Thread
         scopeObj.thread = HttpThread111.create({
             context: {},
-            store: this.#keyvals.create({ path: ['thread', scopeObj.tenantID], origins, ttl: 60*60*24*30/* 30 days */ }),
+            store: this.#keyvals.create({ path: ['thread', scopeObj.tenantID], origins, ttl: 60 * 60 * 24 * 30/* 30 days */ }),
             threadID: scopeObj.url.searchParams.get('_thread'),
             realm: 3
         });

package/src/webflo-runtime/webflo-server/webflo-devmode.js

@@ -1,6 +1,7 @@
 import Path from 'path';
 import chokidar from 'chokidar';
-import { exec, spawn } from 'child_process';
+import { exec } from 'child_process';
+import spawn from 'cross-spawn';
 import { platform } from 'os';
 
 export class WebfloHMR {
@@ -38,6 +39,9 @@ export class WebfloHMR {
     };
     get dirtiness() { return this.#dirtiness; }
 
+    #buildOutput;
+    get buildOutput() { return this.#buildOutput; }
+
     #ignoreList = new Set;
     get ignoreList() { return this.#ignoreList; }
 
@@ -109,7 +113,7 @@ export class WebfloHMR {
                     await this.buildRoutes(this.#jsMeta.mustRevalidate/*fullBuild*/);
                     hasJustBeenRebuilt = true;
                 }
-                const affectedHandlers = this.#jsMeta.dependencyMap[target] || [];
+                const affectedHandlers = this.#jsMeta.dependencyMap?.[target] || [];
                 for (const affectedHandler of affectedHandlers) {
                     const [, dir, affectedRoute = '/', realm] = this.#handlerMatch.exec(affectedHandler) || [];
                     for (const r of ['client', 'worker', 'server']) {
@@ -142,8 +146,9 @@ export class WebfloHMR {
             } else if (event.realm === 'server') {
                 if (/^unlink/.test(event.actionableEffect)) {
                     delete this.#app.routes[event.affectedRoute];
-                } else if (event.realm === 'server') {
+                } else {
                     this.#app.routes[event.affectedRoute] = `${Path.join(this.#app.config.RUNTIME_DIR, event.affectedHandler)}?_webflohmrhash=${Date.now()}`;
+                    //this.#app.routes[event.affectedRoute] = `data:text/javascript;base64,${Buffer.from(this.#app.buildOutputs.server[event.affectedHandler]).toString('base64')}`;
                 }
             } else if (event.fileType === 'css') {
                 this.#dirtiness.CSSAffected = true;
@@ -172,31 +177,14 @@ export class WebfloHMR {
 
     async buildRoutes(fullBuild = false) {
         // 0. Generate graph
-        let buildResult;
-        try {
-            if (this.#jsMeta.prevBuildResult) {
-                if (fullBuild) await this.#jsMeta.prevBuildResult.rebuild.dispose();
-                else buildResult = await buildResult.rebuild();
-            }``
-            if (!buildResult) {
-                const bundlingConfig = {
-                    client: true,
-                    worker: true,
-                    server: true,
-                    metafile: true,      // This is key
-                    logLevel: 'silent',  // Suppress output
-                    incremental: true,
-                };
-                buildResult = await this.#app.buildRoutes(bundlingConfig);
-            }
-        } catch (e) {
-            //console.error(e);
-            return false;
-        }
+        const moduleGraph = await this.#app.buildRoutes(
+            ['server', 'client', 'worker'],
+            { revalidate: fullBuild },
+        );
 
         // 1. Forward dependency graph (file -> [imported files])
         const forward = {};
-        for (const [file, data] of Object.entries(buildResult.metafile.inputs)) {
+        for (const [file, data] of Object.entries(moduleGraph)) {
             forward[file] = data.imports?.map((imp) => Path.normalize(imp.path)) || [];
         }
 
@@ -210,7 +198,7 @@ export class WebfloHMR {
         }
 
         // 3. Trace from leaf file to roots (handler files)
-        const handlers = Object.keys(buildResult.metafile.inputs).filter((f) => this.#handlerMatch.test(f));
+        const handlers = Object.keys(moduleGraph).filter((f) => this.#handlerMatch.test(f));
         const handlerDepsMap = {};
 
         for (const handler of handlers) {
@@ -226,6 +214,7 @@ export class WebfloHMR {
                 stack.push(...deps);
             }
         }
+
         this.#jsMeta.dependencyMap = handlerDepsMap;
         this.#jsMeta.mustRevalidate = false;
         
@@ -277,7 +266,6 @@ export class WebfloHMR {
         return await new Promise((resolve, reject) => {
             const child = spawn(commandArr.shift(), commandArr, {
                 stdio: ['pipe', 'pipe', 'inherit', 'ipc'],
-                shell: true, // for Windows compatibility
             });
             child.on('message', (msg) => {
                 for (const file of msg?.outfiles || []) {