@aistrike-dev/ui-shell-dev 2.1.0 → 2.1.1

package/dist/serve.js

@@ -0,0 +1,161 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { createServer } from 'node:http';
+import { extname, join, normalize, resolve, sep } from 'node:path';
+import { closeCell, createCellServer } from './cell.js';
+import { buildDevConfig, loadDevFile } from './devfile.js';
+import { CONTENT_TYPES, injectDevConfig, sendFile, validateDevConfig } from './inject.js';
+import { createPlatformHost, readPlatform, selectPlatform } from './platform/host.js';
+import { isAllowedHost, refuseHost, rememberSession } from './hosts.js';
+import { DEV_PORTS } from './ports.js';
+import { beforeFirstModule, refreshPreamble, refreshRuntimePath, servesRefreshRuntime } from './preamble.js';
+import { loadOrCreateKey, mintToken } from './token.js';
+import { cellTargets } from './vite/targets.js';
+export const DEFAULT_CONSOLE_PORT = 3000;
+export const DEFAULT_CELL_PORT = 4000;
+/** The ui-shell dev server's file: where each domain runs, in `cell`, and nothing an MFE project's file says. */
+function assertCellFile(file, name) {
+    if (file?.domains !== undefined) {
+        throw new Error(`${name}: domains is an MFE project's own domain; list each domain in cell.domains instead`);
+    }
+    const unnamed = file?.cell?.domains.find((domain) => domain.nav === undefined && !Object.hasOwn(DEV_PORTS, domain.id));
+    if (unnamed !== undefined) {
+        throw new Error(`${name}: cell.domains: "${unnamed.id}" is not a compiled domain, so it needs nav.label`);
+    }
+}
+async function listen(server, port) {
+    return await new Promise((done, fail) => {
+        server.once('error', fail);
+        server.listen(port, () => {
+            server.off('error', fail);
+            const address = server.address();
+            done(typeof address === 'object' && address !== null ? address.port : port);
+        });
+    });
+}
+async function closeServer(server) {
+    await new Promise((done) => {
+        server.close(() => {
+            done();
+        });
+        server.closeAllConnections();
+    });
+}
+function answer(res, status, text) {
+    res.statusCode = status;
+    res.setHeader('Content-Type', 'text/plain');
+    res.end(text);
+}
+/**
+ * The ui-shell dev server (cell resolution design 3): the console, which serves the shell's devhost build with a dev
+ * token, and the dev cell, an origin of its own that forwards each domain to the server its `cell.domains` names, or
+ * to the built-in MFE. The shell loads every domain from the cell, cross-origin, as from a deployed cell.
+ */
+export async function serveDevShell(options) {
+    const name = options.config ?? 'shell.dev.json';
+    const file = loadDevFile(name, options.cwd);
+    assertCellFile(file, name);
+    const shellDir = resolve(options.shellDir);
+    const listed = file?.cell?.domains ?? [];
+    const packaged = readPlatform(options.platformDir);
+    const elsewhere = listed.map((domain) => domain.id);
+    const bundled = selectPlatform(packaged, { ownId: '', elsewhere, option: true });
+    const platform = createPlatformHost(options.platformDir, bundled, options.logger);
+    await platform.bind();
+    const cell = createCellServer({ targets: () => cellTargets({ listed, platform: packaged }), logger: options.logger });
+    let cellPort;
+    try {
+        cellPort = await listen(cell, options.cellPort ?? DEFAULT_CELL_PORT);
+    }
+    catch (error) {
+        await platform.close();
+        throw error;
+    }
+    const key = loadOrCreateKey(options.keyDir);
+    const sessions = new Map();
+    /**
+     * The token for a browser that reached the console as `host` (an allowed one, `isAllowedHost`): its `cell` is the dev
+     * cell on that same address. At most `MAX_SESSIONS` are kept; the oldest gives way.
+     */
+    const sessionFor = (host) => {
+        const cellHost = `${new URL(`http://${host}`).hostname}:${String(cellPort)}`;
+        let session = sessions.get(cellHost);
+        if (session === undefined) {
+            session = mintToken({ key, claims: file?.claims, cell: cellHost }).session;
+            rememberSession(sessions, cellHost, session);
+        }
+        return session;
+    };
+    validateDevConfig(buildDevConfig(file, {}, sessionFor('localhost')));
+    /** Listed domains whose server is a Vite dev server with React Refresh; a server not up yet is asked again next load. */
+    const refreshing = new Set();
+    const preambleFor = async (cellHost) => {
+        await Promise.all(listed.filter((domain) => !refreshing.has(domain.id)).map(async (domain) => {
+            if (await servesRefreshRuntime(domain.at, domain.id)) {
+                refreshing.add(domain.id);
+            }
+        }));
+        const ids = listed.map((domain) => domain.id).filter((id) => refreshing.has(id));
+        return refreshPreamble(ids.map((id) => `http://${cellHost}${refreshRuntimePath(id)}`));
+    };
+    const servePage = async (host, res) => {
+        const source = join(shellDir, 'index.html');
+        // A watch build empties its output before it writes again.
+        if (!existsSync(source)) {
+            answer(res, 503, 'The shell is building. Reload in a moment.');
+            return;
+        }
+        const session = sessionFor(host);
+        const devConfig = buildDevConfig(file, {}, session);
+        const page = injectDevConfig(readFileSync(source, 'utf8'), devConfig, source);
+        const preamble = await preambleFor(String(session.claims.cell));
+        res.setHeader('Content-Type', CONTENT_TYPES['.html'] ?? 'text/html');
+        res.setHeader('Cache-Control', 'no-store');
+        res.end(beforeFirstModule(page, preamble, source));
+    };
+    const consoleServer = createServer((req, res) => {
+        if (!isAllowedHost(req.headers.host)) {
+            refuseHost(res);
+            return;
+        }
+        let pathname;
+        try {
+            pathname = decodeURIComponent(new URL(req.url ?? '/', 'http://localhost').pathname);
+        }
+        catch {
+            answer(res, 400, 'bad request');
+            return;
+        }
+        if (pathname.startsWith('/assets/')) {
+            const target = resolve(shellDir, `.${normalize(pathname)}`);
+            if (target.startsWith(shellDir + sep)) {
+                sendFile(target, res);
+                return;
+            }
+            answer(res, 404, 'not found');
+            return;
+        }
+        if (extname(pathname) !== '' && pathname !== '/index.html') {
+            answer(res, 404, 'not found');
+            return;
+        }
+        servePage(req.headers.host, res).catch((error) => {
+            options.logger.warn(`console: ${error instanceof Error ? error.message : String(error)}`);
+            answer(res, 500, 'the shell page could not be served');
+        });
+    });
+    let consolePort;
+    try {
+        consolePort = await listen(consoleServer, options.port ?? DEFAULT_CONSOLE_PORT);
+    }
+    catch (error) {
+        await Promise.all([closeCell(cell), platform.close()]);
+        throw error;
+    }
+    return {
+        consolePort,
+        cellPort,
+        close: async () => {
+            await Promise.all([closeServer(consoleServer), closeCell(cell), platform.close()]);
+        },
+    };
+}

