Skip to content

Commit

Permalink
refactor(web): use react-router
Browse files Browse the repository at this point in the history
  • Loading branch information
Neosoulink committed Nov 29, 2024
1 parent 31be2fc commit e6563da
Show file tree
Hide file tree
Showing 46 changed files with 1,356 additions and 210 deletions.
8 changes: 7 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -56,5 +56,11 @@ yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

# Others
# Misc
.DS_Store
*.pem
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
18 changes: 18 additions & 0 deletions apps/web/app/assets/styles/app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
margin: 0;
padding: 0;
top: 0;
left: 0;
overflow: hidden;

@apply bg-white dark:bg-gray-950;

@media (prefers-color-scheme: dark) {
color-scheme: dark;
}
}
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
76 changes: 76 additions & 0 deletions apps/web/app/root.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import {
isRouteErrorResponse,
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration
} from "react-router";

import type { Route } from "./+types/root";
import stylesheet from "./assets/styles/app.css?url";

export const links: Route.LinksFunction = () => [
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
crossOrigin: "anonymous"
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
},
{ rel: "stylesheet", href: stylesheet }
];

export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}

export default function App() {
return <Outlet />;
}

export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
let message = "Oops!";
let details = "An unexpected error occurred.";
let stack: string | undefined;

if (isRouteErrorResponse(error)) {
message = error.status === 404 ? "404" : "Error";
details =
error.status === 404
? "The requested page could not be found."
: error.statusText || details;
} else if (import.meta.env.DEV && error && error instanceof Error) {
details = error.message;
stack = error.stack;
}

return (
<main className="pt-16 p-4 container mx-auto">
<h1>{message}</h1>
<p>{details}</p>
{stack && (
<pre className="w-full p-4 overflow-x-auto">
<code>{stack}</code>
</pre>
)}
</main>
);
}
3 changes: 3 additions & 0 deletions apps/web/app/routes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { type RouteConfig, index } from "@react-router/dev/routes";

export default [index("routes/home.tsx")] satisfies RouteConfig;
10 changes: 10 additions & 0 deletions apps/web/app/routes/home.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export function meta() {
return [
{ title: "New React Router App" },
{ name: "description", content: "Welcome to React Router!" }
];
}

export default function Home() {
return <div />;
}
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { useEffect, useMemo } from "react";

import { merge, Subscription } from "rxjs";
import { useAi, useGame, useSocket } from "./shared/hooks";
import { PlayerModel } from "./shared/models";
import { SOCKET_PERFORM_MOVE_TOKEN } from "@chess-d/shared";
import { FC, useEffect, useMemo } from "react";
import { merge, Subscription } from "rxjs";

import { useAi, useGame, useSocket } from "../hooks";
import { PlayerModel } from "../models";

export const App = () => {
export const GameComponent: FC = () => {
const {
setup: setupGame,
app,
Expand Down Expand Up @@ -81,5 +81,5 @@ export const App = () => {
socket
]);

return <div />;
return null;
};
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
15 changes: 1 addition & 14 deletions apps/web/eslint.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tsEslint from "typescript-eslint";

const __filename = fileURLToPath(import.meta.url);
Expand All @@ -19,7 +17,7 @@ export default tsEslint.config(
...tsEslint.configs.recommended,
{ ignores: ["dist"] },
{
files: ["./src/**/*.js?(x)", "./src/**/*.ts?(x)"],
files: ["./app/**/*.js?(x)", "./app/**/*.ts?(x)"],
languageOptions: {
parserOptions: {
project: true
Expand All @@ -31,17 +29,6 @@ export default tsEslint.config(
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser
},
plugins: {
"react-hooks": reactHooks,
"react-refresh": reactRefresh
},
rules: {
...reactHooks.configs.recommended.rules,
"react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true }
]
}
},
...compat.extends("./node_modules/@chess-d/configs/eslint/base.js")
Expand Down
13 changes: 0 additions & 13 deletions apps/web/index.html

This file was deleted.

25 changes: 18 additions & 7 deletions apps/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,28 @@
"name": "web",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --clearScreen false --host",
"build": "tsc -b && vite build",
"preview": "vite preview",
"lint": "tsc && eslint \"src/**/*.ts\"",
"build": "react-router build",
"dev": "react-router dev --host",
"start": "react-router-serve ./build/server/index.js",
"typecheck": "react-router typegen && pnpm run lint",
"lint": "tsc && eslint .",
"test": "jest --passWithNoTests"
},
"type": "module",
"dependencies": {
"@chess-d/ai": "workspace:*",
"@chess-d/chessboard": "workspace:*",
"@chess-d/shared": "workspace:*",
"@quick-threejs/reactive": "^0.1.16",
"@quick-threejs/utils": "^0.1.11",
"@react-router/node": "^7.0.1",
"@react-router/serve": "^7.0.1",
"isbot": "^5.1.17",
"chess.js": "1.0.0-beta.8",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^7.0.1",
"rxjs": "^7.8.1",
"socket.io-client": "^4.8.1",
"threads": "^1.7.0",
Expand All @@ -29,9 +34,15 @@
"@types/react": "^18.3.11",
"@types/react-dom": "^18.3.1",
"@types/three": "^0.169.0",
"@react-router/dev": "^7.0.1",
"@types/node": "^20",
"@vitejs/plugin-react": "^4.3.2",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.12",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.15",
"typescript": "^5.6.3",
"vite": "^5.4.11",
"vite-tsconfig-paths": "^5.1.2",
"reflect-metadata": "^0.2.0",
"tsyringe": "^4.8.0"
}
Expand Down
Binary file added apps/web/public/favicon.ico
Binary file not shown.
7 changes: 7 additions & 0 deletions apps/web/react-router.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import type { Config } from "@react-router/dev/config";

export default {
// Config options...
// Server-side render by default, to enable SPA mode set this to `false`
ssr: true
} satisfies Config;
8 changes: 0 additions & 8 deletions apps/web/src/assets/styles/main.css

This file was deleted.

13 changes: 0 additions & 13 deletions apps/web/src/main.tsx

This file was deleted.

22 changes: 22 additions & 0 deletions apps/web/tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import type { Config } from "tailwindcss";

export default {
content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
fontFamily: {
sans: [
'"Inter"',
"ui-sans-serif",
"system-ui",
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"'
]
}
}
},
plugins: []
} satisfies Config;
15 changes: 0 additions & 15 deletions apps/web/tsconfig.app.json

This file was deleted.

21 changes: 17 additions & 4 deletions apps/web/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,20 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
"extends": "@chess-d/configs/typescript/base.json",
"compilerOptions": {
"allowImportingTsExtensions": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react-jsx",
"rootDirs": [".", "./.react-router/types"],
"baseUrl": ".",
"paths": {
"~/*": ["./app/*"]
},
"outDir": "dist"
},
"include": [
"**/*",
"**/.server/**/*",
"**/.client/**/*",
".react-router/types/**/*"
]
}
12 changes: 0 additions & 12 deletions apps/web/tsconfig.node.json

This file was deleted.

1 change: 0 additions & 1 deletion apps/web/tsconfig.node.tsbuildinfo

This file was deleted.

13 changes: 10 additions & 3 deletions apps/web/vite.config.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
import { reactRouter } from "@react-router/dev/vite";
import autoprefixer from "autoprefixer";
import tailwindcss from "tailwindcss";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
css: {
postcss: {
plugins: [tailwindcss, autoprefixer]
}
},
plugins: [reactRouter(), tsconfigPaths()]
});
Loading

0 comments on commit e6563da

Please sign in to comment.