React router v7 (#6)

Author: AlemTuzlak

.gitignore

@@ -3,4 +3,5 @@ node_modules
 /build
 .env
 coverage
-.history
+.history
+.react-router

.vscode/settings.json

@@ -29,6 +29,7 @@
 	"[javascript][typescript][typescriptreact][javascriptreact][json][jsonc][vue][astro][svelte][css][graphql]": {
 		"editor.defaultFormatter": "biomejs.biome"
 	},
+	"typescript.tsdk": "node_modules/typescript/lib",
 	"explorer.fileNesting.patterns": {
 		"*.ts": "${basename}.*.${extname}",
 		".env": ".env.*",

app/entry.client.tsx

@@ -1,10 +1,10 @@
-import { RemixBrowser } from "@remix-run/react"
 import i18next from "i18next"
 import LanguageDetector from "i18next-browser-languagedetector"
 import Fetch from "i18next-fetch-backend"
 import { StrictMode, startTransition } from "react"
 import { hydrateRoot } from "react-dom/client"
 import { I18nextProvider, initReactI18next } from "react-i18next"
+import { HydratedRouter } from "react-router/dom"
 import { getInitialNamespaces } from "remix-i18next/client"
 import i18n from "~/localization/i18n"
 
@@ -37,7 +37,7 @@ async function hydrate() {
 			document,
 			<I18nextProvider i18n={i18next}>
 				<StrictMode>
-					<RemixBrowser />
+					<HydratedRouter />
 				</StrictMode>
 			</I18nextProvider>
 		)

app/entry.server.tsx

@@ -1,31 +1,31 @@
 import { PassThrough } from "node:stream"
-import type { AppLoadContext, EntryContext } from "@remix-run/node"
-import { RemixServer } from "@remix-run/react"
+import { createReadableStreamFromReadable } from "@react-router/node"
 import type { Context } from "hono"
 import { createInstance } from "i18next"
 import { isbot } from "isbot"
 import { renderToPipeableStream } from "react-dom/server"
 import { I18nextProvider, initReactI18next } from "react-i18next"
+import { type AppLoadContext, type EntryContext, ServerRouter } from "react-router"
 import { createHonoServer } from "react-router-hono-server/node"
 import { i18next } from "remix-hono/i18next"
 import { getClientEnv, initEnv } from "./env.server"
 import i18n from "./localization/i18n" // your i18n configuration file
 import i18nextOpts from "./localization/i18n.server"
 import { resources } from "./localization/resource"
-
 const ABORT_DELAY = 5000
 
 export default async function handleRequest(
 	request: Request,
 	responseStatusCode: number,
 	responseHeaders: Headers,
-	remixContext: EntryContext,
+	context: EntryContext,
 	appContext: AppLoadContext
 ) {
 	const callbackName = isbot(request.headers.get("user-agent")) ? "onAllReady" : "onShellReady"
 	const instance = createInstance()
 	const lng = appContext.lang
-	const ns = i18nextOpts.getRouteNamespaces(remixContext)
+	// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+	const ns = i18nextOpts.getRouteNamespaces(context as any)
 
 	await instance
 		.use(initReactI18next) // Tell our instance to use react-i18next
@@ -41,17 +41,17 @@ export default async function handleRequest(
 
 		const { pipe, abort } = renderToPipeableStream(
 			<I18nextProvider i18n={instance}>
-				<RemixServer context={remixContext} url={request.url} />
+				<ServerRouter abortDelay={ABORT_DELAY} context={context} url={request.url} />
 			</I18nextProvider>,
 			{
 				[callbackName]: () => {
 					const body = new PassThrough()
-
+					const stream = createReadableStreamFromReadable(body)
 					responseHeaders.set("Content-Type", "text/html")
 
 					resolve(
 						// @ts-expect-error - We purposely do not define the body as existent so it's not used inside loaders as it's injected there as well
-						appContext.body(body, {
+						appContext.body(stream, {
 							headers: responseHeaders,
 							status: didError ? 500 : responseStatusCode,
 						})
@@ -64,7 +64,7 @@ export default async function handleRequest(
 				},
 				onError(error: unknown) {
 					didError = true
-
+					// biome-ignore lint/suspicious/noConsole: We console log the error
 					console.error(error)
 				},
 			}
@@ -100,7 +100,7 @@ interface LoadContext extends Awaited<ReturnType<typeof getLoadContext>> {}
 /**
  * Declare our loaders and actions context type
  */
-declare module "@remix-run/node" {
+declare module "react-router" {
 	interface AppLoadContext extends Omit<LoadContext, "body"> {}
 }
 

app/env.server.ts

@@ -16,6 +16,7 @@ export const initEnv = () => {
 	const envData = envSchema.safeParse(process.env)
 
 	if (!envData.success) {
+		// biome-ignore lint/suspicious/noConsole: We want this to be logged
 		console.error("❌ Invalid environment variables:", envData.error.flatten().fieldErrors)
 		throw new Error("Invalid environment variables")
 	}
@@ -24,6 +25,7 @@ export const initEnv = () => {
 
 	// Do not log the message when running tests
 	if (env.NODE_ENV !== "test") {
+		// biome-ignore lint/suspicious/noConsole: We want this to be logged
 		console.log("✅ Environment variables loaded successfully")
 	}
 	return envData.data

app/library/language-switcher/LanguageSwitcher.tsx

@@ -1,5 +1,5 @@
-import { Link, useLocation } from "@remix-run/react"
 import { useTranslation } from "react-i18next"
+import { Link, useLocation } from "react-router"
 import { supportedLanguages } from "~/localization/resource"
 
 const LanguageSwitcher = () => {

app/root.tsx

@@ -1,13 +1,15 @@
-import type { LinksFunction } from "@remix-run/node"
-import { type LoaderFunctionArgs, json } from "@remix-run/node"
-import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "@remix-run/react"
 import { useTranslation } from "react-i18next"
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router"
+import type { LinksFunction } from "react-router"
 import { useChangeLanguage } from "remix-i18next/react"
+import type { Route } from "./+types/root"
 import { LanguageSwitcher } from "./library/language-switcher"
 import tailwindcss from "./tailwind.css?url"
 
-export async function loader({ context: { lang, clientEnv } }: LoaderFunctionArgs) {
-	return json({ lang, clientEnv })
+export async function loader({ context }: Route.LoaderArgs) {
+	if (!context) throw new Error("No context")
+	const { lang, clientEnv } = context
+	return { lang, clientEnv }
 }
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: tailwindcss }]
@@ -16,8 +18,8 @@ export const handle = {
 	i18n: "common",
 }
 
-export default function App() {
-	const { lang, clientEnv } = useLoaderData<typeof loader>()
+export default function App({ loaderData }: Route.ComponentProps) {
+	const { lang, clientEnv } = loaderData
 	const { i18n } = useTranslation()
 	useChangeLanguage(lang)
 

app/routes.ts

@@ -0,0 +1,3 @@
+import { flatRoutes } from "@react-router/fs-routes"
+
+export default flatRoutes()

app/routes/_index.tsx

@@ -1,5 +1,5 @@
-import type { MetaFunction } from "@remix-run/node"
 import { useTranslation } from "react-i18next"
+import type { MetaFunction } from "react-router"
 
 export const meta: MetaFunction = () => {
 	return [{ title: "New Remix App" }, { name: "description", content: "Welcome to Remix!" }]

app/routes/resource.locales.ts

@@ -1,9 +1,10 @@
-import { type LoaderFunctionArgs, json } from "@remix-run/node"
 import { cacheHeader } from "pretty-cache-header"
+import { data } from "react-router"
 import { z } from "zod"
 import { resources } from "~/localization/resource"
+import type { Route } from "./+types/resource.locales"
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const url = new URL(request.url)
 
 	const lng = z
@@ -35,5 +36,5 @@ export async function loader({ request }: LoaderFunctionArgs) {
 		)
 	}
 
-	return json(namespaces[ns], { headers })
+	return data(namespaces[ns], { headers })
 }