@pluv/react 0.26.0 → 0.28.0

package/.turbo/turbo-build.log

@@ -1,18 +1,18 @@
 
-> @pluv/react@0.26.0 build /home/runner/work/pluv/pluv/packages/react
+> @pluv/react@0.28.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
 CLI Using tsconfig: tsconfig.json
-CLI tsup v8.2.4
+CLI tsup v8.3.0
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.js 14.30 KB
-CJS ⚡️ Build success in 127ms
-ESM dist/index.mjs 11.89 KB
-ESM ⚡️ Build success in 128ms
+ESM dist/index.mjs 11.84 KB
+ESM ⚡️ Build success in 141ms
+CJS dist/index.js 14.23 KB
+CJS ⚡️ Build success in 141ms
 DTS Build start
-DTS ⚡️ Build success in 4697ms
-DTS dist/index.d.mts 5.50 KB
-DTS dist/index.d.ts  5.50 KB
+DTS ⚡️ Build success in 4997ms
+DTS dist/index.d.mts 6.04 KB
+DTS dist/index.d.ts  6.04 KB

package/CHANGELOG.md

@@ -1,5 +1,137 @@
 # @pluv/react
 
+## 0.28.0
+
+### Minor Changes
+
+- 778b43e: Remove the `initialStorage` option from `createRoomBundle`. This has been moved to `createClient`.
+
+### Patch Changes
+
+- @pluv/client@0.28.0
+- @pluv/crdt@0.28.0
+- @pluv/types@0.28.0
+
+## 0.27.0
+
+### Minor Changes
+
+- 19ed36c: Updated `createClient` and `createRoomBundle` object params to better support automatic type inference.
+
+  ```ts
+  // Before
+  import { createClient } from "@pluv/react";
+  import { yjs } from "@pluv/crdt-yjs";
+  import { z } from "zod";
+  import type { ioServer } from "./server/ioServer";
+
+  const client = createClient<typeof ioServer>({
+    authEndpoint: ({ room }) => "MY_AUTH_URL",
+    wsEndpoint: ({ room }) => "MY_WEBSOCKET_URL",
+  });
+
+  client.createRoom("my-example-room", {
+    presence: z.object({
+      selectionId: z.string().nullish(),
+    }),
+    initialPresence: {
+      selectionId: null,
+    },
+    initialStorage: yjs.doc(() => ({
+      messages: yjs.array<string>([]),
+    })),
+  });
+
+  // After
+
+  import { createBundle, createClient } from "@pluv/react";
+
+  const client = createClient({
+    authEndpoint: ({ room }) => "MY_AUTH_URL",
+    wsEndpoint: ({ room }) => "MY_WEBSOCKET_URL",
+    /**
+     * @description The ioServer type now needs to be inferred on this property
+     * instead of within the generic on `createClient`. This is because of
+     * limitations with TypeScript not yet supporting partial type-inference
+     * for generics. Ensure to no-loonger include any generics on `createClient`
+     */
+    infer: (i) => ({ io: i<typeof ioServer> }),
+    // Now moved to `createClient` from `PluvClient.createRoom`
+    presence: z.object({
+      selectionId: z.string().nullish(),
+    }),
+    /**
+     * @description Now added to `createClient` to specify defaults for all
+     * rooms, and to infer types for storage. This value will be overwritten by
+     * `PluvClient.createRoom`.
+     */
+    initialStorage: yjs.doc(() => ({
+      messages: yjs.array<string>([]),
+    })),
+  });
+
+  const { createRoomBundle } = createBundle(client);
+  const pluv = createRoomBundle({});
+  ```
+
+### Patch Changes
+
+- 19ed36c: Added client-side event router. This more-or-less mirrors the server-side event router. You can use both the server-side and client-side router simultaneously, but you should generally prefer only using one or the other.
+
+  ```ts
+  // Backend Server
+  import { createIO } from "@pluv/io";
+
+  const io = createIO({ /* ... */ });
+  const ioServer = io.server({
+      router: io.router({
+          multiply2: io.procedure
+              .input(z.object({ value: z.number() }))
+              .broadcast(({ value }) => ({
+                  multiplied2: { value: value * 2 },
+              })),
+      }),
+  });
+
+  // Frontend Client
+  import { createBundle createClient } from "@pluv/react";
+
+  const io = createClient({ /* ... */ });
+
+  const { createRoomBundle } = createBundle(io);
+  const pluv = createRoomBundle({
+      // ...
+      router: io.router({
+          add5: io.procedure
+              .input(z.object({ value: z.number() }))
+              .broadcast(({ value }) => ({
+                  /**
+                   * @description Because `ioServer` does not specify `added5`,
+                   * this will be forwarded to connected peers.
+                   */
+                  added5: { value: value + 5 },
+              })),
+          /**
+           * @description This is possible, but not recommended to do. Because
+           * `multiply2` is a procedure on `ioServer`, this will trigger the
+           * `multiply2` procedure on `ioServer`. Connected peers will not
+           * receive `multiply2`, but rather `multipled2`.
+           */
+          subtract5Multiply2: io.procedure
+              .input(z.object({ value: z.number() }))
+              .broadcast(({ value }) => ({
+                  multiply2: { value: value - 5 },
+              })),
+      }),
+  });
+  ```
+
+- Updated dependencies [19ed36c]
+- Updated dependencies [19ed36c]
+  - @pluv/client@0.27.0
+  - @pluv/crdt@0.27.0
+  - @pluv/types@0.27.0
+
 ## 0.26.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,15 +1,14 @@
