Add support for react-router middleware (changes context type)

[firxworx]

react-router v7.3.0 added middleware: https://reactrouter.com/start/changelog#middleware-unstable

This is already being rapidly adopted by the community as this feature was absent in remix and had been requested for years.

From the changelog:

⚠️ Enabling middleware contains a breaking change to the context parameter passed to your loader/action functions

When this feature is enabled in react-router config, instead of AppLoadContext, context is an instance of ContextProvider that developers can use with type-safe contexts (conceptually similar to React.createContext).

More information: https://reactrouter.com/start/changelog#middleware-context-parameter

The community package react-router-hono-server has support for this change that may come in handy as a reference. Here's a link to a commit that has some insights:

rphlmr/react-router-hono-server@b5ec792

Any custom getLoadContext function must now return a Map. Example:

https://github.com/rphlmr/react-router-hono-server/blob/main/examples/node/simple-future-middleware/app/server.ts

Another somewhat-related topic is having everything play nice with @cloudflare/vite-plugin so that local development can closely mirror actual Cloudflare deployment.

(if you try it the Cloudflare vite plugin with rr I found I needed to add unstable_viteEnvironmentApi: true to rr config for it to successfully on CF)

---

It may be worth noting the creator/maintainer of react-router-hono-server has mused on Remix Discord about dropping this project because rr7 middleware has addressed his use-case for a hono server.

I still very much think its important to support hono for a number of reasons and I imagine you (yusukebe) can think of many more!

Thank-you for hono and thank-you for this package!

[yusukebe]

Hi @firxworx

Thank you for the issue.

Another somewhat-related topic is having everything play nice with @cloudflare/vite-plugin so that local development can closely mirror actual Cloudflare deployment.

Regarding @cloudflare/vite-plugin, this is also a hot topic for me. I added the cloudflare-workers+vite starter template for create-hono recently:

https://github.com/honojs/starter/tree/main/templates/cloudflare-workers%2Bvite

This uses @cloudflare/vite-plugin to emulate Cloudflare environments instead of @hono/vite-dev-server. This is great, but this hono-react-router-adpater still depends on @hono/vite-dev-server, and it can't reproduce the environments completely as the same as Wrangler though @cloudflare/vite-plugin can it.

Currently, it's difficult to replace @hono/vite-dev-server for this hono-react-router-adapter. I'm struggling to find a good way to use @cloudflare/vite-plugin in this project OR make @hono/vite-dev-server support emulating Cloudflare environments completely as the same as Wrangler/worked.

Anyway, I'll comment again later.

[firxworx]

@yusukebe I stumbled across this repo, its clearly a WIP by the author but I haven't seen anything like this approach yet and it uses @cloudflare/vite-plugin + hono + the new RR middleware.

https://github.com/tobiasfoerg/cf-template/blob/main/worker/middleware/react-router.tsx hono middleware
https://github.com/tobiasfoerg/cf-template/tree/main/src/middlewares RR middleware (integrates better-auth)
https://github.com/tobiasfoerg/cf-template/blob/main/vite.config.ts vite config

His hono middleware is loaded in app.ts and that's where he loads the RR context (passes it as argument to his middleware from https://github.com/tobiasfoerg/cf-template/blob/main/src/context.ts). I have no idea how well it works or doesn't but it feels like one of the cleanest takes I've seen.

[yusukebe]

@firxworx

As I commented, it seems to use @cloudflare/vite-plugin instead of this hono-react-router-adapter.