feat: use Vite RSC API

[hi-ogawa]

Note

The PR is moved to the official repo wakujs#1493

old comment

This PR replaces Waku's vite and react-server-dom-webpack internals with "Vite RSC API" provided by @hiogawa/vite-rsc package. (It's currently my own package, but the plan is to move/split it to under @vitejs/plugin-rsc and react-server-dom-vite in the future. See also hi-ogawa/vite-plugins#1037)

Currently the new code path is split in waku/vite-rsc/... but most of Waku's core routing logic is reused internally. This mode is available by running the same cli with a flag waku --experimental-vite-rsc. For example, you can try it out the default template by:

pnpm -C examples/01_template dev --experimental-vite-rsc

The package is published on pkg.pr.new from the branch, so you can try it out on your project by installing https://pkg.pr.new/hi-ogawa/waku@(commit).

The goal is to achieve the switch without breaking change. There are still missing pieces as I wrote in todo at the bottom, but the overall shape is mostly established, so I'm opening a PR here to start to gather feedback. Thanks!

e2e status

Run it locally e.g. by

TEST_VITE_RSC=1 pnpm exec playwright test --project=chromium-dev /rsc-basic
pnpm -C e2e/fixtures/rsc-basic dev --experimental-vite-rsc

✅: pass
❌: some fails
❓: flaky?
⚠️: pass but not functioning

• broken-links ✅
• create-pages ✅ ("long suspense" on firefox-prd❓)
• define-router ✅
• fs-router ✅
• hot-reload (syntax error ❌)
• monorepo ✅
• multi-platform ⚠️
• partial-build ✅
• render-type ✅
• rsc-asset ✅
• rsc-basic ✅
• rsc-css-modules ✅
• ssg-performance ✅
• ssg-wildcard ✅
• ssr-basic ✅
• ssr-catch-error ✅
• ssr-context-provider ✅
• ssr-redirect ✅ ("access async page directly" ❓)
• ssr-swr ✅
• ssr-target-bundle ✅
• use-router ✅

todo

• lint
• fix windows ci fail
• investigate fs-router syntax error crash
  • issue with module runner and glob import?
• deployment adapter
  • for now, only added vercel deploy as an example https://waku-vite-rsc-01-template.vercel.app
• "use client" transform with allowServer feat(rsc, transforms): support preserving client reference original value vite-plugins#1078
• improve waku.config support feat: support waku.config #5
• polish middleware (it largely works but likely a bit different convention)
• hono
  • own handler for dev/start
  • enhancer
• typegen
• check if any known issues will be fixed by this change
  • if any "vite issue" is still not working, check if it's also reproduce with https://github.com/hi-ogawa/vite-plugins/tree/main/packages/rsc. If so, raise it as an upstream issue.
  • (dev-only): Client Component Nesting causes Hydration mismatch on refresh wakujs/waku#1491
  • ts path alias & react compiler combination breaks paths wakujs/waku#1410
  • styles are not applied correctly with stylex in server components wakujs/waku#750
  • Mantine Component Library / dev mode / Error when evaluating SSR module wakujs/waku#421
  • [Umbrella] Third-party library compatibility issues wakujs/waku#423

[rmarscher]

This is amazing work. Thank you.

I like how there are separate public, ssr, and rsc folders in a project built with waku/vite-rsc. I see that dist/rsc/index.js exports handler as default, so it needs a listener runtime to receive requests and invoke the handler. The cli is using vite preview for waku start.

Waku could provide some default listeners for @hono/node-server, bun, hono/aws-lambda, cloudflare workers, etc. A Waku app could import one of those handlers or supply its own - maybe using a virtual module to import the RSC handler and pass it the Request object and handle the response. By default, for prod, it could bundle @hono/node-server or use vite preview.

I like how the waku/vite-rsc demo here uses the environment API. That will make it possible to use the Cloudflare Vite plugin. I opened this discussion when the Cloudflare Vite plugin was announced with React Router support. wakujs#1388

It would be great to be able to customize the handler server entry that is used for prod and dev with the Environment API. When creating an app for Cloudflare Workers, the handler server entry could be customized to add additional handlers and durable objects.

[hi-ogawa]

@rmarscher Thanks for testing out! I'm talking with Daishi and I'll soon move this PR to Waku repo for review and discussions.

As to Cloudflare features, this change should make it easier to integrate their vite plugin both on dev and build. Not with Waku, but I have two examples here to use @cloudflare/vite-plugin with rsc plugin if you are interested. https://github.com/hi-ogawa/vite-plugins/blob/main/packages/rsc/examples/react-router/cf/vite.config.ts, https://github.com/hi-ogawa/vite-plugins/blob/main/packages/rsc/examples/starter-cf-single/vite.config.ts. At the moment, making Waku work with cloudflare vite plugin is not the immediate goal, but please feel free to explore if you like and I'm happy to help 🙂

[hi-ogawa]

• feat: use Vite RSC API #2 : 3 dependent PRs (#8 , #9 , #10 ) 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.