test(rsc): add composed server directives

packages/plugin-rsc/e2e/custom-server-function.test.ts

@@ -1,3 +1,3 @@
 import { expect, test, type Page } from '@playwright/test'
 import { useFixture } from './fixture'
 import {
@@ -84,7 +84,7 @@
 
   async function testActions(page: Page) {
     // The first two actions are inline functions in one RSC-reachable module.
     await page.getByRole('button', { name: 'Built-in: 0' }).click()
     await expect(
       page.getByRole('button', { name: 'Built-in: 1' }),
     ).toBeVisible()
@@ -92,6 +92,22 @@
     await page.getByRole('button', { name: 'Custom: 0' }).click()
     await expect(page.getByRole('button', { name: 'Custom: 1' })).toBeVisible()
 
+    await page
+      .getByRole('button', { name: 'Server file, custom inline: 0' })
+      .click()
+    await expect(
+      page.getByRole('button', { name: 'Server file, custom inline: 1' }),
+    ).toBeVisible()
+
+    await page
+      .getByRole('button', { name: 'Custom server file, server inline: 0' })
+      .click()
+    await expect(
+      page.getByRole('button', {
+        name: 'Custom server file, server inline: 1',
+      }),
+    ).toBeVisible()
+
     // This module is only imported by a Client Component, so its implementation
     // reaches the RSC build through the aggregated server reference manifest.
     await page.getByRole('button', { name: 'From client: 0' }).click()
@@ -104,5 +120,15 @@
       page.getByRole('button', { name: 'Built-in: 0' }),
     ).toBeVisible()
     await expect(page.getByRole('button', { name: 'Custom: 0' })).toBeVisible()
+
+    await page.getByRole('button', { name: 'Reset composition' }).click()
+    await expect(
+      page.getByRole('button', { name: 'Server file, custom inline: 0' }),
+    ).toBeVisible()
+    await expect(
+      page.getByRole('button', {
+        name: 'Custom server file, server inline: 0',
+      }),
+    ).toBeVisible()
   }
 }

packages/plugin-rsc/examples/custom-server-function/src/features/directive-composition/server.tsx

@@ -0,0 +1,31 @@
+import {
+  getCount as getCustomServerFileCount,
+  increment as incrementCustomServerFile,
+} from './use-custom-server-file.ts'
+import {
+  getCount as getServerFileCount,
+  increment as incrementServerFile,
+  reset as resetServerFile,
+} from './use-server-file.ts'
+
+export async function DirectiveComposition() {
+  const [serverFileCount, customServerFileCount] = await Promise.all([
+    getServerFileCount(),
+    getCustomServerFileCount(),
+  ])
+  return (
+    <>
+      <form action={incrementServerFile}>
+        <button>Server file, custom inline: {serverFileCount}</button>
+      </form>
+      <form action={incrementCustomServerFile}>
+        <button>
+          Custom server file, server inline: {customServerFileCount}
+        </button>
+      </form>
+      <form action={resetServerFile}>
+        <button>Reset composition</button>
+      </form>
+    </>
+  )
+}

packages/plugin-rsc/examples/custom-server-function/src/features/directive-composition/use-custom-server-file.ts

@@ -0,0 +1,16 @@
+'use custom-server'
+
+let count = 0
+
+export async function getCount() {
+  return count
+}
+
+export async function increment() {
+  'use server'
+  count++
+}
+
+export async function reset() {
+  count = 0
+}

packages/plugin-rsc/examples/custom-server-function/src/features/directive-composition/use-server-file.ts

@@ -0,0 +1,19 @@
+'use server'
+
+import { reset as resetCustomServerFile } from './use-custom-server-file.ts'
+
+let count = 0
+
+export async function getCount() {
+  return count
+}
+
+export async function increment() {
+  'use custom-server'
+  count++
+}
+
+export async function reset() {
+  count = 0
+  await resetCustomServerFile()
+}

packages/plugin-rsc/examples/custom-server-function/src/root.tsx

@@ -1,4 +1,5 @@
 import { ActionFromClient } from './features/action-from-client/client.tsx'
+import { DirectiveComposition } from './features/directive-composition/server.tsx'
 import { MixedDirectives } from './features/mixed-directives/server.tsx'
 
 export function Root(_props: { url: URL }) {
@@ -11,6 +12,7 @@ export function Root(_props: { url: URL }) {
       </head>
       <body>
         <MixedDirectives />
+        <DirectiveComposition />
         <ActionFromClient />
       </body>
     </html>