Skip to content

Commit b354157

Browse files
brophdawg11brophdawg11
committed
Add playground
1 parent 5314613 commit b354157

File tree

11 files changed

+205
-0
lines changed

11 files changed

+205
-0
lines changed

‎playground/middleware/.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
3+
/build
4+
.env
5+
6+
.react-router/

‎playground/middleware/app/root.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import {
2+
Link,
3+
Links,
4+
Meta,
5+
Outlet,
6+
Scripts,
7+
ScrollRestoration,
8+
} from "react-router";
9+
import type { Route } from "./+types/root";
10+
11+
export const unstable_middleware: Route.unstable_MiddlewareFunction[] = [
12+
async ({ context }, next) => {
13+
console.log("start root middleware");
14+
context.root = "ROOT";
15+
let res = await next();
16+
console.log("end root middleware");
17+
return res;
18+
},
19+
];
20+
21+
export function Layout({ children }: { children: React.ReactNode }) {
22+
return (
23+
<html lang="en">
24+
<head>
25+
<meta charSet="utf-8" />
26+
<meta name="viewport" content="width=device-width, initial-scale=1" />
27+
<Meta />
28+
<Links />
29+
</head>
30+
<body>
31+
<h1>Middleware playground</h1>
32+
<nav>
33+
<ul>
34+
<li>
35+
Server middleware routes:
36+
<ul>
37+
<li>
38+
<Link to="/">Go to /</Link>
39+
</li>
40+
<li>
41+
<Link to="/server/a">Go to /server/a</Link>
42+
</li>
43+
<li>
44+
<Link to="/server/a/b">Go to /server/a/b</Link>
45+
</li>
46+
</ul>
47+
</li>
48+
</ul>
49+
</nav>
50+
{children}
51+
<ScrollRestoration />
52+
<Scripts />
53+
</body>
54+
</html>
55+
);
56+
}
57+
58+
export default function App({ loaderData }: Route.ComponentProps) {
59+
return <Outlet />;
60+
}

‎playground/middleware/app/routes.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import type { RouteConfig } from "@react-router/dev/routes";
2+
import { flatRoutes } from "@react-router/fs-routes";
3+
4+
export default flatRoutes() satisfies RouteConfig;

‎playground/middleware/app/routes/_index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import type { Route } from "./+types/_index";
2+
3+
export default function Index({}: Route.ComponentProps) {
4+
return <></>;
5+
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Outlet } from "react-router";
2+
import type { Route } from "./+types/server.a.b";
3+
4+
export const unstable_middleware: Route.unstable_MiddlewareFunction[] = [
5+
async ({ context }, next) => {
6+
console.log("start b middleware");
7+
context.b = "B";
8+
let res = await next();
9+
console.log("end b middleware");
10+
return res;
11+
},
12+
];
13+
14+
export function loader({ context }: Route.LoaderArgs) {
15+
return JSON.stringify(context);
16+
}
17+
18+
export default function A({ loaderData }: Route.ComponentProps) {
19+
return (
20+
<>
21+
<h2>B</h2>
22+
<p>{loaderData}</p>
23+
<Outlet />
24+
</>
25+
);
26+
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Outlet } from "react-router";
2+
import type { Route } from "./+types/server.a";
3+
4+
export const unstable_middleware: Route.unstable_MiddlewareFunction[] = [
5+
async ({ context }, next) => {
6+
console.log("start a middleware");
7+
context.a = "A";
8+
let res = await next();
9+
console.log("end a middleware");
10+
return res;
11+
},
12+
];
13+
14+
export function loader({ context }: Route.LoaderArgs) {
15+
return JSON.stringify(context);
16+
}
17+
18+
export default function A({ loaderData }: Route.ComponentProps) {
19+
return (
20+
<>
21+
<h1>A</h1>
22+
<p>{loaderData}</p>
23+
<Outlet />
24+
</>
25+
);
26+
}

‎playground/middleware/package.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "@playground/framework",
3+
"version": "0.0.0",
4+
"private": true,
5+
"sideEffects": false,
6+
"type": "module",
7+
"scripts": {
8+
"build": "react-router build",
9+
"dev": "react-router dev",
10+
"start": "react-router-serve ./build/server/index.js",
11+
"typecheck": "react-router typegen && tsc"
12+
},
13+
"dependencies": {
14+
"@react-router/node": "workspace:*",
15+
"@react-router/serve": "workspace:*",
16+
"isbot": "^5.1.11",
17+
"react": "^18.2.0",
18+
"react-dom": "^18.2.0",
19+
"react-router": "workspace:*"
20+
},
21+
"devDependencies": {
22+
"@react-router/dev": "workspace:*",
23+
"@react-router/fs-routes": "workspace:*",
24+
"@types/react": "^18.2.20",
25+
"@types/react-dom": "^18.2.7",
26+
"typescript": "^5.1.6",
27+
"vite": "^6.0.0",
28+
"vite-tsconfig-paths": "^4.2.1"
29+
},
30+
"engines": {
31+
"node": ">=20.0.0"
32+
}
33+
}

‎playground/middleware/public/favicon.ico‎

14.7 KB
Binary file not shown.

‎playground/middleware/react-router.config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import type { Config } from "@react-router/dev/config";
2+
3+
export default {
4+
future: {
5+
unstable_middleware: true,
6+
},
7+
} satisfies Config;

‎playground/middleware/tsconfig.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"include": [
3+
"**/*.ts",
4+
"**/*.tsx",
5+
"**/.server/**/*.ts",
6+
"**/.server/**/*.tsx",
7+
"**/.client/**/*.ts",
8+
"**/.client/**/*.tsx",
9+
"./.react-router/types/**/*"
10+
],
11+
"compilerOptions": {
12+
"lib": ["DOM", "DOM.Iterable", "ES2022"],
13+
"types": ["@react-router/node", "vite/client"],
14+
"verbatimModuleSyntax": true,
15+
"esModuleInterop": true,
16+
"jsx": "react-jsx",
17+
"module": "ESNext",
18+
"moduleResolution": "Bundler",
19+
"resolveJsonModule": true,
20+
"target": "ES2022",
21+
"strict": true,
22+
"allowJs": true,
23+
"skipLibCheck": true,
24+
"baseUrl": ".",
25+
"paths": {
26+
"~/*": ["./app/*"]
27+
},
28+
"noEmit": true,
29+
"rootDirs": [".", "./.react-router/types"]
30+
}
31+
}

0 commit comments

Comments
 (0)