@reckona/mreact-router 0.0.193 → 0.0.194

package/src/serve.ts

@@ -18,6 +18,7 @@ import {
 } from "./built-runtime.js";
 import {
   allBuiltServerModuleFiles,
+  loadBuiltResponseHookArtifacts,
   loadBuiltServerModuleArtifacts,
   loadBuiltServerModuleArtifactsForRequest,
 } from "./built-server-module-artifacts.js";
@@ -30,13 +31,18 @@ import type { AppRouterImportPolicy } from "./import-policy.js";
 import {
   preloadBuiltRequestModules,
   renderAppRequest,
+  resolveAppRouterResponseHook,
   resolveAppRouterMiddleware,
   type AppRouterServerRenderArtifactLoader,
   type AppRouterRenderPreload,
   type AppRouterResponseHook,
   type RenderAppRequestRuntimeOptions,
 } from "./render.js";
-import type { RouterInstrumentation } from "./trace.js";
+import {
+  invokeRouterInstrumentation,
+  traceContextFromRequest,
+  type RouterInstrumentation,
+} from "./trace.js";
 import {
   bytesResponse,
   htmlResponse,
@@ -234,8 +240,10 @@ export async function createBuiltRequestRuntime(
       });
     },
     async render(request, renderOptions = {}) {
+      emitBuiltRequestStart(renderOptions.instrumentation, request);
       const response = await renderBuiltAppRequestWithRuntime({
         ...renderOptions,
+        instrumentation: withoutBuiltRequestInstrumentation(renderOptions.instrumentation),
         importPolicy:
           renderOptions.importPolicy === undefined
             ? defaultImportPolicy
@@ -245,10 +253,16 @@ export async function createBuiltRequestRuntime(
         runtime,
       });
 
-      return applyBuiltAppResponseHook(response, {
-        onResponse: renderOptions.onResponse,
-        request,
-      });
+      const finalResponse = await applyBuiltAppResponseHook(
+        response,
+        {
+          onResponse: renderOptions.onResponse,
+          request,
+        },
+        runtime,
+      );
+      emitBuiltRequestEnd(renderOptions.instrumentation, request, finalResponse.status);
+      return finalResponse;
     },
   };
 }
@@ -349,6 +363,7 @@ function builtRuntimePreloadRoutes(
 export async function renderBuiltAppRequest(
   options: RenderBuiltAppRequestOptions,
 ): Promise<Response> {
+  emitBuiltRequestStart(options.instrumentation, options.request);
   const runtime = await readBuiltRuntime({
     outDir: options.outDir,
     immutable: options.immutableRuntime,
@@ -356,11 +371,54 @@ export async function renderBuiltAppRequest(
   });
   const response = await renderBuiltAppRequestWithRuntime({
     ...options,
+    instrumentation: withoutBuiltRequestInstrumentation(options.instrumentation),
     importPolicy: mergeBuiltRuntimeImportPolicy(runtime, options.importPolicy),
     runtime,
   });
 
-  return applyBuiltAppResponseHook(response, options);
+  const finalResponse = await applyBuiltAppResponseHook(response, options, runtime);
+  emitBuiltRequestEnd(options.instrumentation, options.request, finalResponse.status);
+  return finalResponse;
+}
+
+function withoutBuiltRequestInstrumentation(
+  instrumentation: RouterInstrumentation | undefined,
+): RouterInstrumentation | undefined {
+  if (instrumentation === undefined) {
+    return undefined;
+  }
+
+  const { onRequestEnd: _onRequestEnd, onRequestStart: _onRequestStart, ...remaining } =
+    instrumentation;
+  return remaining;
+}
+
+function emitBuiltRequestStart(
+  instrumentation: RouterInstrumentation | undefined,
+  request: Request,
+): void {
+  const trace = traceContextFromRequest(request);
+  invokeRouterInstrumentation(instrumentation?.onRequestStart, {
+    method: request.method,
+    path: new URL(request.url).pathname,
+    request,
+    ...(trace === undefined ? {} : { trace }),
+  });
+}
+
+function emitBuiltRequestEnd(
+  instrumentation: RouterInstrumentation | undefined,
+  request: Request,
+  status: number,
+): void {
+  const trace = traceContextFromRequest(request);
+  invokeRouterInstrumentation(instrumentation?.onRequestEnd, {
+    method: request.method,
+    path: new URL(request.url).pathname,
+    request,
+    status,
+    ...(trace === undefined ? {} : { trace }),
+  });
 }
 
 async function renderBuiltAppRequestWithRuntime(
@@ -534,8 +592,18 @@ function emitBuiltRenderTiming(
 async function applyBuiltAppResponseHook(
   response: Response,
   options: Pick<RenderBuiltAppRequestOptions, "onResponse" | "request">,
+  runtime: BuiltRuntime,
 ): Promise<Response> {
-  const hooked = await options.onResponse?.(response, {
+  await loadBuiltResponseHookArtifacts(runtime);
+  const onResponse = await resolveAppRouterResponseHook({
+    appDir: runtime.appDir,
+    importPolicy: runtime.generatedImportPolicy,
+    onResponse: options.onResponse,
+    serverModules: runtime.serverModules,
+    serverModuleCacheVersion: runtime.serverModuleCacheVersion,
+    serverSourceFiles: runtime.serverSourceFiles,
+  });
+  const hooked = await onResponse?.(response, {
     request: options.request,
   });
 
@@ -814,6 +882,7 @@ function builtRenderAppRequestOptions(
       options.runtime.serverActionManifest,
     ),
     skipMiddleware: true,
+    onResponse: () => undefined,
     ...(options.preload === undefined ? {} : { preload: options.preload }),
   };
 

package/src/vite.ts

@@ -277,6 +277,7 @@ export function createAppRouterVitePlugin(options: AppRouterVitePluginOptions):
     },
     configureServer(server) {
       server.middlewares.use(createDevCssProxyMiddleware());
+      server.middlewares.use(createClientRouteTransformMiddleware(project.routesDir, server));
 
       return () => {
         const middlewareOptions: AppRouterViteRuntimeMiddlewareOptions = {
@@ -451,6 +452,48 @@ export function prepareReactiveEffectRunDevtoolsEvent() { return undefined; }`;
   return plugin;
 }
 
+function createClientRouteTransformMiddleware(
+  appDir: string,
+  server: ViteDevServer,
+): Connect.NextHandleFunction {
+  return (request, response, next) => {
+    void (async () => {
+      const url = new URL(request.url ?? "/", "http://localhost");
+
+      if (!url.pathname.startsWith(`${clientPrefix}routes/`)) {
+        next();
+        return;
+      }
+
+      const route = await clientRouteForRequestPath(appDir, url.pathname);
+
+      if (route === undefined) {
+        next();
+        return;
+      }
+
+      try {
+        const transformed = await server.transformRequest(`${url.pathname}${url.search}`);
+
+        if (transformed === null) {
+          next();
+          return;
+        }
+
+        await sendResponse(
+          response,
+          new Response(transformed.code, {
+            headers: { "content-type": "text/javascript; charset=utf-8" },
+          }),
+        );
+      } catch (error) {
+        sendViteErrorOverlay(server, error);
+        await sendResponse(response, clientAssetBuildErrorResponse(route.file, error));
+      }
+    })().catch(next);
+  };
+}
+
 function isMreactClientSourceDependency(
   filename: string,
   normalizedSourceDirs: readonly string[],