package/dist/token.d.ts

@@ -31,6 +31,11 @@ export declare function loadOrCreateKey(dir?: string): DevKey;
 export interface MintOptions {
     key: DevKey;
     claims?: DevClaimsInput;
+    /**
+     * The `cell` claim: the host the browser reached the dev host by (`localhost:5103`), which is the cell in dev (cell
+     * resolution design 3). Set by the plugin, never by a claims file.
+     */
+    cell?: string;
     ttlMs?: number;
     now?: number;
 }
@@ -38,7 +43,7 @@ export interface Minted {
     token: string;
     session: Session;
 }
-export declare function mintToken({ key, claims, ttlMs, now }: MintOptions): Minted;
+export declare function mintToken({ key, claims, cell, ttlMs, now }: MintOptions): Minted;
 export declare function decodeToken(token: string): {
     header: unknown;
     payload: unknown;

package/dist/token.js

@@ -67,11 +67,11 @@ export function loadOrCreateKey(dir = configDir()) {
     return key;
 }
 const b64url = (input) => Buffer.from(input).toString('base64url');
-export function mintToken({ key, claims = {}, ttlMs = DEFAULT_TTL_MS, now = Date.now() }) {
+export function mintToken({ key, claims = {}, cell, ttlMs = DEFAULT_TTL_MS, now = Date.now() }) {
     if (!(ttlMs > 0)) {
         throw new Error(`ttl must be positive, got ${ttlMs}`);
     }
-    const merged = { ...DEFAULT_CLAIMS, ...claims };
+    const merged = { ...DEFAULT_CLAIMS, ...claims, ...(cell === undefined ? {} : { cell }) };
     const iat = Math.floor(now / 1000);
     const exp = Math.floor((now + ttlMs) / 1000);
     const header = b64url(JSON.stringify({ alg: 'ES256', typ: 'JWT', kid: key.kid }));

package/dist/vite/plugin.d.ts

@@ -1,5 +1,7 @@
 import type { Plugin } from 'vite';
 import { type DevClaimsInput } from '../token.js';
+/** The dev cell's port when none is given: the console's own plus this (5103 → 6103). */
+export declare const CELL_PORT_OFFSET = 1000;
 export interface ShellDevHostOptions {
     /** Path to the shell devhost build. Default: the `shell/` directory shipped in this package. */
     shellDir?: string;
@@ -17,6 +19,11 @@ export interface ShellDevHostOptions {
     platform?: boolean | string[];
     /** Path to the platform MFEs' builds. Default: the `platform/` directory shipped in this package. */
     platformDir?: string;
+    /**
+     * The dev cell's port. Default: the console's port plus `CELL_PORT_OFFSET`, or any free port when that is past the
+     * last port or taken. A port given here is kept: when it is taken, the cell does not start and a warning says so.
+     */
+    cellPort?: number;
 }
 /**
  * Vite's HTML transform prefixes root-relative URLs with its base (`/ui/latest/`); the shell's build lives at the root,
@@ -24,8 +31,10 @@ export interface ShellDevHostOptions {
  */
 export declare function markShellAssets(html: string): string;
 /**
- * Serves the shell from the MFE's own Vite dev server: `/` and every extension-less path get the shell page (with the
- * dev config, the Vite client and any plugin's HTML, such as the React preamble), `/assets/*` the shell build, and
- * the MFE stays at the Vite base (`/ui/latest/`). One origin, HMR included. Add it after `mfe()`.
+ * Serves the shell from the MFE's own Vite dev server, as a console: `/` and every extension-less path get the shell
+ * page (with the dev config, the Vite client and any plugin's HTML, such as the React preamble), `/assets/*` the shell
+ * build, and the MFE stays at the Vite base (`/<id>/ui/latest/`). Beside it runs the dev cell, an origin of its own,
+ * which forwards the MFE and the built-in MFEs, so the shell loads them cross-origin as from a deployed cell (cell
+ * resolution design 3). Add it after `mfe()`.
  */
 export declare function shellDevHost(options?: ShellDevHostOptions): Plugin;

package/dist/vite/plugin.js

@@ -1,9 +1,14 @@
 import { readFileSync } from 'node:fs';
 import { extname, join, normalize, resolve, sep } from 'node:path';
+import { closeCell, createCellServer } from '../cell.js';
 import { buildDevConfig, loadDevFile } from '../devfile.js';
 import { CONTENT_TYPES, injectDevConfig, sendFile, validateDevConfig } from '../inject.js';
+import { rememberSession } from '../hosts.js';
 import { createPlatformHost, readPlatform, selectPlatform } from '../platform/host.js';
 import { loadOrCreateKey, mintToken } from '../token.js';
+import { cellTargets, domainPrefix, onTheCell } from './targets.js';
+/** The dev cell's port when none is given: the console's own plus this (5103 → 6103). */
+export const CELL_PORT_OFFSET = 1000;
 const MFE_PLUGIN = 'aistrike:mfe';
 const MISSING_MFE = 'shellDevHost() needs the mfe() plugin from @aistrike-dev/ui-shell-sdk/vite';
 const PASS_THROUGH = ['/api/', '/@', '/__', '/node_modules/'];
@@ -23,6 +28,56 @@ function mfeId(config) {
     }
     return id;
 }
+/** An MFE project runs the built-in MFEs and its own (cell resolution design 3): its file names no other domain. */
+function assertOwnOnly(file, id) {
+    const other = file?.domains?.find((domain) => domain.id !== id);
+    if (other !== undefined) {
+        throw new Error(`shell.dev.json: domains may name only this MFE ("${id}"), not "${other.id}"; ` +
+            'run the ui-shell dev server to load other domains from their dev servers');
+    }
+    if (file?.cell !== undefined) {
+        throw new Error('shell.dev.json: cell is read only by the ui-shell dev server; delete it');
+    }
+}
+/** The highest TCP port. */
+const MAX_PORT = 65_535;
+/**
+ * Starts the dev cell on `port` (0: any free port) and stops it with the server. A port already taken is logged, not
+ * fatal; with `anyIfTaken` (the port was not pinned) the cell takes any free port instead. `listening` receives the port
+ * it got.
+ */
+function startCell(server, port, anyIfTaken, targets, logger, listening) {
+    const cell = createCellServer({ targets, logger });
+    let fellBack = false;
+    cell.on('error', (error) => {
+        if (anyIfTaken && !fellBack && error.code === 'EADDRINUSE') {
+            fellBack = true;
+            logger.info(`cell: :${String(port)} is taken; listening on any free port`);
+            cell.listen(0);
+            return;
+        }
+        logger.warn(`cell: could not listen on :${String(port)} (${error.code ?? error.message}); set shellDevHost({ cellPort })`);
+    });
+    cell.once('listening', () => {
+        listening(cell.address().port);
+    });
+    cell.listen(port);
+    // Upgraded connections (an open page's HMR socket) are destroyed too: otherwise a restart would wait on them forever.
+    const stop = async () => closeCell(cell);
+    server.httpServer?.once('close', () => {
+        stop().catch(() => undefined);
+    });
+    const close = server.close.bind(server);
+    server.close = async () => {
+        await stop();
+        await close();
+    };
+    const restart = server.restart.bind(server);
+    server.restart = async (forceOptimize) => {
+        await stop();
+        await restart(forceOptimize);
+    };
+}
 const SHELL_ASSET_TAG = /<(script|link)\b([^>]*?\s(?:src|href)=["']\/assets\/)/gi;
 /**
  * Vite's HTML transform prefixes root-relative URLs with its base (`/ui/latest/`); the shell's build lives at the root,
@@ -67,25 +122,27 @@ function notFound(res) {
     res.end('not found');
 }
 /**
- * Serves the shell from the MFE's own Vite dev server: `/` and every extension-less path get the shell page (with the
- * dev config, the Vite client and any plugin's HTML, such as the React preamble), `/assets/*` the shell build, and
- * the MFE stays at the Vite base (`/ui/latest/`). One origin, HMR included. Add it after `mfe()`.
+ * Serves the shell from the MFE's own Vite dev server, as a console: `/` and every extension-less path get the shell
+ * page (with the dev config, the Vite client and any plugin's HTML, such as the React preamble), `/assets/*` the shell
+ * build, and the MFE stays at the Vite base (`/<id>/ui/latest/`). Beside it runs the dev cell, an origin of its own,
+ * which forwards the MFE and the built-in MFEs, so the shell loads them cross-origin as from a deployed cell (cell
+ * resolution design 3). Add it after `mfe()`.
  */
 export function shellDevHost(options = {}) {
     const shellDir = resolve(options.shellDir ?? defaultShellDir());
+    const platformDir = resolve(options.platformDir ?? defaultPlatformDir());
     let config;
     let id = '';
+    let file = null;
     /**
      * Platform-MFE spec 3.3: binds once the dev server listens (at once in middleware mode, which has no server of its
      * own), and closes before Vite's own close or restart returns, so a restart's new instance finds the ports free.
      */
-    const startPlatform = (server, profile, file) => {
+    const startPlatform = (server) => {
         if (options.platform === false || !config) {
             return null;
         }
-        const platformDir = resolve(options.platformDir ?? defaultPlatformDir());
-        const overrides = file?.overrides ?? {};
-        const entries = selectPlatform(readPlatform(platformDir), { ownId: id, profile, overrides, option: options.platform });
+        const entries = selectPlatform(readPlatform(platformDir), { ownId: id, elsewhere: [], option: options.platform });
         if (entries.length === 0) {
             return null;
         }
@@ -127,30 +184,63 @@ export function shellDevHost(options = {}) {
         configResolved(resolved) {
             config = resolved;
             id = mfeId(resolved);
+            file = loadDevFile(options.devFile, resolved.root);
+            assertOwnOnly(file, id);
         },
         async configureServer(server) {
             if (!config) {
                 throw new Error('aistrike:shell-dev-host: configureServer ran before configResolved');
             }
             const base = config.base;
-            const scheme = server.config.server.https ? 'https' : 'http';
-            const file = loadDevFile(options.devFile, config.root);
+            const { logger } = config;
             await mountLabLock(this, server, file, config.root);
-            let session;
-            if (options.noToken !== true) {
-                const claims = { ...(file?.claims ?? {}), ...(options.claims ?? {}) };
-                session = mintToken({ key: loadOrCreateKey(), claims, ttlMs: options.ttlMs }).session;
-            }
-            // The host the browser reached this server by. The shell builds the other MFEs' local origins on it, so a tablet
-            // on the network, here by this machine's address, loads every MFE from that address and not from its own localhost.
-            const configFor = (origin) => {
-                return {
-                    ...buildDevConfig(file, { overrides: { [id]: origin }, landing: file?.landing ?? id }, session),
-                    devHost: new URL(origin).hostname,
-                };
+            const key = options.noToken === true ? null : loadOrCreateKey();
+            const claims = { ...(file?.claims ?? {}), ...(options.claims ?? {}) };
+            const sessions = new Map();
+            let cellPort = options.cellPort ?? null;
+            /** The cell's host for a browser that reached the console as `host`: the same address, the cell's port. */
+            const cellHostFor = (host) => {
+                const hostname = new URL(`http://${host}`).hostname;
+                return cellPort === null ? null : `${hostname}:${String(cellPort)}`;
+            };
+            /**
+             * The token for a browser that reached the console as `host`: its `cell` is the dev cell on that same address, so a
+             * tablet on the network loads every domain from this machine. One per host (Vite's `allowedHosts` admits it), at
+             * most `MAX_SESSIONS`.
+             */
+            const sessionFor = (host) => {
+                const cell = cellHostFor(host);
+                if (key === null || cell === null) {
+                    return undefined;
+                }
+                let session = sessions.get(cell);
+                if (session === undefined) {
+                    session = mintToken({ key, claims, cell, ttlMs: options.ttlMs }).session;
+                    rememberSession(sessions, cell, session);
+                }
+                return session;
             };
-            validateDevConfig(configFor('http://localhost'));
-            const platform = startPlatform(server, configFor('http://localhost').profile ?? 'local', file);
+            const configFor = (host) => buildDevConfig(file, { landing: file?.landing ?? id }, sessionFor(host));
+            validateDevConfig(configFor('localhost'));
+            const platform = startPlatform(server);
+            const ownPaths = domainPrefix(id);
+            // The cell starts once the console listens: its port, and where this MFE is, follow from the console's.
+            server.httpServer?.once('listening', () => {
+                const consolePort = server.httpServer?.address()?.port;
+                if (consolePort === undefined) {
+                    return;
+                }
+                // The console's port plus the offset, unless that is past the last port (a high ephemeral console port) or
+                // taken: then any free port. A pinned `cellPort` is kept. The token names the port the cell got.
+                const pinned = cellPort !== null;
+                const wanted = cellPort ?? consolePort + CELL_PORT_OFFSET;
+                const own = { id, origin: `http://127.0.0.1:${String(consolePort)}` };
+                // Every packaged copy's port, served by its bundled copy or by a real dev server that holds it.
+                const packaged = readPlatform(platformDir);
+                startCell(server, wanted <= MAX_PORT ? wanted : 0, !pinned, () => cellTargets({ own, platform: packaged }), logger, (got) => {
+                    cellPort = got;
+                });
+            });
             const serveShell = async (req, res, pathname) => {
                 if (pathname.startsWith('/assets/')) {
                     const target = resolve(shellDir, `.${normalize(pathname)}`);
@@ -167,10 +257,13 @@ export function shellDevHost(options = {}) {
                 }
                 // A server that held a platform MFE's port may have stopped since; a reload is when to take it over.
                 await platform?.retry();
-                const devConfig = configFor(`${scheme}://${req.headers.host ?? 'localhost'}`);
+                const host = req.headers.host ?? 'localhost';
+                const devConfig = configFor(host);
                 const source = join(shellDir, 'index.html');
                 const html = markShellAssets(injectDevConfig(readFileSync(source, 'utf8'), devConfig, source));
-                sendHtml(res, await server.transformIndexHtml(req.url ?? '/', html, req.originalUrl));
+                const page = await server.transformIndexHtml(req.url ?? '/', html, req.originalUrl);
+                const cellHost = cellHostFor(host);
+                sendHtml(res, cellHost === null ? page : onTheCell(page, base, `http://${cellHost}`));
             };
             server.middlewares.use((req, res, next) => {
                 let pathname;
@@ -182,7 +275,10 @@ export function shellDevHost(options = {}) {
                     res.end('bad request');
                     return;
                 }
-                if (pathname.startsWith(base) || PASS_THROUGH.some((prefix) => pathname.startsWith(prefix))) {
+                // The MFE (Vite's base, which the cell forwards here), its API (which `mfe()` rewrote to `/api/` already), and
+                // Vite's own paths.
+                const passes = pathname.startsWith(base) || ownPaths.test(pathname) || PASS_THROUGH.some((prefix) => pathname.startsWith(prefix));
+                if (passes) {
                     next();
                     return;
                 }
@@ -193,7 +289,10 @@ export function shellDevHost(options = {}) {
                 printUrls();
                 const local = server.resolvedUrls?.local[0];
                 if (local !== undefined) {
-                    config?.logger.info(`  shell  ${new URL(local).origin}/  (serving ${id} from this origin)`);
+                    config?.logger.info(`  shell  ${new URL(local).origin}/  (the console)`);
+                }
+                if (cellPort !== null) {
+                    config?.logger.info(`  cell   http://localhost:${String(cellPort)}/  (${id} and the built-in MFEs, as the shell loads them)`);
                 }
                 for (const entry of platform?.host.held() ?? []) {
                     config?.logger.info(`  ${entry.id}  http://localhost:${String(entry.devPort)}/  (bundled)`);

package/dist/vite/targets.d.ts

@@ -0,0 +1,27 @@
+import type { CellDomain } from '../devfile.js';
+import type { PlatformEntry } from '../platform/host.js';
+export interface TargetsInput {
+    /** The MFE an MFE project's dev server develops, at that server. */
+    own?: {
+        id: string;
+        origin: string;
+    };
+    /** The ui-shell dev server's `cell.domains`: each at its own server. */
+    listed?: readonly CellDomain[];
+    /** The bundled platform MFEs, on the ports their copies listen on. */
+    platform: readonly PlatformEntry[];
+}
+/**
+ * Where the dev cell forwards each domain, which only the dev host knows (cell resolution design 3): a compiled domain
+ * on its port in `DEV_PORTS`, a bundled copy on the port it was packaged with, then a listed domain or the MFE being
+ * developed at its server, in that order of precedence.
+ */
+export declare function cellTargets(input: TargetsInput): Map<string, string>;
+/** A domain's UI and API paths, which its server answers; every other path under `/<id>/` is a shell route. */
+export declare function domainPrefix(id: string): RegExp;
+/**
+ * The console page loads the developed MFE's dev assets (Vite's client, the React refresh runtime) from the cell, as
+ * every module of it is: one URL per module, so the refresh runtime the page installs is the one the modules register
+ * with, and Vite's client opens its HMR socket on the cell.
+ */
+export declare function onTheCell(html: string, base: string, cellOrigin: string): string;

package/dist/vite/targets.js

@@ -0,0 +1,35 @@
+import { DEV_PORTS } from '../ports.js';
+const LOOPBACK = 'http://127.0.0.1';
+/**
+ * Where the dev cell forwards each domain, which only the dev host knows (cell resolution design 3): a compiled domain
+ * on its port in `DEV_PORTS`, a bundled copy on the port it was packaged with, then a listed domain or the MFE being
+ * developed at its server, in that order of precedence.
+ */
+export function cellTargets(input) {
+    const targets = new Map();
+    for (const [id, port] of Object.entries(DEV_PORTS)) {
+        targets.set(id, `${LOOPBACK}:${String(port)}`);
+    }
+    for (const entry of input.platform) {
+        targets.set(entry.id, `${LOOPBACK}:${String(entry.devPort)}`);
+    }
+    for (const domain of input.listed ?? []) {
+        targets.set(domain.id, domain.at);
+    }
+    if (input.own !== undefined) {
+        targets.set(input.own.id, input.own.origin);
+    }
+    return targets;
+}
+/** A domain's UI and API paths, which its server answers; every other path under `/<id>/` is a shell route. */
+export function domainPrefix(id) {
+    return new RegExp(`^/${id}/(?:ui|api)(?:[/?#]|$)`);
+}
+/**
+ * The console page loads the developed MFE's dev assets (Vite's client, the React refresh runtime) from the cell, as
+ * every module of it is: one URL per module, so the refresh runtime the page installs is the one the modules register
+ * with, and Vite's client opens its HMR socket on the cell.
+ */
+export function onTheCell(html, base, cellOrigin) {
+    return html.replaceAll(`"${base}`, `"${cellOrigin}${base}`).replaceAll(`'${base}`, `'${cellOrigin}${base}`);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aistrike-dev/ui-shell-dev",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "A Vite plugin that serves the AiStrike UI shell from your micro front-end's dev server, plus a dev-token CLI.",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -58,7 +58,7 @@
     }
   },
   "devDependencies": {
-    "@aistrike-dev/ui": "6.0.0-alpha.13",
+    "@aistrike-dev/ui": "6.2.0",
     "@aistrike-dev/ui-shell-sdk": "workspace:*",
     "@playwright/test": "^1.63.0",
     "@types/node": "^24.0.0",