feat(rsc): enable server-chunk-based client chunks (#794)

Author: hi-ogawa

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

@@ -48,36 +48,48 @@ test.describe('build-default', () => {
   const f = useFixture({ root: 'examples/basic', mode: 'build' })
   defineTest(f)
 
-  test('custom client chunk', async () => {
+  test('server-chunk-based client chunks', async () => {
     const { chunks }: { chunks: Rollup.OutputChunk[] } = JSON.parse(
       f.createEditor('dist/client/.vite/test.json').read(),
     )
-    const chunk = chunks.find((c) => c.name === 'custom-chunk')
-    const expected = [1, 2, 3].map((i) =>
-      normalizePath(path.join(f.root, `src/routes/chunk/client${i}.tsx`)),
-    )
-    expect(chunk?.moduleIds).toEqual(expect.arrayContaining(expected))
+    const expectedGroups = {
+      'facade:src/routes/chunk2/client1.tsx': ['src/routes/chunk2/client1.tsx'],
+      'facade:src/routes/chunk2/server2.tsx': [
+        'src/routes/chunk2/client2.tsx',
+        'src/routes/chunk2/client2b.tsx',
+      ],
+      'shared:src/routes/chunk2/client3.tsx': ['src/routes/chunk2/client3.tsx'],
+    }
+    const actualGroups: Record<string, string[]> = {}
+    for (const key in expectedGroups) {
+      const groupId = `\0virtual:vite-rsc/client-references/group/${key}`
+      const groupChunk = chunks.find((c) => c.facadeModuleId === groupId)
+      if (groupChunk) {
+        actualGroups[key] = groupChunk.moduleIds
+          .filter((id) => id !== groupId)
+          .map((id) => normalizePath(path.relative(f.root, id)))
+      }
+    }
+    expect(actualGroups).toEqual(expectedGroups)
   })
 })
 
-test.describe('build-server-client-chunks', () => {
+test.describe('custom-client-chunks', () => {
   const f = useFixture({
     root: 'examples/basic',
     mode: 'build',
     cliOptions: {
       env: {
-        TEST_SERVER_CLIENT_CHUNKS: 'true',
+        TEST_CUSTOM_CLIENT_CHUNKS: 'true',
       },
     },
   })
 
-  defineTest(f)
-
-  test('custom client chunk', async () => {
+  test('basic', async () => {
     const { chunks }: { chunks: Rollup.OutputChunk[] } = JSON.parse(
       f.createEditor('dist/client/.vite/test.json').read(),
     )
-    const chunk = chunks.find((c) => c.name === 'root')
+    const chunk = chunks.find((c) => c.name === 'custom-chunk')
     const expected = [1, 2, 3].map((i) =>
       normalizePath(path.join(f.root, `src/routes/chunk/client${i}.tsx`)),
     )
@@ -181,7 +193,7 @@ test.describe('build-stable-chunks', () => {
       .sort()
     expect(newChunks).toEqual([
       'src/framework/entry.browser.tsx',
-      'virtual:vite-rsc/client-references/group/src/routes/client.tsx',
+      'virtual:vite-rsc/client-references/group/facade:src/routes/root.tsx',
     ])
     expect(oldChunks).toEqual(newChunks)
   })
@@ -1434,4 +1446,12 @@ function defineTest(f: Fixture) {
     await testBackgroundImage('.test-assets-server-css')
     await testBackgroundImage('.test-assets-client-css')
   })
+
+  test('lazy', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    await expect(page.getByTestId('test-chunk2')).toHaveText(
+      'test-chunk1|test-chunk2|test-chunk2b|test-chunk3|test-chunk3',
+    )
+  })
 }

packages/plugin-rsc/e2e/render-built-url.test.ts

@@ -104,7 +104,9 @@ test.describe(() => {
         f.root + '/dist/ssr/__vite_rsc_assets_manifest.js',
         'utf-8',
       )
-      expect(manifestFileContent).toContain(`__dynamicBase + "assets/client-`)
+      expect(manifestFileContent).toContain(
+        `__dynamicBase + "assets/entry.rsc-`,
+      )
     })
   })
 })

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

@@ -45,7 +45,7 @@ test.describe('build-development', () => {
   test('verify development', async ({ page }) => {
     let output!: string
     page.on('response', async (response) => {
-      if (response.url().match(/\/assets\/client-[\w-]+\.js$/)) {
+      if (response.url().match(/\/assets\/entry.rsc-[\w-]+\.js$/)) {
         output = await response.text()
       }
     })

packages/plugin-rsc/examples/basic/src/routes/chunk2/client1.tsx

@@ -0,0 +1,5 @@
+'use client'
+
+export default function TestChunkClient1() {
+  return <span>test-chunk1</span>
+}

packages/plugin-rsc/examples/basic/src/routes/chunk2/client2.tsx

@@ -0,0 +1,5 @@
+'use client'
+
+export default function TestChunkClient2() {
+  return <span>test-chunk2</span>
+}

packages/plugin-rsc/examples/basic/src/routes/chunk2/client2b.tsx

@@ -0,0 +1,5 @@
+'use client'
+
+export default function TestChunkClient2b() {
+  return <span>test-chunk2b</span>
+}

packages/plugin-rsc/examples/basic/src/routes/chunk2/client3.tsx

@@ -0,0 +1,5 @@
+'use client'
+
+export default function TestChunkClient3() {
+  return <span>test-chunk3</span>
+}

packages/plugin-rsc/examples/basic/src/routes/chunk2/server.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const TestChunkClient1 = React.lazy(() => import('./client1'))
+const TestChunkServer2 = React.lazy(() => import('./server2'))
+const TestChunkServer3 = React.lazy(() => import('./server3'))
+const TestChunkServer4 = React.lazy(() => import('./server4'))
+
+export function TestChunk2() {
+  return (
+    <div data-testid="test-chunk2">
+      <TestChunkClient1 />|
+      <TestChunkServer2 />|
+      <TestChunkServer3 />|
+      <TestChunkServer4 />
+    </div>
+  )
+}

packages/plugin-rsc/examples/basic/src/routes/chunk2/server2.tsx

@@ -0,0 +1,11 @@
+import TestChunkClient2 from './client2'
+import TestChunkClient2b from './client2b'
+
+export default function TestChunkServer2() {
+  return (
+    <>
+      <TestChunkClient2 />|
+      <TestChunkClient2b />
+    </>
+  )
+}

packages/plugin-rsc/examples/basic/src/routes/chunk2/server3.tsx

@@ -0,0 +1,5 @@
+import TestChunkClient3 from './client3'
+
+export default function TestChunkServer3() {
+  return <TestChunkClient3 />
+}