@pluv/react 2.0.2 → 2.2.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/react@2.0.2 build /home/runner/work/pluv/pluv/packages/react
+> @pluv/react@2.2.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 16.73 KB
-ESM ⚡️ Build success in 122ms
-CJS dist/index.js 19.10 KB
-CJS ⚡️ Build success in 124ms
+ESM dist/index.mjs 17.27 KB
+ESM ⚡️ Build success in 86ms
+CJS dist/index.js 19.66 KB
+CJS ⚡️ Build success in 86ms
 DTS Build start
-DTS ⚡️ Build success in 6265ms
-DTS dist/index.d.mts 5.70 KB
-DTS dist/index.d.ts  5.70 KB
+DTS ⚡️ Build success in 6218ms
+DTS dist/index.d.mts 6.00 KB
+DTS dist/index.d.ts  6.00 KB

package/CHANGELOG.md

@@ -1,5 +1,81 @@
 # @pluv/react
 
+## 2.2.0
+
+### Minor Changes
+
+- 3ce1547: Updated typings for `useDoc` to be narrower to get the native doc type.
+
+  ```ts
+  import { createClient } from "@pluv/client";
+  import { yjs } from "@pluv/crdt-yjs";
+  import { createBundle } from "@pluv/react";
+  import type { Doc as YDoc } from "yjs";
+
+  const client = createClient({
+    // ...
+    crdt: yjs,
+  });
+  const { useDoc } = createBundle(client);
+
+  const doc = useDoc();
+
+  // This is now typed as the native YDoc
+  doc.value;
+  //  ^? const value: YDoc
+  ```
+
+- b999c1c: Added a new type `InferBundleRoom` to get the type of the `PluvRoom` from the react bundle that is created.
+
+  ```ts
+  import { createClient } from "@pluv/client";
+  import type { InferBundleRoom } from "@pluv/react";
+  import { createBundle } from "@pluv/react";
+
+  const client = createclient({
+    /* ... */
+  });
+
+  const bundle = createBundle(client);
+
+  type RoomType = InferBundleRoom<typeof bundle>;
+
+  const { useStorage } = bundle;
+  ```
+
+### Patch Changes
+
+- cb660cd: Fixed the room not changing if the room name was changed on the `PluvRoomProvider` without first unmounting the component.
+- 4916c27: Fixed `useConnection` requiring a selector function (this is now optional).
+- 48191fa: Fixed `useDoc` not returning a stable doc reference for a single connection.
+- Updated dependencies [3ce1547]
+- Updated dependencies [fd3bfe2]
+- Updated dependencies [aee40cb]
+- Updated dependencies [edd1789]
+- Updated dependencies [48191fa]
+  - @pluv/client@2.2.0
+  - @pluv/crdt@2.2.0
+  - @pluv/types@2.2.0
+
+## 2.1.0
+
+### Minor Changes
+
+- 8931f7b: Moved `@pluv/client` from `peerDependencies` to `dependencies` due to an unfortunate [changesets design decision](https://github.com/changesets/changesets/issues/1011).
+
+### Patch Changes
+
+- e8d8fbc: Updated the internals of various hooks to use the new `PluvRoom.subscribe` object.
+- Updated dependencies [e8d8fbc]
+- Updated dependencies [a86ff5e]
+- Updated dependencies [d5ac29e]
+- Updated dependencies [5ca5cb6]
+- Updated dependencies [4acbe1e]
+- Updated dependencies [e8d8fbc]
+  - @pluv/client@2.1.0
+  - @pluv/crdt@2.1.0
+  - @pluv/types@2.1.0
+
 ## 2.0.2
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,12 +1,12 @@
-import { PluvRouterEventConfig, PluvClient, PluvRoomAddon, PluvRouter, MockedRoomEvents, MergeEvents, PluvRoomDebug, WebSocketConnection, UserInfo } from '@pluv/client';
-import { AbstractCrdtDocFactory, NoopCrdtDocFactory, InferStorage, InferInitialStorageFn, InferCrdtJson } from '@pluv/crdt';
-import { IOLike, JsonObject, MaybePromise, InferIOOutput, Id, IOEventMessage, InferIOInput, CrdtDocLike, RoomLike } from '@pluv/types';
+import { PluvRouterEventConfig, MockedRoomEvents, MergeEvents, PluvRoomDebug, PluvClient, WebSocketConnection, UserInfo, PluvRoomAddon, PluvRouter } from '@pluv/client';
+import { AbstractCrdtDocFactory, NoopCrdtDocFactory, InferStorage, InferInitialStorageFn, InferDoc, InferCrdtJson } from '@pluv/crdt';
+import { IOLike, JsonObject, MaybePromise, InferIOOutput, Id, IOEventMessage, InferIOInput, CrdtDocLike, UpdateMyPresenceAction, RoomLike } from '@pluv/types';
 import { FC, ReactNode, Dispatch } from 'react';
 
 interface PluvProviderProps {
     children?: ReactNode;
 }
-type BaseRoomProviderProps<TPresence extends JsonObject, TCrdt extends AbstractCrdtDocFactory<any>> = {
+type BaseRoomProviderProps<TPresence extends Record<string, any>, TCrdt extends AbstractCrdtDocFactory<any, any>> = {
     children?: ReactNode;
     initialStorage?: keyof InferStorage<TCrdt> extends never ? never : InferInitialStorageFn<TCrdt>;
     room: string;
@@ -15,11 +15,19 @@ type BaseRoomProviderProps<TPresence extends JsonObject, TCrdt extends AbstractC
 } : {
     initialPresence: TPresence;
 });
-type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TCrdt extends AbstractCrdtDocFactory<any>, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> = BaseRoomProviderProps<TPresence, TCrdt> & {
+type MockedRoomProviderProps<TIO extends IOLike, TPresence extends Record<string, any>, TCrdt extends AbstractCrdtDocFactory<any, any>, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> = BaseRoomProviderProps<TPresence, TCrdt> & {
     events?: MockedRoomEvents<MergeEvents<TEvents, TIO>>;
 };
+type BroadcastProxy<TIO extends IOLike> = (<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void) & {
+    [event in keyof InferIOInput<TIO>]: (input: Id<InferIOInput<TIO>[event]>) => void;
+};
+type EventProxy<TIO extends IOLike> = {
+    [event in keyof InferIOOutput<TIO>]: {
+        useEvent: (callback: (data: Id<IOEventMessage<TIO, event>>) => void) => void;
+    };
+};
 type MetadataGetter<TMetadata extends JsonObject> = TMetadata | (() => MaybePromise<TMetadata>);
-type PluvRoomProviderProps<TIO extends IOLike<any, any>, TMetadata extends JsonObject, TPresence extends JsonObject, TCrdt extends AbstractCrdtDocFactory<any>> = BaseRoomProviderProps<TPresence, TCrdt> & {
+type PluvRoomProviderProps<TIO extends IOLike<any, any>, TMetadata extends JsonObject, TPresence extends Record<string, any>, TCrdt extends AbstractCrdtDocFactory<any, any>> = BaseRoomProviderProps<TPresence, TCrdt> & {
     connect?: boolean;
     debug?: boolean | PluvRoomDebug<TIO>;
     onAuthorizationFail?: (error: Error) => void;
@@ -31,16 +39,7 @@ type PluvRoomProviderProps<TIO extends IOLike<any, any>, TMetadata extends JsonO
 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>]: (input: 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 CreateBundle<TIO extends IOLike, TMetadata extends JsonObject, TPresence extends JsonObject = {}, TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> {
+interface CreateBundle<TIO extends IOLike<any>, TMetadata extends JsonObject, TPresence extends Record<string, any> = {}, TCrdt extends AbstractCrdtDocFactory<any, any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> {
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TCrdt>>;
     PluvProvider: FC<PluvProviderProps>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TMetadata, TPresence, TCrdt>>;
@@ -49,23 +48,25 @@ interface CreateBundle<TIO extends IOLike, TMetadata extends JsonObject, TPresen
     useCanRedo: () => boolean;
     useCanUndo: () => boolean;
     useClient: () => PluvClient<TIO, TPresence, TCrdt, TMetadata>;
-    useConnection: <T extends unknown = WebSocketConnection>(selector: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
-    useDoc: () => CrdtDocLike<InferStorage<TCrdt>>;
+    useConnection: <T extends unknown = WebSocketConnection>(selector?: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
+    useDoc: () => CrdtDocLike<InferDoc<TCrdt>, InferStorage<TCrdt>>;
     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;
     useOthers: <T extends unknown = readonly UserInfo<TIO, TPresence>[]>(selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T, options?: SubscriptionHookOptions<T>) => T;
     useRedo: () => () => void;
-    useRoom: () => RoomLike<TIO, TPresence, InferStorage<TCrdt>>;
+    useRoom: () => RoomLike<TIO, InferDoc<TCrdt>, TPresence, InferStorage<TCrdt>, TEvents>;
     useStorage: <TKey extends keyof InferStorage<TCrdt>, TData extends unknown = InferCrdtJson<InferStorage<TCrdt>[TKey]>>(key: TKey, selector?: (data: InferCrdtJson<InferStorage<TCrdt>[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: InferStorage<TCrdt>[TKey] | null];
     useTransact: () => (fn: (storage: InferStorage<TCrdt>) => void, origin?: string) => void;
     useUndo: () => () => void;
 }
-type CreateBundleOptions<TIO extends IOLike, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> = {
+type InferBundleRoom<TBundle extends CreateBundle<any, any, any, any, any>> = TBundle extends CreateBundle<infer IIO, any, infer IPresence, infer ICrdt, infer IEvents> ? RoomLike<IIO, InferDoc<ICrdt>, IPresence, InferStorage<ICrdt>, IEvents> : never;
+
+type CreateBundleOptions<TIO extends IOLike<any>, TMetadata extends JsonObject = {}, TPresence extends Record<string, any> = {}, TCrdt extends AbstractCrdtDocFactory<any, any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> = {
     addons?: readonly PluvRoomAddon<TIO, TMetadata, TPresence, TCrdt>[];
     router?: PluvRouter<TIO, TPresence, InferStorage<TCrdt>, TEvents>;
 };
-declare const createBundle: <TIO extends IOLike<any, any>, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}>(client: PluvClient<TIO, TPresence, TCrdt, TMetadata>, options?: CreateBundleOptions<TIO, TMetadata, TPresence, TCrdt, TEvents>) => CreateBundle<TIO, TMetadata, TPresence, TCrdt, TEvents>;
+declare const createBundle: <TIO extends IOLike<any, any>, TMetadata extends JsonObject = {}, TPresence extends Record<string, any> = {}, TCrdt extends AbstractCrdtDocFactory<any, any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}>(client: PluvClient<TIO, TPresence, TCrdt, TMetadata>, options?: CreateBundleOptions<TIO, TMetadata, TPresence, TCrdt, TEvents>) => CreateBundle<TIO, TMetadata, TPresence, TCrdt, TEvents>;
 
-export { type CreateBundle, type EventProxy, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };
+export { type CreateBundle, type EventProxy, type InferBundleRoom, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };

package/dist/index.d.ts

@@ -1,12 +1,12 @@
-import { PluvRouterEventConfig, PluvClient, PluvRoomAddon, PluvRouter, MockedRoomEvents, MergeEvents, PluvRoomDebug, WebSocketConnection, UserInfo } from '@pluv/client';
-import { AbstractCrdtDocFactory, NoopCrdtDocFactory, InferStorage, InferInitialStorageFn, InferCrdtJson } from '@pluv/crdt';
-import { IOLike, JsonObject, MaybePromise, InferIOOutput, Id, IOEventMessage, InferIOInput, CrdtDocLike, RoomLike } from '@pluv/types';
+import { PluvRouterEventConfig, MockedRoomEvents, MergeEvents, PluvRoomDebug, PluvClient, WebSocketConnection, UserInfo, PluvRoomAddon, PluvRouter } from '@pluv/client';
+import { AbstractCrdtDocFactory, NoopCrdtDocFactory, InferStorage, InferInitialStorageFn, InferDoc, InferCrdtJson } from '@pluv/crdt';
+import { IOLike, JsonObject, MaybePromise, InferIOOutput, Id, IOEventMessage, InferIOInput, CrdtDocLike, UpdateMyPresenceAction, RoomLike } from '@pluv/types';
 import { FC, ReactNode, Dispatch } from 'react';
 
 interface PluvProviderProps {
     children?: ReactNode;
 }
-type BaseRoomProviderProps<TPresence extends JsonObject, TCrdt extends AbstractCrdtDocFactory<any>> = {
+type BaseRoomProviderProps<TPresence extends Record<string, any>, TCrdt extends AbstractCrdtDocFactory<any, any>> = {
     children?: ReactNode;
     initialStorage?: keyof InferStorage<TCrdt> extends never ? never : InferInitialStorageFn<TCrdt>;
     room: string;
@@ -15,11 +15,19 @@ type BaseRoomProviderProps<TPresence extends JsonObject, TCrdt extends AbstractC
 } : {
     initialPresence: TPresence;
 });
-type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TCrdt extends AbstractCrdtDocFactory<any>, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> = BaseRoomProviderProps<TPresence, TCrdt> & {
+type MockedRoomProviderProps<TIO extends IOLike, TPresence extends Record<string, any>, TCrdt extends AbstractCrdtDocFactory<any, any>, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> = BaseRoomProviderProps<TPresence, TCrdt> & {
     events?: MockedRoomEvents<MergeEvents<TEvents, TIO>>;
 };
+type BroadcastProxy<TIO extends IOLike> = (<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void) & {
+    [event in keyof InferIOInput<TIO>]: (input: Id<InferIOInput<TIO>[event]>) => void;
+};
+type EventProxy<TIO extends IOLike> = {
+    [event in keyof InferIOOutput<TIO>]: {
+        useEvent: (callback: (data: Id<IOEventMessage<TIO, event>>) => void) => void;
+    };
+};
 type MetadataGetter<TMetadata extends JsonObject> = TMetadata | (() => MaybePromise<TMetadata>);
-type PluvRoomProviderProps<TIO extends IOLike<any, any>, TMetadata extends JsonObject, TPresence extends JsonObject, TCrdt extends AbstractCrdtDocFactory<any>> = BaseRoomProviderProps<TPresence, TCrdt> & {
+type PluvRoomProviderProps<TIO extends IOLike<any, any>, TMetadata extends JsonObject, TPresence extends Record<string, any>, TCrdt extends AbstractCrdtDocFactory<any, any>> = BaseRoomProviderProps<TPresence, TCrdt> & {
     connect?: boolean;
     debug?: boolean | PluvRoomDebug<TIO>;
     onAuthorizationFail?: (error: Error) => void;
@@ -31,16 +39,7 @@ type PluvRoomProviderProps<TIO extends IOLike<any, any>, TMetadata extends JsonO
 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>]: (input: 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 CreateBundle<TIO extends IOLike, TMetadata extends JsonObject, TPresence extends JsonObject = {}, TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> {
+interface CreateBundle<TIO extends IOLike<any>, TMetadata extends JsonObject, TPresence extends Record<string, any> = {}, TCrdt extends AbstractCrdtDocFactory<any, any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> {
     MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TCrdt>>;
     PluvProvider: FC<PluvProviderProps>;
     PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TMetadata, TPresence, TCrdt>>;
@@ -49,23 +48,25 @@ interface CreateBundle<TIO extends IOLike, TMetadata extends JsonObject, TPresen
     useCanRedo: () => boolean;
     useCanUndo: () => boolean;
     useClient: () => PluvClient<TIO, TPresence, TCrdt, TMetadata>;
-    useConnection: <T extends unknown = WebSocketConnection>(selector: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
-    useDoc: () => CrdtDocLike<InferStorage<TCrdt>>;
+    useConnection: <T extends unknown = WebSocketConnection>(selector?: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
+    useDoc: () => CrdtDocLike<InferDoc<TCrdt>, InferStorage<TCrdt>>;
     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;
     useOthers: <T extends unknown = readonly UserInfo<TIO, TPresence>[]>(selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T, options?: SubscriptionHookOptions<T>) => T;
     useRedo: () => () => void;
-    useRoom: () => RoomLike<TIO, TPresence, InferStorage<TCrdt>>;
+    useRoom: () => RoomLike<TIO, InferDoc<TCrdt>, TPresence, InferStorage<TCrdt>, TEvents>;
     useStorage: <TKey extends keyof InferStorage<TCrdt>, TData extends unknown = InferCrdtJson<InferStorage<TCrdt>[TKey]>>(key: TKey, selector?: (data: InferCrdtJson<InferStorage<TCrdt>[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: InferStorage<TCrdt>[TKey] | null];
     useTransact: () => (fn: (storage: InferStorage<TCrdt>) => void, origin?: string) => void;
     useUndo: () => () => void;
 }
-type CreateBundleOptions<TIO extends IOLike, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> = {
+type InferBundleRoom<TBundle extends CreateBundle<any, any, any, any, any>> = TBundle extends CreateBundle<infer IIO, any, infer IPresence, infer ICrdt, infer IEvents> ? RoomLike<IIO, InferDoc<ICrdt>, IPresence, InferStorage<ICrdt>, IEvents> : never;
+
+type CreateBundleOptions<TIO extends IOLike<any>, TMetadata extends JsonObject = {}, TPresence extends Record<string, any> = {}, TCrdt extends AbstractCrdtDocFactory<any, any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}> = {
     addons?: readonly PluvRoomAddon<TIO, TMetadata, TPresence, TCrdt>[];
     router?: PluvRouter<TIO, TPresence, InferStorage<TCrdt>, TEvents>;
 };
-declare const createBundle: <TIO extends IOLike<any, any>, TMetadata extends JsonObject = {}, TPresence extends JsonObject = {}, TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}>(client: PluvClient<TIO, TPresence, TCrdt, TMetadata>, options?: CreateBundleOptions<TIO, TMetadata, TPresence, TCrdt, TEvents>) => CreateBundle<TIO, TMetadata, TPresence, TCrdt, TEvents>;
+declare const createBundle: <TIO extends IOLike<any, any>, TMetadata extends JsonObject = {}, TPresence extends Record<string, any> = {}, TCrdt extends AbstractCrdtDocFactory<any, any> = NoopCrdtDocFactory, TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {}>(client: PluvClient<TIO, TPresence, TCrdt, TMetadata>, options?: CreateBundleOptions<TIO, TMetadata, TPresence, TCrdt, TEvents>) => CreateBundle<TIO, TMetadata, TPresence, TCrdt, TEvents>;
 
-export { type CreateBundle, type EventProxy, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };
+export { type CreateBundle, type EventProxy, type InferBundleRoom, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };

package/dist/index.js

@@ -225,12 +225,8 @@ var useSyncExternalStoreWithSelector = (subscribe, getClientSnapshot, getServerS
 var import_jsx_runtime = require("react/jsx-runtime");
 var createBundle = (client, options = {}) => {
   const PluvContext = (0, import_react6.createContext)(null);
-  const PluvRoomContext = (0, import_react6.createContext)(
-    null
-  );
-  const MockedRoomContext = (0, import_react6.createContext)(
-    null
-  );
+  const PluvRoomContext = (0, import_react6.createContext)(null);
+  const MockedRoomContext = (0, import_react6.createContext)(null);
   const MockedRoomProvider = (0, import_react6.memo)((props) => {
     const { children, events, initialPresence, initialStorage, room: _room } = props;
     const [room] = (0, import_react6.useState)(() => {
@@ -265,7 +261,7 @@ var createBundle = (client, options = {}) => {
         );
         return !!room.metadata ? room.metadata.parse(resolved) : resolved;
       }));
-      const [room] = (0, import_react6.useState)(() => {
+      const createRoom = (0, import_react6.useCallback)(() => {
         var _a;
         return client.createRoom(_room, {
           addons: options.addons,
@@ -276,9 +272,14 @@ var createBundle = (client, options = {}) => {
           onAuthorizationFail,
           router: options.router
         });
-      });
+      }, [_room, debug, initialPresence, initialStorage, metadata, onAuthorizationFail]);
+      const [room, setRoom] = (0, import_react6.useState)(() => createRoom());
       (0, import_react6.useEffect)(() => {
-        const unsubscribe = room.subscribe("connection", () => {
+        if (room.id === _room) return;
+        setRoom(createRoom());
+      }, [_room, createRoom, room]);
+      (0, import_react6.useEffect)(() => {
+        const unsubscribe = room.subscribe.connection(() => {
           rerender();
         });
         return () => {
@@ -351,7 +352,7 @@ var createBundle = (client, options = {}) => {
   const useCanRedo = () => {
     const room = useRoom();
     const subscribe = (0, import_react6.useCallback)(
-      (onStoreChange) => room.storageRoot(onStoreChange),
+      (onStoreChange) => room.subscribe.storage(onStoreChange),
       [room]
     );
     const getSnapshot = (0, import_react6.useCallback)(() => room.canRedo(), [room]);
@@ -366,7 +367,7 @@ var createBundle = (client, options = {}) => {
   const useCanUndo = () => {
     const room = useRoom();
     const subscribe = (0, import_react6.useCallback)(
-      (onStoreChange) => room.storageRoot(onStoreChange),
+      (onStoreChange) => room.subscribe.storage(onStoreChange),
       [room]
     );
     const getSnapshot = (0, import_react6.useCallback)(() => room.canUndo(), [room]);
@@ -383,7 +384,7 @@ var createBundle = (client, options = {}) => {
     const room = useRoom();
     const subscribe = (0, import_react6.useCallback)(
       (onStoreChange) => {
-        return room.subscribe("connection", onStoreChange);
+        return room.subscribe.connection(onStoreChange);
       },
       [room]
     );
@@ -402,12 +403,19 @@ var createBundle = (client, options = {}) => {
   };
   const useDoc = () => {
     const room = useRoom();
-    return room.getDoc();
+    const subscribe = (0, import_react6.useCallback)(
+      (onStoreChange) => {
+        return room.subscribe.storageLoaded(onStoreChange);
+      },
+      [room]
+    );
+    const getSnapshot = room.getDoc;
+    return (0, import_react6.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
   };
   const useEvent = (type, callback) => {
     const room = useRoom();
     (0, import_react6.useEffect)(() => {
-      const unsubscribe = room.event(type, callback);
+      const unsubscribe = room.subscribe.event(type, callback);
       return () => {
         unsubscribe();
       };
@@ -432,7 +440,7 @@ var createBundle = (client, options = {}) => {
     const room = useRoom();
     const subscribe = (0, import_react6.useCallback)(
       (onStoreChange) => {
-        return room.subscribe("my-presence", onStoreChange);
+        return room.subscribe.myPresence(onStoreChange);
       },
       [room]
     );
@@ -455,7 +463,7 @@ var createBundle = (client, options = {}) => {
     const room = useRoom();
     const subscribe = (0, import_react6.useCallback)(
       (onStoreChange) => {
-        return room.subscribe("myself", onStoreChange);
+        return room.subscribe.myself(onStoreChange);
       },
       [room]
     );
@@ -478,9 +486,7 @@ var createBundle = (client, options = {}) => {
     var _a;
     const room = useRoom();
     const subscribe = (0, import_react6.useCallback)(
-      (onStoreChange) => {
-        return room.other(connectionId, onStoreChange);
-      },
+      (onStoreChange) => room.subscribe.other(connectionId, onStoreChange),
       [room, connectionId]
     );
     const getSnapshot = (0, import_react6.useCallback)(() => room.getOther(connectionId), [room, connectionId]);
@@ -503,7 +509,7 @@ var createBundle = (client, options = {}) => {
     const room = useRoom();
     const subscribe = (0, import_react6.useCallback)(
       (onStoreChange) => {
-        return room.subscribe("others", onStoreChange);
+        return room.subscribe.others(onStoreChange);
       },
       [room]
     );
@@ -529,11 +535,11 @@ var createBundle = (client, options = {}) => {
     var _a, _b;
     const room = useRoom();
     const rerender = useRerender();
-    room.subscribe("storage-loaded", () => {
+    room.subscribe.storageLoaded(() => {
       rerender();
     });
     const subscribe = (0, import_react6.useCallback)(
-      (onStoreChange) => room.storage(key, onStoreChange),
+      (onStoreChange) => room.subscribe.storage(key, onStoreChange),
       [key, room]
     );
     const getSnapshot = (0, import_react6.useCallback)(() => {

package/dist/index.mjs

@@ -41,7 +41,16 @@ var __async = (__this, __arguments, generator) => {
 // src/createBundle.tsx
 import { MockedRoom } from "@pluv/client";
 import fastDeepEqual2 from "fast-deep-equal";
-import { createContext, memo, useCallback as useCallback4, useContext, useEffect as useEffect3, useMemo as useMemo2, useState as useState4 } from "react";
+import {
+  createContext,
+  memo,
+  useCallback as useCallback4,
+  useContext,
+  useEffect as useEffect3,
+  useMemo as useMemo2,
+  useState as useState4,
+  useSyncExternalStore as useSyncExternalStore2
+} from "react";
 
 // src/internal/hooks/useAsyncQueue.ts
 import { useCallback, useMemo, useRef } from "react";
@@ -192,12 +201,8 @@ var useSyncExternalStoreWithSelector = (subscribe, getClientSnapshot, getServerS
 import { jsx } from "react/jsx-runtime";
 var createBundle = (client, options = {}) => {
   const PluvContext = createContext(null);
-  const PluvRoomContext = createContext(
-    null
-  );
-  const MockedRoomContext = createContext(
-    null
-  );
+  const PluvRoomContext = createContext(null);
+  const MockedRoomContext = createContext(null);
   const MockedRoomProvider = memo((props) => {
     const { children, events, initialPresence, initialStorage, room: _room } = props;
     const [room] = useState4(() => {
@@ -232,7 +237,7 @@ var createBundle = (client, options = {}) => {
         );
         return !!room.metadata ? room.metadata.parse(resolved) : resolved;
       }));
-      const [room] = useState4(() => {
+      const createRoom = useCallback4(() => {
         var _a;
         return client.createRoom(_room, {
           addons: options.addons,
@@ -243,9 +248,14 @@ var createBundle = (client, options = {}) => {
           onAuthorizationFail,
           router: options.router
         });
-      });
+      }, [_room, debug, initialPresence, initialStorage, metadata, onAuthorizationFail]);
+      const [room, setRoom] = useState4(() => createRoom());
       useEffect3(() => {
-        const unsubscribe = room.subscribe("connection", () => {
+        if (room.id === _room) return;
+        setRoom(createRoom());
+      }, [_room, createRoom, room]);
+      useEffect3(() => {
+        const unsubscribe = room.subscribe.connection(() => {
           rerender();
         });
         return () => {
@@ -318,7 +328,7 @@ var createBundle = (client, options = {}) => {
   const useCanRedo = () => {
     const room = useRoom();
     const subscribe = useCallback4(
-      (onStoreChange) => room.storageRoot(onStoreChange),
+      (onStoreChange) => room.subscribe.storage(onStoreChange),
       [room]
     );
     const getSnapshot = useCallback4(() => room.canRedo(), [room]);
@@ -333,7 +343,7 @@ var createBundle = (client, options = {}) => {
   const useCanUndo = () => {
     const room = useRoom();
     const subscribe = useCallback4(
-      (onStoreChange) => room.storageRoot(onStoreChange),
+      (onStoreChange) => room.subscribe.storage(onStoreChange),
       [room]
     );
     const getSnapshot = useCallback4(() => room.canUndo(), [room]);
@@ -350,7 +360,7 @@ var createBundle = (client, options = {}) => {
     const room = useRoom();
     const subscribe = useCallback4(
       (onStoreChange) => {
-        return room.subscribe("connection", onStoreChange);
+        return room.subscribe.connection(onStoreChange);
       },
       [room]
     );
@@ -369,12 +379,19 @@ var createBundle = (client, options = {}) => {
   };
   const useDoc = () => {
     const room = useRoom();
-    return room.getDoc();
+    const subscribe = useCallback4(
+      (onStoreChange) => {
+        return room.subscribe.storageLoaded(onStoreChange);
+      },
+      [room]
+    );
+    const getSnapshot = room.getDoc;
+    return useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
   };
   const useEvent = (type, callback) => {
     const room = useRoom();
     useEffect3(() => {
-      const unsubscribe = room.event(type, callback);
+      const unsubscribe = room.subscribe.event(type, callback);
       return () => {
         unsubscribe();
       };
@@ -399,7 +416,7 @@ var createBundle = (client, options = {}) => {
     const room = useRoom();
     const subscribe = useCallback4(
       (onStoreChange) => {
-        return room.subscribe("my-presence", onStoreChange);
+        return room.subscribe.myPresence(onStoreChange);
       },
       [room]
     );
@@ -422,7 +439,7 @@ var createBundle = (client, options = {}) => {
     const room = useRoom();
     const subscribe = useCallback4(
       (onStoreChange) => {
-        return room.subscribe("myself", onStoreChange);
+        return room.subscribe.myself(onStoreChange);
       },
       [room]
     );
@@ -445,9 +462,7 @@ var createBundle = (client, options = {}) => {
     var _a;
     const room = useRoom();
     const subscribe = useCallback4(
-      (onStoreChange) => {
-        return room.other(connectionId, onStoreChange);
-      },
+      (onStoreChange) => room.subscribe.other(connectionId, onStoreChange),
       [room, connectionId]
     );
     const getSnapshot = useCallback4(() => room.getOther(connectionId), [room, connectionId]);
@@ -470,7 +485,7 @@ var createBundle = (client, options = {}) => {
     const room = useRoom();
     const subscribe = useCallback4(
       (onStoreChange) => {
-        return room.subscribe("others", onStoreChange);
+        return room.subscribe.others(onStoreChange);
       },
       [room]
     );
@@ -496,11 +511,11 @@ var createBundle = (client, options = {}) => {
     var _a, _b;
     const room = useRoom();
     const rerender = useRerender();
-    room.subscribe("storage-loaded", () => {
+    room.subscribe.storageLoaded(() => {
       rerender();
     });
     const subscribe = useCallback4(
-      (onStoreChange) => room.storage(key, onStoreChange),
+      (onStoreChange) => room.subscribe.storage(key, onStoreChange),
       [key, room]
     );
     const getSnapshot = useCallback4(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/react",
-  "version": "2.0.2",
+  "version": "2.2.0",
   "description": "@pluv/client React.js bindings",
   "author": "leedavidcs",
   "license": "MIT",
@@ -18,23 +18,22 @@
   },
   "dependencies": {
     "fast-deep-equal": "^3.1.3",
-    "@pluv/crdt": "^2.0.2",
-    "@pluv/types": "^2.0.2"
+    "@pluv/client": "^2.2.0",
+    "@pluv/crdt": "^2.2.0",
+    "@pluv/types": "^2.2.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "@pluv/client": "^2.0.2"
+    "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.1.3",
+    "@types/react": "^19.1.4",
     "eslint": "^9.26.0",
     "react": "^19.1.0",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
-    "@pluv/client": "^2.0.2",
-    "@pluv/tsconfig": "^2.0.2",
-    "eslint-config-pluv": "^2.0.2"
+    "@pluv/tsconfig": "^2.2.0",
+    "eslint-config-pluv": "^2.2.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",

package/src/createBundle.tsx

@@ -2,37 +2,44 @@ import type {
     CreateRoomOptions,
     EnterRoomParams,
     MergeEvents,
-    MockedRoomEvents,
     PluvClient,
+    PluvRoom,
     PluvRoomAddon,
-    PluvRoomDebug,
     PluvRouter,
     PluvRouterEventConfig,
     UserInfo,
     WebSocketConnection,
 } from "@pluv/client";
-import { MockedRoom, PluvRoom } from "@pluv/client";
+import { MockedRoom } from "@pluv/client";
 import type {
     AbstractCrdtDocFactory,
     InferCrdtJson,
-    InferInitialStorageFn,
+    InferDoc,
     InferStorage,
     NoopCrdtDocFactory,
 } from "@pluv/crdt";
 import type {
-    CrdtDocLike,
     Id,
     InferIOInput,
     InferIOOutput,
     IOEventMessage,
     IOLike,
     JsonObject,
-    MaybePromise,
     RoomLike,
+    UpdateMyPresenceAction,
 } 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";
+import type { Dispatch } from "react";
+import {
+    createContext,
+    memo,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+    useSyncExternalStore,
+} from "react";
 import {
     identity,
     shallowArrayEqual,
@@ -41,132 +48,21 @@ import {
     useRerender,
     useSyncExternalStoreWithSelector,
 } from "./internal";
-
-export interface PluvProviderProps {
-    children?: ReactNode;
-}
-
-type BaseRoomProviderProps<
-    TPresence extends JsonObject,
-    TCrdt extends AbstractCrdtDocFactory<any>,
-> = {
-    children?: ReactNode;
-    initialStorage?: keyof InferStorage<TCrdt> extends never ? never : InferInitialStorageFn<TCrdt>;
-    room: string;
-} & (keyof TPresence extends never ? { initialPresence?: never } : { initialPresence: TPresence });
-
-export type MockedRoomProviderProps<
-    TIO extends IOLike,
-    TPresence extends JsonObject,
-    TCrdt extends AbstractCrdtDocFactory<any>,
-    TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {},
-> = BaseRoomProviderProps<TPresence, TCrdt> & {
-    events?: MockedRoomEvents<MergeEvents<TEvents, TIO>>;
-};
-
-export type MetadataGetter<TMetadata extends JsonObject> =
-    | TMetadata
-    | (() => MaybePromise<TMetadata>);
-
-export type PluvRoomProviderProps<
-    TIO extends IOLike<any, any>,
-    TMetadata extends JsonObject,
-    TPresence extends JsonObject,
-    TCrdt extends AbstractCrdtDocFactory<any>,
-> = BaseRoomProviderProps<TPresence, TCrdt> & {
-    connect?: boolean;
-    debug?: boolean | PluvRoomDebug<TIO>;
-    onAuthorizationFail?: (error: Error) => void;
-} & (keyof TMetadata extends never
-        ? { metadata?: undefined }
-        : { metadata: MetadataGetter<TMetadata> });
-
-export interface SubscriptionHookOptions<T extends unknown> {
-    isEqual?: (a: T, b: T) => boolean;
-}
-
-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>]: (input: 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 CreateBundle<
-    TIO extends IOLike,
-    TMetadata extends JsonObject,
-    TPresence extends JsonObject = {},
-    TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory,
-    TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {},
-> {
-    // components
-    MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TCrdt>>;
-    PluvProvider: FC<PluvProviderProps>;
-    PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TMetadata, TPresence, TCrdt>>;
-
-    // proxies
-    event: EventProxy<MergeEvents<TEvents, TIO>>;
-
-    // hooks
-    useBroadcast: () => BroadcastProxy<MergeEvents<TEvents, TIO>>;
-    useCanRedo: () => boolean;
-    useCanUndo: () => boolean;
-    useClient: () => PluvClient<TIO, TPresence, TCrdt, TMetadata>;
-    useConnection: <T extends unknown = WebSocketConnection>(
-        selector: (connection: WebSocketConnection) => T,
-        options?: SubscriptionHookOptions<Id<T>>,
-    ) => Id<T>;
-    useDoc: () => CrdtDocLike<InferStorage<TCrdt>>;
-    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;
-    useOthers: <T extends unknown = readonly UserInfo<TIO, TPresence>[]>(
-        selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T,
-        options?: SubscriptionHookOptions<T>,
-    ) => T;
-    useRedo: () => () => void;
-    useRoom: () => RoomLike<TIO, TPresence, InferStorage<TCrdt>>;
-    useStorage: <
-        TKey extends keyof InferStorage<TCrdt>,
-        TData extends unknown = InferCrdtJson<InferStorage<TCrdt>[TKey]>,
-    >(
-        key: TKey,
-        selector?: (data: InferCrdtJson<InferStorage<TCrdt>[TKey]>) => TData,
-        options?: SubscriptionHookOptions<TData | null>,
-    ) => [data: TData | null, sharedType: InferStorage<TCrdt>[TKey] | null];
-    useTransact: () => (fn: (storage: InferStorage<TCrdt>) => void, origin?: string) => void;
-    useUndo: () => () => void;
-}
+import type {
+    BroadcastProxy,
+    CreateBundle,
+    EventProxy,
+    MockedRoomProviderProps,
+    PluvProviderProps,
+    PluvRoomProviderProps,
+    SubscriptionHookOptions,
+} from "./types";
 
 export type CreateBundleOptions<
-    TIO extends IOLike,
+    TIO extends IOLike<any>,
     TMetadata extends JsonObject = {},
-    TPresence extends JsonObject = {},
-    TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory,
+    TPresence extends Record<string, any> = {},
+    TCrdt extends AbstractCrdtDocFactory<any, any> = NoopCrdtDocFactory,
     TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {},
 > = {
     addons?: readonly PluvRoomAddon<TIO, TMetadata, TPresence, TCrdt>[];
@@ -176,8 +72,8 @@ export type CreateBundleOptions<
 export const createBundle = <
     TIO extends IOLike<any, any>,
     TMetadata extends JsonObject = {},
-    TPresence extends JsonObject = {},
-    TCrdt extends AbstractCrdtDocFactory<any> = NoopCrdtDocFactory,
+    TPresence extends Record<string, any> = {},
+    TCrdt extends AbstractCrdtDocFactory<any, any> = NoopCrdtDocFactory,
     TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {},
 >(
     client: PluvClient<TIO, TPresence, TCrdt, TMetadata>,
@@ -197,13 +93,17 @@ export const createBundle = <
      * and let the users deal with it.
      * @date November 11, 2022
      */
-    const PluvRoomContext = createContext<RoomLike<TIO, TPresence, InferStorage<TCrdt>>>(
-        null as any,
-    );
-
-    const MockedRoomContext = createContext<RoomLike<TIO, TPresence, InferStorage<TCrdt>> | null>(
-        null,
-    );
+    const PluvRoomContext = createContext<
+        RoomLike<TIO, InferDoc<TCrdt>, TPresence, InferStorage<TCrdt>, TEvents>
+    >(null as any);
+
+    const MockedRoomContext = createContext<RoomLike<
+        TIO,
+        InferDoc<TCrdt>,
+        TPresence,
+        InferStorage<TCrdt>,
+        TEvents
+    > | null>(null);
 
     const MockedRoomProvider = memo<MockedRoomProviderProps<TIO, TPresence, TCrdt>>((props) => {
         const { children, events, initialPresence, initialStorage, room: _room } = props;
@@ -253,7 +153,13 @@ export const createBundle = <
                 return !!room.metadata ? room.metadata.parse(resolved) : resolved;
             });
 
-            const [room] = useState<PluvRoom<TIO, TMetadata, TPresence, TCrdt, TEvents>>(() => {
+            const createRoom = useCallback((): PluvRoom<
+                TIO,
+                TMetadata,
+                TPresence,
+                TCrdt,
+                TEvents
+            > => {
                 return client.createRoom(_room, {
                     addons: options.addons,
                     debug,
@@ -266,10 +172,18 @@ export const createBundle = <
                     onAuthorizationFail,
                     router: options.router,
                 } as CreateRoomOptions<TIO, TPresence, TCrdt, TMetadata, TEvents>);
-            });
+            }, [_room, debug, initialPresence, initialStorage, metadata, onAuthorizationFail]);
+
+            const [room, setRoom] = useState(() => createRoom());
 
             useEffect(() => {
-                const unsubscribe = room.subscribe("connection", () => {
+                if (room.id === _room) return;
+
+                setRoom(createRoom());
+            }, [_room, createRoom, room]);
+
+            useEffect(() => {
+                const unsubscribe = room.subscribe.connection(() => {
                     rerender();
                 });
 
@@ -378,7 +292,7 @@ export const createBundle = <
         const room = useRoom();
 
         const subscribe = useCallback(
-            (onStoreChange: () => void) => room.storageRoot(onStoreChange),
+            (onStoreChange: () => void) => room.subscribe.storage(onStoreChange),
             [room],
         );
 
@@ -398,7 +312,7 @@ export const createBundle = <
         const room = useRoom();
 
         const subscribe = useCallback(
-            (onStoreChange: () => void) => room.storageRoot(onStoreChange),
+            (onStoreChange: () => void) => room.subscribe.storage(onStoreChange),
             [room],
         );
 
@@ -422,7 +336,7 @@ export const createBundle = <
 
         const subscribe = useCallback(
             (onStoreChange: () => void) => {
-                return room.subscribe("connection", onStoreChange);
+                return room.subscribe.connection(onStoreChange);
             },
             [room],
         );
@@ -446,7 +360,16 @@ export const createBundle = <
     const useDoc = () => {
         const room = useRoom();
 
-        return room.getDoc();
+        const subscribe = useCallback(
+            (onStoreChange: () => void) => {
+                return room.subscribe.storageLoaded(onStoreChange);
+            },
+            [room],
+        );
+
+        const getSnapshot = room.getDoc;
+
+        return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
     };
 
     const useEvent = <TType extends keyof InferIOOutput<MergeEvents<TEvents, TIO>>>(
@@ -456,7 +379,7 @@ export const createBundle = <
         const room = useRoom();
 
         useEffect(() => {
-            const unsubscribe = room.event(type, callback);
+            const unsubscribe = room.subscribe.event(type, callback);
 
             return () => {
                 unsubscribe();
@@ -497,7 +420,7 @@ export const createBundle = <
 
         const subscribe = useCallback(
             (onStoreChange: () => void) => {
-                return room.subscribe("my-presence", onStoreChange);
+                return room.subscribe.myPresence(onStoreChange);
             },
             [room],
         );
@@ -528,7 +451,7 @@ export const createBundle = <
 
         const subscribe = useCallback(
             (onStoreChange: () => void) => {
-                return room.subscribe("myself", onStoreChange);
+                return room.subscribe.myself(onStoreChange);
             },
             [room],
         );
@@ -559,9 +482,7 @@ export const createBundle = <
         const room = useRoom();
 
         const subscribe = useCallback(
-            (onStoreChange: () => void) => {
-                return room.other(connectionId, onStoreChange);
-            },
+            (onStoreChange: () => void) => room.subscribe.other(connectionId, onStoreChange),
             [room, connectionId],
         );
 
@@ -591,7 +512,7 @@ export const createBundle = <
 
         const subscribe = useCallback(
             (onStoreChange: () => void) => {
-                return room.subscribe("others", onStoreChange);
+                return room.subscribe.others(onStoreChange);
             },
             [room],
         );
@@ -639,12 +560,12 @@ export const createBundle = <
         const room = useRoom();
         const rerender = useRerender();
 
-        room.subscribe("storage-loaded", () => {
+        room.subscribe.storageLoaded(() => {
             rerender();
         });
 
         const subscribe = useCallback(
-            (onStoreChange: () => void) => room.storage(key, onStoreChange),
+            (onStoreChange: () => void) => room.subscribe.storage(key, onStoreChange),
             [key, room],
         );
 

package/src/index.ts

@@ -2,7 +2,8 @@ export { createBundle } from "./createBundle";
 export type {
     CreateBundle,
     EventProxy,
+    InferBundleRoom,
     PluvProviderProps,
     PluvRoomProviderProps,
     SubscriptionHookOptions,
-} from "./createBundle";
+} from "./types";

package/src/types.ts

@@ -0,0 +1,151 @@
+import type {
+    MergeEvents,
+    MockedRoomEvents,
+    PluvClient,
+    PluvRoomDebug,
+    PluvRouterEventConfig,
+    UserInfo,
+    WebSocketConnection,
+} from "@pluv/client";
+import type {
+    AbstractCrdtDocFactory,
+    InferCrdtJson,
+    InferDoc,
+    InferInitialStorageFn,
+    InferStorage,
+    NoopCrdtDocFactory,
+} from "@pluv/crdt";
+import type {
+    CrdtDocLike,
+    Id,
+    InferIOInput,
+    InferIOOutput,
+    IOEventMessage,
+    IOLike,
+    JsonObject,
+    MaybePromise,
+    RoomLike,
+    UpdateMyPresenceAction,
+} from "@pluv/types";
+import type { Dispatch, FC, ReactNode } from "react";
+
+export interface PluvProviderProps {
+    children?: ReactNode;
+}
+
+type BaseRoomProviderProps<
+    TPresence extends Record<string, any>,
+    TCrdt extends AbstractCrdtDocFactory<any, any>,
+> = {
+    children?: ReactNode;
+    initialStorage?: keyof InferStorage<TCrdt> extends never ? never : InferInitialStorageFn<TCrdt>;
+    room: string;
+} & (keyof TPresence extends never ? { initialPresence?: never } : { initialPresence: TPresence });
+
+export type MockedRoomProviderProps<
+    TIO extends IOLike,
+    TPresence extends Record<string, any>,
+    TCrdt extends AbstractCrdtDocFactory<any, any>,
+    TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {},
+> = BaseRoomProviderProps<TPresence, TCrdt> & {
+    events?: MockedRoomEvents<MergeEvents<TEvents, TIO>>;
+};
+
+export type BroadcastProxy<TIO extends IOLike> = (<TEvent extends keyof InferIOInput<TIO>>(
+    event: TEvent,
+    data: Id<InferIOInput<TIO>[TEvent]>,
+) => void) & {
+    [event in keyof InferIOInput<TIO>]: (input: 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 type MetadataGetter<TMetadata extends JsonObject> =
+    | TMetadata
+    | (() => MaybePromise<TMetadata>);
+
+export type PluvRoomProviderProps<
+    TIO extends IOLike<any, any>,
+    TMetadata extends JsonObject,
+    TPresence extends Record<string, any>,
+    TCrdt extends AbstractCrdtDocFactory<any, any>,
+> = BaseRoomProviderProps<TPresence, TCrdt> & {
+    connect?: boolean;
+    debug?: boolean | PluvRoomDebug<TIO>;
+    onAuthorizationFail?: (error: Error) => void;
+} & (keyof TMetadata extends never
+        ? { metadata?: undefined }
+        : { metadata: MetadataGetter<TMetadata> });
+
+export interface SubscriptionHookOptions<T extends unknown> {
+    isEqual?: (a: T, b: T) => boolean;
+}
+
+export interface CreateBundle<
+    TIO extends IOLike<any>,
+    TMetadata extends JsonObject,
+    TPresence extends Record<string, any> = {},
+    TCrdt extends AbstractCrdtDocFactory<any, any> = NoopCrdtDocFactory,
+    TEvents extends PluvRouterEventConfig<TIO, TPresence, InferStorage<TCrdt>> = {},
+> {
+    // components
+    MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TCrdt>>;
+    PluvProvider: FC<PluvProviderProps>;
+    PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TMetadata, TPresence, TCrdt>>;
+
+    // proxies
+    event: EventProxy<MergeEvents<TEvents, TIO>>;
+
+    // hooks
+    useBroadcast: () => BroadcastProxy<MergeEvents<TEvents, TIO>>;
+    useCanRedo: () => boolean;
+    useCanUndo: () => boolean;
+    useClient: () => PluvClient<TIO, TPresence, TCrdt, TMetadata>;
+    useConnection: <T extends unknown = WebSocketConnection>(
+        selector?: (connection: WebSocketConnection) => T,
+        options?: SubscriptionHookOptions<Id<T>>,
+    ) => Id<T>;
+    useDoc: () => CrdtDocLike<InferDoc<TCrdt>, InferStorage<TCrdt>>;
+    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;
+    useOthers: <T extends unknown = readonly UserInfo<TIO, TPresence>[]>(
+        selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T,
+        options?: SubscriptionHookOptions<T>,
+    ) => T;
+    useRedo: () => () => void;
+    useRoom: () => RoomLike<TIO, InferDoc<TCrdt>, TPresence, InferStorage<TCrdt>, TEvents>;
+    useStorage: <
+        TKey extends keyof InferStorage<TCrdt>,
+        TData extends unknown = InferCrdtJson<InferStorage<TCrdt>[TKey]>,
+    >(
+        key: TKey,
+        selector?: (data: InferCrdtJson<InferStorage<TCrdt>[TKey]>) => TData,
+        options?: SubscriptionHookOptions<TData | null>,
+    ) => [data: TData | null, sharedType: InferStorage<TCrdt>[TKey] | null];
+    useTransact: () => (fn: (storage: InferStorage<TCrdt>) => void, origin?: string) => void;
+    useUndo: () => () => void;
+}
+
+export type InferBundleRoom<TBundle extends CreateBundle<any, any, any, any, any>> =
+    TBundle extends CreateBundle<infer IIO, any, infer IPresence, infer ICrdt, infer IEvents>
+        ? RoomLike<IIO, InferDoc<ICrdt>, IPresence, InferStorage<ICrdt>, IEvents>
+        : never;