refactor(react): 0.9

Author: jog1t

examples/chat-room/actors/app.ts

@@ -1,11 +1,12 @@
-import { actor, setup } from "rivetkit";
+import { worker, setup } from "rivetkit";
+import { serve } from "@rivetkit/nodejs";
 
 // state managed by the actor
 export interface State {
 	messages: { username: string; message: string }[];
 }
 
-export const chatRoom = actor({
+export const chatRoom = worker({
 	// initialize state
 	state: { messages: [] } as State,
 
@@ -27,9 +28,18 @@ export const chatRoom = actor({
 });
 
 // Create and export the app
-export const app = setup({
-	actors: { chatRoom },
+export const registry = setup({
+	workers: { chatRoom },
+	cors: {
+		origin: "*", // Allow all origins
+		allowMethods: ["GET", "POST", "OPTIONS"], // Allow specific methods
+		allowHeaders: ["Content-Type", "Authorization", "User-Agent"], // Allow specific headers
+	},
+});
+
+serve(registry, {
+	hostname: "localhost",
 });
 
 // Export type for client type checking
-export type App = typeof app;
+export type Registry = typeof registry;

examples/chat-room/scripts/cli.ts

@@ -10,9 +10,11 @@ async function main() {
 
 	// connect to chat room - now accessed via property
 	// can still pass parameters like room
-	const chatRoom = client.chatRoom.getOrCreate(room, {
-		params: { room },
-	}).connect();
+	const chatRoom = client.chatRoom
+		.getOrCreate(room, {
+			params: { room },
+		})
+		.connect();
 
 	// fetch history
 	const history = await chatRoom.getHistory();

examples/chat-room/tests/chat-room.test.ts

@@ -1,9 +1,9 @@
 import { test, expect } from "vitest";
 import { setupTest } from "rivetkit/test";
-import { app } from "../actors/app";
+import { registry } from "../actors/app";
 
 test("chat room should handle messages", async (test) => {
-	const { client } = await setupTest(test, app);
+	const { client } = await setupTest(test, registry);
 
 	// Connect to chat room
 	const chatRoom = client.chatRoom.getOrCreate().connect();

packages/core/src/client/client.ts

@@ -96,6 +96,8 @@ export interface ClientOptions {
 export interface QueryOptions {
 	/** Parameters to pass to the connection. */
 	params?: unknown;
+	/** Signal to abort the request. */
+	signal?: AbortSignal;
 }
 
 /**
@@ -171,17 +173,20 @@ export interface ClientDriver {
 		req: HonoRequest | undefined,
 		workerQuery: WorkerQuery,
 		encodingKind: Encoding,
+		opts: { signal?: AbortSignal } | undefined,
 	): Promise<string>;
 	connectWebSocket(
 		req: HonoRequest | undefined,
 		workerQuery: WorkerQuery,
 		encodingKind: Encoding,
+		opts: { signal?: AbortSignal } | undefined,
 	): Promise<WebSocket>;
 	connectSse(
 		req: HonoRequest | undefined,
 		workerQuery: WorkerQuery,
 		encodingKind: Encoding,
 		params: unknown,
+		opts: { signal?: AbortSignal } | undefined,
 	): Promise<EventSource>;
 	sendHttpMessage(
 		req: HonoRequest | undefined,
@@ -190,6 +195,7 @@ export interface ClientDriver {
 		connectionId: string,
 		connectionToken: string,
 		message: wsToServer.ToServer,
+		opts: { signal?: AbortSignal } | undefined,
 	): Promise<Response>;
 }
 
@@ -362,6 +368,7 @@ export class ClientRaw {
 			undefined,
 			createQuery,
 			this.#encodingKind,
+			opts?.signal ? { signal: opts.signal } : undefined,
 		);
 		logger().debug("created worker with ID", {
 			name,

packages/core/src/client/http-client-driver.ts

@@ -53,6 +53,22 @@ export function createHttpClientDriver(managerEndpoint: string): ClientDriver {
 			name: string,
 			...args: Args
 		): Promise<Response> => {
+			let maybeActionOpts = args.at(-1);
+			if (maybeActionOpts && typeof maybeActionOpts === "object") {
+				// If the last argument is an options object, we remove it from the args
+				// and pass it as the params to the request.
+				if (
+					"signal" in maybeActionOpts &&
+					maybeActionOpts.signal instanceof AbortSignal
+				) {
+					// If the options object has a signal, we remove it from the args
+					// and pass it as the signal to the request.
+					args = args.slice(0, -1);
+				} else {
+					maybeActionOpts = undefined;
+				}
+			}
+
 			logger().debug("worker handle action", {
 				name,
 				args,
@@ -72,6 +88,7 @@ export function createHttpClientDriver(managerEndpoint: string): ClientDriver {
 					},
 					body: { a: args } satisfies ActionRequest,
 					encoding: encoding,
+					signal: maybeActionOpts?.signal,
 				},
 			);
 

packages/core/src/client/utils.ts

@@ -31,6 +31,7 @@ export interface HttpRequestOpts<Body> {
 	body?: Body;
 	encoding: Encoding;
 	skipParseResponse?: boolean;
+	signal?: AbortSignal;
 	customFetch?: (req: Request) => Promise<Response>;
 }
 
@@ -74,7 +75,8 @@ export async function sendHttpRequest<
 						: {}),
 					"User-Agent": httpUserAgent(),
 				},
-				body: bodyData
+				body: bodyData,
+				signal: opts.signal,
 			}),
 		);
 	} catch (error) {

packages/core/src/client/worker-conn.ts

@@ -19,7 +19,11 @@ import {
 } from "./client";
 import * as errors from "./errors";
 import { logger } from "./log";
-import { type WebSocketMessage as ConnMessage, messageLength, serializeWithEncoding } from "./utils";
+import {
+	type WebSocketMessage as ConnMessage,
+	messageLength,
+	serializeWithEncoding,
+} from "./utils";
 import {
 	HEADER_WORKER_ID,
 	HEADER_WORKER_QUERY,
@@ -58,6 +62,7 @@ export type WorkerErrorCallback = (error: errors.WorkerError) => void;
 
 export interface SendHttpMessageOpts {
 	ephemeral: boolean;
+	signal?: AbortSignal;
 }
 
 export type ConnTransport = { websocket: WebSocket } | { sse: EventSource };
@@ -249,11 +254,12 @@ enc
 		}
 	}
 
-	async #connectWebSocket() {
+	async #connectWebSocket({ signal }: { signal?: AbortSignal } = {}) {
 		const ws = await this.#driver.connectWebSocket(
 			undefined,
 			this.#workerQuery,
 			this.#encodingKind,
+			signal ? { signal } : undefined,
 		);
 		this.#transport = { websocket: ws };
 		ws.onopen = () => {
@@ -280,12 +286,13 @@ enc
 		};
 	}
 
-	async #connectSse() {
+	async #connectSse({ signal }: { signal?: AbortSignal } = {}) {
 		const eventSource = await this.#driver.connectSse(
 			undefined,
 			this.#workerQuery,
 			this.#encodingKind,
 			this.#params,
+			signal ? { signal } : undefined,
 		);
 		this.#transport = { sse: eventSource };
 		eventSource.onopen = () => {
@@ -657,6 +664,7 @@ enc
 				this.#connectionId,
 				this.#connectionToken,
 				message,
+				opts?.signal ? { signal: opts.signal } : undefined,
 			);
 
 			if (!res.ok) {

packages/core/src/client/worker-handle.ts

@@ -99,7 +99,7 @@ export class WorkerHandleRaw {
 	 *
 	 * @returns {Promise<string>} - A promise that resolves to the worker's ID
 	 */
-	async resolve(): Promise<string> {
+	async resolve({ signal }: { signal?: AbortSignal } = {}): Promise<string> {
 		if (
 			"getForKey" in this.#workerQuery ||
 			"getOrCreateForKey" in this.#workerQuery
@@ -109,6 +109,11 @@ export class WorkerHandleRaw {
 				undefined,
 				this.#workerQuery,
 				this.#encodingKind,
+				signal
+					? {
+							signal,
+						}
+					: undefined,
 			);
 			this.#workerQuery = { getForId: { workerId } };
 			return workerId;

packages/core/src/common/utils.ts

@@ -166,11 +166,12 @@ export function deconstructError(
 
 export function stringifyError(error: unknown): string {
 	if (error instanceof Error) {
-		if (process.env._WORKER_CORE_ERROR_STACK === "1") {
-			return `${error.name}: ${error.message}${error.stack ? `\n${error.stack}` : ""}`;
-		} else {
-			return `${error.name}: ${error.message}`;
-		}
+		// if (process.env._WORKER_CORE_ERROR_STACK === "1") {
+		// 	return `${error.name}: ${error.message}${error.stack ? `\n${error.stack}` : ""}`;
+		// } else {
+		// 	return `${error.name}: ${error.message}`;
+		// }
+		return `${error.name}: ${error.message}`;
 	} else if (typeof error === "string") {
 		return error;
 	} else if (typeof error === "object" && error !== null) {

packages/frameworks/framework-base/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>◢ RivetKit ⋅ Framework Base </title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>