@webstir-io/webstir 0.1.1 → 0.1.3

package/src/bun-generated-frontend-watch.ts

@@ -0,0 +1,209 @@
+import { watch, type FSWatcher } from 'node:fs';
+
+import {
+  prepareBunSpaGeneratedEntries,
+  regenerateBunSpaEntry,
+  resolveBunSpaGeneratedPagePaths,
+  resolveBunSpaEntryPaths,
+  resolveBunSpaPages,
+  type BunSpaEntryPaths,
+  type BunSpaPageDetails,
+} from './bun-spa-document.ts';
+import {
+  createBunFrontendFetchHandler,
+  createBunSpaRoutes,
+  type BunSpaRouteEntry,
+  loadBunSpaEntry,
+  type ReloadableServeServer,
+} from './bun-spa-routes.ts';
+import type { DevServerAddress } from './dev-server.ts';
+
+export interface BunGeneratedFrontendWatchOptions {
+  readonly workspaceRoot: string;
+  readonly host?: string;
+  readonly port?: number;
+  readonly apiProxyOrigin?: string;
+}
+
+export interface BunGeneratedFrontendWatchSession {
+  readonly address: DevServerAddress;
+  waitForExit(): Promise<number | null>;
+  stop(): Promise<void>;
+}
+
+export async function startBunGeneratedFrontendWatch(
+  options: BunGeneratedFrontendWatchOptions,
+): Promise<BunGeneratedFrontendWatchSession> {
+  const paths = resolveBunSpaEntryPaths(options.workspaceRoot);
+  const pages = await resolveBunSpaPages(paths.workspaceRoot);
+  const host = options.host ?? '127.0.0.1';
+  const port = options.port ?? 8088;
+
+  await prepareBunSpaGeneratedEntries({ paths, pages });
+
+  const servedEntries = await loadServedEntries(paths, pages);
+  const servedAddress = createServedAddress(
+    host,
+    startFrontendServer(host, port, servedEntries, options.apiProxyOrigin),
+  );
+  const watchers = watchRegenerationTargets(paths, pages, async (nextEntries) => {
+    const reloadOptions: Parameters<ReloadableServeServer['reload']>[0] = {
+      fetch: createBunFrontendFetchHandler({ apiProxyOrigin: options.apiProxyOrigin }),
+      routes: createBunSpaRoutes(nextEntries),
+    };
+    servedAddress.server.reload(reloadOptions);
+  });
+
+  return createSession(servedAddress, watchers);
+}
+
+interface ServedAddress {
+  readonly server: ReloadableServeServer;
+  readonly address: DevServerAddress;
+}
+
+function startFrontendServer(
+  host: string,
+  port: number,
+  spaEntries: readonly BunSpaRouteEntry[],
+  apiProxyOrigin?: string,
+): ReloadableServeServer {
+  const serverOptions = {
+    hostname: host,
+    port,
+    routes: createBunSpaRoutes(spaEntries),
+    fetch: createBunFrontendFetchHandler({ apiProxyOrigin }),
+  };
+  return Bun.serve(
+    serverOptions as unknown as Parameters<typeof Bun.serve>[0],
+  ) as ReloadableServeServer;
+}
+
+function createServedAddress(host: string, server: ReloadableServeServer): ServedAddress {
+  const originHost = host === '0.0.0.0' ? '127.0.0.1' : host;
+  return {
+    server,
+    address: {
+      host: originHost,
+      port: server.port,
+      origin: `http://${originHost}:${server.port}`,
+    },
+  };
+}
+
+function watchRegenerationTargets(
+  paths: BunSpaEntryPaths,
+  pages: readonly BunSpaPageDetails[],
+  onEntriesReload: (nextEntries: readonly BunSpaRouteEntry[]) => Promise<void>,
+): Set<FSWatcher> {
+  const watchers = new Set<FSWatcher>();
+  let pendingRegeneration: Promise<void> | null = null;
+
+  const regenerationTargets = new Set<string>([paths.appTemplatePath, paths.appCssPath]);
+  for (const page of pages) {
+    regenerationTargets.add(page.htmlPath);
+    if (page.cssPath) {
+      regenerationTargets.add(page.cssPath);
+    }
+  }
+
+  for (const target of regenerationTargets) {
+    watchers.add(
+      watch(target, () => {
+        if (pendingRegeneration) {
+          return;
+        }
+
+        pendingRegeneration = regenerateAndReloadSpaEntries(paths, pages, onEntriesReload).finally(
+          () => {
+            pendingRegeneration = null;
+          },
+        );
+      }),
+    );
+  }
+
+  return watchers;
+}
+
+async function regenerateAndReloadSpaEntries(
+  paths: BunSpaEntryPaths,
+  pages: readonly BunSpaPageDetails[],
+  onEntriesReload: (nextEntries: readonly BunSpaRouteEntry[]) => Promise<void>,
+): Promise<void> {
+  for (const page of pages) {
+    await regenerateBunSpaEntry({ paths, page });
+  }
+
+  await onEntriesReload(await loadServedEntries(paths, pages));
+}
+
+async function loadServedEntries(
+  paths: BunSpaEntryPaths,
+  pages: readonly BunSpaPageDetails[],
+): Promise<readonly BunSpaRouteEntry[]> {
+  return await Promise.all(
+    pages.map(async (page, index) => {
+      const generatedPaths = resolveBunSpaGeneratedPagePaths(paths, page);
+      return {
+        routes: resolvePageRoutes(page, index === 0),
+        entry: await loadBunSpaEntry(generatedPaths.generatedEntryPath),
+      } satisfies BunSpaRouteEntry;
+    }),
+  );
+}
+
+function resolvePageRoutes(page: BunSpaPageDetails, isRootPage: boolean): readonly string[] {
+  const routes = new Set<string>();
+
+  if (isRootPage) {
+    routes.add('/');
+    routes.add('/index.html');
+  }
+
+  if (page.routePath !== '/') {
+    routes.add(page.routePath);
+    routes.add(`${page.routePath}/`);
+    routes.add(`${page.routePath}/index.html`);
+    return Array.from(routes);
+  }
+
+  routes.add('/home');
+  routes.add('/home/');
+  routes.add('/home/index.html');
+  return Array.from(routes);
+}
+
+function createSession(
+  servedAddress: ServedAddress,
+  watchers: Set<FSWatcher>,
+): BunGeneratedFrontendWatchSession {
+  let stopping = false;
+  let exitResolver: ((code: number | null) => void) | undefined;
+  const exitPromise = new Promise<number | null>((resolve) => {
+    exitResolver = resolve;
+  });
+
+  return {
+    address: servedAddress.address,
+    waitForExit() {
+      return exitPromise;
+    },
+    async stop() {
+      if (stopping) {
+        await exitPromise;
+        return;
+      }
+
+      stopping = true;
+      for (const watcher of watchers) {
+        watcher.close();
+      }
+      watchers.clear();
+      servedAddress.server.stop(true);
+      exitResolver?.(0);
+      exitResolver = undefined;
+      await exitPromise;
+    },
+  };
+}

