Merge branch 'main' into 07-21-test_rsc_test_module_runner_hmr_false_

Author: hi-ogawa

packages/plugin-rsc/README.md

@@ -25,7 +25,6 @@ npx degit vitejs/vite-plugin-react/packages/plugin-rsc/examples/starter my-app
   - This demonstrates how to integrate [experimental React Router RSC API](https://remix.run/blog/rsc-preview). React Router now provides [official RSC support](https://reactrouter.com/how-to/react-server-components), so it's recommended to follow React Router's official documentation for the latest integration.
 - [`./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 `@vitejs/plugin-rsc/extra/{rsc,ssr,browser}` API for quick setup.
 - [`./examples/ssg`](./examples/ssg)
   - Static site generation (SSG) example with MDX and client components for interactivity.
 

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

@@ -46,65 +46,6 @@ test.describe('build-default', () => {
   defineTest(f)
 })
 
-test.describe('dev-base', () => {
-  const f = useFixture({
-    root: 'examples/basic',
-    mode: 'dev',
-    cliOptions: {
-      env: {
-        TEST_BASE: 'true',
-      },
-    },
-  })
-  defineTest(f)
-})
-
-test.describe('build-base', () => {
-  const f = useFixture({
-    root: 'examples/basic',
-    mode: 'build',
-    cliOptions: {
-      env: {
-        TEST_BASE: 'true',
-      },
-    },
-  })
-  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 !== 'true') return

packages/plugin-rsc/e2e/fixture.ts

@@ -192,3 +192,37 @@ function editFileJson(filepath: string, edit: (s: string) => string) {
     ),
   )
 }
+
+// inspired by
+//   https://github.com/remix-run/react-router/blob/433872f6ab098eaf946cc6c9cf80abf137420ad2/integration/helpers/vite.ts#L239
+// for syntax highlighting of /* js */, use this extension
+//   https://github.com/mjbvz/vscode-comment-tagged-templates
+export async function setupInlineFixture(options: {
+  src: string
+  dest: string
+  files?: Record<string, string>
+}) {
+  fs.rmSync(options.dest, { recursive: true, force: true })
+  fs.mkdirSync(options.dest, { recursive: true })
+
+  // copy src
+  fs.cpSync(options.src, options.dest, {
+    recursive: true,
+    filter: (src) => !src.includes('node_modules') && !src.includes('dist'),
+  })
+
+  // write additional files
+  if (options.files) {
+    for (const [filename, contents] of Object.entries(options.files)) {
+      let filepath = path.join(options.dest, filename)
+      fs.mkdirSync(path.dirname(filepath), { recursive: true })
+      // strip indent
+      const indent = contents.match(/^\s*/)?.[0] ?? ''
+      const strippedContents = contents
+        .split('\n')
+        .map((line) => line.replace(new RegExp(`^${indent}`), ''))
+        .join('\n')
+      fs.writeFileSync(filepath, strippedContents)
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test'
-import { type Fixture, useFixture } from './fixture'
+import { setupInlineFixture, type Fixture, useFixture } from './fixture'
 import {
   expectNoReload,
   testNoJs,
@@ -42,6 +42,107 @@ test.describe('build-no-ssr', () => {
   })
 })
 
+test.describe(() => {
+  const root = 'examples/e2e/temp/react-compiler'
+
+  test.beforeAll(async () => {
+    await setupInlineFixture({
+      src: 'examples/starter',
+      dest: root,
+      files: {
+        'vite.config.ts': /* js */ `
+          import rsc from '@vitejs/plugin-rsc'
+          import react from '@vitejs/plugin-react'
+          import { defineConfig } from 'vite'
+
+          export default defineConfig({
+            plugins: [
+              react({
+                babel: { plugins: ['babel-plugin-react-compiler'] },
+              }).map((p) => ({
+                ...p,
+                applyToEnvironment: (e) => e.name === 'client',
+              })),
+              rsc({
+                entries: {
+                  client: './src/framework/entry.browser.tsx',
+                  ssr: './src/framework/entry.ssr.tsx',
+                  rsc: './src/framework/entry.rsc.tsx',
+                }
+              }),
+            ],
+          })
+        `,
+      },
+    })
+  })
+
+  test.describe('dev-react-compiler', () => {
+    const f = useFixture({ root, mode: 'dev' })
+    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/client.tsx'))
+      expect(await res.text()).toContain('react.memo_cache_sentinel')
+    })
+  })
+
+  test.describe('build-react-compiler', () => {
+    const f = useFixture({ root, mode: 'build' })
+    defineTest(f)
+  })
+})
+
+test.describe(() => {
+  const root = 'examples/e2e/temp/base'
+
+  test.beforeAll(async () => {
+    await setupInlineFixture({
+      src: 'examples/starter',
+      dest: root,
+      files: {
+        'vite.config.ts': /* js */ `
+          import rsc from '@vitejs/plugin-rsc'
+          import react from '@vitejs/plugin-react'
+          import { defineConfig } from 'vite'
+
+          export default defineConfig({
+            base: '/custom-base/',
+            plugins: [
+              react(),
+              rsc({
+                entries: {
+                  client: './src/framework/entry.browser.tsx',
+                  ssr: './src/framework/entry.ssr.tsx',
+                  rsc: './src/framework/entry.rsc.tsx',
+                }
+              }),
+            ],
+          })
+        `,
+      },
+    })
+  })
+
+  test.describe('dev-base', () => {
+    const f = useFixture({ root, mode: 'dev' })
+    defineTest({
+      ...f,
+      url: (url) => new URL(url ?? './', f.url('./custom-base/')).href,
+    })
+  })
+
+  test.describe('build-base', () => {
+    const f = useFixture({ root, mode: 'build' })
+    defineTest({
+      ...f,
+      url: (url) => new URL(url ?? './', f.url('./custom-base/')).href,
+    })
+  })
+})
+
 function defineTest(f: Fixture, variant?: 'no-ssr') {
   const waitForHydration: typeof waitForHydration_ = (page) =>
     waitForHydration_(page, variant === 'no-ssr' ? '#root' : 'body')
@@ -110,6 +211,24 @@ function defineTest(f: Fixture, variant?: 'no-ssr') {
     await page.getByRole('button', { name: 'Client Counter: 0' }).click()
   })
 
+  test.describe(() => {
+    test.skip(f.mode === 'build')
+
+    test('server hmr', async ({ page }) => {
+      await page.goto(f.url())
+      await waitForHydration(page)
+      await using _ = await expectNoReload(page)
+      await expect(page.getByText('Vite + RSC')).toBeVisible()
+      const editor = f.createEditor('src/root.tsx')
+      editor.edit((s) =>
+        s.replace('<h1>Vite + RSC</h1>', '<h1>Vite x RSC</h1>'),
+      )
+      await expect(page.getByText('Vite x RSC')).toBeVisible()
+      editor.reset()
+      await expect(page.getByText('Vite + RSC')).toBeVisible()
+    })
+  })
+
   test('image assets', async ({ page }) => {
     await page.goto(f.url())
     await waitForHydration(page)
@@ -122,4 +241,25 @@ function defineTest(f: Fixture, variant?: 'no-ssr') {
       0,
     )
   })
+
+  test('css @js', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    await expect(page.locator('.read-the-docs')).toHaveCSS(
+      'color',
+      'rgb(136, 136, 136)',
+    )
+  })
+
+  test.describe(() => {
+    test.skip(variant === 'no-ssr')
+
+    testNoJs('css @nojs', async ({ page }) => {
+      await page.goto(f.url())
+      await expect(page.locator('.read-the-docs')).toHaveCSS(
+        'color',
+        'rgb(136, 136, 136)',
+      )
+    })
+  })
 }

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

@@ -25,7 +25,6 @@
     "@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.11",
     "vite": "^7.0.4",
     "vite-plugin-inspect": "^11.3.0",