npm - @signe/room - Versions diffs - 2.10.0 → 3.0.0 - Mend

@signe/room 2.10.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

package/CHANGELOG.md +7 -0
package/dist/chunk-EUXUH3YW.js +15 -0
package/dist/chunk-EUXUH3YW.js.map +1 -0
package/dist/cloudflare/index.d.ts +71 -0
package/dist/cloudflare/index.js +320 -0
package/dist/cloudflare/index.js.map +1 -0
package/dist/index.d.ts +66 -187
package/dist/index.js +727 -106
package/dist/index.js.map +1 -1
package/dist/node/index.d.ts +164 -0
package/dist/node/index.js +786 -0
package/dist/node/index.js.map +1 -0
package/dist/party-dNs-hqkq.d.ts +175 -0
package/examples/cloudflare/README.md +62 -0
package/examples/cloudflare/node_modules/.bin/tsc +17 -0
package/examples/cloudflare/node_modules/.bin/tsserver +17 -0
package/examples/cloudflare/node_modules/.bin/wrangler +17 -0
package/examples/cloudflare/node_modules/.bin/wrangler2 +17 -0
package/examples/cloudflare/package.json +24 -0
package/examples/cloudflare/public/index.html +443 -0
package/examples/cloudflare/src/index.ts +28 -0
package/examples/cloudflare/src/room.ts +44 -0
package/examples/cloudflare/tsconfig.json +10 -0
package/examples/cloudflare/wrangler.jsonc +25 -0
package/examples/node/README.md +57 -0
package/examples/node/node_modules/.bin/tsc +17 -0
package/examples/node/node_modules/.bin/tsserver +17 -0
package/examples/node/node_modules/.bin/tsx +17 -0
package/examples/node/package.json +23 -0
package/examples/node/public/index.html +443 -0
package/examples/node/room.ts +44 -0
package/examples/node/server.sqlite.ts +52 -0
package/examples/node/server.ts +51 -0
package/examples/node/tsconfig.json +10 -0
package/examples/node-game/README.md +66 -0
package/examples/node-game/package.json +23 -0
package/examples/node-game/public/index.html +705 -0
package/examples/node-game/room.ts +145 -0
package/examples/node-game/server.sqlite.ts +54 -0
package/examples/node-game/server.ts +53 -0
package/examples/node-game/tsconfig.json +10 -0
package/examples/node-shard/README.md +32 -0
package/examples/node-shard/dev.ts +39 -0
package/examples/node-shard/package.json +24 -0
package/examples/node-shard/public/index.html +777 -0
package/examples/node-shard/room-server.ts +68 -0
package/examples/node-shard/room.ts +105 -0
package/examples/node-shard/shared.ts +6 -0
package/examples/node-shard/tsconfig.json +14 -0
package/examples/node-shard/world-server.ts +169 -0
package/package.json +14 -5
package/readme.md +371 -4
package/src/cloudflare/index.ts +474 -0
package/src/jwt.ts +1 -5
package/src/mock.ts +29 -7
package/src/node/index.ts +1112 -0
package/src/server.ts +600 -51
package/src/session.guard.ts +6 -2
package/src/shard.ts +91 -23
package/src/storage.ts +29 -5
package/src/testing.ts +4 -3
package/src/types/party.ts +4 -1
package/src/world.guard.ts +23 -4
package/src/world.ts +121 -21
package/examples/game/.vscode/launch.json +0 -11
package/examples/game/.vscode/settings.json +0 -11
package/examples/game/README.md +0 -40
package/examples/game/app/client.tsx +0 -15
package/examples/game/app/components/Admin.tsx +0 -1089
package/examples/game/app/components/Room.tsx +0 -162
package/examples/game/app/styles.css +0 -31
package/examples/game/package-lock.json +0 -225
package/examples/game/package.json +0 -20
package/examples/game/party/game.room.ts +0 -32
package/examples/game/party/server.ts +0 -10
package/examples/game/party/shard.ts +0 -5
package/examples/game/partykit.json +0 -14
package/examples/game/public/favicon.ico +0 -0
package/examples/game/public/index.html +0 -27
package/examples/game/public/normalize.css +0 -351
package/examples/game/shared/room.schema.ts +0 -14
package/examples/game/tsconfig.json +0 -109

package/examples/node/public/index.html ADDED Viewed