-import { PluvRoomAddon, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom, MockedRoomEvents, PluvClient } from '@pluv/client';
+import { PluvRouterEventConfig, PluvRoomAddon, PluvRouter, PluvRoomDebug, MergeEvents, WebSocketConnection, UserInfo, AbstractRoom, MockedRoomEvents, PluvClient } from '@pluv/client';
 export { ConnectionState, createClient } from '@pluv/client';
-import { CrdtType, AbstractCrdtDocFactory, AbstractCrdtDoc, InferCrdtJson } from '@pluv/crdt';
+import { CrdtType, AbstractCrdtDoc, InferCrdtJson } from '@pluv/crdt';
 export { CrdtType, InferCrdtJson } from '@pluv/crdt';
-import { IOLike, JsonObject, InputZodLike, Id, InferIOOutput, IOEventMessage, InferIOInput } from '@pluv/types';
+import { IOLike, JsonObject, Id, InferIOOutput, IOEventMessage, InferIOInput } from '@pluv/types';
 export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types';
 import { FC, Dispatch, ReactNode } from 'react';
 
-type CreateRoomBundleOptions<TIO extends IOLike, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}> = {
+type CreateRoomBundleOptions<TIO extends IOLike, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}, TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}> = {
     addons?: readonly PluvRoomAddon<TIO, TMetadata, TPresence, TStorage>[];
-    initialStorage?: AbstractCrdtDocFactory<TStorage>;
-    presence?: InputZodLike<TPresence>;
+    router?: PluvRouter<TIO, TPresence, TStorage, TEvents>;
 };
 type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = {
     children?: ReactNode;
@@ -20,8 +19,8 @@ type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record
 } : {
     initialPresence: TPresence;
 });
-type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
-    events?: MockedRoomEvents<TIO>;
+type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>, TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}> = BaseRoomProviderProps<TPresence, TStorage> & {
+    events?: MockedRoomEvents<MergeEvents<TEvents, TIO>>;
 };
 type PluvRoomProviderProps<TIO extends IOLike, TMetadata extends JsonObject, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
     debug?: boolean | PluvRoomDebug<TIO>;
@@ -43,16 +42,16 @@ type EventProxy<TIO extends IOLike> = {
         useEvent: (callback: (data: Id<IOEventMessage<TIO, event>>) => void) => void;
     };
 };
-interface CreateRoomBundle<TIO extends IOLike, TMetadata extends JsonObject, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> {
+interface CreateRoomBundle<TIO extends IOLike, TMetadata extends JsonObject, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>, TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}> {
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TMetadata, TPresence, TStorage>>;
-    event: EventProxy<TIO>;
-    useBroadcast: () => BroadcastProxy<TIO>;
+    event: EventProxy<MergeEvents<TEvents, TIO>>;
+    useBroadcast: () => BroadcastProxy<MergeEvents<TEvents, 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;
+    useEvent: <TType extends keyof InferIOOutput<MergeEvents<TEvents, TIO>>>(type: TType, callback: (data: Id<IOEventMessage<MergeEvents<TEvents, 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>>];
     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<T | null>) => T | null;
@@ -63,16 +62,16 @@ interface CreateRoomBundle<TIO extends IOLike, TMetadata extends JsonObject, TPr
     useTransact: () => (fn: (storage: TStorage) => void, origin?: string) => void;
     useUndo: () => () => void;
 }
-type InferRoomStorage<TRoomBundle extends CreateRoomBundle<any, any, any, any>> = TRoomBundle extends CreateRoomBundle<any, any, any, infer IStorage> ? IStorage : never;
+type InferRoomStorage<TRoomBundle extends CreateRoomBundle<any, any, any, any, any>> = TRoomBundle extends CreateRoomBundle<any, any, any, infer IStorage> ? IStorage : never;
 
 interface PluvProviderProps {
     children?: ReactNode;
 }
-interface CreateBundle<TIO extends IOLike, TMetadata extends JsonObject> {
-    createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}>(options: CreateRoomBundleOptions<TIO, TMetadata, TPresence, TStorage>) => CreateRoomBundle<TIO, TMetadata, TPresence, TStorage>;
+interface CreateBundle<TIO extends IOLike, TMetadata extends JsonObject, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}> {
+    createRoomBundle: <TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}>(options: CreateRoomBundleOptions<TIO, TMetadata, TPresence, TStorage, TEvents>) => CreateRoomBundle<TIO, TMetadata, TPresence, TStorage, TEvents>;
     PluvProvider: FC<PluvProviderProps>;
-    useClient: () => PluvClient<TIO, TMetadata>;
+    useClient: () => PluvClient<TIO, TPresence, TStorage, TMetadata>;
 }
-declare const createBundle: <TIO extends IOLike, TMetadata extends JsonObject>(client: PluvClient<TIO, TMetadata>) => CreateBundle<TIO, TMetadata>;
+declare const createBundle: <TIO extends IOLike, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}>(client: PluvClient<TIO, TPresence, TStorage, TMetadata>) => CreateBundle<TIO, TMetadata, TPresence, TStorage>;
 
 export { type CreateBundle, type CreateRoomBundle, type CreateRoomBundleOptions, type InferRoomStorage, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };

package/dist/index.d.ts

@@ -1,15 +1,14 @@
-import { PluvRoomAddon, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom, MockedRoomEvents, PluvClient } from '@pluv/client';
+import { PluvRouterEventConfig, PluvRoomAddon, PluvRouter, PluvRoomDebug, MergeEvents, WebSocketConnection, UserInfo, AbstractRoom, MockedRoomEvents, PluvClient } from '@pluv/client';
 export { ConnectionState, createClient } from '@pluv/client';
-import { CrdtType, AbstractCrdtDocFactory, AbstractCrdtDoc, InferCrdtJson } from '@pluv/crdt';
+import { CrdtType, AbstractCrdtDoc, InferCrdtJson } from '@pluv/crdt';
 export { CrdtType, InferCrdtJson } from '@pluv/crdt';
-import { IOLike, JsonObject, InputZodLike, Id, InferIOOutput, IOEventMessage, InferIOInput } from '@pluv/types';
+import { IOLike, JsonObject, Id, InferIOOutput, IOEventMessage, InferIOInput } from '@pluv/types';
 export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types';
 import { FC, Dispatch, ReactNode } from 'react';
 
-type CreateRoomBundleOptions<TIO extends IOLike, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}> = {
+type CreateRoomBundleOptions<TIO extends IOLike, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}, TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}> = {
     addons?: readonly PluvRoomAddon<TIO, TMetadata, TPresence, TStorage>[];
-    initialStorage?: AbstractCrdtDocFactory<TStorage>;
-    presence?: InputZodLike<TPresence>;
+    router?: PluvRouter<TIO, TPresence, TStorage, TEvents>;
 };
 type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = {
     children?: ReactNode;
@@ -20,8 +19,8 @@ type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record
 } : {
     initialPresence: TPresence;
 });
-type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
-    events?: MockedRoomEvents<TIO>;
+type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>, TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}> = BaseRoomProviderProps<TPresence, TStorage> & {
+    events?: MockedRoomEvents<MergeEvents<TEvents, TIO>>;
 };
 type PluvRoomProviderProps<TIO extends IOLike, TMetadata extends JsonObject, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
     debug?: boolean | PluvRoomDebug<TIO>;
@@ -43,16 +42,16 @@ type EventProxy<TIO extends IOLike> = {
         useEvent: (callback: (data: Id<IOEventMessage<TIO, event>>) => void) => void;
     };
 };
-interface CreateRoomBundle<TIO extends IOLike, TMetadata extends JsonObject, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> {
+interface CreateRoomBundle<TIO extends IOLike, TMetadata extends JsonObject, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>, TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}> {
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TMetadata, TPresence, TStorage>>;
-    event: EventProxy<TIO>;
-    useBroadcast: () => BroadcastProxy<TIO>;
+    event: EventProxy<MergeEvents<TEvents, TIO>>;
+    useBroadcast: () => BroadcastProxy<MergeEvents<TEvents, 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;
+    useEvent: <TType extends keyof InferIOOutput<MergeEvents<TEvents, TIO>>>(type: TType, callback: (data: Id<IOEventMessage<MergeEvents<TEvents, 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>>];
     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<T | null>) => T | null;
@@ -63,16 +62,16 @@ interface CreateRoomBundle<TIO extends IOLike, TMetadata extends JsonObject, TPr
     useTransact: () => (fn: (storage: TStorage) => void, origin?: string) => void;
     useUndo: () => () => void;
 }
-type InferRoomStorage<TRoomBundle extends CreateRoomBundle<any, any, any, any>> = TRoomBundle extends CreateRoomBundle<any, any, any, infer IStorage> ? IStorage : never;
+type InferRoomStorage<TRoomBundle extends CreateRoomBundle<any, any, any, any, any>> = TRoomBundle extends CreateRoomBundle<any, any, any, infer IStorage> ? IStorage : never;
 
 interface PluvProviderProps {
     children?: ReactNode;
 }
-interface CreateBundle<TIO extends IOLike, TMetadata extends JsonObject> {
-    createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}>(options: CreateRoomBundleOptions<TIO, TMetadata, TPresence, TStorage>) => CreateRoomBundle<TIO, TMetadata, TPresence, TStorage>;
+interface CreateBundle<TIO extends IOLike, TMetadata extends JsonObject, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}> {
+    createRoomBundle: <TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}>(options: CreateRoomBundleOptions<TIO, TMetadata, TPresence, TStorage, TEvents>) => CreateRoomBundle<TIO, TMetadata, TPresence, TStorage, TEvents>;
     PluvProvider: FC<PluvProviderProps>;
-    useClient: () => PluvClient<TIO, TMetadata>;
+    useClient: () => PluvClient<TIO, TPresence, TStorage, TMetadata>;
 }
-declare const createBundle: <TIO extends IOLike, TMetadata extends JsonObject>(client: PluvClient<TIO, TMetadata>) => CreateBundle<TIO, TMetadata>;
+declare const createBundle: <TIO extends IOLike, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}>(client: PluvClient<TIO, TPresence, TStorage, TMetadata>) => CreateBundle<TIO, TMetadata, TPresence, TStorage>;
 
 export { type CreateBundle, type CreateRoomBundle, type CreateRoomBundleOptions, type InferRoomStorage, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };

