chore(examples): add rsc example

.vscode/settings.json

@@ -43,5 +43,6 @@
 	"rust-analyzer.server.extraEnv": {
 		"CARGO_TARGET_DIR": "${workspaceFolder}/target/analyzer"
 	},
-	"rust-analyzer.cargo.targetDir": "${workspaceFolder}/target/analyzer"
+	"rust-analyzer.cargo.targetDir": "${workspaceFolder}/target/analyzer",
+	"deno.disablePaths": ["examples/react/src"]
 }

examples/react/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_ACTOR_MANAGER_URL=http://localhost:8080/actor-manager

examples/react/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+*.gen.*

examples/react/README.md

@@ -1,16 +1,21 @@
 # Rivet Actors x React
 
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app), showcasing the use of by [Rivet Actors](https://rivet.gg).
+This is a [Next.js](https://nextjs.org) project bootstrapped with
+[`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app), showcasing the use of by
+[Rivet Actors](https://rivet.gg).
 
 ## Overview
 
 ### Simple Chat
 
-It's a simple chat implementation using Rivet's `Actor` API. It demonstrates how to use the `Actor` API to create a chat application. The chat application is a simple chat room where users can send messages and see messages from other users in real-time. **Does not include any authentication or authorization.**
+It's a simple chat implementation using Rivet's `Actor` API. It demonstrates how to use the `Actor` API to
+create a chat application. The chat application is a simple chat room where users can send messages and see
+messages from other users in real-time. **Does not include any authentication or authorization.**
 
 ## Getting Started
 
-1. Go through the [Initial Setup](https://rivet.gg/docs/setup) documentation to get a basic understanding of how it works.
+1. Go through the [Initial Setup](https://rivet.gg/docs/setup) documentation to get a basic understanding of
+   how it works.
 2. Create `.env` file in the root of the project and add the following environment variables:
    ```bash
     NEXT_PUBLIC_ACTOR_MANAGER_URL=YOUR ACTOR MANAGER URL FROM INITIAL SETUP

examples/react/actor/README.md

@@ -10,6 +10,25 @@ It's a simple chat implementation using Rivet's `Actor` API. It demonstrates how
 create a chat application. The chat application is a simple chat room where users can send messages and see
 messages from other users in real-time. **Does not include any authentication or authorization.**
 
+### Server Driven UI
+
+It's a simple React Server Component implementation using Rivet's `Actor` API. It demonstrates how to use the
+`Actor` API to create a server-driven UI. The server component renders a simple response with passed props,
+and updates the UI in real-time.
+
+This example uses RSC payload introduced in the newest version of React. It's not widely supported yet, and
+it's only available in a few frameworks: Next.js or Waku. That's why we need those additionals steps to make
+it work in Deno. We hope that in the future this example will be easier to implement / cleaner.
+
+### Preqrequisites
+
+- Compile React dependencies to support Server Components in Deno (only needed once)
+  ```sh
+  cd scripts; deno run -A compile_react_deps.ts
+  ```
+
+We need to compile `react-server-dom-webpack/server`, by hand as Deno does not support import conditions yet.
+
 ## Prerequisites
 
 - [Rivet CLI](https://rivet.gg/docs/setup)
@@ -20,6 +39,7 @@ messages from other users in real-time. **Does not include any authentication or
 - `rivet.json` Configuration file for deploying the actor
 - `deno.json` Configuration file for dependencies for the actor
 - `simple-chat.ts` Simple chat implementation
+- `server-driven-ui.ts` Server Driven UI using RSC payload
 
 ## Deploying
 

examples/react/actor/deno.json

@@ -1,6 +1,9 @@
 {
 	"imports": {
 		"@rivet-gg/actor": "jsr:@rivet-gg/actor",
-		"@rivet-gg/actor-client": "jsr:@rivet-gg/actor-client"
+		"@rivet-gg/actor-client": "jsr:@rivet-gg/actor-client",
+		"react": "npm:react",
+		"get-stream": "npm:get-stream",
+		"react-server": "./scripts/dist/react-server.mjs"
 	}
 }