Replace accept header with _.rsc postfix in basic, starter, and starter-cf-single examples

Co-authored-by: hi-ogawa <4232207+hi-ogawa@users.noreply.github.com>

Author: Copilot

packages/plugin-rsc/examples/basic/src/framework/entry.browser.tsx

@@ -8,7 +8,7 @@ import {
 import React from 'react'
 import { hydrateRoot } from 'react-dom/client'
 import { rscStream } from 'rsc-html-stream/client'
-import type { RscPayload } from './entry.rsc'
+import { RSC_POSTFIX, type RscPayload } from './shared'
 import { GlobalErrorBoundary } from './error-boundary'
 
 async function main() {
@@ -40,16 +40,17 @@ async function main() {
 
   // re-fetch RSC and trigger re-rendering
   async function fetchRscPayload() {
-    const payload = await createFromFetch<RscPayload>(
-      fetch(window.location.href),
-    )
+    const url = new URL(window.location.href)
+    url.pathname = url.pathname + RSC_POSTFIX
+    const payload = await createFromFetch<RscPayload>(fetch(url))
     setPayload(payload)
   }
 
   // register a handler which will be internally called by React
   // on server function request after hydration.
   setServerCallback(async (id, args) => {
     const url = new URL(window.location.href)
+    url.pathname = url.pathname + RSC_POSTFIX
     const temporaryReferences = createTemporaryReferenceSet()
     const payload = await createFromFetch<RscPayload>(
       fetch(url, {

packages/plugin-rsc/examples/basic/src/framework/entry.rsc.tsx

@@ -7,20 +7,7 @@ import {
   decodeFormState,
 } from '@vitejs/plugin-rsc/rsc'
 import type { ReactFormState } from 'react-dom/client'
-import type React from 'react'
-
-// The schema of payload which is serialized into RSC stream on rsc environment
-// and deserialized on ssr/client environments.
-export type RscPayload = {
-  // this demo renders/serializes/deserizlies entire root html element
-  // but this mechanism can be changed to render/fetch different parts of components
-  // based on your own route conventions.
-  root: React.ReactNode
-  // server action return value of non-progressive enhancement case
-  returnValue?: { ok: boolean; data: unknown }
-  // server action form state (e.g. useActionState) of progressive enhancement case
-  formState?: ReactFormState
-}
+import { RSC_POSTFIX, type RscPayload } from './shared'
 
 // the plugin by default assumes `rsc` entry having default export of request handler.
 // however, how server entries are executed can be customized by registering
@@ -67,19 +54,17 @@ export async function handleRequest({
     }
   }
 
-  const url = new URL(request.url)
+  let url = new URL(request.url)
+  let isRscRequest = false
+  if (url.pathname.endsWith(RSC_POSTFIX)) {
+    isRscRequest = true
+    url.pathname = url.pathname.slice(0, -RSC_POSTFIX.length)
+  }
+
   const rscPayload: RscPayload = { root: getRoot(), formState, returnValue }
   const rscOptions = { temporaryReferences }
   const rscStream = renderToReadableStream<RscPayload>(rscPayload, rscOptions)
 
-  // respond RSC stream without HTML rendering based on framework's convention.
-  // here we use request header `content-type`.
-  // additionally we allow `?__rsc` and `?__html` to easily view payload directly.
-  const isRscRequest =
-    (!request.headers.get('accept')?.includes('text/html') &&
-      !url.searchParams.has('__html')) ||
-    url.searchParams.has('__rsc')
-
   if (isRscRequest) {
     return new Response(rscStream, {
       status: returnValue?.ok === false ? 500 : undefined,

packages/plugin-rsc/examples/basic/src/framework/shared.tsx

@@ -0,0 +1,17 @@
+import type React from 'react'
+import type { ReactFormState } from 'react-dom/client'
+
+export const RSC_POSTFIX = '_.rsc'
+
+// The schema of payload which is serialized into RSC stream on rsc environment
+// and deserialized on ssr/client environments.
+export type RscPayload = {
+  // this demo renders/serializes/deserizlies entire root html element
+  // but this mechanism can be changed to render/fetch different parts of components
+  // based on your own route conventions.
+  root: React.ReactNode
+  // server action return value of non-progressive enhancement case
+  returnValue?: { ok: boolean; data: unknown }
+  // server action form state (e.g. useActionState) of progressive enhancement case
+  formState?: ReactFormState
+}

packages/plugin-rsc/examples/starter-cf-single/src/framework/entry.browser.tsx

@@ -8,7 +8,7 @@ import {
 import React from 'react'
 import { hydrateRoot } from 'react-dom/client'
 import { rscStream } from 'rsc-html-stream/client'
-import type { RscPayload } from './entry.rsc'
+import { RSC_POSTFIX, type RscPayload } from './shared'
 
 async function main() {
   // stash `setPayload` function to trigger re-rendering
@@ -39,16 +39,17 @@ async function main() {
 
   // re-fetch RSC and trigger re-rendering
   async function fetchRscPayload() {
-    const payload = await createFromFetch<RscPayload>(
-      fetch(window.location.href),
-    )
+    const url = new URL(window.location.href)
+    url.pathname = url.pathname + RSC_POSTFIX
+    const payload = await createFromFetch<RscPayload>(fetch(url))
     setPayload(payload)
   }
 
   // register a handler which will be internally called by React
   // on server function request after hydration.
   setServerCallback(async (id, args) => {
     const url = new URL(window.location.href)
+    url.pathname = url.pathname + RSC_POSTFIX
     const temporaryReferences = createTemporaryReferenceSet()
     const payload = await createFromFetch<RscPayload>(
       fetch(url, {

packages/plugin-rsc/examples/starter-cf-single/src/framework/entry.rsc.tsx

@@ -8,12 +8,7 @@ import {
 } from '@vitejs/plugin-rsc/rsc'
 import type { ReactFormState } from 'react-dom/client'
 import { Root } from '../root.tsx'
-
-export type RscPayload = {
-  root: React.ReactNode
-  returnValue?: { ok: boolean; data: unknown }
-  formState?: ReactFormState
-}
+import { RSC_POSTFIX, type RscPayload } from './shared'
 
 async function handler(request: Request): Promise<Response> {
   // handle server function request
@@ -53,19 +48,17 @@ async function handler(request: Request): Promise<Response> {
   // we render RSC stream after handling server function request
   // so that new render reflects updated state from server function call
   // to achieve single round trip to mutate and fetch from server.
+  let url = new URL(request.url)
+  let isRscRequest = false
+  if (url.pathname.endsWith(RSC_POSTFIX)) {
+    isRscRequest = true
+    url.pathname = url.pathname.slice(0, -RSC_POSTFIX.length)
+  }
+
   const rscPayload: RscPayload = { root: <Root />, formState, returnValue }
   const rscOptions = { temporaryReferences }
   const rscStream = renderToReadableStream<RscPayload>(rscPayload, rscOptions)
 
-  // respond RSC stream without HTML rendering based on framework's convention.
-  // here we use request header `content-type`.
-  // additionally we allow `?__rsc` and `?__html` to easily view payload directly.
-  const url = new URL(request.url)
-  const isRscRequest =
-    (!request.headers.get('accept')?.includes('text/html') &&
-      !url.searchParams.has('__html')) ||
-    url.searchParams.has('__rsc')
-
   if (isRscRequest) {
     return new Response(rscStream, {
       status: returnValue?.ok === false ? 500 : undefined,

packages/plugin-rsc/examples/starter-cf-single/src/framework/shared.tsx

@@ -0,0 +1,10 @@
+import type React from 'react'
+import type { ReactFormState } from 'react-dom/client'
+
+export const RSC_POSTFIX = '_.rsc'
+
+export type RscPayload = {
+  root: React.ReactNode
+  returnValue?: { ok: boolean; data: unknown }
+  formState?: ReactFormState
+}

packages/plugin-rsc/examples/starter/src/framework/entry.browser.tsx

@@ -8,7 +8,7 @@ import {
 import React from 'react'
 import { hydrateRoot } from 'react-dom/client'
 import { rscStream } from 'rsc-html-stream/client'
-import type { RscPayload } from './entry.rsc'
+import { RSC_POSTFIX, type RscPayload } from './shared'
 import { GlobalErrorBoundary } from './error-boundary'
 
 async function main() {
@@ -40,16 +40,17 @@ async function main() {
 
   // re-fetch RSC and trigger re-rendering
   async function fetchRscPayload() {
-    const payload = await createFromFetch<RscPayload>(
-      fetch(window.location.href),
-    )
+    const url = new URL(window.location.href)
+    url.pathname = url.pathname + RSC_POSTFIX
+    const payload = await createFromFetch<RscPayload>(fetch(url))
     setPayload(payload)
   }
 
   // register a handler which will be internally called by React
   // on server function request after hydration.
   setServerCallback(async (id, args) => {
     const url = new URL(window.location.href)
+    url.pathname = url.pathname + RSC_POSTFIX
     const temporaryReferences = createTemporaryReferenceSet()
     const payload = await createFromFetch<RscPayload>(
       fetch(url, {

packages/plugin-rsc/examples/starter/src/framework/entry.rsc.tsx

@@ -8,19 +8,7 @@ import {
 } from '@vitejs/plugin-rsc/rsc'
 import type { ReactFormState } from 'react-dom/client'
 import { Root } from '../root.tsx'
-
-// The schema of payload which is serialized into RSC stream on rsc environment
-// and deserialized on ssr/client environments.
-export type RscPayload = {
-  // this demo renders/serializes/deserizlies entire root html element
-  // but this mechanism can be changed to render/fetch different parts of components
-  // based on your own route conventions.
-  root: React.ReactNode
-  // server action return value of non-progressive enhancement case
-  returnValue?: { ok: boolean; data: unknown }
-  // server action form state (e.g. useActionState) of progressive enhancement case
-  formState?: ReactFormState
-}
+import { RSC_POSTFIX, type RscPayload } from './shared'
 
 // the plugin by default assumes `rsc` entry having default export of request handler.
 // however, how server entries are executed can be customized by registering
@@ -63,7 +51,13 @@ export default async function handler(request: Request): Promise<Response> {
   // we render RSC stream after handling server function request
   // so that new render reflects updated state from server function call
   // to achieve single round trip to mutate and fetch from server.
-  const url = new URL(request.url)
+  let url = new URL(request.url)
+  let isRscRequest = false
+  if (url.pathname.endsWith(RSC_POSTFIX)) {
+    isRscRequest = true
+    url.pathname = url.pathname.slice(0, -RSC_POSTFIX.length)
+  }
+
   const rscPayload: RscPayload = {
     root: <Root url={url} />,
     formState,
@@ -72,14 +66,6 @@ export default async function handler(request: Request): Promise<Response> {
   const rscOptions = { temporaryReferences }
   const rscStream = renderToReadableStream<RscPayload>(rscPayload, rscOptions)
 
-  // respond RSC stream without HTML rendering based on framework's convention.
-  // here we use request header `content-type`.
-  // additionally we allow `?__rsc` and `?__html` to easily view payload directly.
-  const isRscRequest =
-    (!request.headers.get('accept')?.includes('text/html') &&
-      !url.searchParams.has('__html')) ||
-    url.searchParams.has('__rsc')
-
   if (isRscRequest) {
     return new Response(rscStream, {
       status: returnValue?.ok === false ? 500 : undefined,

packages/plugin-rsc/examples/starter/src/framework/shared.tsx

@@ -0,0 +1,17 @@
+import type React from 'react'
+import type { ReactFormState } from 'react-dom/client'
+
+export const RSC_POSTFIX = '_.rsc'
+
+// The schema of payload which is serialized into RSC stream on rsc environment
+// and deserialized on ssr/client environments.
+export type RscPayload = {
+  // this demo renders/serializes/deserizlies entire root html element
+  // but this mechanism can be changed to render/fetch different parts of components
+  // based on your own route conventions.
+  root: React.ReactNode
+  // server action return value of non-progressive enhancement case
+  returnValue?: { ok: boolean; data: unknown }
+  // server action form state (e.g. useActionState) of progressive enhancement case
+  formState?: ReactFormState
+}