package/dist/index.js

@@ -42,7 +42,6 @@ var import_react5 = require("react");
 
 // src/createRoomBundle.tsx
 var import_client = require("@pluv/client");
-var import_crdt = require("@pluv/crdt");
 var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
 var import_react4 = require("react");
 
@@ -112,18 +111,16 @@ var useSyncExternalStoreWithSelector = (subscribe, getClientSnapshot, getServerS
 // src/createRoomBundle.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var createRoomBundle = (client, options) => {
-  var _a;
-  const _initialStorage = (_a = options.initialStorage) != null ? _a : import_crdt.noop.doc();
   const PluvRoomContext = (0, import_react4.createContext)(null);
   const MockedRoomContext = (0, import_react4.createContext)({ room: null });
   const MockedRoomProvider = (0, import_react4.memo)((props) => {
     const { children, events, initialPresence, initialStorage, room: _room } = props;
     const [room] = (0, import_react4.useState)(() => {
+      var _a;
       return new import_client.MockedRoom(_room, {
         events,
         initialPresence,
-        initialStorage: typeof initialStorage === "function" ? _initialStorage.getFactory(initialStorage) : _initialStorage,
-        presence: options.presence
+        initialStorage: typeof initialStorage === "function" ? (_a = client._defs.initialStorage) == null ? void 0 : _a.getFactory(initialStorage) : client._defs.initialStorage
       });
     });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MockedRoomContext.Provider, { value: { room }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PluvRoomContext.Provider, { value: room, children }) });
@@ -134,14 +131,15 @@ var createRoomBundle = (client, options) => {
     const rerender = useRerender();
     const { room: mockedRoom } = (0, import_react4.useContext)(MockedRoomContext);
     const [room] = (0, import_react4.useState)(() => {
+      var _a;
       return client.createRoom(_room, {
         addons: options.addons,
         debug,
         initialPresence,
-        initialStorage: typeof initialStorage === "function" ? _initialStorage.getFactory(initialStorage) : _initialStorage,
+        initialStorage: typeof initialStorage === "function" ? (_a = client._defs.initialStorage) == null ? void 0 : _a.getFactory(initialStorage) : client._defs.initialStorage,
         metadata,
-        presence: options.presence,
-        onAuthorizationFail
+        onAuthorizationFail,
+        router: options.router
       });
     });
     (0, import_react4.useEffect)(() => {
@@ -195,7 +193,7 @@ var createRoomBundle = (client, options) => {
     return canUndo;
   };
   const useConnection = (selector = identity, options2) => {
-    var _a2;
+    var _a;
     const room = useRoom();
     const subscribe = (0, import_react4.useCallback)(
       (onStoreChange) => {
@@ -210,7 +208,7 @@ var createRoomBundle = (client, options) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : import_fast_deep_equal.default
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal.default
     );
   };
   const useDoc = () => {
@@ -238,7 +236,7 @@ var createRoomBundle = (client, options) => {
     }
   );
   const useMyPresence = (selector = identity, options2) => {
-    var _a2;
+    var _a;
     const room = useRoom();
     const subscribe = (0, import_react4.useCallback)(
       (onStoreChange) => {
@@ -253,12 +251,12 @@ var createRoomBundle = (client, options) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : import_fast_deep_equal.default
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal.default
     );
     return [myPresence, room.updateMyPresence];
   };
   const useMyself = (selector = identity, options2) => {
-    var _a2;
+    var _a;
     const room = useRoom();
     const subscribe = (0, import_react4.useCallback)(
       (onStoreChange) => {
@@ -278,11 +276,11 @@ var createRoomBundle = (client, options) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : import_fast_deep_equal.default
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal.default
     );
   };
   const useOther = (connectionId, selector = identity, options2) => {
-    var _a2;
+    var _a;
     const room = useRoom();
     const subscribe = (0, import_react4.useCallback)(
       (onStoreChange) => {
@@ -302,11 +300,11 @@ var createRoomBundle = (client, options) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : import_fast_deep_equal.default
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal.default
     );
   };
   const useOthers = (selector = identity, options2) => {
-    var _a2;
+    var _a;
     const room = useRoom();
     const subscribe = (0, import_react4.useCallback)(
       (onStoreChange) => {
@@ -320,7 +318,7 @@ var createRoomBundle = (client, options) => {
       getSnapshot,
       getSnapshot,
       selector,
-      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : (a, b) => {
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : (a, b) => {
         if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
           return shallowArrayEqual(a, b);
         }
@@ -333,7 +331,7 @@ var createRoomBundle = (client, options) => {
     return room.redo;
   };
   const useStorage = (key, selector = identity, options2) => {
-    var _a2, _b;
+    var _a, _b;
     const room = useRoom();
     const rerender = useRerender();
     room.subscribe("storage-loaded", () => {
@@ -354,7 +352,7 @@ var createRoomBundle = (client, options) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : import_fast_deep_equal.default
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal.default
     );
     const sharedType = (_b = room.getStorage(key)) != null ? _b : null;
     return [data, sharedType];

package/dist/index.mjs

@@ -6,7 +6,6 @@ import { createContext as createContext2, memo as memo2, useContext as useContex
 
 // src/createRoomBundle.tsx
 import { MockedRoom } from "@pluv/client";
-import { noop } from "@pluv/crdt";
 import fastDeepEqual from "fast-deep-equal";
 import { createContext, memo, useCallback as useCallback3, useContext, useEffect as useEffect2, useMemo, useState as useState3 } from "react";
 
@@ -76,18 +75,16 @@ var useSyncExternalStoreWithSelector = (subscribe, getClientSnapshot, getServerS
 // src/createRoomBundle.tsx
 import { jsx } from "react/jsx-runtime";
 var createRoomBundle = (client, options) => {
-  var _a;
-  const _initialStorage = (_a = options.initialStorage) != null ? _a : noop.doc();
   const PluvRoomContext = createContext(null);
   const MockedRoomContext = createContext({ room: null });
   const MockedRoomProvider = memo((props) => {
     const { children, events, initialPresence, initialStorage, room: _room } = props;
     const [room] = useState3(() => {
+      var _a;
       return new MockedRoom(_room, {
         events,
         initialPresence,
-        initialStorage: typeof initialStorage === "function" ? _initialStorage.getFactory(initialStorage) : _initialStorage,
-        presence: options.presence
+        initialStorage: typeof initialStorage === "function" ? (_a = client._defs.initialStorage) == null ? void 0 : _a.getFactory(initialStorage) : client._defs.initialStorage
       });
     });
     return /* @__PURE__ */ jsx(MockedRoomContext.Provider, { value: { room }, children: /* @__PURE__ */ jsx(PluvRoomContext.Provider, { value: room, children }) });
@@ -98,14 +95,15 @@ var createRoomBundle = (client, options) => {
     const rerender = useRerender();
     const { room: mockedRoom } = useContext(MockedRoomContext);
     const [room] = useState3(() => {
+      var _a;
       return client.createRoom(_room, {
         addons: options.addons,
         debug,
         initialPresence,
-        initialStorage: typeof initialStorage === "function" ? _initialStorage.getFactory(initialStorage) : _initialStorage,
+        initialStorage: typeof initialStorage === "function" ? (_a = client._defs.initialStorage) == null ? void 0 : _a.getFactory(initialStorage) : client._defs.initialStorage,
         metadata,
-        presence: options.presence,
-        onAuthorizationFail
+        onAuthorizationFail,
+        router: options.router
       });
     });
     useEffect2(() => {
@@ -159,7 +157,7 @@ var createRoomBundle = (client, options) => {
     return canUndo;
   };
   const useConnection = (selector = identity, options2) => {
-    var _a2;
+    var _a;
     const room = useRoom();
     const subscribe = useCallback3(
       (onStoreChange) => {
@@ -174,7 +172,7 @@ var createRoomBundle = (client, options) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : fastDeepEqual
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual
     );
   };
   const useDoc = () => {
@@ -202,7 +200,7 @@ var createRoomBundle = (client, options) => {
     }
   );
   const useMyPresence = (selector = identity, options2) => {
-    var _a2;
+    var _a;
     const room = useRoom();
     const subscribe = useCallback3(
       (onStoreChange) => {
@@ -217,12 +215,12 @@ var createRoomBundle = (client, options) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : fastDeepEqual
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual
     );
     return [myPresence, room.updateMyPresence];
   };
   const useMyself = (selector = identity, options2) => {
-    var _a2;
+    var _a;
     const room = useRoom();
     const subscribe = useCallback3(
       (onStoreChange) => {
@@ -242,11 +240,11 @@ var createRoomBundle = (client, options) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : fastDeepEqual
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual
     );
   };
   const useOther = (connectionId, selector = identity, options2) => {
-    var _a2;
+    var _a;
     const room = useRoom();
     const subscribe = useCallback3(
       (onStoreChange) => {
@@ -266,11 +264,11 @@ var createRoomBundle = (client, options) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : fastDeepEqual
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual
     );
   };
   const useOthers = (selector = identity, options2) => {
-    var _a2;
+    var _a;
     const room = useRoom();
     const subscribe = useCallback3(
       (onStoreChange) => {
@@ -284,7 +282,7 @@ var createRoomBundle = (client, options) => {
       getSnapshot,
       getSnapshot,
       selector,
-      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : (a, b) => {
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : (a, b) => {
         if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
           return shallowArrayEqual(a, b);
         }
@@ -297,7 +295,7 @@ var createRoomBundle = (client, options) => {
     return room.redo;
   };
   const useStorage = (key, selector = identity, options2) => {
-    var _a2, _b;
+    var _a, _b;
     const room = useRoom();
     const rerender = useRerender();
     room.subscribe("storage-loaded", () => {
@@ -318,7 +316,7 @@ var createRoomBundle = (client, options) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : fastDeepEqual
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : fastDeepEqual
     );
     const sharedType = (_b = room.getStorage(key)) != null ? _b : null;
     return [data, sharedType];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/react",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "description": "@pluv/client React.js bindings",
   "author": "leedavidcs",
   "license": "MIT",
@@ -18,22 +18,22 @@
   },
   "dependencies": {
     "fast-deep-equal": "^3.1.3",
-    "@pluv/client": "^0.26.0",
-    "@pluv/crdt": "^0.26.0",
-    "@pluv/types": "^0.26.0"
+    "@pluv/client": "^0.28.0",
+    "@pluv/crdt": "^0.28.0",
+    "@pluv/types": "^0.28.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",
     "react": "^18.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.4",
+    "@types/react": "^18.3.6",
     "eslint": "^8.57.0",
     "react": "^18.3.1",
-    "tsup": "^8.2.4",
-    "typescript": "^5.5.4",
-    "@pluv/tsconfig": "^0.26.0",
-    "eslint-config-pluv": "^0.26.0"
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.2",
+    "@pluv/tsconfig": "^0.28.0",
+    "eslint-config-pluv": "^0.28.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",

package/src/createBundle.tsx

@@ -1,4 +1,4 @@
-import type { PluvClient } from "@pluv/client";
+import type { PluvClient, PluvRouterEventConfig } from "@pluv/client";
 import type { CrdtType } from "@pluv/crdt";
 import type { IOLike, JsonObject } from "@pluv/types";
 import type { FC, ReactNode } from "react";
@@ -10,22 +10,32 @@ export interface PluvProviderProps {
     children?: ReactNode;
 }
 
-export interface CreateBundle<TIO extends IOLike, TMetadata extends JsonObject> {
+export interface CreateBundle<
+    TIO extends IOLike,
+    TMetadata extends JsonObject,
+    TPresence extends JsonObject = {},
+    TStorage extends Record<string, CrdtType<any, any>> = {},
+> {
     // factories
-    createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}>(
-        options: CreateRoomBundleOptions<TIO, TMetadata, TPresence, TStorage>,
-    ) => CreateRoomBundle<TIO, TMetadata, TPresence, TStorage>;
+    createRoomBundle: <TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}>(
+        options: CreateRoomBundleOptions<TIO, TMetadata, TPresence, TStorage, TEvents>,
+    ) => CreateRoomBundle<TIO, TMetadata, TPresence, TStorage, TEvents>;
 
     // components
     PluvProvider: FC<PluvProviderProps>;
 
     // hooks
-    useClient: () => PluvClient<TIO, TMetadata>;
+    useClient: () => PluvClient<TIO, TPresence, TStorage, TMetadata>;
 }
 
-export const createBundle = <TIO extends IOLike, TMetadata extends JsonObject>(
-    client: PluvClient<TIO, TMetadata>,
-): CreateBundle<TIO, TMetadata> => {
+export const createBundle = <
+    TIO extends IOLike,
+    TMetadata extends JsonObject = {},
+    TPresence extends JsonObject = {},
+    TStorage extends Record<string, CrdtType<any, any>> = {},
+>(
+    client: PluvClient<TIO, TPresence, TStorage, TMetadata>,
+): CreateBundle<TIO, TMetadata, TPresence, TStorage> => {
     /**
      * !HACK
      * @description We'll let the context error out if client is not provided,
@@ -33,7 +43,7 @@ export const createBundle = <TIO extends IOLike, TMetadata extends JsonObject>(
      * @author leedavidcs
      * @date October 27, 2022
      */
-    const PluvContext = createContext<PluvClient<TIO, TMetadata>>(null as any);
+    const PluvContext = createContext<PluvClient<TIO, TPresence, TStorage, TMetadata>>(null as any);
 
     const PluvProvider = memo<PluvProviderProps>((props) => {
         const { children } = props;
@@ -43,14 +53,11 @@ export const createBundle = <TIO extends IOLike, TMetadata extends JsonObject>(
 
     PluvProvider.displayName = "PluvProvider";
 
-    const useClient = (): PluvClient<TIO, TMetadata> => useContext(PluvContext);
+    const useClient = (): PluvClient<TIO, TPresence, TStorage, TMetadata> => useContext(PluvContext);
 
-    const createRoomBundle = <
-        TPresence extends JsonObject = {},
-        TStorage extends Record<string, CrdtType<any, any>> = {},
-    >(
-        options: CreateRoomBundleOptions<TIO, TMetadata, TPresence, TStorage>,
-    ): CreateRoomBundle<TIO, TMetadata, TPresence, TStorage> => _createRoomBundle(client, options);
+    const createRoomBundle = <TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {}>(
+        options: CreateRoomBundleOptions<TIO, TMetadata, TPresence, TStorage, TEvents>,
+    ): CreateRoomBundle<TIO, TMetadata, TPresence, TStorage, TEvents> => _createRoomBundle(client, options);
 
     return {
         createRoomBundle,

package/src/createRoomBundle.tsx

@@ -1,18 +1,20 @@
 import type {
     AbstractRoom,
+    CreateRoomOptions,
+    MergeEvents,
     MockedRoomEvents,
     PluvClient,
     PluvRoom,
     PluvRoomAddon,
     PluvRoomDebug,
-    PluvRoomOptions,
+    PluvRouter,
+    PluvRouterEventConfig,
     UserInfo,
     WebSocketConnection,
 } from "@pluv/client";
 import { MockedRoom } from "@pluv/client";
-import type { AbstractCrdtDoc, AbstractCrdtDocFactory, CrdtType, InferCrdtJson } from "@pluv/crdt";
-import { noop } from "@pluv/crdt";
-import type { IOEventMessage, IOLike, Id, InferIOInput, InferIOOutput, InputZodLike, JsonObject } from "@pluv/types";
+import type { AbstractCrdtDoc, CrdtType, InferCrdtJson } from "@pluv/crdt";
+import type { IOEventMessage, IOLike, Id, InferIOInput, InferIOOutput, JsonObject } from "@pluv/types";
 import fastDeepEqual from "fast-deep-equal";
 import type { Dispatch, FC, ReactNode } from "react";
 import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from "react";
@@ -23,10 +25,10 @@ export type CreateRoomBundleOptions<
     TMetadata extends JsonObject = {},
     TPresence extends JsonObject = {},
     TStorage extends Record<string, CrdtType<any, any>> = {},
+    TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {},
 > = {
     addons?: readonly PluvRoomAddon<TIO, TMetadata, TPresence, TStorage>[];
-    initialStorage?: AbstractCrdtDocFactory<TStorage>;
-    presence?: InputZodLike<TPresence>;
+    router?: PluvRouter<TIO, TPresence, TStorage, TEvents>;
 };
 
 type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = {
@@ -39,8 +41,9 @@ export type MockedRoomProviderProps<
     TIO extends IOLike,
     TPresence extends JsonObject,
     TStorage extends Record<string, CrdtType<any, any>>,
+    TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {},
 > = BaseRoomProviderProps<TPresence, TStorage> & {
-    events?: MockedRoomEvents<TIO>;
+    events?: MockedRoomEvents<MergeEvents<TEvents, TIO>>;
 };
 
 export type PluvRoomProviderProps<
@@ -79,16 +82,17 @@ export interface CreateRoomBundle<
     TMetadata extends JsonObject,
     TPresence extends JsonObject,
     TStorage extends Record<string, CrdtType<any, any>>,
+    TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {},
 > {
     // components
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TMetadata, TPresence, TStorage>>;
 
     // proxies
-    event: EventProxy<TIO>;
+    event: EventProxy<MergeEvents<TEvents, TIO>>;
 
     // hooks
-    useBroadcast: () => BroadcastProxy<TIO>;
+    useBroadcast: () => BroadcastProxy<MergeEvents<TEvents, TIO>>;
     useCanRedo: () => boolean;
     useCanUndo: () => boolean;
     useConnection: <T extends unknown = WebSocketConnection>(
@@ -96,9 +100,9 @@ export interface CreateRoomBundle<
         options?: SubscriptionHookOptions<Id<T>>,
     ) => Id<T>;
     useDoc: () => AbstractCrdtDoc<TStorage>;
-    useEvent: <TType extends keyof InferIOOutput<TIO>>(
+    useEvent: <TType extends keyof InferIOOutput<MergeEvents<TEvents, TIO>>>(
         type: TType,
-        callback: (data: Id<IOEventMessage<TIO, TType>>) => void,
+        callback: (data: Id<IOEventMessage<MergeEvents<TEvents, TIO>, TType>>) => void,
     ) => void;
     useMyPresence: <T extends unknown = TPresence>(
         selector?: (myPresence: TPresence) => T,
@@ -128,7 +132,7 @@ export interface CreateRoomBundle<
     useUndo: () => () => void;
 }
 
-export type InferRoomStorage<TRoomBundle extends CreateRoomBundle<any, any, any, any>> =
+export type InferRoomStorage<TRoomBundle extends CreateRoomBundle<any, any, any, any, any>> =
     TRoomBundle extends CreateRoomBundle<any, any, any, infer IStorage> ? IStorage : never;
 
 export const createRoomBundle = <
@@ -136,12 +140,11 @@ export const createRoomBundle = <
     TMetadata extends JsonObject = {},
     TPresence extends JsonObject = {},
     TStorage extends Record<string, CrdtType<any, any>> = {},
+    TEvents extends PluvRouterEventConfig<TIO, TPresence, TStorage> = {},
 >(
-    client: PluvClient<TIO, TMetadata>,
-    options: CreateRoomBundleOptions<TIO, TMetadata, TPresence, TStorage>,
-): CreateRoomBundle<TIO, TMetadata, TPresence, TStorage> => {
-    const _initialStorage = (options.initialStorage ?? noop.doc()) as AbstractCrdtDocFactory<TStorage>;
-
+    client: PluvClient<TIO, TPresence, TStorage, TMetadata>,
+    options: CreateRoomBundleOptions<TIO, TMetadata, TPresence, TStorage, TEvents>,
+): CreateRoomBundle<TIO, TMetadata, TPresence, TStorage, TEvents> => {
     /**
      * !HACK
      * @description We'll let the context error out if the room is not provided,
@@ -158,13 +161,14 @@ export const createRoomBundle = <
     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, {
+        const [room] = useState<MockedRoom<TIO, TPresence, TStorage, TEvents>>(() => {
+            return new MockedRoom<TIO, TPresence, TStorage, TEvents>(_room, {
                 events,
                 initialPresence,
                 initialStorage:
-                    typeof initialStorage === "function" ? _initialStorage.getFactory(initialStorage) : _initialStorage,
-                presence: options.presence,
+                    typeof initialStorage === "function"
+                        ? client._defs.initialStorage?.getFactory(initialStorage)
+                        : client._defs.initialStorage,
             });
         });
 
@@ -183,17 +187,19 @@ export const createRoomBundle = <
         const rerender = useRerender();
         const { room: mockedRoom } = useContext(MockedRoomContext);
 
-        const [room] = useState<PluvRoom<TIO, TMetadata, TPresence, TStorage>>(() => {
-            return client.createRoom<TPresence, TStorage>(_room, {
+        const [room] = useState<PluvRoom<TIO, TMetadata, TPresence, TStorage, TEvents>>(() => {
+            return client.createRoom(_room, {
                 addons: options.addons,
                 debug,
                 initialPresence,
                 initialStorage:
-                    typeof initialStorage === "function" ? _initialStorage.getFactory(initialStorage) : _initialStorage,
+                    typeof initialStorage === "function"
+                        ? client._defs.initialStorage?.getFactory(initialStorage)
+                        : client._defs.initialStorage,
                 metadata,
-                presence: options.presence,
                 onAuthorizationFail,
-            } as PluvRoomOptions<TIO, TMetadata, TPresence, TStorage>);
+                router: options.router,
+            } as CreateRoomOptions<TIO, TPresence, TStorage, TMetadata, TEvents>);
         });
 
         useEffect(() => {
@@ -221,24 +227,31 @@ export const createRoomBundle = <
 
     const useRoom = () => useContext(PluvRoomContext);
 
-    const useBroadcast = (): BroadcastProxy<TIO> => {
+    const useBroadcast = (): BroadcastProxy<MergeEvents<TEvents, TIO>> => {
         const room = useRoom();
 
         const broadcast = useCallback(
-            <TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => {
+            <TEvent extends keyof InferIOInput<MergeEvents<TEvents, TIO>>>(
+                event: TEvent,
+                data: Id<InferIOInput<MergeEvents<TEvents, TIO>>[TEvent]>,
+            ) => {
                 room.broadcast(event, data);
             },
             [room],
         );
 
-        return useMemo((): BroadcastProxy<TIO> => {
+        return useMemo((): BroadcastProxy<MergeEvents<TEvents, 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);
+                    return (
+                        data: Id<
+                            InferIOInput<MergeEvents<TEvents, TIO>>[keyof InferIOInput<MergeEvents<TEvents, TIO>>]
+                        >,
+                    ): void => {
+                        return fn(prop as keyof InferIOInput<MergeEvents<TEvents, TIO>>, data);
                     };
                 },
-            }) as BroadcastProxy<TIO>;
+            }) as BroadcastProxy<MergeEvents<TEvents, TIO>>;
         }, [broadcast]);
     };
 
@@ -298,9 +311,9 @@ export const createRoomBundle = <
         return room.getDoc();
     };
 
-    const useEvent = <TType extends keyof InferIOOutput<TIO>>(
+    const useEvent = <TType extends keyof InferIOOutput<MergeEvents<TEvents, TIO>>>(
         type: TType,
-        callback: (data: Id<IOEventMessage<TIO, TType>>) => void,
+        callback: (data: Id<IOEventMessage<MergeEvents<TEvents, TIO>, TType>>) => void,
     ): void => {
         const room = useRoom();
 
@@ -318,15 +331,19 @@ export const createRoomBundle = <
         {
             get(_, prop) {
                 const useProxyEvent = (
-                    callback: (data: Id<IOEventMessage<TIO, keyof InferIOOutput<TIO>>>) => void,
+                    callback: (
+                        data: Id<
+                            IOEventMessage<MergeEvents<TEvents, TIO>, keyof InferIOOutput<MergeEvents<TEvents, TIO>>>
+                        >,
+                    ) => void,
                 ): void => {
-                    return useEvent(prop as keyof InferIOOutput<TIO>, callback);
+                    return useEvent(prop as keyof InferIOOutput<MergeEvents<TEvents, TIO>>, callback);
                 };
 
                 return { useEvent: useProxyEvent };
             },
         },
-    ) as EventProxy<TIO>;
+    ) as EventProxy<MergeEvents<TEvents, TIO>>;
 
     const useMyPresence = <T extends unknown = TPresence>(
         selector = identity as (myPresence: TPresence) => T,

package/src/internal/hooks/useSyncExternalStoreWithSelector.ts

@@ -26,7 +26,7 @@ export const useSyncExternalStoreWithSelector = <TSnapshot, TSelection>(
                * @description Memoize only the last snapshot so that we can only rerender on changes
                * @date June 22, 2024
                */
-              cacheRef.current = isUnchanged ? cached ?? snapshot : snapshot;
+              cacheRef.current = isUnchanged ? (cached ?? snapshot) : snapshot;
 
               return cacheRef.current;
           }
@@ -45,7 +45,7 @@ export const useSyncExternalStoreWithSelector = <TSnapshot, TSelection>(
          * @description Memoize only the last snapshot so that we can only rerender on changes
          * @date June 22, 2024
          */
-        cacheRef.current = isUnchanged ? cached ?? snapshot : snapshot;
+        cacheRef.current = isUnchanged ? (cached ?? snapshot) : snapshot;
 
         return cacheRef.current;
     };

package/src/internal/index.ts

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