abearxiong
11e75d0e11
- Created a new SVG logo for Vite. - Added a List component for rendering a simple list. - Implemented server-side counter functionality with actions. - Introduced a React SVG logo for branding. - Developed a ClientCounter component for client-side state management. - Set up entry points for RSC and SSR rendering. - Established error boundary for global error handling. - Created request handling utilities for differentiating RSC and SSR requests. - Added global styles for the application. - Built the main application structure in the Root component. - Configured Vite with RSC and React plugins for optimal development experience.
73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import react from '@vitejs/plugin-react'
|
|
import rsc from '@vitejs/plugin-rsc'
|
|
import { defineConfig } from 'vite'
|
|
|
|
export default defineConfig({
|
|
plugins: [
|
|
rsc({
|
|
// `entries` option is only a shorthand for specifying each `rollupOptions.input` below
|
|
// > entries: { rsc, ssr, client },
|
|
//
|
|
// by default, the plugin setup request handler based on `default export` of `rsc` environment `rollupOptions.input.index`.
|
|
// This can be disabled when setting up own server handler e.g. `@cloudflare/vite-plugin`.
|
|
// > serverHandler: false
|
|
}),
|
|
|
|
// use any of react plugins https://github.com/vitejs/vite-plugin-react
|
|
// to enable client component HMR
|
|
react(),
|
|
|
|
// use https://github.com/antfu-collective/vite-plugin-inspect
|
|
// to understand internal transforms required for RSC.
|
|
// import("vite-plugin-inspect").then(m => m.default()),
|
|
],
|
|
|
|
// specify entry point for each environment.
|
|
// (currently the plugin assumes `rollupOptions.input.index` for some features.)
|
|
environments: {
|
|
// `rsc` environment loads modules with `react-server` condition.
|
|
// this environment is responsible for:
|
|
// - RSC stream serialization (React VDOM -> RSC stream)
|
|
// - server functions handling
|
|
rsc: {
|
|
build: {
|
|
rollupOptions: {
|
|
input: {
|
|
index: './src/framework/entry.rsc.tsx',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
// `ssr` environment loads modules without `react-server` condition.
|
|
// this environment is responsible for:
|
|
// - RSC stream deserialization (RSC stream -> React VDOM)
|
|
// - traditional SSR (React VDOM -> HTML string/stream)
|
|
ssr: {
|
|
build: {
|
|
rollupOptions: {
|
|
input: {
|
|
index: './src/framework/entry.ssr.tsx',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
// client environment is used for hydration and client-side rendering
|
|
// this environment is responsible for:
|
|
// - RSC stream deserialization (RSC stream -> React VDOM)
|
|
// - traditional CSR (React VDOM -> Browser DOM tree mount/hydration)
|
|
// - refetch and re-render RSC
|
|
// - calling server functions
|
|
client: {
|
|
build: {
|
|
rollupOptions: {
|
|
input: {
|
|
index: './src/framework/entry.browser.tsx',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
})
|