@pluv/react 0.17.3 → 0.18.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/react@0.17.3 build /home/runner/work/pluv/pluv/packages/react
+> @pluv/react@0.18.0 build /home/runner/work/pluv/pluv/packages/react
 > tsup src/index.ts --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.ts
@@ -8,11 +8,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist/index.mjs 9.96 KB
-ESM ⚡️ Build success in 80ms
-CJS dist/index.js 12.53 KB
-CJS ⚡️ Build success in 81ms
+CJS dist/index.js 12.77 KB
+CJS ⚡️ Build success in 100ms
+ESM dist/index.mjs 10.18 KB
+ESM ⚡️ Build success in 100ms
 DTS Build start
-DTS ⚡️ Build success in 4595ms
-DTS dist/index.d.mts 5.05 KB
-DTS dist/index.d.ts  5.05 KB
+DTS ⚡️ Build success in 3856ms
+DTS dist/index.d.mts 5.38 KB
+DTS dist/index.d.ts  5.38 KB

package/CHANGELOG.md

@@ -1,5 +1,162 @@
 # @pluv/react
 
+## 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);
+  ```
+
+- 07a7725: Added broadcast proxy as a new way to broadcast events to other users.
+
+  ```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(/* ... */);
+
+  const broadcast = pluv.useBroadcast();
+
+  // Both of the examples below are equivalent.
+
+  broadcast("SEND_MESSAGE", { message: "Hello world~!" });
+
+  broadcast.SEND_MESSAGE({ message: "Hello world~!" });
+  ```
+
+### Patch Changes
+
+- e587c18: 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);
+  });
+  ```
+
+- Updated dependencies [06c67be]
+- Updated dependencies [99b5ca9]
+- Updated dependencies [df1342c]
+  - @pluv/client@0.18.0
+  - @pluv/types@0.18.0
+  - @pluv/crdt@0.18.0
+
 ## 0.17.3
 
 ### Patch Changes

package/README.md

