@pluv/client 0.17.3 → 0.18.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/client@0.17.3 build /home/runner/work/pluv/pluv/packages/client
+> @pluv/client@0.18.0 build /home/runner/work/pluv/pluv/packages/client
 > tsup src/index.ts --format esm,cjs --dts
 
 CLI Building entry: src/index.ts
@@ -8,11 +8,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.js 42.79 KB
-CJS ⚡️ Build success in 125ms
-ESM dist/index.mjs 41.52 KB
-ESM ⚡️ Build success in 127ms
+ESM dist/index.mjs 41.27 KB
+ESM ⚡️ Build success in 104ms
+CJS dist/index.js 42.53 KB
+CJS ⚡️ Build success in 104ms
 DTS Build start
-DTS ⚡️ Build success in 3588ms
-DTS dist/index.d.mts 13.95 KB
-DTS dist/index.d.ts  13.95 KB
+DTS ⚡️ Build success in 3547ms
+DTS dist/index.d.mts 14.14 KB
+DTS dist/index.d.ts  14.14 KB

package/CHANGELOG.md

@@ -1,5 +1,157 @@
 # @pluv/client
 
+## 0.18.0
+
+### Minor Changes
+
+- 99b5ca9: ## Breaking Changes
+
+  - `@pluv/io` has been updated to introduce `PluvProcedure`, `PluvRouter` and `PluvServer`. This change is intended to improve the ergonomics of declaring events and simplifying inferences of event types.
+
+  ### Before:
+
+  ```ts
+  // backend/io.ts
+
+  import { createIO } from "@pluv/io";
+  import { createPluvHandler, platformNode } from "@pluv/platform-node";
+  import { z } from "zod";
+
+  export const io = createIO({
+    platform: platformNode(),
+  })
+    .event("SEND_MESSAGE", {
+      input: z.object({ message: z.string() }),
+      resolver: ({ message }) => ({ RECEIVE_MESSAGE: { message } }),
+    })
+    .event("DOUBLE_VALUE", {
+      input: z.object({ value: z.number() }),
+      resolver: ({ value }) => ({ VALUE_DOUBLED: { value: value * 2 } }),
+    });
+
+  const Pluv = createPluvHandler({
+    io,
+    /* ... */
+  });
+  ```
+
+  ```ts
+  // frontend/pluv.ts
+
+  import { createClient } from "@pluv/react";
+  import type { io } from "../backend/io";
+
+  const client = createClient<typeof io>({
+    /* ... */
+  });
+  ```
+
+  ### Now:
+
+  ```ts
+  import { createIO } from "@pluv/io";
+  import { createPluvHandler, platformNode } from "@pluv/platform-node";
+  import { z } from "zod";
+
+  const io = createIO({
+    platform: platformNode(),
+  });
+
+  const router = io.router({
+    SEND_MESSAGE: io.procedure
+      .input(z.object({ message: z.string() }))
+      .broadcast(({ message }) => ({
+        RECEIVE_MESSAGE: { message },
+      })),
+    DOUBLE_VALUE: io.procedure
+      .input(z.object({ value: z.number() }))
+      .broadcast(({ value }) => ({
+        VALUE_DOUBLED: { value: value * 2 },
+      })),
+  });
+
+  export const ioServer = io.server({ router });
+
+  const Pluv = createPluvHandler({
+    io: ioServer, // <- This uses the PluvServer now
+    /* ... */
+  });
+  ```
+
+  ```ts
+  // frontend/pluv.ts
+
+  import { createClient } from "@pluv/react";
+  import type { ioServer } from "../backend/io";
+
+  // This users the PluvServer type now
+  const client = createClient<typeof ioServer>({
+    /* ... */
+  });
+  ```
+
+  - `PluvRouter` instances can also be merged via the `mergeRouters` method, which effectively performs an `Object.assign` of the events object and returns a new `PluvRouter` with the correct types:
+
+  ```ts
+  const router = io.mergeRouters(router1, router2);
+  ```
+
+### Patch Changes
+
+- 06c67be: Added broadcast proxy as a new way to broadcast events.
+
+  ```ts
+  // backend
+
+  const router = io.router({
+    SEND_MESSAGE: io.procedure
+      .input(z.object({ message: z.string() }))
+      .broadcast(({ message }) => ({ RECEIVE_MESSAGE: { message } })),
+  });
+
+  // frontend
+  const client = createClient(/* ... */);
+
+  // Both of the examples below are equivalent.
+
+  client.broadcast("SEND_MESSAGE", { message: "Hello world~!" });
+
+  client.broadcast.SEND_MESSAGE({ message: "Hello world~!" });
+  ```
+
+- df1342c: Added event proxy as a new way to listen to events.
+
+  ```ts
+  // backend
+
+  const router = io.router({
+    SEND_MESSAGE: io.procedure
+      .input(z.object({ message: z.string() }))
+      .broadcast(({ message }) => ({ RECEIVE_MESSAGE: { message } })),
+  });
+
+  // frontend
+  const client = createClient(/* ... */);
+
+  // Both of the examples below are equivalent.
+
+  client.event("RECEIVE_MESSAGE", ({ data }) => {
+    const { message } = data;
+
+    console.log(message);
+  });
+
+  client.event.RECEIVE_MESSAGE(({ data }) => {
+    const { message } = data;
+
+    console.log(message);
+  });
+  ```
+
+- Updated dependencies [99b5ca9]
+  - @pluv/types@0.18.0
+  - @pluv/crdt@0.18.0
+
 ## 0.17.3
 
 ### Patch Changes

