chore: update the example for cloudflare-workers (#29)

* feat: add example for cloudflare-workers

* Align variable name and value with cloudflare-pages

* format

---------

Co-authored-by: Yusuke Wada <yusuke@kamawada.com>

Author: ogadra

examples/cloudflare-workers/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-workers/load-context.ts

@@ -1,16 +1,25 @@
+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<Env>
+    }
   }
 }
 
@@ -19,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

@@ -5,9 +5,13 @@ const app = new Hono<{
   Bindings: {
     MY_VAR: string
   }
+  Variables: {
+    MY_VAR_IN_VARIABLES: string
+  }
 }>()
 
 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')
 })