package/src/bun-globals.d.ts

@@ -0,0 +1,23 @@
+interface BunShell {
+  (strings: TemplateStringsArray, ...values: unknown[]): Promise<unknown>;
+  cwd(cwd: string): BunShell;
+}
+
+declare const Bun: {
+  $: BunShell;
+  file(path: string | URL): Blob & {
+    text(): Promise<string>;
+  };
+  write(destination: string | URL, input: string | Blob): Promise<number>;
+  serve(options: {
+    hostname?: string;
+    idleTimeout?: number;
+    port: number;
+    fetch(request: Request): Response | Promise<Response>;
+  }): {
+    hostname: string;
+    port: number;
+    url: URL;
+    stop(closeActiveConnections?: boolean): void;
+  };
+};

package/src/bun-spa-document.ts

@@ -0,0 +1,310 @@
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+import { access, mkdir, readFile, readdir, writeFile } from 'node:fs/promises';
+
+export interface BunSpaEntryPaths {
+  readonly workspaceRoot: string;
+  readonly appTemplatePath: string;
+  readonly appCssPath: string;
+  readonly appScriptPath?: string;
+  readonly generatedRoot: string;
+}
+
+export interface BunSpaPageDetails {
+  readonly name: string;
+  readonly routePath: string;
+  readonly directory: string;
+  readonly htmlPath: string;
+  readonly scriptPath?: string;
+  readonly cssPath?: string;
+}
+
+export interface BunSpaGeneratedPagePaths {
+  readonly generatedPageRoot: string;
+  readonly generatedEntryPath: string;
+  readonly generatedCssPath: string;
+}
+
+export interface RegenerateBunSpaEntryOptions {
+  readonly paths: BunSpaEntryPaths;
+  readonly page: BunSpaPageDetails;
+}
+
+const GENERATED_DIR = path.join('.webstir', 'bun-first-spa');
+const GENERATED_ENTRY = 'index.html';
+const GENERATED_PAGE_CSS = 'page.css';
+const PAGE_SCRIPT_NAMES = ['index.ts', 'index.tsx', 'index.js', 'index.jsx'] as const;
+
+export function resolveBunSpaEntryPaths(workspaceRoot: string): BunSpaEntryPaths {
+  const resolvedWorkspaceRoot = path.resolve(workspaceRoot);
+  const generatedRoot = path.join(resolvedWorkspaceRoot, GENERATED_DIR);
+  const appRoot = path.join(resolvedWorkspaceRoot, 'src', 'frontend', 'app');
+
+  return {
+    workspaceRoot: resolvedWorkspaceRoot,
+    appTemplatePath: path.join(appRoot, 'app.html'),
+    appCssPath: path.join(appRoot, 'app.css'),
+    appScriptPath: resolveOptionalExistingFileSync(appRoot, [
+      'app.ts',
+      'app.tsx',
+      'app.js',
+      'app.jsx',
+    ]),
+    generatedRoot,
+  };
+}
+
+export async function resolveBunSpaPages(
+  workspaceRoot: string,
+): Promise<readonly BunSpaPageDetails[]> {
+  const pagesRoot = path.join(workspaceRoot, 'src', 'frontend', 'pages');
+  const directories = await collectSpaPageDirectories(pagesRoot);
+  if (directories.length === 0) {
+    throw new Error(`No SPA pages found under ${pagesRoot}.`);
+  }
+
+  const pages = await Promise.all(
+    directories.map(async (directory) => {
+      const pageName = normalizeForwardSlashes(path.relative(pagesRoot, directory));
+      const htmlPath = path.join(directory, 'index.html');
+      const scriptPath = await resolveOptionalFile(directory, PAGE_SCRIPT_NAMES);
+      const cssPath = await resolveOptionalFile(directory, ['index.css']);
+
+      return {
+        name: pageName,
+        routePath: pageName === 'home' ? '/' : `/${pageName}`,
+        directory,
+        htmlPath,
+        scriptPath,
+        cssPath,
+      } satisfies BunSpaPageDetails;
+    }),
+  );
+
+  pages.sort((left, right) => comparePageNames(left.name, right.name));
+  return pages;
+}
+
+export function resolveBunSpaGeneratedPagePaths(
+  paths: BunSpaEntryPaths,
+  page: BunSpaPageDetails,
+): BunSpaGeneratedPagePaths {
+  const generatedPageRoot = path.join(paths.generatedRoot, ...page.name.split('/'));
+  return {
+    generatedPageRoot,
+    generatedEntryPath: path.join(generatedPageRoot, GENERATED_ENTRY),
+    generatedCssPath: path.join(generatedPageRoot, GENERATED_PAGE_CSS),
+  };
+}
+
+export async function prepareBunSpaGeneratedEntries(options: {
+  readonly paths: BunSpaEntryPaths;
+  readonly pages: readonly BunSpaPageDetails[];
+}): Promise<void> {
+  await mkdir(options.paths.generatedRoot, { recursive: true });
+
+  for (const page of options.pages) {
+    await regenerateBunSpaEntry({
+      paths: options.paths,
+      page,
+    });
+  }
+}
+
+export async function regenerateBunSpaEntry(options: RegenerateBunSpaEntryOptions): Promise<void> {
+  const generatedPaths = resolveBunSpaGeneratedPagePaths(options.paths, options.page);
+  await mkdir(generatedPaths.generatedPageRoot, { recursive: true });
+  const appTemplate = await readFile(options.paths.appTemplatePath, 'utf8');
+  const pageHtml = await readFile(options.page.htmlPath, 'utf8');
+  const title = extractTitle(pageHtml) ?? extractTitle(appTemplate) ?? 'Webstir SPA';
+  const appHead = stripTitle(extractTagContents(appTemplate, 'head') ?? '');
+  const pageHead = stripAssetTags(stripTitle(extractTagContents(pageHtml, 'head') ?? ''));
+  const mainHtml = extractTagContents(pageHtml, 'main') ?? '';
+  const appBodyClass = extractTagAttribute(appTemplate, 'body', 'class');
+  const pageBodyClass = extractTagAttribute(pageHtml, 'body', 'class');
+  const bodyClass = [appBodyClass, pageBodyClass].filter(Boolean).join(' ').trim();
+  const relativeAppScriptPath = options.paths.appScriptPath
+    ? toRelativeModulePath(generatedPaths.generatedEntryPath, options.paths.appScriptPath)
+    : undefined;
+  const relativeScriptPath = options.page.scriptPath
+    ? toRelativeModulePath(generatedPaths.generatedEntryPath, options.page.scriptPath)
+    : undefined;
+  const relativeStylesheetPath = await writeGeneratedPageCss({
+    generatedCssPath: generatedPaths.generatedCssPath,
+    generatedEntryPath: generatedPaths.generatedEntryPath,
+    pageCssPath: options.page.cssPath,
+    appCssPath: options.paths.appCssPath,
+  });
+  const bodyClassAttribute = bodyClass.length > 0 ? ` class="${escapeAttribute(bodyClass)}"` : '';
+
+  const output = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>${escapeHtml(title)}</title>
+  ${appHead.trim()}
+  ${pageHead.trim()}
+  <link rel="stylesheet" href="${relativeStylesheetPath}" />
+</head>
+<body${bodyClassAttribute}>
+  <main>${mainHtml}</main>
+  ${relativeAppScriptPath ? `<script type="module" src="${relativeAppScriptPath}"></script>` : ''}
+  ${relativeScriptPath ? `<script type="module" src="${relativeScriptPath}"></script>` : ''}
+</body>
+</html>
+`;
+
+  await writeFile(generatedPaths.generatedEntryPath, output, 'utf8');
+}
+
+async function resolveOptionalFile(
+  directory: string,
+  names: readonly string[],
+): Promise<string | undefined> {
+  for (const name of names) {
+    const candidate = path.join(directory, name);
+    try {
+      await access(candidate);
+      return candidate;
+    } catch {
+      // Fall through.
+    }
+  }
+
+  return undefined;
+}
+
+interface WriteGeneratedPageCssOptions {
+  readonly generatedCssPath: string;
+  readonly generatedEntryPath: string;
+  readonly pageCssPath?: string;
+  readonly appCssPath: string;
+}
+
+async function writeGeneratedPageCss(options: WriteGeneratedPageCssOptions): Promise<string> {
+  const appCssImport = `@import "${toRelativeModulePath(options.generatedCssPath, options.appCssPath)}";`;
+  let css = appCssImport;
+
+  if (options.pageCssPath) {
+    const sourceCss = await readFile(options.pageCssPath, 'utf8');
+    const rewritten = sourceCss.replace(/@import\s+["']@app\/app\.css["'];?\s*/gi, '');
+    css = `${appCssImport}\n${rewritten.trim()}\n`;
+  } else {
+    css = `${appCssImport}\n`;
+  }
+
+  await writeFile(options.generatedCssPath, css, 'utf8');
+  return toRelativeModulePath(options.generatedEntryPath, options.generatedCssPath);
+}
+
+function extractTagContents(html: string, tagName: string): string | null {
+  const pattern = new RegExp(`<${tagName}\\b[^>]*>([\\s\\S]*?)<\\/${tagName}>`, 'i');
+  const match = html.match(pattern);
+  return match?.[1] ?? null;
+}
+
+function extractTagAttribute(
+  html: string,
+  tagName: string,
+  attributeName: string,
+): string | undefined {
+  const tagPattern = new RegExp(`<${tagName}\\b([^>]*)>`, 'i');
+  const tagMatch = html.match(tagPattern);
+  if (!tagMatch?.[1]) {
+    return undefined;
+  }
+
+  const attributePattern = new RegExp(`${attributeName}="([^"]*)"`, 'i');
+  const attributeMatch = tagMatch[1].match(attributePattern);
+  return attributeMatch?.[1];
+}
+
+function extractTitle(html: string): string | undefined {
+  const title = extractTagContents(html, 'title');
+  return title?.trim() || undefined;
+}
+
+function stripTitle(html: string): string {
+  return html.replace(/<title\b[^>]*>[\s\S]*?<\/title>/gi, '').trim();
+}
+
+function stripAssetTags(html: string): string {
+  return html
+    .replace(/<link\b[^>]*rel=["']stylesheet["'][^>]*>/gi, '')
+    .replace(/<script\b[^>]*src=["'][^"']+["'][^>]*><\/script>/gi, '')
+    .trim();
+}
+
+function toRelativeModulePath(fromFile: string, targetFile: string): string {
+  const relativePath = path.relative(path.dirname(fromFile), targetFile).split(path.sep).join('/');
+  return relativePath.startsWith('.') ? relativePath : `./${relativePath}`;
+}
+
+function escapeHtml(value: string): string {
+  return value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+}
+
+function escapeAttribute(value: string): string {
+  return escapeHtml(value).replaceAll('"', '&quot;');
+}
+
+function resolveOptionalExistingFileSync(
+  directory: string,
+  names: readonly string[],
+): string | undefined {
+  for (const name of names) {
+    const candidate = path.join(directory, name);
+    if (existsSync(candidate)) {
+      return candidate;
+    }
+  }
+
+  return undefined;
+}
+
+async function collectSpaPageDirectories(root: string): Promise<string[]> {
+  try {
+    await access(root);
+  } catch {
+    return [];
+  }
+
+  const directories: string[] = [];
+  const stack = [path.resolve(root)];
+
+  while (stack.length > 0) {
+    const current = stack.pop();
+    if (!current) {
+      continue;
+    }
+    const entries = await readdir(current, { withFileTypes: true });
+    const hasIndexHtml = entries.some((entry) => entry.isFile() && entry.name === 'index.html');
+    if (hasIndexHtml) {
+      directories.push(current);
+      continue;
+    }
+
+    for (const entry of entries) {
+      if (entry.isDirectory()) {
+        stack.push(path.join(current, entry.name));
+      }
+    }
+  }
+
+  return directories;
+}
+
+function comparePageNames(left: string, right: string): number {
+  if (left === 'home') {
+    return -1;
+  }
+
+  if (right === 'home') {
+    return 1;
+  }
+
+  return left.localeCompare(right);
+}
+
+function normalizeForwardSlashes(value: string): string {
+  return value.split(path.sep).join('/');
+}

package/src/bun-spa-routes.ts

@@ -0,0 +1,159 @@
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+export type ReloadableServeServer = ReturnType<typeof Bun.serve> & {
+  reload(options: unknown): unknown;
+};
+
+export interface BunFrontendFetchHandlerOptions {
+  readonly apiProxyOrigin?: string;
+}
+
+export interface BunSpaRouteEntry {
+  readonly routes: readonly string[];
+  readonly entry: BodyInit;
+}
+
+export async function loadBunSpaEntry(generatedEntryPath: string): Promise<BodyInit> {
+  const routeModule = (await import(
+    `${pathToFileURL(generatedEntryPath).href}?t=${Date.now()}`
+  )) as { default: unknown };
+  return routeModule.default as BodyInit;
+}
+
+export function createBunSpaRoutes(entries: readonly BunSpaRouteEntry[]) {
+  const routes: Record<string, BodyInit | false> = {
+    '/api': false,
+    '/api/*': false,
+  };
+
+  for (const entry of entries) {
+    for (const route of entry.routes) {
+      routes[route] = entry.entry;
+    }
+  }
+
+  return routes;
+}
+
+export function createBunFrontendFetchHandler(options: BunFrontendFetchHandlerOptions = {}) {
+  return async (request: Request) => {
+    const requestUrl = new URL(request.url);
+    const apiProxyPath = getApiProxyPath(requestUrl.pathname);
+    if (apiProxyPath !== null) {
+      if (!options.apiProxyOrigin) {
+        return new Response('Not found.', { status: 404 });
+      }
+
+      return await proxyApiRequest(request, requestUrl, apiProxyPath, options.apiProxyOrigin);
+    }
+
+    if (request.method !== 'GET' && request.method !== 'HEAD') {
+      return new Response('Method not allowed.', { status: 405 });
+    }
+
+    return new Response('Not found.', { status: 404 });
+  };
+}
+
+function getApiProxyPath(pathname: string): string | null {
+  if (pathname === '/api') {
+    return '/';
+  }
+
+  if (pathname.startsWith('/api/')) {
+    const normalizedPath = path.posix.normalize(pathname.slice('/api'.length));
+    return normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`;
+  }
+
+  return null;
+}
+
+async function proxyApiRequest(
+  request: Request,
+  requestUrl: URL,
+  apiProxyPath: string,
+  apiProxyOrigin: string,
+): Promise<Response> {
+  const targetUrl = new URL(apiProxyPath + requestUrl.search, apiProxyOrigin);
+
+  try {
+    const proxyResponse = await fetch(targetUrl, createProxyRequestInit(request, targetUrl));
+    const headers = rewriteProxyResponseHeaders(proxyResponse.headers, targetUrl);
+
+    return new Response(request.method !== 'HEAD' ? proxyResponse.body : null, {
+      status: proxyResponse.status || 502,
+      headers,
+    });
+  } catch {
+    return new Response('Backend proxy failed.', { status: 502 });
+  }
+}
+
+function rewriteProxyResponseHeaders(headers: Headers, targetUrl: URL): Headers {
+  const nextHeaders = new Headers(headers);
+  const location = headers.get('location');
+  if (location) {
+    nextHeaders.set('location', rewriteProxyLocation(location, targetUrl));
+  }
+
+  return nextHeaders;
+}
+
+function createProxyRequestInit(
+  request: Request,
+  targetUrl: URL,
+): RequestInit & { duplex?: 'half' } {
+  const headers = new Headers(request.headers);
+  headers.set('host', targetUrl.host);
+  headers.set('connection', 'close');
+
+  const requestInit: RequestInit & { duplex?: 'half' } = {
+    method: request.method,
+    headers,
+    redirect: 'manual',
+    signal: request.signal,
+  };
+
+  if (methodAllowsBody(request.method)) {
+    requestInit.body = request.body;
+    if (request.body) {
+      requestInit.duplex = 'half';
+    }
+  }
+
+  return requestInit;
+}
+
+function rewriteProxyLocation(value: string, targetUrl: URL): string {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return value;
+  }
+
+  if (trimmed.startsWith('/')) {
+    return prefixApiMount(trimmed);
+  }
+
+  try {
+    const resolved = new URL(trimmed, targetUrl.origin);
+    if (resolved.origin !== targetUrl.origin) {
+      return value;
+    }
+    return prefixApiMount(`${resolved.pathname}${resolved.search}${resolved.hash}`);
+  } catch {
+    return value;
+  }
+}
+
+function prefixApiMount(pathname: string): string {
+  if (pathname === '/api' || pathname.startsWith('/api/')) {
+    return pathname;
+  }
+
+  return pathname === '/' ? '/api' : `/api${pathname}`;
+}
+
+function methodAllowsBody(method: string): boolean {
+  return method !== 'GET' && method !== 'HEAD';
+}