From 4a9f14f5bd17dc9e94dc8017ba868afee8f18bca Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Fri, 4 Jul 2025 10:18:18 +0900 Subject: [PATCH 1/6] chore: polish readme --- packages/rsc/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/rsc/README.md b/packages/rsc/README.md index e25f00e9c..279c58ef9 100644 --- a/packages/rsc/README.md +++ b/packages/rsc/README.md @@ -420,3 +420,11 @@ This is a wrapper of `react-server-dom` API and helper API to setup a minimal RS ### `@hiogawa/vite-rsc/extra/browser` - `hydrate` + +## Credits + +- Waku +- Lazarv +- Jacob +- React router +- Parcel From e4dabe3997864c5fc0179b75070b8027fb91edc3 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Fri, 4 Jul 2025 10:21:40 +0900 Subject: [PATCH 2/6] chore: tweak --- packages/rsc/README.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/rsc/README.md b/packages/rsc/README.md index 279c58ef9..90279864f 100644 --- a/packages/rsc/README.md +++ b/packages/rsc/README.md @@ -1,7 +1,8 @@ # @hiogawa/vite-rsc This package provides [React Server Components](https://react.dev/reference/rsc/server-components) (RSC) support for Vite. -Any feedback is welcome, please feel free to share an idea in [the discussion](https://github.com/hi-ogawa/vite-plugins/discussions/979). + +TODO: say experimental. link to roadmap. ## Features @@ -423,8 +424,10 @@ This is a wrapper of `react-server-dom` API and helper API to setup a minimal RS ## Credits -- Waku -- Lazarv -- Jacob -- React router -- Parcel +TODO + +- [Waku](https://github.com/wakujs/waku) +- [@lazarv/react-server](https://github.com/lazarv/react-server) +- [@jacob-ebey/vite-react-server-dom](https://github.com/jacob-ebey/vite-plugins/tree/main/packages/vite-react-server-dom) +- [React Router RSC](https://remix.run/blog/rsc-preview) +- [Parcel RSC](https://parceljs.org/recipes/rsc) From 5a67b2723f1c74aac3cac4deb336e596c24b193a Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Fri, 4 Jul 2025 10:25:17 +0900 Subject: [PATCH 3/6] chore: tweak --- packages/rsc/README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/rsc/README.md b/packages/rsc/README.md index 90279864f..9b1ccb421 100644 --- a/packages/rsc/README.md +++ b/packages/rsc/README.md @@ -23,12 +23,14 @@ npx degit hi-ogawa/vite-plugins/packages/rsc/examples/starter my-app - [`./examples/starter`](./examples/starter) - This example provides an in-depth overview of API with inline comments to explain how they function within RSC-powered React application. -- [`./examples/starter-cf-single`](./examples/starter-cf-single) - - [`@cloudflare/vite-plugin`](https://github.com/cloudflare/workers-sdk/tree/main/packages/vite-plugin-cloudflare) integration example with a single worker setup. - [`./examples/react-router`](./examples/react-router) - - This demonstrates how to integrate [experimental React Router RSC API](https://remix.run/blog/rsc-preview) with this plugin. It also includes `@cloudflare/vite-plugin` integration with multi workers setup. + - This demonstrates how to integrate [experimental React Router RSC API](https://remix.run/blog/rsc-preview) with this plugin. + It also includes `@cloudflare/vite-plugin` integration. - [`./examples/basic`](./examples/basic) - - This is mainly used for e2e testing and include various edge cases. It also uses a high level `@hiogawa/vite-rsc/extra/{rsc,ssr,browser}` API for quick setup. + - This is mainly used for e2e testing and include various advanced RSC usages (e.g. `"use cache"` example). + It also uses a high level `@hiogawa/vite-rsc/extra/{rsc,ssr,browser}` API for quick setup. +- [`./examples/ssg`](./examples/basic) + - Static site generation (SSG) example with MDX and client components for interactivity. ## Basic Concepts From c1fceb53ce8c265cc0edc7ad7d4bc30586b3c755 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Fri, 4 Jul 2025 10:31:38 +0900 Subject: [PATCH 4/6] chore: strip `/plugin` --- packages/rsc/README.md | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/rsc/README.md b/packages/rsc/README.md index 9b1ccb421..62a15e9b8 100644 --- a/packages/rsc/README.md +++ b/packages/rsc/README.md @@ -2,8 +2,6 @@ This package provides [React Server Components](https://react.dev/reference/rsc/server-components) (RSC) support for Vite. -TODO: say experimental. link to roadmap. - ## Features - **Framework-less RSC experience**: The plugin implements [RSC conventions](https://react.dev/reference/rsc/server-components) and provides low level `react-server-dom` runtime API without framework-specific abstractions. @@ -71,7 +69,7 @@ graph TD - [`vite.config.ts`](./examples/starter/vite.config.ts) ```js -import rsc from "@hiogawa/vite-rsc/plugin"; +import rsc from "@hiogawa/vite-rsc"; export default defineConfig() { plugins: [ @@ -328,12 +326,6 @@ function __Page(props) { export { __Page as Page } ``` -Underlying transform utility is available from `@hiogawa/vite-rsc/plugin`: - -```tsx -import { transformRscCssExport } from "@hiogawa/vite-rsc/plugin"; -``` - ### available on `ssr` environment #### `import.meta.viteRsc.loadBootstrapScriptContent("index")` @@ -366,10 +358,10 @@ import.meta.hot.on("rsc:update", async () => { ## Plugin API -### `@hiogawa/vite-rsc/plugin` +### `@hiogawa/vite-rsc` ```js -import rsc from "@hiogawa/vite-rsc/plugin"; +import rsc from "@hiogawa/vite-rsc"; import { defineConfig } from "vite"; export default defineConfig({ From dee0512d425d963a342454387c401cf600136ba5 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Fri, 4 Jul 2025 10:45:51 +0900 Subject: [PATCH 5/6] chore: thanks claude --- packages/rsc/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/rsc/README.md b/packages/rsc/README.md index 62a15e9b8..2d251ae34 100644 --- a/packages/rsc/README.md +++ b/packages/rsc/README.md @@ -418,7 +418,8 @@ This is a wrapper of `react-server-dom` API and helper API to setup a minimal RS ## Credits -TODO +This project builds on fundamental techniques and insights from pioneering Vite RSC implementations. +Additionally, Parcel and React Router's work on standardizing the RSC bundler/app responsibility has guided this plugin's API design: - [Waku](https://github.com/wakujs/waku) - [@lazarv/react-server](https://github.com/lazarv/react-server) From ffbd8507058ff3e391fc77b40bbca6b42fe8d4af Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Fri, 4 Jul 2025 10:56:34 +0900 Subject: [PATCH 6/6] chore: more claude fix --- packages/rsc/README.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/rsc/README.md b/packages/rsc/README.md index 2d251ae34..1a8c7fbdb 100644 --- a/packages/rsc/README.md +++ b/packages/rsc/README.md @@ -27,7 +27,7 @@ npx degit hi-ogawa/vite-plugins/packages/rsc/examples/starter my-app - [`./examples/basic`](./examples/basic) - This is mainly used for e2e testing and include various advanced RSC usages (e.g. `"use cache"` example). It also uses a high level `@hiogawa/vite-rsc/extra/{rsc,ssr,browser}` API for quick setup. -- [`./examples/ssg`](./examples/basic) +- [`./examples/ssg`](./examples/ssg) - Static site generation (SSG) example with MDX and client components for interactivity. ## Basic Concepts @@ -70,8 +70,9 @@ graph TD ```js import rsc from "@hiogawa/vite-rsc"; +import { defineConfig } from "vite"; -export default defineConfig() { +export default defineConfig({ plugins: [ // add plugin rsc(), @@ -124,7 +125,7 @@ export default defineConfig() { }, }, }, -} +}); ``` - [`entry.rsc.tsx`](./examples/starter/src/framework/entry.rsc.tsx) @@ -142,14 +143,14 @@ export default async function handler(request: Request): Promise { if (request.url.endsWith(".rsc")) { return new Response(rscStream, { headers: { - 'Content-type': 'text/html' + 'Content-type': 'text/x-component;charset=utf-8' } - }) + }); } // delegate to SSR environment for html rendering - // `loadSsrModule` is a helper API provided by the plugin for multi environment interaction. - const ssrEntry = await import.meta.viteRsc.loadSsrModule(); + // `loadModule` is a helper API provided by the plugin for multi environment interaction. + const ssrEntry = await import.meta.viteRsc.loadModule("ssr", "index"); const htmlStream = await ssrEntry.handleSsr(rscStream); // respond html @@ -177,7 +178,7 @@ export async function handleSsr(rscStream: ReadableStream) { // render html (traditional SSR) const htmlStream = ReactDOMServer.renderToReadableStream(root, { bootstrapScriptContent, - }) + }); return htmlStream; } @@ -191,7 +192,7 @@ import * as ReactDOMClient from "react-dom/client"; async function main() { // fetch and deserialize RSC stream back to React VDOM - const rscResponse = await fetch(window.location.href + ".rsc"); + const rscResponse = await fetch(window.location.href + ".rsc); const root = await ReactClient.createFromReadableStream(rscResponse.body); // hydration (traditional CSR)