Align variable name and value with cloudflare-pages

Author: ogadra

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

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

examples/cloudflare-workers/load-context.ts

@@ -1,19 +1,24 @@
 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 GetLoadContextArgs = {
   request: Request
   context: {
-    cloudflare: Omit<PlatformProxy<Env>, 'dispose' | 'caches' | 'cf'> & {
+    cloudflare: Omit<PlatformProxy<Env['Bindings']>, 'dispose' | 'caches' | 'cf'> & {
       caches: PlatformProxy<Env>['caches'] | CacheStorage
       cf: Request['cf']
     },
     hono: {
-      context: Context
+      context: Context<Env>
     },
   }
 }
@@ -23,6 +28,9 @@ declare module '@remix-run/cloudflare' {
   interface AppLoadContext extends ReturnType<typeof getLoadContext> {
     // This will merge the result of `getLoadContext` into the `AppLoadContext`
     extra: string
+    hono: {
+      context: Context<Env>
+    }
   }
 }
 

examples/cloudflare-workers/server/index.ts

@@ -6,22 +6,21 @@ const app = new Hono<{
     MY_VAR: string
   },
   Variables: {
-    'hono-context': string
+    'MY_VAR_IN_VARIABLES': string
   },
 }>()
 
 app.use(async(c, next) => {
-  c.set('hono-context', 'hono-context')
+  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