Update to stable middleware (experimental release)

Author: brookslybrand

app/actions/menu-collapse/server.ts

@@ -1,8 +1,8 @@
 import {
+  createContext,
   createCookie,
-  unstable_createContext,
-  type unstable_MiddlewareFunction,
-  type unstable_RouterContextProvider,
+  type MiddlewareFunction,
+  type RouterContextProvider,
 } from "react-router";
 
 let cookie = createCookie("menu-collapse", {
@@ -14,11 +14,9 @@ let cookie = createCookie("menu-collapse", {
 // Default behavior: missing categories are treated as "open" (true)
 type MenuCollapseState = Record<string, boolean>;
 
-let menuCollapseStateContext = unstable_createContext<MenuCollapseState>({});
+let menuCollapseStateContext = createContext<MenuCollapseState>({});
 
-export function menuCollapseContext(
-  context: Readonly<unstable_RouterContextProvider>,
-) {
+export function menuCollapseContext(context: Readonly<RouterContextProvider>) {
   return {
     get: () => {
       return context.get(menuCollapseStateContext);
@@ -43,9 +41,10 @@ export function menuCollapseContext(
  *
  * This is used to persist the menu collapse state across page loads
  */
-export let menuCollapseStateMiddleware: unstable_MiddlewareFunction<
-  Response
-> = async ({ request, context }, next) => {
+export let menuCollapseStateMiddleware: MiddlewareFunction<Response> = async (
+  { request, context },
+  next,
+) => {
   // Set the context to whatever is in the cookie
   let menuCollapseCookieState = await parseMenuCollapseState(request);
   let menuCollapse = menuCollapseContext(context);

app/modules/http-utils/ensure-secure.ts

@@ -1,8 +1,8 @@
-import { redirect, type unstable_MiddlewareFunction } from "react-router";
+import { redirect, type MiddlewareFunction } from "react-router";
 
-export const ensureSecure: unstable_MiddlewareFunction<
-  void | Response
-> = async ({ request }) => {
+export const ensureSecure: MiddlewareFunction<void | Response> = async ({
+  request,
+}) => {
   let proto = request.headers.get("x-forwarded-proto");
   // this indirectly allows `http://localhost` because there is no
   // "x-forwarded-proto" in the local server headers

app/modules/http-utils/remove-slashes.ts

@@ -1,6 +1,6 @@
-import { redirect, type unstable_MiddlewareFunction } from "react-router";
+import { redirect, type MiddlewareFunction } from "react-router";
 
-export const removeTrailingSlashes: unstable_MiddlewareFunction<
+export const removeTrailingSlashes: MiddlewareFunction<
   void | Response
 > = async ({ request }) => {
   let url = new URL(request.url);

app/modules/redirects/.server/index.ts

@@ -1,4 +1,4 @@
-import { type unstable_MiddlewareFunction } from "react-router";
+import { type MiddlewareFunction } from "react-router";
 import { checkUrl } from "./check-url";
 import { getRedirects } from "./get-redirects";
 
@@ -15,9 +15,9 @@ import { getRedirects } from "./get-redirects";
  *
  * @param request Web Fetch Request to possibly redirect
  */
-export const handleRedirects: unstable_MiddlewareFunction<
-  void | Response
-> = async ({ request }) => {
+export const handleRedirects: MiddlewareFunction<void | Response> = async ({
+  request,
+}) => {
   let redirects = await getRedirects();
   let url = new URL(request.url);
   let response = await checkUrl(url.pathname, redirects);

app/root.tsx

@@ -25,7 +25,7 @@ import { ensureSecure } from "~/modules/http-utils/ensure-secure";
 import { handleRedirects } from "~/modules/redirects/.server";
 import { removeTrailingSlashes } from "~/modules/http-utils/remove-slashes";
 
-export const unstable_middleware: Route.unstable_MiddlewareFunction[] = [
+export const middleware: Route.MiddlewareFunction[] = [
   ensureSecure,
   removeTrailingSlashes,
   handleRedirects,

package-lock.json

@@ -17,8 +17,8 @@
   "dependencies": {
     "@docsearch/css": "^3.8.3",
     "@docsearch/react": "^3.8.3",
-    "@react-router/express": "^7.8.1",
-    "@react-router/node": "^7.8.1",
+    "@react-router/express": "0.0.0-experimental-426e5caec",
+    "@react-router/node": "0.0.0-experimental-426e5caec",
     "@types/express": "^5.0.0",
     "cheerio": "^1.0.0-rc.12",
     "classnames": "^2.3.2",
@@ -42,7 +42,7 @@
     "parse-numeric-range": "^1.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router": "^7.8.1",
+    "react-router": "0.0.0-experimental-426e5caec",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.1",
@@ -59,7 +59,7 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@react-router/dev": "^7.8.1",
+    "@react-router/dev": "0.0.0-experimental-426e5caec",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/express-serve-static-core": "^5.0.6",
     "@types/follow-redirects": "^1.14.4",

package.json

@@ -4,6 +4,6 @@ export default {
   future: {
     unstable_optimizeDeps: true,
     unstable_splitRouteModules: "enforce",
-    unstable_middleware: true,
+    v8_middleware: true,
   },
 } satisfies Config;