feat: update types for server file middleware

Signed-off-by: Logan McAnsh <logan@mcan.sh>

Author: mcansh

examples/react-router/app/root.tsx

@@ -1,7 +1,20 @@
 import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
-import type { LinksFunction } from "react-router";
-
+import type { LinksFunction, unstable_MiddlewareFunction } from "react-router";
 import "./app.css";
+import type { Route } from "./+types/root";
+import { adapterContext } from "../context";
+
+export function loader({ context }: Route.LoaderArgs) {
+  console.log({ context: context.get(adapterContext) });
+}
+
+export const unstable_middleware: unstable_MiddlewareFunction[] = [
+  async ({ context }) => {
+    const adapterContextValue = context.get(adapterContext);
+    console.log({ adapterContextValue });
+    context.set(adapterContext, { session: "updated" });
+  },
+];
 
 export const links: LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },

examples/react-router/context.ts

@@ -0,0 +1,12 @@
+import { unstable_createContext } from "react-router";
+
+type AdapterContextType = {
+  session: string;
+};
+
+let initialValue = {
+  session: "lol default value",
+} satisfies AdapterContextType;
+
+export const adapterContext =
+  unstable_createContext<AdapterContextType>(initialValue);

examples/react-router/package.json

@@ -4,30 +4,31 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development node --require dotenv/config --watch-path ./server.js ./server.js",
+    "dev": "cross-env NODE_ENV=development node --require dotenv/config --watch-path ./server.ts ./server.ts",
     "build": "react-router build",
-    "start": "cross-env NODE_ENV=production node ./server.js",
+    "start": "cross-env NODE_ENV=production node ./server.ts",
     "typecheck": "react-router typegen && tsc"
   },
   "dependencies": {
     "@mcansh/remix-fastify": "^4.0.8",
-    "@react-router/node": "7.1.5",
-    "@react-router/serve": "7.1.5",
+    "@react-router/node": "7.4.1",
+    "@react-router/serve": "7.4.1",
     "chalk": "^5.3.0",
     "cross-env": "^7.0.3",
     "fastify": "^5.2.1",
     "get-port": "^7.1.0",
     "isbot": "^5.1.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "7.1.5",
+    "react-router": "7.4.1",
     "source-map-support": "^0.5.21"
   },
   "devDependencies": {
-    "@react-router/dev": "7.1.5",
+    "@react-router/dev": "7.4.1",
     "@total-typescript/tsconfig": "^1.0.4",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/source-map-support": "^0.5.10",
     "autoprefixer": "^10.4.20",
     "dotenv": "^16.4.5",
     "postcss": "^8.4.49",

examples/react-router/react-router.config.ts

@@ -0,0 +1,17 @@
+import type { Config } from "@react-router/dev/config";
+
+declare module "react-router" {
+  interface Future {
+    unstable_middleware: true;
+  }
+}
+
+export default {
+  ssr: true,
+  future: {
+    unstable_middleware: true,
+    unstable_optimizeDeps: true,
+    unstable_splitRouteModules: true,
+    unstable_viteEnvironmentApi: true,
+  },
+} satisfies Config;

examples/react-router/server.js renamed to examples/react-router/server.ts

@@ -3,12 +3,24 @@ import { reactRouterFastify } from "@mcansh/remix-fastify/react-router";
 import { fastify } from "fastify";
 import sourceMapSupport from "source-map-support";
 import getPort, { portNumbers } from "get-port";
+import {
+  unstable_createContext,
+  type unstable_InitialContext,
+  type unstable_RouterContext,
+} from "react-router";
+import { adapterContext } from "./context.ts";
 
 sourceMapSupport.install();
 
 let app = fastify();
 
-await app.register(reactRouterFastify);
+await app.register(reactRouterFastify, {
+  getLoadContext(_request): unstable_InitialContext {
+    const map = new Map<unstable_RouterContext, unknown>();
+    map.set(adapterContext, { session: "" });
+    return map;
+  },
+});
 
 const desiredPort = Number(process.env.PORT) || 3000;
 const portToUse = await getPort({

examples/react-router/vite.config.ts

@@ -3,11 +3,5 @@ import tsconfigPaths from "vite-tsconfig-paths";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-  plugins: [
-    reactRouter({
-      // Server-side render by default, to enable SPA mode set this to `false`
-      ssr: true,
-    }),
-    tsconfigPaths(),
-  ],
+  plugins: [reactRouter(), tsconfigPaths()],
 });