@webqit/webflo 0.11.61 → 0.20.2-next.0

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

@@ -0,0 +1,11 @@
+import { WebfloServer } from './WebfloServer.js';
+
+export async function start() {
+    const instance = WebfloServer.create(this || {});
+    await instance.initialize();
+    return instance;
+}
+
+export {
+    WebfloServer
+}

package/src/runtime-pi/webflo-server/messaging/Client.js

@@ -0,0 +1,27 @@
+import { WQStarPort } from '../../webflo-messaging/WQStarPort.js';
+import { ClientRequestRealtime } from './ClientRequestRealtime.js';
+
+export class Client extends WQStarPort {
+
+    #clientID;
+    get clientID() { return this.#clientID; }
+
+    constructor(clientID) {
+        super();
+        this.#clientID = clientID;
+    }
+
+    getRequestRealtime(portID) {
+        return this.findPort((port) => port.portID === portID);
+    }
+
+    createRequestRealtime(portID, url = null) {
+        const requestPort = new ClientRequestRealtime(portID, url);
+        const cleanup = this.addPort(requestPort);
+        setTimeout(() => {
+            if (requestPort.length || !this.findPort((port) => port === requestPort)) return;
+            cleanup();
+        }, 30000/*30sec*/);
+        return requestPort;
+    }
+}

package/src/runtime-pi/webflo-server/messaging/ClientRequestRealtime.js

@@ -0,0 +1,50 @@
+import { WQStarPort } from '../../webflo-messaging/WQStarPort.js';
+import { _wq } from '../../../util.js';
+
+export class ClientRequestRealtime extends WQStarPort {
+
+    #portID;
+    get portID() { return this.#portID; }
+
+    #url;
+    get url() { return this.#url; }
+
+    #navigatedIn = false;
+    navigatedIn() { return this.#navigatedIn; }
+
+    #navigatedAway = false;
+    navigatedAway() { return this.#navigatedAway; }
+
+    constructor(portID, url) {
+        super();
+        this.#portID = portID;
+        this.#url = url;
+        const $url = new URL(url);
+        let lastNavigationEvent;
+        this.addEventListener('navigate', (e) => {
+            if (e.data.pathname === $url.pathname) {
+                this.#navigatedIn = true;
+                lastNavigationEvent = 'navigatein';
+            } else {
+                this.#navigatedAway = true;
+                lastNavigationEvent = 'navigateaway';
+            }
+            const event = new Event(lastNavigationEvent);
+            this.dispatchEvent(event);
+            if (event.defaultPrevented) {
+                e.preventDefault();
+            }
+        });
+    }
+
+    enterChannel(channelID, { resolveData = null } = {}) {
+        const client = _wq(this, 'meta').get('parentNode');
+        const clients = client && _wq(client, 'meta').get('parentNode');
+        if (!clients) {
+            throw new Error('Instance seem not connected to the messaging system.');
+        }
+        const channel = clients.getChannel(channelID, true);
+        const leave = channel.addPort(client, { resolveData });
+        return { channel, leave };
+    }
+}

package/src/runtime-pi/webflo-server/messaging/Clients.js

@@ -0,0 +1,25 @@
+import { WQStarPort } from '../../webflo-messaging/WQStarPort.js';
+import { WQRelayPort } from '../../webflo-messaging/WQRelayPort.js';
+import { Client } from './Client.js';
+
+export class Clients extends WQStarPort {
+    #channels = new Map;
+
+    getClient(clientID, autoCreate = false) {
+        if (autoCreate && !this.findPort((client) => client.clientID === clientID)) {
+            const client = new Client(clientID);
+            const cleanup = this.addPort(client);
+            client.wqLifecycle.close.then(cleanup);
+        }
+        return this.findPort((client) => client.clientID === clientID);
+    }
+
+    getChannel(channelName, autoCreate = false) {
+        if (!this.#channels.has(channelName) && autoCreate) {
+            const channel = new WQRelayPort(channelName);
+            this.#channels.set(channelName, channel);
+            channel.wqLifecycle.close.then(() => this.#channels.delete(channelName));
+        }
+        return this.#channels.get(channelName);
+    }
+}

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

@@ -0,0 +1,326 @@
+import Path from 'path';
+import $glob from 'fast-glob';
+import EsBuild from 'esbuild';
+import chokidar from 'chokidar';
+import { exec, spawn } from 'child_process';
+import { platform } from 'os';
+
+export class WebfloHMR {
+
+    static manage(app, options = {}) {
+        return new this(app, options);
+    }
+
+    #app;
+
+    #options;
+    get options() { return this.#options; }
+
+    #jsMeta = {
+        dependencyMap: null/*!IMPORTANT!*/,
+        mustRevalidate: true,
+        prevBuildResult: null,
+    };
+
+    #layoutDirsMatchMap;
+    #routeDirs;
+    #handlerMatch;
+
+    #clients = new Set;
+    get clients() { return this.#clients; }
+
+    #watcher;
+    get watcher() { return this.#watcher; }
+
+    #dirtiness = {
+        CSSAffected: false,
+        HTMLAffected: false,
+        clientRoutesAffected: new Set,
+        serviceWorkerAffected: false,
+    };
+    get dirtiness() { return this.#dirtiness; }
+
+    #ignoreList = new Set;
+    get ignoreList() { return this.#ignoreList; }
+
+    #eventQueue = [];
+
+    constructor(app, options = {}) {
+        this.#app = app;
+        this.#options = options;
+        // Filesytem matching
+        const _layoutDirPattern = (dirs) => `^(${[...dirs].map((d) => Path.relative(process.cwd(), d).replace(/^\.\//g, '').replace(/\./g, '\\.').replace(/\//g, '\\/')).join('|')})`;
+        this.#layoutDirsMatchMap = Object.fromEntries(['CLIENT_DIR', 'WORKER_DIR', 'SERVER_DIR', 'VIEWS_DIR', 'PUBLIC_DIR'].map((name) => {
+            return [name, new RegExp(_layoutDirPattern([app.config.LAYOUT[name]]))];
+        }));
+        this.#routeDirs = new Set([app.config.LAYOUT.CLIENT_DIR, app.config.LAYOUT.WORKER_DIR, app.config.LAYOUT.SERVER_DIR]);
+        this.#handlerMatch = new RegExp(`${_layoutDirPattern(this.#routeDirs)}(\\/.+)?\\/handler(?:\\.(client|worker|server))?\\.js$`);
+        // The watch and event ordering logic
+        const totalWatchDirs = new Set([...this.#routeDirs, app.config.LAYOUT.VIEWS_DIR, app.config.LAYOUT.PUBLIC_DIR]);
+        this.#watcher = chokidar.watch([...totalWatchDirs], { ignoreInitial: true });
+        let flushTimer;
+        const scheduleFlush = () => {
+            clearTimeout(flushTimer);
+            flushTimer = setTimeout(() => this.#flushEvents(), EVENT_FLUSH_DELAY);
+        };
+        const EVENT_FLUSH_DELAY = 200; // milliseconds
+        this.#watcher.on('all', async (type, $target) => {
+            if (!['unlink', 'add', 'change', 'addDir', 'unlinkDir'].includes(type)) return;
+            this.#eventQueue.push({ type, $target });
+            scheduleFlush();
+        });
+    }
+
+    async #flushEvents() {
+        // Sort by event priority and path depth (deepest files first for unlinks)
+        // The Dir events are for structuring purposes
+        const priority = {
+            unlink: 1,
+            unlinkDir: 2,
+            addDir: 3,
+            add: 4
+        };
+        const eventQueue = this.#eventQueue.splice(0).sort((a, b) => {
+            if (priority[a.type] !== priority[b.type]) {
+                return priority[a.type] - priority[b.type];
+            }
+            return b.$target.split('/').length - a.$target.split('/').length; // deeper first
+        });
+        const events = new Set;
+        let hasJustBeenRebuilt = false;
+        for (const { type, $target } of eventQueue) {
+            if (this.#ignoreList.has($target)) continue;
+            const target = Path.relative(process.cwd(), $target);
+            if (this.#layoutDirsMatchMap.PUBLIC_DIR.test(target)) { // Assets
+                if (target.endsWith('.css')) {
+                    events.add({ type, target, fileType: 'css', kind: 'asset' });
+                }
+            }
+            if (this.#layoutDirsMatchMap.VIEWS_DIR.test(target)) { // Views
+                if (/Dir$/.test(type)) { // (addDir | unlinkDir)
+                    events.add({ type, target, fileType: null, kind: 'view' });
+                } else if (target.endsWith('.html')) {
+                    events.add({ type, target, fileType: 'html', kind: 'view' });
+                }
+            }
+            if (target.endsWith('.js')) {
+                if (/add|unlink/.test(type)) {
+                    this.#jsMeta.mustRevalidate = true; // Invalidate graph
+                }
+                if ((!hasJustBeenRebuilt && type !== 'unlink') || !this.#jsMeta.dependencyMap) { // We need graph in place to process affected routes for an unlink event
+                    await this.buildJS(this.#jsMeta.mustRevalidate/*fullBuild*/);
+                    hasJustBeenRebuilt = true;
+                }
+                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']) {
+                        const scopeObj = {};
+                        if (type === 'unlink' && realm === r && target === affectedHandler // Dedicated handlers directly removed. Calculate fallback!
+                            && (scopeObj.genericHandler = _toGeneric(target)) in this.#jsMeta.dependencyMap) {
+                            // A fallback to generic handler happened
+                            events.add({ type, target, fileType: 'js', affectedRoute, affectedHandler: scopeObj.genericHandler, realm: r, actionableEffect: 'change' });
+                        } else if (realm === r || !realm/*generic handler*/ && (
+                            this.#layoutDirsMatchMap[`${r.toUpperCase()}_DIR`].test(dir) && !(_toDedicated(target, r) in this.#jsMeta.dependencyMap)/*no dedicated handler exists*/
+                        )) {
+                            const actionableEffect = target === affectedHandler ? type : 'change';
+                            events.add({ type, target, fileType: 'js', affectedRoute, affectedHandler, realm: r, actionableEffect });
+                        }
+                    }
+                }
+            }
+        }
+        if (events.size) {
+            this.fire(events);
+        }
+    }
+
+    async fire(events) {
+        for (const event of events) {
+            if (event.realm === 'client') {
+                this.#dirtiness.clientRoutesAffected.add(event.affectedRoute);
+            } else if (event.realm === 'worker') {
+                this.#dirtiness.serviceWorkerAffected = true;
+            } else if (event.realm === 'server') {
+                if (/^unlink/.test(event.actionableEffect)) {
+                    delete this.#app.routes[event.affectedRoute];
+                } else if (event.realm === 'server') {
+                    this.#app.routes[event.affectedRoute] = `${Path.join(this.#app.config.DEV_DIR, event.affectedHandler)}?_webflohmrhash=${Date.now()}`;
+                }
+            } else if (event.fileType === 'css') {
+                this.#dirtiness.CSSAffected = true;
+            } else if (event.fileType === 'html' || !event.fileType) {
+                this.#dirtiness.HTMLAffected = true;
+            }
+        }
+        if (this.#options.buildSensitivity === 1) {
+            await this.bundleAssetsIfPending();
+        }
+        // Broadcast to clients
+        const PUBLIC_DIR = Path.relative(process.cwd(), this.#app.config.LAYOUT.PUBLIC_DIR);
+        const $events = [...events].map((event) => {
+            const $event = { ...event };
+            $event.target = Path.relative(PUBLIC_DIR, event.target);
+            if (event.affectedHandler) {
+                $event.affectedHandler = Path.relative(PUBLIC_DIR, event.affectedHandler);
+            }
+            return $event;
+        });
+
+        for (const client of this.#clients) {
+            client.send(JSON.stringify($events));
+        }
+    }
+
+    async buildJS(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 routeDirs = [...this.#routeDirs];
+                const entryPoints = await $glob(routeDirs.map((d) => `${d}/**/handler{,.client,.worker,.server}.js`), { absolute: true })
+                    .then((files) => files.map((file) => file.replace(/\\/g, '/')));
+                const entryNames = routeDirs.length === 1 ? `${Path.relative(process.cwd(), routeDirs[0])}/[dir]/[name]` : `[dir]/[name]`;
+                const bundlingConfig = {
+                    entryPoints,
+                    outdir: this.#app.config.DEV_DIR,
+                    entryNames,
+                    bundle: true,
+                    format: 'esm',
+                    platform: 'browser', // optional but good for clarity
+                    metafile: true,      // This is key
+                    treeShaking: true,   // Optional optimization
+                    logLevel: 'silent',  // Suppress output
+                    minify: false,
+                    sourcemap: false,
+                    incremental: true,
+                };
+                buildResult = await EsBuild.build(bundlingConfig);
+            }
+        } catch (e) { return false; }
+
+        // 1. Forward dependency graph (file -> [imported files])
+        const forward = {};
+        for (const [file, data] of Object.entries(buildResult.metafile.inputs)) {
+            forward[file] = data.imports?.map((imp) => Path.normalize(imp.path)) || [];
+        }
+
+        // 2. Reverse dependency graph (file -> [parents])
+        const reverse = {};
+        for (const [file, imports] of Object.entries(forward)) {
+            for (const dep of imports) {
+                if (!reverse[dep]) reverse[dep] = [];
+                reverse[dep].push(file);
+            }
+        }
+
+        // 3. Trace from leaf file to roots (handler files)
+        const handlers = Object.keys(buildResult.metafile.inputs).filter((f) => this.#handlerMatch.test(f));
+        const handlerDepsMap = {};
+
+        for (const handler of handlers) {
+            const visited = new Set();
+            const stack = [handler];
+            while (stack.length) {
+                const current = stack.pop();
+                if (visited.has(current)) continue;
+                visited.add(current);
+                if (!handlerDepsMap[current]) handlerDepsMap[current] = [];
+                handlerDepsMap[current].push(handler);
+                const deps = forward[current] || [];
+                stack.push(...deps);
+            }
+        }
+        this.#jsMeta.dependencyMap = handlerDepsMap;
+        this.#jsMeta.mustRevalidate = false;
+        
+        return true;
+    }
+
+    async bundleAssetsIfPending() {
+        const entries = {};
+
+        if (this.#dirtiness.clientRoutesAffected.size || this.#dirtiness.serviceWorkerAffected) {
+            entries.js = {};
+            entries.js.client = !!this.#dirtiness.clientRoutesAffected.size;
+            entries.js.worker = this.#dirtiness.serviceWorkerAffected;
+            // Clear state
+            this.#dirtiness.clientRoutesAffected.clear();
+            this.#dirtiness.serviceWorkerAffected = false;
+        }
+
+        if (this.#dirtiness.HTMLAffected) {
+            this.#dirtiness.HTMLAffected = false;
+            entries.html = {};
+        }
+
+        if (this.#dirtiness.CSSAffected) {
+            this.#dirtiness.CSSAffected = false;
+            entries.css = {};
+        }
+
+        for (const e in entries) {
+            const buildKey = `build:${e}`;
+            let buildScript,
+                buildScriptName = this.#options.buildScripts?.[buildKey];
+            if (buildScriptName === true) {
+                buildScriptName = buildKey;
+            }
+            if (buildScriptName
+                && (buildScript = this.#options.appMeta.scripts?.[buildScriptName])) {
+                await this.#spawnProcess(buildScript, entries[e]);
+            }
+        }
+    }
+
+    async #spawnProcess(command, options = {}) {
+        const commandArr = [...new Set(
+            command.split(/\s+?/).concat(Object.keys(options)).filter((s) => !(s in options) || options[s])
+        )];
+        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 || []) {
+                    this.#ignoreList.add(file);
+                }
+            });
+            child.on('exit', (code) => {
+                if (code === 0) resolve(child);
+                else reject(new Error(`Process exited with code ${code}`));
+            });
+        });
+    }
+}
+
+const _toGeneric = (file) => {
+    return file.replace(/\.(client|worker|server)\.js$/, '.js');
+};
+
+const _toDedicated = (file, suffix) => {
+    return file.replace(/\.js$/, `.${suffix}.js`);
+};
+
+export function openBrowser(url) {
+    const plat = platform();
+    let command;
+    if (plat === 'darwin') {
+        command = `open "${url}"`;
+    } else if (plat === 'win32') {
+        command = `start "" "${url}"`;
+    } else if (plat === 'linux') {
+        command = `xdg-open "${url}"`;
+    } else {
+        console.warn('🌐 Unable to auto-open browser on this platform.');
+        return;
+    }
+    exec(command, (err) => {
+        if (err) console.error('❌ Failed to open browser:', err);
+    });
+}

