Skip to content

Commit f88e970

Browse files
pi0hi-ogawa
andcommitted
feat(vite): support rsc
Co-authored-by: Hiroshi Ogawa <[email protected]>
1 parent e1d7109 commit f88e970

File tree

18 files changed

+2448
-5
lines changed

18 files changed

+2448
-5
lines changed

examples/vite-rsc/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
dist

examples/vite-rsc/README.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Vite + RSC
2+
3+
This example shows how to setup a React application with [Server Component](https://react.dev/reference/rsc/server-components) features on Vite using [`@vitejs/plugin-rsc`](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc).
4+
5+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc/examples/starter)
6+
7+
```sh
8+
# run dev server
9+
npm run dev
10+
11+
# build for production and preview
12+
npm run build
13+
npm run preview
14+
```
15+
16+
## API usages
17+
18+
See [`@vitejs/plugin-rsc`](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc) for the documentation.
19+
20+
- [`vite.config.ts`](./vite.config.ts)
21+
- `@higoawa/vite-rsc/plugin`
22+
- [`./src/framework/entry.rsc.tsx`](./src/framework/entry.rsc.tsx)
23+
- `@vitejs/plugin-rsc/rsc`
24+
- `import.meta.viteRsc.loadModule`
25+
- [`./src/framework/entry.ssr.tsx`](./src/framework/entry.ssr.tsx)
26+
- `@vitejs/plugin-rsc/ssr`
27+
- `import.meta.viteRsc.loadBootstrapScriptContent`
28+
- `rsc-html-stream/server`
29+
- [`./src/framework/entry.browser.tsx`](./src/framework/entry.browser.tsx)
30+
- `@vitejs/plugin-rsc/browser`
31+
- `rsc-html-stream/client`
32+
33+
## Notes
34+
35+
- [`./src/framework/entry.{browser,rsc,ssr}.tsx`](./src/framework) (with inline comments) provides an overview of how low level RSC (React flight) API can be used to build RSC framework.
36+
- You can use [`vite-plugin-inspect`](https://github.com/antfu-collective/vite-plugin-inspect) to understand how `"use client"` and `"use server"` directives are transformed internally.
37+
38+
## Deployment
39+
40+
See [vite-plugin-rsc-deploy-example](https://github.com/hi-ogawa/vite-plugin-rsc-deploy-example)

examples/vite-rsc/package.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "example-vite-rsc",
3+
"type": "module",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build",
7+
"preview": "vite preview"
8+
},
9+
"dependencies": {
10+
"react": "^19.2.0",
11+
"react-dom": "^19.2.0"
12+
},
13+
"devDependencies": {
14+
"@types/react": "^19.2.2",
15+
"@types/react-dom": "^19.2.1",
16+
"@vitejs/plugin-react": "latest",
17+
"@vitejs/plugin-rsc": "https://pkg.pr.new/@vitejs/plugin-rsc@a4d9c98",
18+
"nitro": "npm:nitro-nightly",
19+
"rsc-html-stream": "^0.0.7",
20+
"vite": "^7.2.0"
21+
}
22+
}

0 commit comments

Comments
 (0)