@@ -76,18 +76,28 @@ export const {
 
 export const {
     // components
+    MockedRoomProvider,
     PluvRoomProvider,
 
+    // utils
+    event,
+
     // hooks
     useBroadcast,
+    useCanRedo,
+    useCanUndo,
     useConnection,
+    useDoc,
     useEvent,
     useMyPresence,
     useMyself,
     useOther,
     useOthers,
+    useRedo,
     useRoom,
     useStorage,
+    useTransact,
+    useUndo,
 } = createRoomBundle({
     initialStorage: yjs.doc(() => ({
         messages: yjs.array([
@@ -120,7 +130,7 @@ export const MyPage: FC<Record<string, never>> = () => {
 export const MyRoom: FC<Record<string, never>> = () => {
     const broadcast = useBroadcast();
 
-    useEvent("RECEIVE_MESSAGE", ({ data }) => {
+    event.RECEIVE_MESSAGE.useEvent(({ data }) => {
         // data is typed as { message: string }
         console.log(data.message);
     });
@@ -128,7 +138,7 @@ export const MyRoom: FC<Record<string, never>> = () => {
     return (
         <button
             onClick={() => {
-                broadcast("SEND_MESSAGE", {
+                broadcast.SEND_MESSAGE({
                     // TypeScript will require that message is typed as string
                     message: "Hello world!",
                 });

package/dist/index.d.mts

@@ -3,7 +3,7 @@ export { ConnectionState, createClient } from '@pluv/client';
 import { AbstractCrdtType, AbstractCrdtDocFactory, AbstractCrdtDoc, InferCrdtStorageJson } from '@pluv/crdt';
 export { AbstractCrdtType, InferCrdtStorageJson } from '@pluv/crdt';
 import * as _pluv_types from '@pluv/types';
-import { IOLike, JsonObject, InputZodLike, InferIOInput, Id, InferIOOutput, IOEventMessage } from '@pluv/types';
+import { IOLike, JsonObject, InputZodLike, Id, InferIOOutput, IOEventMessage, InferIOInput } from '@pluv/types';
 export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types';
 import { FC, Dispatch, ReactNode } from 'react';
 
@@ -32,19 +32,25 @@ interface SubscriptionHookOptions<T extends unknown> {
     isEqual?: (a: T, b: T) => boolean;
 }
 type UpdateMyPresenceAction<TPresence extends JsonObject> = Partial<TPresence> | ((oldPresence: TPresence | null) => Partial<TPresence>);
+type BroadcastProxy<TIO extends IOLike> = (<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void) & {
+    [event in keyof InferIOInput<TIO>]: (callback: Id<InferIOInput<TIO>[event]>) => void;
+};
+type EventProxy<TIO extends IOLike> = {
+    [event in keyof InferIOOutput<TIO>]: {
+        useEvent: (callback: (data: Id<IOEventMessage<TIO, event>>) => void) => void;
+    };
+};
 interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> {
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
-    useBroadcast: () => <TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void;
+    event: EventProxy<TIO>;
+    useBroadcast: () => BroadcastProxy<TIO>;
     useCanRedo: () => boolean;
     useCanUndo: () => boolean;
     useConnection: <T extends unknown = WebSocketConnection>(selector: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
     useDoc: () => AbstractCrdtDoc<TStorage>;
     useEvent: <TType extends keyof InferIOOutput<TIO>>(type: TType, callback: (data: Id<IOEventMessage<TIO, TType>>) => void) => void;
-    useMyPresence: <T extends unknown = TPresence>(selector?: (myPresence: TPresence) => T, options?: SubscriptionHookOptions<Id<T> | null>) => [
-        myPresence: Id<T>,
-        updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>
-    ];
+    useMyPresence: <T extends unknown = TPresence>(selector?: (myPresence: TPresence) => T, options?: SubscriptionHookOptions<Id<T> | null>) => [myPresence: Id<T>, updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>];
     useMyself: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (myself: Id<UserInfo<TIO, TPresence>>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
     useOther: <T extends unknown = UserInfo<TIO, TPresence>>(connectionId: string, selector?: (other: UserInfo<TIO, TPresence>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
     useOthers: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[], options?: SubscriptionHookOptions<readonly Id<T>[]>) => readonly Id<T>[];
@@ -64,6 +70,6 @@ interface CreateBundle<TIO extends IOLike> {
     PluvProvider: FC<PluvProviderProps>;
     useClient: () => PluvClient<TIO>;
 }
-declare const createBundle: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any, any>, {}, {}, {}, {}>>(client: PluvClient<TIO>) => CreateBundle<TIO>;
+declare const createBundle: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any, any>, {}>>(client: PluvClient<TIO>) => CreateBundle<TIO>;
 
 export { type CreateBundle, type CreateRoomBundle, type CreateRoomBundleOptions, type InferRoomStorage, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { ConnectionState, createClient } from '@pluv/client';
 import { AbstractCrdtType, AbstractCrdtDocFactory, AbstractCrdtDoc, InferCrdtStorageJson } from '@pluv/crdt';
 export { AbstractCrdtType, InferCrdtStorageJson } from '@pluv/crdt';
 import * as _pluv_types from '@pluv/types';
-import { IOLike, JsonObject, InputZodLike, InferIOInput, Id, InferIOOutput, IOEventMessage } from '@pluv/types';
+import { IOLike, JsonObject, InputZodLike, Id, InferIOOutput, IOEventMessage, InferIOInput } from '@pluv/types';
 export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types';
 import { FC, Dispatch, ReactNode } from 'react';
 
@@ -32,19 +32,25 @@ interface SubscriptionHookOptions<T extends unknown> {
     isEqual?: (a: T, b: T) => boolean;
 }
 type UpdateMyPresenceAction<TPresence extends JsonObject> = Partial<TPresence> | ((oldPresence: TPresence | null) => Partial<TPresence>);
+type BroadcastProxy<TIO extends IOLike> = (<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void) & {
+    [event in keyof InferIOInput<TIO>]: (callback: Id<InferIOInput<TIO>[event]>) => void;
+};
+type EventProxy<TIO extends IOLike> = {
+    [event in keyof InferIOOutput<TIO>]: {
+        useEvent: (callback: (data: Id<IOEventMessage<TIO, event>>) => void) => void;
+    };
+};
 interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> {
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
-    useBroadcast: () => <TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void;
+    event: EventProxy<TIO>;
+    useBroadcast: () => BroadcastProxy<TIO>;
     useCanRedo: () => boolean;
     useCanUndo: () => boolean;
     useConnection: <T extends unknown = WebSocketConnection>(selector: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
     useDoc: () => AbstractCrdtDoc<TStorage>;
     useEvent: <TType extends keyof InferIOOutput<TIO>>(type: TType, callback: (data: Id<IOEventMessage<TIO, TType>>) => void) => void;
-    useMyPresence: <T extends unknown = TPresence>(selector?: (myPresence: TPresence) => T, options?: SubscriptionHookOptions<Id<T> | null>) => [
-        myPresence: Id<T>,
-        updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>
-    ];
+    useMyPresence: <T extends unknown = TPresence>(selector?: (myPresence: TPresence) => T, options?: SubscriptionHookOptions<Id<T> | null>) => [myPresence: Id<T>, updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>];
     useMyself: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (myself: Id<UserInfo<TIO, TPresence>>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
     useOther: <T extends unknown = UserInfo<TIO, TPresence>>(connectionId: string, selector?: (other: UserInfo<TIO, TPresence>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
     useOthers: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[], options?: SubscriptionHookOptions<readonly Id<T>[]>) => readonly Id<T>[];
@@ -64,6 +70,6 @@ interface CreateBundle<TIO extends IOLike> {
     PluvProvider: FC<PluvProviderProps>;
     useClient: () => PluvClient<TIO>;
 }
-declare const createBundle: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any, any>, {}, {}, {}, {}>>(client: PluvClient<TIO>) => CreateBundle<TIO>;
+declare const createBundle: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any, any>, {}>>(client: PluvClient<TIO>) => CreateBundle<TIO>;
 
 export { type CreateBundle, type CreateRoomBundle, type CreateRoomBundleOptions, type InferRoomStorage, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };

package/dist/index.js

@@ -74,13 +74,7 @@ var createRoomBundle = (client, options) => {
   const PluvRoomContext = (0, import_react2.createContext)(null);
   const MockedRoomContext = (0, import_react2.createContext)({ room: null });
   const MockedRoomProvider = (0, import_react2.memo)((props) => {
-    const {
-      children,
-      events,
-      initialPresence,
-      initialStorage,
-      room: _room
-    } = props;
+    const { children, events, initialPresence, initialStorage, room: _room } = props;
     const [room] = (0, import_react2.useState)(() => {
       return new import_client.MockedRoom(_room, {
         events,
@@ -93,14 +87,7 @@ var createRoomBundle = (client, options) => {
   });
   MockedRoomProvider.displayName = "MockedRoomProvider";
   const PluvRoomProvider = (0, import_react2.memo)((props) => {
-    const {
-      children,
-      debug,
-      initialPresence,
-      initialStorage,
-      onAuthorizationFail,
-      room: _room
-    } = props;
+    const { children, debug, initialPresence, initialStorage, onAuthorizationFail, room: _room } = props;
     const rerender = useRerender();
     const { room: mockedRoom } = (0, import_react2.useContext)(MockedRoomContext);
     const [room] = (0, import_react2.useState)(() => {
@@ -133,41 +120,34 @@ var createRoomBundle = (client, options) => {
   const useRoom = () => (0, import_react2.useContext)(PluvRoomContext);
   const useBroadcast = () => {
     const room = useRoom();
-    return (0, import_react2.useCallback)(
-      (event, data) => {
-        room.broadcast(event, data);
+    const broadcast = (0, import_react2.useCallback)(
+      (event2, data) => {
+        room.broadcast(event2, data);
       },
       [room]
     );
+    return (0, import_react2.useMemo)(() => {
+      return new Proxy(broadcast, {
+        get(fn, prop) {
+          return (data) => {
+            return fn(prop, data);
+          };
+        }
+      });
+    }, [broadcast]);
   };
   const useCanRedo = () => {
     const room = useRoom();
-    const subscribe = (0, import_react2.useCallback)(
-      (onStoreChange) => room.storageRoot(onStoreChange),
-      [room]
-    );
+    const subscribe = (0, import_react2.useCallback)((onStoreChange) => room.storageRoot(onStoreChange), [room]);
     const getSnapshot = (0, import_react2.useCallback)(() => room.canRedo(), [room]);
-    const canRedo = (0, import_with_selector.useSyncExternalStoreWithSelector)(
-      subscribe,
-      getSnapshot,
-      getSnapshot,
-      identity
-    );
+    const canRedo = (0, import_with_selector.useSyncExternalStoreWithSelector)(subscribe, getSnapshot, getSnapshot, identity);
     return canRedo;
   };
   const useCanUndo = () => {
     const room = useRoom();
-    const subscribe = (0, import_react2.useCallback)(
-      (onStoreChange) => room.storageRoot(onStoreChange),
-      [room]
-    );
+    const subscribe = (0, import_react2.useCallback)((onStoreChange) => room.storageRoot(onStoreChange), [room]);
     const getSnapshot = (0, import_react2.useCallback)(() => room.canUndo(), [room]);
-    const canRedo = (0, import_with_selector.useSyncExternalStoreWithSelector)(
-      subscribe,
-      getSnapshot,
-      getSnapshot,
-      identity
-    );
+    const canRedo = (0, import_with_selector.useSyncExternalStoreWithSelector)(subscribe, getSnapshot, getSnapshot, identity);
     return canRedo;
   };
   const useConnection = (selector = identity, options2) => {
@@ -180,10 +160,7 @@ var createRoomBundle = (client, options) => {
       [room]
     );
     const getSnapshot = room.getConnection;
-    const _selector = (0, import_react2.useCallback)(
-      (snapshot) => selector(snapshot),
-      [selector]
-    );
+    const _selector = (0, import_react2.useCallback)((snapshot) => selector(snapshot), [selector]);
     return (0, import_with_selector.useSyncExternalStoreWithSelector)(
       subscribe,
       getSnapshot,
@@ -205,6 +182,17 @@ var createRoomBundle = (client, options) => {
       };
     }, [callback, room, type]);
   };
+  const event = new Proxy(
+    {},
+    {
+      get(_, prop) {
+        const useProxyEvent = (callback) => {
+          return useEvent(prop, callback);
+        };
+        return { useEvent: useProxyEvent };
+      }
+    }
+  );
   const useMyPresence = (selector = identity, options2) => {
     var _a2;
     const room = useRoom();
@@ -215,10 +203,7 @@ var createRoomBundle = (client, options) => {
       [room]
     );
     const getSnapshot = room.getMyPresence;
-    const _selector = (0, import_react2.useCallback)(
-      (snapshot) => selector(snapshot),
-      [selector]
-    );
+    const _selector = (0, import_react2.useCallback)((snapshot) => selector(snapshot), [selector]);
     const myPresence = (0, import_with_selector.useSyncExternalStoreWithSelector)(
       subscribe,
       getSnapshot,
@@ -268,10 +253,7 @@ var createRoomBundle = (client, options) => {
       },
       [room, connectionId]
     );
-    const getSnapshot = (0, import_react2.useCallback)(
-      () => room.getOther(connectionId),
-      [room, connectionId]
-    );
+    const getSnapshot = (0, import_react2.useCallback)(() => room.getOther(connectionId), [room, connectionId]);
     const _selector = (0, import_react2.useCallback)(
       (snapshot) => {
         return !snapshot ? null : selector(snapshot);
@@ -315,10 +297,7 @@ var createRoomBundle = (client, options) => {
     room.subscribe("storage-loaded", () => {
       rerender();
     });
-    const subscribe = (0, import_react2.useCallback)(
-      (onStoreChange) => room.storage(key, onStoreChange),
-      [key, room]
-    );
+    const subscribe = (0, import_react2.useCallback)((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
     const getSnapshot = (0, import_react2.useCallback)(() => {
       var _a3;
       return (_a3 = room.getStorage(key)) == null ? void 0 : _a3.toJson();
@@ -351,6 +330,8 @@ var createRoomBundle = (client, options) => {
     // components
     MockedRoomProvider,
     PluvRoomProvider,
+    // proxies
+    event,
     // hooks
     useBroadcast,
     useCanRedo,

package/dist/index.mjs

@@ -8,14 +8,7 @@ import { createContext as createContext2, memo as memo2, useContext as useContex
 import { MockedRoom } from "@pluv/client";
 import { noop } from "@pluv/crdt";
 import fastDeepEqual from "fast-deep-equal";
-import {
-  createContext,
-  memo,
-  useCallback as useCallback2,
-  useContext,
-  useEffect,
-  useState as useState2
-} from "react";
+import { createContext, memo, useCallback as useCallback2, useContext, useEffect, useMemo, useState as useState2 } from "react";
 
 // src/internal/hooks/useRerender.ts
 import { useCallback, useState } from "react";
@@ -45,13 +38,7 @@ var createRoomBundle = (client, options) => {
   const PluvRoomContext = createContext(null);
   const MockedRoomContext = createContext({ room: null });
   const MockedRoomProvider = memo((props) => {
-    const {
-      children,
-      events,
-      initialPresence,
-      initialStorage,
-      room: _room
-    } = props;
+    const { children, events, initialPresence, initialStorage, room: _room } = props;
     const [room] = useState2(() => {
       return new MockedRoom(_room, {
         events,
@@ -64,14 +51,7 @@ var createRoomBundle = (client, options) => {
   });
   MockedRoomProvider.displayName = "MockedRoomProvider";
   const PluvRoomProvider = memo((props) => {
-    const {
-      children,
-      debug,
-      initialPresence,
-      initialStorage,
-      onAuthorizationFail,
-      room: _room
-    } = props;
+    const { children, debug, initialPresence, initialStorage, onAuthorizationFail, room: _room } = props;
     const rerender = useRerender();
     const { room: mockedRoom } = useContext(MockedRoomContext);
     const [room] = useState2(() => {
@@ -104,41 +84,34 @@ var createRoomBundle = (client, options) => {
   const useRoom = () => useContext(PluvRoomContext);
   const useBroadcast = () => {
     const room = useRoom();
-    return useCallback2(
-      (event, data) => {
-        room.broadcast(event, data);
+    const broadcast = useCallback2(
+      (event2, data) => {
+        room.broadcast(event2, data);
       },
       [room]
     );
+    return useMemo(() => {
+      return new Proxy(broadcast, {
+        get(fn, prop) {
+          return (data) => {
+            return fn(prop, data);
+          };
+        }
+      });
+    }, [broadcast]);
   };
   const useCanRedo = () => {
     const room = useRoom();
-    const subscribe = useCallback2(
-      (onStoreChange) => room.storageRoot(onStoreChange),
-      [room]
-    );
+    const subscribe = useCallback2((onStoreChange) => room.storageRoot(onStoreChange), [room]);
     const getSnapshot = useCallback2(() => room.canRedo(), [room]);
-    const canRedo = useSyncExternalStoreWithSelector(
-      subscribe,
-      getSnapshot,
-      getSnapshot,
-      identity
-    );
+    const canRedo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
     return canRedo;
   };
   const useCanUndo = () => {
     const room = useRoom();
-    const subscribe = useCallback2(
-      (onStoreChange) => room.storageRoot(onStoreChange),
-      [room]
-    );
+    const subscribe = useCallback2((onStoreChange) => room.storageRoot(onStoreChange), [room]);
     const getSnapshot = useCallback2(() => room.canUndo(), [room]);
-    const canRedo = useSyncExternalStoreWithSelector(
-      subscribe,
-      getSnapshot,
-      getSnapshot,
-      identity
-    );
+    const canRedo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
     return canRedo;
   };
   const useConnection = (selector = identity, options2) => {
@@ -151,10 +124,7 @@ var createRoomBundle = (client, options) => {
       [room]
     );
     const getSnapshot = room.getConnection;
-    const _selector = useCallback2(
-      (snapshot) => selector(snapshot),
-      [selector]
-    );
+    const _selector = useCallback2((snapshot) => selector(snapshot), [selector]);
     return useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
@@ -176,6 +146,17 @@ var createRoomBundle = (client, options) => {
       };
     }, [callback, room, type]);
   };
+  const event = new Proxy(
+    {},
+    {
+      get(_, prop) {
+        const useProxyEvent = (callback) => {
+          return useEvent(prop, callback);
+        };
+        return { useEvent: useProxyEvent };
+      }
+    }
+  );
   const useMyPresence = (selector = identity, options2) => {
     var _a2;
     const room = useRoom();
@@ -186,10 +167,7 @@ var createRoomBundle = (client, options) => {
       [room]
     );
     const getSnapshot = room.getMyPresence;
-    const _selector = useCallback2(
-      (snapshot) => selector(snapshot),
-      [selector]
-    );
+    const _selector = useCallback2((snapshot) => selector(snapshot), [selector]);
     const myPresence = useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
@@ -239,10 +217,7 @@ var createRoomBundle = (client, options) => {
       },
       [room, connectionId]
     );
-    const getSnapshot = useCallback2(
-      () => room.getOther(connectionId),
-      [room, connectionId]
-    );
+    const getSnapshot = useCallback2(() => room.getOther(connectionId), [room, connectionId]);
     const _selector = useCallback2(
       (snapshot) => {
         return !snapshot ? null : selector(snapshot);
@@ -286,10 +261,7 @@ var createRoomBundle = (client, options) => {
     room.subscribe("storage-loaded", () => {
       rerender();
     });
-    const subscribe = useCallback2(
-      (onStoreChange) => room.storage(key, onStoreChange),
-      [key, room]
-    );
+    const subscribe = useCallback2((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
     const getSnapshot = useCallback2(() => {
       var _a3;
       return (_a3 = room.getStorage(key)) == null ? void 0 : _a3.toJson();
@@ -322,6 +294,8 @@ var createRoomBundle = (client, options) => {
     // components
     MockedRoomProvider,
     PluvRoomProvider,
+    // proxies
+    event,
     // hooks
     useBroadcast,
     useCanRedo,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/react",
-  "version": "0.17.3",
+  "version": "0.18.0",
   "description": "@pluv/client React.js bindings",
   "author": "leedavidcs",
   "license": "MIT",
@@ -17,24 +17,24 @@
     "access": "public"
   },
   "dependencies": {
-    "@types/react": "^18.2.78",
+    "@types/react": "^18.3.3",
     "@types/use-sync-external-store": "^0.0.6",
     "fast-deep-equal": "^3.1.3",
-    "use-sync-external-store": "^1.2.0",
-    "@pluv/client": "^0.17.3",
-    "@pluv/crdt": "^0.17.3",
-    "@pluv/types": "^0.17.3"
+    "use-sync-external-store": "^1.2.2",
+    "@pluv/client": "^0.18.0",
+    "@pluv/crdt": "^0.18.0",
+    "@pluv/types": "^0.18.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "eslint": "^8.57.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "tsup": "^8.0.2",
     "typescript": "^5.4.5",
-    "@pluv/tsconfig": "^0.17.3",
-    "eslint-config-pluv": "^0.17.3"
+    "@pluv/tsconfig": "^0.18.0",
+    "eslint-config-pluv": "^0.18.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",

package/src/createBundle.tsx

@@ -3,10 +3,7 @@ import type { AbstractCrdtType } from "@pluv/crdt";
 import type { IOLike, JsonObject } from "@pluv/types";
 import type { FC, ReactNode } from "react";
 import { createContext, memo, useContext } from "react";
-import type {
-    CreateRoomBundle,
-    CreateRoomBundleOptions,
-} from "./createRoomBundle";
+import type { CreateRoomBundle, CreateRoomBundleOptions } from "./createRoomBundle";
 import { createRoomBundle as _createRoomBundle } from "./createRoomBundle";
 
 export interface PluvProviderProps {
@@ -29,9 +26,7 @@ export interface CreateBundle<TIO extends IOLike> {
     useClient: () => PluvClient<TIO>;
 }
 
-export const createBundle = <TIO extends IOLike>(
-    client: PluvClient<TIO>,
-): CreateBundle<TIO> => {
+export const createBundle = <TIO extends IOLike>(client: PluvClient<TIO>): CreateBundle<TIO> => {
     /**
      * !HACK
      * @description We'll let the context error out if client is not provided,
@@ -44,11 +39,7 @@ export const createBundle = <TIO extends IOLike>(
     const PluvProvider = memo<PluvProviderProps>((props) => {
         const { children } = props;
 
-        return (
-            <PluvContext.Provider value={client}>
-                {children}
-            </PluvContext.Provider>
-        );
+        return <PluvContext.Provider value={client}>{children}</PluvContext.Provider>;
     });
 
     PluvProvider.displayName = "PluvProvider";
@@ -60,8 +51,7 @@ export const createBundle = <TIO extends IOLike>(
         TStorage extends Record<string, AbstractCrdtType<any, any>> = {},
     >(
         options: CreateRoomBundleOptions<TIO, TPresence, TStorage>,
-    ): CreateRoomBundle<TIO, TPresence, TStorage> =>
-        _createRoomBundle(client, options);
+    ): CreateRoomBundle<TIO, TPresence, TStorage> => _createRoomBundle(client, options);
 
     return {
         createRoomBundle,

package/src/createRoomBundle.tsx

@@ -9,38 +9,13 @@ import type {
     WebSocketConnection,
 } from "@pluv/client";
 import { MockedRoom } from "@pluv/client";
-import type {
-    AbstractCrdtDoc,
-    AbstractCrdtDocFactory,
-    AbstractCrdtType,
-    InferCrdtStorageJson,
-} from "@pluv/crdt";
+import type { AbstractCrdtDoc, AbstractCrdtDocFactory, AbstractCrdtType, InferCrdtStorageJson } from "@pluv/crdt";
 import { noop } from "@pluv/crdt";
-import type {
-    IOEventMessage,
-    IOLike,
-    Id,
-    InferIOInput,
-    InferIOOutput,
-    InputZodLike,
-    JsonObject,
-} from "@pluv/types";
+import type { IOEventMessage, IOLike, Id, InferIOInput, InferIOOutput, InputZodLike, JsonObject } from "@pluv/types";
 import fastDeepEqual from "fast-deep-equal";
 import type { Dispatch, FC, ReactNode } from "react";
-import {
-    createContext,
-    memo,
-    useCallback,
-    useContext,
-    useEffect,
-    useState,
-} from "react";
-import {
-    identity,
-    shallowArrayEqual,
-    useRerender,
-    useSyncExternalStoreWithSelector,
-} from "./internal";
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { identity, shallowArrayEqual, useRerender, useSyncExternalStoreWithSelector } from "./internal";
 
 export type CreateRoomBundleOptions<
     TIO extends IOLike,
@@ -59,9 +34,7 @@ type BaseRoomProviderProps<
     children?: ReactNode;
     initialStorage?: keyof TStorage extends never ? never : () => TStorage;
     room: string;
-} & (keyof TPresence extends never
-    ? { initialPresence?: never }
-    : { initialPresence: TPresence });
+} & (keyof TPresence extends never ? { initialPresence?: never } : { initialPresence: TPresence });
 
 export type MockedRoomProviderProps<
     TIO extends IOLike,
@@ -88,6 +61,19 @@ export type UpdateMyPresenceAction<TPresence extends JsonObject> =
     | Partial<TPresence>
     | ((oldPresence: TPresence | null) => Partial<TPresence>);
 
+export type BroadcastProxy<TIO extends IOLike> = (<TEvent extends keyof InferIOInput<TIO>>(
+    event: TEvent,
+    data: Id<InferIOInput<TIO>[TEvent]>,
+) => void) & {
+    [event in keyof InferIOInput<TIO>]: (callback: Id<InferIOInput<TIO>[event]>) => void;
+};
+
+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,
@@ -97,11 +83,11 @@ 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,
-        data: Id<InferIOInput<TIO>[TEvent]>,
-    ) => void;
+    useBroadcast: () => BroadcastProxy<TIO>;
     useCanRedo: () => boolean;
     useCanUndo: () => boolean;
     useConnection: <T extends unknown = WebSocketConnection>(
@@ -116,10 +102,7 @@ export interface CreateRoomBundle<
     useMyPresence: <T extends unknown = TPresence>(
         selector?: (myPresence: TPresence) => T,
         options?: SubscriptionHookOptions<Id<T> | null>,
-    ) => [
-        myPresence: Id<T>,
-        updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>,
-    ];
+    ) => [myPresence: Id<T>, updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>];
     useMyself: <T extends unknown = UserInfo<TIO, TPresence>>(
         selector?: (myself: Id<UserInfo<TIO, TPresence>>) => T,
         options?: SubscriptionHookOptions<Id<T> | null>,
@@ -135,27 +118,17 @@ export interface CreateRoomBundle<
     ) => readonly Id<T>[];
     useRedo: () => () => void;
     useRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
-    useStorage: <
-        TKey extends keyof TStorage,
-        TData extends unknown = InferCrdtStorageJson<TStorage[TKey]>,
-    >(
+    useStorage: <TKey extends keyof TStorage, TData extends unknown = InferCrdtStorageJson<TStorage[TKey]>>(
         key: TKey,
         selector?: (data: InferCrdtStorageJson<TStorage[TKey]>) => TData,
         options?: SubscriptionHookOptions<TData | null>,
     ) => [data: TData | null, sharedType: TStorage[TKey] | null];
-    useTransact: () => (
-        fn: (storage: TStorage) => void,
-        origin?: string,
-    ) => void;
+    useTransact: () => (fn: (storage: TStorage) => void, origin?: string) => void;
     useUndo: () => () => void;
 }
 
-export type InferRoomStorage<
-    TRoomBundle extends CreateRoomBundle<any, any, any>,
-> =
-    TRoomBundle extends CreateRoomBundle<any, any, infer IStorage>
-        ? IStorage
-        : never;
+export type InferRoomStorage<TRoomBundle extends CreateRoomBundle<any, any, any>> =
+    TRoomBundle extends CreateRoomBundle<any, any, infer IStorage> ? IStorage : never;
 
 export const createRoomBundle = <
     TIO extends IOLike,
@@ -165,8 +138,7 @@ export const createRoomBundle = <
     client: PluvClient<TIO>,
     options: CreateRoomBundleOptions<TIO, TPresence, TStorage>,
 ): CreateRoomBundle<TIO, TPresence, TStorage> => {
-    const _initialStorage = (options.initialStorage ??
-        noop.doc()) as AbstractCrdtDocFactory<TStorage>;
+    const _initialStorage = (options.initialStorage ?? noop.doc()) as AbstractCrdtDocFactory<TStorage>;
 
     /**
      * !HACK
@@ -175,59 +147,36 @@ export const createRoomBundle = <
      * @author leedavidcs
      * @date November 11, 2022
      */
-    const PluvRoomContext = createContext<
-        AbstractRoom<TIO, TPresence, TStorage>
-    >(null as any);
+    const PluvRoomContext = createContext<AbstractRoom<TIO, TPresence, TStorage>>(null as any);
 
     const MockedRoomContext = createContext<{
         room: AbstractRoom<TIO, TPresence, TStorage> | null;
     }>({ room: null });
 
-    const MockedRoomProvider = memo<
-        MockedRoomProviderProps<TIO, TPresence, TStorage>
-    >((props) => {
-        const {
-            children,
-            events,
-            initialPresence,
-            initialStorage,
-            room: _room,
-        } = props;
+    const MockedRoomProvider = memo<MockedRoomProviderProps<TIO, TPresence, TStorage>>((props) => {
+        const { children, events, initialPresence, initialStorage, room: _room } = props;
 
         const [room] = useState<MockedRoom<TIO, TPresence, TStorage>>(() => {
             return new MockedRoom<TIO, TPresence, TStorage>(_room, {
                 events,
                 initialPresence,
                 initialStorage:
-                    typeof initialStorage === "function"
-                        ? _initialStorage.getFactory(initialStorage)
-                        : _initialStorage,
+                    typeof initialStorage === "function" ? _initialStorage.getFactory(initialStorage) : _initialStorage,
                 presence: options.presence,
             });
         });
 
         return (
             <MockedRoomContext.Provider value={{ room }}>
-                <PluvRoomContext.Provider value={room}>
-                    {children}
-                </PluvRoomContext.Provider>
+                <PluvRoomContext.Provider value={room}>{children}</PluvRoomContext.Provider>
             </MockedRoomContext.Provider>
         );
     });
 
     MockedRoomProvider.displayName = "MockedRoomProvider";
 
-    const PluvRoomProvider = memo<
-        PluvRoomProviderProps<TIO, TPresence, TStorage>
-    >((props) => {
-        const {
-            children,
-            debug,
-            initialPresence,
-            initialStorage,
-            onAuthorizationFail,
-            room: _room,
-        } = props;
+    const PluvRoomProvider = memo<PluvRoomProviderProps<TIO, TPresence, TStorage>>((props) => {
+        const { children, debug, initialPresence, initialStorage, onAuthorizationFail, room: _room } = props;
 
         const rerender = useRerender();
         const { room: mockedRoom } = useContext(MockedRoomContext);
@@ -238,9 +187,7 @@ export const createRoomBundle = <
                 debug,
                 initialPresence,
                 initialStorage:
-                    typeof initialStorage === "function"
-                        ? _initialStorage.getFactory(initialStorage)
-                        : _initialStorage,
+                    typeof initialStorage === "function" ? _initialStorage.getFactory(initialStorage) : _initialStorage,
                 presence: options.presence,
                 onAuthorizationFail,
             });
@@ -264,50 +211,42 @@ export const createRoomBundle = <
             };
         }, [room]);
 
-        return (
-            <PluvRoomContext.Provider value={mockedRoom ?? room}>
-                {children}
-            </PluvRoomContext.Provider>
-        );
+        return <PluvRoomContext.Provider value={mockedRoom ?? room}>{children}</PluvRoomContext.Provider>;
     });
 
     PluvRoomProvider.displayName = "PluvRoomProvider";
 
     const useRoom = () => useContext(PluvRoomContext);
 
-    const useBroadcast = (): (<TEvent extends keyof InferIOInput<TIO>>(
-        event: TEvent,
-        data: Id<InferIOInput<TIO>[TEvent]>,
-    ) => void) => {
+    const useBroadcast = (): BroadcastProxy<TIO> => {
         const room = useRoom();
 
-        return useCallback(
-            <TEvent extends keyof InferIOInput<TIO>>(
-                event: TEvent,
-                data: Id<InferIOInput<TIO>[TEvent]>,
-            ) => {
+        const broadcast = useCallback(
+            <TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => {
                 room.broadcast(event, data);
             },
             [room],
         );
+
+        return useMemo((): BroadcastProxy<TIO> => {
+            return new Proxy(broadcast, {
+                get(fn, prop) {
+                    return (data: Id<InferIOInput<TIO>[keyof InferIOInput<TIO>]>): void => {
+                        return fn(prop as keyof InferIOInput<TIO>, data);
+                    };
+                },
+            }) as BroadcastProxy<TIO>;
+        }, [broadcast]);
     };
 
     const useCanRedo = (): boolean => {
         const room = useRoom();
 
-        const subscribe = useCallback(
-            (onStoreChange: () => void) => room.storageRoot(onStoreChange),
-            [room],
-        );
+        const subscribe = useCallback((onStoreChange: () => void) => room.storageRoot(onStoreChange), [room]);
 
         const getSnapshot = useCallback((): boolean => room.canRedo(), [room]);
 
-        const canRedo = useSyncExternalStoreWithSelector(
-            subscribe,
-            getSnapshot,
-            getSnapshot,
-            identity,
-        );
+        const canRedo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
 
         return canRedo;
     };
@@ -315,19 +254,11 @@ export const createRoomBundle = <
     const useCanUndo = (): boolean => {
         const room = useRoom();
 
-        const subscribe = useCallback(
-            (onStoreChange: () => void) => room.storageRoot(onStoreChange),
-            [room],
-        );
+        const subscribe = useCallback((onStoreChange: () => void) => room.storageRoot(onStoreChange), [room]);
 
         const getSnapshot = useCallback((): boolean => room.canUndo(), [room]);
 
-        const canRedo = useSyncExternalStoreWithSelector(
-            subscribe,
-            getSnapshot,
-            getSnapshot,
-            identity,
-        );
+        const canRedo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
 
         return canRedo;
     };
@@ -347,10 +278,7 @@ export const createRoomBundle = <
 
         const getSnapshot = room.getConnection;
 
-        const _selector = useCallback(
-            (snapshot: WebSocketConnection) => selector(snapshot) as Id<T>,
-            [selector],
-        );
+        const _selector = useCallback((snapshot: WebSocketConnection) => selector(snapshot) as Id<T>, [selector]);
 
         return useSyncExternalStoreWithSelector(
             subscribe,
@@ -382,6 +310,21 @@ export const createRoomBundle = <
         }, [callback, room, type]);
     };
 
+    const event = new Proxy(
+        {},
+        {
+            get(_, 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>,
@@ -397,10 +340,7 @@ export const createRoomBundle = <
 
         const getSnapshot = room.getMyPresence;
 
-        const _selector = useCallback(
-            (snapshot: TPresence) => selector(snapshot) as Id<T>,
-            [selector],
-        );
+        const _selector = useCallback((snapshot: TPresence) => selector(snapshot) as Id<T>, [selector]);
 
         const myPresence = useSyncExternalStoreWithSelector(
             subscribe,
@@ -410,18 +350,14 @@ export const createRoomBundle = <
             options?.isEqual ?? fastDeepEqual,
         );
 
-        const updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>> =
-            useCallback(
-                (value: UpdateMyPresenceAction<TPresence>): void => {
-                    const presence =
-                        typeof value === "function"
-                            ? value(room.getMyPresence())
-                            : value;
+        const updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>> = useCallback(
+            (value: UpdateMyPresenceAction<TPresence>): void => {
+                const presence = typeof value === "function" ? value(room.getMyPresence()) : value;
 
-                    room.updateMyPresence(presence);
-                },
-                [room],
-            );
+                room.updateMyPresence(presence);
+            },
+            [room],
+        );
 
         return [myPresence, updateMyPresence];
     };
@@ -471,10 +407,7 @@ export const createRoomBundle = <
             [room, connectionId],
         );
 
-        const getSnapshot = useCallback(
-            () => room.getOther(connectionId),
-            [room, connectionId],
-        );
+        const getSnapshot = useCallback(() => room.getOther(connectionId), [room, connectionId]);
 
         const _selector = useCallback(
             (snapshot: Id<UserInfo<TIO, TPresence>> | null) => {
@@ -493,9 +426,7 @@ export const createRoomBundle = <
     };
 
     const useOthers = <T extends unknown = UserInfo<TIO, TPresence>>(
-        selector = identity as (
-            other: readonly Id<UserInfo<TIO, TPresence>>[],
-        ) => T[],
+        selector = identity as (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[],
         options?: SubscriptionHookOptions<readonly Id<T>[]>,
     ): readonly Id<T>[] => {
         const room = useRoom();
@@ -513,9 +444,7 @@ export const createRoomBundle = <
             subscribe,
             getSnapshot,
             getSnapshot,
-            selector as (
-                other: readonly Id<UserInfo<TIO, TPresence>>[],
-            ) => Id<T>[],
+            selector as (other: readonly Id<UserInfo<TIO, TPresence>>[]) => Id<T>[],
             options?.isEqual ?? shallowArrayEqual,
         );
     };
@@ -526,14 +455,9 @@ export const createRoomBundle = <
         return room.redo;
     };
 
-    const useStorage = <
-        TKey extends keyof TStorage,
-        TData extends unknown = InferCrdtStorageJson<TStorage[TKey]>,
-    >(
+    const useStorage = <TKey extends keyof TStorage, TData extends unknown = InferCrdtStorageJson<TStorage[TKey]>>(
         key: TKey,
-        selector = identity as (
-            data: InferCrdtStorageJson<TStorage[TKey]>,
-        ) => TData,
+        selector = identity as (data: InferCrdtStorageJson<TStorage[TKey]>) => TData,
         options?: SubscriptionHookOptions<TData | null>,
     ): [data: TData | null, sharedType: TStorage[TKey] | null] => {
         const room = useRoom();
@@ -543,14 +467,9 @@ export const createRoomBundle = <
             rerender();
         });
 
-        const subscribe = useCallback(
-            (onStoreChange: () => void) => room.storage(key, onStoreChange),
-            [key, room],
-        );
+        const subscribe = useCallback((onStoreChange: () => void) => room.storage(key, onStoreChange), [key, room]);
 
-        const getSnapshot = useCallback((): InferCrdtStorageJson<
-            TStorage[TKey]
-        > | null => {
+        const getSnapshot = useCallback((): InferCrdtStorageJson<TStorage[TKey]> | null => {
             return room.getStorage(key)?.toJson();
         }, [key, room]);
 
@@ -591,6 +510,9 @@ export const createRoomBundle = <
         MockedRoomProvider,
         PluvRoomProvider,
 
+        // proxies
+        event,
+
         // hooks
         useBroadcast,
         useCanRedo,

package/src/index.ts

@@ -1,11 +1,6 @@
 export { ConnectionState, createClient } from "@pluv/client";
 export type { AbstractCrdtType, InferCrdtStorageJson } from "@pluv/crdt";
-export type {
-    BaseUser,
-    EventMessage,
-    EventRecord,
-    IOEventMessage,
-} from "@pluv/types";
+export type { BaseUser, EventMessage, EventRecord, IOEventMessage } from "@pluv/types";
 export { createBundle } from "./createBundle";
 export type { CreateBundle, PluvProviderProps } from "./createBundle";
 export type {

package/src/internal/hooks/useSyncExternalStore.ts

@@ -4,12 +4,7 @@ import { identity } from "../utils";
 export const useSyncExternalStore = <TSnapshot extends unknown>(
     subscribe: (onStoreChange: () => void) => () => void,
     getSnapshot: () => TSnapshot,
-    getServerSnapshot: undefined | null | (() => TSnapshot)
+    getServerSnapshot: undefined | null | (() => TSnapshot),
 ) => {
-    return useSyncExternalStoreWithSelector(
-        subscribe,
-        getSnapshot,
-        getServerSnapshot,
-        identity
-    );
+    return useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, identity);
 };

package/src/internal/index.ts

@@ -1,6 +1,2 @@
-export {
-    useRerender,
-    useSyncExternalStore,
-    useSyncExternalStoreWithSelector,
-} from "./hooks";
+export { useRerender, useSyncExternalStore, useSyncExternalStoreWithSelector } from "./hooks";
 export { identity, shallowArrayEqual } from "./utils";

package/src/internal/utils/shallowArrayEqual.ts

@@ -1,6 +1,3 @@
-export const shallowArrayEqual = <T extends unknown>(
-    a: readonly T[] | T[],
-    b: readonly T[] | T[]
-): boolean => {
+export const shallowArrayEqual = <T extends unknown>(a: readonly T[] | T[], b: readonly T[] | T[]): boolean => {
     return a.length === b.length && a.every((item, i) => item === b[i]);
 };