fix(build): analyze client components loaded from server functions

e2e/fixtures/fs-router/src/components/hello-client.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { Suspense, useState, useEffect } from 'react';
+
+import { sayHello } from '../functions/say-hello.js';
+
+export function HelloClient() {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  return isClient && <Suspense fallback="loading...">{sayHello()}</Suspense>;
+}

e2e/fixtures/fs-router/src/components/say-hello.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { use } from 'react';
+
+export function SayHello({ promise }: { promise: Promise<string> }) {
+  const name = use(promise);
+  return <div>Hello {name}</div>;
+}

e2e/fixtures/fs-router/src/functions/say-hello.tsx

@@ -0,0 +1,10 @@
+'use server';
+
+import { SayHello } from '../components/say-hello.js';
+
+export function sayHello() {
+  const promise = new Promise<string>((resolve) =>
+    setTimeout(() => resolve('React'), 1000),
+  );
+  return <SayHello promise={promise} />;
+}

e2e/fixtures/fs-router/src/pages/hello-server.tsx

@@ -0,0 +1,5 @@
+import { HelloClient } from '../components/hello-client.js';
+
+export default async function HelloServer() {
+  return <HelloClient />;
+}

packages/waku/src/lib/builder/build.ts

@@ -155,7 +155,7 @@ const analyzeEntries = async (rootDir: string, config: ConfigDev) => {
       'build-analyze',
     ),
   );
-  const clientEntryFiles = Object.fromEntries(
+  let clientEntryFiles = Object.fromEntries(
     Array.from(clientFileMap).map(([fname, hash], i) => [
       `${DIST_ASSETS}/rsc${i}-${hash}`,
       fname,
@@ -166,7 +166,7 @@ const analyzeEntries = async (rootDir: string, config: ConfigDev) => {
       {
         mode: 'production',
         plugins: [
-          rscAnalyzePlugin({ isClient: true, serverFileMap }),
+          rscAnalyzePlugin({ isClient: true, clientFileMap, serverFileMap }),
           rscManagedPlugin({ ...config, addMainToInput: true }),
           ...deployPlugins(config),
         ],
@@ -188,6 +188,12 @@ const analyzeEntries = async (rootDir: string, config: ConfigDev) => {
       'build-analyze',
     ),
   );
+  clientEntryFiles = Object.fromEntries(
+    Array.from(clientFileMap).map(([fname, hash], i) => [
+      `${DIST_ASSETS}/rsc${i}-${hash}`,
+      fname,
+    ]),
+  );
   const serverEntryFiles = Object.fromEntries(
     Array.from(serverFileMap).map(([fname, hash], i) => [
       `${DIST_ASSETS}/rsf${i}-${hash}`,

packages/waku/src/lib/plugins/vite-plugin-rsc-analyze.ts

@@ -70,6 +70,7 @@ export function rscAnalyzePlugin(
   opts:
     | {
         isClient: true;
+        clientFileMap: Map<string, string>;
         serverFileMap: Map<string, string>;
       }
     | {
@@ -94,9 +95,16 @@ export function rscAnalyzePlugin(
             item.type === 'ExpressionStatement' &&
             item.expression.type === 'StringLiteral'
           ) {
-            if (!opts.isClient && item.expression.value === 'use client') {
+            if (
+              !opts.clientFileMap.has(id) &&
+              item.expression.value === 'use client'
+            ) {
               opts.clientFileMap.set(id, await hash(code));
-            } else if (item.expression.value === 'use server') {
+            }
+            if (
+              !opts.serverFileMap.has(id) &&
+              item.expression.value === 'use server'
+            ) {
               opts.serverFileMap.set(id, await hash(code));
             }
           }

packages/waku/tests/vite-plugin-rsc-analyze.test.ts

@@ -56,6 +56,7 @@ async function runTest(
       isClient
         ? rscAnalyzePlugin({
             isClient: true,
+            clientFileMap,
             serverFileMap,
           })
         : rscAnalyzePlugin({
@@ -115,7 +116,7 @@ describe('vite-plugin-rsc-analyze', () => {
       path.resolve(root, './plugin-rsc-analyze'),
       true,
       'client.ts',
-      new Set(),
+      new Set(['client.ts']),
       new Set(),
     );
   });
@@ -135,7 +136,7 @@ describe('vite-plugin-rsc-analyze', () => {
       path.resolve(root, './plugin-rsc-analyze'),
       true,
       'import-client.ts',
-      new Set(),
+      new Set(['client.ts']),
       new Set(),
     );
   });