feat(react): event proxy (#621)

.changeset/purple-gorillas-raise.md

@@ -0,0 +1,32 @@
+---
+"@pluv/react": patch
+---
+
+Added event proxy as a new way to listen to events.
+
+```tsx
+// backend
+
+const router = io.router({
+    SEND_MESSAGE: io.procedure
+        .input(z.object({ message: z.string() }))
+        .broadcast(({ message }) => ({ RECEIVE_MESSAGE: { message } })),
+});
+
+// frontend
+const pluv = createRoomBundle(/* ... */);
+
+// Both of the examples below are equivalent.
+
+pluv.useEvent("RECEIVE_MESSAGE", ({ data }) => {
+    const { message } = data;
+
+    console.log(message);
+});
+
+pluv.event.RECEIVE_MESSAGE.useEvent(({ data }) => {
+    const { message } = data;
+
+    console.log(message);
+});
+```

.changeset/smooth-kings-swim.md

@@ -2,7 +2,7 @@
 "@pluv/client": patch
 ---
 
-Added event proxy as a new way to invoke event procedures.
+Added event proxy as a new way to listen to events.
 
 ```ts
 // backend

packages/react/src/createRoomBundle.tsx

@@ -61,6 +61,12 @@ export type UpdateMyPresenceAction<TPresence extends JsonObject> =
     | Partial<TPresence>
     | ((oldPresence: TPresence | null) => Partial<TPresence>);
 
+export type EventProxy<TIO extends IOLike> = {
+    [event in keyof InferIOOutput<TIO>]: {
+        useEvent: (callback: (data: Id<IOEventMessage<TIO, event>>) => void) => void;
+    };
+};
+
 export interface CreateRoomBundle<
     TIO extends IOLike,
     TPresence extends JsonObject,
@@ -70,6 +76,9 @@ export interface CreateRoomBundle<
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
 
+    // proxies
+    event: EventProxy<TIO>;
+
     // hooks
     useBroadcast: () => <TEvent extends keyof InferIOInput<TIO>>(
         event: TEvent,
@@ -290,6 +299,21 @@ export const createRoomBundle = <
         }, [callback, room, type]);
     };
 
+    const event = new Proxy(
+        {},
+        {
+            get(fn, prop) {
+                const useProxyEvent = (
+                    callback: (data: Id<IOEventMessage<TIO, keyof InferIOOutput<TIO>>>) => void,
+                ): void => {
+                    return useEvent(prop as keyof InferIOOutput<TIO>, callback);
+                };
+
+                return { useEvent: useProxyEvent };
+            },
+        },
+    ) as EventProxy<TIO>;
+
     const useMyPresence = <T extends unknown = TPresence>(
         selector = identity as (myPresence: TPresence) => T,
         options?: SubscriptionHookOptions<Id<T> | null>,
@@ -475,6 +499,9 @@ export const createRoomBundle = <
         MockedRoomProvider,
         PluvRoomProvider,
 
+        // proxies
+        event,
+
         // hooks
         useBroadcast,
         useCanRedo,

tests/e2e/src/demo/ChatRoom.tsx

@@ -1,11 +1,11 @@
 import { FC, useCallback, useState } from "react";
-import { useBroadcast, useEvent } from "./pluv";
+import { pluv } from "./pluv";
 
 export const ChatRoom: FC<Record<string, never>> = () => {
     const [messages, setMessages] = useState<readonly string[]>([]);
-    const broadcast = useBroadcast();
+    const broadcast = pluv.useBroadcast();
 
-    useEvent("RECEIVE_MESSAGE", ({ data }) => {
+    pluv.event.RECEIVE_MESSAGE.useEvent(({ data }) => {
         setMessages((oldMessages) => [...oldMessages, data.message]);
     });
 

tests/e2e/src/demo/pluv.ts

@@ -9,6 +9,6 @@ const client = createClient<typeof ioServer>({
 
 export const { createRoomBundle } = createBundle(client);
 
-export const { useBroadcast, useEvent, useMyself } = createRoomBundle({
+export const pluv = createRoomBundle({
     initialStorage: yjs.doc(),
 });