@@ -217,6 +217,88 @@ export const onRequest = handle(build, server, { getLoadContext })
217217
218218This way is almost the same as [ Remix] ( https://remix.run/docs/en/main/guides/vite#augmenting-load-context ) .
219219
220+ ### Getting Hono context
221+
222+ 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 ` :
223+
224+ ``` ts
225+ // server/index.ts
226+ import { Hono } from ' hono'
227+
228+ const app = new Hono <{
229+ Variables: {
230+ message: string
231+ }
232+ }>()
233+
234+ app .use (async (c , next ) => {
235+ c .set (' message' , ' Hi from Hono' )
236+ await next ()
237+ })
238+
239+ export default app
240+ ```
241+
242+ In the Remix route, you can get the context by ` args.context.hono ` :
243+
244+ ``` ts
245+ // app/routes/_index.tsx
246+ import type { LoaderFunctionArgs } from ' @remix-run/cloudflare'
247+ import { useLoaderData } from ' @remix-run/react'
248+
249+ export const loader = ({ context }) => {
250+ const message = args .context .hono .context .get (' message' )
251+ return { message }
252+ }
253+
254+ export default function Index() {
255+ const { message } = useLoaderData <typeof loader >()
256+ return <h1 >Message is {message }< / h1 >
257+ }
258+ ```
259+
260+ To enable type inference, config the ` load-context.ts ` like follows:
261+
262+ ``` ts
263+ // load-context.ts
264+ import type { AppLoadContext } from ' @remix-run/cloudflare'
265+ import type { Context } from ' hono'
266+ import type { PlatformProxy } from ' wrangler'
267+
268+ type Env = {
269+ Variables: {
270+ message: string
271+ }
272+ }
273+
274+ type Cloudflare = Omit <PlatformProxy , ' dispose' >
275+
276+ declare module ' @remix-run/cloudflare' {
277+ interface AppLoadContext {
278+ cloudflare: Cloudflare
279+ hono: {
280+ context: Context <Env >
281+ }
282+ extra: string
283+ }
284+ }
285+
286+ type GetLoadContext = (args : {
287+ request: Request
288+ context: {
289+ cloudflare: Cloudflare
290+ hono: { context: Context <Env > }
291+ }
292+ }) => AppLoadContext
293+
294+ export const getLoadContext: GetLoadContext = ({ context }) => {
295+ return {
296+ ... context ,
297+ extra: ' stuff' ,
298+ }
299+ }
300+ ```
301+
220302## Auth middleware for Remix routes
221303
222304If 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:
0 commit comments