package/README.md

@@ -93,14 +93,11 @@ const room = client.createRoom<Presence, Storage>("my-room", {
 const main = async () => {
     await client.enter(room);
 
-    const unsubscribe = client.event("RECEIVE_MESSAGE", ({ data }) => {
+    const unsubscribe = client.event.RECEIVE_MESSAGE(({ data }) => {
         console.log(data.message);
     });
 
-    client.broadcast({
-        type: "SEND_MESSAGE",
-        data: { message: "Hello world!" },
-    });
+    client.broadcast.SEND_MESSAGE({ message: "Hello world!" });
 
     unsubscribe();
 

package/dist/index.d.mts

@@ -191,12 +191,12 @@ declare class PluvRoom<TIO extends IOLike, TPresence extends JsonObject = {}, TS
     constructor(room: string, options: RoomConfig<TIO, TPresence, TStorage>);
     get storageLoaded(): boolean;
     get webSocket(): WebSocket | null;
-    broadcast<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>): void;
+    broadcast: (<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void) & { [event in keyof InferIOInput<TIO>]: (data: Id<InferIOInput<TIO>[event]>) => void; };
     canRedo: () => boolean;
     canUndo: () => boolean;
     connect(): Promise<void>;
     disconnect(): Promise<void>;
-    event: <TEvent extends keyof InferIOOutput<TIO>>(event: TEvent, callback: EventNotifierSubscriptionCallback<TIO, TEvent>) => (() => void);
+    event: (<TEvent extends keyof InferIOOutput<TIO>>(event: TEvent, callback: EventNotifierSubscriptionCallback<TIO, TEvent>) => () => void) & { [event in keyof InferIOOutput<TIO>]: (callback: EventNotifierSubscriptionCallback<TIO, event>) => () => void; };
     getConnection(): WebSocketConnection;
     getDoc(): AbstractCrdtDoc<TStorage>;
     getMyPresence: () => TPresence;
@@ -280,6 +280,6 @@ declare class PluvClient<TIO extends IOLike = IOLike> {
     private _logDebug;
 }
 
-declare const createClient: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any, any>, {}, {}, {}, {}> = IOLike<_pluv_types.IOAuthorize<any, any, any>, {}, {}, {}, {}>>(options: PluvClientOptions<TIO>) => PluvClient<TIO>;
+declare const createClient: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any, any>, {}> = IOLike<_pluv_types.IOAuthorize<any, any, any>, {}>>(options: PluvClientOptions<TIO>) => PluvClient<TIO>;
 
 export { AbstractRoom, AbstractStorageStore, ConnectionState, MockedRoom, type MockedRoomConfig, type MockedRoomEvents, PluvClient, type PluvClientOptions, PluvRoom, type PluvRoomAddon, type PluvRoomAddonInput, type PluvRoomAddonResult, type PluvRoomDebug, type UserInfo, type WebSocketConnection, type WebSocketState, createClient };

package/dist/index.d.ts

@@ -191,12 +191,12 @@ declare class PluvRoom<TIO extends IOLike, TPresence extends JsonObject = {}, TS
     constructor(room: string, options: RoomConfig<TIO, TPresence, TStorage>);
     get storageLoaded(): boolean;
     get webSocket(): WebSocket | null;
-    broadcast<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>): void;
+    broadcast: (<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void) & { [event in keyof InferIOInput<TIO>]: (data: Id<InferIOInput<TIO>[event]>) => void; };
     canRedo: () => boolean;
     canUndo: () => boolean;
     connect(): Promise<void>;
     disconnect(): Promise<void>;
-    event: <TEvent extends keyof InferIOOutput<TIO>>(event: TEvent, callback: EventNotifierSubscriptionCallback<TIO, TEvent>) => (() => void);
+    event: (<TEvent extends keyof InferIOOutput<TIO>>(event: TEvent, callback: EventNotifierSubscriptionCallback<TIO, TEvent>) => () => void) & { [event in keyof InferIOOutput<TIO>]: (callback: EventNotifierSubscriptionCallback<TIO, event>) => () => void; };
     getConnection(): WebSocketConnection;
     getDoc(): AbstractCrdtDoc<TStorage>;
     getMyPresence: () => TPresence;
@@ -280,6 +280,6 @@ declare class PluvClient<TIO extends IOLike = IOLike> {
     private _logDebug;
 }
 
-declare const createClient: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any, any>, {}, {}, {}, {}> = IOLike<_pluv_types.IOAuthorize<any, any, any>, {}, {}, {}, {}>>(options: PluvClientOptions<TIO>) => PluvClient<TIO>;
+declare const createClient: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any, any>, {}> = IOLike<_pluv_types.IOAuthorize<any, any, any>, {}>>(options: PluvClientOptions<TIO>) => PluvClient<TIO>;
 
 export { AbstractRoom, AbstractStorageStore, ConnectionState, MockedRoom, type MockedRoomConfig, type MockedRoomEvents, PluvClient, type PluvClientOptions, PluvRoom, type PluvRoomAddon, type PluvRoomAddonInput, type PluvRoomAddonResult, type PluvRoomDebug, type UserInfo, type WebSocketConnection, type WebSocketState, createClient };

package/dist/index.js

@@ -86,10 +86,7 @@ var import_crdt = require("@pluv/crdt");
 var CrdtManager = class {
   constructor(options) {
     this.initialized = false;
-    const {
-      encodedState,
-      initialStorage = import_crdt.noop.doc({})
-    } = options;
+    const { encodedState, initialStorage = import_crdt.noop.doc({}) } = options;
     this._docFactory = initialStorage;
     this.doc = encodedState ? initialStorage.getFresh().applyEncodedState({ update: encodedState }) : initialStorage.getFresh();
   }
@@ -121,18 +118,10 @@ var CrdtManager = class {
       this.doc = this._applyDocUpdates(this.doc, updates, origin).track();
       return this;
     }
-    const onEmpty = this._applyDocUpdates(
-      this._docFactory.getEmpty(),
-      updates,
-      origin
-    );
+    const onEmpty = this._applyDocUpdates(this._docFactory.getEmpty(), updates, origin);
     if (!onEmpty.isEmpty()) {
       onEmpty.destroy();
-      this.doc = this._applyDocUpdates(
-        this._docFactory.getFresh(),
-        updates,
-        origin
-      ).track();
+      this.doc = this._applyDocUpdates(this._docFactory.getFresh(), updates, origin).track();
       this.initialized = true;
       onInitialized == null ? void 0 : onInitialized(this.doc.getEncodedState());
       return this;
@@ -145,9 +134,7 @@ var CrdtManager = class {
   }
   _applyDocUpdates(doc, updates, origin) {
     doc.transact(() => {
-      doc.batchApplyEncodedState(
-        updates.map((update) => ({ origin, update }))
-      );
+      doc.batchApplyEncodedState(updates.map((update) => ({ origin, update })));
     }, origin);
     return doc;
   }
@@ -462,9 +449,7 @@ var MockedRoom = class extends AbstractRoom {
     });
   }
   getConnection() {
-    return Object.freeze(
-      JSON.parse(JSON.stringify(this._state.connection))
-    );
+    return Object.freeze(JSON.parse(JSON.stringify(this._state.connection)));
   }
   getDoc() {
     return this._crdtManager.doc;
@@ -595,15 +580,37 @@ var PluvRoom = class extends AbstractRoom {
     };
     this._windowListeners = null;
     this._wsListeners = null;
+    this.broadcast = new Proxy(
+      (event, data) => {
+        if (!this._state.webSocket)
+          return;
+        if (this._state.connection.state !== "Open" /* Open */)
+          return;
+        const type = event.toString();
+        this._sendMessage({ data, type });
+      },
+      {
+        get(fn, prop) {
+          return (data) => {
+            return fn(prop, data);
+          };
+        }
+      }
+    );
     this.canRedo = () => {
       return !!this._crdtManager.doc.canRedo();
     };
     this.canUndo = () => {
       return !!this._crdtManager.doc.canUndo();
     };
-    this.event = (event, callback) => {
-      return this._eventNotifier.subscribe(event, callback);
-    };
+    this.event = new Proxy(
+      (event, callback) => this._eventNotifier.subscribe(event, callback),
+      {
+        get(fn, prop) {
+          return (callback) => fn(prop, callback);
+        }
+      }
+    );
     this.getMyPresence = () => {
       return this._usersManager.myPresence;
     };
@@ -656,10 +663,7 @@ var PluvRoom = class extends AbstractRoom {
       const myself = (_a = this._usersManager.myself) != null ? _a : null;
       this._stateNotifier.subjects["my-presence"].next(myPresence);
       !!myself && this._stateNotifier.subjects["myself"].next(myself);
-      this.broadcast(
-        "$UPDATE_PRESENCE",
-        { presence }
-      );
+      this.broadcast("$UPDATE_PRESENCE", { presence });
     };
     this._flattenStorageStore = debounce(
       () => __async(this, null, function* () {
@@ -687,10 +691,7 @@ var PluvRoom = class extends AbstractRoom {
     this._listeners = {
       onAuthorizationFail: (error) => {
         this._clearTimeout(this._timeouts.reconnect);
-        this._timeouts.reconnect = setTimeout(
-          this._reconnect.bind(this),
-          RECONNECT_TIMEOUT_MS
-        );
+        this._timeouts.reconnect = setTimeout(this._reconnect.bind(this), RECONNECT_TIMEOUT_MS);
         onAuthorizationFail == null ? void 0 : onAuthorizationFail(error);
       }
     };
@@ -708,23 +709,14 @@ var PluvRoom = class extends AbstractRoom {
   get webSocket() {
     return this._state.webSocket;
   }
-  broadcast(event, data) {
-    if (!this._state.webSocket)
-      return;
-    if (this._state.connection.state !== "Open" /* Open */)
-      return;
-    const type = event.toString();
-    this._sendMessage({ data, type });
-  }
   connect() {
     return __async(this, null, function* () {
       if (!this._endpoints.wsEndpoint) {
         throw new Error("Must provide an wsEndpoint.");
       }
-      const canConnect = [
-        "Closed" /* Closed */,
-        "Untouched" /* Untouched */
-      ].some((state) => this._state.connection.state === state);
+      const canConnect = ["Closed" /* Closed */, "Untouched" /* Untouched */].some(
+        (state) => this._state.connection.state === state
+      );
       if (!canConnect)
         return;
       this._clearTimeout(this._timeouts.reconnect);
@@ -762,10 +754,9 @@ var PluvRoom = class extends AbstractRoom {
       }
       if (!this._state.webSocket)
         return;
-      const canDisconnect = [
-        "Connecting" /* Connecting */,
-        "Open" /* Open */
-      ].some((state) => this._state.connection.state === state);
+      const canDisconnect = ["Connecting" /* Connecting */, "Open" /* Open */].some(
+        (state) => this._state.connection.state === state
+      );
       if (!canDisconnect)
         return;
       this._clearInterval(this._intervals.heartbeat);
@@ -776,9 +767,7 @@ var PluvRoom = class extends AbstractRoom {
     });
   }
   getConnection() {
-    return Object.freeze(
-      JSON.parse(JSON.stringify(this._state.connection))
-    );
+    return Object.freeze(JSON.parse(JSON.stringify(this._state.connection)));
   }
   getDoc() {
     return this._crdtManager.doc;
@@ -812,14 +801,8 @@ var PluvRoom = class extends AbstractRoom {
       onNavigatorOnline: this._onNavigatorOnline.bind(this),
       onVisibilityChange: this._onVisibilityChange.bind(this)
     };
-    window.addEventListener(
-      "online",
-      this._windowListeners.onNavigatorOnline
-    );
-    document.addEventListener(
-      "visibilitychange",
-      this._windowListeners.onVisibilityChange
-    );
+    window.addEventListener("online", this._windowListeners.onNavigatorOnline);
+    document.addEventListener("visibilitychange", this._windowListeners.onVisibilityChange);
   }
   _attachWsListeners() {
     if (!this._state.webSocket)
@@ -830,22 +813,10 @@ var PluvRoom = class extends AbstractRoom {
       onMessage: this._onMessage.bind(this),
       onOpen: this._onOpen.bind(this)
     };
-    this._state.webSocket.addEventListener(
-      "close",
-      this._wsListeners.onClose
-    );
-    this._state.webSocket.addEventListener(
-      "error",
-      this._wsListeners.onError
-    );
-    this._state.webSocket.addEventListener(
-      "message",
-      this._wsListeners.onMessage
-    );
-    this._state.webSocket.addEventListener(
-      "open",
-      this._wsListeners.onOpen
-    );
+    this._state.webSocket.addEventListener("close", this._wsListeners.onClose);
+    this._state.webSocket.addEventListener("error", this._wsListeners.onError);
+    this._state.webSocket.addEventListener("message", this._wsListeners.onMessage);
+    this._state.webSocket.addEventListener("open", this._wsListeners.onOpen);
   }
   _clearInterval(interval) {
     if (Number.isNaN(interval))
@@ -883,35 +854,17 @@ var PluvRoom = class extends AbstractRoom {
       return;
     if (typeof document === "undefined")
       return;
-    window.removeEventListener(
-      "online",
-      this._windowListeners.onNavigatorOnline
-    );
-    document.removeEventListener(
-      "visibilitychange",
-      this._windowListeners.onVisibilityChange
-    );
+    window.removeEventListener("online", this._windowListeners.onNavigatorOnline);
+    document.removeEventListener("visibilitychange", this._windowListeners.onVisibilityChange);
     this._windowListeners = null;
   }
   _detachWsListeners() {
     if (!this._state.webSocket || !this._wsListeners)
       return;
-    this._state.webSocket.removeEventListener(
-      "close",
-      this._wsListeners.onClose
-    );
-    this._state.webSocket.removeEventListener(
-      "error",
-      this._wsListeners.onError
-    );
-    this._state.webSocket.removeEventListener(
-      "message",
-      this._wsListeners.onMessage
-    );
-    this._state.webSocket.removeEventListener(
-      "open",
-      this._wsListeners.onOpen
-    );
+    this._state.webSocket.removeEventListener("close", this._wsListeners.onClose);
+    this._state.webSocket.removeEventListener("error", this._wsListeners.onError);
+    this._state.webSocket.removeEventListener("message", this._wsListeners.onMessage);
+    this._state.webSocket.removeEventListener("open", this._wsListeners.onOpen);
     this._wsListeners = null;
   }
   _emitSharedTypes() {
@@ -957,9 +910,7 @@ var PluvRoom = class extends AbstractRoom {
       try {
         return yield res.text().then((text) => text.trim());
       } catch (err) {
-        throw new Error(
-          err instanceof Error ? err.message : "Room is unauthorized"
-        );
+        throw new Error(err instanceof Error ? err.message : "Room is unauthorized");
       }
     });
   }
@@ -993,10 +944,7 @@ var PluvRoom = class extends AbstractRoom {
     if (!this._state.webSocket)
       throw new Error("Could not find WebSocket");
     const data = message.data;
-    this._usersManager.patchPresence(
-      connectionId,
-      data.presence
-    );
+    this._usersManager.patchPresence(connectionId, data.presence);
     const myPresence = this._usersManager.myPresence;
     const myself = (_a = this._usersManager.myself) != null ? _a : null;
     if ((myself == null ? void 0 : myself.connectionId) === connectionId) {
@@ -1021,10 +969,7 @@ var PluvRoom = class extends AbstractRoom {
         return;
       this._usersManager.setUser(connectionId, user);
       const other = this._usersManager.getOther(connectionId);
-      !!presence && this._usersManager.patchPresence(
-        connectionId,
-        presence
-      );
+      !!presence && this._usersManager.patchPresence(connectionId, presence);
       this._otherNotifier.subject(connectionId).next(other);
     });
     const others = this._usersManager.getOthers();
@@ -1043,10 +988,7 @@ var PluvRoom = class extends AbstractRoom {
       oldState.authorization.user = user;
       return oldState;
     });
-    this._usersManager.setMyself(
-      connectionId,
-      user
-    );
+    this._usersManager.setMyself(connectionId, user);
     const presence = this._usersManager.myPresence;
     const myself = (_a = this._usersManager.myself) != null ? _a : null;
     this._stateNotifier.subjects["my-presence"].next(presence);
@@ -1124,11 +1066,7 @@ var PluvRoom = class extends AbstractRoom {
     if (myself.connectionId === connectionId) {
       this._sendMessage({ type: "$GET_OTHERS", data: {} });
     }
-    this._usersManager.setUser(
-      connectionId,
-      data.user,
-      data.presence
-    );
+    this._usersManager.setUser(connectionId, data.user, data.presence);
     const other = this._usersManager.getOther(connectionId);
     const others = this._usersManager.getOthers();
     this._otherNotifier.subject(connectionId).next(other);
@@ -1136,10 +1074,7 @@ var PluvRoom = class extends AbstractRoom {
   }
   _heartbeat() {
     this._clearTimeout(this._timeouts.pong);
-    this._timeouts.pong = setTimeout(
-      this._reconnect.bind(this),
-      PONG_TIMEOUT_MS
-    );
+    this._timeouts.pong = setTimeout(this._reconnect.bind(this), PONG_TIMEOUT_MS);
     this._sendMessage({ type: "$PING", data: {} });
   }
   _logDebug(...data) {
@@ -1269,10 +1204,7 @@ var PluvRoom = class extends AbstractRoom {
       return oldState;
     });
     this._clearInterval(this._intervals.heartbeat);
-    this._intervals.heartbeat = setInterval(
-      this._heartbeat.bind(this),
-      HEARTBEAT_INTERVAL_MS
-    );
+    this._intervals.heartbeat = setInterval(this._heartbeat.bind(this), HEARTBEAT_INTERVAL_MS);
   }
   _onNavigatorOnline() {
     return __async(this, null, function* () {
@@ -1346,9 +1278,7 @@ var PluvRoom = class extends AbstractRoom {
   _updateState(updater) {
     let authorization;
     try {
-      authorization = JSON.parse(
-        JSON.stringify(this._state.authorization)
-      );
+      authorization = JSON.parse(JSON.stringify(this._state.authorization));
     } catch (e) {
       throw new Error("User is not JSON serializable");
     }