Introduce RSC "live reload."

packages/vite/package.json

@@ -40,6 +40,7 @@
   },
   "bin": {
     "rw-dev-fe": "./dist/devFeServer.js",
+    "rw-dev-rsc": "./dist/devRscServer.js",
     "rw-serve-fe": "./dist/runFeServer.js",
     "rw-vite-build": "./bins/rw-vite-build.mjs",
     "rw-vite-dev": "./bins/rw-vite-dev.mjs",
@@ -76,16 +77,19 @@
     "acorn-loose": "8.4.0",
     "buffer": "6.0.3",
     "busboy": "^1.6.0",
+    "chokidar": "3.6.0",
     "cookie": "0.6.0",
     "core-js": "3.37.1",
     "dotenv-defaults": "5.0.2",
+    "execa": "5.1.1",
     "express": "4.19.2",
     "find-my-way": "8.2.0",
     "fs-extra": "11.2.0",
     "http-proxy-middleware": "3.0.0",
     "isbot": "5.1.13",
     "react": "19.0.0-beta-04b058868c-20240508",
     "react-server-dom-webpack": "19.0.0-beta-04b058868c-20240508",
+    "rimraf": "6.0.1",
     "vite": "5.3.4",
     "vite-plugin-cjs-interop": "2.1.1",
     "vite-plugin-node-polyfills": "0.22.0",

packages/vite/src/devRscServer.ts

@@ -0,0 +1,131 @@
+import http from 'node:http'
+
+import chokidar from 'chokidar'
+import execa from 'execa'
+import { rimraf } from 'rimraf'
+
+import { getPaths } from '@redwoodjs/project-config'
+
+import { buildFeServer } from './buildFeServer.js'
+
+export const startDevServerWithLiveReload = async () => {
+  let child: execa.ExecaChildProcess
+  let client: http.ServerResponse
+
+  const rwjsPaths = getPaths()
+
+  const sendReloadEvent = () => {
+    if (typeof client !== 'undefined') {
+      client.write('event: reload\n')
+      client.write('data: \n\n')
+    }
+  }
+
+  const killCleanAndBuild = async () => {
+    try {
+      child.kill()
+    } catch (e) {
+      console.warn('[rsc-dev-server] could not shutdown server process', e)
+    }
+
+    await rimraf.rimraf(rwjsPaths.web.dist)
+    await rimraf.rimraf(rwjsPaths.api.dist)
+    await buildFeServer({ verbose: false, webDir: rwjsPaths.web.base })
+  }
+
+  const runFrontendServer = () => {
+    // NOTE: We explicitly run this via `execa.node`
+    // because we need this process to support IPC.
+    const child = execa.node(
+      './node_modules/@redwoodjs/vite/dist/runFeServer.js',
+      {
+        cwd: rwjsPaths.base,
+        stdio: 'inherit',
+        env: {
+          NODE_ENV: process.env.NODE_ENV,
+          NODE_OPTIONS: '--conditions react-server',
+        },
+      },
+    )
+
+    child.addListener('message', (m) => {
+      if (m === 'server ready') {
+        sendReloadEvent()
+      }
+    })
+
+    return child
+  }
+
+  const watcher = chokidar.watch('(web|api)/src/**/*.{ts,js,jsx,tsx}', {
+    persistent: true,
+    ignored: ['node_modules', '.redwood'],
+    ignoreInitial: true,
+    cwd: rwjsPaths.base,
+    awaitWriteFinish: true,
+  })
+
+  process.stdin.on('data', async (data) => {
+    const str = data.toString().trim().toLowerCase()
+    if (str !== 'rs') {
+      return
+    }
+
+    console.log('[rsc-dev-server] restarting...')
+    await killCleanAndBuild()
+    child = runFrontendServer()
+
+    try {
+      await child
+      console.log('[rsc-dev-server] restarted')
+    } catch (e) {
+      console.error('[rsc-dev-server] error', e)
+    }
+  })
+
+  watcher
+    .on('ready', async () => {
+      await killCleanAndBuild()
+      child = runFrontendServer()
+
+      http
+        .createServer(async (_req, res) => {
+          client = res
+          res.writeHead(200, {
+            'content-type': 'text/event-stream',
+            'cache-control': 'no-cache',
+            connection: 'keep-alive',
+            'access-control-allow-origin': '*',
+          })
+        })
+        .listen(8913)
+
+      try {
+        await child
+      } catch (e) {
+        console.error('[rsc-dev-server] error', e)
+      }
+    })
+    .on('all', async () => {
+      console.log('[rsc-dev-server] restarting...')
+      await killCleanAndBuild()
+      child = runFrontendServer()
+
+      try {
+        await child
+        console.log('[rsc-dev-server] restarted')
+      } catch (e) {
+        console.error('[rsc-dev-server] error', e)
+      }
+    })
+}
+
+process.env.NODE_ENV = 'development'
+startDevServerWithLiveReload()
+  .then(() => {
+    console.log('[rsc-dev-server] started')
+  })
+  .catch((e) => {
+    console.error('[rsc-dev-server] error', e)
+    process.exitCode = 1
+  })

packages/vite/src/runFeServer.ts

@@ -6,6 +6,7 @@
 // fe-server. And it's already created, but this hasn't been moved over yet.
 
 import path from 'node:path'
+import process from 'node:process'
 import url from 'node:url'
 
 import { createServerAdapter } from '@whatwg-node/server'
@@ -199,6 +200,10 @@ export async function runFeServer() {
   console.log(
     `Started production FE server on http://localhost:${rwConfig.web.port}`,
   )
+
+  if (typeof process.send !== 'undefined') {
+    process.send('server ready')
+  }
 }
 
 runFeServer()

packages/vite/src/streaming/streamHelpers.ts

@@ -69,6 +69,20 @@ globalThis.__webpack_require__ ||= (id) => {
 };
 `
 
+const rscLiveReload = `\
+// NOTE: This code is used during development to enable "live-reload."
+window.addEventListener('load', () => {
+  const sse = new EventSource('http://localhost:8913');
+  sse.addEventListener('reload', () => {
+    window.location.reload();
+  });
+  window.addEventListener('beforeunload', () => {
+    sse.close();
+  });
+  // TODO: Handle disconnect / error states.
+});
+`
+
 export async function reactRenderToStreamResponse(
   mwRes: MiddlewareResponse,
   renderOptions: RenderToStreamArgs,
@@ -179,7 +193,7 @@ export async function reactRenderToStreamResponse(
     bootstrapScriptContent:
       // Only insert assetMap if client side JS will be loaded
       jsBundles.length > 0
-        ? `window.__REDWOOD__ASSET_MAP = ${assetMap}; ${rscWebpackShims}`
+        ? `window.__REDWOOD__ASSET_MAP = ${assetMap}; ${rscWebpackShims}; ${rscLiveReload};`
         : undefined,
     bootstrapModules: jsBundles,
   }