Add spaPlugin and async_hooks polyfill to fix page loading

Co-authored-by: hi-ogawa <[email protected]>

Author: Copilot

packages/plugin-rsc/examples/browser-mode2/src/framework/async-hooks-polyfill.js

@@ -0,0 +1,20 @@
+// Browser polyfill for node:async_hooks
+export class AsyncLocalStorage {
+  constructor() {
+    this.store = undefined
+  }
+
+  run(store, callback, ...args) {
+    const prev = this.store
+    this.store = store
+    try {
+      return callback(...args)
+    } finally {
+      this.store = prev
+    }
+  }
+
+  getStore() {
+    return this.store
+  }
+}

packages/plugin-rsc/examples/browser-mode2/vite.config.ts

@@ -1,9 +1,11 @@
 import { defineConfig, type Plugin } from 'vite'
 import react from '@vitejs/plugin-react'
 import rsc from '@vitejs/plugin-rsc'
+import fsp from 'node:fs/promises'
 
 export default defineConfig({
   plugins: [
+    spaPlugin(),
     react(),
     rsc({
       entries: {
@@ -12,8 +14,84 @@ export default defineConfig({
     }),
     rscBrowserMode2Plugin(),
   ],
+  define: {
+    'process.env.NODE_ENV': JSON.stringify('development'),
+  },
+  environments: {
+    rsc: {
+      resolve: {
+        noExternal: true,
+        alias: {
+          'node:async_hooks': '/src/framework/async-hooks-polyfill.js',
+        },
+      },
+      optimizeDeps: {
+        include: [
+          'react',
+          'react-dom',
+          'react/jsx-runtime',
+          'react/jsx-dev-runtime',
+          '@vitejs/plugin-rsc/vendor/react-server-dom/server.edge',
+          '@vitejs/plugin-rsc/vendor/react-server-dom/client.edge',
+        ],
+        exclude: ['@vitejs/plugin-rsc'],
+        esbuildOptions: {
+          platform: 'browser',
+        },
+      },
+    },
+  },
 })
 
+function spaPlugin(): Plugin[] {
+  // serve index.html before rsc server
+  return [
+    {
+      name: 'serve-spa',
+      configureServer(server) {
+        return () => {
+          server.middlewares.use(async (req, res, next) => {
+            try {
+              if (req.headers.accept?.includes('text/html')) {
+                const html = await fsp.readFile('index.html', 'utf-8')
+                const transformed = await server.transformIndexHtml('/', html)
+                res.setHeader('Content-type', 'text/html')
+                res.setHeader('Vary', 'accept')
+                res.end(transformed)
+                return
+              }
+            } catch (error) {
+              next(error)
+              return
+            }
+            next()
+          })
+        }
+      },
+      configurePreviewServer(server) {
+        return () => {
+          server.middlewares.use(async (req, res, next) => {
+            try {
+              if (req.headers.accept?.includes('text/html')) {
+                const html = await fsp.readFile(
+                  'dist/client/index.html',
+                  'utf-8',
+                )
+                res.end(html)
+                return
+              }
+            } catch (error) {
+              next(error)
+              return
+            }
+            next()
+          })
+        }
+      },
+    },
+  ]
+}
+
 function rscBrowserMode2Plugin(): Plugin[] {
   return [
     {