fix: update clientReferenceMetaMap + eager transform during hotUpdate

Author: hi-ogawa

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

@@ -435,7 +435,7 @@ function defineTest(f: Fixture) {
     test('hmr switch server to client', async ({ page }) => {
       await page.goto(f.url())
       await waitForHydration(page)
-      // await using _ = await expectNoReload(page)
+      await using _ = await expectNoReload(page)
 
       await expect(page.getByTestId('test-hmr-switch-server')).toContainText(
         '(useState: false)',
@@ -446,32 +446,32 @@ function defineTest(f: Fixture) {
         '(useState: true)',
       )
 
+      await page.waitForTimeout(100)
       editor.reset()
-      // TODO: currently reload is required
-      await expect(async () => {
-        await page.reload()
-        await expect(page.getByTestId('test-hmr-switch-server')).toContainText(
-          '(useState: false)',
-          { timeout: 0 },
-        )
-      }).toPass()
-      // await expect(page.getByTestId('test-hmr-switch-server')).toContainText(
-      //   '(useState: false)',
-      // )
+      await expect(page.getByTestId('test-hmr-switch-server')).toContainText(
+        '(useState: false)',
+      )
     })
 
     test('hmr switch client to server', async ({ page }) => {
       await page.goto(f.url())
       await waitForHydration(page)
+      await using _ = await expectNoReload(page)
 
       await expect(page.getByTestId('test-hmr-switch-client')).toContainText(
         '(useState: true)',
       )
       const editor = f.createEditor('src/routes/hmr-switch/client.tsx')
       editor.edit((s) => s.replace(`'use client'`, ''))
-      // await expect(page.getByTestId('test-hmr-switch-client')).toContainText(
-      //   '(useState: false)',
-      // )
+      await expect(page.getByTestId('test-hmr-switch-client')).toContainText(
+        '(useState: false)',
+      )
+
+      await page.waitForTimeout(100)
+      editor.reset()
+      await expect(page.getByTestId('test-hmr-switch-client')).toContainText(
+        '(useState: true)',
+      )
     })
   })
 

packages/plugin-rsc/src/plugin.ts

@@ -453,7 +453,22 @@ export default function vitePluginRsc(
         const ids = ctx.modules.map((mod) => mod.id).filter((v) => v !== null)
         if (ids.length === 0) return
 
-        // TODO: handle server<->client switch
+        // handle client -> server switch (i.e. "use client" removal)
+        // by eagerly transforming new module on "rsc" environment.
+        if (this.environment.name === 'rsc') {
+          for (const mod of ctx.modules) {
+            if (
+              mod.type === 'js' &&
+              mod.id &&
+              mod.id in manager.clientReferenceMetaMap
+            ) {
+              try {
+                await this.environment.transformRequest(mod.url)
+              } catch {}
+            }
+          }
+        }
+
         // a shared component/module will have `isInsideClientBoundary = false` on `rsc` environment
         // and `isInsideClientBoundary = true` on `client` environment,
         // which means both server hmr and client hmr will be triggered.