feat: pass hono's context in getLoadContext

Author: yusukebe

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

@@ -4,11 +4,12 @@ import { useLoaderData } from '@remix-run/react'
 export const loader = (args: LoaderFunctionArgs) => {
   const extra = args.context.extra
   const cloudflare = args.context.cloudflare
-  return { cloudflare, extra }
+  const myVarInVariables = args.context.hono.context.get('MY_VAR_IN_VARIABLES')
+  return { cloudflare, extra, myVarInVariables }
 }
 
 export default function Index() {
-  const { cloudflare, extra } = useLoaderData<typeof loader>()
+  const { cloudflare, extra, myVarInVariables } = useLoaderData<typeof loader>()
   return (
     <div>
       <h1>Remix and Hono</h1>
@@ -19,6 +20,7 @@ export default function Index() {
         {cloudflare.caches ? 'caches are available' : ''}
       </h3>
       <h4>Extra is {extra}</h4>
+      <h5>Var in Variables is {myVarInVariables}</h5>
     </div>
   )
 }

examples/cloudflare-pages/e2e.test.ts

@@ -18,6 +18,9 @@ test('Should return 200 response - /', async ({ page }) => {
 
   const contentH4 = await page.textContent('h4')
   expect(contentH4).toBe('Extra is stuff')
+
+  const contentH5 = await page.textContent('h5')
+  expect(contentH5).toBe('Var in Variables is My variable set in c.set')
 })
 
 test('Should return 200 response - /api', async ({ page }) => {

examples/cloudflare-pages/load-context.ts

@@ -1,22 +1,34 @@
 import type { AppLoadContext } from '@remix-run/cloudflare'
+import type { Context } from 'hono'
 import type { PlatformProxy } from 'wrangler'
 
-interface Env {
-  MY_VAR: string
+type Env = {
+  Bindings: {
+    MY_VAR: string
+  }
+  Variables: {
+    MY_VAR_IN_VARIABLES: string
+  }
 }
 
-type Cloudflare = Omit<PlatformProxy<Env>, 'dispose'>
+type Cloudflare = Omit<PlatformProxy<Env['Bindings']>, 'dispose'>
 
 declare module '@remix-run/cloudflare' {
   interface AppLoadContext {
     cloudflare: Cloudflare
     extra: string
+    hono: {
+      context: Context<Env>
+    }
   }
 }
 
 type GetLoadContext = (args: {
   request: Request
-  context: { cloudflare: Cloudflare }
+  context: {
+    cloudflare: Cloudflare
+    hono: { context: Context<Env> }
+  }
 }) => AppLoadContext
 
 // Shared implementation compatible with Vite, Wrangler, and Cloudflare Pages

examples/cloudflare-pages/server/index.ts

@@ -5,19 +5,22 @@ const app = new Hono<{
   Bindings: {
     MY_VAR: string
   }
+  Variables: {
+    MY_VAR_IN_VARIABLES: string
+  }
 }>()
 
-app.use(async(c, next) => {
+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')
 })
 
 app.get('/api', (c) => {
   return c.json({
     message: 'Hello',
-    var: c.env.MY_VAR
+    var: c.env.MY_VAR,
   })
 })
 
-
 export default app

src/remix.ts

@@ -1,14 +1,19 @@
 import type { AppLoadContext } from '@remix-run/cloudflare'
 import type { Context } from 'hono'
 
-export type GetLoadContext = (args: {
+type GetLoadContextArgs = {
   request: Request
   context: {
     // Relaxing the type definition
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     cloudflare: any
+    hono: {
+      context: Context
+    }
   }
-}) => AppLoadContext | Promise<AppLoadContext>
+}
+
+export type GetLoadContext = (args: GetLoadContextArgs) => AppLoadContext | Promise<AppLoadContext>
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const defaultGetLoadContext = ({ context }: any): AppLoadContext => {
@@ -17,7 +22,7 @@ export const defaultGetLoadContext = ({ context }: any): AppLoadContext => {
   }
 }
 
-export const createGetLoadContextArgs = (c: Context) => {
+export const createGetLoadContextArgs = (c: Context): GetLoadContextArgs => {
   return {
     context: {
       cloudflare: {
@@ -29,6 +34,9 @@ export const createGetLoadContextArgs = (c: Context) => {
         // @ts-expect-error globalThis.caches is not typed
         caches: globalThis.caches ? caches : undefined,
       },
+      hono: {
+        context: c,
+      },
     },
     request: c.req.raw,
   }