Update react-router and react, update middleware (#207)

Author: brookslybrand

app/actions/menu-collapse/server.ts

@@ -1,8 +1,8 @@
 import {
   createCookie,
-  unstable_createContext,
-  type unstable_MiddlewareFunction,
-  type unstable_RouterContextProvider,
+  createContext,
+  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/components/docs-header/data.server.ts

@@ -39,7 +39,7 @@ export async function getHeaderData(
     ["dev", "nightly", "release-next", "local"].includes(githubRef);
 
   // TODO: make this smarter before v8
-  let apiDocsRef = githubRef === "dev" || githubRef === "local" ? "dev" : "v7";
+  let apiDocsRef = "v7";
 
   let latestV6Version = getLatestV6Version(tags);
 

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

@@ -1,8 +1,6 @@
-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 = 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,8 +1,8 @@
-import { redirect, type unstable_MiddlewareFunction } from "react-router";
+import { redirect, type MiddlewareFunction } from "react-router";
 
-export const removeTrailingSlashes: unstable_MiddlewareFunction<
-  void | Response
-> = async ({ request }) => {
+export const removeTrailingSlashes: MiddlewareFunction = async ({
+  request,
+}) => {
   let url = new URL(request.url);
   if (url.pathname.endsWith("/") && url.pathname !== "/") {
     url.pathname = url.pathname.slice(0, -1);

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,7 @@ 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 = async ({ request }) => {
   let redirects = await getRedirects();
   let url = new URL(request.url);
   let response = await checkUrl(url.pathname, redirects);

app/root.tsx

@@ -6,6 +6,7 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
+  type MiddlewareFunction,
 } from "react-router";
 import { CACHE_CONTROL } from "./http";
 
@@ -25,7 +26,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: MiddlewareFunction[] = [
   ensureSecure,
   removeTrailingSlashes,
   handleRedirects,