@@ -0,0 +1,443 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Signe Node Room</title>
+    <style>
+      :root {
+        color-scheme: light;
+        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        min-height: 100vh;
+        background: #f5f7fa;
+        color: #17191c;
+      }
+      main {
+        width: min(960px, calc(100vw - 32px));
+        margin: 0 auto;
+        padding: 32px 0;
+        display: grid;
+        gap: 18px;
+      }
+      header {
+        display: flex;
+        align-items: end;
+        justify-content: space-between;
+        gap: 16px;
+      }
+      h1,
+      h2 {
+        margin: 0;
+        line-height: 1.1;
+      }
+      h1 {
+        font-size: 30px;
+      }
+      h2 {
+        font-size: 18px;
+      }
+      .muted,
+      .status {
+        color: #5b6472;
+      }
+      .panel,
+      .card {
+        border: 1px solid #d9dde3;
+        border-radius: 8px;
+        background: #ffffff;
+      }
+      .panel {
+        padding: 20px;
+        display: grid;
+        gap: 16px;
+      }
+      .join {
+        max-width: 520px;
+      }
+      form {
+        display: grid;
+        gap: 12px;
+      }
+      label {
+        display: grid;
+        gap: 6px;
+        font-size: 14px;
+        font-weight: 600;
+      }
+      input {
+        min-height: 42px;
+        border: 1px solid #c9d0d9;
+        border-radius: 6px;
+        padding: 0 12px;
+        font: inherit;
+      }
+      button {
+        min-height: 40px;
+        border: 1px solid #17191c;
+        border-radius: 6px;
+        background: #17191c;
+        color: #ffffff;
+        padding: 0 14px;
+        font: inherit;
+        cursor: pointer;
+      }
+      button.secondary {
+        background: #ffffff;
+        color: #17191c;
+      }
+      .room {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 280px;
+        gap: 18px;
+      }
+      .count {
+        font-size: 72px;
+        line-height: 1;
+        font-weight: 700;
+      }
+      .actions {
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+      }
+      .session {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+        font-size: 12px;
+      }
+      .users {
+        padding: 16px;
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .user-list {
+        display: grid;
+        gap: 8px;
+      }
+      .user {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        min-height: 40px;
+        padding: 8px 10px;
+        border: 1px solid #e1e5ea;
+        border-radius: 6px;
+      }
+      .badge {
+        border-radius: 999px;
+        padding: 3px 8px;
+        font-size: 12px;
+        background: #edf1f5;
+        color: #4b5563;
+        white-space: nowrap;
+      }
+      .badge.online {
+        background: #e7f7ed;
+        color: #146c36;
+      }
+      .hidden {
+        display: none;
+      }
+      @media (max-width: 720px) {
+        header,
+        .room {
+          grid-template-columns: 1fr;
+          display: grid;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <header>
+        <div>
+          <h1>Signe Node Room</h1>
+          <div class="muted" id="roomLabel">Choose a room</div>
+        </div>
+        <button id="leaveRoom" class="secondary hidden" type="button">Change room</button>
+      </header>
+      <section class="panel join" id="joinPanel">
+        <h2>Join a room</h2>
+        <form id="joinForm">
+          <label>
+            Room
+            <input id="roomInput" name="room" autocomplete="off" required value="demo" />
+          </label>
+          <label>
+            Name
+            <input id="nameInput" name="name" autocomplete="name" required />
+          </label>
+          <button type="submit">Enter room</button>
+        </form>
+      </section>
+      <section class="room hidden" id="roomPanel">
+        <div class="panel">
+          <h2>Counter</h2>
+          <div class="count" id="count">0</div>
+          <div class="actions">
+            <button id="increment" type="button">Increment</button>
+            <button id="reset" class="secondary" type="button">Reset</button>
+            <button id="resetSession" class="secondary" type="button">New session</button>
+          </div>
+          <div class="status" id="status">Disconnected</div>
+          <div class="muted session" id="sessionLabel"></div>
+        </div>
+        <aside class="card users">
+          <h2>Users</h2>
+          <div class="user-list" id="users"></div>
+        </aside>
+      </section>
+    </main>
+    <script>
+      const state = {
+        socket: null,
+        roomId: getRoomIdFromPath(),
+        name: localStorage.getItem("signe-node-name") || "",
+        sessionId: localStorage.getItem("signe-node-session-id") || "",
+        users: {},
+      };
+      const joinPanel = document.querySelector("#joinPanel");
+      const roomPanel = document.querySelector("#roomPanel");
+      const roomLabel = document.querySelector("#roomLabel");
+      const leaveRoom = document.querySelector("#leaveRoom");
+      const joinForm = document.querySelector("#joinForm");
+      const roomInput = document.querySelector("#roomInput");
+      const nameInput = document.querySelector("#nameInput");
+      const count = document.querySelector("#count");
+      const status = document.querySelector("#status");
+      const sessionLabel = document.querySelector("#sessionLabel");
+      const users = document.querySelector("#users");
+      nameInput.value = state.name;
+      if (state.roomId) {
+        roomInput.value = state.roomId;
+      }
+      joinForm.addEventListener("submit", (event) => {
+        event.preventDefault();
+        const roomId = normalizeRoomId(roomInput.value);
+        const name = nameInput.value.trim() || "Anonymous";
+        localStorage.setItem("signe-node-name", name);
+        history.pushState({}, "", `/rooms/${encodeURIComponent(roomId)}`);
+        enterRoom(roomId, name);
+      });
+      leaveRoom.addEventListener("click", () => {
+        disconnect();
+        history.pushState({}, "", "/");
+        showJoin();
+      });
+      window.addEventListener("popstate", () => {
+        const roomId = getRoomIdFromPath();
+        if (roomId) {
+          enterRoom(roomId, state.name || "Anonymous");
+        } else {
+          disconnect();
+          showJoin();
+        }
+      });
+      document.querySelector("#increment").addEventListener("click", () => {
+        state.socket?.send(JSON.stringify({ action: "increment", value: { amount: 1 } }));
+      });
+      document.querySelector("#reset").addEventListener("click", async () => {
+        if (!state.roomId) return;
+        await fetch(`/parties/main/${encodeURIComponent(state.roomId)}/reset`, { method: "POST" });
+      });
+      document.querySelector("#resetSession").addEventListener("click", () => {
+        if (!state.roomId) return;
+        disconnect();
+        localStorage.removeItem("signe-node-session-id");
+        state.sessionId = "";
+        enterRoom(state.roomId, state.name || "Anonymous");
+      });
+      if (state.roomId) {
+        enterRoom(state.roomId, state.name || "Anonymous");
+      } else {
+        showJoin();
+      }
+      function enterRoom(roomId, name) {
+        disconnect();
+        state.roomId = roomId;
+        state.name = name;
+        state.users = {};
+        count.textContent = "0";
+        renderUsers();
+        showRoom();
+        const protocol = location.protocol === "https:" ? "wss" : "ws";
+        const sessionId = getSessionId();
+        const params = new URLSearchParams({ name, id: sessionId });
+        state.socket = new WebSocket(`${protocol}://${location.host}/parties/main/${encodeURIComponent(roomId)}?${params}`);
+        state.socket.addEventListener("open", () => {
+          status.textContent = "Connected";
+        });
+        state.socket.addEventListener("close", () => {
+          status.textContent = "Disconnected";
+        });
+        state.socket.addEventListener("message", (event) => {
+          const packet = JSON.parse(event.data);
+          if (packet.type !== "sync" || !packet.value) return;
+          if (typeof packet.value.count === "number") {
+            count.textContent = String(packet.value.count);
+          }
+          if (packet.value.users) {
+            mergeUsers(state.users, packet.value.users);
+            renderUsers();
+          }
+        });
+      }
+      function disconnect() {
+        if (state.socket) {
+          state.socket.close();
+          state.socket = null;
+        }
+      }
+      function showJoin() {
+        state.roomId = null;
+        joinPanel.classList.remove("hidden");
+        roomPanel.classList.add("hidden");
+        leaveRoom.classList.add("hidden");
+        roomLabel.textContent = "Choose a room";
+        status.textContent = "Disconnected";
+        sessionLabel.textContent = "";
+      }
+      function showRoom() {
+        joinPanel.classList.add("hidden");
+        roomPanel.classList.remove("hidden");
+        leaveRoom.classList.remove("hidden");
+        roomLabel.textContent = `/rooms/${state.roomId}`;
+        sessionLabel.textContent = `session ${getSessionId().slice(0, 8)}`;
+      }
+      function getSessionId() {
+        if (!state.sessionId) {
+          state.sessionId = crypto.randomUUID();
+          localStorage.setItem("signe-node-session-id", state.sessionId);
+        }
+        return state.sessionId;
+      }
+      function renderUsers() {
+        const entries = Object.entries(state.users);
+        users.innerHTML = entries.length
+          ? entries.map(([id, user]) => {
+              const name = escapeHtml(user.name || "Anonymous");
+              const connected = Boolean(user.connected);
+              return `
+                <div class="user">
+                  <span>${name}</span>
+                  <span class="badge ${connected ? "online" : ""}">${connected ? "connected" : "offline"}</span>
+                </div>
+              `;
+            }).join("")
+          : `<div class="muted">No users yet</div>`;
+      }
+      function mergeUsers(target, patch) {
+        for (const [id, value] of Object.entries(patch)) {
+          if (value === "$delete") {
+            delete target[id];
+            continue;
+          }
+          target[id] = mergeValue(target[id], value);
+        }
+      }
+      function mergeValue(current, patch) {
+        if (!patch || typeof patch !== "object" || Array.isArray(patch)) {
+          return patch;
+        }
+        const next = current && typeof current === "object" && !Array.isArray(current)
+          ? { ...current }
+          : {};
+        for (const [key, value] of Object.entries(patch)) {
+          if (value === "$delete") {
+            delete next[key];
+          } else {
+            next[key] = mergeValue(next[key], value);
+          }
+        }
+        return next;
+      }
+      function getRoomIdFromPath() {
+        const match = location.pathname.match(/^\/rooms\/([^/]+)$/);
+        return match ? decodeURIComponent(match[1]) : null;
+      }
+      function normalizeRoomId(value) {
+        return value.trim().replace(/[^a-zA-Z0-9_-]/g, "-") || "demo";
+      }
+      function escapeHtml(value) {
+        return value.replace(/[&<>"']/g, (char) => ({
+          "&": "&amp;",
+          "<": "&lt;",
+          ">": "&gt;",
+          "\"": "&quot;",
+          "'": "&#039;",
+        }[char]));
+      }
+    </script>
+  </body>
+</html>

package/examples/node/room.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import { Action, Request, Room, Server } from "@signe/room";
+import { signal } from "@signe/reactive";
+import { connected, sync, users } from "@signe/sync";
+import { z } from "zod";
+class DemoUser {
+  @sync() name = signal("Anonymous");
+  @connected() connected = signal(false);
+}
+@Room({ path: "{roomId}", sessionExpiryTime: 2000 })
+class CounterRoom {
+  @sync() count = signal(0);
+  @users(DemoUser) users = signal<Record<string, DemoUser>>({});
+  onJoin(user: DemoUser, _conn: unknown, ctx: { request?: Request }) {
+    const url = new URL(ctx.request?.url ?? "http://localhost");
+    const name = url.searchParams.get("name")?.trim();
+    if (name) {
+      user.name.set(name.slice(0, 40));
+    }
+  }
+  @Action("increment", z.object({ amount: z.number().optional() }))
+  increment(_user: DemoUser, value: { amount?: number }) {
+    this.count.update((count) => count + (value.amount ?? 1));
+  }
+  @Request({ path: "/count" })
+  getCount() {
+    return { count: this.count() };
+  }
+  @Request({ path: "/reset", method: "POST" })
+  reset() {
+    this.count.set(0);
+    return { count: this.count() };
+  }
+}
+export class CounterServer extends Server {
+  rooms = [CounterRoom];
+}

package/examples/node/server.sqlite.ts ADDED Viewed

@@ -0,0 +1,52 @@
+import { createServer } from "node:http";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { WebSocketServer } from "ws";
+import { createNodeRoomTransport, createSqliteNodeRoomStorage } from "@signe/room/node";
+import { CounterServer } from "./room";
+const root = fileURLToPath(new URL(".", import.meta.url));
+const transport = createNodeRoomTransport(CounterServer, {
+  partiesPath: "/parties/main",
+  storage: createSqliteNodeRoomStorage({
+    databasePath: join(root, "rooms.sqlite"),
+  }),
+});
+const server = createServer(async (req, res) => {
+  if (req.url?.startsWith("/parties/main/")) {
+    await transport.handleNodeRequest(req, res);
+    return;
+  }
+  if (req.url === "/" || req.url === "/index.html" || req.url?.startsWith("/rooms/")) {
+    const html = await readFile(join(root, "public/index.html"), "utf8");
+    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+    res.end(html);
+    return;
+  }
+  res.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+  res.end("Not Found");
+});
+const wsServer = new WebSocketServer({ noServer: true });
+server.on("upgrade", (request, socket, head) => {
+  if (request.url?.startsWith("/parties/main/")) {
+    transport.handleUpgrade(wsServer, request, socket, head);
+    return;
+  }
+  socket.destroy();
+});
+server.listen(3000, () => {
+  console.log("Signe Node room SQLite example: http://localhost:3000");
+  console.log("SQLite file: packages/room/examples/node/rooms.sqlite");
+  console.log("Room URL: http://localhost:3000/rooms/demo");
+  console.log("HTTP endpoint: http://localhost:3000/parties/main/demo/count");
+  console.log("WebSocket: ws://localhost:3000/parties/main/demo?name=Sam");
+});

package/examples/node/server.ts ADDED Viewed

@@ -0,0 +1,51 @@
+import { createServer } from "node:http";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { WebSocketServer } from "ws";
+import { createMemoryNodeRoomStorage, createNodeRoomTransport } from "@signe/room/node";
+import { CounterServer } from "./room";
+const root = fileURLToPath(new URL(".", import.meta.url));
+const storage = createMemoryNodeRoomStorage();
+const transport = createNodeRoomTransport(CounterServer, {
+  partiesPath: "/parties/main",
+  storage,
+});
+const server = createServer(async (req, res) => {
+  if (req.url?.startsWith("/parties/main/")) {
+    await transport.handleNodeRequest(req, res);
+    return;
+  }
+  if (req.url === "/" || req.url === "/index.html" || req.url?.startsWith("/rooms/")) {
+    const html = await readFile(join(root, "public/index.html"), "utf8");
+    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+    res.end(html);
+    return;
+  }
+  res.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+  res.end("Not Found");
+});
+const wsServer = new WebSocketServer({ noServer: true });
+server.on("upgrade", (request, socket, head) => {
+  if (request.url?.startsWith("/parties/main/")) {
+    transport.handleUpgrade(wsServer, request, socket, head);
+    return;
+  }
+  socket.destroy();
+});
+server.listen(3000, () => {
+  console.log("Signe Node room example: http://localhost:3000");
+  console.log("Room URL: http://localhost:3000/rooms/demo");
+  console.log("HTTP endpoint: http://localhost:3000/parties/main/demo/count");
+  console.log("WebSocket: ws://localhost:3000/parties/main/demo?name=Sam");
+});

package/examples/node/tsconfig.json ADDED Viewed

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  },
+  "include": ["room.ts", "server.ts", "server.sqlite.ts"],
+  "exclude": []
+}

