test(rsc): test middleware mode (#817)

Author: hi-ogawa

packages/plugin-rsc/e2e/middleware-mode.test.ts

@@ -0,0 +1,37 @@
+import { test } from '@playwright/test'
+import { setupInlineFixture, useFixture } from './fixture'
+import { defineStarterTest } from './starter'
+
+test.describe(() => {
+  const root = 'examples/e2e/temp/middleware-mode'
+
+  test.beforeAll(async () => {
+    await setupInlineFixture({
+      src: 'examples/starter',
+      dest: root,
+    })
+  })
+
+  test.describe('dev-middleware-mode', () => {
+    const f = useFixture({
+      root,
+      mode: 'dev',
+      command: 'node ../../middleware-mode.ts dev',
+    })
+    defineStarterTest(f)
+  })
+
+  test.describe('build-middleware-mode', () => {
+    const f = useFixture({
+      root,
+      mode: 'build',
+      command: 'node ../../middleware-mode.ts start',
+      cliOptions: {
+        env: {
+          NODE_ENV: 'production',
+        },
+      },
+    })
+    defineStarterTest(f)
+  })
+})

packages/plugin-rsc/examples/e2e/middleware-mode.ts

@@ -0,0 +1,46 @@
+import path from 'node:path'
+import { pathToFileURL } from 'node:url'
+// @ts-ignore
+import connect from 'connect'
+import { createRequestListener } from '@remix-run/node-fetch-server'
+import sirv from 'sirv'
+import type { Connect } from 'vite'
+
+async function main() {
+  const app = connect() as Connect.Server
+  const command = process.argv[2]
+  if (command === 'dev') {
+    const { createServer } = await import('vite')
+    const server = await createServer({
+      clearScreen: false,
+      server: { middlewareMode: true },
+    })
+    app.use(server.middlewares)
+  } else if (command === 'start') {
+    app.use(
+      sirv('./dist/client', {
+        etag: true,
+        dev: true,
+        extensions: [],
+        ignores: false,
+      }),
+    )
+    const entry = await import(
+      pathToFileURL(path.resolve('dist/rsc/index.js')).href
+    )
+    app.use(createRequestListener(entry.default))
+  } else {
+    console.error(`Unknown command: ${command}`)
+    process.exitCode = 1
+    return
+  }
+
+  const port = process.env.PORT || 3000
+  app.listen(port)
+  console.log(`Server started at http://localhost:${port}`)
+}
+
+main().catch((e) => {
+  console.error(e)
+  process.exitCode = 1
+})

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

@@ -5,6 +5,8 @@
   "devDependencies": {
     "@vitejs/plugin-react": "latest",
     "@vitejs/plugin-rsc": "latest",
-    "babel-plugin-react-compiler": "19.1.0-rc.3"
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
+    "connect": "^3.7.0",
+    "sirv": "^3.0.1"
   }
 }

packages/plugin-rsc/examples/e2e/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["*.ts"],
+  "compilerOptions": {
+    "noPropertyAccessFromIndexSignature": false,
+    "noImplicitReturns": false,
+    "checkJs": false,
+    "declaration": true,
+    "isolatedDeclarations": true,
+    "jsx": "react-jsx"
+  }
+}