@reckona/mreact-router 0.0.146 → 0.0.148

package/src/build.ts

@@ -109,6 +109,7 @@ type ServerTransformOutput = ReturnType<typeof transform>;
 type ServerTransformCache = Map<string, Promise<ServerTransformOutput>>;
 
 export interface BuildAppOptions extends AppRouterProjectOptions {
+  onBuildProgress?: ((event: BuildAppProgressEvent) => void) | undefined;
   onBuildPhaseTiming?: ((timing: BuildAppPhaseTiming) => void) | undefined;
   outDir: string;
   targets?: readonly AppRouterBuildTarget[] | undefined;
@@ -178,6 +179,21 @@ export interface BuildAppPhaseTiming {
   phase: BuildAppPhase;
 }
 
+export type BuildAppProgressEvent =
+  | {
+      kind: "phase-start";
+      phase: BuildAppPhase;
+    }
+  | {
+      kind: "phase-end";
+      ms: number;
+      phase: BuildAppPhase;
+    }
+  | {
+      count: number;
+      kind: "routes-discovered";
+    };
+
 export interface BuildAppResult {
   routes: AppRoute[];
 }
@@ -319,23 +335,26 @@ type StaticParams = Record<string, string | number | boolean | readonly string[]
 
 export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult> {
   const timingSink = options.onBuildPhaseTiming;
+  const progressSink = options.onBuildProgress;
+  const shouldTrackBuildPhases = timingSink !== undefined || progressSink !== undefined;
   const project = resolveAppRouterProjectOptions(options);
   const buildTargets = resolveBuildTargets(options.targets ?? project.buildTargets);
   const shouldBuildCloudflare = buildTargets.includes("cloudflare");
   const shouldBuildAwsLambda = buildTargets.includes("aws-lambda");
   const routes =
-    timingSink === undefined
+    shouldTrackBuildPhases === false
       ? await scanAppRoutes({ appDir: project.routesDir })
-      : await timeBuildPhase(timingSink, "scan", () =>
+      : await timeBuildPhase(timingSink, progressSink, "scan", () =>
           scanAppRoutes({ appDir: project.routesDir }),
         );
+  progressSink?.({ count: routes.length, kind: "routes-discovered" });
   await validateBuildMiddlewareControls(project.routesDir, routes);
   const viteDefine = options.viteConfig?.define;
   const vitePlugins = options.viteConfig?.plugins;
   const files =
-    timingSink === undefined
+    shouldTrackBuildPhases === false
       ? await collectBuildFiles(project.projectRoot, project.allowedSourceDirs, project.routesDir)
-      : await timeBuildPhase(timingSink, "collectFiles", () =>
+      : await timeBuildPhase(timingSink, progressSink, "collectFiles", () =>
           collectBuildFiles(project.projectRoot, project.allowedSourceDirs, project.routesDir),
         );
   const serverClientRouteInferenceCache = createClientRouteInferenceCache();
@@ -344,7 +363,7 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
   const clientDir = join(options.outDir, "client");
   const cloudflareDir = join(options.outDir, "cloudflare");
   const sourceAnalysis =
-    timingSink === undefined
+    shouldTrackBuildPhases === false
       ? await analyzeBuildRouteSources({
           clientRouteInferenceCache: serverClientRouteInferenceCache,
           files,
@@ -353,7 +372,7 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
           routes,
           vitePlugins,
         })
-      : await timeBuildPhase(timingSink, "analyzeSources", () =>
+      : await timeBuildPhase(timingSink, progressSink, "analyzeSources", () =>
           analyzeBuildRouteSources({
             clientRouteInferenceCache: serverClientRouteInferenceCache,
             files,
@@ -364,7 +383,7 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
           }),
         );
 
-  if (timingSink === undefined) {
+  if (shouldTrackBuildPhases === false) {
     await validateProductionRoutes({
       clientRouteInferenceCache: serverClientRouteInferenceCache,
       files,
@@ -376,7 +395,7 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
       vitePlugins,
     });
   } else {
-    await timeBuildPhase(timingSink, "validate", () =>
+    await timeBuildPhase(timingSink, progressSink, "validate", () =>
       validateProductionRoutes({
         clientRouteInferenceCache: serverClientRouteInferenceCache,
         files,
@@ -390,7 +409,7 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
     );
   }
 
-  if (timingSink === undefined) {
+  if (shouldTrackBuildPhases === false) {
     await rm(options.outDir, { force: true, recursive: true });
     await Promise.all([
       mkdir(serverDir, { recursive: true }),
@@ -400,7 +419,7 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
       mkdir(join(clientDir, "assets", "routes"), { recursive: true }),
     ]);
   } else {
-    await timeBuildPhase(timingSink, "prepareOutput", async () => {
+    await timeBuildPhase(timingSink, progressSink, "prepareOutput", async () => {
       await rm(options.outDir, { force: true, recursive: true });
       await Promise.all([
         mkdir(serverDir, { recursive: true }),
@@ -413,22 +432,22 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
   }
 
   const publicAssets =
-    timingSink === undefined
+    shouldTrackBuildPhases === false
       ? await buildPublicAssetManifest(project, clientDir)
-      : await timeBuildPhase(timingSink, "publicAssets", () =>
+      : await timeBuildPhase(timingSink, progressSink, "publicAssets", () =>
           buildPublicAssetManifest(project, clientDir),
         );
 
   const clientRouteInferenceCache = createClientRouteInferenceCache();
   const [serverActionManifest, serverModules, generatedImportPolicy] = await Promise.all([
-    timingSink === undefined
+    shouldTrackBuildPhases === false
       ? collectBuildServerActionManifest({
           files,
           projectRoot: project.projectRoot,
           routes,
           routesDir: project.routesDir,
         })
-      : timeBuildPhase(timingSink, "serverActionManifest", () =>
+      : timeBuildPhase(timingSink, progressSink, "serverActionManifest", () =>
           collectBuildServerActionManifest({
             files,
             projectRoot: project.projectRoot,
@@ -436,12 +455,12 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
             routesDir: project.routesDir,
           }),
         ),
-    timingSink === undefined
-        ? buildServerModuleArtifacts({
-            bundleCache: new Map(),
-            clientRouteInferenceCache: serverClientRouteInferenceCache,
-            define: viteDefine,
-            files,
+    shouldTrackBuildPhases === false
+      ? buildServerModuleArtifacts({
+          bundleCache: new Map(),
+          clientRouteInferenceCache: serverClientRouteInferenceCache,
+          define: viteDefine,
+          files,
           prebundleServerComponents: buildTargets.includes("node") || shouldBuildAwsLambda,
           project,
           projectRoot: project.projectRoot,
@@ -450,7 +469,7 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
           serverTransformCache,
           vitePlugins,
         })
-      : timeBuildPhase(timingSink, "serverModules", () =>
+      : timeBuildPhase(timingSink, progressSink, "serverModules", () =>
           buildServerModuleArtifacts({
             bundleCache: new Map(),
             clientRouteInferenceCache: serverClientRouteInferenceCache,
@@ -465,14 +484,14 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
             vitePlugins,
           }),
         ),
-    timingSink === undefined
+    shouldTrackBuildPhases === false
       ? buildGeneratedImportPolicy({
           files,
           projectRoot: project.projectRoot,
           routes,
           routesDir: project.routesDir,
         })
-      : timeBuildPhase(timingSink, "importPolicy", () =>
+      : timeBuildPhase(timingSink, progressSink, "importPolicy", () =>
           buildGeneratedImportPolicy({
             files,
             projectRoot: project.projectRoot,
@@ -486,20 +505,20 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
     file: relative(project.projectRoot, route.file),
   }));
   const [serverModuleArtifacts, clientBundle] = await Promise.all([
-    timingSink === undefined
+    shouldTrackBuildPhases === false
       ? writeServerModuleArtifactFiles(
           serverDir,
           serverModules,
           generatedImportPolicy.runtimePackages,
         )
-      : timeBuildPhase(timingSink, "serverModuleArtifacts", () =>
+      : timeBuildPhase(timingSink, progressSink, "serverModuleArtifacts", () =>
           writeServerModuleArtifactFiles(
             serverDir,
             serverModules,
             generatedImportPolicy.runtimePackages,
           ),
         ),
-    timingSink === undefined
+    shouldTrackBuildPhases === false
       ? writeClientRouteBundles({
           appDir: project.routesDir,
           assetBaseUrl: project.assetBaseUrl,
@@ -513,7 +532,7 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
           sourceMaps: project.clientSourceMaps,
           vitePlugins,
         })
-      : timeBuildPhase(timingSink, "clientBundles", () =>
+      : timeBuildPhase(timingSink, progressSink, "clientBundles", () =>
           writeClientRouteBundles({
             appDir: project.routesDir,
             assetBaseUrl: project.assetBaseUrl,
@@ -533,9 +552,9 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
   const navigationRuntimeScript = clientRoutes.some(
     (route) => route.navigation === true && !route.client,
   )
-    ? timingSink === undefined
+    ? shouldTrackBuildPhases === false
       ? await writeNavigationRuntimeBundle(clientDir, project.clientConsolePureFunctions)
-      : await timeBuildPhase(timingSink, "navigationRuntime", () =>
+      : await timeBuildPhase(timingSink, progressSink, "navigationRuntime", () =>
           writeNavigationRuntimeBundle(clientDir, project.clientConsolePureFunctions),
         )
     : undefined;
@@ -555,7 +574,7 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
     ]),
   ).sort();
   const prerenderedRoutes =
-    timingSink === undefined
+    shouldTrackBuildPhases === false
       ? await prerenderStaticRoutes({
           appDir: project.routesDir,
           assetBaseUrl: project.assetBaseUrl,
@@ -567,7 +586,7 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
           sourceAnalysis,
           vitePlugins,
         })
-      : await timeBuildPhase(timingSink, "prerender", () =>
+      : await timeBuildPhase(timingSink, progressSink, "prerender", () =>
           prerenderStaticRoutes({
             appDir: project.routesDir,
             assetBaseUrl: project.assetBaseUrl,
@@ -583,7 +602,7 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
   let cloudflareRouteModules: CloudflareRouteModulesOutput | undefined;
   if (shouldBuildCloudflare) {
     cloudflareRouteModules =
-      timingSink === undefined
+      shouldTrackBuildPhases === false
         ? await writeCloudflareRouteModules({
             cloudflareDir,
             define: viteDefine,
@@ -596,7 +615,7 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
             sourceAnalysis,
             vitePlugins,
           })
-        : await timeBuildPhase(timingSink, "cloudflare", () =>
+        : await timeBuildPhase(timingSink, progressSink, "cloudflare", () =>
             writeCloudflareRouteModules({
               cloudflareDir,
               define: viteDefine,
@@ -667,13 +686,13 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
       ),
     ]);
   };
-  if (timingSink === undefined) {
+  if (shouldTrackBuildPhases === false) {
     await writeManifestFiles();
   } else {
-    await timeBuildPhase(timingSink, "writeManifests", writeManifestFiles);
+    await timeBuildPhase(timingSink, progressSink, "writeManifests", writeManifestFiles);
   }
 
-  if (timingSink === undefined) {
+  if (shouldTrackBuildPhases === false) {
     await Promise.all([
       ...(shouldBuildAwsLambda ? [writeAwsLambdaHandlerArtifact(options.outDir)] : []),
       ...(shouldBuildCloudflare
@@ -688,7 +707,7 @@ export async function buildApp(options: BuildAppOptions): Promise<BuildAppResult
         : []),
     ]);
   } else {
-    await timeBuildPhase(timingSink, "adapterArtifacts", async () => {
+    await timeBuildPhase(timingSink, progressSink, "adapterArtifacts", async () => {
       await Promise.all([
         ...(shouldBuildAwsLambda ? [writeAwsLambdaHandlerArtifact(options.outDir)] : []),
         ...(shouldBuildCloudflare
@@ -741,17 +760,25 @@ function typedRoutesDeclaration(routes: readonly AppRoute[]): string {
 }
 
 async function timeBuildPhase<T>(
-  sink: (timing: BuildAppPhaseTiming) => void,
+  timingSink: ((timing: BuildAppPhaseTiming) => void) | undefined,
+  progressSink: ((event: BuildAppProgressEvent) => void) | undefined,
   phase: BuildAppPhase,
   run: () => Promise<T>,
 ): Promise<T> {
+  progressSink?.({ kind: "phase-start", phase });
   const startedAt = performance.now();
 
   try {
     return await run();
   } finally {
-    sink({
-      ms: roundBuildPhaseMs(performance.now() - startedAt),
+    const ms = roundBuildPhaseMs(performance.now() - startedAt);
+    timingSink?.({
+      ms,
+      phase,
+    });
+    progressSink?.({
+      kind: "phase-end",
+      ms,
       phase,
     });
   }

package/src/cli.ts

@@ -1,10 +1,18 @@
 #!/usr/bin/env node
 
+import { readFile } from "node:fs/promises";
 import { resolve } from "node:path";
-import { buildApp, packageAwsLambdaArtifact, packageCloudflarePagesArtifact } from "./build.js";
+import {
+  buildApp,
+  packageAwsLambdaArtifact,
+  packageCloudflarePagesArtifact,
+  type BuildAppPhase,
+  type BuildAppProgressEvent,
+} from "./build.js";
 import {
   buildTargetsFromCliTarget,
   createCliRequestLogger,
+  type CliBuildTarget,
   formatCliHelp,
   parseCliArguments,
   resolveCliAllowedHosts,
@@ -40,20 +48,42 @@ if (parsed !== undefined) {
           : undefined;
 
       if (command === "build") {
+        const startedAt = performance.now();
+        let activeBuildPhase: BuildAppPhase | undefined;
+        console.log(`mreact-router build v${await readRouterCliVersion()}`);
+        console.log(`Target: ${formatCliBuildTarget(parsed.target)}`);
+        console.log(`Root: ${process.cwd()}`);
+        console.log("Config: loading...");
         const loaded =
           routeArg === undefined
             ? await loadMreactRouterViteConfigDetails({ command: "build", cwd: process.cwd() })
             : { project: { appDir: resolve(routeArg) }, viteConfig: undefined };
-        const result = await buildApp({
-          ...loaded.project,
-          ...(parsed.clientSourceMaps === undefined
-            ? {}
-            : { clientSourceMaps: parsed.clientSourceMaps }),
-          outDir: resolve(".mreact"),
-          targets: buildTargetsFromCliTarget(parsed.target),
-          viteConfig: loaded.viteConfig,
-        });
-        console.log(`Built ${result.routes.length} routes.`);
+        try {
+          const result = await buildApp({
+            ...loaded.project,
+            ...(parsed.clientSourceMaps === undefined
+              ? {}
+              : { clientSourceMaps: parsed.clientSourceMaps }),
+            onBuildProgress(event) {
+              activeBuildPhase = updateBuildProgressLog(event, activeBuildPhase);
+            },
+            outDir: resolve(".mreact"),
+            targets: buildTargetsFromCliTarget(parsed.target),
+            viteConfig: loaded.viteConfig,
+          });
+          console.log(
+            `Built ${result.routes.length} routes in ${formatDurationSeconds(performance.now() - startedAt)}.`,
+          );
+        } catch (error) {
+          if (activeBuildPhase !== undefined) {
+            throw new Error(
+              `Build failed during ${formatBuildPhaseFailureLabel(activeBuildPhase)}: ${
+                error instanceof Error ? error.message : String(error)
+              }`,
+            );
+          }
+          throw error;
+        }
       } else if (command === "package") {
         if (routeArg === "aws-lambda") {
           const manifest = await packageAwsLambdaArtifact({
@@ -82,7 +112,11 @@ if (parsed !== undefined) {
         const loaded =
           routeArg === undefined
             ? await loadMreactRouterViteConfigDetails({ command: "serve", cwd: process.cwd() })
-            : { project: { appDir: resolve(routeArg) }, serverPort: undefined, viteConfig: undefined };
+            : {
+                project: { appDir: resolve(routeArg) },
+                serverPort: undefined,
+                viteConfig: undefined,
+              };
         const server = await startDevServer({
           ...loaded.project,
           logger,
@@ -110,3 +144,101 @@ if (parsed !== undefined) {
     process.exitCode = 1;
   }
 }
+
+async function readRouterCliVersion(): Promise<string> {
+  try {
+    const source = await readFile(new URL("../package.json", import.meta.url), "utf8");
+    const json = JSON.parse(source) as { version?: unknown };
+
+    return typeof json.version === "string" ? json.version : "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+
+function formatCliBuildTarget(target: CliBuildTarget | undefined): string {
+  return target ?? "default";
+}
+
+function updateBuildProgressLog(
+  event: BuildAppProgressEvent,
+  activePhase: BuildAppPhase | undefined,
+): BuildAppPhase | undefined {
+  if (event.kind === "routes-discovered") {
+    console.log(`Routes: ${event.count} discovered`);
+    return activePhase;
+  }
+
+  if (event.kind !== "phase-start") {
+    return activePhase;
+  }
+
+  const message = buildPhaseProgressMessage(event.phase);
+  if (message !== undefined) {
+    console.log(message);
+  }
+
+  return event.phase;
+}
+
+function buildPhaseProgressMessage(phase: BuildAppPhase): string | undefined {
+  switch (phase) {
+    case "scan":
+      return "Routes: discovering...";
+    case "serverModules":
+      return "Server: building...";
+    case "clientBundles":
+      return "Client: building...";
+    case "writeManifests":
+      return "Artifacts: writing...";
+    default:
+      return undefined;
+  }
+}
+
+function formatBuildPhaseFailureLabel(phase: BuildAppPhase): string {
+  switch (phase) {
+    case "scan":
+      return "route discovery";
+    case "collectFiles":
+      return "source file collection";
+    case "analyzeSources":
+      return "source analysis";
+    case "validate":
+      return "production route validation";
+    case "prepareOutput":
+      return "output preparation";
+    case "publicAssets":
+      return "public asset collection";
+    case "serverActionManifest":
+      return "server action manifest generation";
+    case "serverModules":
+      return "server output build";
+    case "importPolicy":
+      return "import policy generation";
+    case "serverModuleArtifacts":
+      return "server artifact writing";
+    case "clientBundles":
+      return "client output build";
+    case "navigationRuntime":
+      return "navigation runtime build";
+    case "prerender":
+      return "static prerender";
+    case "cloudflare":
+      return "Cloudflare artifact generation";
+    case "writeManifests":
+      return "manifest writing";
+    case "adapterArtifacts":
+      return "adapter artifact writing";
+  }
+}
+
+function formatDurationSeconds(ms: number): string {
+  const seconds = ms / 1000;
+
+  if (seconds < 10) {
+    return `${Math.round(seconds * 10) / 10}s`;
+  }
+
+  return `${Math.round(seconds)}s`;
+}

package/src/client.ts

@@ -2515,7 +2515,34 @@ function __mreactEvaluateHydrationNode(factory) {
   }
 }
 
-__mreactHydrateRoute();
+const __mreactRouteHydrationReported = Symbol.for("mreact.routeHydrationReported");
+
+function __mreactReportRouteHydrationError(error) {
+  if (error !== null && typeof error === "object") {
+    if (error[__mreactRouteHydrationReported] === true) {
+      return;
+    }
+    error[__mreactRouteHydrationReported] = true;
+  }
+
+  if (typeof console !== "undefined" && typeof console.error === "function") {
+    console.error(
+      \`mreact: route hydration failed for route "\${__mreactRouteId}". Server HTML remains visible, but client interactivity for this route was not attached.\`,
+      error,
+    );
+  }
+}
+
+function __mreactRunRouteHydration(factory) {
+  try {
+    return factory();
+  } catch (error) {
+    __mreactReportRouteHydrationError(error);
+    throw error;
+  }
+}
+
+__mreactRunRouteHydration(() => __mreactHydrateRoute());
 ${clientNavigation ? "__mreactInstallNavigation();" : ""}
 
 ${
@@ -2989,7 +3016,12 @@ ${routeCleanupNavigationDispose}  __mreactSyncRouteDataScripts(template.content,
 
   const script = template.content.querySelector('script[type="module"][src]')?.getAttribute("src");
   if (script !== null && script !== undefined) {
-    void import(/* @vite-ignore */ script).then((module) => module.${routeHydrationContract.routeHydrateExport}?.());
+    void import(/* @vite-ignore */ script)
+      .then((module) => __mreactRunRouteHydration(() => module.${routeHydrationContract.routeHydrateExport}?.()))
+      .catch((error) => {
+        __mreactReportRouteHydrationError(error);
+        throw error;
+      });
   } else {
     __mreactMarkRouteHydrated();
   }

package/src/index.ts

@@ -75,6 +75,7 @@ export type {
   BuildAppPhase,
   BuildAppPhaseTiming,
   BuildAppOptions,
+  BuildAppProgressEvent,
   BuildAppResult,
   BuiltImportPolicyArtifact,
   CloudflarePagesArtifactManifest,

package/src/vite.ts

@@ -287,7 +287,8 @@ export function cell(initial) {
       if (id === virtualReactiveDevtoolsId) {
         return `export function emitReactiveDevtoolsEvent() {}
 export function hasReactiveDevtoolsEmitter() { return false; }
-export function currentDevtoolsEmitter() { return undefined; }`;
+export function currentDevtoolsEmitter() { return undefined; }
+export function currentReactiveDevtools() { return undefined; }`;
       }
 
       if (id.startsWith(virtualClientPrefix)) {