chore: Remix to React Router 7 (#50)

Author: yusukebe

README.md

@@ -1,6 +1,6 @@
-# hono-remix-adapter
+# hono-react-router-adapter
 
-`hono-remix-adapter` is a set of tools for adapting between Hono and React Router. It is composed of a Vite plugin and handlers that enable it to support platforms like Cloudflare Workers and Node.js. You just create Hono app, and it will be applied to your React Router app.
+`hono-react-router-adapter` is a set of tools for adapting between Hono and React Router. It is composed of a Vite plugin and handlers that enable it to support platforms like Cloudflare Workers and Node.js. You just create Hono app, and it will be applied to your React Router app.
 
 ```ts
 // server/index.ts
@@ -10,7 +10,7 @@ const app = new Hono()
 
 app.use(async (c, next) => {
   await next()
-  c.header('X-Powered-By', 'Remix and Hono')
+  c.header('X-Powered-By', 'React Router and Hono')
 })
 
 app.get('/api', (c) => {
@@ -26,12 +26,12 @@ This means you can create API routes with Hono's syntax and use a lot of Hono's
 
 > [!WARNING]
 >
-> `hono-remix-adapter` is currently unstable. The API may be changed without announcement in the future.
+> `hono-react-router-adapter` is currently unstable. The API may be changed without announcement in the future.
 
 ## Install
 
 ```bash
-npm i hono-remix-adapter hono
+npm i hono-react-router-adapter hono
 ```
 
 ## How to use
@@ -40,12 +40,12 @@ Edit your `vite.config.ts`:
 
 ```ts
 // vite.config.ts
-import serverAdapter from 'hono-remix-adapter/vite'
+import serverAdapter from 'hono-react-router-adapter/vite'
 
 export default defineConfig({
   plugins: [
     // ...
-    remix(),
+    reactRouter(),
     serverAdapter({
       entry: 'server/index.ts',
     }),
@@ -73,12 +73,12 @@ To support Cloudflare Workers and Cloudflare Pages, add the adapter in `@hono/vi
 ```ts
 // vite.config.ts
 import adapter from '@hono/vite-dev-server/cloudflare'
-import serverAdapter from 'hono-remix-adapter/vite'
+import serverAdapter from 'hono-react-router-adapter/vite'
 
 export default defineConfig({
   plugins: [
     // ...
-    remix(),
+    reactRouter(),
     serverAdapter({
       adapter, // Add Cloudflare adapter
       entry: 'server/index.ts',
@@ -91,7 +91,7 @@ To deploy your app to Cloudflare Workers, you can write the following handler on
 
 ```ts
 // worker.ts
-import handle from 'hono-remix-adapter/cloudflare-workers'
+import handle from 'hono-react-router-adapter/cloudflare-workers'
 import * as build from './build/server'
 import server from './server'
 
@@ -113,7 +113,7 @@ To deploy your app to Cloudflare Pages, you can write the following handler on `
 
 ```ts
 // functions/[[path]].ts
-import handle from 'hono-remix-adapter/cloudflare-pages'
+import handle from 'hono-react-router-adapter/cloudflare-pages'
 import * as build from '../build/server'
 import server from '../server'
 
@@ -122,13 +122,13 @@ export const onRequest = handle(build, server)
 
 ## Node.js
 
-If you want to run your app on Node.js, you can use `hono-remix-adapter/node`. Write `main.ts`:
+If you want to run your app on Node.js, you can use `hono-react-router-adapter/node`. Write `main.ts`:
 
 ```ts
 // main.ts
 import { serve } from '@hono/node-server'
 import { serveStatic } from '@hono/node-server/serve-static'
-import handle from 'hono-remix-adapter/node'
+import handle from 'hono-react-router-adapter/node'
 import * as build from './build/server'
 import { getLoadContext } from './load-context'
 import server from './server'
@@ -158,19 +158,18 @@ esbuild main.ts --bundle --outfile=main.mjs --platform=node --target=node16.8 --
 
 ## `getLoadContext`
 
-If you want to add extra context values when you use Remix routes, like in the following use case:
+If you want to add extra context values when you use React Router routes, like in the following use case:
 
 ```ts
 // app/routes/_index.tsx
-import type { LoaderFunctionArgs } from '@remix-run/cloudflare'
-import { useLoaderData } from '@remix-run/react'
+import type { Route } from './+types/_index'
 
-export const loader = ({ context }) => {
+export const loader = (args: Route.LoaderArgs) => {
   return { extra: context.extra }
 }
 
-export default function Index() {
-  const { extra } = useLoaderData<typeof loader>()
+export default function Index({ loaderData }: Route.ComponentProps) {
+  const { extra } = loaderData
   return <h1>Extra is {extra}</h1>
 }
 ```
@@ -210,7 +209,7 @@ Then import the `getLoadContext` and add it to the `serverAdapter` as an argumen
 // vite.config.ts
 import adapter from '@hono/vite-dev-server/cloudflare'
 import { reactRouter } from '@react-router/dev'
-import serverAdapter from 'hono-remix-adapter/vite'
+import serverAdapter from 'hono-react-router-adapter/vite'
 import { defineConfig } from 'vite'
 import { getLoadContext } from './load-context'
 
@@ -231,7 +230,7 @@ For Cloudflare Workers, you can add it to the `handler` function:
 
 ```ts
 // worker.ts
-import handle from 'hono-remix-adapter/cloudflare-workers'
+import handle from 'hono-react-router-adapter/cloudflare-workers'
 import * as build from './build/server'
 import { getLoadContext } from './load-context'
 import app from './server'
@@ -243,7 +242,7 @@ You can also add it for Cloudflare Pages:
 
 ```ts
 // functions/[[path]].ts
-import handle from 'hono-remix-adapter/cloudflare-pages'
+import handle from 'hono-react-router-adapter/cloudflare-pages'
 import { getLoadContext } from 'load-context'
 import * as build from '../build/server'
 import server from '../server'
@@ -255,7 +254,7 @@ This way is almost the same as [Remix](https://remix.run/docs/en/main/guides/vit
 
 ### Getting Hono context
 
-You can get the Hono context in Remix routes. For example, you can pass the value with `c.set()` from your Hono instance in the `server/index.ts`:
+You can get the Hono context in React Router routes. For example, you can pass the value with `c.set()` from your Hono instance in the `server/index.ts`:
 
 ```ts
 // server/index.ts
@@ -279,14 +278,14 @@ In the React Router route, you can get the context from `args.context.hono.conte
 
 ```ts
 // app/routes/_index.tsx
-import { Router } from "./types/_index"
+import { Router } from './types/_index'
 
 export const loader = ({ context }) => {
   const message = args.context.hono.context.get('message')
   return { message }
 }
 
-export default function Index({ loaderData }:Route.ComponentProps) {
+export default function Index({ loaderData }: Route.ComponentProps) {
   const { message } = loaderData
   return <h1>Message is {message}</h1>
 }
@@ -364,7 +363,7 @@ app.use(async (c, next) => {
 export default app
 ```
 
-You can retrieve and process the context saved in Hono from Remix as follows:
+You can retrieve and process the context saved in Hono from React Router as follows:
 
 ```ts
 // app/routes/_index.tsx
@@ -377,7 +376,7 @@ export const loader = () => {
 }
 ```
 
-## Auth middleware for Remix routes
+## Auth middleware for React Router routes
 
 If you want to add Auth Middleware, e.g. Basic Auth middleware, please be careful that users can access the protected pages with SPA tradition. To prevent this, add a `loader` to the page:
 

examples/cloudflare-pages/app/entry.client.tsx

@@ -1,9 +1,3 @@
-/**
- * By default, Remix will handle hydrating your app on the client for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.client
- */
-
 import { StrictMode, startTransition } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 import { HydratedRouter } from 'react-router/dom'

examples/cloudflare-pages/app/entry.server.tsx

@@ -1,9 +1,3 @@
-/**
- * By default, Remix will handle generating the HTTP Response for you.
- * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
- * For more information, see https://remix.run/file-conventions/entry.server
- */
-
 import { isbot } from 'isbot'
 import { renderToReadableStream } from 'react-dom/server'
 import type { AppLoadContext, EntryContext } from 'react-router'

examples/cloudflare-pages/app/routes/_index.tsx

@@ -1,5 +1,5 @@
 import type { Route } from './+types/_index'
-import logoDark from '/logo-dark.png?inline'
+import logoDark from '/logo.png?inline'
 
 export const loader = (args: Route.LoaderArgs) => {
   const extra = args.context.extra
@@ -13,7 +13,7 @@ export default function Index({ loaderData }: Route.ComponentProps) {
   const { cloudflare, extra, myVarInVariables, isWaitUntilDefined } = loaderData
   return (
     <div>
-      <h1>Remix and Hono</h1>
+      <h1>React Router and Hono</h1>
       <h2>Var is {cloudflare.env.MY_VAR}</h2>
       <h3>
         {cloudflare.cf ? 'cf,' : ''}
@@ -23,7 +23,7 @@ export default function Index({ loaderData }: Route.ComponentProps) {
       <h4>Extra is {extra}</h4>
       <h5>Var in Variables is {myVarInVariables}</h5>
       <h6>waitUntil is {isWaitUntilDefined ? 'defined' : 'not defined'}</h6>
-      <img src={logoDark} alt='Remix' />
+      <img src={logoDark} alt='React Router' />
     </div>
   )
 }

examples/cloudflare-pages/e2e.test.ts

@@ -5,10 +5,10 @@ test('Should return 200 response - /', async ({ page }) => {
   expect(response?.status()).toBe(200)
 
   const headers = response?.headers() ?? {}
-  expect(headers['x-powered-by']).toBe('Remix and Hono')
+  expect(headers['x-powered-by']).toBe('React Router and Hono')
 
   const contentH1 = await page.textContent('h1')
-  expect(contentH1).toBe('Remix and Hono')
+  expect(contentH1).toBe('React Router and Hono')
 
   const contentH2 = await page.textContent('h2')
   expect(contentH2).toBe('Var is My Value')
@@ -25,7 +25,7 @@ test('Should return 200 response - /', async ({ page }) => {
   const contentH6 = await page.textContent('h6')
   expect(contentH6).toBe('waitUntil is defined')
 
-  const imageResponse = await page.goto('/logo-dark.png?inline')
+  const imageResponse = await page.goto('/logo.png?inline')
   expect(imageResponse?.status()).toBe(200)
 })
 

examples/cloudflare-pages/functions/[[path]].ts

@@ -1,5 +1,5 @@
 // functions/[[path]].ts
-import handle from 'hono-remix-adapter/cloudflare-pages'
+import handle from 'hono-react-router-adapter/cloudflare-pages'
 import { getLoadContext } from 'load-context'
 import * as build from '../build/server'
 import server from '../server'

examples/cloudflare-pages/public/favicon.ico

@@ -13,7 +13,7 @@ const app = new Hono<{
 app.use(async (c, next) => {
   c.set('MY_VAR_IN_VARIABLES', 'My variable set in c.set')
   await next()
-  c.header('X-Powered-By', 'Remix and Hono')
+  c.header('X-Powered-By', 'React Router and Hono')
 })
 
 app.get('/api', (c) => {