Merge remote-tracking branch 'upstream/main' into chore-rsc-nightly

Author: github-actions[bot]

.github/workflows/ci-rsc.yml

@@ -1,4 +1,7 @@
 name: ci-rsc
+
+permissions: {}
+
 on:
   push:
     branches:

.npmrc

@@ -5,3 +5,5 @@ hoist-pattern[]=eslint-import-resolver-*
 strict-peer-dependencies=false
 shell-emulator=true
 auto-install-peers=false
+link-workspace-packages=true
+prefer-workspace-packages=true

package.json

@@ -72,9 +72,6 @@
     ]
   },
   "pnpm": {
-    "overrides": {
-      "@vitejs/plugin-rsc": "workspace:*"
-    },
     "packageExtensions": {
       "generouted": {
         "peerDependencies": {

packages/plugin-rsc/README.md

@@ -98,7 +98,6 @@ export default defineConfig({
     // this environment is responsible for:
     // - RSC stream deserialization (RSC stream -> React VDOM)
     // - traditional SSR (React VDOM -> HTML string/stream)
-    // (NOTE: as it can be seen in the above diagram. SSR is technically an optional mechanism.)
     ssr: {
       build: {
         rollupOptions: {

packages/plugin-rsc/e2e/basic.test.ts

@@ -12,6 +12,33 @@ test.describe('dev-default', () => {
   defineTest(f)
 })
 
+test.describe('dev-initial', () => {
+  const f = useFixture({ root: 'examples/basic', mode: 'dev' })
+
+  // verify css is collected properly on server startup (i.e. empty module graph)
+  testNoJs('style', async ({ page }) => {
+    await page.goto(f.url('./'))
+    await expect(page.locator('.test-style-client')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+    await expect(page.locator('.test-style-server')).toHaveCSS(
+      'color',
+      'rgb(255, 165, 0)',
+    )
+    await expect(page.locator('.test-tw-client')).toHaveCSS(
+      'color',
+      // blue-500
+      'rgb(0, 0, 255)',
+    )
+    await expect(page.locator('.test-tw-server')).toHaveCSS(
+      'color',
+      // red-500
+      'rgb(255, 0, 0)',
+    )
+  })
+})
+
 test.describe('build-default', () => {
   const f = useFixture({ root: 'examples/basic', mode: 'build' })
   defineTest(f)
@@ -43,6 +70,39 @@ test.describe('build-base', () => {
   defineTest(f)
 })
 
+test.describe('dev-react-compiler', () => {
+  const f = useFixture({
+    root: 'examples/basic',
+    mode: 'dev',
+    cliOptions: {
+      env: {
+        TEST_REACT_COMPILER: 'true',
+      },
+    },
+  })
+  defineTest(f)
+
+  test('verify react compiler', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    const res = await page.request.get(f.url('src/routes/client.tsx'))
+    expect(await res.text()).toContain('react.memo_cache_sentinel')
+  })
+})
+
+test.describe('build-react-compiler', () => {
+  const f = useFixture({
+    root: 'examples/basic',
+    mode: 'build',
+    cliOptions: {
+      env: {
+        TEST_REACT_COMPILER: 'true',
+      },
+    },
+  })
+  defineTest(f)
+})
+
 test.describe(() => {
   // disabled by default
   if (!process.env.TEST_ISOLATED) return
@@ -623,15 +683,6 @@ function defineTest(f: Fixture) {
         'rgb(255, 0, 0)',
       )
     })
-
-    testNoJs('no FOUC after server restart @nojs', async ({ page }) => {
-      const res = await page.request.get(f.url('/__test_restart'))
-      expect(await res.text()).toBe('ok')
-      await new Promise((r) => setTimeout(r, 100))
-      await page.goto(f.url('./'))
-      await testCss(page)
-      await testTailwind(page)
-    })
   })
 
   test('temporary references @js', async ({ page }) => {
@@ -952,4 +1003,17 @@ function defineTest(f: Fixture) {
     await waitForHydration(page)
     expect(errors).toEqual([])
   })
+
+  test('browser only', async ({ page, browser }) => {
+    await page.goto(f.url())
+    await expect(page.getByTestId('test-browser-only')).toHaveText(
+      'test-browser-only: true',
+    )
+
+    const pageNoJs = await browser.newPage({ javaScriptEnabled: false })
+    await pageNoJs.goto(f.url())
+    await expect(pageNoJs.getByTestId('test-browser-only')).toHaveText(
+      'test-browser-only: loading...',
+    )
+  })
 }

packages/plugin-rsc/examples/basic/README.md

@@ -1,9 +1,9 @@
 # rsc basic
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/hi-ogawa/vite-plugins/tree/main/packages/rsc/examples/basic)
+[![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/basic)
 
 https://vite-rsc-basic.hiro18181.workers.dev
 
 ```sh
-npx giget gh:hi-ogawa/vite-plugins/packages/rsc/examples/basic my-app
+npx giget gh:vitejs/vite-plugin-react/packages/plugin-rsc/examples/basic my-app
 ```

packages/plugin-rsc/examples/basic/package.json

@@ -13,20 +13,22 @@
   },
   "dependencies": {
     "@vitejs/plugin-rsc": "latest",
-    "react": "latest",
-    "react-dom": "latest"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.4",
-    "@types/react": "latest",
-    "@types/react-dom": "latest",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "latest",
     "@vitejs/test-dep-client-in-server": "file:./test-dep/client-in-server",
     "@vitejs/test-dep-client-in-server2": "file:./test-dep/client-in-server2",
     "@vitejs/test-dep-server-in-client": "file:./test-dep/server-in-client",
     "@vitejs/test-dep-server-in-server": "file:./test-dep/server-in-server",
+    "babel-plugin-react-compiler": "19.1.0-rc.2",
     "tailwindcss": "^4.1.4",
     "vite": "^7.0.2",
-    "vite-plugin-inspect": "^11.2.0"
+    "vite-plugin-inspect": "^11.2.0",
+    "wrangler": "^4.22.0"
   }
 }

packages/plugin-rsc/examples/basic/src/routes/browser-only/browser-dep.tsx

@@ -0,0 +1,3 @@
+export default function BrowserDep() {
+  return <>{String(!!window)}</>
+}

packages/plugin-rsc/examples/basic/src/routes/browser-only/client.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import * as React from 'react'
+
+const BrowserDep = (
+  import.meta.env.SSR ? undefined : React.lazy(() => import('./browser-dep'))
+)!
+
+export function TestBrowserOnly() {
+  return (
+    <div data-testid="test-browser-only">
+      test-browser-only:{' '}
+      <BrowserOnly fallback={<>loading...</>}>
+        <BrowserDep />
+      </BrowserOnly>
+    </div>
+  )
+}
+
+function BrowserOnly(props: React.SuspenseProps) {
+  const hydrated = useHydrated()
+  if (!hydrated) {
+    return props.fallback
+  }
+  return <React.Suspense {...props} />
+}
+
+const noopStore = () => () => {}
+
+const useHydrated = () =>
+  React.useSyncExternalStore(
+    noopStore,
+    () => true,
+    () => false,
+  )
+
+/*
+If we were to implement this whole logic via hypothetical `browserOnly` helper with transform:
+
+======= input ======
+
+const SomeDep = browserOnly(() => import('./some-dep'))
+
+======= output ======
+
+const __TmpLazy = import.meta.env.SSR ? undefined : React.lazy(() => import('./some-dep'}));
+
+const SomeDep = ({ browserOnlyFallback, ...props }) => {
+  const hydrated = useHydrated()
+  if (!hydrated) {
+    return browserOnlyFallback
+  }
+  return (
+    <React.Suspense fallback={browserOnlyFallback}>
+      <__TmpLazy {...props} />
+    </React.Suspense>
+  )
+}
+
+=== helper types ===
+
+declare function browserOnly<T>(fn: () => Promise<{ default: React.ComponentType<T> }>):
+  React.ComponentType<T & { browserOnlyFallback?: React.ReactNode }>
+
+*/

packages/plugin-rsc/examples/basic/src/routes/root.tsx

@@ -28,6 +28,7 @@ import { TestTailwindServer } from './tailwind/server'
 import { TestTemporaryReference } from './temporary-reference/client'
 import { TestUseCache } from './use-cache/server'
 import { TestHydrationMismatch } from './hydration-mismatch/server'
+import { TestBrowserOnly } from './browser-only/client'
 
 export function Root(props: { url: URL }) {
   return (
@@ -67,6 +68,7 @@ export function Root(props: { url: URL }) {
         <TestServerInClient />
         <TestActionStateServer />
         <TestModuleInvalidationServer />
+        <TestBrowserOnly />
         <TestUseCache />
       </body>
     </html>