Switch to new context

Author: brookslybrand

app/api/update-menu-collapse.ts

@@ -5,7 +5,7 @@ import { useRouteLoaderData, useSubmit } from "react-router";
 import invariant from "tiny-invariant";
 import { useCallback, useState } from "react";
 
-export async function action({ request }: Route.ActionArgs) {
+export async function action({ request, context }: Route.ActionArgs) {
   let formData = await request.formData();
 
   let category = formData.get("category");
@@ -20,7 +20,8 @@ export async function action({ request }: Route.ActionArgs) {
 
   let parsedOpen = open === "true";
 
-  setMenuCollapseState(category, parsedOpen);
+  // @ts-expect-error huh?
+  setMenuCollapseState(context, category, parsedOpen);
   return parsedOpen;
 }
 
@@ -29,7 +30,7 @@ export function useMenuCollapse(category?: string) {
   invariant(rootLoaderData, "No root loader data found");
 
   const isMenuOpen = category
-    ? rootLoaderData.menuCollapseState[category] ?? true
+    ? (rootLoaderData.menuCollapseState[category] ?? true)
     : true;
   const [isOpen, setIsOpen] = useState(isMenuOpen);
   const submit = useSubmit();
@@ -46,10 +47,10 @@ export function useMenuCollapse(category?: string) {
           navigate: false,
           method: "post",
           action: "/_update-menu-collapse",
-        }
+        },
       );
     },
-    [category, submit]
+    [category, submit],
   );
 
   return [isOpen, submitMenuCollapse] as const;

app/modules/menu-collapse.server.ts

@@ -1,10 +1,10 @@
 import {
   createCookieSessionStorage,
-  type MiddlewareFunctionArgs,
-  type RouterContext,
+  unstable_createContext,
   type Session,
+  type unstable_MiddlewareFunction,
+  type unstable_RouterContextProvider,
 } from "react-router";
-import { createContext, provide, pull } from "@ryanflorence/async-provider";
 
 type MenuCollapseState = {
   "menu-collapse-state"?: Record<string, boolean>;
@@ -21,37 +21,34 @@ let storage = createCookieSessionStorage<MenuCollapseState>({
   },
 });
 
-let menuCollapseStateContext = createContext<Session<MenuCollapseState>>();
+let menuCollapseStateContext =
+  unstable_createContext<Session<MenuCollapseState>>();
 
-export let menuCollapseStateMiddleware = async ({
-  request,
-  next,
-}: MiddlewareFunctionArgs<RouterContext, Response>) => {
+export let menuCollapseStateMiddleware: unstable_MiddlewareFunction<
+  Response
+> = async ({ request, context }, next) => {
   let cookieHeader = request.headers.get("Cookie");
   let session = await storage.getSession(cookieHeader);
-  // Setting the cookie and wrapping the response in the context
-  return provide([[menuCollapseStateContext, session]], async () => {
-    try {
-      let res = await next();
-      res.headers.append("Set-Cookie", await storage.commitSession(session));
-      return res;
-    } catch (e) {
-      console.log("session middleware error", request.url);
-      console.log(e);
-      return new Response("Oops, something went wrong.", { status: 500 });
-    }
-  });
+  context.set(menuCollapseStateContext, session);
+
+  let res = await next();
+  res.headers.append("Set-Cookie", await storage.commitSession(session));
+  return res;
 };
 
-export function setMenuCollapseState(category: string, value: boolean) {
-  let session = pull(menuCollapseStateContext);
+export function setMenuCollapseState(
+  context: unstable_RouterContextProvider,
+  category: string,
+  value: boolean,
+) {
+  let session = context.get(menuCollapseStateContext);
   let state = session.get("menu-collapse-state") || {};
   state[category] = value;
   session.set("menu-collapse-state", state);
 }
 
-export function getMenuCollapseState() {
-  let session = pull(menuCollapseStateContext);
+export function getMenuCollapseState(context: unstable_RouterContextProvider) {
+  let session = context.get(menuCollapseStateContext);
   let state = session.get("menu-collapse-state") || {};
   return state;
 }

app/root.tsx

@@ -1,4 +1,3 @@
-import type { LoaderFunctionArgs } from "react-router";
 import {
   Link,
   Links,
@@ -27,14 +26,15 @@ import "~/styles/tailwind.css";
 import "@docsearch/css/dist/style.css";
 import "~/styles/docsearch.css";
 
-export let middleware = [menuCollapseStateMiddleware];
+export let unstable_middleware = [menuCollapseStateMiddleware];
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request, context }: Route.LoaderArgs) {
   await middlewares(request);
 
   let colorScheme = await parseColorScheme(request);
   let isProductionHost = isHost("reactrouter.com", request);
-  const menuCollapseState = getMenuCollapseState();
+  // @ts-expect-error huh?
+  const menuCollapseState = getMenuCollapseState(context);
 
   return { colorScheme, isProductionHost, menuCollapseState };
 }

package-lock.json

@@ -22,9 +22,8 @@
   "dependencies": {
     "@docsearch/css": "^3.8.3",
     "@docsearch/react": "^3.8.3",
-    "@react-router/express": "0.0.0-experimental-beaa4f52a",
-    "@react-router/node": "0.0.0-experimental-beaa4f52a",
-    "@ryanflorence/async-provider": "^0.0.1",
+    "@react-router/express": "7.3.0-pre.0",
+    "@react-router/node": "7.3.0-pre.0",
     "@types/express": "^5.0.0",
     "cheerio": "^1.0.0-rc.12",
     "classnames": "^2.3.2",
@@ -45,7 +44,7 @@
     "parse-numeric-range": "^1.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router": "0.0.0-experimental-beaa4f52a",
+    "react-router": "7.3.0-pre.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "rehype-stringify": "^10.0.1",
@@ -62,7 +61,7 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@react-router/dev": "0.0.0-experimental-beaa4f52a",
+    "@react-router/dev": "7.3.0-pre.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/eslint": "^8.56.6",
     "@types/express-serve-static-core": "^5.0.6",

package.json

@@ -3,6 +3,7 @@ import type { Config } from "@react-router/dev/config";
 export default {
   future: {
     unstable_optimizeDeps: true,
+    unstable_middleware: true,
     unstable_splitRouteModules: "enforce",
   },
 } satisfies Config;