@emkodev/emroute 1.6.6-beta.2 → 1.6.6-beta.4

package/src/renderer/spa/thin-client.ts

@@ -0,0 +1,165 @@
+/// <reference path="../../type/navigation-api.d.ts" />
+
+/**
+ * Emroute App
+ *
+ * Browser entry point for `/app/` routes. Wraps an EmrouteServer instance
+ * (same server, same pipeline) with Navigation API glue that intercepts
+ * link clicks, calls `htmlRouter.render()`, and injects the result.
+ */
+
+import type { EmrouteServer } from '../../../server/server-api.type.ts';
+import type { NavigateOptions } from '../../type/route.type.ts';
+import { assertSafeRedirect, type BasePath, DEFAULT_BASE_PATH } from '../../route/route.core.ts';
+import { escapeHtml } from '../../util/html.util.ts';
+
+/** Options for `createEmrouteApp`. */
+export interface EmrouteAppOptions {
+  basePath?: BasePath;
+}
+
+/** Browser app — Navigation API wired to an EmrouteServer. */
+export class EmrouteApp {
+  private readonly server: EmrouteServer;
+  private readonly appBase: string;
+  private slot: Element | null = null;
+  private abortController: AbortController | null = null;
+
+  constructor(server: EmrouteServer, options?: EmrouteAppOptions) {
+    const bp = options?.basePath ?? DEFAULT_BASE_PATH;
+    this.server = server;
+    this.appBase = bp.app;
+  }
+
+  async initialize(slotSelector = 'router-slot'): Promise<void> {
+    this.slot = document.querySelector(slotSelector);
+
+    if (!this.slot) {
+      console.error('[EmrouteApp] Slot not found:', slotSelector);
+      return;
+    }
+
+    if (!('navigation' in globalThis)) {
+      console.warn('[EmrouteApp] Navigation API not available');
+      return;
+    }
+
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+
+    navigation.addEventListener('navigate', (event) => {
+      if (!event.canIntercept) return;
+      if (event.hashChange) return;
+      if (event.downloadRequest !== null) return;
+
+      const url = new URL(event.destination.url);
+      if (!this.isAppPath(url.pathname)) return;
+
+      event.intercept({
+        scroll: 'manual',
+        handler: async () => {
+          await this.handleNavigation(url, event.signal);
+          event.scroll();
+        },
+      });
+    }, { signal });
+
+    // SSR adoption — server already rendered this page, skip re-render
+    const ssrRoute = this.slot.getAttribute('data-ssr-route');
+    if (ssrRoute && (location.pathname === ssrRoute || location.pathname === ssrRoute + '/')) {
+      this.slot.removeAttribute('data-ssr-route');
+      return;
+    }
+
+    // Initial render
+    await this.handleNavigation(new URL(location.href), this.abortController.signal);
+  }
+
+  dispose(): void {
+    this.abortController?.abort();
+    this.abortController = null;
+    this.slot = null;
+  }
+
+  async navigate(url: string, options: NavigateOptions = {}): Promise<void> {
+    try {
+      const { finished } = navigation.navigate(url, {
+        state: options.state,
+        history: options.replace ? 'replace' : 'auto',
+      });
+      await finished;
+    } catch (e) {
+      if (e instanceof DOMException && e.name === 'AbortError') return;
+      throw e;
+    }
+  }
+
+  private isAppPath(pathname: string): boolean {
+    return pathname === this.appBase || pathname.startsWith(this.appBase + '/');
+  }
+
+  private stripAppBase(pathname: string): string {
+    if (pathname === this.appBase) return '/';
+    if (pathname.startsWith(this.appBase + '/')) return pathname.slice(this.appBase.length);
+    return pathname;
+  }
+
+  private async handleNavigation(url: URL, signal: AbortSignal): Promise<void> {
+    if (!this.slot || !this.server.htmlRouter) return;
+
+    const routePath = this.stripAppBase(url.pathname);
+    const routeUrl = new URL(routePath + url.search, url.origin);
+
+    try {
+      const { content, title, redirect } = await this.server.htmlRouter.render(routeUrl, signal);
+
+      if (signal.aborted) return;
+
+      if (redirect) {
+        assertSafeRedirect(redirect);
+        const target = redirect.startsWith('/') ? this.appBase + redirect : redirect;
+        navigation.navigate(target, { history: 'replace' });
+        return;
+      }
+
+      if (document.startViewTransition) {
+        const transition = document.startViewTransition(() => {
+          this.slot!.setHTMLUnsafe(content);
+        });
+        signal.addEventListener('abort', () => transition.skipTransition(), { once: true });
+        await transition.updateCallbackDone;
+      } else {
+        this.slot.setHTMLUnsafe(content);
+      }
+
+      if (title) document.title = title;
+    } catch (error) {
+      if (signal.aborted) return;
+      console.error('[EmrouteApp] Navigation error:', error);
+      if (this.slot) {
+        const message = error instanceof Error ? error.message : String(error);
+        this.slot.setHTMLUnsafe(`<h1>Error</h1><p>${escapeHtml(message)}</p>`);
+      }
+    }
+  }
+}
+
+/**
+ * Create and initialize the browser app.
+ *
+ * Stored on `globalThis.__emroute_app` for programmatic access.
+ */
+export async function createEmrouteApp(
+  server: EmrouteServer,
+  options?: EmrouteAppOptions,
+): Promise<EmrouteApp> {
+  const g = globalThis as Record<string, unknown>;
+  if (g.__emroute_app) {
+    console.warn('eMroute: App already initialized.');
+    return g.__emroute_app as EmrouteApp;
+  }
+  const app = new EmrouteApp(server, options);
+  await app.initialize();
+  g.__emroute_app = app;
+  return app;
+}

