fix(rsc): optimize use-sync-external-store (#674)

Author: hi-ogawa

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

@@ -52,7 +52,7 @@ test.describe('dev-non-optimized-cjs', () => {
     const editor = f.createEditor('vite.config.ts')
     editor.edit((s) =>
       s.replace(
-        `'@vitejs/test-dep-transitive-cjs > use-sync-external-store/shim/index.js',`,
+        `include: ['@vitejs/test-dep-transitive-cjs > @vitejs/test-dep-cjs'],`,
         ``,
       ),
     )
@@ -941,9 +941,10 @@ function defineTest(f: Fixture) {
   test('transitive cjs dep', async ({ page }) => {
     await page.goto(f.url())
     await waitForHydration(page)
-    await expect(page.getByTestId('transitive-cjs-client')).toHaveText(
-      'ok:browser',
-    )
+    await expect(page.getByTestId('transitive-cjs-client')).toHaveText('ok')
+    await expect(
+      page.getByTestId('transitive-use-sync-external-store-client'),
+    ).toHaveText('ok:browser')
   })
 
   test('use cache function', async ({ page }) => {

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

@@ -22,6 +22,7 @@
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "latest",
     "@vitejs/test-dep-transitive-cjs": "file:./test-dep/transitive-cjs",
+    "@vitejs/test-dep-transitive-use-sync-external-store": "file:./test-dep/transitive-use-sync-external-store",
     "@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",

packages/plugin-rsc/examples/basic/src/routes/deps/transitive-cjs/client.tsx

@@ -3,10 +3,18 @@
 // @ts-ignore
 import { TestClient } from '@vitejs/test-dep-transitive-cjs/client'
 
+// @ts-ignore
+import { TestClient as TestClient2 } from '@vitejs/test-dep-transitive-use-sync-external-store/client'
+
 export function TestTransitiveCjsClient() {
   return (
-    <div>
-      [test-dep-transitive-cjs-client: <TestClient />]
-    </div>
+    <>
+      <div>
+        [test-dep-transitive-cjs-client: <TestClient />]
+      </div>
+      <div>
+        [test-dep-transitive-use-sync-external-store-client: <TestClient2 />]
+      </div>
+    </>
   )
 }

packages/plugin-rsc/examples/basic/test-dep/cjs/index.js

@@ -0,0 +1 @@
+exports.ok = 'ok'

packages/plugin-rsc/examples/basic/test-dep/cjs/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@vitejs/test-dep-cjs",
+  "private": true,
+  "type": "commonjs",
+  "exports": "./index.js",
+  "peerDependencies": {
+    "react": "*"
+  }
+}

packages/plugin-rsc/examples/basic/test-dep/transitive-cjs/client.js

@@ -2,26 +2,16 @@
 
 import React from 'react'
 
-// similar to swr
-// https://github.com/vercel/swr/blob/063fe55dddb95f0b6c3f1637a935c43d732ded78/src/index/use-swr.ts#L3
-import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js'
+import { ok } from '@vitejs/test-dep-cjs'
 
 const h = React.createElement
 
-const noopStore = () => () => {}
-
 export function TestClient() {
-  const value = useSyncExternalStore(
-    noopStore,
-    () => 'ok:browser',
-    () => 'ok:ssr',
-  )
-
   return h(
     'span',
     {
       'data-testid': 'transitive-cjs-client',
     },
-    value,
+    ok,
   )
 }

packages/plugin-rsc/examples/basic/test-dep/transitive-cjs/package.json

@@ -6,7 +6,7 @@
     "./client": "./client.js"
   },
   "dependencies": {
-    "use-sync-external-store": "^1.5.0"
+    "@vitejs/test-dep-cjs": "file:../cjs"
   },
   "peerDependencies": {
     "react": "*"

packages/plugin-rsc/examples/basic/test-dep/transitive-use-sync-external-store/client.js

@@ -0,0 +1,28 @@
+'use client'
+
+import React from 'react'
+
+// similar to
+// https://github.com/vercel/swr/blob/063fe55dddb95f0b6c3f1637a935c43d732ded78/src/index/use-swr.ts#L3
+// https://github.com/TanStack/store/blob/1d1323283e79059821d6c731eaaee60e4143dbc2/packages/react-store/src/index.ts#L1
+import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js'
+
+const h = React.createElement
+
+const noopStore = () => () => {}
+
+export function TestClient() {
+  const value = useSyncExternalStore(
+    noopStore,
+    () => 'ok:browser',
+    () => 'ok:ssr',
+  )
+
+  return h(
+    'span',
+    {
+      'data-testid': 'transitive-use-sync-external-store-client',
+    },
+    value,
+  )
+}

packages/plugin-rsc/examples/basic/test-dep/transitive-use-sync-external-store/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@vitejs/test-dep-transitive-use-sync-external-store",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./client": "./client.js"
+  },
+  "dependencies": {
+    "use-sync-external-store": "^1.5.0"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}

packages/plugin-rsc/examples/basic/vite.config.ts

@@ -153,9 +153,7 @@ export default { fetch: handler };
     },
     ssr: {
       optimizeDeps: {
-        include: [
-          '@vitejs/test-dep-transitive-cjs > use-sync-external-store/shim/index.js',
-        ],
+        include: ['@vitejs/test-dep-transitive-cjs > @vitejs/test-dep-cjs'],
       },
     },
   },