package/examples/node-game/README.md ADDED Viewed

@@ -0,0 +1,66 @@
+# `@signe/room` Node Game Example
+This example runs a small multiplayer arena game on a plain Node.js HTTP server
+with WebSocket upgrades handled by `ws`.
+```bash
+pnpm install
+pnpm --filter @signe/room-node-game-example dev
+```
+Open http://localhost:3000, choose a room id and a display name, then enter the
+arena. Open the same room in another browser tab with a different session to see
+both players move and score in real time.
+Set `PORT=3001` before the command if port `3000` is already in use.
+- App URL: `http://localhost:3000/rooms/demo`
+- HTTP: `GET /parties/main/demo/state`
+- HTTP: `POST /parties/main/demo/reset`
+- WebSocket: `ws://localhost:3000/parties/main/demo?name=Sam&id=browser-session-id`
+The room uses `@users()` and `@connected()` from `@signe/sync`, so the players
+panel shows every known player and whether they are currently connected.
+The browser stores a session id in `localStorage` and sends it as the WebSocket
+`id` query parameter. That id is the private session id used by the room server,
+so refreshing or reconnecting brings the same player back online. Use "New
+session" to create another player from the same browser. Multiple tabs with the
+same stored session id stay attached to the same player; server handlers receive
+a unique `conn.id` per WebSocket and the shared private session id as
+`conn.sessionId`.
+## Game room
+The game demonstrates a server-authoritative flow:
+- `move` updates a player's bounded position in the arena.
+- `collect` checks the player's distance from the star on the server before
+  awarding a point.
+- `reset` clears scores and respawns the star.
+Client messages use the same shape as the counter example:
+```json
+{ "action": "move", "value": { "x": 120, "y": 180 } }
+```
+```json
+{ "action": "collect", "value": {} }
+```
+## SQLite storage
+The default example uses `createMemoryNodeRoomStorage()`. To run the same room
+with the package's SQLite-backed `room.storage`, use:
+```bash
+pnpm --filter @signe/room-node-game-example dev:sqlite
+```
+The SQLite example uses `createSqliteNodeRoomStorage()` from `@signe/room/node`
+and Node's built-in `node:sqlite` module. It stores room state in
+`packages/room/examples/node-game/rooms.sqlite`.
+The game room also throttles storage writes, so movement can stay responsive
+without persisting every single position update immediately.

package/examples/node-game/package.json ADDED Viewed

@@ -0,0 +1,23 @@
+{
+  "name": "@signe/room-node-game-example",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "tsx server.ts",
+    "dev:sqlite": "node --experimental-sqlite --import tsx server.sqlite.ts",
+    "build": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@signe/reactive": "workspace:*",
+    "@signe/room": "workspace:*",
+    "@signe/sync": "workspace:*",
+    "ws": "^8.17.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.9",
+    "@types/ws": "^8.5.12",
+    "tsx": "^4.19.2",
+    "typescript": "^5.4.5"
+  }
+}