Add server actions to client rendered RSC example

Author: devongovett

packages/examples/rsc-client/client/App.tsx

@@ -1,5 +1,5 @@
 import {ReactElement, Suspense} from 'react';
-import {fetchRSC} from '@parcel/rsc/client';
+import {fetchRSC, setServerCallback} from '@parcel/rsc/client';
 
 export function App() {
   return (
@@ -19,3 +19,14 @@ function RSC() {
   request ??= fetchRSC('http://localhost:3001');
   return request;
 }
+
+setServerCallback(async (id, args) => {
+  let result = await fetchRSC('http://localhost:3001/action', {
+    method: 'POST',
+    headers: {
+      'rsc-action-id': id,
+    },
+    body: args,
+  });
+  return result;
+});

packages/examples/rsc-client/package.json

@@ -11,10 +11,7 @@
     },
     "server": {
       "source": "server/server.tsx",
-      "context": "react-server",
-      "includeNodeModules": {
-        "express": false
-      }
+      "context": "react-server"
     }
   },
   "scripts": {
@@ -24,6 +21,7 @@
   "dependencies": {
     "@parcel/rsc": "*",
     "express": "^4.18.2",
+    "cors": "^2.8.5",
     "react": "^19",
     "react-dom": "^19"
   }

packages/examples/rsc-client/server/Counter.tsx

@@ -1,8 +1,16 @@
 "use client";
 
-import { useState } from "react";
+import { useState, startTransition } from "react";
+import {like} from './actions';
 
-export function Counter() {
-  let [count, setCount] = useState(0);
-  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
+export function Counter({likes}) {
+  let [count, setCount] = useState(likes);
+  let onClick = () => {
+    startTransition(async () => {
+      let newLikeCount = await like();
+      setCount(newLikeCount);
+    });
+  };
+
+  return <button onClick={onClick}>Count: {count}</button>;
 }

packages/examples/rsc-client/server/RSC.tsx

@@ -1,13 +1,14 @@
 "use server-entry";
 
 import {Counter} from './Counter';
+import {likeCount} from './actions';
 import './RSC.css';
 
 export async function RSC() {
   return (
     <div className="rsc">
       <h2>RSC!</h2>
-      <Counter />
+      <Counter likes={likeCount} />
     </div>
   );
 }

packages/examples/rsc-client/server/actions.ts

@@ -0,0 +1,8 @@
+'use server';
+
+export let likeCount = 0;
+
+export async function like() {
+  likeCount++;
+  return likeCount;
+}

packages/examples/rsc-client/server/server.tsx

@@ -1,18 +1,13 @@
 // Server dependencies.
 import express from 'express';
-import {renderRSC} from '@parcel/rsc/node';
+import cors from 'cors';
+import {renderRSC, callAction} from '@parcel/rsc/node';
 
 // Page components. These must have "use server-entry" so they are treated as code splitting entry points.
 import {RSC} from './RSC';
 
 const app = express();
-
-app.use(function (req, res, next) {
-  res.setHeader('Access-Control-Allow-Methods', 'GET,HEAD,POST');
-  res.setHeader('Access-Control-Allow-Origin', '*');
-  res.setHeader('Access-Control-Allow-Headers', 'rsc-action');
-  next();
-});
+app.use(cors());
 
 app.get('/', async (req, res) => {
   // Render the server component to an RSC payload.
@@ -22,5 +17,13 @@ app.get('/', async (req, res) => {
   stream.pipe(res);
 });
 
+app.post('/action', async (req, res) => {
+  let id = req.get('rsc-action-id');
+  let {result} = await callAction(req, id);
+  let stream = renderRSC(result);
+  res.set('Content-Type', 'text/x-component');
+  stream.pipe(res);
+});
+
 app.listen(3001);
 console.log('Server listening on port 3001');

packages/transformers/js/src/JSTransformer.js

@@ -776,7 +776,7 @@ export default (new Transformer({
         sourceType: 'module',
         outputFormat: 'commonjs',
         engines: asset.env.engines,
-        includeNodeModules: false,
+        includeNodeModules: true,
         isLibrary: false,
         sourceMap: asset.env.sourceMap,
         shouldOptimize: asset.env.shouldOptimize,

packages/utils/rsc/src/client.tsx

@@ -1,8 +1,13 @@
 /* @jsxRuntime automatic */
-import { ReactNode, startTransition, useInsertionEffect } from 'react';
-import {createFromReadableStream, createFromFetch, encodeReply, setServerCallback, createTemporaryReferenceSet} from 'react-server-dom-parcel/client';
+import {ReactNode, startTransition, useInsertionEffect} from 'react';
+import {createFromReadableStream, createFromFetch, encodeReply, setServerCallback as setReactServerCallback, createTemporaryReferenceSet} from 'react-server-dom-parcel/client';
 import {rscStream} from 'rsc-html-stream/client';
-import { hydrateRoot, HydrationOptions, Root } from 'react-dom/client';
+import {hydrateRoot, HydrationOptions, Root} from 'react-dom/client';
+
+type CallServerCallback = <T>(id: string, args: any[]) => Promise<T>;
+export function setServerCallback(cb: CallServerCallback): void {
+  return setReactServerCallback(cb);
+}
 
 // Stream in initial RSC payload embedded in the HTML.
 let initialRSCPayload: Promise<ReactNode>;

yarn.lock

@@ -4750,6 +4750,14 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
+cors@^2.8.5:
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
+  integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
+  dependencies:
+    object-assign "^4"
+    vary "^1"
+
 [email protected]:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3"
@@ -10433,7 +10441,7 @@ [email protected], "nx@>=15.5.2 < 16":
     "@nrwl/nx-win32-arm64-msvc" "15.9.7"
     "@nrwl/nx-win32-x64-msvc" "15.9.7"
 
-object-assign@^4.0.1, object-assign@^4.1.1:
+object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -14473,7 +14481,7 @@ value-or-function@^3.0.0:
   resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-3.0.0.tgz#1c243a50b595c1be54a754bfece8563b9ff8d813"
   integrity sha512-jdBB2FrWvQC/pnPtIqcLsMaQgjhdb6B7tk1MMyTKapox+tQZbdRP4uLxu/JY0t7fbfDCUMnuelzEYv5GsxHhdg==
 
-vary@~1.1.2:
+vary@^1, vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==