@reckona/mreact-router 0.0.195 → 0.0.197

package/src/client.ts

@@ -1,7 +1,7 @@
 import { createHash } from "node:crypto";
 import { readFile, stat } from "node:fs/promises";
 import { builtinModules } from "node:module";
-import { dirname, extname, join, relative, sep } from "node:path";
+import { basename, dirname, extname, isAbsolute, join, relative, resolve, sep } from "node:path";
 import {
   analyzeBoundaryGraph,
   collectClientRouteModuleAnalysis,
@@ -10,6 +10,7 @@ import {
   type BoundaryGraphResult,
   type ClientRouteModuleAnalysis,
   type ClientRouteStaticImportReference,
+  type StaticExportReference,
   type StaticImportReference,
   type TopLevelExportRenderInfo,
 } from "@reckona/mreact-compiler";
@@ -68,6 +69,7 @@ export interface ClientRouteManifestEntry {
 export interface BuildClientRouteOutputOptions {
   cacheDir?: string | undefined;
   code: string;
+  debugLabels?: boolean | undefined;
   clientBoundaryImports?: readonly string[] | undefined;
   clientReferenceImports?: readonly ClientReferenceImport[] | undefined;
   clientReferenceManifest?: readonly ClientReferenceMetadata[] | undefined;
@@ -117,10 +119,37 @@ export interface ClientRouteInferenceResult {
   client: boolean;
   clientBoundaryImports: string[];
   clientBoundaryFallbackImports: string[];
+  components?: ClientRouteComponent[] | undefined;
   diagnostics: ClientRouteInferenceDiagnostic[];
 }
 
+export type ClientRouteComponentClassification =
+  | "client-boundary"
+  | "client-route"
+  | "server-only"
+  | "server-render"
+  | "shared"
+  | "unknown";
+
+export type ClientRouteComponentOrigin =
+  | "client-filename"
+  | "compat-filename"
+  | "inferred-client-runtime"
+  | "server-only-import"
+  | "server-render"
+  | "unresolved-reference"
+  | "use-client-directive"
+  | "use-server-directive";
+
+export interface ClientRouteComponent {
+  classification: ClientRouteComponentClassification;
+  exportName: string;
+  file: string;
+  origin: ClientRouteComponentOrigin;
+}
+
 interface ClientRouteModuleInferenceResult extends ClientRouteInferenceResult {
+  availableExportNames: string[];
   boundaryGraphFallbackCandidate: boolean;
   boundaryGraphFallbackRequired: boolean;
   clientBoundaryExportNames: string[];
@@ -133,6 +162,28 @@ interface ClientRouteModuleInferenceResult extends ClientRouteInferenceResult {
   usesNavigationLink: boolean;
 }
 
+interface ClientRouteComponentCollector {
+  clientReachable: Set<string>;
+  components: Map<string, ClientRouteComponent>;
+  localExportNamesByFile: Map<string, Set<string>>;
+  pendingExportValidations: ClientRoutePendingExportValidation[];
+  reachable: Set<string>;
+  staticExportEdges: ClientRouteStaticExportEdge[];
+}
+
+interface ClientRoutePendingExportValidation {
+  exportNames: string[];
+  file: string;
+  importer: string;
+  source: string;
+}
+
+interface ClientRouteStaticExportEdge {
+  file: string;
+  reference: StaticExportReference;
+  resolved: string;
+}
+
 export interface ClientReferenceImport {
   exportName: string;
   importSource: string;
@@ -147,10 +198,11 @@ export interface ClientRouteReferenceResult extends ClientRouteInferenceResult {
 
 export interface ClientRouteInferenceDiagnostic {
   code:
-    | typeof clientBoundaryInferenceServerOnlyReferenceCode
-    | typeof clientBoundaryInferenceFunctionCallInteractiveCode
-    | typeof clientBoundaryInferenceUnsupportedReferenceCode
-    | typeof navigationRuntimeLinkDisabledCode;
+    | "MR_CLIENT_BOUNDARY_INFERENCE_SERVER_ONLY_REFERENCE"
+    | "MR_CLIENT_BOUNDARY_INFERENCE_FUNCTION_CALL_INTERACTIVE"
+    | "MR_CLIENT_BOUNDARY_INFERENCE_UNRESOLVED_REFERENCE"
+    | "MR_CLIENT_BOUNDARY_INFERENCE_UNSUPPORTED_REFERENCE"
+    | "MR_NAVIGATION_RUNTIME_LINK_DISABLED";
   filename: string;
   level: "warn";
   localNames: string[];
@@ -217,6 +269,7 @@ export async function inferClientRouteModule(options: {
   appDir?: string | undefined;
   cache?: ClientRouteInferenceCache | undefined;
   code: string;
+  collectComponents?: boolean | undefined;
   filename: string;
   moduleContext?: CompilerModuleContext | undefined;
   routePath?: string | undefined;
@@ -224,6 +277,16 @@ export async function inferClientRouteModule(options: {
 }): Promise<ClientRouteInferenceResult> {
   const cache = options.cache ?? createClientRouteInferenceCache();
   const sourceTransform = clientRouteSourceTransformForVitePlugins(options.vitePlugins);
+  const componentCollector: ClientRouteComponentCollector | undefined = options.collectComponents
+    ? {
+        clientReachable: new Set(),
+        components: new Map(),
+        localExportNamesByFile: new Map(),
+        pendingExportValidations: [],
+        reachable: new Set(),
+        staticExportEdges: [],
+      }
+    : undefined;
   const code = await transformClientRouteSource({
     code: options.code,
     filename: options.filename,
@@ -234,9 +297,11 @@ export async function inferClientRouteModule(options: {
     const routeInference = await inferClientRouteModuleSource({
       cache,
       code,
+      componentCollector,
       filename: options.filename,
       ...(sourceTransform === undefined ? { moduleContext: options.moduleContext } : {}),
       root: true,
+      routeEntry: true,
       seen: new Set(),
       sourceTransform,
     });
@@ -253,15 +318,29 @@ export async function inferClientRouteModule(options: {
       : routeInference;
 
     if (options.appDir === undefined) {
-      return withClientRouteDiagnosticPath(mergedRouteInference, options.routePath);
+      const exportDiagnostics = finalizeClientRouteComponentExportValidations(componentCollector);
+      return withClientRouteDiagnosticPath(
+        {
+          ...mergedRouteInference,
+          ...(componentCollector === undefined
+            ? {}
+            : {
+                components: normalizedClientRouteComponents(componentCollector, options.filename),
+              }),
+          diagnostics: [...mergedRouteInference.diagnostics, ...exportDiagnostics],
+        },
+        options.routePath,
+      );
     }
 
     const shellInferences = await inferClientRouteShellModules({
       appDir: options.appDir,
       cache,
+      componentCollector,
       filename: options.filename,
       sourceTransform,
     });
+    const exportDiagnostics = finalizeClientRouteComponentExportValidations(componentCollector);
 
     return withClientRouteDiagnosticPath(
       {
@@ -269,9 +348,15 @@ export async function inferClientRouteModule(options: {
           mergedRouteInference.client || shellInferences.some((inference) => inference.client),
         clientBoundaryImports: mergedRouteInference.clientBoundaryImports,
         clientBoundaryFallbackImports: mergedRouteInference.clientBoundaryFallbackImports,
+        ...(componentCollector === undefined
+          ? {}
+          : {
+              components: normalizedClientRouteComponents(componentCollector, options.filename),
+            }),
         diagnostics: [
           ...mergedRouteInference.diagnostics,
           ...shellInferences.flatMap((inference) => inference.diagnostics),
+          ...exportDiagnostics,
         ],
       },
       options.routePath,
@@ -376,6 +461,7 @@ export async function collectClientRouteReferences(options: {
     filename: options.filename,
     moduleContext: routeModuleContext,
     root: true,
+    routeEntry: true,
     seen: new Set(),
     sourceTransform,
   });
@@ -412,6 +498,7 @@ export async function collectClientRouteReferences(options: {
         filename: sourceOptions.filename,
         moduleContext,
         root: true,
+        routeEntry: false,
         seen: new Set(),
         sourceTransform,
       }));
@@ -458,6 +545,7 @@ export async function collectClientRouteReferences(options: {
           filename: shell,
           moduleContext,
           root: true,
+          routeEntry: false,
           seen: new Set(),
           sourceTransform,
         }),
@@ -603,6 +691,7 @@ export function navigationRuntimeLinkDisabledDiagnostic(options: {
 async function inferClientRouteShellModules(options: {
   appDir: string;
   cache: ClientRouteInferenceCache;
+  componentCollector?: ClientRouteComponentCollector | undefined;
   filename: string;
   sourceTransform?: ClientRouteSourceTransform | undefined;
 }): Promise<ClientRouteInferenceResult[]> {
@@ -619,8 +708,10 @@ async function inferClientRouteShellModules(options: {
       return await inferClientRouteModuleSource({
         cache: options.cache,
         code,
+        componentCollector: options.componentCollector,
         filename: shell,
         root: true,
+        routeEntry: false,
         seen: new Set(),
         sourceTransform: options.sourceTransform,
       });
@@ -661,6 +752,380 @@ export function isClientRouteSource(code: string): boolean {
   );
 }
 
+function collectClientRouteComponentsForModule(
+  collector: ClientRouteComponentCollector | undefined,
+  options: {
+    analysis: ClientRouteModuleAnalysis;
+    filename: string;
+    root: boolean;
+    routeEntry: boolean;
+  },
+): void {
+  if (collector === undefined) {
+    return;
+  }
+
+  if (options.root) {
+    markClientRouteComponentReachable(collector, options.filename, ["default"]);
+  }
+
+  const localExportNames =
+    collector.localExportNamesByFile.get(options.filename) ?? new Set<string>();
+  for (const info of options.analysis.topLevelExportRenderInfo) {
+    localExportNames.add(info.name);
+  }
+  collector.localExportNamesByFile.set(options.filename, localExportNames);
+
+  const serverOnly =
+    options.analysis.hasUseServerDirective || hasServerOnlyImports(options.analysis);
+  const explicitClient = isExplicitClientRouteSource(options.analysis, options.filename);
+
+  for (const info of options.analysis.topLevelExportRenderInfo) {
+    const component = {
+      classification: serverOnly
+        ? "server-only"
+        : explicitClient || info.clientRuntime
+          ? options.routeEntry && info.name === "default"
+            ? "client-route"
+            : "client-boundary"
+          : "server-render",
+      exportName: info.name,
+      file: options.filename,
+      origin: clientRouteComponentOrigin({
+        analysis: options.analysis,
+        filename: options.filename,
+        info,
+        serverOnly,
+      }),
+    } satisfies ClientRouteComponent;
+    collector.components.set(
+      clientRouteComponentKey(component.file, component.exportName),
+      component,
+    );
+  }
+
+  for (const info of options.analysis.topLevelExportRenderInfo) {
+    if (!isClientRouteComponentReachable(collector, options.filename, info.name)) {
+      continue;
+    }
+
+    const renderedNames = new Set([
+      ...(options.analysis.reachableExportRenderedComponentNames[info.name] ?? []),
+      ...(options.analysis.reachableExportRenderedComponentRoots[info.name] ?? []),
+    ]);
+
+    for (const rendered of options.analysis.topLevelExportRenderInfo) {
+      if (
+        rendered.name !== "default" &&
+        (renderedNames.has(rendered.name) || renderedNames.has(rendered.localName ?? rendered.name))
+      ) {
+        markClientRouteComponentReachable(collector, options.filename, [rendered.name], {
+          clientExecution: clientRouteComponentRunsOnClient(collector, options.filename, info.name),
+        });
+      }
+    }
+  }
+}
+
+function clientRouteComponentOrigin(options: {
+  analysis: ClientRouteModuleAnalysis;
+  filename: string;
+  info: TopLevelExportRenderInfo;
+  serverOnly: boolean;
+}): ClientRouteComponentOrigin {
+  if (options.analysis.hasUseServerDirective) {
+    return "use-server-directive";
+  }
+
+  if (options.serverOnly) {
+    return "server-only-import";
+  }
+
+  if (options.analysis.hasUseClientDirective) {
+    return "use-client-directive";
+  }
+
+  if (/\.compat(?:\.mreact)?\.[cm]?[jt]sx?$/.test(options.filename)) {
+    return "compat-filename";
+  }
+
+  if (/\.client(?:\.mreact)?\.[cm]?[jt]sx?$/.test(options.filename)) {
+    return "client-filename";
+  }
+
+  return options.info.clientRuntime ? "inferred-client-runtime" : "server-render";
+}
+
+function normalizedClientRouteComponents(
+  collector: ClientRouteComponentCollector,
+  routeFile: string,
+): ClientRouteComponent[] {
+  return Array.from(collector.components.values())
+    .filter(
+      (component) =>
+        collector.reachable.has(clientRouteComponentKey(component.file, component.exportName)) ||
+        collector.reachable.has(clientRouteComponentKey(component.file, "*")),
+    )
+    .map((component) =>
+      component.classification === "server-render" &&
+      (collector.clientReachable.has(
+        clientRouteComponentKey(component.file, component.exportName),
+      ) ||
+        collector.clientReachable.has(clientRouteComponentKey(component.file, "*")))
+        ? { ...component, classification: "shared" as const }
+        : component,
+    )
+    .sort((left, right) => {
+      const leftRoute = left.file === routeFile && left.exportName === "default";
+      const rightRoute = right.file === routeFile && right.exportName === "default";
+
+      if (leftRoute !== rightRoute) {
+        return leftRoute ? -1 : 1;
+      }
+
+      return left.file === right.file
+        ? left.exportName === right.exportName
+          ? left.classification.localeCompare(right.classification)
+          : left.exportName.localeCompare(right.exportName)
+        : left.file.localeCompare(right.file);
+    });
+}
+
+function clientRouteComponentKey(file: string, exportName: string): string {
+  return `${file}\0${exportName}`;
+}
+
+function markClientRouteComponentReachable(
+  collector: ClientRouteComponentCollector | undefined,
+  file: string,
+  exportNames: readonly string[] | undefined,
+  options: { clientExecution?: boolean | undefined } = {},
+): void {
+  if (collector === undefined) {
+    return;
+  }
+
+  if (exportNames === undefined) {
+    collector.reachable.add(clientRouteComponentKey(file, "*"));
+    if (options.clientExecution === true) {
+      collector.clientReachable.add(clientRouteComponentKey(file, "*"));
+    }
+    return;
+  }
+
+  for (const exportName of exportNames) {
+    const key = clientRouteComponentKey(file, exportName);
+    collector.reachable.add(key);
+    if (options.clientExecution === true) {
+      collector.clientReachable.add(key);
+    }
+  }
+}
+
+function clientRouteComponentRunsOnClient(
+  collector: ClientRouteComponentCollector | undefined,
+  file: string,
+  exportName: string,
+): boolean {
+  if (collector === undefined) {
+    return false;
+  }
+
+  const key = clientRouteComponentKey(file, exportName);
+  const component = collector.components.get(key);
+  return (
+    component?.classification === "client-boundary" ||
+    component?.classification === "client-route" ||
+    component?.classification === "shared" ||
+    collector.clientReachable.has(key) ||
+    collector.clientReachable.has(clientRouteComponentKey(file, "*"))
+  );
+}
+
+function isClientRouteComponentReachable(
+  collector: ClientRouteComponentCollector | undefined,
+  file: string,
+  exportName: string,
+): boolean {
+  return (
+    collector === undefined ||
+    collector.reachable.has(clientRouteComponentKey(file, exportName)) ||
+    collector.reachable.has(clientRouteComponentKey(file, "*"))
+  );
+}
+
+function propagateClientRouteComponentStaticExport(
+  collector: ClientRouteComponentCollector | undefined,
+  file: string,
+  resolved: string,
+  reference: StaticExportReference,
+): void {
+  if (collector === undefined) {
+    return;
+  }
+
+  const wildcardReachable = collector.reachable.has(clientRouteComponentKey(file, "*"));
+  const wildcardClientExecution = clientRouteComponentRunsOnClient(collector, file, "*");
+
+  if (reference.exportAll) {
+    if (wildcardReachable) {
+      markClientRouteComponentReachable(collector, resolved, undefined, {
+        clientExecution: wildcardClientExecution,
+      });
+    }
+
+    for (const key of collector.reachable) {
+      const [reachableFile, exportName] = key.split("\0");
+
+      if (reachableFile === file && exportName !== undefined && exportName !== "*") {
+        markClientRouteComponentReachable(collector, resolved, [exportName], {
+          clientExecution: clientRouteComponentRunsOnClient(collector, file, exportName),
+        });
+      }
+    }
+    return;
+  }
+
+  for (const specifier of reference.specifiers) {
+    if (
+      wildcardReachable ||
+      collector.reachable.has(clientRouteComponentKey(file, specifier.exportedName))
+    ) {
+      markClientRouteComponentReachable(collector, resolved, [specifier.localName], {
+        clientExecution:
+          wildcardClientExecution ||
+          clientRouteComponentRunsOnClient(collector, file, specifier.exportedName),
+      });
+    }
+  }
+
+  if (reference.specifiers.length === 0) {
+    for (const exportName of reference.exportedNames) {
+      if (wildcardReachable || collector.reachable.has(clientRouteComponentKey(file, exportName))) {
+        markClientRouteComponentReachable(collector, resolved, [exportName], {
+          clientExecution:
+            wildcardClientExecution ||
+            clientRouteComponentRunsOnClient(collector, file, exportName),
+        });
+      }
+    }
+  }
+}
+
+function collectUnknownClientRouteComponents(
+  collector: ClientRouteComponentCollector | undefined,
+  options: {
+    exportNames: readonly string[] | undefined;
+    file: string;
+  },
+): void {
+  if (collector === undefined) {
+    return;
+  }
+
+  for (const exportName of options.exportNames ?? ["*"]) {
+    const component = {
+      classification: "unknown",
+      exportName,
+      file: options.file,
+      origin: "unresolved-reference",
+    } satisfies ClientRouteComponent;
+    collector.components.set(
+      clientRouteComponentKey(component.file, component.exportName),
+      component,
+    );
+    markClientRouteComponentReachable(collector, component.file, [component.exportName]);
+  }
+}
+
+function collectClientRoutePendingExportValidation(
+  collector: ClientRouteComponentCollector | undefined,
+  options: ClientRoutePendingExportValidation,
+): void {
+  if (collector === undefined || options.exportNames.length === 0) {
+    return;
+  }
+
+  collector.pendingExportValidations.push(options);
+}
+
+function collectClientRouteStaticExportEdge(
+  collector: ClientRouteComponentCollector | undefined,
+  options: ClientRouteStaticExportEdge,
+): void {
+  collector?.staticExportEdges.push(options);
+}
+
+function finalizeClientRouteComponentExportValidations(
+  collector: ClientRouteComponentCollector | undefined,
+): ClientRouteInferenceDiagnostic[] {
+  if (collector === undefined) {
+    return [];
+  }
+
+  const exportNamesByFile = new Map<string, Set<string>>();
+  for (const [file, names] of collector.localExportNamesByFile) {
+    exportNamesByFile.set(file, new Set(names));
+  }
+
+  let changed = true;
+  while (changed) {
+    changed = false;
+
+    for (const edge of collector.staticExportEdges) {
+      const exportedNames = exportNamesByFile.get(edge.file) ?? new Set<string>();
+      const sourceNames = exportNamesByFile.get(edge.resolved) ?? new Set<string>();
+      const namesToAdd = edge.reference.exportAll
+        ? new Set([...sourceNames].filter((exportName) => exportName !== "default"))
+        : new Set(
+            edge.reference.specifiers
+              .filter((specifier) => sourceNames.has(specifier.localName))
+              .map((specifier) => specifier.exportedName),
+          );
+
+      for (const exportName of namesToAdd) {
+        if (!exportedNames.has(exportName)) {
+          exportedNames.add(exportName);
+          changed = true;
+        }
+      }
+
+      exportNamesByFile.set(edge.file, exportedNames);
+    }
+  }
+
+  const diagnostics: ClientRouteInferenceDiagnostic[] = [];
+  const seen = new Set<string>();
+  for (const pending of collector.pendingExportValidations) {
+    const availableExportNames = exportNamesByFile.get(pending.file) ?? new Set<string>();
+    const missingExportNames = pending.exportNames.filter(
+      (exportName) => !availableExportNames.has(exportName),
+    );
+    if (missingExportNames.length === 0) {
+      continue;
+    }
+
+    const key = `${pending.importer}\0${pending.source}\0${missingExportNames.join("\0")}`;
+    if (seen.has(key)) {
+      continue;
+    }
+    seen.add(key);
+    collectUnknownClientRouteComponents(collector, {
+      exportNames: missingExportNames,
+      file: pending.file,
+    });
+    diagnostics.push(
+      unresolvedClientRouteReferenceDiagnostic({
+        exportNames: missingExportNames,
+        filename: pending.importer,
+        source: pending.source,
+      }),
+    );
+  }
+
+  return diagnostics;
+}
+
 function isExplicitClientRouteSource(
   analysis: ClientRouteModuleAnalysis,
   filename: string,
@@ -687,33 +1152,49 @@ function hasServerOnlyImports(analysis: ClientRouteModuleAnalysis): boolean {
 async function inferClientRouteModuleSource(options: {
   cache: ClientRouteInferenceCache;
   code: string;
+  componentCollector?: ClientRouteComponentCollector | undefined;
   filename: string;
   moduleContext?: CompilerModuleContext | undefined;
   root: boolean;
+  routeEntry: boolean;
   seen: Set<string>;
   sourceTransform?: ClientRouteSourceTransform | undefined;
 }): Promise<ClientRouteModuleInferenceResult> {
   const analysis = await clientRouteModuleAnalysisForSource(options);
   const usesNavigationLinkLocal = detectLinkComponentUsage(analysis);
+  collectClientRouteComponentsForModule(options.componentCollector, {
+    analysis,
+    filename: options.filename,
+    root: options.root,
+    routeEntry: options.routeEntry,
+  });
+  const forcedInference = isServerOnlyClientRouteSource(analysis)
+    ? emptyClientRouteModuleInferenceResult({
+        availableExportNames: analysis.topLevelExportRenderInfo.map((info) => info.name),
+        navigationLinkExportNames: detectLinkComponentExportNames(analysis),
+        serverOnly: true,
+        serverOnlyClientRuntime: analysis.clientRuntime,
+        usesNavigationLink: usesNavigationLinkLocal,
+      })
+    : isExplicitClientRouteSource(analysis, options.filename)
+      ? emptyClientRouteModuleInferenceResult({
+          availableExportNames: analysis.topLevelExportRenderInfo.map((info) => info.name),
+          client: true,
+          clientBoundaryModule: true,
+        })
+      : undefined;
 
-  if (isServerOnlyClientRouteSource(analysis)) {
-    return emptyClientRouteModuleInferenceResult({
-      navigationLinkExportNames: detectLinkComponentExportNames(analysis),
-      serverOnly: true,
-      serverOnlyClientRuntime: analysis.clientRuntime,
-      usesNavigationLink: usesNavigationLinkLocal,
-    });
-  }
-
-  if (isExplicitClientRouteSource(analysis, options.filename)) {
-    return emptyClientRouteModuleInferenceResult({
-      client: true,
-      clientBoundaryModule: true,
-    });
+  if (forcedInference !== undefined && options.componentCollector === undefined) {
+    return forcedInference;
   }
 
   if (options.seen.has(options.filename)) {
-    return emptyClientRouteModuleInferenceResult();
+    return (
+      forcedInference ??
+      emptyClientRouteModuleInferenceResult({
+        availableExportNames: analysis.topLevelExportRenderInfo.map((info) => info.name),
+      })
+    );
   }
 
   options.seen.add(options.filename);
@@ -725,11 +1206,14 @@ async function inferClientRouteModuleSource(options: {
     const nestedClientExportNames = new Set<string>();
     const clientReferenceSourceFiles: string[] = [];
     const diagnostics: ClientRouteInferenceDiagnostic[] = [];
+    const availableExportNames = new Set(
+      analysis.topLevelExportRenderInfo.map((info) => info.name),
+    );
     let boundaryGraphFallbackRequired = false;
     let clientProxy = false;
     let nestedClient = false;
     let usesNavigationLink = usesNavigationLinkLocal;
-    const navigationLinkExportNames = new Set<string>(detectLinkComponentExportNames(analysis));
+    const navigationLinkExportNames = new Set(detectLinkComponentExportNames(analysis));
     const exportInfo = analysis.topLevelExportRenderInfo;
     const implicitModuleClient = exportInfo.length === 0 && analysis.clientRuntime;
     for (const info of exportInfo) {
@@ -739,9 +1223,12 @@ async function inferClientRouteModuleSource(options: {
     }
     if (
       hasServerOnlyImports(analysis) &&
-      (implicitModuleClient || clientBoundaryExportNames.size > 0)
+      (implicitModuleClient || clientBoundaryExportNames.size > 0) &&
+      options.componentCollector === undefined
     ) {
       return emptyClientRouteModuleInferenceResult({
+        availableExportNames: Array.from(availableExportNames),
+        navigationLinkExportNames: detectLinkComponentExportNames(analysis),
         serverOnly: true,
         serverOnlyClientRuntime: true,
       });
@@ -774,17 +1261,67 @@ async function inferClientRouteModuleSource(options: {
         continue;
       }
 
+      const renderingExportNames = rendered ? renderedLocalExportNames(reference, exportInfo) : [];
+      const renderedImportedNames = rendered
+        ? renderedImportedExportNames(reference, renderedComponentRoots)
+        : [];
+      const renderedFromReachableExport =
+        rendered &&
+        renderingExportNames.some((exportName) =>
+          isClientRouteComponentReachable(options.componentCollector, options.filename, exportName),
+        );
       const resolved = await resolveAppLocalModule({
         allowExplicitNonSource: options.sourceTransform !== undefined,
         cache: options.cache,
         importer: options.filename,
         specifier: reference.source,
+        tolerateUnresolved: options.componentCollector !== undefined,
       });
 
       if (resolved === undefined) {
+        if (
+          options.componentCollector !== undefined &&
+          renderedFromReachableExport &&
+          reference.source.startsWith(".")
+        ) {
+          collectUnknownClientRouteComponents(options.componentCollector, {
+            exportNames: renderedImportedNames,
+            file: resolve(dirname(options.filename), reference.source),
+          });
+          diagnostics.push(
+            unresolvedClientRouteReferenceDiagnostic({
+              filename: options.filename,
+              source: reference.source,
+            }),
+          );
+        }
         continue;
       }
 
+      if (renderedFromReachableExport) {
+        const clientExecution = renderingExportNames.some((exportName) =>
+          clientRouteComponentRunsOnClient(
+            options.componentCollector,
+            options.filename,
+            exportName,
+          ),
+        );
+        markClientRouteComponentReachable(
+          options.componentCollector,
+          resolved,
+          renderedImportedNames,
+          { clientExecution },
+        );
+        if (renderedImportedNames !== undefined) {
+          collectClientRoutePendingExportValidation(options.componentCollector, {
+            exportNames: renderedImportedNames,
+            file: resolved,
+            importer: options.filename,
+            source: reference.source,
+          });
+        }
+      }
+
       const source = await readClientRouteSource({
         cache: options.cache,
         filename: resolved,
@@ -793,6 +1330,7 @@ async function inferClientRouteModuleSource(options: {
       const imported = await inferClientRouteModuleSource({
         cache: options.cache,
         code: source,
+        componentCollector: options.componentCollector,
         filename: resolved,
         moduleContext: await compilerModuleContextForSource({
           cache: options.cache,
@@ -800,6 +1338,7 @@ async function inferClientRouteModuleSource(options: {
           filename: resolved,
         }),
         root: false,
+        routeEntry: false,
         seen: options.seen,
         sourceTransform: options.sourceTransform,
       });
@@ -843,8 +1382,8 @@ async function inferClientRouteModuleSource(options: {
       }
 
       if (rendered) {
-        const importedExportNames = renderedImportedExportNames(reference, renderedComponentRoots);
-        const renderedExportNames = renderedLocalExportNames(reference, exportInfo);
+        const importedExportNames = renderedImportedNames;
+        const renderedExportNames = renderingExportNames;
         const importedBoundary =
           imported.clientBoundaryModule ||
           matchesInferredExportNames(importedExportNames, imported.clientBoundaryExportNames);
@@ -907,12 +1446,33 @@ async function inferClientRouteModuleSource(options: {
           cache: options.cache,
           importer: options.filename,
           specifier: reference.source,
+          tolerateUnresolved: options.componentCollector !== undefined,
         });
 
         if (resolved === undefined) {
+          if (options.componentCollector !== undefined) {
+            diagnostics.push(
+              unresolvedClientRouteReferenceDiagnostic({
+                filename: options.filename,
+                source: reference.source,
+              }),
+            );
+          }
           continue;
         }
 
+        propagateClientRouteComponentStaticExport(
+          options.componentCollector,
+          options.filename,
+          resolved,
+          reference,
+        );
+        collectClientRouteStaticExportEdge(options.componentCollector, {
+          file: options.filename,
+          reference,
+          resolved,
+        });
+
         const source = await readClientRouteSource({
           cache: options.cache,
           filename: resolved,
@@ -921,6 +1481,7 @@ async function inferClientRouteModuleSource(options: {
         const exported = await inferClientRouteModuleSource({
           cache: options.cache,
           code: source,
+          componentCollector: options.componentCollector,
           filename: resolved,
           moduleContext: await compilerModuleContextForSource({
             cache: options.cache,
@@ -928,10 +1489,23 @@ async function inferClientRouteModuleSource(options: {
             filename: resolved,
           }),
           root: false,
+          routeEntry: false,
           seen: options.seen,
           sourceTransform: options.sourceTransform,
         });
         diagnostics.push(...exported.diagnostics);
+        if (reference.exportAll) {
+          for (const exportName of exported.availableExportNames) {
+            availableExportNames.add(exportName);
+          }
+        } else {
+          for (const specifier of reference.specifiers) {
+            availableExportNames.add(specifier.exportedName);
+          }
+          for (const exportName of reference.exportedNames) {
+            availableExportNames.add(exportName);
+          }
+        }
         // A re-export renders nothing itself, so it does not set the module's
         // own `usesNavigationLink`; it only forwards per-export `Link` usage so
         // an importer that renders this name can decide precisely. Map the
@@ -973,7 +1547,8 @@ async function inferClientRouteModuleSource(options: {
       }
     }
 
-    return {
+    const inferred = {
+      availableExportNames: Array.from(availableExportNames),
       boundaryGraphFallbackCandidate:
         analysis.staticExports.length > 0 || boundaryGraphFallbackRequired,
       boundaryGraphFallbackRequired,
@@ -995,6 +1570,15 @@ async function inferClientRouteModuleSource(options: {
       serverOnlyClientRuntime: false,
       usesNavigationLink,
     };
+    return forcedInference === undefined
+      ? inferred
+      : {
+          ...forcedInference,
+          availableExportNames: inferred.availableExportNames,
+          diagnostics,
+          navigationLinkExportNames: inferred.navigationLinkExportNames,
+          usesNavigationLink: inferred.usesNavigationLink,
+        };
   } finally {
     options.seen.delete(options.filename);
   }
@@ -1004,6 +1588,7 @@ function emptyClientRouteModuleInferenceResult(
   overrides: Partial<ClientRouteModuleInferenceResult> = {},
 ): ClientRouteModuleInferenceResult {
   return {
+    availableExportNames: [],
     boundaryGraphFallbackCandidate: false,
     boundaryGraphFallbackRequired: false,
     client: false,
@@ -1425,7 +2010,7 @@ function removeSafeCallbackHandlerAttributes(
 
 function matchingBraceEnd(source: string, openBraceIndex: number): number | undefined {
   let depth = 0;
-  let quote: "\"" | "'" | "`" | undefined;
+  let quote: '"' | "'" | "`" | undefined;
   let escaped = false;
 
   for (let index = openBraceIndex; index < source.length; index += 1) {
@@ -1442,7 +2027,7 @@ function matchingBraceEnd(source: string, openBraceIndex: number): number | unde
       continue;
     }
 
-    if (char === "\"" || char === "'" || char === "`") {
+    if (char === '"' || char === "'" || char === "`") {
       quote = char;
       continue;
     }
@@ -1491,9 +2076,7 @@ function destructuredPropsCallbackNames(source: string): Set<string> {
     addDestructuredCallbackNames(names, match[1] ?? "");
   }
 
-  for (const match of source.matchAll(
-    /\{[^{}]*:\s*\{([^{}]+)\}\s*(?:=\s*\{\})?[^{}]*\}/gu,
-  )) {
+  for (const match of source.matchAll(/\{[^{}]*:\s*\{([^{}]+)\}\s*(?:=\s*\{\})?[^{}]*\}/gu)) {
     addDestructuredCallbackNames(names, match[1] ?? "");
   }
 
@@ -1531,10 +2114,7 @@ function addDestructuredCallbackNames(names: Set<string>, destructured: string):
     const alias = destructuredBindingName(rawAlias);
     const name = alias ?? property;
 
-    if (
-      name !== undefined &&
-      (isCallbackPropName(property) || isCallbackPropName(name))
-    ) {
+    if (name !== undefined && (isCallbackPropName(property) || isCallbackPropName(name))) {
       names.add(name);
     }
   }
@@ -1623,6 +2203,28 @@ function serverOnlyClientImportReferenceDiagnostic(options: {
   };
 }
 
+function unresolvedClientRouteReferenceDiagnostic(options: {
+  exportNames?: readonly string[] | undefined;
+  filename: string;
+  source: string;
+}): ClientRouteInferenceDiagnostic {
+  const exportSuffix =
+    options.exportNames === undefined || options.exportNames.length === 0
+      ? ""
+      : ` (${options.exportNames.map((name) => JSON.stringify(name)).join(", ")})`;
+
+  return {
+    code: "MR_CLIENT_BOUNDARY_INFERENCE_UNRESOLVED_REFERENCE",
+    filename: options.filename,
+    level: "warn",
+    localNames: [...(options.exportNames ?? [])],
+    message:
+      `${options.filename}: rendered component reference ${JSON.stringify(options.source)}${exportSuffix} ` +
+      "could not be resolved to an exported component.",
+    source: options.source,
+  };
+}
+
 function functionCallInteractiveImportDiagnostic(options: {
   filename: string;
   reference: StaticImportReference;
@@ -1718,6 +2320,7 @@ async function resolveAppLocalModule(options: {
   cache: ClientRouteInferenceCache;
   importer: string;
   specifier: string;
+  tolerateUnresolved?: boolean | undefined;
 }): Promise<string | undefined> {
   if (!options.specifier.startsWith(".")) {
     return undefined;
@@ -1725,7 +2328,7 @@ async function resolveAppLocalModule(options: {
 
   const cacheKey = `${options.importer}\0${options.specifier}\0${
     options.allowExplicitNonSource === true ? "explicit" : "source"
-  }`;
+  }\0${options.tolerateUnresolved === true ? "tolerant" : "strict"}`;
   const cached = options.cache.resolvedByImport.get(cacheKey);
 
   if (cached !== undefined) {
@@ -1736,6 +2339,7 @@ async function resolveAppLocalModule(options: {
     allowExplicitNonSource: options.allowExplicitNonSource === true,
     importer: options.importer,
     specifier: options.specifier,
+    tolerateUnresolved: options.tolerateUnresolved === true,
   });
   options.cache.resolvedByImport.set(cacheKey, resolved);
   return resolved;
@@ -1745,6 +2349,7 @@ async function resolveAppLocalModuleUncached(options: {
   allowExplicitNonSource: boolean;
   importer: string;
   specifier: string;
+  tolerateUnresolved: boolean;
 }): Promise<string | undefined> {
   const { importer, specifier } = options;
   const base = join(dirname(importer), specifier);
@@ -1764,6 +2369,10 @@ async function resolveAppLocalModuleUncached(options: {
     }
   }
 
+  if (options.tolerateUnresolved) {
+    return undefined;
+  }
+
   throw new Error(`${importer}: could not resolve app-local import ${JSON.stringify(specifier)}.`);
 }
 
@@ -2104,6 +2713,13 @@ export async function buildClientRouteOutput(
   const entry = await buildClientRouteEntrySource(options);
   const dropConsoleFunctions =
     options.dropConsoleFunctions ?? resolveClientConsolePureFunctions(options.dropClientConsole);
+  const sourceRegionModulePaths =
+    options.debugLabels === true ? undefined : new Set([options.filename]);
+  const runtimePlugin = workspaceRuntimePlugin({
+    debugLabels: options.debugLabels === true,
+    routeFiles: [options.filename],
+    sourceRegionModulePaths,
+  });
   const bundled = await bundleRouterModule({
     code: entry.code,
     cacheDir: options.cacheDir,
@@ -2115,7 +2731,8 @@ export async function buildClientRouteOutput(
     minify: options.minify === true,
     platform: "browser",
     preserveExports: true,
-    plugins: [workspaceRuntimePlugin({ routeFiles: [options.filename] })],
+    sourceRegionModulePaths,
+    plugins: [runtimePlugin],
     sourceMap: options.sourceMap,
     vitePlugins: options.vitePlugins,
   });
@@ -2149,6 +2766,15 @@ export async function buildClientRouteBatchOutput(options: {
       }),
     })),
   );
+  const debugLabels = options.routes.some((route) => route.debugLabels === true);
+  const sourceRegionModulePaths = debugLabels
+    ? undefined
+    : new Set(entries.map((entry) => entry.filename));
+  const runtimePlugin = workspaceRuntimePlugin({
+    debugLabels,
+    routeFiles: entries.map((entry) => entry.filename),
+    sourceRegionModulePaths,
+  });
   const bundled = await bundleRouterModules({
     base: options.assetBaseUrl ?? "/_mreact/client/",
     cacheDir: options.cacheDir,
@@ -2162,7 +2788,8 @@ export async function buildClientRouteBatchOutput(options: {
     })),
     minify: options.minify === true,
     platform: "browser",
-    plugins: [workspaceRuntimePlugin({ routeFiles: entries.map((entry) => entry.filename) })],
+    sourceRegionModulePaths,
+    plugins: [runtimePlugin],
     root: options.projectRoot,
     sourceMap: options.sourceMap,
     dropConsoleFunctions: options.dropConsoleFunctions,
@@ -2199,13 +2826,22 @@ export async function buildClientRouteEntrySource(
     filename: options.filename,
   });
   const routeSourceAnalysis = collectClientRouteModuleAnalysisFromContext(moduleContext);
+  const compilerFilename =
+    options.debugLabels === true ? basename(options.filename) : options.filename;
+  const compilerModuleContext =
+    compilerFilename === options.filename
+      ? moduleContext
+      : createCompilerModuleContext({
+          code: options.code,
+          filename: compilerFilename,
+        });
   const compiled = transformCompilerModuleContext({
     code: options.code,
     clientBoundaryImports: options.clientBoundaryImports ?? [],
-    filename: options.filename,
-    moduleContext,
+    filename: compilerFilename,
+    moduleContext: compilerModuleContext,
     target: "client",
-    dev: options.minify !== true,
+    dev: options.debugLabels === true,
   });
 
   if (compiled.diagnostics.length > 0) {
@@ -2238,7 +2874,11 @@ export async function buildClientRouteEntrySource(
   const routeId = routeIdForPath(options.routePath);
   const routeUsesCells = detectRouteCellStateHint(compiled.code);
   const routeUsesReactiveEffect = detectRouteReactiveEffectHint(compiled.code);
-  const routeUsesCleanupScope = routeUsesCells || routeUsesReactiveEffect;
+  const routeUsesDomRefs = compiled.metadata.imports.some(
+    (entry) =>
+      entry.source === "@reckona/mreact-reactive-dom" && entry.specifiers.includes("bindDomRef"),
+  );
+  const routeUsesCleanupScope = routeUsesCells || routeUsesReactiveEffect || routeUsesDomRefs;
   const routeExplicitlyRequiresHydration = isExplicitClientRouteSource(
     routeSourceAnalysis,
     options.filename,
@@ -2254,6 +2894,7 @@ export async function buildClientRouteEntrySource(
     routeExplicitlyRequiresHydration ||
     routeUsesCells ||
     routeUsesReactiveEffect ||
+    routeUsesDomRefs ||
     routeHasEventBindings;
   const routeUsesOnlyClientReferenceBoundaries =
     !routeRequiresFullHydration &&
@@ -2276,7 +2917,7 @@ export async function buildClientRouteEntrySource(
     ? `import { bindCapturedEvent as __mreactBindCapturedEvent } from "@reckona/mreact-reactive-dom/internal";\n`
     : "";
   const routeReactiveDomMetadataImport = !routeUsesOnlyClientReferenceBoundaries
-    ? `${routeCapturedEventImport}import { withEventBindingMetadata as __mreactWithEventBindingMetadata, withPropBindingMetadata as __mreactWithPropBindingMetadata } from "@reckona/mreact-reactive-dom";\n`
+    ? `${routeCapturedEventImport}import { ${routeUsesDomRefs ? "getDomRefBindings as __mreactGetDomRefBindings, " : ""}withEventBindingMetadata as __mreactWithEventBindingMetadata, withPropBindingMetadata as __mreactWithPropBindingMetadata } from "@reckona/mreact-reactive-dom";\n`
     : "";
   const navigationStateDeclaration = inlineClientNavigation
     ? `const __mreactNavigationState = __mreactGlobal.__mreactNavigationState ??= {
@@ -2552,9 +3193,10 @@ __mreactGlobal.__mreactRouteCell = (nativeCell, initial) => {
       __mreactActiveCellIndex = 0;
     }
     return () => {
-      for (const __mreactDispose of Array.from(__mreactRouteEffectDisposers)) {
-        __mreactDispose();
-      }
+      __mreactRunLifecycleTasks(
+        Array.from(__mreactRouteEffectDisposers),
+        (__mreactDispose) => __mreactDispose(),
+      );
       __mreactRouteEffectDisposers.clear();
     };
   });
@@ -2566,13 +3208,33 @@ __mreactGlobal.__mreactRouteCell = (nativeCell, initial) => {
       ? `  __mreactDisposeRoute(__mreactRouteId);
   const __mreactRouteEffectDisposers = new Set();
   __mreactRouteDisposers.set(__mreactRouteId, () => {
-    for (const __mreactDispose of Array.from(__mreactRouteEffectDisposers)) {
-      __mreactDispose();
-    }
+    __mreactRunLifecycleTasks(
+      Array.from(__mreactRouteEffectDisposers),
+      (__mreactDispose) => __mreactDispose(),
+    );
     __mreactRouteEffectDisposers.clear();
   });
 `
       : "";
+  const routeLifecycleFunctions = `
+function __mreactRunLifecycleTasks(values, run) {
+  let firstError;
+
+  for (const value of values) {
+    try {
+      run(value);
+    } catch (error) {
+      firstError ??= error;
+    }
+  }
+
+  if (firstError !== undefined) {
+    queueMicrotask(() => {
+      throw firstError;
+    });
+  }
+}
+`;
   const routeCellDropFunction = routeUsesCells
     ? `
 function __mreactDropMismatchedRouteState(previousState, nextState) {
@@ -2598,12 +3260,18 @@ function __mreactDisposeRoute(routeId) {
 }
 `
     : "";
-  const routeCleanupNavigationDispose = routeUsesCleanupScope
-    ? `  if (currentRouteId !== nextRouteId) {
-    __mreactDisposeRoute(currentRouteId);
+  const routeCleanupNavigationDispose = `  if (currentRouteId !== nextRouteId) {
+    const __mreactRegisteredRouteDisposers = __mreactGlobal.__mreactRouteDisposers;
+    const __mreactRegisteredRouteDispose = __mreactRegisteredRouteDisposers?.get(currentRouteId);
+    if (__mreactRegisteredRouteDispose !== undefined) {
+      __mreactRegisteredRouteDisposers.delete(currentRouteId);
+      __mreactRunLifecycleTasks(
+        [__mreactRegisteredRouteDispose],
+        (__mreactDispose) => __mreactDispose(),
+      );
+    }
   }
-`
-    : "";
+`;
   const routeNodeResolver = routeUsesCells
     ? `
 function __mreactResolveRouteNode(value) {
@@ -2642,9 +3310,7 @@ function __mreactResolveRouteNode(value) {
   const previousDisposers = current.__mreactEventDisposers;
 
   if (Array.isArray(previousDisposers)) {
-    for (const dispose of previousDisposers) {
-      dispose();
-    }
+    __mreactRunLifecycleTasks(previousDisposers, (dispose) => dispose());
   }
 
   const rawBindings = next.__mreactEventBindings;
@@ -2673,14 +3339,26 @@ function __mreactResolveRouteNode(value) {
   const previousDisposers = current.__mreactEventDisposers;
 
   if (Array.isArray(previousDisposers)) {
-    for (const dispose of previousDisposers) {
-      dispose();
-    }
+    __mreactRunLifecycleTasks(previousDisposers, (dispose) => dispose());
   }
 
   current.__mreactEventDisposers = [];
   current.__mreactHasEvents = false;
 }
+`;
+  const routeDomRefBindingSyncFunction = routeUsesDomRefs
+    ? `function __mreactSyncDomRefBindings(current, next) {
+  __mreactRunLifecycleTasks(
+    Array.from(__mreactGetDomRefBindings(current)),
+    (binding) => binding.dispose(),
+  );
+  __mreactRunLifecycleTasks(
+    Array.from(__mreactGetDomRefBindings(next)),
+    (binding) => binding.retarget(current),
+  );
+}
+`
+    : `function __mreactSyncDomRefBindings() {}
 `;
   const boundaryOnlyHydrationBlock = routeRequiresFullHydration
     ? ""
@@ -2740,6 +3418,7 @@ ${routeCellHydrationIndent}__mreactMarker.setAttribute(__mreactRouteHydratedAttr
 ${routeCellHydrationIndent}__mreactMarkRouteHydrated();
 ${routeCellHydrationEnd}}
 ${routeCellDropFunction}
+${routeLifecycleFunctions}
 ${routeCleanupFunction}
 
 function __mreactMarkRouteHydrated() {
@@ -3327,13 +4006,14 @@ function __mreactApplyNavigationHtml(html, url) {
   const currentRouteId = currentMarker.getAttribute("${routeHydrationContract.routeMarkerAttribute}");
   const nextRouteId = nextMarker.getAttribute("${routeHydrationContract.routeMarkerAttribute}");
 
+${routeCleanupNavigationDispose}
   __mreactMarkRouteHydrating();
   __mreactSyncHeadMetadata(template.content, html);
   if (!__mreactApplyNavigationShellHtml(currentMarker, nextMarker)) {
     __mreactUnmountCompatBoundaries(currentMarker);
     __mreactResumeNode(currentMarker, nextMarker);
   }
-${routeCleanupNavigationDispose}  __mreactSyncRouteDataScripts(template.content, currentRouteId, nextRouteId);
+  __mreactSyncRouteDataScripts(template.content, currentRouteId, nextRouteId);
 
   const script = template.content.querySelector('script[type="module"][src]')?.getAttribute("src");
   if (script !== null && script !== undefined) {
@@ -4491,6 +5171,7 @@ function __mreactResumeNode(current, next) {
   }
 
   __mreactSyncEventBindings(current, next);
+  __mreactSyncDomRefBindings(current, next);
   __mreactSyncAttributes(current, next);
   __mreactSyncPropBindings(current, next);
   __mreactResumeChildren(current, next);
@@ -4513,6 +5194,7 @@ function __mreactShouldReplaceNode(current, next) {
 }
 
 ${routeEventBindingSyncFunction}
+${routeDomRefBindingSyncFunction}
 
 function __mreactSyncAttributes(current, next) {
   for (const attribute of Array.from(current.attributes)) {
@@ -4532,9 +5214,7 @@ function __mreactSyncPropBindings(current, next) {
   const previousBindings = current.__mreactPropBindings;
 
   if (Array.isArray(previousBindings)) {
-    for (const binding of previousBindings) {
-      binding.dispose?.();
-    }
+    __mreactRunLifecycleTasks(previousBindings, (binding) => binding.dispose?.());
   }
 
   const bindings = next.__mreactPropBindings;
@@ -4550,9 +5230,7 @@ function __mreactSyncPropBindings(current, next) {
   next.__mreactPropBindings = [];
   next.__mreactHasReactiveProps = false;
 
-  for (const binding of bindings) {
-    binding.retarget?.(current);
-  }
+  __mreactRunLifecycleTasks(bindings, (binding) => binding.retarget?.(current));
 }
 
 function __mreactResumeChildren(current, next) {
@@ -4605,7 +5283,11 @@ function __mreactResumeChildren(current, next) {
   };
 }
 
-function workspaceRuntimePlugin(options: { routeFiles: readonly string[] }) {
+function workspaceRuntimePlugin(options: {
+  debugLabels: boolean;
+  routeFiles: readonly string[];
+  sourceRegionModulePaths?: Set<string> | undefined;
+}) {
   const routeFiles = new Set(options.routeFiles);
   const packageFile = (monorepoDir: string, packageName: string, entry: string): string =>
     workspacePackageFile({
@@ -4733,15 +5415,31 @@ export function invalidateReactiveDevtoolsCache() {}
 export function prepareReactiveEffectRunDevtoolsEvent() { return undefined; }`,
         loader: "ts",
       }));
+      if (options.sourceRegionModulePaths !== undefined) {
+        buildApi.onLoad({ filter: /.*/ }, (args) => {
+          if (
+            isAbsolute(args.path) &&
+            isRouteClientDependencySourcePath(args.path, routeFiles) &&
+            !runtimePackageDirs.some((runtimePackageDir) =>
+              args.path.startsWith(`${runtimePackageDir}${sep}`),
+            )
+          ) {
+            options.sourceRegionModulePaths?.add(args.path);
+          }
+
+          return undefined;
+        });
+      }
       buildApi.onLoad({ filter: /\.(?:mreact\.)?[cm]?[jt]sx$/ }, async (args) => {
         if (!isRouteClientDependencySourcePath(args.path, routeFiles)) {
           return undefined;
         }
 
         const source = await readFile(args.path, "utf8");
+        const compilerFilename = options.debugLabels ? basename(args.path) : args.path;
         const moduleContext = createCompilerModuleContext({
           code: source,
-          filename: args.path,
+          filename: compilerFilename,
         });
 
         if (!hasJsxSyntax(moduleContext.program)) {
@@ -4750,8 +5448,8 @@ export function prepareReactiveEffectRunDevtoolsEvent() { return undefined; }`,
 
         const output = transformCompilerModuleContext({
           code: source,
-          dev: true,
-          filename: args.path,
+          dev: options.debugLabels,
+          filename: compilerFilename,
           mode: isCompatSourcePath(args.path) ? "compat" : "reactive",
           moduleContext,
           target: "client",