vite-plugin-react-server 1.4.2 → 1.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -313
- package/dist/package.json +123 -13
- package/dist/plugin/bundle/deferredStaticGeneration.js +14 -39
- package/dist/plugin/bundle/manifests.js +30 -48
- package/dist/plugin/config/autoDiscover/resolveAutoDiscover.d.ts.map +1 -1
- package/dist/plugin/config/autoDiscover/resolveAutoDiscover.js +4 -1
- package/dist/plugin/config/envPrefixFromConfig.js +12 -7
- package/dist/plugin/config/getCondition.d.ts.map +1 -1
- package/dist/plugin/config/getCondition.js +7 -5
- package/dist/plugin/dev-server/virtualRscHmrPlugin.js +23 -23
- package/dist/plugin/environments/createBuildEventPlugin.js +88 -98
- package/dist/plugin/environments/createEnvironmentPlugin.js +222 -250
- package/dist/plugin/helpers/createRscRenderHelpers.js +33 -34
- package/dist/plugin/helpers/createSharedLoader.d.ts.map +1 -1
- package/dist/plugin/helpers/createSharedLoader.js +4 -2
- package/dist/plugin/helpers/headlessStreamReuseHandler.js +30 -22
- package/dist/plugin/helpers/headlessStreamState.js +15 -28
- package/dist/plugin/helpers/resolveComponent.d.ts.map +1 -1
- package/dist/plugin/helpers/resolveComponent.js +4 -2
- package/dist/plugin/index.client.d.ts +5 -0
- package/dist/plugin/index.client.d.ts.map +1 -0
- package/dist/plugin/index.client.js +4 -0
- package/dist/plugin/index.d.ts +4 -3
- package/dist/plugin/index.d.ts.map +1 -1
- package/dist/plugin/index.js +10 -5
- package/dist/plugin/index.server.d.ts +5 -0
- package/dist/plugin/index.server.d.ts.map +1 -0
- package/dist/plugin/index.server.js +4 -0
- package/dist/plugin/metrics/createWorkerStartupMetrics.js +31 -13
- package/dist/plugin/orchestrator/createPluginOrchestrator.client.js +41 -38
- package/dist/plugin/orchestrator/createPluginOrchestrator.server.js +43 -46
- package/dist/plugin/plugin.client.js +2 -2
- package/dist/plugin/plugin.server.js +2 -2
- package/dist/plugin/react-static/createBuildLoader.client.js +12 -6
- package/dist/plugin/react-static/createBuildLoader.server.js +255 -235
- package/dist/plugin/react-static/plugin.client.js +684 -770
- package/dist/plugin/react-static/plugin.server.js +517 -603
- package/dist/plugin/react-static/processCssFilesForPages.js +103 -88
- package/dist/plugin/react-static/renderPage.client.js +455 -529
- package/dist/plugin/react-static/renderPage.server.js +485 -508
- package/dist/plugin/react-static/renderPagesBatched.js +277 -275
- package/dist/plugin/react-static/rscToHtmlStream.client.js +48 -29
- package/dist/plugin/react-static/rscToHtmlStream.server.js +62 -37
- package/dist/plugin/react-static/temporaryReferences.server.js +11 -2
- package/dist/plugin/stream/createMainThreadHandlers.js +40 -31
- package/dist/plugin/stream/renderRscStream.server.d.ts.map +1 -1
- package/dist/plugin/stream/renderRscStream.server.js +127 -144
- package/dist/plugin/transformer/createTransformerPlugin.js +226 -265
- package/dist/plugin/utils/checkReactVersion.d.ts +7 -0
- package/dist/plugin/utils/checkReactVersion.d.ts.map +1 -0
- package/dist/plugin/utils/checkReactVersion.js +23 -0
- package/dist/plugin/utils/envUrls.node.js +12 -11
- package/dist/plugin/vendor/vendor-alias.js +84 -114
- package/dist/plugin/vendor/vendor.client.d.ts.map +1 -1
- package/dist/plugin/vendor/vendor.client.js +1 -3
- package/dist/plugin/worker/rsc/handleRscRender.d.ts.map +1 -1
- package/dist/plugin/worker/rsc/handleRscRender.js +3 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +123 -13
- package/plugin/config/autoDiscover/resolveAutoDiscover.ts +4 -0
- package/plugin/config/getCondition.ts +6 -4
- package/plugin/helpers/createSharedLoader.ts +6 -1
- package/plugin/helpers/resolveComponent.ts +6 -1
- package/plugin/index.client.ts +4 -0
- package/plugin/index.server.ts +4 -0
- package/plugin/index.ts +12 -5
- package/plugin/plugin.client.ts +1 -1
- package/plugin/plugin.server.ts +1 -1
- package/plugin/stream/renderRscStream.server.ts +3 -0
- package/plugin/utils/checkReactVersion.ts +28 -0
- package/plugin/vendor/vendor.client.ts +0 -2
- package/plugin/worker/rsc/handleRscRender.ts +2 -0
- package/scripts/generate-toc.mjs +27 -294
package/README.md
CHANGED
|
@@ -1,25 +1,14 @@
|
|
|
1
|
-
#
|
|
1
|
+
# vite-plugin-react-server
|
|
2
2
|
|
|
3
|
-
A Vite plugin that
|
|
3
|
+
A Vite plugin that transforms React components into native ESM modules with React Server Components support. Build static sites, dynamic servers, or anything in between — your components become portable ESM that works with any HTTP server.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Install
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
[Vite's philosophy](https://vite.dev/guide/philosophy.html) is built around Native ESM and making frameworks first-class citizens. This plugin extends that philosophy to React Server Components:
|
|
10
|
-
|
|
11
|
-
- **Native ESM for React**: Your React components are true ESM modules that work anywhere
|
|
12
|
-
- **React as Configuration**: Serialize React Server Components for static hosting
|
|
13
|
-
- **On-Demand Loading**: Only streams the pages you're actually developing
|
|
14
|
-
- **React condition**: Automatically adapts to client/server environments
|
|
15
|
-
|
|
16
|
-
## Quick Start
|
|
17
|
-
|
|
18
|
-
```sh
|
|
7
|
+
```bash
|
|
19
8
|
npm install -D vite-plugin-react-server react@19 react-dom@19
|
|
20
9
|
```
|
|
21
10
|
|
|
22
|
-
|
|
11
|
+
## Minimal Example
|
|
23
12
|
|
|
24
13
|
```ts
|
|
25
14
|
// vite.config.ts
|
|
@@ -27,338 +16,84 @@ import { defineConfig } from "vite";
|
|
|
27
16
|
import { vitePluginReactServer } from "vite-plugin-react-server";
|
|
28
17
|
|
|
29
18
|
export default defineConfig({
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
19
|
+
plugins: vitePluginReactServer({
|
|
20
|
+
moduleBase: "src",
|
|
21
|
+
Page: "src/page.tsx",
|
|
22
|
+
build: { pages: ["/"] },
|
|
23
|
+
}),
|
|
35
24
|
});
|
|
36
25
|
```
|
|
37
26
|
|
|
38
|
-
**Create a Page:**
|
|
39
|
-
|
|
40
27
|
```tsx
|
|
41
28
|
// src/page.tsx
|
|
42
|
-
export const Page = ({ url }: { url: string }) => {
|
|
43
|
-
return <div>Hello from {url}</div>;
|
|
44
|
-
};
|
|
29
|
+
export const Page = ({ url }: { url: string }) => <div>Hello from {url}</div>;
|
|
45
30
|
```
|
|
46
31
|
|
|
47
|
-
**Run the Development Server:**
|
|
48
|
-
|
|
49
|
-
```bash
|
|
50
|
-
NODE_OPTIONS="--conditions react-server" npx vite
|
|
51
|
-
# or
|
|
52
|
-
npx vite
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
Both these commands show the same application with roughly the same developer experience.
|
|
56
|
-
|
|
57
|
-
**React Condition System**
|
|
58
|
-
|
|
59
|
-
The `react-server` condition is needed for the ESM system to consume the React dependencies. What it boils down to is the following semantics:
|
|
60
|
-
|
|
61
|
-
- When we say we want to "render HTML", it means we need the client environment
|
|
62
|
-
- When we say we want to "render RSC", it means we need the server environment
|
|
63
|
-
|
|
64
|
-
Just like HTML, RSC is simply a string. It's the serialized product of your React Components. Since it's serialized, we are free to send it back and forth from one thread to another using worker threads. This plugin enables exactly this worker thread approach by managing the React condition for you. This explains why both:
|
|
65
|
-
|
|
66
32
|
```bash
|
|
67
|
-
|
|
68
|
-
# or
|
|
33
|
+
# Dev server
|
|
69
34
|
npx vite
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
Return the same application, but we now understand that the former will need an `html-worker` and the latter will need the `rsc-worker` to both serialize RSC and HTML.
|
|
73
|
-
|
|
74
|
-
**Visit your app:** Open `http://localhost:5173` in your browser. You should see "Hello from /" displayed.
|
|
75
|
-
|
|
76
|
-
**What's Next?**
|
|
77
|
-
- Add more pages to `build.pages` array
|
|
78
|
-
- Create server actions with `"use server"`
|
|
79
|
-
- Add client components with `"use client"`
|
|
80
|
-
- Customize your HTML template
|
|
81
|
-
|
|
82
|
-
## Development & Build
|
|
83
|
-
|
|
84
|
-
The plugin supports both traditional multi-step builds and modern Environment API builds:
|
|
85
|
-
|
|
86
|
-
### Traditional Build (Multi-Step)
|
|
87
|
-
|
|
88
|
-
```bash
|
|
89
|
-
# Build all environments separately
|
|
90
|
-
npm run build:static # vite build
|
|
91
|
-
npm run build:client # vite build --ssr
|
|
92
|
-
npm run build:server # NODE_OPTIONS="--conditions react-server" vite build
|
|
93
|
-
```
|
|
94
35
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
### Environment API Build (Single-Step)
|
|
98
|
-
|
|
99
|
-
The plugin now supports Vite's Environment API with two modes:
|
|
100
|
-
|
|
101
|
-
#### Server-First Mode (Faster)
|
|
102
|
-
```bash
|
|
36
|
+
# Build
|
|
103
37
|
NODE_OPTIONS='--conditions react-server' vite build --app
|
|
104
38
|
```
|
|
105
|
-
- **Static generation** on main thread
|
|
106
|
-
- **HTML rendering** via html-worker
|
|
107
|
-
- **Benefits**: Faster execution, easier debugging, direct component access
|
|
108
|
-
|
|
109
|
-
#### Client-First Mode (Isolated)
|
|
110
|
-
```bash
|
|
111
|
-
vite build --app
|
|
112
|
-
```
|
|
113
|
-
- **Static generation** on RSC worker thread
|
|
114
|
-
- **HTML rendering** on main thread
|
|
115
|
-
- **Benefits**: Server thread isolation, custom RSC worker support
|
|
116
39
|
|
|
117
|
-
|
|
40
|
+
## Build Output
|
|
118
41
|
|
|
119
|
-
The plugin uses Node.js conditions to automatically load the correct implementation:
|
|
120
|
-
|
|
121
|
-
```typescript
|
|
122
|
-
// The plugin automatically detects and loads the right implementation
|
|
123
|
-
import { getCondition } from './config/getCondition.js';
|
|
124
|
-
|
|
125
|
-
const condition = getCondition(); // Returns 'client' or 'server'
|
|
126
|
-
const { vitePluginReactServer } = await import(`./plugin.${condition}.js`);
|
|
127
42
|
```
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
```json
|
|
136
|
-
{
|
|
137
|
-
"type": "module",
|
|
138
|
-
"scripts": {
|
|
139
|
-
"dev:rsc": "NODE_OPTIONS='--conditions react-server' vite",
|
|
140
|
-
"dev:ssr": "vite",
|
|
141
|
-
"build": "NODE_OPTIONS='--conditions react-server' vite build --app",
|
|
142
|
-
"preview": "vite preview"
|
|
143
|
-
}
|
|
144
|
-
}
|
|
43
|
+
dist/
|
|
44
|
+
├── static/ # Deployable to any static host
|
|
45
|
+
│ ├── index.html # Pre-rendered HTML
|
|
46
|
+
│ └── index.rsc # RSC payload for client navigation
|
|
47
|
+
├── client/ # Client-side ESM modules (for SSR)
|
|
48
|
+
└── server/ # Server-side ESM modules (with server actions)
|
|
145
49
|
```
|
|
146
50
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
The plugin supports two development paradigms. Both produce **identical output** but differ in architecture:
|
|
150
|
-
|
|
151
|
-
| Mode | Condition | Command | Architecture | Benefits |
|
|
152
|
-
|------|-----------|---------|--------------|----------|
|
|
153
|
-
| **RSC** | `react-server` | `npm run dev:rsc` | RSC on main thread | Easier debugging, React in config |
|
|
154
|
-
| **SSR** | `null` (default) | `npm run dev:ssr` | RSC in worker | Better isolation, traditional SSR split |
|
|
155
|
-
|
|
156
|
-
### Development Mode Details
|
|
157
|
-
|
|
158
|
-
- **`npm run dev:rsc`** (RSC Mode):
|
|
159
|
-
- Main thread has `react-server` condition
|
|
160
|
-
- RSC processing runs directly (no worker)
|
|
161
|
-
- Easier debugging - breakpoints work in server components
|
|
162
|
-
- Supports React in config files (e.g., `vite.react.config.tsx`)
|
|
163
|
-
|
|
164
|
-
- **`npm run dev:ssr`** (SSR Mode):
|
|
165
|
-
- Main thread is client-focused
|
|
166
|
-
- RSC processing runs in isolated worker thread
|
|
167
|
-
- Closer to traditional SSR/client architecture
|
|
168
|
-
|
|
169
|
-
### Build Process
|
|
170
|
-
|
|
171
|
-
- **`npm run build`** (Build Environment):
|
|
172
|
-
1. **Static Build:** `vite build` → `dist/static/`
|
|
173
|
-
2. **Client Build:** `vite build --ssr` → `dist/client/`
|
|
174
|
-
3. **Server Build:** `NODE_OPTIONS="--conditions react-server" vite build --ssr` → `dist/server/` + final `dist/static/`
|
|
175
|
-
- `use client`/`use server` boundary transformations
|
|
176
|
-
- `index.html` and `index.rsc` to `dist/static/${route}` for each `build.pages`
|
|
177
|
-
|
|
178
|
-
- **`npm run dev-build`**:
|
|
179
|
-
- Debug the build process
|
|
180
|
-
- Avoids the "this error message is hidden in production" and shows the full error
|
|
181
|
-
- Development build is not intended for production
|
|
182
|
-
|
|
183
|
-
## React condition
|
|
184
|
-
|
|
185
|
-
The plugin automatically adapts to different execution environments using Node.js conditions:
|
|
186
|
-
|
|
187
|
-
### Environment Detection
|
|
51
|
+
`dist/static/` is a complete static site. `dist/client/` and `dist/server/` are ESM modules you can import in your own Express/Hono/Node server.
|
|
188
52
|
|
|
189
|
-
|
|
190
|
-
import { getCondition } from "vite-plugin-react-server/config";
|
|
191
|
-
|
|
192
|
-
if (getCondition() !== "react-server") {
|
|
193
|
-
throw new Error("-10 poison damage");
|
|
194
|
-
}
|
|
195
|
-
```
|
|
196
|
-
|
|
197
|
-
### Execution Modes
|
|
198
|
-
|
|
199
|
-
- **RSC Mode** (`npm run dev:rsc`):
|
|
200
|
-
- Condition: `react-server` on main thread
|
|
201
|
-
- RSC processing runs directly on the main Vite thread
|
|
202
|
-
- Easier debugging - breakpoints work in server components
|
|
203
|
-
- Supports React in config files
|
|
204
|
-
|
|
205
|
-
- **SSR Mode** (`npm run dev:ssr`):
|
|
206
|
-
- Condition: default (client-focused main thread)
|
|
207
|
-
- RSC processing runs in isolated worker thread
|
|
208
|
-
- Traditional SSR/client architecture
|
|
209
|
-
|
|
210
|
-
- **Build Mode** (`npm run build`):
|
|
211
|
-
- Command: `NODE_OPTIONS='--conditions react-server' vite build --app`
|
|
212
|
-
- Builds all Vite environments (client, ssr, server)
|
|
213
|
-
- Generates static HTML files
|
|
214
|
-
|
|
215
|
-
### Module Structure
|
|
216
|
-
|
|
217
|
-
The plugin uses condition-based module loading:
|
|
218
|
-
|
|
219
|
-
```
|
|
220
|
-
plugin/
|
|
221
|
-
├── index.ts # Main entry point with condition detection
|
|
222
|
-
├── plugin.client.ts # Client environment implementation
|
|
223
|
-
├── plugin.server.ts # Server environment implementation
|
|
224
|
-
├── dev-server/
|
|
225
|
-
│ ├── index.ts # Condition-based loader
|
|
226
|
-
│ ├── index.client.ts # Client implementation
|
|
227
|
-
│ ├── index.server.ts # Server implementation
|
|
228
|
-
│ └── ... # Other modules follow same pattern
|
|
229
|
-
└── ...
|
|
230
|
-
```
|
|
231
|
-
|
|
232
|
-
This ensures:
|
|
233
|
-
- **Client environments** get lightweight, browser-compatible implementations
|
|
234
|
-
- **Server environments** get full-featured RSC processing capabilities
|
|
235
|
-
- **No runtime overhead** from unused server code in client environments
|
|
236
|
-
|
|
237
|
-
## Advanced Features
|
|
238
|
-
|
|
239
|
-
### Props and Routing
|
|
240
|
-
|
|
241
|
-
```tsx
|
|
242
|
-
// Simple string-based routing
|
|
243
|
-
export default defineConfig({
|
|
244
|
-
plugins: vitePluginReactServer({
|
|
245
|
-
Page: "src/page/page.tsx",
|
|
246
|
-
props: "src/page/props.ts",
|
|
247
|
-
build: { pages: ["/", "/about"] }
|
|
248
|
-
}),
|
|
249
|
-
});
|
|
250
|
-
```
|
|
251
|
-
|
|
252
|
-
### Server Actions
|
|
253
|
-
|
|
254
|
-
```tsx
|
|
255
|
-
// actions.server.ts
|
|
256
|
-
"use server";
|
|
257
|
-
|
|
258
|
-
export async function addTodo(title: string) {
|
|
259
|
-
return { success: true };
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
// Use in components
|
|
263
|
-
import { addTodo } from "./actions.server.js";
|
|
264
|
-
export function TodoForm() {
|
|
265
|
-
return <form action={addTodo}>...</form>;
|
|
266
|
-
}
|
|
267
|
-
```
|
|
268
|
-
|
|
269
|
-
### Parallel Rendering
|
|
270
|
-
|
|
271
|
-
Pages are rendered in parallel batches by default for faster builds:
|
|
272
|
-
|
|
273
|
-
```ts
|
|
274
|
-
build: {
|
|
275
|
-
pages: ["/", "/about", "/contact", ...hundredsOfPages],
|
|
276
|
-
renderMode: "parallel", // default
|
|
277
|
-
batchSize: 8, // pages per batch
|
|
278
|
-
}
|
|
279
|
-
```
|
|
280
|
-
|
|
281
|
-
Use `renderMode: "sequential"` for debugging or low-memory environments.
|
|
282
|
-
|
|
283
|
-
### Client Components
|
|
284
|
-
|
|
285
|
-
```tsx
|
|
286
|
-
// src/components/Link.client.tsx
|
|
287
|
-
"use client";
|
|
288
|
-
import React from 'react';
|
|
289
|
-
|
|
290
|
-
export function Link({ to, children }: { to: string, children: React.ReactNode }) {
|
|
291
|
-
return <a href={to}>{children}</a>;
|
|
292
|
-
}
|
|
293
|
-
```
|
|
53
|
+
## Documentation
|
|
294
54
|
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
55
|
+
| Doc | What it covers |
|
|
56
|
+
|-----|---------------|
|
|
57
|
+
| [Getting Started](./docs/getting-started.md) | Install → first page → dev server → build → deploy |
|
|
58
|
+
| [Build Output](./docs/build-output.md) | What the build produces, how to use the ESM modules |
|
|
59
|
+
| [Configuration](./docs/configuration.md) | All plugin options |
|
|
60
|
+
| [CSS Handling](./docs/css-handling.md) | Inline/linked CSS, CSS modules, the `Css` component |
|
|
61
|
+
| [Server Actions](./docs/server-actions.md) | `"use server"` directives, form actions, hosting |
|
|
62
|
+
| [Examples](./docs/examples.md) | Static site, dynamic server, server actions, custom routing |
|
|
63
|
+
| [Troubleshooting](./docs/troubleshooting.md) | Common errors and fixes |
|
|
64
|
+
| [API Reference](./docs/api-reference.md) | Exported functions, types, and components |
|
|
299
65
|
|
|
300
|
-
|
|
301
|
-
const [count, setCount] = useState(0);
|
|
302
|
-
return <button onClick={() => setCount(count + 1)}>{count}</button>;
|
|
303
|
-
}
|
|
304
|
-
```
|
|
66
|
+
### Internals (contributors)
|
|
305
67
|
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
68
|
+
| Doc | What it covers |
|
|
69
|
+
|-----|---------------|
|
|
70
|
+
| [Architecture](./docs/internals/architecture.md) | Condition system, module structure, plugin composition |
|
|
71
|
+
| [Transformer](./docs/internals/transformer.md) | How `"use client"` / `"use server"` directives are processed |
|
|
72
|
+
| [Workers](./docs/internals/workers.md) | RSC and HTML worker threads |
|
|
311
73
|
|
|
74
|
+
### Maintenance
|
|
312
75
|
|
|
76
|
+
| Doc | What it covers |
|
|
77
|
+
|-----|---------------|
|
|
78
|
+
| [Releasing](./docs/releasing.md) | Version bumps, publishing, demo updates |
|
|
79
|
+
| [React Compatibility](./docs/react-type-compatibility.md) | Vendored ESM transport, type system |
|
|
313
80
|
|
|
314
81
|
## Requirements
|
|
315
82
|
|
|
316
|
-
-
|
|
317
|
-
-
|
|
318
|
-
-
|
|
83
|
+
- Node.js 23.7.0+
|
|
84
|
+
- React 19+ or experimental
|
|
85
|
+
- Vite 6+
|
|
319
86
|
|
|
320
87
|
## TypeScript
|
|
321
88
|
|
|
322
|
-
The plugin provides virtual modules (like `virtual:react-server/hmr`) that need type declarations. Add `"vite-plugin-react-server/virtual"` to your `tsconfig.json`:
|
|
323
|
-
|
|
324
89
|
```json
|
|
325
90
|
{
|
|
326
91
|
"compilerOptions": {
|
|
327
|
-
"types": [
|
|
328
|
-
"vite/client",
|
|
329
|
-
"vite-plugin-react-server/virtual"
|
|
330
|
-
]
|
|
92
|
+
"types": ["vite/client", "vite-plugin-react-server/virtual"]
|
|
331
93
|
}
|
|
332
94
|
}
|
|
333
95
|
```
|
|
334
96
|
|
|
335
|
-
This enables type support for:
|
|
336
|
-
- `virtual:react-server/hmr` — RSC hot module replacement utilities (`useRscHmr`, `setupRscHmr`)
|
|
337
|
-
|
|
338
|
-
## Contributing
|
|
339
|
-
|
|
340
|
-
This project uses experimental React features with a vendored ESM transport (`react-server-dom-esm`). Plugin maintainers can refresh the vendored copy with `npm run experimental:build-oss`. See [React Type Compatibility](./docs/react-type-compatibility.md) for maintenance details.
|
|
341
|
-
|
|
342
|
-
## Documentation
|
|
343
|
-
|
|
344
|
-
| Topic | Description |
|
|
345
|
-
|-------|-------------|
|
|
346
|
-
| [Getting Started](./docs/getting-started.md) | Installation, basic setup, and first page |
|
|
347
|
-
| [Core Concepts](./docs/core-concepts.md) | React conditions, environments, and architecture |
|
|
348
|
-
| [Configuration Guide](./docs/configuration.md) | Plugin options and Vite config |
|
|
349
|
-
| [CSS & Styling](./docs/css-handling.md) | CSS collection, inline styles, and global CSS |
|
|
350
|
-
| [Server Actions](./docs/server-actions.md) | `"use server"` directives and form actions |
|
|
351
|
-
| [Build & Deployment](./docs/build-orchestration.md) | Multi-step and Environment API builds |
|
|
352
|
-
| [Advanced Development](./docs/maintenance/advanced-topics.md) | Custom workers, streaming, and advanced patterns |
|
|
353
|
-
| [Plugin Internals](./docs/maintenance/transformer-plugin.md) | How the transformer processes directives |
|
|
354
|
-
| [Worker System](./docs/maintenance/rsc-worker.md) | RSC and HTML worker architecture |
|
|
355
|
-
| [API Reference](./docs/api-reference.md) | Exported functions and types |
|
|
356
|
-
| [React Compatibility](./docs/react-type-compatibility.md) | Version support, vendored ESM transport |
|
|
357
|
-
| [Troubleshooting](./docs/troubleshooting-guide.md) | Common errors and solutions |
|
|
358
|
-
| [Package Exports](./docs/package-exports.md) | All package exports and conditional loading |
|
|
359
|
-
| [Transformations](./docs/transformations.md) | Code transformations and directive handling |
|
|
360
|
-
|
|
361
|
-
|
|
362
97
|
## License
|
|
363
98
|
|
|
364
|
-
MIT
|
|
99
|
+
MIT
|
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vite-plugin-react-server",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.3",
|
|
4
4
|
"description": "Vite plugin for React Server Components (RSC)",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/plugin/index.js",
|
|
@@ -40,7 +40,10 @@
|
|
|
40
40
|
"default": "./dist/plugin/utils/index.server.js"
|
|
41
41
|
},
|
|
42
42
|
"./metrics": "./dist/plugin/metrics/index.js",
|
|
43
|
-
"./stream":
|
|
43
|
+
"./stream": {
|
|
44
|
+
"react-server": "./dist/plugin/stream/index.server.js",
|
|
45
|
+
"default": "./dist/plugin/stream/index.client.js"
|
|
46
|
+
},
|
|
44
47
|
"./stream/client": "./dist/plugin/stream/index.client.js",
|
|
45
48
|
"./stream/server": "./dist/plugin/stream/index.server.js",
|
|
46
49
|
"./env": {
|
|
@@ -48,25 +51,128 @@
|
|
|
48
51
|
},
|
|
49
52
|
"./config": "./dist/plugin/config/index.js",
|
|
50
53
|
"./error": "./dist/plugin/error/index.js",
|
|
51
|
-
"./vendor":
|
|
54
|
+
"./vendor": {
|
|
55
|
+
"react-server": "./dist/plugin/vendor/vendor.server.js",
|
|
56
|
+
"default": "./dist/plugin/vendor/vendor.client.js"
|
|
57
|
+
},
|
|
52
58
|
"./vendor.server": "./dist/plugin/vendor/vendor.server.js",
|
|
53
59
|
"./vendor.client": "./dist/plugin/vendor/vendor.client.js",
|
|
54
60
|
"./vendor.static": "./dist/plugin/vendor/vendor.static.js",
|
|
55
61
|
"./file-preserver": "./dist/plugin/file-preserver/plugin.js",
|
|
56
62
|
"./loader": "./dist/plugin/loader/index.js",
|
|
57
63
|
"./helpers": "./dist/plugin/helpers/index.js",
|
|
58
|
-
"./helpers/resolveStreamElements":
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
"./
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
64
|
+
"./helpers/resolveStreamElements": {
|
|
65
|
+
"react-server": "./dist/plugin/helpers/resolveStreamElements.server.js",
|
|
66
|
+
"default": "./dist/plugin/helpers/resolveStreamElements.client.js"
|
|
67
|
+
},
|
|
68
|
+
"./dev-server": {
|
|
69
|
+
"react-server": "./dist/plugin/dev-server/index.server.js",
|
|
70
|
+
"default": "./dist/plugin/dev-server/index.client.js"
|
|
71
|
+
},
|
|
72
|
+
"./dev-server/configureReactServer": {
|
|
73
|
+
"react-server": "./dist/plugin/dev-server/configureReactServer.server.js",
|
|
74
|
+
"default": "./dist/plugin/dev-server/configureReactServer.client.js"
|
|
75
|
+
},
|
|
76
|
+
"./dev-server/handleServerAction": {
|
|
77
|
+
"react-server": "./dist/plugin/dev-server/handleServerAction.server.js",
|
|
78
|
+
"default": "./dist/plugin/dev-server/handleServerAction.client.js"
|
|
79
|
+
},
|
|
80
|
+
"./stream/handleRscStream": {
|
|
81
|
+
"react-server": "./dist/plugin/stream/handleRscStream.server.js",
|
|
82
|
+
"default": "./dist/plugin/stream/handleRscStream.client.js"
|
|
83
|
+
},
|
|
84
|
+
"./stream/createRscStream": {
|
|
85
|
+
"react-server": "./dist/plugin/stream/createRscStream.server.js",
|
|
86
|
+
"default": "./dist/plugin/stream/createRscStream.client.js"
|
|
87
|
+
},
|
|
88
|
+
"./dev-server/restartWorker": {
|
|
89
|
+
"react-server": "./dist/plugin/dev-server/restartWorker.server.js",
|
|
90
|
+
"default": "./dist/plugin/dev-server/restartWorker.client.js"
|
|
91
|
+
},
|
|
92
|
+
"./dev-server/cleanupServerAction": {
|
|
93
|
+
"react-server": "./dist/plugin/dev-server/cleanupServerAction.server.js",
|
|
94
|
+
"default": "./dist/plugin/dev-server/cleanupServerAction.client.js"
|
|
95
|
+
},
|
|
66
96
|
"./env-loader": "./dist/plugin/loader/env-loader.js",
|
|
67
97
|
"./css-loader": "./dist/plugin/loader/css-loader.js",
|
|
68
98
|
"./directives": "./dist/plugin/loader/directives/index.js",
|
|
69
|
-
"./register": "./dist/plugin/vendor/register-vendor.js"
|
|
99
|
+
"./register": "./dist/plugin/vendor/register-vendor.js",
|
|
100
|
+
"./config/createHandlerOptions": {
|
|
101
|
+
"react-server": "./dist/plugin/config/createHandlerOptions.server.js",
|
|
102
|
+
"default": "./dist/plugin/config/createHandlerOptions.client.js"
|
|
103
|
+
},
|
|
104
|
+
"./dev-server/configureRequestHandler": {
|
|
105
|
+
"react-server": "./dist/plugin/dev-server/configureRequestHandler.server.js",
|
|
106
|
+
"default": "./dist/plugin/dev-server/configureRequestHandler.client.js"
|
|
107
|
+
},
|
|
108
|
+
"./env/plugin": {
|
|
109
|
+
"react-server": "./dist/plugin/env/plugin.server.js",
|
|
110
|
+
"default": "./dist/plugin/env/plugin.client.js"
|
|
111
|
+
},
|
|
112
|
+
"./helpers/handleServerAction": {
|
|
113
|
+
"react-server": "./dist/plugin/helpers/handleServerAction.server.js",
|
|
114
|
+
"default": "./dist/plugin/helpers/handleServerAction.client.js"
|
|
115
|
+
},
|
|
116
|
+
"./orchestrator/createPluginOrchestrator": {
|
|
117
|
+
"react-server": "./dist/plugin/orchestrator/createPluginOrchestrator.server.js",
|
|
118
|
+
"default": "./dist/plugin/orchestrator/createPluginOrchestrator.client.js"
|
|
119
|
+
},
|
|
120
|
+
"./plugin": {
|
|
121
|
+
"react-server": "./dist/plugin/plugin.server.js",
|
|
122
|
+
"default": "./dist/plugin/plugin.client.js"
|
|
123
|
+
},
|
|
124
|
+
"./react-client": {
|
|
125
|
+
"react-server": "./dist/plugin/react-client/index.server.js",
|
|
126
|
+
"default": "./dist/plugin/react-client/index.client.js"
|
|
127
|
+
},
|
|
128
|
+
"./react-client/plugin": {
|
|
129
|
+
"react-server": "./dist/plugin/react-client/plugin.server.js",
|
|
130
|
+
"default": "./dist/plugin/react-client/plugin.client.js"
|
|
131
|
+
},
|
|
132
|
+
"./react-server/plugin": {
|
|
133
|
+
"react-server": "./dist/plugin/react-server/plugin.server.js",
|
|
134
|
+
"default": "./dist/plugin/react-server/plugin.client.js"
|
|
135
|
+
},
|
|
136
|
+
"./react-static/createBuildLoader": {
|
|
137
|
+
"react-server": "./dist/plugin/react-static/createBuildLoader.server.js",
|
|
138
|
+
"default": "./dist/plugin/react-static/createBuildLoader.client.js"
|
|
139
|
+
},
|
|
140
|
+
"./react-static": {
|
|
141
|
+
"react-server": "./dist/plugin/react-static/index.server.js",
|
|
142
|
+
"default": "./dist/plugin/react-static/index.client.js"
|
|
143
|
+
},
|
|
144
|
+
"./react-static/plugin": {
|
|
145
|
+
"react-server": "./dist/plugin/react-static/plugin.server.js",
|
|
146
|
+
"default": "./dist/plugin/react-static/plugin.client.js"
|
|
147
|
+
},
|
|
148
|
+
"./react-static/renderPage": {
|
|
149
|
+
"react-server": "./dist/plugin/react-static/renderPage.server.js",
|
|
150
|
+
"default": "./dist/plugin/react-static/renderPage.client.js"
|
|
151
|
+
},
|
|
152
|
+
"./react-static/rscToHtmlStream": {
|
|
153
|
+
"react-server": "./dist/plugin/react-static/rscToHtmlStream.server.js",
|
|
154
|
+
"default": "./dist/plugin/react-static/rscToHtmlStream.client.js"
|
|
155
|
+
},
|
|
156
|
+
"./react-static/temporaryReferences": {
|
|
157
|
+
"react-server": "./dist/plugin/react-static/temporaryReferences.server.js",
|
|
158
|
+
"default": "./dist/plugin/react-static/temporaryReferences.client.js"
|
|
159
|
+
},
|
|
160
|
+
"./stream/createFromNodeStream": {
|
|
161
|
+
"react-server": "./dist/plugin/stream/createFromNodeStream.server.js",
|
|
162
|
+
"default": "./dist/plugin/stream/createFromNodeStream.client.js"
|
|
163
|
+
},
|
|
164
|
+
"./stream/createHtmlStream": {
|
|
165
|
+
"react-server": "./dist/plugin/stream/createHtmlStream.server.js",
|
|
166
|
+
"default": "./dist/plugin/stream/createHtmlStream.client.js"
|
|
167
|
+
},
|
|
168
|
+
"./stream/createRenderToPipeableStreamHandler": {
|
|
169
|
+
"react-server": "./dist/plugin/stream/createRenderToPipeableStreamHandler.server.js",
|
|
170
|
+
"default": "./dist/plugin/stream/createRenderToPipeableStreamHandler.client.js"
|
|
171
|
+
},
|
|
172
|
+
"./transformer/plugin": {
|
|
173
|
+
"react-server": "./dist/plugin/transformer/plugin.server.js",
|
|
174
|
+
"default": "./dist/plugin/transformer/plugin.client.js"
|
|
175
|
+
}
|
|
70
176
|
},
|
|
71
177
|
"typesVersions": {
|
|
72
178
|
"*": {
|
|
@@ -288,7 +394,6 @@
|
|
|
288
394
|
"supports-color": "^10.0.0",
|
|
289
395
|
"ts-node": "^10.9.2",
|
|
290
396
|
"tslib": "^2.8.1",
|
|
291
|
-
"tsx": "^4.19.2",
|
|
292
397
|
"typescript": "^5.7.3",
|
|
293
398
|
"typescript-eslint": "^8.33.1",
|
|
294
399
|
"vite": "^6.3.5",
|
|
@@ -298,5 +403,10 @@
|
|
|
298
403
|
"bin": {
|
|
299
404
|
"check-react-version": "./scripts/check-react-version.mjs",
|
|
300
405
|
"patch": "./bin/patch.mjs"
|
|
406
|
+
},
|
|
407
|
+
"dependencies": {
|
|
408
|
+
"acorn": "^8.16.0",
|
|
409
|
+
"picocolors": "^1.1.1",
|
|
410
|
+
"tsx": "^4.21.0"
|
|
301
411
|
}
|
|
302
412
|
}
|
|
@@ -1,44 +1,19 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
* AFTER all environments (client, ssr, server) have completed their builds.
|
|
6
|
-
*
|
|
7
|
-
* This module provides a mechanism to defer static generation:
|
|
8
|
-
* 1. Client's closeBundle stores the generation function instead of executing it
|
|
9
|
-
* 2. The buildApp hook calls runDeferredStaticGeneration() after all builds complete
|
|
10
|
-
*
|
|
11
|
-
* This solves the build order problem where client's closeBundle runs before
|
|
12
|
-
* the server environment builds, making the server manifest unavailable.
|
|
2
|
+
* vite-plugin-react-server
|
|
3
|
+
* Copyright (c) Nico Brinkkemper
|
|
4
|
+
* MIT License
|
|
13
5
|
*/
|
|
14
6
|
let deferredFn = null;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
*/
|
|
18
|
-
export function deferStaticGeneration(fn) {
|
|
19
|
-
deferredFn = fn;
|
|
20
|
-
}
|
|
21
|
-
/**
|
|
22
|
-
* Run the deferred static generation function (called by buildApp after all builds).
|
|
23
|
-
* Returns false if no function was deferred.
|
|
24
|
-
*/
|
|
25
|
-
export async function runDeferredStaticGeneration() {
|
|
26
|
-
if (!deferredFn)
|
|
27
|
-
return false;
|
|
28
|
-
const fn = deferredFn;
|
|
29
|
-
deferredFn = null;
|
|
30
|
-
await fn();
|
|
31
|
-
return true;
|
|
7
|
+
function deferStaticGeneration(fn) {
|
|
8
|
+
deferredFn = fn;
|
|
32
9
|
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
/**
|
|
40
|
-
* Reset state (for test isolation).
|
|
41
|
-
*/
|
|
42
|
-
export function resetDeferredStaticGeneration() {
|
|
43
|
-
deferredFn = null;
|
|
10
|
+
async function runDeferredStaticGeneration() {
|
|
11
|
+
if (!deferredFn) return false;
|
|
12
|
+
const fn = deferredFn;
|
|
13
|
+
deferredFn = null;
|
|
14
|
+
await fn();
|
|
15
|
+
return true;
|
|
44
16
|
}
|
|
17
|
+
|
|
18
|
+
export { deferStaticGeneration, runDeferredStaticGeneration };
|
|
19
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmZXJyZWRTdGF0aWNHZW5lcmF0aW9uLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9wbHVnaW4vYnVuZGxlL2RlZmVycmVkU3RhdGljR2VuZXJhdGlvbi50cyJdLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIERlZmVycmVkIFN0YXRpYyBHZW5lcmF0aW9uXG4gKiBcbiAqIFdoZW4gdXNpbmcgVml0ZSdzIEVudmlyb25tZW50IEFQSSAoYnVpbGRBcHApLCBzdGF0aWMgZ2VuZXJhdGlvbiBtdXN0IHJ1blxuICogQUZURVIgYWxsIGVudmlyb25tZW50cyAoY2xpZW50LCBzc3IsIHNlcnZlcikgaGF2ZSBjb21wbGV0ZWQgdGhlaXIgYnVpbGRzLlxuICogXG4gKiBUaGlzIG1vZHVsZSBwcm92aWRlcyBhIG1lY2hhbmlzbSB0byBkZWZlciBzdGF0aWMgZ2VuZXJhdGlvbjpcbiAqIDEuIENsaWVudCdzIGNsb3NlQnVuZGxlIHN0b3JlcyB0aGUgZ2VuZXJhdGlvbiBmdW5jdGlvbiBpbnN0ZWFkIG9mIGV4ZWN1dGluZyBpdFxuICogMi4gVGhlIGJ1aWxkQXBwIGhvb2sgY2FsbHMgcnVuRGVmZXJyZWRTdGF0aWNHZW5lcmF0aW9uKCkgYWZ0ZXIgYWxsIGJ1aWxkcyBjb21wbGV0ZVxuICogXG4gKiBUaGlzIHNvbHZlcyB0aGUgYnVpbGQgb3JkZXIgcHJvYmxlbSB3aGVyZSBjbGllbnQncyBjbG9zZUJ1bmRsZSBydW5zIGJlZm9yZVxuICogdGhlIHNlcnZlciBlbnZpcm9ubWVudCBidWlsZHMsIG1ha2luZyB0aGUgc2VydmVyIG1hbmlmZXN0IHVuYXZhaWxhYmxlLlxuICovXG5cbmxldCBkZWZlcnJlZEZuOiAoKCkgPT4gUHJvbWlzZTx2b2lkPikgfCBudWxsID0gbnVsbDtcblxuLyoqXG4gKiBTdG9yZSBhIHN0YXRpYyBnZW5lcmF0aW9uIGZ1bmN0aW9uIHRvIGJlIGNhbGxlZCBsYXRlciBieSBidWlsZEFwcC5cbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIGRlZmVyU3RhdGljR2VuZXJhdGlvbihmbjogKCkgPT4gUHJvbWlzZTx2b2lkPik6IHZvaWQge1xuICBkZWZlcnJlZEZuID0gZm47XG59XG5cbi8qKlxuICogUnVuIHRoZSBkZWZlcnJlZCBzdGF0aWMgZ2VuZXJhdGlvbiBmdW5jdGlvbiAoY2FsbGVkIGJ5IGJ1aWxkQXBwIGFmdGVyIGFsbCBidWlsZHMpLlxuICogUmV0dXJucyBmYWxzZSBpZiBubyBmdW5jdGlvbiB3YXMgZGVmZXJyZWQuXG4gKi9cbmV4cG9ydCBhc3luYyBmdW5jdGlvbiBydW5EZWZlcnJlZFN0YXRpY0dlbmVyYXRpb24oKTogUHJvbWlzZTxib29sZWFuPiB7XG4gIGlmICghZGVmZXJyZWRGbikgcmV0dXJuIGZhbHNlO1xuICBjb25zdCBmbiA9IGRlZmVycmVkRm47XG4gIGRlZmVycmVkRm4gPSBudWxsO1xuICBhd2FpdCBmbigpO1xuICByZXR1cm4gdHJ1ZTtcbn1cblxuLyoqXG4gKiBDaGVjayBpZiB0aGVyZSdzIGEgZGVmZXJyZWQgc3RhdGljIGdlbmVyYXRpb24gcGVuZGluZy5cbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIGhhc0RlZmVycmVkU3RhdGljR2VuZXJhdGlvbigpOiBib29sZWFuIHtcbiAgcmV0dXJuIGRlZmVycmVkRm4gIT09IG51bGw7XG59XG5cbi8qKlxuICogUmVzZXQgc3RhdGUgKGZvciB0ZXN0IGlzb2xhdGlvbikuXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiByZXNldERlZmVycmVkU3RhdGljR2VuZXJhdGlvbigpOiB2b2lkIHtcbiAgZGVmZXJyZWRGbiA9IG51bGw7XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFjQSxJQUFJLFVBQTJDLEdBQUEsSUFBQTtBQUt4QyxTQUFTLHNCQUFzQixFQUErQixFQUFBO0FBQ25FLEVBQWEsVUFBQSxHQUFBLEVBQUE7QUFDZjtBQU1BLGVBQXNCLDJCQUFnRCxHQUFBO0FBQ3BFLEVBQUksSUFBQSxDQUFDLFlBQW1CLE9BQUEsS0FBQTtBQUN4QixFQUFBLE1BQU0sRUFBSyxHQUFBLFVBQUE7QUFDWCxFQUFhLFVBQUEsR0FBQSxJQUFBO0FBQ2IsRUFBQSxNQUFNLEVBQUcsRUFBQTtBQUNULEVBQU8sT0FBQSxJQUFBO0FBQ1Q7Ozs7In0=
|