Update playground to TS and apply getLoadContext

Author: brophdawg11

playground/middleware/app/contexts.ts

@@ -1,5 +1,6 @@
 import { unstable_createContext } from "react-router";
 
+export const expressContext = unstable_createContext<string>("default");
 export const rootContext = unstable_createContext<string>();
 export const aContext = unstable_createContext<string>();
 export const bContext = unstable_createContext<string>("empty");

playground/middleware/app/routes/client.a.b.tsx

@@ -12,7 +12,7 @@ export const unstable_clientMiddleware: Route.unstable_ClientMiddlewareFunction[
     },
   ];
 
-export async function clientLoader({ context }: Route.LoaderArgs) {
+export async function clientLoader({ context }: Route.ClientLoaderArgs) {
   await new Promise((r) => setTimeout(r, 200));
   return JSON.stringify({
     root: context.get(rootContext),

playground/middleware/app/routes/client.a.tsx

@@ -1,4 +1,4 @@
-import { Outlet, unstable_createContext } from "react-router";
+import { Outlet } from "react-router";
 import type { Route } from "./+types/client.a";
 import { aContext, rootContext } from "~/contexts";
 
@@ -12,7 +12,7 @@ export const unstable_clientMiddleware: Route.unstable_ClientMiddlewareFunction[
     },
   ];
 
-export function clientLoader({ context }: Route.LoaderArgs) {
+export function clientLoader({ context }: Route.ClientLoaderArgs) {
   return JSON.stringify({
     root: context.get(rootContext),
     a: context.get(aContext),

playground/middleware/app/routes/server.a.b.tsx

@@ -1,6 +1,6 @@
 import { Outlet, unstable_createContext } from "react-router";
 import type { Route } from "./+types/server.a.b";
-import { aContext, bContext, rootContext } from "~/contexts";
+import { aContext, bContext, expressContext, rootContext } from "~/contexts";
 
 export const unstable_middleware: Route.unstable_MiddlewareFunction[] = [
   async ({ context }, next) => {
@@ -15,6 +15,7 @@ export const unstable_middleware: Route.unstable_MiddlewareFunction[] = [
 export async function loader({ context }: Route.LoaderArgs) {
   await new Promise((r) => setTimeout(r, 200));
   return JSON.stringify({
+    express: context.get(expressContext),
     root: context.get(rootContext),
     a: context.get(aContext),
     b: context.get(bContext),

playground/middleware/app/routes/server.a.tsx

@@ -1,6 +1,6 @@
 import { Outlet, unstable_createContext } from "react-router";
 import type { Route } from "./+types/server.a";
-import { aContext, rootContext } from "~/contexts";
+import { aContext, expressContext, rootContext } from "~/contexts";
 
 export const unstable_middleware: Route.unstable_MiddlewareFunction[] = [
   async ({ context }, next) => {
@@ -14,6 +14,7 @@ export const unstable_middleware: Route.unstable_MiddlewareFunction[] = [
 
 export function loader({ context }: Route.LoaderArgs) {
   return JSON.stringify({
+    express: context.get(expressContext),
     root: context.get(rootContext),
     a: context.get(aContext),
   });

playground/middleware/dev-server.ts

@@ -0,0 +1,28 @@
+import express from "express";
+
+const PORT = Number.parseInt(process.env.PORT || "3000");
+
+const app = express();
+
+console.log("Starting development server");
+const viteDevServer = await import("vite").then((vite) =>
+  vite.createServer({
+    server: { middlewareMode: true },
+  })
+);
+app.use(viteDevServer.middlewares);
+app.use(async (req, res, next) => {
+  try {
+    const source = await viteDevServer.ssrLoadModule("./server.ts");
+    return await source.app(req, res, next);
+  } catch (error) {
+    if (typeof error === "object" && error instanceof Error) {
+      viteDevServer.ssrFixStacktrace(error);
+    }
+    next(error);
+  }
+});
+
+app.listen(PORT, () => {
+  console.log(`Server is running on http://localhost:${PORT}`);
+});

playground/middleware/package.json

@@ -6,23 +6,33 @@
   "type": "module",
   "scripts": {
     "build": "react-router build",
-    "dev": "react-router dev",
-    "start": "react-router-serve ./build/server/index.js",
+    "dev": "cross-env NODE_ENV=development tsx dev-server.ts",
+    "start": "cross-env NODE_ENV=production node build/server/index.js",
     "typecheck": "react-router typegen && tsc"
   },
   "dependencies": {
+    "@react-router/express": "workspace:*",
     "@react-router/node": "workspace:*",
-    "@react-router/serve": "workspace:*",
+    "compression": "^1.7.4",
+    "cross-env": "^7.0.3",
+    "express": "^4.19.2",
     "isbot": "^5.1.11",
+    "morgan": "^1.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "workspace:*"
   },
   "devDependencies": {
     "@react-router/dev": "workspace:*",
     "@react-router/fs-routes": "workspace:*",
+    "@types/compression": "^1.7.5",
+    "@types/express": "^4.17.21",
+    "@types/express-serve-static-core": "^5.0.6",
+    "@types/morgan": "^1.9.9",
+    "@types/node": "^20.0.0",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
+    "tsx": "^4.19.3",
     "typescript": "^5.1.6",
     "vite": "^6.0.0",
     "vite-tsconfig-paths": "^4.2.1"

playground/middleware/server.ts

@@ -0,0 +1,37 @@
+import { createRequestHandler } from "@react-router/express";
+import compression from "compression";
+import express from "express";
+import morgan from "morgan";
+import "react-router";
+import { expressContext } from "~/contexts";
+
+export const app = express();
+app.use(compression());
+app.disable("x-powered-by");
+
+if (process.env.NODE_ENV === "production") {
+  app.use(
+    "/assets",
+    express.static("build/client/assets", { immutable: true, maxAge: "1y" })
+  );
+  app.use(express.static("build/client", { maxAge: "1h" }));
+}
+
+app.use(morgan("tiny"));
+app.use(
+  createRequestHandler({
+    // @ts-expect-error
+    build: () => import("virtual:react-router/server-build"),
+    getLoadContext() {
+      return new Map([[expressContext, "Hello from Express"]]);
+    },
+  })
+);
+
+if (process.env.NODE_ENV === "production") {
+  console.log("Starting production server");
+  const PORT = Number.parseInt(process.env.PORT || "3000");
+  app.listen(PORT, () => {
+    console.log(`Server is running on http://localhost:${PORT}`);
+  });
+}

playground/middleware/tsconfig.json

@@ -1,31 +1,14 @@
 {
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "**/.server/**/*.ts",
-    "**/.server/**/*.tsx",
-    "**/.client/**/*.ts",
-    "**/.client/**/*.tsx",
-    "./.react-router/types/**/*"
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.vite.json" }
   ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "types": ["@react-router/node", "vite/client"],
+    "checkJs": true,
     "verbatimModuleSyntax": true,
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
-    "target": "ES2022",
-    "strict": true,
-    "allowJs": true,
     "skipLibCheck": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./app/*"]
-    },
-    "noEmit": true,
-    "rootDirs": [".", "./.react-router/types"]
+    "strict": true,
+    "noEmit": true
   }
 }

playground/middleware/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "dev-server.ts",
+    "tailwind.config.ts",
+    "vite.config.ts"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "strict": true,
+    "types": ["node"],
+    "lib": ["ES2022"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler"
+  }
+}