React Router Hono Server v2 (#11)

# Description
Fixes #9 
This is the migration path for the incoming new version 2.0.0

## Type of change

Please mark relevant options with an `x` in the brackets.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [x] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update
- [ ] Algorithm update - updates algorithm
documentation/questions/answers etc.
- [x] Other (please describe):

Upgrade and migrate

# How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also
list any relevant details for your test configuration

- [ ] Integration tests
- [ ] Unit tests
- [x] Manual tests
- [ ] No tests required

# Reviewer checklist

Mark everything that needs to be checked before merging the PR.

- [x] Check if the UI is working as expected and is satisfactory
- [ ] Check if the code is well documented
- [x] Check if the behavior is what is expected
- [ ] Check if the code is well tested
- [ ] Check if the code is readable and well formatted
- [ ] Additional checks (document below if any)

# Screenshots (if appropriate):

# Questions (if appropriate):

---------

Co-authored-by: Alem Tuzlak <[email protected]>

Author: rphlmr

.npmrc

@@ -3,4 +3,4 @@ side-effects-cache=false
 save-exact=true
 audit=false
 fund=false
-progress=false
+progress=false

app/entry.server.tsx

@@ -1,17 +1,14 @@
 import { PassThrough } from "node:stream"
 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(
@@ -73,41 +70,3 @@ export default async function handleRequest(
 		setTimeout(abort, ABORT_DELAY)
 	})
 }
-
-// Code below used to initialize our own Hono server!
-// Setup the .env vars
-const env = initEnv()
-
-const getLoadContext = async (c: Context) => {
-	// get the locale from the context
-	const locale = i18next.getLocale(c)
-	// get t function for the default namespace
-	const t = await i18next.getFixedT(c)
-
-	const clientEnv = getClientEnv()
-	return {
-		lang: locale,
-		t,
-		env,
-		clientEnv,
-		// We do not add this to AppLoadContext type because it's not needed in the loaders, but it's used above to handle requests
-		body: c.body,
-	}
-}
-
-interface LoadContext extends Awaited<ReturnType<typeof getLoadContext>> {}
-
-/**
- * Declare our loaders and actions context type
- */
-declare module "react-router" {
-	interface AppLoadContext extends Omit<LoadContext, "body"> {}
-}
-
-export const server = await createHonoServer({
-	configure(server) {
-		server.use("*", i18next(i18nextOpts))
-	},
-	defaultLogger: false,
-	getLoadContext,
-})

app/routes/resource.locales.ts

@@ -1,5 +1,4 @@
 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"
@@ -37,5 +36,5 @@ export async function loader({ request, context }: Route.LoaderArgs) {
 		)
 	}
 
-	return data(namespaces[ns], { headers })
+	return Response.json(namespaces[ns], { headers })
 }

app/server/context.ts

@@ -0,0 +1,32 @@
+import type { Context } from "hono"
+import { i18next } from "remix-hono/i18next"
+import { getClientEnv, initEnv } from "~/env.server"
+
+// Setup the .env vars
+const env = initEnv()
+
+export const getLoadContext = async (c: Context) => {
+	// get the locale from the context
+	const locale = i18next.getLocale(c)
+	// get t function for the default namespace
+	const t = await i18next.getFixedT(c)
+
+	const clientEnv = getClientEnv()
+	return {
+		lang: locale,
+		t,
+		env,
+		clientEnv,
+		// We do not add this to AppLoadContext type because it's not needed in the loaders, but it's used above to handle requests
+		body: c.body,
+	}
+}
+
+interface LoadContext extends Awaited<ReturnType<typeof getLoadContext>> {}
+
+/**
+ * Declare our loaders and actions context type
+ */
+declare module "react-router" {
+	interface AppLoadContext extends Omit<LoadContext, "body"> {}
+}

app/server/index.ts

@@ -0,0 +1,12 @@
+import { createHonoServer } from "react-router-hono-server/node"
+import { i18next } from "remix-hono/i18next"
+import i18nextOpts from "../localization/i18n.server"
+import { getLoadContext } from "./context"
+
+export default await createHonoServer({
+	configure(server) {
+		server.use("*", i18next(i18nextOpts))
+	},
+	defaultLogger: false,
+	getLoadContext,
+})

knip.json

@@ -1,7 +1,18 @@
 {
 	"$schema": "https://unpkg.com/knip@5/schema.json",
-	"entry": ["scripts/*.{ts,js}", "app/routes.ts","vite.config.ts"],
+	"entry": [
+		"scripts/*.{ts,js}",
+		"app/routes.ts",
+		"vite.config.ts",
+		"app/server/*.ts"
+	],
 	"remix": true,
-	"project": ["**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}", "vite.config.ts"],
-	"ignore": ["app/library/icon/icons/types.ts"]
-}
+	"lefthook": true,
+	"project": [
+		"**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}",
+		"vite.config.ts"
+	],
+	"ignore": [
+		"app/library/icon/icons/types.ts"
+	]
+}

package.json

@@ -11,7 +11,7 @@
 		"clean": "git clean -fdX --exclude=\"!.env\"",
 		"script": "tsx scripts/setup.ts",
 		"cleanup": "pnpm run script scripts/cleanup.ts",
-		"build": "NODE_ENV=production react-router build",
+		"build": "react-router build",
 		"dev": "react-router dev",
 		"start": "NODE_ENV=production node ./build/server/index.js",
 		"test": "vitest run",
@@ -30,7 +30,7 @@
 		"@forge42/seo-tools": "1.3.0",
 		"@react-router/node": "7.0.1",
 		"clsx": "2.1.1",
-		"hono": "4.6.11",
+		"hono": "4.6.12",
 		"i18next": "23.15.2",
 		"i18next-browser-languagedetector": "8.0.0",
 		"i18next-fetch-backend": "6.0.0",
@@ -40,7 +40,7 @@
 		"react-dom": "18.3.1",
 		"react-i18next": "15.1.1",
 		"react-router": "7.0.1",
-		"react-router-hono-server": "https://pkg.pr.new/rphlmr/[email protected]",
+		"react-router-hono-server": "2.0.0",
 		"remix-hono": "0.0.16",
 		"remix-i18next": "7.0.0",
 		"tailwind-merge": "2.5.4",