Enable middleware

app/http.ts

@@ -1,7 +1,3 @@
-import { ensureSecure } from "~/modules/http-utils/ensure-secure";
-import { handleRedirects } from "~/modules/redirects/.server";
-import { removeTrailingSlashes } from "~/modules/http-utils/remove-slashes";
-
 export const CACHE_CONTROL = {
   // what we use for docs so they are up-to-date within minutes of what's on
   // github
@@ -10,9 +6,3 @@ export const CACHE_CONTROL = {
   // don't cache at all
   none: "no-store, no-cache, must-revalidate, max-age=0",
 };
-
-export async function middlewares(request: Request): Promise<void> {
-  await ensureSecure(request);
-  await removeTrailingSlashes(request);
-  await handleRedirects(request);
-}

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

@@ -1,6 +1,8 @@
-import { redirect } from "react-router";
+import { redirect, type unstable_MiddlewareFunction } from "react-router";
 
-export async function ensureSecure(request: Request) {
+export const ensureSecure: unstable_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
@@ -9,4 +11,4 @@ export async function ensureSecure(request: Request) {
     secureUrl.protocol = "https:";
     throw redirect(secureUrl.toString());
   }
-}
+};

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

@@ -1,9 +1,11 @@
-import { redirect } from "react-router";
+import { redirect, type unstable_MiddlewareFunction } from "react-router";
 
-export async function removeTrailingSlashes(request: Request) {
+export const removeTrailingSlashes: unstable_MiddlewareFunction<
+  void | Response
+> = async ({ request }) => {
   let url = new URL(request.url);
   if (url.pathname.endsWith("/") && url.pathname !== "/") {
     url.pathname = url.pathname.slice(0, -1);
     throw redirect(url.toString());
   }
-}
+};

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

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

app/root.tsx

@@ -7,7 +7,7 @@ import {
   Scripts,
   ScrollRestoration,
 } from "react-router";
-import { CACHE_CONTROL, middlewares } from "./http";
+import { CACHE_CONTROL } from "./http";
 
 import { parseColorScheme } from "./modules/color-scheme/server";
 import {
@@ -23,9 +23,17 @@ import "@docsearch/css/dist/style.css";
 import "~/styles/docsearch.css";
 import type { Route } from "./+types/root";
 
-export async function loader({ request }: LoaderFunctionArgs) {
-  await middlewares(request);
+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[] = [
+  ensureSecure,
+  removeTrailingSlashes,
+  handleRedirects,
+];
 
+export async function loader({ request }: LoaderFunctionArgs) {
   let colorScheme = await parseColorScheme(request);
   let isProductionHost = isHost("reactrouter.com", request);