Make context readonly

Author: brophdawg11

.changeset/plenty-cycles-whisper.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+- [UNSTABLE] When middleware is enabled, make the `context` parameter read-only (via `Readonly<unstable_RouterContextProvider>`) so that TypeScript will not allow you to write arbitrary fields to it in loaders, actions, or middleware.

docs/how-to/middleware.md

@@ -274,6 +274,8 @@ This allows you to leave your loaders/actions untouched during initial adoption
 
 <docs-warning>This approach is only intended to be used as a migration strategy when adopting middleware in React Router v7, allowing you to incrementally migrate to `context.set`/`context.get`. It is not safe to assume this approach will work in the next major version of React Router.</docs-warning>
 
+<docs-warning>The `unstable_RouterContextProvider` class is also used for the client-side `context` parameter via `<HydratedRouter unstable_getContext>` and `<RouterProvider unstable_getContext>`. Since `AppLoadContext` is primarily intended as a hand-off from your HTTP server into the React Router handlers, you need to be aware that these augmented fields will not be available in `clientMiddleware`, `clientLoader`, or `clientAction` functions even thought TypeScript will tell you they are (unless, of course, you provide the fields via `unstable_getContext` on the client).</docs-warning>
+
 ## Common Patterns
 
 ### Authentication

packages/react-router/lib/router/utils.ts

@@ -168,7 +168,7 @@ export class unstable_RouterContextProvider {
 }
 
 type DefaultContext = MiddlewareEnabled extends true
-  ? unstable_RouterContextProvider
+  ? Readonly<unstable_RouterContextProvider>
   : any;
 
 /**
@@ -217,7 +217,7 @@ export interface unstable_MiddlewareNextFunction<Result = unknown> {
  * and then complete middlewares from the bottom-up
  */
 export type unstable_MiddlewareFunction<Result = unknown> = (
-  args: DataFunctionArgs<unstable_RouterContextProvider>,
+  args: DataFunctionArgs<Readonly<unstable_RouterContextProvider>>,
   next: unstable_MiddlewareNextFunction<Result>,
 ) => MaybePromise<Result | void>;
 

packages/react-router/lib/types/route-data.ts

@@ -98,7 +98,7 @@ export type ClientDataFunctionArgs<Params> = {
    * from your route middlewares.  You may pass in initial context values in your
    * `<HydratedRouter unstable_getContext>` prop
    */
-  context: unstable_RouterContextProvider;
+  context: Readonly<unstable_RouterContextProvider>;
 };
 
 export type ServerDataFunctionArgs<Params> = {
@@ -132,7 +132,7 @@ export type ServerDataFunctionArgs<Params> = {
    * `getLoadContext` function.
    */
   context: MiddlewareEnabled extends true
-    ? unstable_RouterContextProvider
+    ? Readonly<unstable_RouterContextProvider>
     : AppLoadContext;
 };