@pluv/react 1.0.0 → 1.0.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/react@1.0.0 build /home/runner/work/pluv/pluv/packages/react
+> @pluv/react@1.0.2 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.35 KB
-ESM ⚡️ Build success in 114ms
-CJS dist/index.js 18.73 KB
-CJS ⚡️ Build success in 114ms
+ESM dist/index.mjs 16.71 KB
+ESM ⚡️ Build success in 88ms
+CJS dist/index.js 19.09 KB
+CJS ⚡️ Build success in 93ms
 DTS Build start
-DTS ⚡️ Build success in 6396ms
+DTS ⚡️ Build success in 5328ms
 DTS dist/index.d.mts 5.54 KB
 DTS dist/index.d.ts  5.54 KB

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @pluv/react
 
+## 1.0.2
+
+### Patch Changes
+
+- Updated dependencies [d87159c]
+  - @pluv/client@1.0.2
+  - @pluv/crdt@1.0.2
+  - @pluv/types@1.0.2
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies [c583be9]
+  - @pluv/client@1.0.1
+  - @pluv/crdt@1.0.1
+  - @pluv/types@1.0.1
+
 ## 1.0.0
 
 ### Major Changes

package/dist/index.js

@@ -240,73 +240,77 @@ var createBundle = (client, options = {}) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MockedRoomContext.Provider, { value: room, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PluvRoomContext.Provider, { value: room, children }) });
   });
   MockedRoomProvider.displayName = "MockedRoomProvider";
