@wabot-dev/framework 0.9.80 → 2.0.0-beta.0

package/dist/src/feature/project-runner/ProjectRunner.js

@@ -29,6 +29,11 @@ import { runCommandHandlers } from '../async/runCommandHandlers.js';
 import { runCronHandlers } from '../async/runCronHandlers.js';
 import { SocketControllerMetadataStore } from '../socket-controller/metadata/SocketControllerMetadataStore.js';
 import { runSocketControllers } from '../socket-controller/runSocketControllers.js';
+import { ExpressProvider } from '../express/ExpressProvider.js';
+import { UiControllerMetadataStore } from '../ui-controller/metadata/UiControllerMetadataStore.js';
+import { UiRendererRegistry } from '../ui-controller/renderer/UiRendererRegistry.js';
+import { IslandRegistry } from '../ui-controller/island/IslandRegistry.js';
+import { runUiControllers } from '../ui-controller/runUiControllers.js';
 import { MemoryRepositoryAdapter } from '../repository/MemoryRepositoryAdapter.js';
 import { RepositoryMetadataStore } from '../repository/RepositoryMetadataStore.js';
 import { RepositoryAdapterRegistry } from '../repository/RepositoryAdapterRegistry.js';
@@ -42,13 +47,11 @@ const DEFAULT_ADAPTER_LOADERS = {
     },
     openrouter: {
         apiKeyEnv: 'OPENROUTER_API_KEY',
-        load: async () => (await import('../../addon/chat-bot/openrouter/OpenRouterChatAdapter.js'))
-            .OpenRouterChatAdapter,
+        load: async () => (await import('../../addon/chat-bot/openrouter/OpenRouterChatAdapter.js')).OpenRouterChatAdapter,
     },
     anthropic: {
         apiKeyEnv: 'ANTHROPIC_API_KEY',
-        load: async () => (await import('../../addon/chat-bot/anthropic/AnthropicChatAdapter.js'))
-            .AnthropicChatAdapter,
+        load: async () => (await import('../../addon/chat-bot/anthropic/AnthropicChatAdapter.js')).AnthropicChatAdapter,
     },
     google: {
         apiKeyEnv: 'GOOGLE_API_KEY',
@@ -62,6 +65,7 @@ class ProjectRunner {
     connectionString;
     isPg;
     preloaded;
+    ui;
     pool = null;
     constructor(config = {}) {
         this.directories = config.directories ?? ['src'];
@@ -70,8 +74,10 @@ class ProjectRunner {
         this.connectionString = this.resolveConnectionString(config.connectionString);
         this.isPg = this.connectionString != null && isPostgresUrl(this.connectionString);
         this.preloaded = config.preloaded === true;
+        this.ui = config.ui ?? {};
     }
     async run() {
+        let scannedFiles = [];
         if (this.preloaded) {
             if (this.isPg)
                 await this.initPool();
@@ -81,11 +87,12 @@ class ProjectRunner {
                 this.isPg ? this.initPool() : Promise.resolve(),
                 scanProjectFiles({ directories: this.directories, exclude: this.exclude }),
             ]);
-            await this.importFiles(files);
+            scannedFiles = files;
+            await this.importFiles(scannedFiles);
         }
         const components = this.discoverComponents();
         await this.registerAdapters(components);
-        await this.startComponents(components);
+        await this.startComponents(components, scannedFiles);
     }
     resolveConnectionString(configValue) {
         const cs = configValue ?? process.env.DATABASE_URL ?? null;
@@ -151,6 +158,7 @@ class ProjectRunner {
             socketControllers: container
                 .resolve(SocketControllerMetadataStore)
                 .getAllSocketControllerConstructors(),
+            uiControllers: container.resolve(UiControllerMetadataStore).getAllUiControllerConstructors(),
         };
     }
     registerAdapters(components) {
@@ -199,9 +207,7 @@ class ProjectRunner {
             hasCommandHandlers || hasCronHandlers
                 ? import('../../addon/async/pg/PgJobRepository.js')
                 : Promise.resolve(null),
-            hasCronHandlers
-                ? import('../../addon/async/pg/PgCronJobRepository.js')
-                : Promise.resolve(null),
+            hasCronHandlers ? import('../../addon/async/pg/PgCronJobRepository.js') : Promise.resolve(null),
         ]);
         container.register(ChatRepository, { useToken: chatBotMod.PgChatRepository });
         container.register(Locker, { useToken: lockerMod.PgLocker });
@@ -218,7 +224,7 @@ class ProjectRunner {
         }
         logger.info('Configured with PostgreSQL adapters');
     }
-    async startComponents(components) {
+    async startComponents(components, files = []) {
         const chatAdapters = this.chatAdapters ?? (await this.resolveDefaultChatAdapters());
         if (chatAdapters.length > 0) {
             runChatAdapters(chatAdapters);
@@ -231,6 +237,9 @@ class ProjectRunner {
             logger.info(`Starting ${components.restControllers.length} REST controller(s)`);
             runRestControllers(components.restControllers);
         }
+        if (components.uiControllers.length > 0) {
+            await this.startUiControllers(components.uiControllers, files);
+        }
         if (components.commandHandlers.length > 0) {
             logger.info(`Starting ${components.commandHandlers.length} command handler(s)`);
             runCommandHandlers(components.commandHandlers);
@@ -244,6 +253,49 @@ class ProjectRunner {
             runSocketControllers(components.socketControllers);
         }
     }
+    async startUiControllers(uiControllers, files) {
+        const rendererRegistry = container.resolve(UiRendererRegistry);
+        if (!rendererRegistry.hasDefault()) {
+            const { PreactRenderer } = await import('../../addon/ui/preact/PreactRenderer.js');
+            rendererRegistry.setDefault(new PreactRenderer());
+        }
+        const client = rendererRegistry.get().client;
+        let pageAssets;
+        if (client) {
+            // The bundler pulls in esbuild, so only load it when UI islands are in play.
+            const bundlerMod = await import('../ui-controller/bundler/index.js');
+            pageAssets = this.preloaded
+                ? await this.setupProdUiAssets(bundlerMod)
+                : await this.setupDevUiAssets(bundlerMod, client, files);
+        }
+        logger.info(`Starting ${uiControllers.length} UI controller(s)`);
+        runUiControllers(uiControllers, { pageAssets });
+    }
+    async setupDevUiAssets(bundlerMod, client, files) {
+        const islands = await container.resolve(IslandRegistry).discover(files);
+        if (islands.length === 0)
+            return undefined;
+        const bundler = new bundlerMod.UiBundler({ islands, client, alias: this.ui.bundlerAlias });
+        await bundler.startDev();
+        bundlerMod.mountUiDevAssets(container.resolve(ExpressProvider).getExpress(), bundler);
+        return (used) => bundlerMod.pageAssetsFromManifest(bundler.getManifest(), used, {
+            liveReloadPath: '/_wabot/livereload',
+        });
+    }
+    async setupProdUiAssets(bundlerMod) {
+        const fs = await import('node:fs');
+        const nodePath = await import('node:path');
+        const distUi = nodePath.resolve(process.cwd(), 'dist/ui');
+        const manifestPath = nodePath.join(distUi, 'manifest.json');
+        if (!fs.existsSync(manifestPath)) {
+            logger.warn(`UI manifest not found at ${manifestPath}; islands will not hydrate`);
+            return undefined;
+        }
+        const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+        const { default: express } = await import('express');
+        container.resolve(ExpressProvider).getExpress().use('/_wabot', express.static(distUi));
+        return (used) => bundlerMod.pageAssetsFromManifest(manifest, used);
+    }
     async resolveDefaultChatAdapters() {
         const keys = Object.keys(DEFAULT_ADAPTER_LOADERS);
         const emptyKeys = [];

package/dist/src/feature/project-runner/scanner.js

@@ -55,7 +55,7 @@ async function scanDir(dir, excludedNames, excludedPaths) {
         }
         if (!entry.isFile())
             return [];
-        if (!(name.endsWith('.ts') || name.endsWith('.js')))
+        if (!/\.(ts|tsx|js|jsx)$/.test(name))
             return [];
         if (name.endsWith('.d.ts'))
             return [];

package/dist/src/feature/repository/@memExtension.js

@@ -13,8 +13,7 @@ function inheritsFrom(ctor, base) {
 }
 function memExtension(repositoryClass) {
     if (typeof repositoryClass !== 'function') {
-        throw new Error(`@memoryExtension: repository argument must be a class, ` +
-            `got ${typeof repositoryClass}`);
+        throw new Error(`@memoryExtension: repository argument must be a class, ` + `got ${typeof repositoryClass}`);
     }
     return function (target) {
         if (!inheritsFrom(target, MemoryRepositoryExtension)) {

package/dist/src/feature/ui-controller/actions.js

@@ -0,0 +1,35 @@
+// Client-safe helpers for calling @action endpoints. No Node imports so these
+// can be bundled into islands.
+function joinUrl(...parts) {
+    const joined = parts
+        .map((p) => p.replace(/^\/+|\/+$/g, ''))
+        .filter(Boolean)
+        .join('/');
+    return '/' + joined;
+}
+/** Build the URL of an @action: `<controllerPath>/_action/<actionName>`. */
+function actionUrl(controllerPath, actionName) {
+    return joinUrl(controllerPath, '_action', actionName);
+}
+/**
+ * POST JSON to an @action and return its JSON result. Throws on non-2xx with
+ * the server-provided error message. Intended for use from islands; plain
+ * <form action=…> posts also work for progressive enhancement.
+ */
+async function callAction(url, data, options = {}) {
+    const response = await fetch(url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', ...options.headers },
+        body: data === undefined ? undefined : JSON.stringify(data),
+        signal: options.signal,
+    });
+    const text = await response.text();
+    const parsed = text ? JSON.parse(text) : null;
+    if (!response.ok) {
+        const message = parsed?.error?.message ?? `Action failed with status ${response.status}`;
+        throw new Error(message);
+    }
+    return parsed;
+}
+
+export { actionUrl, callAction };

package/dist/src/feature/ui-controller/bundler/UiBundler.js

@@ -0,0 +1,191 @@
+import path__default from 'node:path';
+import { fileURLToPath } from 'node:url';
+import * as esbuild from 'esbuild';
+import { Logger } from '../../../core/logger/Logger.js';
+import { emptyManifest, manifestFromMetafile, NAV_ENTRY_ID, ISLAND_ENTRY_NAMESPACE } from './manifest.js';
+
+/** Absolute path to the generic boosted-navigation client core, bundled as an
+ * extra entry so it shares the island runtime chunk. */
+const NAV_RUNTIME_MODULE = fileURLToPath(new URL('./navRuntime', import.meta.url));
+/**
+ * Source of the nav entry. Imports the island hydrate/unmount hooks from the
+ * renderer's runtime module (the same module island entries import, so they
+ * share one registry instance) and wires them into the generic nav core.
+ */
+function navEntrySource(runtimeModule) {
+    return (`import { hydrateAll, unmountRemoved } from ${JSON.stringify(runtimeModule)}\n` +
+        `import { startNavigation } from ${JSON.stringify(NAV_RUNTIME_MODULE)}\n` +
+        `startNavigation({ hydrateAll, unmountRemoved })\n`);
+}
+function mimeFor(servePath) {
+    if (servePath.endsWith('.js'))
+        return 'text/javascript; charset=utf-8';
+    if (servePath.endsWith('.css'))
+        return 'text/css; charset=utf-8';
+    if (servePath.endsWith('.map'))
+        return 'application/json; charset=utf-8';
+    return 'application/octet-stream';
+}
+function entrySources(islands, client) {
+    const sources = new Map();
+    for (const island of islands) {
+        // keyed by bare id; esbuild records the entry as `${namespace}:${path}`.
+        sources.set(island.id, client.islandEntrySource({ id: island.id, importPath: island.importPath }));
+    }
+    sources.set(NAV_ENTRY_ID, navEntrySource(client.runtimeModule));
+    return sources;
+}
+function islandEntryPlugin(sources, cwd) {
+    const prefix = `${ISLAND_ENTRY_NAMESPACE}:`;
+    const filter = new RegExp(`^${ISLAND_ENTRY_NAMESPACE}:`);
+    return {
+        name: 'wabot-island-entries',
+        setup(build) {
+            build.onResolve({ filter }, (args) => ({
+                path: args.path.slice(prefix.length),
+                namespace: ISLAND_ENTRY_NAMESPACE,
+            }));
+            build.onLoad({ filter: /.*/, namespace: ISLAND_ENTRY_NAMESPACE }, (args) => ({
+                contents: sources.get(args.path) ?? '',
+                loader: 'js',
+                resolveDir: cwd,
+            }));
+        },
+    };
+}
+function baseBuildOptions(islands, client, opts) {
+    const jsxMode = client.esbuildJsx?.jsx ?? 'automatic';
+    return {
+        entryPoints: [
+            ...islands.map((i) => ({ in: `${ISLAND_ENTRY_NAMESPACE}:${i.id}`, out: i.id })),
+            // Boosted-navigation runtime, shared across the app's views.
+            { in: `${ISLAND_ENTRY_NAMESPACE}:${NAV_ENTRY_ID}`, out: '_nav' },
+        ],
+        bundle: true,
+        splitting: true,
+        format: 'esm',
+        platform: 'browser',
+        outdir: opts.outdir,
+        absWorkingDir: opts.cwd,
+        metafile: true,
+        alias: opts.alias,
+        sourcemap: opts.dev ? 'linked' : false,
+        minify: !opts.dev,
+        entryNames: '[name]',
+        chunkNames: 'chunks/[name]-[hash]',
+        assetNames: 'assets/[name]-[hash]',
+        jsx: jsxMode,
+        ...(jsxMode === 'automatic'
+            ? { jsxImportSource: client.esbuildJsx?.jsxImportSource }
+            : {
+                jsxFactory: client.esbuildJsx?.jsxFactory,
+                jsxFragment: client.esbuildJsx?.jsxFragmentFactory,
+            }),
+        loader: { '.module.css': 'local-css' },
+        logLevel: 'silent',
+    };
+}
+/**
+ * Bundles island client code with esbuild. In dev it watches and serves from
+ * memory; in prod it writes hashed assets to disk and returns a manifest.
+ */
+class UiBundler {
+    islands;
+    client;
+    base;
+    cwd;
+    alias;
+    logger = new Logger('wabot:ui:bundler');
+    ctx = null;
+    served = new Map();
+    manifest;
+    rebuildListeners = new Set();
+    constructor(options) {
+        this.islands = options.islands;
+        this.client = options.client;
+        this.base = options.base ?? '/_wabot/';
+        this.cwd = options.cwd ?? process.cwd();
+        this.alias = options.alias;
+        this.manifest = emptyManifest(this.base);
+    }
+    /** Start a watching dev build; assets are kept in memory and served via getFile(). */
+    async startDev() {
+        const outdir = path__default.resolve(this.cwd, '.wabot-ui-dev');
+        const sources = entrySources(this.islands, this.client);
+        const onEnd = {
+            name: 'wabot-dev-refresh',
+            setup: (build) => {
+                build.onEnd((result) => {
+                    this.ingest(result, outdir);
+                    for (const listener of this.rebuildListeners)
+                        listener();
+                });
+            },
+        };
+        this.ctx = await esbuild.context({
+            ...baseBuildOptions(this.islands, this.client, {
+                outdir,
+                dev: true,
+                cwd: this.cwd,
+                alias: this.alias,
+            }),
+            write: false,
+            plugins: [islandEntryPlugin(sources, this.cwd), onEnd],
+        });
+        await this.ctx.rebuild();
+        await this.ctx.watch();
+        this.logger.info(`watching ${this.islands.length} island(s)`);
+    }
+    /** Build once and write hashed assets to outDir; returns the manifest. */
+    async buildProd(outDir) {
+        const outdir = path__default.resolve(this.cwd, outDir);
+        const sources = entrySources(this.islands, this.client);
+        const result = await esbuild.build({
+            ...baseBuildOptions(this.islands, this.client, {
+                outdir,
+                dev: false,
+                cwd: this.cwd,
+                alias: this.alias,
+            }),
+            write: true,
+            plugins: [islandEntryPlugin(sources, this.cwd)],
+        });
+        this.manifest = manifestFromMetafile(result.metafile, {
+            base: this.base,
+            outdir,
+            cwd: this.cwd,
+        });
+        this.logger.info(`built ${this.islands.length} island(s) -> ${outDir}`);
+        return this.manifest;
+    }
+    ingest(result, outdir) {
+        this.served.clear();
+        for (const file of result.outputFiles ?? []) {
+            const rel = path__default.relative(outdir, file.path).split(path__default.sep).join('/');
+            const servePath = this.base + rel;
+            this.served.set(servePath, { contents: file.contents, type: mimeFor(servePath) });
+        }
+        if (result.metafile) {
+            this.manifest = manifestFromMetafile(result.metafile, {
+                base: this.base,
+                outdir,
+                cwd: this.cwd,
+            });
+        }
+    }
+    getFile(servePath) {
+        return this.served.get(servePath);
+    }
+    getManifest() {
+        return this.manifest;
+    }
+    onRebuild(listener) {
+        this.rebuildListeners.add(listener);
+    }
+    async dispose() {
+        await this.ctx?.dispose();
+        this.ctx = null;
+    }
+}
+
+export { UiBundler };

package/dist/src/feature/ui-controller/bundler/devMiddleware.js

@@ -0,0 +1,41 @@
+import { Logger } from '../../../core/logger/Logger.js';
+
+/**
+ * Mounts the dev island assets and a live-reload SSE endpoint on the shared
+ * Express app. Each successful rebuild pushes a "reload" event to connected
+ * pages (the snippet from {@link liveReloadSnippet} listens for it).
+ */
+function mountUiDevAssets(app, bundler, options = {}) {
+    const logger = new Logger('wabot:ui:dev');
+    const base = options.base ?? '/_wabot/';
+    const mountPath = base.replace(/\/$/, '');
+    const liveReloadPath = options.liveReloadPath ?? '/_wabot/livereload';
+    const clients = new Set();
+    bundler.onRebuild(() => {
+        for (const res of clients)
+            res.write('data: reload\n\n');
+    });
+    app.get(liveReloadPath, (req, res) => {
+        res.set({
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache, no-transform',
+            Connection: 'keep-alive',
+        });
+        res.flushHeaders?.();
+        res.write('data: connected\n\n');
+        clients.add(res);
+        req.on('close', () => clients.delete(res));
+    });
+    app.use(mountPath, (req, res, next) => {
+        const servePath = mountPath + req.path;
+        const file = bundler.getFile(servePath);
+        if (!file)
+            return next();
+        res.set('Content-Type', file.type);
+        res.set('Cache-Control', 'no-cache');
+        res.send(Buffer.from(file.contents));
+    });
+    logger.info(`serving island assets at ${base} (live reload via ${liveReloadPath})`);
+}
+
+export { mountUiDevAssets };

package/dist/src/feature/ui-controller/bundler/index.js

@@ -0,0 +1,4 @@
+export { ISLAND_ENTRY_NAMESPACE, NAV_ENTRY_ID, emptyManifest, manifestFromMetafile } from './manifest.js';
+export { UiBundler } from './UiBundler.js';
+export { liveReloadSnippet, pageAssetsFromManifest } from './pageAssets.js';
+export { mountUiDevAssets } from './devMiddleware.js';

package/dist/src/feature/ui-controller/bundler/manifest.js

@@ -0,0 +1,34 @@
+import path__default from 'node:path';
+
+const ISLAND_ENTRY_NAMESPACE = 'wabot-island';
+/** Reserved island-entry id for the boosted-navigation runtime bundle. */
+const NAV_ENTRY_ID = '__wabot_nav';
+function toUrl(base, outdir, cwd, outPath) {
+    const abs = path__default.resolve(cwd, outPath);
+    const rel = path__default.relative(outdir, abs).split(path__default.sep).join('/');
+    return base + rel;
+}
+/** Build the island asset manifest from an esbuild metafile. */
+function manifestFromMetafile(metafile, opts) {
+    const { base, outdir, cwd } = opts;
+    const islands = {};
+    let nav;
+    for (const [outPath, output] of Object.entries(metafile.outputs)) {
+        const entryPoint = output.entryPoint;
+        if (!entryPoint || !entryPoint.startsWith(`${ISLAND_ENTRY_NAMESPACE}:`))
+            continue;
+        const id = entryPoint.slice(ISLAND_ENTRY_NAMESPACE.length + 1);
+        if (id === NAV_ENTRY_ID) {
+            nav = toUrl(base, outdir, cwd, outPath);
+            continue;
+        }
+        const css = output.cssBundle ? [toUrl(base, outdir, cwd, output.cssBundle)] : [];
+        islands[id] = { js: toUrl(base, outdir, cwd, outPath), css };
+    }
+    return { base, islands, nav };
+}
+function emptyManifest(base = '/_wabot/') {
+    return { base, islands: {} };
+}
+
+export { ISLAND_ENTRY_NAMESPACE, NAV_ENTRY_ID, emptyManifest, manifestFromMetafile };