feat(website): upgrade to react router v7

IgnisDa · Jan 29, 2025 · 919ed60 · 919ed60
1 parent a86ecc3
commit 919ed60
Show file tree

Hide file tree

Showing 21 changed files with 1,050 additions and 99 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@
 .env
 .moon/cache
 .moon/docker
+.react-router
 .next/
 .pnp.*
 Thumbs.db

diff --git a/apps/website/Dockerfile b/apps/website/Dockerfile
@@ -29,4 +29,4 @@ COPY --from=website-builder --chown=ryot:ryot /app/apps/website/node_modules ./n
 COPY --from=website-builder --chown=ryot:ryot /app/apps/website/package.json ./package.json
 COPY --from=website-builder --chown=ryot:ryot /app/apps/website/build ./build
 COPY --chown=ryot:ryot apps/website/app/drizzle/migrations app/drizzle/migrations
-CMD npx remix-serve ./build/server/index.js
+CMD npx react-router-serve ./build/server/index.js
diff --git a/apps/website/app/entry.client.tsx b/apps/website/app/entry.client.tsx
@@ -1,12 +1,12 @@
-import { RemixBrowser } from "@remix-run/react";
 import { StrictMode, startTransition } from "react";
 import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
 
 startTransition(() => {
 	hydrateRoot(
 		document,
 		<StrictMode>
-			<RemixBrowser />
+			<HydratedRouter />
 		</StrictMode>,
 	);
 });
diff --git a/apps/website/app/entry.server.tsx b/apps/website/app/entry.server.tsx
@@ -1,10 +1,10 @@
 import { PassThrough } from "node:stream";
-import type { AppLoadContext, EntryContext } from "@remix-run/node";
-import { createReadableStreamFromReadable } from "@remix-run/node";
-import { RemixServer } from "@remix-run/react";
+import { createReadableStreamFromReadable } from "@react-router/node";
 import { migrate } from "drizzle-orm/postgres-js/migrator";
 import { isbot } from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
