feat: server middleware

.pnpmfile.cjs

@@ -1,4 +1,39 @@
-function readPackage(pkg) {
+const path = require("node:path");
+const fsp = require("node:fs/promises");
+const { findWorkspaceDir } = require("./vendor/@pnpm/find-workspace-dir");
+
+let cache = new Map();
+
+async function getExamples() {
+  if (cache.size > 0) return cache;
+
+  let root = await findWorkspaceDir(process.cwd());
+  let exampleRoot = path.join(root, "examples");
+  let exampleContents = await fsp.readdir(exampleRoot, { withFileTypes: true });
+  let directories = exampleContents
+    .filter((dirent) => dirent.isDirectory())
+    .map((dirent) => dirent.name);
+
+  for (const file of directories) {
+    const content = await fsp.readFile(
+      path.join(exampleRoot, file, "package.json"),
+      "utf-8",
+    );
+
+    let pkg = JSON.parse(content);
+
+    cache.set(pkg.name, pkg);
+  }
+
+  return cache;
+}
+
+async function readPackage(pkg) {
+  // first get the examples from the examples directory and cache them
+  // this is necessary because we need to use the examples in the package.json
+  // but we don't want to read the directory every time
+  let examples = await getExamples();
+
   // replace hardcoded version of remix-fastify with workspace:*
   // this is necessary because we're using pnpm workspaces
   // and we want to use the local version of remix-fastify
@@ -8,17 +43,32 @@ function readPackage(pkg) {
     pkg.dependencies["@mcansh/remix-fastify"] = "workspace:*";
   }
 
-  let remixPackages = Object.keys(pkg.dependencies).filter((p) => {
-    return p.startsWith("@remix-run");
-  });
+  // check if the example has remix dependencies
+  // if it does, we need to add the remix dependencies to the package.json
+  // this is necessary because we need to use the remix dependencies in the examples
+  if (pkg.name && pkg.name.startsWith("example-")) {
+    let example = examples.get(pkg.name);
 
-  if (pkg.dependencies["remix"]) {
-    pkg.dependencies["remix"] = "latest";
-  }
+    if (example) {
+      let remixPackages = [
+        ...Object.keys(example.dependencies),
+        ...Object.keys(example.devDependencies),
+      ].filter((dep) => {
+        return (
+          dep === "remix" ||
+          dep.startsWith("@remix-run/") ||
+          dep === "react-router" ||
+          dep.startsWith("@react-router")
+        );
+      });
 
-  for (let p of remixPackages) {
-    if (pkg.dependencies[p]) {
-      pkg.dependencies[p] = "latest";
+      for (let p of remixPackages) {
+        if (pkg.dependencies[p]) {
+          pkg.dependencies[p] = "latest";
+        } else if (pkg.devDependencies[p]) {
+          pkg.devDependencies[p] = "latest";
+        }
+      }
     }
   }
 

examples/basic/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "basic-example-template",
+  "name": "example-basic-template",
   "private": true,
   "sideEffects": false,
   "type": "module",
@@ -14,28 +14,28 @@
   "dependencies": {
     "@fastify/static": "^8.1.1",
     "@mcansh/remix-fastify": "4.0.8",
-    "@remix-run/css-bundle": "*",
-    "@remix-run/node": "*",
-    "@remix-run/react": "*",
-    "chalk": "^5.3.0",
+    "@remix-run/css-bundle": "^2.16.5",
+    "@remix-run/node": "^2.16.5",
+    "@remix-run/react": "^2.16.5",
+    "chalk": "^5.4.1",
     "cross-env": "^7.0.3",
-    "fastify": "^5.2.1",
+    "fastify": "^5.3.2",
     "get-port": "^7.1.0",
-    "isbot": "^5.1.21",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "isbot": "^5.1.26",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "source-map-support": "^0.5.21"
   },
   "devDependencies": {
-    "@remix-run/dev": "*",
-    "@remix-run/eslint-config": "*",
+    "@remix-run/dev": "^2.16.5",
+    "@remix-run/eslint-config": "^2.16.5",
     "@total-typescript/tsconfig": "^1.0.4",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "chokidar": "^4.0.1",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "chokidar": "^4.0.3",
     "eslint": "^8.57.0",
-    "prettier": "^3.3.3",
-    "typescript": "^5.7.2"
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.3"
   },
   "engines": {
     "node": ">=20.0.0"

examples/basic/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
-  "extends": "@total-typescript/tsconfig/bundler/dom/app",
+  "extends": "@total-typescript/tsconfig/bundler/dom",
   "compilerOptions": {
     "types": ["@remix-run/node"],
     "jsx": "react-jsx",

examples/playground/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "playground",
+  "name": "example-playground",
   "private": true,
   "description": "",
   "license": "",
@@ -17,51 +17,45 @@
   "dependencies": {
     "@fastify/static": "^8.1.1",
     "@mcansh/remix-fastify": "workspace:*",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@react-router/node": "^7.3.0",
-    "chalk": "^5.3.0",
+    "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@react-router/node": "^7.5.1",
+    "chalk": "^5.4.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "fastify": "^5.2.1",
+    "fastify": "^5.3.2",
     "get-port": "^7.1.0",
-    "isbot": "^5.1.21",
-    "lucide-react": "^0.479.0",
-    "react": "19.0.0-rc.1",
-    "react-dom": "19.0.0-rc.1",
-    "react-router": "^7.3.0",
+    "isbot": "^5.1.26",
+    "lucide-react": "^0.503.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-router": "^7.5.1",
     "source-map-support": "^0.5.21",
-    "tailwind-merge": "^3.0.2"
+    "tailwind-merge": "^3.2.0"
   },
   "devDependencies": {
     "@fastify/middie": "^9.0.3",
-    "@react-router/dev": "^7.3.0",
-    "@remix-run/eslint-config": "^2.15.3",
-    "@tailwindcss/vite": "4.0.0-alpha.34",
+    "@react-router/dev": "^7.5.1",
+    "@remix-run/eslint-config": "^2.16.5",
+    "@tailwindcss/vite": "4.1.4",
     "@total-typescript/tsconfig": "^1.0.4",
-    "@types/node": "^22.9.2",
-    "@types/react": "npm:types-react@19.0.0-rc.1",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
+    "@types/node": "^22.14.1",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@types/source-map-support": "^0.5.10",
-    "chokidar": "^4.0.1",
+    "chokidar": "^4.0.3",
     "cross-env": "^7.0.3",
-    "dotenv": "^16.4.5",
+    "dotenv": "^16.5.0",
     "eslint": "^8.57.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.3",
+    "prettier": "^3.5.3",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "prettier-plugin-tailwindcss": "^0.6.9",
-    "tailwindcss": "4.0.0-alpha.34",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwindcss": "4.1.4",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.7.2",
-    "vite": "^6.2.4",
-    "vite-tsconfig-paths": "^5.1.3"
-  },
-  "overrides": {
-    "@types/react": "$@types/react",
-    "@types/react-dom": "$@types/react-dom",
-    "react": "$react",
-    "react-dom": "$react-dom"
+    "typescript": "^5.8.3",
+    "vite": "^6.3.2",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "engines": {
     "node": ">=20.0.0"

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

@@ -1,40 +1,41 @@
 {
-  "name": "react-router-example-template",
+  "name": "example-react-router-template",
   "private": true,
   "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",
-    "chalk": "^5.3.0",
+    "@react-router/node": "*",
+    "@react-router/serve": "*",
+    "chalk": "^5.4.1",
     "cross-env": "^7.0.3",
-    "fastify": "^5.2.1",
+    "fastify": "^5.3.2",
     "get-port": "^7.1.0",
-    "isbot": "^5.1.21",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router": "7.1.5",
+    "isbot": "^5.1.26",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router": "*",
     "source-map-support": "^0.5.21"
   },
   "devDependencies": {
-    "@react-router/dev": "7.1.5",
+    "@react-router/dev": "*",
     "@total-typescript/tsconfig": "^1.0.4",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "autoprefixer": "^10.4.20",
-    "dotenv": "^16.4.5",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.15",
-    "typescript": "^5.7.2",
-    "vite": "^6.2.4",
-    "vite-tsconfig-paths": "^5.1.3"
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@types/source-map-support": "^0.5.10",
+    "autoprefixer": "^10.4.21",
+    "dotenv": "^16.5.0",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.1.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.2",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "engines": {
     "node": ">=20.0.0"

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 → examples/react-router/server.ts

@@ -3,12 +3,25 @@ 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);
+// @ts-expect-error
+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/tsconfig.json

@@ -19,6 +19,7 @@
     },
     "noEmit": true,
     "rootDirs": [".", "./.react-router/types"],
-    "plugins": [{ "name": "@react-router/dev" }]
+    "plugins": [{ "name": "@react-router/dev" }],
+    "allowImportingTsExtensions": true
   }
 }

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()],
 });