@reckona/mreact-router 0.0.208 → 0.0.210

package/src/client.ts

@@ -26,6 +26,7 @@ import {
   type CompilerModuleContext,
 } from "@reckona/mreact-compiler/internal";
 import { assetPath } from "./assets.js";
+import { reactiveDevtoolsStubSource } from "./reactive-devtools-stub.js";
 import {
   bundleRouterModule,
   bundleRouterModules,
@@ -53,6 +54,7 @@ const nodeBuiltinPackages = new Set(builtinModules.flatMap((name) => [name, `nod
 export interface ClientRouteManifestEntry {
   bytes?: number;
   css?: readonly string[];
+  dynamicImports?: readonly string[];
   path: string;
   kind: AppRoute["kind"];
   client: boolean;
@@ -842,14 +844,14 @@ function clientRouteComponentOrigin(options: {
     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 (options.analysis.hasUseClientDirective) {
+    return "use-client-directive";
+  }
+
   if (/\.client(?:\.mreact)?\.[cm]?[jt]sx?$/.test(options.filename)) {
     return "client-filename";
   }
@@ -3491,7 +3493,18 @@ ${routeOutOfOrderFragmentHydration}  const __mreactMarker = document.querySelect
   const __mreactProps = __mreactPropsText === undefined
     ? {}
     : JSON.parse(__mreactPropsText);
-${restoreRequestUrl ? "  if (__mreactProps.request) __mreactProps.request.url = document.URL;\n" : ""}
+${
+  restoreRequestUrl
+    ? `  if (__mreactProps.request) {
+    const __mreactRouteUrl = new URL(document.URL);
+    __mreactProps.request.url = __mreactRouteUrl.href;
+    __mreactProps.request.pathname = __mreactRouteUrl.pathname;
+    __mreactProps.request.search = __mreactRouteUrl.search;
+    __mreactProps.request.hash = __mreactRouteUrl.hash;
+  }
+`
+    : ""
+}
   const __mreactClientReferences = __mreactClientReferencesElement?.textContent === undefined
     ? []
     : JSON.parse(__mreactClientReferencesElement.textContent);
@@ -5528,13 +5541,7 @@ export function cell(initial) {
         resolveDir: reactiveCoreDir,
       }));
       buildApi.onLoad({ filter: /^devtools$/, namespace: "mreact-devtools-stub" }, () => ({
-        contents: `export function emitReactiveDevtoolsEvent() {}
-export function emitReactiveEffectRunDevtoolsEvent() {}
-export function hasReactiveDevtoolsEmitter() { return false; }
-export function currentDevtoolsEmitter() { return undefined; }
-export function currentReactiveDevtools() { return undefined; }
-export function invalidateReactiveDevtoolsCache() {}
-export function prepareReactiveEffectRunDevtoolsEvent() { return undefined; }`,
+        contents: reactiveDevtoolsStubSource,
         loader: "ts",
       }));
       if (options.sourceRegionModulePaths !== undefined) {

package/src/config.ts

@@ -32,6 +32,12 @@ export interface AppRouterProductionOptions {
   dropClientConsole?: boolean | readonly AppRouterClientConsoleMethod[] | undefined;
 }
 
+/** Opt-in compile-time constraints for route and component execution modes. */
+export interface AppRouterExecutionContracts {
+  noCompatComponents?: readonly string[] | undefined;
+  serverOnlyRoutes?: readonly string[] | undefined;
+}
+
 export interface AppRouterProjectOptions {
   assetBaseUrl?: string | undefined;
   buildConcurrency?: number | undefined;
@@ -39,6 +45,7 @@ export interface AppRouterProjectOptions {
   clientSourceMaps?: AppRouterClientSourceMapOption | undefined;
   /** Project-local server module exporting a named `dehydrateOptions` policy. */
   dehydratePolicyModule?: string | undefined;
+  executionContracts?: AppRouterExecutionContracts | undefined;
   /**
    * Legacy route root. When provided without routesDir/projectRoot, this keeps
    * the historical "appDir is the whole app boundary" behavior.
@@ -64,6 +71,7 @@ export interface ResolvedAppRouterProject {
   clientSourceMaps: AppRouterClientSourceMapMode;
   clientConsolePureFunctions?: readonly string[] | undefined;
   dehydratePolicyModule?: string | undefined;
+  executionContracts?: AppRouterExecutionContracts | undefined;
   projectRoot: string;
   publicAssetBaseUrl?: string | undefined;
   publicDir: string;
@@ -105,6 +113,9 @@ export function resolveAppRouterProjectOptions(
               allowedSourceDirs,
             ),
           }),
+      ...(options.executionContracts === undefined
+        ? {}
+        : { executionContracts: normalizeExecutionContracts(options.executionContracts) }),
       projectRoot: appDir,
       ...(options.publicAssetBaseUrl === undefined
         ? {}
@@ -140,6 +151,9 @@ export function resolveAppRouterProjectOptions(
             allowedSourceDirs,
           ),
         }),
+    ...(options.executionContracts === undefined
+      ? {}
+      : { executionContracts: normalizeExecutionContracts(options.executionContracts) }),
     projectRoot,
     ...(options.publicAssetBaseUrl === undefined
       ? {}
@@ -149,6 +163,24 @@ export function resolveAppRouterProjectOptions(
   };
 }
 
+function normalizeExecutionContracts(
+  contracts: AppRouterExecutionContracts,
+): AppRouterExecutionContracts {
+  const noCompatComponents = uniquePatterns(contracts.noCompatComponents);
+  const serverOnlyRoutes = uniquePatterns(contracts.serverOnlyRoutes);
+
+  return {
+    ...(noCompatComponents.length === 0 ? {} : { noCompatComponents }),
+    ...(serverOnlyRoutes.length === 0 ? {} : { serverOnlyRoutes }),
+  };
+}
+
+function uniquePatterns(patterns: readonly string[] | undefined): string[] {
+  return [...new Set((patterns ?? []).filter((pattern) => pattern.length > 0))].sort(
+    (left, right) => left.localeCompare(right),
+  );
+}
+
 function resolvePolicyModule(
   projectRoot: string,
   modulePath: string,

package/src/index.ts

@@ -5,13 +5,20 @@ export {
   createBoundaryReport,
   formatBoundaryReport,
   formatBoundaryReportJson,
+  validateBoundaryExecutionContracts,
 } from "./boundaries.js";
 export type {
   AnalyzeAppBoundariesOptions,
+  BoundaryExecutionMode,
+  BoundaryReportByteCost,
   BoundaryReport,
   BoundaryReportComponent,
+  BoundaryReportCost,
+  BoundaryReportDecision,
   BoundaryReportRoute,
   BoundaryReportSummary,
+  BoundarySourcePosition,
+  BoundarySourceRange,
   CreateBoundaryReportInput,
   CreateBoundaryReportRouteInput,
 } from "./boundaries.js";
@@ -142,6 +149,7 @@ export async function rotateSession<TData>(
 export type {
   AwsLambdaArtifactManifest,
   AwsLambdaGeneratedHandlerPreloadMode,
+  BoundaryCostOptions,
   BuildAppPhase,
   BuildAppPhaseTiming,
   BuildAppOptions,
@@ -195,6 +203,7 @@ export type {
   RobotsRule,
   RouteHeadDescriptor,
   RouteHandlerContext,
+  RouteLocation,
   RouteLoader,
   RouteMetadata,
   RouteParams,
@@ -208,6 +217,7 @@ export type {
   AppRouterClientConsoleMethod,
   AppRouterClientSourceMapMode,
   AppRouterClientSourceMapOption,
+  AppRouterExecutionContracts,
   AppRouterProductionOptions,
 } from "./config.js";
 export type {

package/src/reactive-devtools-stub.ts

@@ -0,0 +1,9 @@
+/** Shared by the Vite dev server and production client bundler. */
+export const reactiveDevtoolsStubSource = `export function emitReactiveDevtoolsEvent() {}
+export function emitReactiveEffectRunDevtoolsEvent() {}
+export function hasReactiveDevtoolsEmitter() { return false; }
+export function currentDevtoolsEmitter() { return undefined; }
+export function currentReactiveDevtools() { return undefined; }
+export function registerReactiveDevtoolsResource() { return { dispose() {}, update() {} }; }
+export function invalidateReactiveDevtoolsCache() {}
+export function prepareReactiveEffectRunDevtoolsEvent() { return undefined; }`;

package/src/render.ts

@@ -64,7 +64,11 @@ import {
 } from "./cache.js";
 import {
   trackRequestHeaderReads,
+  routeLocationFromRequest,
+  routeLocationForHydration,
+  routeLocationFromUrl,
   type TrackedHeaderRequest,
+  withTrackedRouteLocation,
   withTrackedRequest,
 } from "./request-header-tracking.js";
 import { configuredHstsHeader, hasInvalidConfiguredHsts } from "./security-headers.js";
@@ -108,6 +112,7 @@ import { viteDefineCacheKey, vitePluginsCacheKey } from "./vite-plugin-cache-key
 import type {
   ManifestDescriptor,
   RobotsManifest,
+  RouteLocation,
   RouteParams,
   RouteMetadata,
   SitemapEntry,
@@ -543,7 +548,7 @@ interface ServerComponentProps {
   data: unknown;
   params: RouteParams;
   queryClient: QueryClient;
-  request: Request;
+  request: RouteLocation;
 }
 
 type ServerComponent = (props: ServerComponentProps) => string | PromiseLike<string>;
@@ -1185,7 +1190,7 @@ async function renderAppRequestInternal(
           clientRoute,
           props: {
             params: matched.params,
-            request: { url: url.pathname },
+            request: routeLocationForHydration(url),
           },
           routePath: matched.route.path,
           script: clientScript,
@@ -1252,7 +1257,7 @@ async function renderAppRequestInternal(
             const renderedPage = await runWithQueryClient(queryClient, () =>
               runServerModuleWithSlots(
                 stringOutput.code,
-                withTrackedRequest(
+                withTrackedRouteLocation(
                   {
                     data,
                     params: matched.params,
@@ -1260,6 +1265,7 @@ async function renderAppRequestInternal(
                   },
                   appRequest,
                   trackedRequest,
+                  routeLocationFromUrl(url),
                 ),
                 matched.route.file,
                 options.serverModules,
@@ -1281,7 +1287,7 @@ async function renderAppRequestInternal(
                   script: clientScript,
                   props: {
                     params: matched.params,
-                    request: { url: url.pathname },
+                    request: routeLocationForHydration(url),
                     data,
                   },
                 })
@@ -1296,7 +1302,7 @@ async function renderAppRequestInternal(
                 appDir: options.appDir,
                 pageFile: matched.route.file,
                 html: pageHtmlForLayout,
-                props: withTrackedRequest(
+                props: withTrackedRouteLocation(
                   {
                     data,
                     params: matched.params,
@@ -1304,6 +1310,7 @@ async function renderAppRequestInternal(
                   },
                   appRequest,
                   trackedRequest,
+                  routeLocationFromUrl(url),
                 ),
                 slots: renderedPage.slots,
                 serverModules: options.serverModules,
@@ -1437,7 +1444,7 @@ async function renderAppRequestInternal(
               params: matched.params,
               queryClient,
               request: appRequest,
-              requestUrl: url.pathname,
+              requestUrl: url.href,
               trackedRequest,
               routePath: matched.route.path,
               routeScripts: options.clientScripts,
@@ -1470,7 +1477,7 @@ async function renderAppRequestInternal(
           }
 
           const data = streamData;
-          const props = withTrackedRequest(
+          const props = withTrackedRouteLocation(
             {
               data,
               params: matched.params,
@@ -1478,6 +1485,7 @@ async function renderAppRequestInternal(
             },
             appRequest,
             trackedRequest,
+            routeLocationFromUrl(url),
           );
           phaseStartedAt = renderTimingPhaseStartedAt(timing);
           const stream = runServerStreamModule(output.code, {
@@ -1487,7 +1495,7 @@ async function renderAppRequestInternal(
             markerRequest: options.request,
             prerenderVariantCapture: options.prerenderVariantCapture,
             props,
-            requestUrl: url.pathname,
+            requestUrl: url.href,
             routePath: matched.route.path,
             routeScripts: options.clientScripts,
             serverModules: options.serverModules,
@@ -1557,7 +1565,7 @@ async function renderAppRequestInternal(
         const renderedPage = await runWithQueryClient(queryClient, () =>
           runServerModuleWithSlots(
             output.code,
-            withTrackedRequest(
+            withTrackedRouteLocation(
               {
                 data,
                 params: matched.params,
@@ -1565,6 +1573,7 @@ async function renderAppRequestInternal(
               },
               appRequest,
               trackedRequest,
+              routeLocationFromUrl(url),
             ),
             matched.route.file,
             options.serverModules,
@@ -1592,7 +1601,7 @@ async function renderAppRequestInternal(
               script: clientScript,
               props: {
                 params: matched.params,
-                request: { url: url.pathname },
+                request: routeLocationForHydration(url),
                 data,
               },
             })
@@ -1608,7 +1617,7 @@ async function renderAppRequestInternal(
             appDir: options.appDir,
             pageFile: matched.route.file,
             html: pageHtmlForLayout,
-            props: withTrackedRequest(
+            props: withTrackedRouteLocation(
               {
                 data,
                 params: matched.params,
@@ -1616,6 +1625,7 @@ async function renderAppRequestInternal(
               },
               appRequest,
               trackedRequest,
+              routeLocationFromUrl(url),
             ),
             slots: renderedPage.slots,
             serverModules: options.serverModules,
@@ -2300,7 +2310,7 @@ function errorBoundaryProps(error: unknown, request: Request, routePath: string
     error: normalizeErrorForProps(error),
     params: {},
     queryClient: createQueryClient(),
-    request,
+    request: routeLocationFromRequest(request),
     requestId: requestIdForErrorContext(request),
     routeId: routeIdForPath(routePath ?? new URL(request.url).pathname),
     traceId: traceContextFromRequest(request)?.traceId,
@@ -3550,7 +3560,9 @@ function runServerStreamModule(
           script: options.script,
           props: {
             params: options.props.params,
-            request: { url: options.requestUrl },
+            request: routeLocationForHydration(
+              new URL(options.requestUrl, options.markerRequest.url),
+            ),
             data: options.props.data,
           },
         })
@@ -3797,7 +3809,7 @@ async function runServerStreamModuleWithLoading(
     importPolicy?: AppRouterImportPolicy | undefined;
   },
 ): Promise<ReadableStream<Uint8Array> | Response> {
-  const loadingProps = withTrackedRequest(
+  const loadingProps = withTrackedRouteLocation(
     {
       data: undefined,
       params: options.params,
@@ -3805,6 +3817,7 @@ async function runServerStreamModuleWithLoading(
     },
     options.request,
     options.trackedRequest,
+    routeLocationFromUrl(new URL(options.requestUrl)),
   );
   const layoutShells = await layoutShellsForPage(
     options.appDir,
@@ -3836,7 +3849,7 @@ async function runServerStreamModuleWithLoading(
         script: options.script,
         props: {
           params: options.params,
-          request: { url: options.requestUrl },
+          request: routeLocationForHydration(new URL(options.requestUrl)),
         },
       })
     : serverOnlyRouteMarkerParts(
@@ -3879,7 +3892,7 @@ async function runServerStreamModuleWithLoading(
         await appendServerStreamModule(
           code,
           boundarySink,
-          withTrackedRequest(
+          withTrackedRouteLocation(
             {
               data,
               params: options.params,
@@ -3887,6 +3900,7 @@ async function runServerStreamModuleWithLoading(
             },
             options.request,
             options.trackedRequest,
+            routeLocationFromUrl(new URL(options.requestUrl)),
           ),
           options.pageFile,
           options.serverModules,

package/src/request-header-tracking.ts

@@ -1,3 +1,5 @@
+import type { RouteLocation } from "./types.js";
+
 /**
  * Observes request inputs read by application code during a render.
  *
@@ -159,3 +161,62 @@ export function withTrackedRequest<T extends object>(
 
   return context;
 }
+
+/**
+ * Adds the serializable location view used by shared page and layout props.
+ * The full Request remains available to loaders, handlers, and metadata code.
+ */
+export function withTrackedRouteLocation<T extends object>(
+  values: T,
+  request: Request,
+  tracked: TrackedHeaderRequest | undefined,
+  location?: RouteLocation,
+): T & { request: RouteLocation } {
+  const context = values as T & { request: RouteLocation };
+  let currentLocation = location ?? routeLocationFromRequest(request);
+
+  Object.defineProperty(context, "request", {
+    configurable: true,
+    enumerable: true,
+    get() {
+      tracked?.markRequestAccess();
+      return currentLocation;
+    },
+    set(value: RouteLocation) {
+      tracked?.markRequestAccess();
+      currentLocation = value;
+    },
+  });
+
+  return context;
+}
+
+/** Returns the URL fields that are safe to serialize into route HTML. */
+export function routeLocationFromRequest(request: Request): RouteLocation {
+  return routeLocationFromUrl(new URL(request.url));
+}
+
+/** Returns a serializable route location from a URL without request metadata. */
+export function routeLocationFromUrl(url: URL): RouteLocation {
+  return {
+    hash: url.hash,
+    pathname: url.pathname,
+    search: url.search,
+    url: url.href,
+  };
+}
+
+/**
+ * Returns the route location placeholder embedded in cached HTML. The client
+ * hydration runtime replaces it with document.URL before invoking shared code.
+ * Query values stay out of reusable HTML because they can contain credentials
+ * or other request-specific data.
+ */
+export function routeLocationForHydration(url: URL): RouteLocation {
+  return {
+    hash: "",
+    pathname: url.pathname,
+    search: "",
+    url: url.pathname,
+  };
+}

package/src/tailwind-source.ts

@@ -14,7 +14,170 @@ export function prependTailwindSourceDirectives(options: {
     .map((sourceDir) => `${tailwindSourceDirective(cssDir, sourceDir)}\n`)
     .join("");
 
-  return directives.length === 0 ? options.code : `${directives}${options.code}`;
+  if (directives.length === 0) {
+    return options.code;
+  }
+
+  const insertionIndex = leadingCssPreludeEnd(options.code);
+  const prefix = options.code.slice(0, insertionIndex);
+  const suffix = options.code.slice(insertionIndex);
+  const lineEnding = suffix.startsWith("\r\n") ? "\r\n" : "\n";
+  const existingLineEnding = suffix.startsWith(lineEnding) ? lineEnding : "";
+  const separator = insertionIndex === 0 ? "" : existingLineEnding || lineEnding;
+  const formattedDirectives = directives.replaceAll("\n", lineEnding);
+  return `${prefix}${separator}${formattedDirectives}${suffix.slice(existingLineEnding.length)}`;
+}
+
+function leadingCssPreludeEnd(code: string): number {
+  let cursor = 0;
+  let lastRuleEnd = 0;
+
+  for (;;) {
+    cursor = skipCssTrivia(code, cursor);
+    const ruleEnd = consumeLeadingCssRule(code, cursor);
+    if (ruleEnd === undefined) {
+      return lastRuleEnd;
+    }
+
+    lastRuleEnd = ruleEnd;
+    cursor = ruleEnd;
+  }
+}
+
+function skipCssTrivia(code: string, start: number): number {
+  let cursor = start;
+  while (cursor < code.length) {
+    if (/\s/u.test(code[cursor] ?? "")) {
+      cursor += 1;
+      continue;
+    }
+
+    if (code.startsWith("/*", cursor)) {
+      const commentEnd = code.indexOf("*/", cursor + 2);
+      if (commentEnd < 0) {
+        return code.length;
+      }
+      cursor = commentEnd + 2;
+      continue;
+    }
+
+    break;
+  }
+
+  return cursor;
+}
+
+function consumeLeadingCssRule(code: string, start: number): number | undefined {
+  const match = /^@(charset|import|layer)(?=\s|[;{]|\/\*)/iu.exec(code.slice(start));
+  const ruleName = match?.[1]?.toLowerCase();
+  if (match === null || ruleName === undefined) {
+    return undefined;
+  }
+
+  let quote: '"' | "'" | undefined;
+  let parentheses = 0;
+  for (let cursor = start + match[0].length; cursor < code.length; cursor += 1) {
+    const character = code[cursor];
+    if (character === undefined) {
+      return undefined;
+    }
+
+    if (quote !== undefined) {
+      if (character === "\\") {
+        cursor += 1;
+      } else if (character === quote) {
+        quote = undefined;
+      }
+      continue;
+    }
+
+    if (code.startsWith("/*", cursor)) {
+      const commentEnd = code.indexOf("*/", cursor + 2);
+      if (commentEnd < 0) {
+        return undefined;
+      }
+      cursor = commentEnd + 1;
+      continue;
+    }
+
+    if (character === '"' || character === "'") {
+      quote = character;
+      continue;
+    }
+    if (character === "(") {
+      parentheses += 1;
+      continue;
+    }
+    if (character === ")") {
+      parentheses = Math.max(0, parentheses - 1);
+      continue;
+    }
+    if (character === ";" && parentheses === 0) {
+      return cursor + 1;
+    }
+    if (character === "{" && parentheses === 0) {
+      if (ruleName !== "layer") {
+        return undefined;
+      }
+
+      const blockEnd = consumeCssBlock(code, cursor);
+      if (blockEnd === undefined || !isCssTrivia(code.slice(cursor + 1, blockEnd - 1))) {
+        return undefined;
+      }
+      return blockEnd;
+    }
+    if (character === "}" && parentheses === 0) {
+      return undefined;
+    }
+  }
+
+  return undefined;
+}
+
+function consumeCssBlock(code: string, start: number): number | undefined {
+  let depth = 1;
+  let quote: '"' | "'" | undefined;
+  for (let cursor = start + 1; cursor < code.length; cursor += 1) {
+    const character = code[cursor];
+    if (character === undefined) {
+      return undefined;
+    }
+
+    if (quote !== undefined) {
+      if (character === "\\") {
+        cursor += 1;
+      } else if (character === quote) {
+        quote = undefined;
+      }
+      continue;
+    }
+
+    if (code.startsWith("/*", cursor)) {
+      const commentEnd = code.indexOf("*/", cursor + 2);
+      if (commentEnd < 0) {
+        return undefined;
+      }
+      cursor = commentEnd + 1;
+      continue;
+    }
+
+    if (character === '"' || character === "'") {
+      quote = character;
+    } else if (character === "{") {
+      depth += 1;
+    } else if (character === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return cursor + 1;
+      }
+    }
+  }
+
+  return undefined;
+}
+
+function isCssTrivia(value: string): boolean {
+  return skipCssTrivia(value, 0) === value.length;
 }
 
 function isTailwindCssEntry(code: string): boolean {

package/src/types.ts

@@ -62,13 +62,26 @@ export interface RouteHandlerContext<TParams extends RouteParams = RouteParams>
   request: Request;
 }
 
+/**
+ * Serializable location data passed to shared page and layout components.
+ *
+ * Server-only request data such as headers, body, credentials, and abort
+ * signals is available through loader and handler contexts instead.
+ */
+export interface RouteLocation {
+  readonly hash: string;
+  readonly pathname: string;
+  readonly search: string;
+  readonly url: string;
+}
+
 /**
  * Provides loader data, params, and request context to page components.
  */
 export interface PageProps<TData = unknown, TParams extends RouteParams = RouteParams> {
   data: TData;
   params: TParams;
-  request: Request;
+  request: RouteLocation;
 }
 
 /**
@@ -95,7 +108,7 @@ export function definePage<TLoader extends RouteLoader>(
 export interface LayoutProps<TParams extends RouteParams = RouteParams> {
   children: ReactCompatNode;
   params: TParams;
-  request: Request;
+  request: RouteLocation;
 }
 
 /**