package/src/renderer/ssr/html.renderer.ts

@@ -57,12 +57,13 @@ export class SsrHtmlRouter extends SsrRenderer {
     routeInfo: RouteInfo,
     route: RouteConfig,
     isLeaf?: boolean,
+    signal?: AbortSignal,
   ): Promise<{ content: string; title?: string }> {
     if (route.modulePath === DEFAULT_ROOT_ROUTE.modulePath) {
       return { content: `<router-slot pattern="${route.pattern}"></router-slot>` };
     }
 
-    const { content: rawContent, title } = await this.loadRouteContent(routeInfo, route, isLeaf);
+    const { content: rawContent, title } = await this.loadRouteContent(routeInfo, route, isLeaf, signal);
     let content = rawContent;
 
     // Expand <mark-down> tags server-side
@@ -100,18 +101,18 @@ export class SsrHtmlRouter extends SsrRenderer {
     return `<meta http-equiv="refresh" content="0;url=${escapeHtml(to)}">`;
   }
 
-  protected override renderStatusPage(status: number, pathname: string): string {
+  protected override renderStatusPage(status: number, url: URL): string {
     return `
       <h1>${STATUS_MESSAGES[status] ?? 'Error'}</h1>
-      <p>Path: ${escapeHtml(pathname)}</p>
+      <p>Path: ${escapeHtml(url.pathname)}</p>
     `;
   }
 
-  protected override renderErrorPage(error: unknown, pathname: string): string {
+  protected override renderErrorPage(error: unknown, url: URL): string {
     const message = error instanceof Error ? error.message : String(error);
     return `
       <h1>Error</h1>
-      <p>Path: ${escapeHtml(pathname)}</p>
+      <p>Path: ${escapeHtml(url.pathname)}</p>
       <p>${escapeHtml(message)}</p>
     `;
   }

package/src/renderer/ssr/md.renderer.ts

@@ -50,12 +50,13 @@ export class SsrMdRouter extends SsrRenderer {
     routeInfo: RouteInfo,
     route: RouteConfig,
     isLeaf?: boolean,
+    signal?: AbortSignal,
   ): Promise<{ content: string; title?: string }> {
     if (route.modulePath === DEFAULT_ROOT_ROUTE.modulePath) {
       return { content: routerSlotBlock(route.pattern) };
     }
 
-    const { content: rawContent, title } = await this.loadRouteContent(routeInfo, route, isLeaf);
+    const { content: rawContent, title } = await this.loadRouteContent(routeInfo, route, isLeaf, signal);
     let content = rawContent;
 
     // Attribute bare router-slot blocks with this route's pattern
@@ -81,12 +82,12 @@ export class SsrMdRouter extends SsrRenderer {
     return `Redirect to: ${to}`;
   }
 
-  protected override renderStatusPage(status: number, pathname: string): string {
-    return `# ${STATUS_MESSAGES[status] ?? 'Error'}\n\nPath: \`${pathname}\``;
+  protected override renderStatusPage(status: number, url: URL): string {
+    return `# ${STATUS_MESSAGES[status] ?? 'Error'}\n\nPath: \`${url.pathname}\``;
   }
 
-  protected override renderErrorPage(_error: unknown, pathname: string): string {
-    return `# Internal Server Error\n\nPath: \`${pathname}\``;
+  protected override renderErrorPage(_error: unknown, url: URL): string {
+    return `# Internal Server Error\n\nPath: \`${url.pathname}\``;
   }
 
   /**
@@ -117,7 +118,12 @@ export class SsrMdRouter extends SsrRenderer {
             files = await this.core.loadWidgetFiles(filePaths);
           }
 
-          const baseContext = { ...routeInfo, files };
+          const baseContext = {
+            ...routeInfo,
+            pathname: routeInfo.url.pathname,
+            searchParams: routeInfo.url.searchParams,
+            files,
+          };
           const context = this.core.contextProvider
             ? this.core.contextProvider(baseContext)
             : baseContext;

package/src/renderer/ssr/ssr.renderer.ts

@@ -20,7 +20,6 @@ import {
   type RouteCoreOptions,
 } from '../../route/route.core.ts';
 import type { RouteResolver } from '../../route/route.resolver.ts';
-import { toUrl } from '../../route/route.matcher.ts';
 import type { WidgetRegistry } from '../../widget/widget.registry.ts';
 
 /** Base options for SSR renderers */
@@ -50,30 +49,26 @@ export abstract class SsrRenderer {
    * Render a URL to a content string.
    */
   async render(
-    url: string,
+    url: URL,
+    signal?: AbortSignal,
   ): Promise<{ content: string; status: number; title?: string; redirect?: string }> {
-    const urlObj = toUrl(url);
-    const pathname = urlObj.pathname;
-
-    const matched = this.core.match(urlObj);
-
-    const searchParams = urlObj.searchParams ?? new URLSearchParams();
+    const matched = this.core.match(url);
 
     if (!matched) {
       const statusPage = this.core.getStatusPage(404);
       if (statusPage) {
         try {
-          const ri: RouteInfo = { pathname, pattern: statusPage.pattern, params: {}, searchParams };
-          const result = await this.renderRouteContent(ri, statusPage);
+          const ri: RouteInfo = { url, params: {} };
+          const result = await this.renderRouteContent(ri, statusPage, undefined, signal);
           return { content: this.stripSlots(result.content), status: 404, title: result.title };
         } catch (e) {
           logger.error(
-            `[${this.label}] Failed to render 404 status page for ${pathname}`,
+            `[${this.label}] Failed to render 404 status page for ${url.pathname}`,
             e instanceof Error ? e : undefined,
           );
         }
       }
-      return { content: this.renderStatusPage(404, pathname), status: 404 };
+      return { content: this.renderStatusPage(404, url), status: 404 };
     }
 
     // Handle redirect
@@ -90,23 +85,18 @@ export abstract class SsrRenderer {
       };
     }
 
-    const routeInfo = this.core.toRouteInfo(matched, pathname);
+    const routeInfo = this.core.toRouteInfo(matched, url);
 
     try {
-      const { content, title } = await this.renderPage(routeInfo, matched);
+      const { content, title } = await this.renderPage(routeInfo, matched, signal);
       return { content, status: 200, title };
     } catch (error) {
       if (error instanceof Response) {
         const statusPage = this.core.getStatusPage(error.status);
         if (statusPage) {
           try {
-            const ri: RouteInfo = {
-              pathname,
-              pattern: statusPage.pattern,
-              params: {},
-              searchParams,
-            };
-            const result = await this.renderRouteContent(ri, statusPage);
+            const ri: RouteInfo = { url, params: {} };
+            const result = await this.renderRouteContent(ri, statusPage, undefined, signal);
             return {
               content: this.stripSlots(result.content),
               status: error.status,
@@ -114,31 +104,31 @@ export abstract class SsrRenderer {
             };
           } catch (e) {
             logger.error(
-              `[${this.label}] Failed to render ${error.status} status page for ${pathname}`,
+              `[${this.label}] Failed to render ${error.status} status page for ${url.pathname}`,
               e instanceof Error ? e : undefined,
             );
           }
         }
-        return { content: this.renderStatusPage(error.status, pathname), status: error.status };
+        return { content: this.renderStatusPage(error.status, url), status: error.status };
       }
       logger.error(
-        `[${this.label}] Error rendering ${pathname}:`,
+        `[${this.label}] Error rendering ${url.pathname}:`,
         error instanceof Error ? error : undefined,
       );
 
-      const boundary = this.core.findErrorBoundary(pathname);
+      const boundary = this.core.findErrorBoundary(url.pathname);
       if (boundary) {
-        const result = await this.tryRenderErrorModule(boundary.modulePath, pathname, 'boundary');
+        const result = await this.tryRenderErrorModule(boundary.modulePath, url, 'boundary');
         if (result) return result;
       }
 
       const errorHandler = this.core.getErrorHandler();
       if (errorHandler) {
-        const result = await this.tryRenderErrorModule(errorHandler.modulePath, pathname, 'handler');
+        const result = await this.tryRenderErrorModule(errorHandler.modulePath, url, 'handler');
         if (result) return result;
       }
 
-      return { content: this.renderErrorPage(error, pathname), status: 500 };
+      return { content: this.renderErrorPage(error, url), status: 500 };
     }
   }
 
@@ -148,13 +138,12 @@ export abstract class SsrRenderer {
   protected async renderPage(
     routeInfo: RouteInfo,
     matched: MatchedRoute,
+    signal?: AbortSignal,
   ): Promise<{ content: string; title?: string }> {
-    const hierarchy = this.core.buildRouteHierarchy(routeInfo.pattern);
-
-    let result = '';
-    let pageTitle: string | undefined;
-    let lastRenderedPattern = '';
+    const hierarchy = this.core.buildRouteHierarchy(matched.route.pattern);
 
+    // Resolve routes for each hierarchy segment (skip missing / duplicate wildcard)
+    const segments: { route: RouteConfig; isLeaf: boolean }[] = [];
     for (let i = 0; i < hierarchy.length; i++) {
       const routePattern = hierarchy[i];
       let route = this.core.findRoute(routePattern);
@@ -164,12 +153,25 @@ export abstract class SsrRenderer {
       }
 
       if (!route) continue;
-
-      // Skip wildcard route appearing as its own parent (prevents double-render)
       if (route === matched.route && routePattern !== matched.route.pattern) continue;
 
-      const isLeaf = i === hierarchy.length - 1;
-      const { content, title } = await this.renderRouteContent(routeInfo, route, isLeaf);
+      segments.push({ route, isLeaf: i === hierarchy.length - 1 });
+    }
+
+    // Fire all renderRouteContent calls in parallel
+    const results = await Promise.all(
+      segments.map(({ route, isLeaf }) =>
+        this.renderRouteContent(routeInfo, route, isLeaf, signal),
+      ),
+    );
+
+    // Sequential slot injection
+    let result = '';
+    let pageTitle: string | undefined;
+    let lastRenderedPattern = '';
+
+    for (let i = 0; i < segments.length; i++) {
+      const { content, title } = results[i];
 
       if (title) {
         pageTitle = title;
@@ -182,14 +184,14 @@ export abstract class SsrRenderer {
         if (injected === result) {
           logger.warn(
             `[${this.label}] Route "${lastRenderedPattern}" has no <router-slot> ` +
-              `for child route "${routePattern}" to render into. ` +
+              `for child route "${hierarchy[i]}" to render into. ` +
               `Add <router-slot></router-slot> to the parent template.`,
           );
         }
         result = injected;
       }
 
-      lastRenderedPattern = route.pattern;
+      lastRenderedPattern = segments[i].route.pattern;
     }
 
     result = this.stripSlots(result);
@@ -201,6 +203,7 @@ export abstract class SsrRenderer {
     routeInfo: RouteInfo,
     route: RouteConfig,
     isLeaf?: boolean,
+    signal?: AbortSignal,
   ): Promise<{ content: string; title?: string }>;
 
   /** Load component, build context, get data, render content, get title. */
@@ -208,16 +211,17 @@ export abstract class SsrRenderer {
     routeInfo: RouteInfo,
     route: RouteConfig,
     isLeaf?: boolean,
+    signal?: AbortSignal,
   ): Promise<{ content: string; title?: string }> {
     const files = route.files ?? {};
 
-    const tsModule = files.ts;
+    const tsModule = files.ts ?? files.js;
     const component: PageComponent = tsModule
       ? (await this.core.loadModule<{ default: PageComponent }>(tsModule)).default
       : defaultPageComponent;
 
-    const context = await this.core.buildComponentContext(routeInfo, route, undefined, isLeaf);
-    const data = await component.getData({ params: routeInfo.params, context });
+    const context = await this.core.buildComponentContext(routeInfo, route, signal, isLeaf);
+    const data = await component.getData({ params: routeInfo.params, signal, context });
     const content = this.renderContent(component, { data, params: routeInfo.params, context });
     const title = component.getTitle({ data, params: routeInfo.params, context });
 
@@ -239,19 +243,21 @@ export abstract class SsrRenderer {
     return this.renderContent(component, { data, params: {}, context });
   }
 
+  private static readonly EMPTY_URL = new URL('http://error');
+
   /** Try to load and render an error boundary or handler module. Returns null on failure. */
   private async tryRenderErrorModule(
     modulePath: string,
-    pathname: string,
+    url: URL,
     kind: 'boundary' | 'handler',
   ): Promise<{ content: string; status: number } | null> {
     try {
       const module = await this.core.loadModule<{ default: PageComponent }>(modulePath);
       const component = module.default;
       const minCtx: ComponentContext = {
-        pathname: '',
-        pattern: '',
+        url: SsrRenderer.EMPTY_URL,
         params: {},
+        pathname: '',
         searchParams: new URLSearchParams(),
       };
       const data = await component.getData({ params: {}, context: minCtx });
@@ -259,7 +265,7 @@ export abstract class SsrRenderer {
       return { content, status: 500 };
     } catch (e) {
       logger.error(
-        `[${this.label}] Error ${kind} failed for ${pathname}`,
+        `[${this.label}] Error ${kind} failed for ${url.pathname}`,
         e instanceof Error ? e : undefined,
       );
       return null;
@@ -268,9 +274,9 @@ export abstract class SsrRenderer {
 
   protected abstract renderRedirect(to: string): string;
 
-  protected abstract renderStatusPage(status: number, pathname: string): string;
+  protected abstract renderStatusPage(status: number, url: URL): string;
 
-  protected abstract renderErrorPage(error: unknown, pathname: string): string;
+  protected abstract renderErrorPage(error: unknown, url: URL): string;
 
   /** Inject child content into the slot owned by parentPattern. */
   protected abstract injectSlot(parent: string, child: string, parentPattern: string): string;

package/src/route/route.core.ts

@@ -19,7 +19,6 @@ import type {
 } from '../type/route.type.ts';
 import type { ComponentContext, ContextProvider } from '../component/abstract.component.ts';
 import type { RouteResolver, ResolvedRoute } from './route.resolver.ts';
-import { toUrl } from './route.matcher.ts';
 
 /** Base paths for the two SSR rendering endpoints. */
 export interface BasePath {
@@ -27,10 +26,12 @@ export interface BasePath {
   html: string;
   /** Base path for SSR Markdown rendering (default: '/md') */
   md: string;
+  /** Base path for PWA/SPA rendering (default: '/app') */
+  app: string;
 }
 
 /** Default base paths — backward compatible with existing /html/ and /md/ prefixes. */
-export const DEFAULT_BASE_PATH: BasePath = { html: '/html', md: '/md' };
+export const DEFAULT_BASE_PATH: BasePath = { html: '/html', md: '/md', app: '/app' };
 
 const BLOCKED_PROTOCOLS = /^(javascript|data|vbscript):/i;
 
@@ -54,7 +55,7 @@ function toRouteConfig(resolved: ResolvedRoute): RouteConfig {
   return {
     pattern: resolved.pattern,
     type: node.redirect ? 'redirect' : 'page',
-    modulePath: node.redirect ?? node.files?.ts ?? node.files?.html ?? node.files?.md ?? '',
+    modulePath: node.redirect ?? node.files?.ts ?? node.files?.js ?? node.files?.html ?? node.files?.md ?? '',
     files: node.files,
   };
 }
@@ -69,8 +70,6 @@ export interface RouteCoreOptions {
   fileReader?: (path: string) => Promise<string>;
   /** Enriches every ComponentContext with app-level services before it reaches components. */
   extendContext?: ContextProvider;
-  /** Base path stripped from URLs before matching (e.g. '/html'). No trailing slash. */
-  basePath?: string;
   /** Module loaders keyed by path — server provides these for SSR imports. */
   moduleLoaders?: Record<string, () => Promise<unknown>>;
 }
@@ -82,8 +81,6 @@ export class RouteCore {
   private readonly resolver: RouteResolver;
   /** Registered context provider (if any). Exposed so renderers can apply it to inline contexts. */
   readonly contextProvider: ContextProvider | undefined;
-  /** Base path for URL matching (e.g. '/html'). Empty string when no basePath. */
-  readonly basePath: string;
   private listeners: Set<RouterEventListener> = new Set();
   private moduleCache: Map<string, unknown> = new Map();
   private widgetFileCache: Map<string, string> = new Map();
@@ -93,7 +90,6 @@ export class RouteCore {
 
   constructor(resolver: RouteResolver, options: RouteCoreOptions = {}) {
     this.resolver = resolver;
-    this.basePath = options.basePath ?? '';
     this.readFile = options.fileReader ??
       ((path) => fetch(path, { headers: { Accept: 'text/plain' } }).then((r) => r.text()));
     this.contextProvider = options.extendContext;
@@ -132,16 +128,14 @@ export class RouteCore {
    * Match a URL to a route.
    * Falls back to the default root route for '/'.
    */
-  match(url: URL | string): MatchedRoute | undefined {
-    const urlObj = toUrl(url);
-    const pathname = urlObj.pathname;
+  match(url: URL): MatchedRoute | undefined {
+    const pathname = url.pathname;
 
     const resolved = this.resolver.match(pathname);
     if (resolved) {
       return {
         route: toRouteConfig(resolved),
         params: resolved.params,
-        searchParams: urlObj.searchParams,
       };
     }
 
@@ -149,7 +143,6 @@ export class RouteCore {
       return {
         route: DEFAULT_ROOT_ROUTE,
         params: {},
-        searchParams: urlObj.searchParams,
       };
     }
 
@@ -163,7 +156,7 @@ export class RouteCore {
     return {
       pattern: `/${status}`,
       type: 'page',
-      modulePath: node.files?.ts ?? node.files?.html ?? node.files?.md ?? '',
+      modulePath: node.files?.ts ?? node.files?.js ?? node.files?.html ?? node.files?.md ?? '',
       files: node.files,
     };
   }
@@ -196,7 +189,7 @@ export class RouteCore {
     return {
       pattern,
       type: node.redirect ? 'redirect' : 'page',
-      modulePath: node.redirect ?? node.files?.ts ?? node.files?.html ?? node.files?.md ?? '',
+      modulePath: node.redirect ?? node.files?.ts ?? node.files?.js ?? node.files?.html ?? node.files?.md ?? '',
       files: node.files,
     };
   }
@@ -301,17 +294,30 @@ export class RouteCore {
    * Build a RouteInfo from a matched route and the resolved URL pathname.
    * Called once per navigation; the result is reused across the route hierarchy.
    */
-  toRouteInfo(matched: MatchedRoute, pathname: string): RouteInfo {
+  toRouteInfo(matched: MatchedRoute, url: URL): RouteInfo {
     return {
-      pathname,
-      pattern: matched.route.pattern,
+      url,
       params: matched.params,
-      searchParams: matched.searchParams ?? new URLSearchParams(),
     };
   }
 
+  /**
+   * Get inlined `__files` from a cached module (merged module pattern).
+   * Returns undefined if the module isn't cached or has no __files.
+   */
+  getModuleFiles(modulePath: string): { html?: string; md?: string; css?: string } | undefined {
+    const cached = this.moduleCache.get(modulePath);
+    if (!cached || typeof cached !== 'object') return undefined;
+    const files = (cached as Record<string, unknown>).__files;
+    if (!files || typeof files !== 'object') return undefined;
+    return files as { html?: string; md?: string; css?: string };
+  }
+
   /**
    * Build a ComponentContext by extending RouteInfo with loaded file contents.
+   *
+   * When the route module is a merged module (contains `__files`), uses
+   * inlined content directly. Otherwise falls back to reading companion files.
    */
   async buildComponentContext(
     routeInfo: RouteInfo,
@@ -319,22 +325,37 @@ export class RouteCore {
     signal?: AbortSignal,
     isLeaf?: boolean,
   ): Promise<ComponentContext> {
-    const fetchFile = (filePath: string): Promise<string> =>
-      this.readFile(this.toAbsolutePath(filePath));
-
     const rf = route.files;
-    const [html, md, css] = await Promise.all([
-      rf?.html ? fetchFile(rf.html) : undefined,
-      rf?.md ? fetchFile(rf.md) : undefined,
-      rf?.css ? fetchFile(rf.css) : undefined,
-    ]);
+    const modulePath = rf?.ts ?? rf?.js;
+
+    // Try inlined __files from merged module (already cached by loadRouteContent)
+    const inlined = modulePath ? this.getModuleFiles(modulePath) : undefined;
+
+    let html: string | undefined;
+    let md: string | undefined;
+    let css: string | undefined;
+
+    if (inlined) {
+      html = inlined.html;
+      md = inlined.md;
+      css = inlined.css;
+    } else {
+      const fetchFile = (filePath: string): Promise<string> =>
+        this.readFile(this.toAbsolutePath(filePath));
+      [html, md, css] = await Promise.all([
+        rf?.html ? fetchFile(rf.html) : undefined,
+        rf?.md ? fetchFile(rf.md) : undefined,
+        rf?.css ? fetchFile(rf.css) : undefined,
+      ]);
+    }
 
     const base: ComponentContext = {
       ...routeInfo,
+      pathname: routeInfo.url.pathname,
+      searchParams: routeInfo.url.searchParams,
       files: { html, md, css },
       signal,
       isLeaf,
-      basePath: this.basePath || undefined,
     };
     return this.contextProvider ? this.contextProvider(base) : base;
   }