package/src/runtime-pi/{client → webflo-url}/Url.js

@@ -1,28 +1,10 @@
-
-/**
- * @imports
- */
 import { _with } from '@webqit/util/obj/index.js';
 import { _isArray, _isObject, _isTypeObject, _isString, _isEmpty } from '@webqit/util/js/index.js';
-import { Observer } from './Runtime.js';
-import { params } from '../util-url.js';
-
-/**
- * ---------------------------
- * The Url class
- * ---------------------------
- */
+import { DeepURLSearchParams } from './util.js';
+import { Observer } from '@webqit/quantum-js';
 
-export default class Url {
+export class Url {
 
-	/**
-	 * Constructs a new Url instance.
-	 *
-     * @param object input
-     * @param object pathMappingScheme
-     * 
-	 * @return void
-	 */
 	constructor(input) {
         const Self = this.constructor;
 		// -----------------------
@@ -56,6 +38,9 @@ export default class Url {
 				// ----------
 				if (e.key === 'href' && e.related.length === 1) {
 					var urlObj = Self.parseUrl(e.value);
+					if (urlObj.pathname) {
+						urlObj.pathname = '/' + urlObj.pathname.split('/').filter(s => s.trim()).join('/');
+					}
 					delete urlObj.query;
 					delete urlObj.href;
 					onlyHrefChanged = true;
@@ -68,13 +53,27 @@ export default class Url {
 						urlObj.search = search;
 					}
 				}
-				if (e.key === 'search') {
+				if (e.key === 'search' && !e.related.includes('query')) {
 					// "search" was updated. So we update "query"
 					var query = Self.toQuery(urlObj.search || this.search); // Not e.value, as that might be a href value
 					if (!_strictEven(query, this.query)) {
 						urlObj.query = query;
 					}
 				}
+				if (e.key === 'pathname' && !e.related.includes('ancestorPathname')) {
+					// "pathname" was updated. So we update "ancestorPathname"
+					var ancestorPathname = (urlObj.pathname || this.pathname).replace(new RegExp('/[^/]+(?:/)?$'), '');
+					if (ancestorPathname !== this.ancestorPathname) {
+						urlObj.ancestorPathname = ancestorPathname;
+					}
+				}
+				if (e.key === 'ancestorPathname' && !e.related.includes('pathname')) {
+					// "ancestorPathname" was updated. So we update "pathname"
+					var pathname = '/' + (urlObj.ancestorPathname || this.ancestorPathname).split('/').filter(s => s).concat((urlObj.pathname || this.pathname).split('/').filter(s => s).pop()).join('/');
+					if (pathname !== this.pathname) {
+						urlObj.pathname = pathname;
+					}
+				}
 			}
 			if (!onlyHrefChanged) {
 				var fullOrigin = this.origin,
@@ -110,85 +109,37 @@ export default class Url {
         Observer.set(this, _isString(input) ? Self.parseUrl(input) : Url.copy(input));
 	}
 
-	/**
-	 * Converts the instance to string.
-	 *
-	 * @return string
-	 */
 	toString() {
         return this.href;
     }
     
-	/**
-	 * Creates an instance from parsing an URL string
-     * or from a regular object.
-	 *
-	 * @param string|object 	href
-	 *
-	 * @return Url
-	 */
 	static from(href) {
         return new this(_isObject(href) ? href : this.parseUrl(href));
 	}
 
-	/**
-	 * Copies URL properties off
-	 * the given object.
-	 *
-	 * @param object 			urlObj
-	 *
-	 * @return object
-	 */
 	static copy(urlObj) {
-		var url = urlProperties.reduce((obj, prop) => _with(obj, prop, urlObj[prop]), {});
+		var url = urlProperties.reduce((obj, prop) => _with(obj, prop, urlObj[prop] || ''), {});
 		if (!('query' in urlObj)) {
 			delete url.query;
 		}
 		return url;
 	}
 
-	/**
-	 * Parses an URL and returns its properties
-	 *
-	 * @param string			href
-	 *
-	 * @return object
-	 */
 	static parseUrl(href) {
-		var a = document.createElement('a');
-		a.href = href;
+		var a = new URL(href);
 		return this.copy(a);
 	}
 
-	/**
-	 * Parses the input search string into a named map
-	 *
-	 * @param string			search
-	 *
-	 * @return object
-	 */
 	static toQuery(search) {
-		return params.parse(search);
+		return DeepURLSearchParams.eval({}, search);
 	}
 
-	/**
-	 * Stringifies the input query to search string.
-	 *
-	 * @param object			query
-	 *
-	 * @return string
-	 */
 	static toSearch(query) {
-		var search = params.stringify(query);
+		var search = DeepURLSearchParams.stringify(query);
 		return search ? '?' + search : '';
-	}}
+	}
+}
 
-/**
- * These are standard
- * and shouldnt'/can't be modified
- *
- * @array
- */
 const urlProperties = [
 	'protocol', 
 	'username',

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

@@ -0,0 +1 @@
+import './urlpattern.js';

package/src/runtime-pi/webflo-url/urlpattern.js

@@ -0,0 +1,38 @@
+import { _isNumeric } from '@webqit/util/js/index.js';
+if (typeof URLPattern === 'undefined') {
+    await import('urlpattern-polyfill');
+}
+
+const { exec: execMethod } = URLPattern.prototype;
+const urlPatternMethods = {
+    isPattern: {
+        value: function () {
+            return Object.keys(this.keys || {}).some((compName) => this.keys[compName].length);
+        }
+    },
+    exec: {
+        value: function (...args) {
+            let components = execMethod.call(this, ...args);
+            if (!components) return;
+            components.vars = Object.keys(this.keys).reduce(({ named, unnamed }, compName) => {
+                this.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;
+        }
+    },
+};
+
+Object.defineProperties(URLPattern.prototype, urlPatternMethods);