-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: support getLoadContext
#6
Changes from all commits
5b6126c
d0ace04
98105ed
d72989d
81cbf5f
9a62e55
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,24 @@ | ||
import type { LoaderFunctionArgs } from '@remix-run/cloudflare' | ||
import { useLoaderData } from '@remix-run/react' | ||
|
||
export const loader = ({ context }: LoaderFunctionArgs) => { | ||
const { env } = context.cloudflare as { env: { MY_VAR: string} } | ||
return { | ||
var: env.MY_VAR | ||
} | ||
export const loader = (args: LoaderFunctionArgs) => { | ||
const extra = args.context.extra | ||
const cloudflare = args.context.cloudflare | ||
return { cloudflare, extra } | ||
} | ||
|
||
export default function Index() { | ||
const data = useLoaderData<typeof loader>() | ||
const { cloudflare, extra } = useLoaderData<typeof loader>() | ||
return ( | ||
<div> | ||
<h1>Remix and Hono</h1> | ||
<h2>Var is {data.var}</h2> | ||
<h2>Var is {cloudflare.env.MY_VAR}</h2> | ||
<h3> | ||
{cloudflare.cf ? 'cf,' : ''} | ||
{cloudflare.ctx ? 'ctx,' : ''} | ||
{cloudflare.caches ? 'caches are available' : ''} | ||
</h3> | ||
<h4>Extra is {extra}</h4> | ||
</div> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
// functions/[[path]].ts | ||
import handle from 'hono-remix-adapter/cloudflare-pages' | ||
import { getLoadContext } from 'load-context' | ||
import * as build from '../build/server' | ||
import server from '../server' | ||
|
||
export const onRequest = handle(build, server) | ||
export const onRequest = handle(build, server, { getLoadContext }) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import type { AppLoadContext } from '@remix-run/cloudflare' | ||
import type { PlatformProxy } from 'wrangler' | ||
|
||
interface Env { | ||
MY_VAR: string | ||
} | ||
|
||
type Cloudflare = Omit<PlatformProxy<Env>, 'dispose'> | ||
|
||
declare module '@remix-run/cloudflare' { | ||
interface AppLoadContext { | ||
cloudflare: Cloudflare | ||
extra: string | ||
} | ||
} | ||
|
||
type GetLoadContext = (args: { | ||
request: Request | ||
context: { cloudflare: Cloudflare } | ||
}) => AppLoadContext | ||
|
||
// Shared implementation compatible with Vite, Wrangler, and Cloudflare Pages | ||
export const getLoadContext: GetLoadContext = ({ context }) => { | ||
return { | ||
...context, | ||
extra: 'stuff', | ||
} | ||
} |
Original file line number | Diff line number | Diff line change | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,34 @@ | ||||||||||||||||||||
import type { AppLoadContext } from '@remix-run/cloudflare' | ||||||||||||||||||||
import type { Context } from 'hono' | ||||||||||||||||||||
|
||||||||||||||||||||
export type GetLoadContext = (args: { | ||||||||||||||||||||
request: Request | ||||||||||||||||||||
context: { | ||||||||||||||||||||
// Relaxing the type definition | ||||||||||||||||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||||||||||||||||||||
cloudflare: any | ||||||||||||||||||||
Comment on lines
+7
to
+9
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It seems like we could do more than It might be tricky/impractical to use the "real"
Suggested change
|
||||||||||||||||||||
} | ||||||||||||||||||||
}) => AppLoadContext | ||||||||||||||||||||
|
||||||||||||||||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||||||||||||||||||||
export const defaultGetLoadContext = ({ context }: any) => { | ||||||||||||||||||||
Comment on lines
+13
to
+14
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Names are hard, but if you gave that type a name like: type SomeContext = {
cloudflare: {
env: Record<string, unknown>
cf: IncomingRequestCfProperties
ctx: ExecutionContext
caches: typeof caches
}
}; We could use it like export type GetLoadContext = (args: {
request: Request
context: SomeContext
}) => AppLoadContext
export const defaultGetLoadContext = ({ context }: { context: SomeContext}) => { There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If you override the definition of The type mismatch will occur. To remove the typo error, I've added the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @yusukebe Oh, right. Apologies for not testing that locally. I think 0.2.0 shipped with this type, because I'm getting this type error in my app after updating Nothing a There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oooops. Sorry. The building way was wrong. Fixed it and released the new version. Try There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No worries. It happens. And it was kind of my fault, anyway. Thanks! |
||||||||||||||||||||
return { | ||||||||||||||||||||
...context, | ||||||||||||||||||||
} | ||||||||||||||||||||
} | ||||||||||||||||||||
|
||||||||||||||||||||
export const createGetLoadContextArgs = (c: Context) => { | ||||||||||||||||||||
return { | ||||||||||||||||||||
context: { | ||||||||||||||||||||
cloudflare: { | ||||||||||||||||||||
env: c.env, | ||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I wasn't sure about this one. Do we want
or
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This function is also used in the dev server: https://github.com/yusukebe/hono-remix-adapter/pull/6/files#diff-34d76a96faa930c4b9909c055beb422e601e2267f72ce12d6f15a1c2cc6ea914R23 It should be |
||||||||||||||||||||
cf: c.req.raw.cf, | ||||||||||||||||||||
ctx: { | ||||||||||||||||||||
...c.executionCtx, | ||||||||||||||||||||
}, | ||||||||||||||||||||
caches, | ||||||||||||||||||||
}, | ||||||||||||||||||||
}, | ||||||||||||||||||||
request: c.req.raw, | ||||||||||||||||||||
} | ||||||||||||||||||||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I can't leave a comment on line 14, but it should be
to match the example vite.config.ts from https://remix.run/docs/en/main/guides/vite#augmenting-load-context
I'm not sure if/how that impacts
serverAdapter
.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, I'm not 💯 in my testing, but when I added
and removed
getLoadContext
fromserverAdapter
, the example app still passed my bindings and augmented context throughThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
About
remixCloudflareDevProxy
, perhaps it may not need it because thishono-remix-adapter
does the same thing. I'll test it; if so, I will create the PR.