feat(client): broadcast proxy (#622)

.changeset/brown-pandas-agree.md

@@ -0,0 +1,24 @@
+---
+"@pluv/client": patch
+---
+
+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~!" });
+```

packages/client/src/PluvRoom.ts

@@ -226,14 +226,25 @@ export class PluvRoom<
         return this._state.webSocket;
     }
 
-    public broadcast<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>): void {
-        if (!this._state.webSocket) return;
-        if (this._state.connection.state !== ConnectionState.Open) return;
+    public broadcast = new Proxy(
+        <TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>): void => {
+            if (!this._state.webSocket) return;
+            if (this._state.connection.state !== ConnectionState.Open) return;
 
-        const type = event.toString();
+            const type = event.toString();
 
-        this._sendMessage({ data, type });
-    }
+            this._sendMessage({ data, type });
+        },
+        {
+            get(fn, prop) {
+                return (data: Id<InferIOInput<TIO>[any]>): void => {
+                    return fn(prop, data);
+                };
+            },
+        },
+    ) as (<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void) & {
+        [event in keyof InferIOInput<TIO>]: (data: Id<InferIOInput<TIO>[event]>) => void;
+    };
 
     public canRedo = (): boolean => {
         return !!this._crdtManager.doc.canRedo();