+import type { AppLoadContext, EntryContext } from "react-router";
+import { ServerRouter } from "react-router";
 import { db } from "./lib/config.server";
 
 migrate(db, { migrationsFolder: "app/drizzle/migrations" }).catch((error) => {
@@ -18,38 +18,34 @@ export default function handleRequest(
 	request: Request,
 	responseStatusCode: number,
 	responseHeaders: Headers,
-	remixContext: EntryContext,
+	reactRouterContext: EntryContext,
 	_loadContext: AppLoadContext,
 ) {
 	return isbot(request.headers.get("user-agent") || "")
 		? handleBotRequest(
 				request,
 				responseStatusCode,
 				responseHeaders,
-				remixContext,
+				reactRouterContext,
 			)
 		: handleBrowserRequest(
 				request,
 				responseStatusCode,
 				responseHeaders,
-				remixContext,
+				reactRouterContext,
 			);
 }
 
 function handleBotRequest(
 	request: Request,
 	responseStatusCode: number,
 	responseHeaders: Headers,
-	remixContext: EntryContext,
+	reactRouterContext: EntryContext,
 ) {
 	return new Promise((resolve, reject) => {
 		let shellRendered = false;
 		const { pipe, abort } = renderToPipeableStream(
-			<RemixServer
-				context={remixContext}
-				url={request.url}
-				abortDelay={ABORT_DELAY}
-			/>,
+			<ServerRouter context={reactRouterContext} url={request.url} />,
 			{
 				onAllReady() {
 					shellRendered = true;
@@ -88,16 +84,12 @@ function handleBrowserRequest(
 	request: Request,
 	responseStatusCode: number,
 	responseHeaders: Headers,
-	remixContext: EntryContext,
+	reactRouterContext: EntryContext,
 ) {
 	return new Promise((resolve, reject) => {
 		let shellRendered = false;
 		const { pipe, abort } = renderToPipeableStream(
-			<RemixServer
-				context={remixContext}
-				url={request.url}
-				abortDelay={ABORT_DELAY}
-			/>,
+			<ServerRouter context={reactRouterContext} url={request.url} />,
 			{
 				onShellReady() {
 					shellRendered = true;

diff --git a/apps/website/app/lib/components/Pricing.tsx b/apps/website/app/lib/components/Pricing.tsx
@@ -1,7 +1,7 @@
-import { Link } from "@remix-run/react";
 import { changeCase } from "@ryot/ts-utils";
 import { IconPlayerPlay } from "@tabler/icons-react";
 import { useState } from "react";
+import { Link } from "react-router";
 import { $path } from "remix-routes";
 import type { TPrices } from "../config.server";
 import { Button } from "./ui/button";

diff --git a/apps/website/app/lib/config.server.ts b/apps/website/app/lib/config.server.ts
@@ -1,6 +1,5 @@
 import { Environment, Paddle } from "@paddle/paddle-node-sdk";
 import { render } from "@react-email/render";
-import { createCookie } from "@remix-run/node";
 import { formatDateToNaiveDate, zodBoolAsString } from "@ryot/ts-utils";
 import { Unkey } from "@unkey/api";
 import type { Dayjs } from "dayjs";
@@ -9,6 +8,7 @@ import { drizzle } from "drizzle-orm/postgres-js";
 import { GraphQLClient } from "graphql-request";
 import { createTransport } from "nodemailer";
 import { Issuer } from "openid-client";
+import { createCookie } from "react-router";
 import { Honeypot } from "remix-utils/honeypot/server";
 import { z } from "zod";
 import * as schema from "~/drizzle/schema.server";

diff --git a/apps/website/app/root.tsx b/apps/website/app/root.tsx
@@ -8,14 +8,14 @@ import {
 	isRouteErrorResponse,
 	useLoaderData,
 	useRouteError,
-} from "@remix-run/react";
+} from "react-router";
 import { HoneypotProvider } from "remix-utils/honeypot/react";
 import "./tailwind.css";
 import type {
 	LinksFunction,
 	LoaderFunctionArgs,
 	MetaFunction,
-} from "@remix-run/node";
+} from "react-router";
 import { $path } from "remix-routes";
 import { withFragment } from "ufo";
 import { Toaster } from "./lib/components/ui/sonner";

diff --git a/apps/website/app/routes.ts b/apps/website/app/routes.ts
@@ -0,0 +1,4 @@
+import type { RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
+
+export default flatRoutes() satisfies RouteConfig;
diff --git a/apps/website/app/routes/_index.tsx b/apps/website/app/routes/_index.tsx
@@ -1,17 +1,5 @@
 import { randomBytes } from "node:crypto";
 import TTLCache from "@isaacs/ttlcache";
-import {
-	type ActionFunctionArgs,
-	type LoaderFunctionArgs,
-	data,
-	redirect,
-} from "@remix-run/node";
-import {
-	Form,
-	Link,
-	useLoaderData,
-	useRouteLoaderData,
-} from "@remix-run/react";
 import LoginCodeEmail from "@ryot/transactional/emails/LoginCode";
 import {
 	cn,
@@ -29,6 +17,8 @@ import {
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 import { REGEXP_ONLY_DIGITS } from "input-otp";
+import { data, redirect } from "react-router";
+import { Form, Link, useLoaderData, useRouteLoaderData } from "react-router";
 import { $path } from "remix-routes";
 import { HoneypotInputs } from "remix-utils/honeypot/react";
 import { SpamError } from "remix-utils/honeypot/server";
@@ -55,6 +45,7 @@ import {
 } from "~/lib/config.server";
 import { startUrl } from "~/lib/utils";
 import type { loader as rootLoader } from "../root";
+import type { Route } from "./+types/_index";
 
 dayjs.extend(duration);
 
@@ -65,7 +56,7 @@ const searchParamsSchema = z.object({
 
 export type SearchParams = z.infer<typeof searchParamsSchema>;
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
 	const query = parseSearchQuery(request, searchParamsSchema);
 	return { prices, query };
 };
@@ -82,7 +73,7 @@ const generateOtp = (length: number) => {
 	return otp.toString().padStart(length, "0");
 };
 
-export const action = async ({ request }: ActionFunctionArgs) => {
+export const action = async ({ request }: Route.ActionArgs) => {
 	const formData = await request.clone().formData();
 	const intent = getActionIntent(request);
 	return await match(intent)

diff --git a/apps/website/app/routes/callback.tsx b/apps/website/app/routes/callback.tsx
@@ -1,5 +1,5 @@
-import { type LoaderFunctionArgs, redirect } from "@remix-run/node";
 import { eq } from "drizzle-orm";
+import { redirect } from "react-router";
 import { $path } from "remix-routes";
 import { match } from "ts-pattern";
 import { customers } from "~/drizzle/schema.server";
@@ -9,8 +9,9 @@ import {
 	oauthClient,
 	websiteAuthCookie,
 } from "~/lib/config.server";
+import type { Route } from "./+types/callback";
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
 	const client = await oauthClient();
 	const params = client.callbackParams(request.url);
 	const tokenSet = await client.callback(OAUTH_CALLBACK_URL, params, {

diff --git a/apps/website/app/routes/features.tsx b/apps/website/app/routes/features.tsx
@@ -1,4 +1,3 @@
-import type { LoaderFunctionArgs, MetaArgs } from "@remix-run/node";
 import { cn, snakeCase } from "@ryot/ts-utils";
 import Autoplay from "embla-carousel-autoplay";
 import {
@@ -34,14 +33,16 @@ import {
 	LucideVibrate,
 	LucideWatch,
 } from "lucide-react";
+import type { MetaArgs } from "react-router";
 import {
 	Carousel,
 	CarouselContent,
 	CarouselItem,
 } from "~/lib/components/ui/carousel";
 import { logoUrl } from "~/lib/utils";
+import type { Route } from "./+types/features";
 
-export const loader = (_args: LoaderFunctionArgs) => {
+export const loader = (_args: Route.LoaderArgs) => {
 	return {};
 };
 

diff --git a/apps/website/app/routes/me.tsx b/apps/website/app/routes/me.tsx
@@ -3,12 +3,6 @@ import {
 	type Paddle,
 	initializePaddle,
 } from "@paddle/paddle-js";
-import type {
-	ActionFunctionArgs,
-	LoaderFunctionArgs,
-	MetaArgs,
-} from "@remix-run/node";
-import { Form, redirect, useLoaderData } from "@remix-run/react";
 import PurchaseCompleteEmail from "@ryot/transactional/emails/PurchaseComplete";
 import {
 	changeCase,
@@ -19,6 +13,8 @@ import { Unkey } from "@unkey/api";
 import dayjs from "dayjs";
 import { eq } from "drizzle-orm";
 import { useEffect, useState } from "react";
+import type { MetaArgs } from "react-router";
+import { Form, redirect, useLoaderData } from "react-router";
 import { toast } from "sonner";
 import { match } from "ts-pattern";
 import { withQuery } from "ufo";
@@ -38,8 +34,9 @@ import {
 	websiteAuthCookie,
 } from "~/lib/config.server";
 import { startUrl } from "~/lib/utils";
+import type { Route } from "./+types/me";
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
 	const customerDetails = await getCustomerFromCookie(request);
 	if (!customerDetails) return redirect(startUrl);
 	return {
@@ -54,7 +51,7 @@ export const meta = (_args: MetaArgs<typeof loader>) => {
 	return [{ title: "My account | Ryot" }];
 };
 
-export const action = async ({ request }: ActionFunctionArgs) => {
+export const action = async ({ request }: Route.ActionArgs) => {
 	const intent = getActionIntent(request);
 	return await match(intent)
 		.with("regenerateUnkeyKey", async () => {

diff --git a/apps/website/app/routes/paddle-webhook.tsx b/apps/website/app/routes/paddle-webhook.tsx
@@ -1,5 +1,4 @@
 import { EventName } from "@paddle/paddle-node-sdk";
-import type { ActionFunctionArgs } from "@remix-run/node";
 import {
 	RegisterUserDocument,
 	UpdateUserDocument,
@@ -23,6 +22,7 @@ import {
 	serverGqlService,
 	serverVariables,
 } from "~/lib/config.server";
+import type { Route } from "./+types/paddle-webhook";
 
 const getRenewOnFromPlanType = (planType: TPlanTypes) =>
 	match(planType)
@@ -31,7 +31,7 @@ const getRenewOnFromPlanType = (planType: TPlanTypes) =>
 		.with("monthly", () => dayjs().add(1, "month"))
 		.exhaustive();
 
-export const action = async ({ request }: ActionFunctionArgs) => {
+export const action = async ({ request }: Route.ActionArgs) => {
 	const paddleSignature = request.headers.get("paddle-signature");
 	if (!paddleSignature) return Response.json({ error: "No paddle signature" });
 

diff --git a/apps/website/app/routes/terms.tsx b/apps/website/app/routes/terms.tsx
@@ -1,8 +1,9 @@
-import type { LoaderFunctionArgs, MetaArgs } from "@remix-run/node";
+import type { MetaArgs } from "react-router";
+import type { Route } from "./+types/terms";
 
 const email = "[email protected]";
 
-export const loader = (_args: LoaderFunctionArgs) => {
+export const loader = (_args: Route.LoaderArgs) => {
 	return {};
 };
 

diff --git a/apps/website/env.d.ts b/apps/website/env.d.ts
diff --git a/apps/website/moon.yml b/apps/website/moon.yml
@@ -1,15 +1,15 @@
 dependsOn:
-  - 'assets'
+  - "assets"
 
 tasks:
   dev:
-    command: 'remix vite:dev --port 5200 --host'
+    command: "react-router dev --port 5200 --host"
     local: true
 
   build:
-    command: 'remix vite:build'
-    inputs: ['@group(remix)']
-    outputs: ['build']
+    command: "react-router build"
+    inputs: ["@group(remix)"]
+    outputs: ["build"]
 
   typecheck:
-    inputs: ['@group(remix)']
+    inputs: ["@group(remix)"]
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -15,9 +15,9 @@
 		"@radix-ui/react-slot": "1.1.1",
 		"@radix-ui/react-tooltip": "1.1.7",
 		"@react-email/components": "0.0.32",
-		"@remix-run/node": "2.15.2",
-		"@remix-run/react": "2.15.2",
-		"@remix-run/serve": "2.15.2",
+		"@react-router/fs-routes": "7.1.3",
+		"@react-router/node": "^7.0.0",
+		"@react-router/serve": "^7.0.0",
 		"@ryot/generated": "workspace:*",
 		"@ryot/graphql": "workspace:*",
 		"@ryot/transactional": "workspace:*",
@@ -46,6 +46,7 @@
 		"postgres": "3.4.5",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
+		"react-router": "^7.0.0",
 		"remix-routes": "1.7.7",
 		"remix-utils": "7.7.0",
 		"sonner": "1.7.2",
@@ -57,7 +58,7 @@
 		"zod": "3.24.1"
 	},
 	"devDependencies": {
-		"@remix-run/dev": "2.15.2",
+		"@react-router/dev": "^7.0.0",
 		"@tailwindcss/typography": "0.5.16",
 		"@types/crypto-js": "4.2.2",
 		"@types/lodash": "4.17.14",
@@ -69,7 +70,7 @@
 		"tailwindcss": "4.0.0",
 		"typescript": "5.7.3",
 		"typescript-remix-routes-plugin": "1.0.1",
-		"vite": "5.4.14",
+		"vite": "6.0.11",
 		"vite-tsconfig-paths": "5.1.4"
 	},
 	"engines": {

diff --git a/apps/website/react-router.config.ts b/apps/website/react-router.config.ts
@@ -0,0 +1,5 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+	ssr: true,
+} satisfies Config;