-  const PluvRoomProvider = (0, import_react6.memo)((props) => {
-    const {
-      children,
-      connect = true,
-      debug,
-      initialPresence,
-      initialStorage,
-      metadata,
-      onAuthorizationFail,
-      room: _room
-    } = props;
-    const queue = useAsyncQueue();
-    const rerender = useRerender();
-    const mockedRoom = (0, import_react6.useContext)(MockedRoomContext);
-    const resolvedMeta = useDeepAsyncMemo(() => __async(void 0, null, function* () {
-      const resolved = yield Promise.resolve(typeof metadata === "function" ? metadata() : metadata);
-      return !!room.metadata ? room.metadata.parse(resolved) : resolved;
-    }));
-    const [room] = (0, import_react6.useState)(() => {
-      var _a;
-      return client.createRoom(_room, {
-        addons: options.addons,
+  const PluvRoomProvider = (0, import_react6.memo)(
+    (props) => {
+      const {
+        children,
+        connect = true,
         debug,
         initialPresence,
-        initialStorage: typeof initialStorage === "function" ? (_a = client._defs.initialStorage) == null ? void 0 : _a.getFactory(initialStorage) : client._defs.initialStorage,
+        initialStorage,
         metadata,
         onAuthorizationFail,
-        router: options.router
-      });
-    });
-    (0, import_react6.useEffect)(() => {
-      const unsubscribe = room.subscribe("connection", () => {
-        rerender();
+        room: _room
+      } = props;
+      const queue = useAsyncQueue();
+      const rerender = useRerender();
+      const mockedRoom = (0, import_react6.useContext)(MockedRoomContext);
+      const resolvedMeta = useDeepAsyncMemo(() => __async(void 0, null, function* () {
+        const resolved = yield Promise.resolve(
+          typeof metadata === "function" ? metadata() : metadata
+        );
+        return !!room.metadata ? room.metadata.parse(resolved) : resolved;
+      }));
+      const [room] = (0, import_react6.useState)(() => {
+        var _a;
+        return client.createRoom(_room, {
+          addons: options.addons,
+          debug,
+          initialPresence,
+          initialStorage: typeof initialStorage === "function" ? (_a = client._defs.initialStorage) == null ? void 0 : _a.getFactory(initialStorage) : client._defs.initialStorage,
+          metadata,
+          onAuthorizationFail,
+          router: options.router
+        });
       });
-      return () => {
-        unsubscribe();
-      };
-    }, [rerender, room]);
-    (0, import_react6.useEffect)(() => {
-      const leaveRoom = () => __async(void 0, null, function* () {
-        yield queue.push(
-          client.leave(room).catch((error) => {
+      (0, import_react6.useEffect)(() => {
+        const unsubscribe = room.subscribe("connection", () => {
+          rerender();
+        });
+        return () => {
+          unsubscribe();
+        };
+      }, [rerender, room]);
+      (0, import_react6.useEffect)(() => {
+        const leaveRoom = () => __async(void 0, null, function* () {
+          yield queue.push(
+            client.leave(room).catch((error) => {
+              console.error(error);
+            })
+          );
+        });
+        if (!connect) {
+          leaveRoom();
+          return;
+        }
+        if (!resolvedMeta.isInitialized) {
+          leaveRoom();
+          return;
+        }
+        const resolved = resolvedMeta.value;
+        queue.push(
+          client.enter(room, ...[{ metadata: resolved }]).catch((error) => __async(void 0, null, function* () {
             console.error(error);
-          })
+            yield leaveRoom();
+          }))
         );
-      });
-      if (!connect) {
-        leaveRoom();
-        return;
-      }
-      if (!resolvedMeta.isInitialized) {
-        leaveRoom();
-        return;
-      }
-      const resolved = resolvedMeta.value;
-      queue.push(
-        client.enter(room, ...[{ metadata: resolved }]).catch((error) => __async(void 0, null, function* () {
-          console.error(error);
-          yield leaveRoom();
-        }))
-      );
-      return () => {
-        leaveRoom();
-      };
-    }, [connect, queue, resolvedMeta.isInitialized, resolvedMeta.value, room]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PluvRoomContext.Provider, { value: mockedRoom != null ? mockedRoom : room, children });
-  });
+        return () => {
+          leaveRoom();
+        };
+      }, [connect, queue, resolvedMeta.isInitialized, resolvedMeta.value, room]);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PluvRoomContext.Provider, { value: mockedRoom != null ? mockedRoom : room, children });
+    }
+  );
   PluvRoomProvider.displayName = "PluvRoomProvider";
   const PluvProvider = (0, import_react6.memo)((props) => {
     const { children } = props;
@@ -316,7 +320,10 @@ var createBundle = (client, options = {}) => {
   const useClient = () => (0, import_react6.useContext)(PluvContext);
   const useRoom = () => {
     const room = (0, import_react6.useContext)(PluvRoomContext);
-    if (!room) throw new Error("Room could not be found. Component must be wrapped with PluvRoomProvider");
+    if (!room)
+      throw new Error(
+        "Room could not be found. Component must be wrapped with PluvRoomProvider"
+      );
     return room;
   };
   const useBroadcast = () => {
@@ -339,16 +346,32 @@ var createBundle = (client, options = {}) => {
   };
   const useCanRedo = () => {
     const room = useRoom();
-    const subscribe = (0, import_react6.useCallback)((onStoreChange) => room.storageRoot(onStoreChange), [room]);
+    const subscribe = (0, import_react6.useCallback)(
+      (onStoreChange) => room.storageRoot(onStoreChange),
+      [room]
+    );
     const getSnapshot = (0, import_react6.useCallback)(() => room.canRedo(), [room]);
-    const canRedo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
+    const canRedo = useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      identity
+    );
     return canRedo;
   };
   const useCanUndo = () => {
     const room = useRoom();
-    const subscribe = (0, import_react6.useCallback)((onStoreChange) => room.storageRoot(onStoreChange), [room]);
+    const subscribe = (0, import_react6.useCallback)(
+      (onStoreChange) => room.storageRoot(onStoreChange),
+      [room]
+    );
     const getSnapshot = (0, import_react6.useCallback)(() => room.canUndo(), [room]);
-    const canUndo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
+    const canUndo = useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      identity
+    );
     return canUndo;
   };
   const useConnection = (selector = identity, options2) => {
@@ -361,7 +384,10 @@ var createBundle = (client, options = {}) => {
       [room]
     );
     const getSnapshot = room.getConnection;
-    const _selector = (0, import_react6.useCallback)((snapshot) => selector(snapshot), [selector]);
+    const _selector = (0, import_react6.useCallback)(
+      (snapshot) => selector(snapshot),
+      [selector]
+    );
     return useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
@@ -388,7 +414,10 @@ var createBundle = (client, options = {}) => {
     {
       get(_, prop) {
         const useProxyEvent = (callback) => {
-          return useEvent(prop, callback);
+          return useEvent(
+            prop,
+            callback
+          );
         };
         return { useEvent: useProxyEvent };
       }
@@ -404,7 +433,10 @@ var createBundle = (client, options = {}) => {
       [room]
     );
     const getSnapshot = room.getMyPresence;
-    const _selector = (0, import_react6.useCallback)((snapshot) => selector(snapshot), [selector]);
+    const _selector = (0, import_react6.useCallback)(
+      (snapshot) => selector(snapshot),
+      [selector]
+    );
     const myPresence = useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
@@ -496,7 +528,10 @@ var createBundle = (client, options = {}) => {
     room.subscribe("storage-loaded", () => {
       rerender();
     });
-    const subscribe = (0, import_react6.useCallback)((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
+    const subscribe = (0, import_react6.useCallback)(
+      (onStoreChange) => room.storage(key, onStoreChange),
+      [key, room]
+    );
     const getSnapshot = (0, import_react6.useCallback)(() => {
       return room.getStorageJson(key);
     }, [key, room]);

package/dist/index.mjs

@@ -207,73 +207,77 @@ var createBundle = (client, options = {}) => {
     return /* @__PURE__ */ jsx(MockedRoomContext.Provider, { value: room, children: /* @__PURE__ */ jsx(PluvRoomContext.Provider, { value: room, children }) });
   });
   MockedRoomProvider.displayName = "MockedRoomProvider";
-  const PluvRoomProvider = memo((props) => {
-    const {
-      children,
-      connect = true,
-      debug,
-      initialPresence,
-      initialStorage,
-      metadata,
-      onAuthorizationFail,
-      room: _room
-    } = props;
-    const queue = useAsyncQueue();
-    const rerender = useRerender();
-    const mockedRoom = useContext(MockedRoomContext);
-    const resolvedMeta = useDeepAsyncMemo(() => __async(void 0, null, function* () {
-      const resolved = yield Promise.resolve(typeof metadata === "function" ? metadata() : metadata);
-      return !!room.metadata ? room.metadata.parse(resolved) : resolved;
-    }));
-    const [room] = useState4(() => {
-      var _a;
-      return client.createRoom(_room, {
-        addons: options.addons,
+  const PluvRoomProvider = memo(
+    (props) => {
+      const {
+        children,
+        connect = true,
         debug,
         initialPresence,
-        initialStorage: typeof initialStorage === "function" ? (_a = client._defs.initialStorage) == null ? void 0 : _a.getFactory(initialStorage) : client._defs.initialStorage,
+        initialStorage,
         metadata,
         onAuthorizationFail,
-        router: options.router
-      });
-    });
-    useEffect3(() => {
-      const unsubscribe = room.subscribe("connection", () => {
-        rerender();
+        room: _room
+      } = props;
+      const queue = useAsyncQueue();
+      const rerender = useRerender();
+      const mockedRoom = useContext(MockedRoomContext);
+      const resolvedMeta = useDeepAsyncMemo(() => __async(void 0, null, function* () {
+        const resolved = yield Promise.resolve(
+          typeof metadata === "function" ? metadata() : metadata
+        );
+        return !!room.metadata ? room.metadata.parse(resolved) : resolved;
+      }));
+      const [room] = useState4(() => {
+        var _a;
+        return client.createRoom(_room, {
+          addons: options.addons,
+          debug,
+          initialPresence,
+          initialStorage: typeof initialStorage === "function" ? (_a = client._defs.initialStorage) == null ? void 0 : _a.getFactory(initialStorage) : client._defs.initialStorage,
+          metadata,
+          onAuthorizationFail,
+          router: options.router
+        });
       });
-      return () => {
-        unsubscribe();
-      };
-    }, [rerender, room]);
-    useEffect3(() => {
-      const leaveRoom = () => __async(void 0, null, function* () {
-        yield queue.push(
-          client.leave(room).catch((error) => {
+      useEffect3(() => {
+        const unsubscribe = room.subscribe("connection", () => {
+          rerender();
+        });
+        return () => {
+          unsubscribe();
+        };
+      }, [rerender, room]);
+      useEffect3(() => {
+        const leaveRoom = () => __async(void 0, null, function* () {
+          yield queue.push(
+            client.leave(room).catch((error) => {
+              console.error(error);
+            })
+          );
+        });
+        if (!connect) {
+          leaveRoom();
+          return;
+        }
+        if (!resolvedMeta.isInitialized) {
+          leaveRoom();
+          return;
+        }
+        const resolved = resolvedMeta.value;
+        queue.push(
+          client.enter(room, ...[{ metadata: resolved }]).catch((error) => __async(void 0, null, function* () {
             console.error(error);
-          })
+            yield leaveRoom();
+          }))
         );
-      });
-      if (!connect) {
-        leaveRoom();
-        return;
-      }
-      if (!resolvedMeta.isInitialized) {
-        leaveRoom();
-        return;
-      }
-      const resolved = resolvedMeta.value;
-      queue.push(
-        client.enter(room, ...[{ metadata: resolved }]).catch((error) => __async(void 0, null, function* () {
-          console.error(error);
-          yield leaveRoom();
-        }))
-      );
-      return () => {
-        leaveRoom();
-      };
-    }, [connect, queue, resolvedMeta.isInitialized, resolvedMeta.value, room]);
-    return /* @__PURE__ */ jsx(PluvRoomContext.Provider, { value: mockedRoom != null ? mockedRoom : room, children });
-  });
+        return () => {
+          leaveRoom();
+        };
+      }, [connect, queue, resolvedMeta.isInitialized, resolvedMeta.value, room]);
+      return /* @__PURE__ */ jsx(PluvRoomContext.Provider, { value: mockedRoom != null ? mockedRoom : room, children });
+    }
+  );
   PluvRoomProvider.displayName = "PluvRoomProvider";
   const PluvProvider = memo((props) => {
     const { children } = props;
@@ -283,7 +287,10 @@ var createBundle = (client, options = {}) => {
   const useClient = () => useContext(PluvContext);
   const useRoom = () => {
     const room = useContext(PluvRoomContext);
-    if (!room) throw new Error("Room could not be found. Component must be wrapped with PluvRoomProvider");
+    if (!room)
+      throw new Error(
+        "Room could not be found. Component must be wrapped with PluvRoomProvider"
+      );
     return room;
   };
   const useBroadcast = () => {
@@ -306,16 +313,32 @@ var createBundle = (client, options = {}) => {
   };
   const useCanRedo = () => {
     const room = useRoom();
-    const subscribe = useCallback4((onStoreChange) => room.storageRoot(onStoreChange), [room]);
+    const subscribe = useCallback4(
+      (onStoreChange) => room.storageRoot(onStoreChange),
+      [room]
+    );
     const getSnapshot = useCallback4(() => room.canRedo(), [room]);
-    const canRedo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
+    const canRedo = useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      identity
+    );
     return canRedo;
   };
   const useCanUndo = () => {
     const room = useRoom();
-    const subscribe = useCallback4((onStoreChange) => room.storageRoot(onStoreChange), [room]);
+    const subscribe = useCallback4(
+      (onStoreChange) => room.storageRoot(onStoreChange),
+      [room]
+    );
     const getSnapshot = useCallback4(() => room.canUndo(), [room]);
-    const canUndo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
+    const canUndo = useSyncExternalStoreWithSelector(
+      subscribe,
+      getSnapshot,
+      getSnapshot,
+      identity
+    );
     return canUndo;
   };
   const useConnection = (selector = identity, options2) => {
@@ -328,7 +351,10 @@ var createBundle = (client, options = {}) => {
       [room]
     );
     const getSnapshot = room.getConnection;
-    const _selector = useCallback4((snapshot) => selector(snapshot), [selector]);
+    const _selector = useCallback4(
+      (snapshot) => selector(snapshot),
+      [selector]
+    );
     return useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
@@ -355,7 +381,10 @@ var createBundle = (client, options = {}) => {
     {
       get(_, prop) {
         const useProxyEvent = (callback) => {
-          return useEvent(prop, callback);
+          return useEvent(
+            prop,
+            callback
+          );
         };
         return { useEvent: useProxyEvent };
       }
@@ -371,7 +400,10 @@ var createBundle = (client, options = {}) => {
       [room]
     );
     const getSnapshot = room.getMyPresence;
-    const _selector = useCallback4((snapshot) => selector(snapshot), [selector]);
+    const _selector = useCallback4(
+      (snapshot) => selector(snapshot),
+      [selector]
+    );
     const myPresence = useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
@@ -463,7 +495,10 @@ var createBundle = (client, options = {}) => {
     room.subscribe("storage-loaded", () => {
       rerender();
     });
-    const subscribe = useCallback4((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
+    const subscribe = useCallback4(
+      (onStoreChange) => room.storage(key, onStoreChange),
+      [key, room]
+    );
     const getSnapshot = useCallback4(() => {
       return room.getStorageJson(key);
     }, [key, room]);

package/package.json

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

package/src/createBundle.tsx

@@ -14,7 +14,15 @@ import type {
 } from "@pluv/client";
 import { MockedRoom, PluvRoom } from "@pluv/client";
 import type { AbstractCrdtDoc, CrdtType, InferCrdtJson } from "@pluv/crdt";
-import type { Id, InferIOInput, InferIOOutput, IOEventMessage, IOLike, JsonObject, MaybePromise } from "@pluv/types";
+import type {
+    Id,
+    InferIOInput,
+    InferIOOutput,
+    IOEventMessage,
+    IOLike,
+    JsonObject,
+    MaybePromise,
+} 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";
@@ -31,7 +39,10 @@ export interface PluvProviderProps {
     children?: ReactNode;
 }
 
-type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = {
+type BaseRoomProviderProps<
+    TPresence extends JsonObject,
+    TStorage extends Record<string, CrdtType<any, any>>,
+> = {
     children?: ReactNode;
     initialStorage?: keyof TStorage extends never ? never : () => TStorage;
     room: string;
@@ -46,7 +57,9 @@ export type MockedRoomProviderProps<
     events?: MockedRoomEvents<MergeEvents<TEvents, TIO>>;
 };
 
-export type MetadataGetter<TMetadata extends JsonObject> = TMetadata | (() => MaybePromise<TMetadata>);
+export type MetadataGetter<TMetadata extends JsonObject> =
+    | TMetadata
+    | (() => MaybePromise<TMetadata>);
 
 export type PluvRoomProviderProps<
     TIO extends IOLike<any, any>,
@@ -57,7 +70,9 @@ export type PluvRoomProviderProps<
     connect?: boolean;
     debug?: boolean | PluvRoomDebug<TIO>;
     onAuthorizationFail?: (error: Error) => void;
-} & (keyof TMetadata extends never ? { metadata?: undefined } : { metadata: MetadataGetter<TMetadata> });
+} & (keyof TMetadata extends never
+        ? { metadata?: undefined }
+        : { metadata: MetadataGetter<TMetadata> });
 
 export interface SubscriptionHookOptions<T extends unknown> {
     isEqual?: (a: T, b: T) => boolean;
@@ -128,7 +143,10 @@ export interface CreateBundle<
     ) => T;
     useRedo: () => () => void;
     useRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
-    useStorage: <TKey extends keyof TStorage, TData extends unknown = InferCrdtJson<TStorage[TKey]>>(
+    useStorage: <
+        TKey extends keyof TStorage,
+        TData extends unknown = InferCrdtJson<TStorage[TKey]>,
+    >(
         key: TKey,
         selector?: (data: InferCrdtJson<TStorage[TKey]>) => TData,
         options?: SubscriptionHookOptions<TData | null>,
@@ -199,88 +217,98 @@ export const createBundle = <
 
     MockedRoomProvider.displayName = "MockedRoomProvider";
 
-    const PluvRoomProvider = memo<PluvRoomProviderProps<TIO, TMetadata, TPresence, TStorage>>((props) => {
-        const {
-            children,
-            connect = true,
-            debug,
-            initialPresence,
-            initialStorage,
-            metadata,
-            onAuthorizationFail,
-            room: _room,
-        } = props;
-
-        const queue = useAsyncQueue();
-        const rerender = useRerender();
-        const mockedRoom = useContext(MockedRoomContext);
-
-        const resolvedMeta = useDeepAsyncMemo(async () => {
-            const resolved = await Promise.resolve(typeof metadata === "function" ? metadata() : metadata);
-
-            return !!room.metadata ? room.metadata.parse(resolved) : resolved;
-        });
-
-        const [room] = useState<PluvRoom<TIO, TMetadata, TPresence, TStorage, TEvents>>(() => {
-            return client.createRoom(_room, {
-                addons: options.addons,
+    const PluvRoomProvider = memo<PluvRoomProviderProps<TIO, TMetadata, TPresence, TStorage>>(
+        (props) => {
+            const {
+                children,
+                connect = true,
                 debug,
                 initialPresence,
-                initialStorage:
-                    typeof initialStorage === "function"
-                        ? client._defs.initialStorage?.getFactory(initialStorage)
-                        : client._defs.initialStorage,
+                initialStorage,
                 metadata,
                 onAuthorizationFail,
-                router: options.router,
-            } as CreateRoomOptions<TIO, TPresence, TStorage, TMetadata, TEvents>);
-        });
-
-        useEffect(() => {
-            const unsubscribe = room.subscribe("connection", () => {
-                rerender();
-            });
+                room: _room,
+            } = props;
 
-            return () => {
-                unsubscribe();
-            };
-        }, [rerender, room]);
+            const queue = useAsyncQueue();
+            const rerender = useRerender();
+            const mockedRoom = useContext(MockedRoomContext);
 
-        useEffect(() => {
-            const leaveRoom = async (): Promise<void> => {
-                await queue.push(
-                    client.leave(room).catch((error) => {
-                        console.error(error);
-                    }),
+            const resolvedMeta = useDeepAsyncMemo(async () => {
+                const resolved = await Promise.resolve(
+                    typeof metadata === "function" ? metadata() : metadata,
                 );
-            };
 
-            if (!connect) {
-                leaveRoom();
-                return;
-            }
+                return !!room.metadata ? room.metadata.parse(resolved) : resolved;
+            });
 
-            if (!resolvedMeta.isInitialized) {
-                leaveRoom();
-                return;
-            }
+            const [room] = useState<PluvRoom<TIO, TMetadata, TPresence, TStorage, TEvents>>(() => {
+                return client.createRoom(_room, {
+                    addons: options.addons,
+                    debug,
+                    initialPresence,
+                    initialStorage:
+                        typeof initialStorage === "function"
+                            ? client._defs.initialStorage?.getFactory(initialStorage)
+                            : client._defs.initialStorage,
+                    metadata,
+                    onAuthorizationFail,
+                    router: options.router,
+                } as CreateRoomOptions<TIO, TPresence, TStorage, TMetadata, TEvents>);
+            });
 
-            const resolved = resolvedMeta.value as TMetadata;
+            useEffect(() => {
+                const unsubscribe = room.subscribe("connection", () => {
+                    rerender();
+                });
 
-            queue.push(
-                client.enter(room, ...([{ metadata: resolved }] as EnterRoomParams<TMetadata>)).catch(async (error) => {
-                    console.error(error);
-                    await leaveRoom();
-                }),
-            );
+                return () => {
+                    unsubscribe();
+                };
+            }, [rerender, room]);
+
+            useEffect(() => {
+                const leaveRoom = async (): Promise<void> => {
+                    await queue.push(
+                        client.leave(room).catch((error) => {
+                            console.error(error);
+                        }),
+                    );
+                };
 
-            return () => {
-                leaveRoom();
-            };
-        }, [connect, queue, resolvedMeta.isInitialized, resolvedMeta.value, room]);
+                if (!connect) {
+                    leaveRoom();
+                    return;
+                }
+
+                if (!resolvedMeta.isInitialized) {
+                    leaveRoom();
+                    return;
+                }
+
+                const resolved = resolvedMeta.value as TMetadata;
+
+                queue.push(
+                    client
+                        .enter(room, ...([{ metadata: resolved }] as EnterRoomParams<TMetadata>))
+                        .catch(async (error) => {
+                            console.error(error);
+                            await leaveRoom();
+                        }),
+                );
 
-        return <PluvRoomContext.Provider value={mockedRoom ?? room}>{children}</PluvRoomContext.Provider>;
-    });
+                return () => {
+                    leaveRoom();
+                };
+            }, [connect, queue, resolvedMeta.isInitialized, resolvedMeta.value, room]);
+
+            return (
+                <PluvRoomContext.Provider value={mockedRoom ?? room}>
+                    {children}
+                </PluvRoomContext.Provider>
+            );
+        },
+    );
 
     PluvRoomProvider.displayName = "PluvRoomProvider";
 
@@ -292,12 +320,16 @@ export const createBundle = <
 
     PluvProvider.displayName = "PluvProvider";
 
-    const useClient = (): PluvClient<TIO, TPresence, TStorage, TMetadata> => useContext(PluvContext);
+    const useClient = (): PluvClient<TIO, TPresence, TStorage, TMetadata> =>
+        useContext(PluvContext);
 
     const useRoom = () => {
         const room = useContext(PluvRoomContext);
 
-        if (!room) throw new Error("Room could not be found. Component must be wrapped with PluvRoomProvider");
+        if (!room)
+            throw new Error(
+                "Room could not be found. Component must be wrapped with PluvRoomProvider",
+            );
 
         return room;
     };
@@ -320,7 +352,9 @@ export const createBundle = <
                 get(fn, prop) {
                     return (
                         data: Id<
-                            InferIOInput<MergeEvents<TEvents, TIO>>[keyof InferIOInput<MergeEvents<TEvents, TIO>>]
+                            InferIOInput<MergeEvents<TEvents, TIO>>[keyof InferIOInput<
+                                MergeEvents<TEvents, TIO>
+                            >]
                         >,
                     ): void => {
                         return fn(prop as keyof InferIOInput<MergeEvents<TEvents, TIO>>, data);
@@ -333,11 +367,19 @@ export const createBundle = <
     const useCanRedo = (): boolean => {
         const room = useRoom();
 
-        const subscribe = useCallback((onStoreChange: () => void) => room.storageRoot(onStoreChange), [room]);
+        const subscribe = useCallback(
+            (onStoreChange: () => void) => room.storageRoot(onStoreChange),
+            [room],
+        );
 
         const getSnapshot = useCallback((): boolean => room.canRedo(), [room]);
 
-        const canRedo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
+        const canRedo = useSyncExternalStoreWithSelector(
+            subscribe,
+            getSnapshot,
+            getSnapshot,
+            identity,
+        );
 
         return canRedo;
     };
@@ -345,11 +387,19 @@ export const createBundle = <
     const useCanUndo = (): boolean => {
         const room = useRoom();
 
-        const subscribe = useCallback((onStoreChange: () => void) => room.storageRoot(onStoreChange), [room]);
+        const subscribe = useCallback(
+            (onStoreChange: () => void) => room.storageRoot(onStoreChange),
+            [room],
+        );
 
         const getSnapshot = useCallback((): boolean => room.canUndo(), [room]);
 
-        const canUndo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
+        const canUndo = useSyncExternalStoreWithSelector(
+            subscribe,
+            getSnapshot,
+            getSnapshot,
+            identity,
+        );
 
         return canUndo;
     };
@@ -369,7 +419,10 @@ export const createBundle = <
 
         const getSnapshot = room.getConnection;
 
-        const _selector = useCallback((snapshot: WebSocketConnection) => selector(snapshot) as Id<T>, [selector]);
+        const _selector = useCallback(
+            (snapshot: WebSocketConnection) => selector(snapshot) as Id<T>,
+            [selector],
+        );
 
         return useSyncExternalStoreWithSelector(
             subscribe,
@@ -408,11 +461,17 @@ export const createBundle = <
                 const useProxyEvent = (
                     callback: (
                         data: Id<
-                            IOEventMessage<MergeEvents<TEvents, TIO>, keyof InferIOOutput<MergeEvents<TEvents, TIO>>>
+                            IOEventMessage<
+                                MergeEvents<TEvents, TIO>,
+                                keyof InferIOOutput<MergeEvents<TEvents, TIO>>
+                            >
                         >,
                     ) => void,
                 ): void => {
-                    return useEvent(prop as keyof InferIOOutput<MergeEvents<TEvents, TIO>>, callback);
+                    return useEvent(
+                        prop as keyof InferIOOutput<MergeEvents<TEvents, TIO>>,
+                        callback,
+                    );
                 };
 
                 return { useEvent: useProxyEvent };
@@ -435,7 +494,10 @@ export const createBundle = <
 
         const getSnapshot = room.getMyPresence;
 
-        const _selector = useCallback((snapshot: TPresence) => selector(snapshot) as Id<T>, [selector]);
+        const _selector = useCallback(
+            (snapshot: TPresence) => selector(snapshot) as Id<T>,
+            [selector],
+        );
 
         const myPresence = useSyncExternalStoreWithSelector(
             subscribe,
@@ -556,7 +618,10 @@ export const createBundle = <
         return room.redo;
     };
 
-    const useStorage = <TKey extends keyof TStorage, TData extends unknown = InferCrdtJson<TStorage[TKey]>>(
+    const useStorage = <
+        TKey extends keyof TStorage,
+        TData extends unknown = InferCrdtJson<TStorage[TKey]>,
+    >(
         key: TKey,
         selector = identity as (data: InferCrdtJson<TStorage[TKey]>) => TData,
         options?: SubscriptionHookOptions<TData | null>,
@@ -568,7 +633,10 @@ export const createBundle = <
             rerender();
         });
 
-        const subscribe = useCallback((onStoreChange: () => void) => room.storage(key, onStoreChange), [key, room]);
+        const subscribe = useCallback(
+            (onStoreChange: () => void) => room.storage(key, onStoreChange),
+            [key, room],
+        );
 
         const getSnapshot = useCallback((): InferCrdtJson<TStorage[TKey]> | null => {
             return room.getStorageJson(key);

package/src/internal/hooks/useNoSsr.ts

@@ -9,7 +9,11 @@ export const useNoSsr = (): NoSsrFunction => {
 
     const noSsr = useCallback(
         <T = null>(value: T | (() => T), fallback: T = null as T): T => {
-            return didMount ? (typeof value !== "function" ? value : (value as () => T)()) : fallback;
+            return didMount
+                ? typeof value !== "function"
+                    ? value
+                    : (value as () => T)()
+                : fallback;
         },
         [didMount],
     );

package/src/internal/index.ts

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

package/src/internal/utils/shallowArrayEqual.ts

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