diff --git a/examples/ai-agent/src/backend/server.ts b/examples/ai-agent/src/backend/server.ts index f20eefd70..56b5a5272 100644 --- a/examples/ai-agent/src/backend/server.ts +++ b/examples/ai-agent/src/backend/server.ts @@ -2,6 +2,7 @@ import { registry } from "./registry"; registry.start({ cors: { - origin: "http://localhost:5173", + origin: "http://localhost:3000", + credentials: true, }, }); diff --git a/examples/ai-agent/src/frontend/App.tsx b/examples/ai-agent/src/frontend/App.tsx index e4b5b5f1b..9ca60bff9 100644 --- a/examples/ai-agent/src/frontend/App.tsx +++ b/examples/ai-agent/src/frontend/App.tsx @@ -1,9 +1,8 @@ -import { createClient, createRivetKit } from "@rivetkit/react"; +import { createRivetKit } from "@rivetkit/react"; import { useEffect, useState } from "react"; import type { Message, registry } from "../backend/registry"; -const client = createClient("http://localhost:8080"); -const { useActor } = createRivetKit(client); +const { useActor } = createRivetKit("http://localhost:8080"); export function App() { const aiAgent = useActor({ @@ -77,4 +76,4 @@ export function App() { ); -} \ No newline at end of file +} diff --git a/examples/better-auth-external-db/src/backend/server.ts b/examples/better-auth-external-db/src/backend/server.ts index 637a609a7..aa2319d9b 100644 --- a/examples/better-auth-external-db/src/backend/server.ts +++ b/examples/better-auth-external-db/src/backend/server.ts @@ -6,7 +6,12 @@ import { auth } from "./auth"; import { registry } from "./registry"; // Start RivetKit -registry.start(); +registry.start({ + cors: { + origin: "http://localhost:5173", + credentials: true, + }, +}); // Setup router const app = new Hono(); diff --git a/examples/better-auth-external-db/src/frontend/components/ChatRoom.tsx b/examples/better-auth-external-db/src/frontend/components/ChatRoom.tsx index d26226029..bba4c8c39 100644 --- a/examples/better-auth-external-db/src/frontend/components/ChatRoom.tsx +++ b/examples/better-auth-external-db/src/frontend/components/ChatRoom.tsx @@ -1,11 +1,9 @@ -import { createClient, createRivetKit } from "@rivetkit/react"; +import { createRivetKit } from "@rivetkit/react"; import { useEffect, useState } from "react"; import type { registry } from "../../backend/registry"; import { authClient } from "../auth-client"; -const client = createClient("http://localhost:8080"); - -const { useActor } = createRivetKit(client); +const { useActor } = createRivetKit("http://localhost:8080"); interface ChatRoomProps { user: { id: string; email: string }; diff --git a/examples/chat-room/src/frontend/App.tsx b/examples/chat-room/src/frontend/App.tsx index 99f7d08ed..858a17e1f 100644 --- a/examples/chat-room/src/frontend/App.tsx +++ b/examples/chat-room/src/frontend/App.tsx @@ -1,9 +1,8 @@ -import { createClient, createRivetKit } from "@rivetkit/react"; +import { createRivetKit } from "@rivetkit/react"; import { useEffect, useState } from "react"; import type { Message, registry } from "../backend/registry"; -const client = createClient("http://localhost:6420"); -const { useActor } = createRivetKit(client); +const { useActor } = createRivetKit("http://localhost:6420"); export function App() { const [roomId, setRoomId] = useState("general"); diff --git a/examples/crdt/src/backend/server.ts b/examples/crdt/src/backend/server.ts index f20eefd70..56b5a5272 100644 --- a/examples/crdt/src/backend/server.ts +++ b/examples/crdt/src/backend/server.ts @@ -2,6 +2,7 @@ import { registry } from "./registry"; registry.start({ cors: { - origin: "http://localhost:5173", + origin: "http://localhost:3000", + credentials: true, }, }); diff --git a/examples/crdt/src/frontend/App.tsx b/examples/crdt/src/frontend/App.tsx index bca29cd54..1eb07eae2 100644 --- a/examples/crdt/src/frontend/App.tsx +++ b/examples/crdt/src/frontend/App.tsx @@ -1,11 +1,10 @@ -import { createClient, createRivetKit } from "@rivetkit/react"; +import { createRivetKit } from "@rivetkit/react"; import { useEffect, useRef, useState } from "react"; import * as Y from "yjs"; import { applyUpdate, encodeStateAsUpdate } from "yjs"; import type { registry } from "../backend/registry"; -const client = createClient("http://localhost:8080"); -const { useActor } = createRivetKit(client); +const { useActor } = createRivetKit("http://localhost:8080"); function YjsEditor({ documentId }: { documentId: string }) { const yjsDocument = useActor({ @@ -192,4 +191,4 @@ function bufferToBase64(buffer: Uint8Array): string { binary += String.fromCharCode(buffer[i]); } return btoa(binary); -} \ No newline at end of file +} diff --git a/examples/database/src/backend/server.ts b/examples/database/src/backend/server.ts index f20eefd70..56b5a5272 100644 --- a/examples/database/src/backend/server.ts +++ b/examples/database/src/backend/server.ts @@ -2,6 +2,7 @@ import { registry } from "./registry"; registry.start({ cors: { - origin: "http://localhost:5173", + origin: "http://localhost:3000", + credentials: true, }, }); diff --git a/examples/database/src/frontend/App.tsx b/examples/database/src/frontend/App.tsx index ce896e982..754bc2673 100644 --- a/examples/database/src/frontend/App.tsx +++ b/examples/database/src/frontend/App.tsx @@ -1,9 +1,8 @@ -import { createClient, createRivetKit } from "@rivetkit/react"; +import { createRivetKit } from "@rivetkit/react"; import { useEffect, useState } from "react"; import type { Note, registry } from "../backend/registry"; -const client = createClient("http://localhost:8080"); -const { useActor } = createRivetKit(client); +const { useActor } = createRivetKit("http://localhost:8080"); function NotesApp({ userId }: { userId: string }) { const [notes, setNotes] = useState([]); @@ -199,4 +198,4 @@ export function App() { ); -} \ No newline at end of file +} diff --git a/examples/freestyle/src/frontend/App.tsx b/examples/freestyle/src/frontend/App.tsx index 2d3e91c2d..f8d8e17b6 100644 --- a/examples/freestyle/src/frontend/App.tsx +++ b/examples/freestyle/src/frontend/App.tsx @@ -1,13 +1,12 @@ -import { createClient, createRivetKit } from "@rivetkit/react"; +import { createRivetKit } from "@rivetkit/react"; import { useEffect, useState } from "react"; import type { Message, registry } from "../backend/registry"; -const client = createClient({ +const { useActor } = createRivetKit({ endpoint: import.meta.env.VITE_RIVET_ENDPOINT ?? "http://localhost:8080/api", namespace: import.meta.env.VITE_RIVET_NAMESPACE, runnerName: import.meta.env.VITE_RIVET_RUNNER_NAME ?? "freestyle-runner", }); -const { useActor } = createRivetKit(client); export function App() { const [roomId, setRoomId] = useState("general"); diff --git a/examples/game/src/backend/server.ts b/examples/game/src/backend/server.ts index f20eefd70..56b5a5272 100644 --- a/examples/game/src/backend/server.ts +++ b/examples/game/src/backend/server.ts @@ -2,6 +2,7 @@ import { registry } from "./registry"; registry.start({ cors: { - origin: "http://localhost:5173", + origin: "http://localhost:3000", + credentials: true, }, }); diff --git a/examples/game/src/frontend/App.tsx b/examples/game/src/frontend/App.tsx index f71b6e639..8eff9abad 100644 --- a/examples/game/src/frontend/App.tsx +++ b/examples/game/src/frontend/App.tsx @@ -1,9 +1,8 @@ -import { createClient, createRivetKit } from "@rivetkit/react"; +import { createRivetKit } from "@rivetkit/react"; import { useEffect, useRef, useState } from "react"; import type { Player, registry } from "../backend/registry"; -const client = createClient("http://localhost:8080"); -const { useActor } = createRivetKit(client); +const { useActor } = createRivetKit("http://localhost:8080"); export function App() { const [players, setPlayers] = useState([]); @@ -200,4 +199,4 @@ export function App() { ); -} \ No newline at end of file +} diff --git a/examples/hono-bun/src/backend/server.ts b/examples/hono-bun/src/backend/server.ts index 77cc48b7e..b2d846ba4 100644 --- a/examples/hono-bun/src/backend/server.ts +++ b/examples/hono-bun/src/backend/server.ts @@ -13,6 +13,7 @@ const { client, fetch } = registry.start({ getUpgradeWebSocket: () => upgradeWebSocket, cors: { origin: "http://localhost:5173", + credentials: true, }, }); diff --git a/examples/hono-bun/src/frontend/App.tsx b/examples/hono-bun/src/frontend/App.tsx index dd797ab90..d53ca6a0e 100644 --- a/examples/hono-bun/src/frontend/App.tsx +++ b/examples/hono-bun/src/frontend/App.tsx @@ -1,9 +1,8 @@ -import { createClient, createRivetKit } from "@rivetkit/react"; +import { createRivetKit } from "@rivetkit/react"; import { useState } from "react"; import type { registry } from "../backend/registry"; -const client = createClient("http://localhost:8080/rivet"); -const { useActor } = createRivetKit(client); +const { useActor } = createRivetKit("http://localhost:8080/rivet"); function App() { const [count, setCount] = useState(0); diff --git a/examples/hono-react/src/backend/server.ts b/examples/hono-react/src/backend/server.ts index 58006b776..4c5f80de1 100644 --- a/examples/hono-react/src/backend/server.ts +++ b/examples/hono-react/src/backend/server.ts @@ -5,6 +5,7 @@ import { registry } from "./registry"; const { client } = registry.start({ cors: { origin: "http://localhost:5173", + credentials: true, }, }); diff --git a/examples/hono-react/src/frontend/App.tsx b/examples/hono-react/src/frontend/App.tsx index 0277f1b8a..0fbc28b27 100644 --- a/examples/hono-react/src/frontend/App.tsx +++ b/examples/hono-react/src/frontend/App.tsx @@ -1,9 +1,8 @@ -import { createClient, createRivetKit } from "@rivetkit/react"; +import { createRivetKit } from "@rivetkit/react"; import { useState } from "react"; import type { registry } from "../backend/registry"; -const client = createClient("http://localhost:8080"); -const { useActor } = createRivetKit(client); +const { useActor } = createRivetKit("http://localhost:8080"); function App() { const [count, setCount] = useState(0); diff --git a/examples/next-js/src/components/Counter.tsx b/examples/next-js/src/components/Counter.tsx index 6ca86b7df..1dd070084 100644 --- a/examples/next-js/src/components/Counter.tsx +++ b/examples/next-js/src/components/Counter.tsx @@ -1,8 +1,14 @@ "use client"; + +import { createRivetKit } from "@rivetkit/next-js/client"; +import type { registry } from "@/rivet/registry"; import { useState } from "react"; -import { useActor } from "@/lib/rivet-client"; import styles from "./Counter.module.css"; +export const { useActor } = createRivetKit( + process.env.NEXT_RIVET_ENDPOINT ?? "http://localhost:3000/api/rivet", +); + export function Counter() { const [count, setCount] = useState(0); const [counterName, setCounterName] = useState("test-counter"); diff --git a/examples/next-js/src/lib/rivet-client.ts b/examples/next-js/src/lib/rivet-client.ts deleted file mode 100644 index e687b3c66..000000000 --- a/examples/next-js/src/lib/rivet-client.ts +++ /dev/null @@ -1,8 +0,0 @@ -"use client"; -import { createClient, createRivetKit } from "@rivetkit/next-js/client"; -import type { registry } from "@/rivet/registry"; - -const client = createClient( - process.env.NEXT_RIVET_ENDPOINT ?? "http://localhost:3000/api/rivet", -); -export const { useActor } = createRivetKit(client); diff --git a/examples/rate/src/backend/server.ts b/examples/rate/src/backend/server.ts index f20eefd70..56b5a5272 100644 --- a/examples/rate/src/backend/server.ts +++ b/examples/rate/src/backend/server.ts @@ -2,6 +2,7 @@ import { registry } from "./registry"; registry.start({ cors: { - origin: "http://localhost:5173", + origin: "http://localhost:3000", + credentials: true, }, }); diff --git a/examples/rate/src/frontend/App.tsx b/examples/rate/src/frontend/App.tsx index 7fe8aa468..d31a76e35 100644 --- a/examples/rate/src/frontend/App.tsx +++ b/examples/rate/src/frontend/App.tsx @@ -1,9 +1,8 @@ -import { createClient, createRivetKit } from "@rivetkit/react"; +import { createRivetKit } from "@rivetkit/react"; import { useEffect, useState } from "react"; import type { RateLimitResult, registry } from "../backend/registry"; -const client = createClient("http://localhost:8080"); -const { useActor } = createRivetKit(client); +const { useActor } = createRivetKit("http://localhost:8080"); function RateLimiterDemo({ userId }: { userId: string }) { const [result, setResult] = useState(null); @@ -147,4 +146,4 @@ export function App() { ); -} \ No newline at end of file +} diff --git a/examples/raw-fetch-handler/src/backend/server.ts b/examples/raw-fetch-handler/src/backend/server.ts index a70c8e887..394945681 100644 --- a/examples/raw-fetch-handler/src/backend/server.ts +++ b/examples/raw-fetch-handler/src/backend/server.ts @@ -4,7 +4,12 @@ import { cors } from "hono/cors"; import { registry } from "./registry"; // Start RivetKit -const { client } = registry.start(); +const { client } = registry.start({ + cors: { + origin: "http://localhost:5173", + credentials: true, + }, +}); // Setup router const app = new Hono(); @@ -12,6 +17,7 @@ const app = new Hono(); app.use( cors({ origin: "http://localhost:5173", + credentials: true, }), ); diff --git a/examples/raw-websocket-handler-proxy/src/backend/server.ts b/examples/raw-websocket-handler-proxy/src/backend/server.ts index 9b386ce5c..a8eb71f97 100644 --- a/examples/raw-websocket-handler-proxy/src/backend/server.ts +++ b/examples/raw-websocket-handler-proxy/src/backend/server.ts @@ -3,7 +3,12 @@ import { createNodeWebSocket } from "@hono/node-ws"; import { Hono } from "hono"; import { registry } from "./registry.js"; -const { client } = registry.start(); +const { client } = registry.start({ + cors: { + origin: "http://localhost:5173", + credentials: true, + }, +}); const app = new Hono(); const { injectWebSocket, upgradeWebSocket } = createNodeWebSocket({ app }); diff --git a/examples/raw-websocket-handler/src/frontend/App.tsx b/examples/raw-websocket-handler/src/frontend/App.tsx index e3acd5b2d..167bef54e 100644 --- a/examples/raw-websocket-handler/src/frontend/App.tsx +++ b/examples/raw-websocket-handler/src/frontend/App.tsx @@ -1,9 +1,8 @@ import React, { useState, useEffect, useRef } from "react"; -import { createClient, createRivetKit } from "@rivetkit/react"; +import { createRivetKit } from "@rivetkit/react"; import type { registry } from "../backend/registry"; -const client = createClient(); -const { useActor } = createRivetKit(client); +const { useActor } = createRivetKit("http://localhost:8080"); export default function App() { const [messages, setMessages] = useState>([]); diff --git a/examples/react/src/backend/server.ts b/examples/react/src/backend/server.ts index f20eefd70..b51ac47fe 100644 --- a/examples/react/src/backend/server.ts +++ b/examples/react/src/backend/server.ts @@ -3,5 +3,6 @@ import { registry } from "./registry"; registry.start({ cors: { origin: "http://localhost:5173", + credentials: true, }, }); diff --git a/examples/react/src/frontend/App.tsx b/examples/react/src/frontend/App.tsx index 9320b68d5..0fbc28b27 100644 --- a/examples/react/src/frontend/App.tsx +++ b/examples/react/src/frontend/App.tsx @@ -1,9 +1,8 @@ -import { createClient, createRivetKit } from "@rivetkit/react"; +import { createRivetKit } from "@rivetkit/react"; import { useState } from "react"; import type { registry } from "../backend/registry"; -const client = createClient(); -const { useActor } = createRivetKit(client); +const { useActor } = createRivetKit("http://localhost:8080"); function App() { const [count, setCount] = useState(0); diff --git a/examples/stream/src/backend/server.ts b/examples/stream/src/backend/server.ts index f20eefd70..56b5a5272 100644 --- a/examples/stream/src/backend/server.ts +++ b/examples/stream/src/backend/server.ts @@ -2,6 +2,7 @@ import { registry } from "./registry"; registry.start({ cors: { - origin: "http://localhost:5173", + origin: "http://localhost:3000", + credentials: true, }, }); diff --git a/examples/stream/src/frontend/App.tsx b/examples/stream/src/frontend/App.tsx index b226943d0..7dc73e6ea 100644 --- a/examples/stream/src/frontend/App.tsx +++ b/examples/stream/src/frontend/App.tsx @@ -1,9 +1,8 @@ -import { createClient, createRivetKit } from "@rivetkit/react"; +import { createRivetKit } from "@rivetkit/react"; import { useEffect, useState } from "react"; import type { registry } from "../backend/registry"; -const client = createClient("http://localhost:8080"); -const { useActor } = createRivetKit(client); +const { useActor } = createRivetKit("http://localhost:8080"); export function App() { const [topValues, setTopValues] = useState([]); @@ -179,4 +178,4 @@ export function App() { ); -} \ No newline at end of file +} diff --git a/examples/sync/src/backend/server.ts b/examples/sync/src/backend/server.ts index f20eefd70..56b5a5272 100644 --- a/examples/sync/src/backend/server.ts +++ b/examples/sync/src/backend/server.ts @@ -2,6 +2,7 @@ import { registry } from "./registry"; registry.start({ cors: { - origin: "http://localhost:5173", + origin: "http://localhost:3000", + credentials: true, }, }); diff --git a/examples/sync/src/frontend/App.tsx b/examples/sync/src/frontend/App.tsx index 19e470279..83851f4b0 100644 --- a/examples/sync/src/frontend/App.tsx +++ b/examples/sync/src/frontend/App.tsx @@ -1,9 +1,8 @@ -import { createClient, createRivetKit } from "@rivetkit/react"; +import { createRivetKit } from "@rivetkit/react"; import { useEffect, useRef, useState } from "react"; import type { Contact, registry } from "../backend/registry"; -const client = createClient("http://localhost:8080"); -const { useActor } = createRivetKit(client); +const { useActor } = createRivetKit("http://localhost:8080"); export function App() { const [contacts, setContacts] = useState([]); @@ -342,4 +341,4 @@ export function App() { ); -} \ No newline at end of file +} diff --git a/examples/tenant/src/backend/server.ts b/examples/tenant/src/backend/server.ts index f20eefd70..56b5a5272 100644 --- a/examples/tenant/src/backend/server.ts +++ b/examples/tenant/src/backend/server.ts @@ -2,6 +2,7 @@ import { registry } from "./registry"; registry.start({ cors: { - origin: "http://localhost:5173", + origin: "http://localhost:3000", + credentials: true, }, }); diff --git a/examples/tenant/src/frontend/App.tsx b/examples/tenant/src/frontend/App.tsx index c8356017a..0e7c2c1f5 100644 --- a/examples/tenant/src/frontend/App.tsx +++ b/examples/tenant/src/frontend/App.tsx @@ -1,9 +1,8 @@ -import { createClient, createRivetKit } from "@rivetkit/react"; +import { createRivetKit } from "@rivetkit/react"; import { useEffect, useState } from "react"; import type { Member, registry } from "../backend/registry"; -const client = createClient("http://localhost:8080"); -const { useActor } = createRivetKit(client); +const { useActor } = createRivetKit("http://localhost:8080"); const ORG_ID = "org-1"; diff --git a/packages/react/src/mod.ts b/packages/react/src/mod.ts index 9070556a0..8cd6cd30e 100644 --- a/packages/react/src/mod.ts +++ b/packages/react/src/mod.ts @@ -6,11 +6,25 @@ import { } from "@rivetkit/framework-base"; import { useStore } from "@tanstack/react-store"; import { useEffect, useRef } from "react"; -import type { Client, ExtractActorsFromRegistry } from "rivetkit/client"; +import { + type Client, + createClient, + type ExtractActorsFromRegistry, +} from "rivetkit/client"; export { createClient } from "rivetkit/client"; export function createRivetKit( + clientInput: Parameters[0], + opts: CreateRivetKitOptions = {}, +) { + return createRivetKitWithClient( + createClient(clientInput), + opts, + ); +} + +export function createRivetKitWithClient( client: Client, opts: CreateRivetKitOptions = {}, ) {