@pluv/react 0.38.14 → 0.39.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @pluv/react@0.38.14 build /home/runner/work/pluv/pluv/packages/react
+> @pluv/react@0.39.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 11.51 KB
-ESM ⚡️ Build success in 80ms
-CJS dist/index.js 13.89 KB
-CJS ⚡️ Build success in 81ms
+ESM dist/index.mjs 16.35 KB
+ESM ⚡️ Build success in 140ms
+CJS dist/index.js 18.73 KB
+CJS ⚡️ Build success in 134ms
 DTS Build start
-DTS ⚡️ Build success in 5810ms
-DTS dist/index.d.mts 5.39 KB
-DTS dist/index.d.ts  5.39 KB
+DTS ⚡️ Build success in 5767ms
+DTS dist/index.d.mts 5.54 KB
+DTS dist/index.d.ts  5.54 KB

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @pluv/react
 
+## 0.39.0
+
+### Minor Changes
+
+- ca160f5: **BREAKING** Update the context value of `MockedRoomContext` to mirror the same shape as `PluvRoomContext`. i.e. the value of `MockedRoomContext` is now the room itself, rather than an object containing the room. This should not be breaking in most cases. If you happen to be using `useContext(MockedRoomContext)`, those will need to be updated as shown below:
+
+  ```tsx
+  // Before
+  const { room } = useContext(MockedRoomContext);
+
+  // After
+  const room = useContext(MockedRoomContext);
+  ```
+
+### Patch Changes
+
+- e6ddddc: Fixed potential race conditions between connecting and disconnecting between re-renders of `PluvRoomProvider`.
+- e6ddddc: (Internal) Update how `PluvRoomProvider` handles the `metadata` prop internally to be updated to how `PluvClient` now handles this (i.e. moved to `PluvClient.enter`, from `PluvClient.createRoom`).
+- e6ddddc: Add support for a passing either a function or object for the `metadata` prop on `PluvRoomProvider`. When a function is used, the `metadata` will be gotten at the moment of connection (internally this is a `useEffect`, so browser APIs can be used such as `document`, `window` and `localStorage`).
+
+  ```tsx
+  // Both of these work
+  <PluvRoomProvider metadata={{ hello: "world" }}>
+      {children}
+  </PluvRoomProvider>
+
+  <PluvRoomProvider
+      metadata={() => {
+          const value = localStorage.get(MY_LOCALSTORAGE_KEY);
+
+          return { hello: value };
+      }}
+  >
+      {children}
+  </PluvRoomProvider>
+  ```
+
+- Updated dependencies [e6ddddc]
+- Updated dependencies [e6ddddc]
+- Updated dependencies [2cfb68d]
+- Updated dependencies [e6ddddc]
+  - @pluv/client@0.39.0
+  - @pluv/crdt@0.39.0
+  - @pluv/types@0.39.0
+
 ## 0.38.14
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { PluvRouterEventConfig, PluvClient, PluvRoomAddon, PluvRouter, MockedRoomEvents, MergeEvents, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom } from '@pluv/client';
 import { CrdtType, AbstractCrdtDoc, InferCrdtJson } from '@pluv/crdt';
-import { IOLike, JsonObject, InferIOOutput, Id, IOEventMessage, InferIOInput } from '@pluv/types';
+import { IOLike, JsonObject, MaybePromise, InferIOOutput, Id, IOEventMessage, InferIOInput } from '@pluv/types';
 import { FC, ReactNode, Dispatch } from 'react';
 
 interface PluvProviderProps {
@@ -18,13 +18,15 @@ type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record
 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 MetadataGetter<TMetadata extends JsonObject> = TMetadata | (() => MaybePromise<TMetadata>);
 type PluvRoomProviderProps<TIO extends IOLike<any, any>, TMetadata extends JsonObject, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
+    connect?: boolean;
     debug?: boolean | PluvRoomDebug<TIO>;
     onAuthorizationFail?: (error: Error) => void;
 } & (keyof TMetadata extends never ? {
     metadata?: undefined;
 } : {
-    metadata: TMetadata;
+    metadata: MetadataGetter<TMetadata>;
 });
 interface SubscriptionHookOptions<T extends unknown> {
     isEqual?: (a: T, b: T) => boolean;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { PluvRouterEventConfig, PluvClient, PluvRoomAddon, PluvRouter, MockedRoomEvents, MergeEvents, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom } from '@pluv/client';
 import { CrdtType, AbstractCrdtDoc, InferCrdtJson } from '@pluv/crdt';
-import { IOLike, JsonObject, InferIOOutput, Id, IOEventMessage, InferIOInput } from '@pluv/types';
+import { IOLike, JsonObject, MaybePromise, InferIOOutput, Id, IOEventMessage, InferIOInput } from '@pluv/types';
 import { FC, ReactNode, Dispatch } from 'react';
 
 interface PluvProviderProps {
@@ -18,13 +18,15 @@ type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record
 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 MetadataGetter<TMetadata extends JsonObject> = TMetadata | (() => MaybePromise<TMetadata>);
 type PluvRoomProviderProps<TIO extends IOLike<any, any>, TMetadata extends JsonObject, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
+    connect?: boolean;
     debug?: boolean | PluvRoomDebug<TIO>;
     onAuthorizationFail?: (error: Error) => void;
 } & (keyof TMetadata extends never ? {
     metadata?: undefined;
 } : {
-    metadata: TMetadata;
+    metadata: MetadataGetter<TMetadata>;
 });
 interface SubscriptionHookOptions<T extends unknown> {
     isEqual?: (a: T, b: T) => boolean;

package/dist/index.js

@@ -1,10 +1,27 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -26,6 +43,26 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/index.ts
 var index_exports = {};
@@ -36,15 +73,97 @@ module.exports = __toCommonJS(index_exports);
 
 // src/createBundle.tsx
 var import_client = require("@pluv/client");
+var import_fast_deep_equal2 = __toESM(require("fast-deep-equal"));
+var import_react6 = require("react");
+
+// src/internal/hooks/useAsyncQueue.ts
+var import_react = require("react");
+var useAsyncQueue = () => {
+  const queueRef = (0, import_react.useRef)(Promise.resolve(void 0));
+  const push = (0, import_react.useCallback)((promise) => __async(void 0, null, function* () {
+    queueRef.current = queueRef.current.then(() => __async(void 0, null, function* () {
+      return yield promise;
+    }));
+    return yield queueRef.current;
+  }), []);
+  return (0, import_react.useMemo)(() => ({ push }), [push]);
+};
+
+// src/internal/hooks/useDeepAsyncMemo.ts
+var import_react2 = require("react");
 var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
-var import_react4 = require("react");
+var useDeepAsyncMemo = (factory, isEqual = import_fast_deep_equal.default) => {
+  const [state, setState] = (0, import_react2.useState)({
+    isInitialized: false,
+    isLoading: true,
+    value: void 0,
+    error: null
+  });
+  const lastValueRef = (0, import_react2.useRef)(void 0);
+  const hasValueRef = (0, import_react2.useRef)(false);
+  const inflightRef = (0, import_react2.useRef)(null);
+  const isMountedRef = (0, import_react2.useRef)(true);
+  (0, import_react2.useEffect)(() => {
+    isMountedRef.current = true;
+    const promise = factory();
+    inflightRef.current = promise;
+    setState((prev) => {
+      return __spreadProps(__spreadValues({}, prev), {
+        isLoading: true,
+        error: null
+      });
+    });
+    promise.then((result) => {
+      if (!isMountedRef.current || inflightRef.current !== promise) return;
+      const isSame = hasValueRef.current && isEqual(lastValueRef.current, result);
+      if (isSame) {
+        setState((prev) => {
+          return __spreadProps(__spreadValues({}, prev), {
+            isInitialized: true,
+            isLoading: false
+          });
+        });
+        return;
+      }
+      lastValueRef.current = result;
+      hasValueRef.current = true;
+      setState({
+        isInitialized: true,
+        isLoading: false,
+        value: result,
+        error: null
+      });
+    }).catch((err) => {
+      if (!isMountedRef.current || inflightRef.current !== promise) return;
+      setState({
+        isInitialized: hasValueRef.current,
+        isLoading: false,
+        value: void 0,
+        error: err instanceof Error ? err : new Error("Unknown error")
+      });
+    });
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, [
+    /**
+     * !HACK
+     * @description We're only going to use the `isEqual` function to determine if this hook
+     * should re-run. This is basically our hook's version of a dependency array
+     * @date April 13, 2025
+     */
+    // factory,
+    isEqual
+  ]);
+  return state;
+};
 
 // src/internal/hooks/useNoSsr.ts
-var import_react = require("react");
+var import_react3 = require("react");
 var useNoSsr = () => {
-  const [didMount, setDidMount] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => setDidMount(typeof window !== "undefined"), []);
-  const noSsr = (0, import_react.useCallback)(
+  const [didMount, setDidMount] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => setDidMount(typeof window !== "undefined"), []);
+  const noSsr = (0, import_react3.useCallback)(
     (value, fallback = null) => {
       return didMount ? typeof value !== "function" ? value : value() : fallback;
     },
@@ -54,16 +173,16 @@ var useNoSsr = () => {
 };
 
 // src/internal/hooks/useRerender.ts
-var import_react2 = require("react");
+var import_react4 = require("react");
 var useRerender = () => {
-  const [, setCount] = (0, import_react2.useState)(0);
-  return (0, import_react2.useCallback)(() => {
+  const [, setCount] = (0, import_react4.useState)(0);
+  return (0, import_react4.useCallback)(() => {
     setCount((oldCount) => (oldCount + 1) % Number.MAX_SAFE_INTEGER);
   }, []);
 };
 
 // src/internal/hooks/useSyncExternalStoreWithSelector.ts
-var import_react3 = require("react");
+var import_react5 = require("react");
 
 // src/internal/utils/identity.ts
 var identity = (x) => x;
@@ -79,7 +198,7 @@ var shallowEqual = (a, b) => a === b;
 // src/internal/hooks/useSyncExternalStoreWithSelector.ts
 var useSyncExternalStoreWithSelector = (subscribe, getClientSnapshot, getServerSnapshot, selector, isEqual) => {
   const noSsr = useNoSsr();
-  const cacheRef = (0, import_react3.useRef)(null);
+  const cacheRef = (0, import_react5.useRef)(null);
   const _getServerSnapshot = getServerSnapshot ? () => {
     const data = getServerSnapshot();
     const snapshot = selector(data);
@@ -98,19 +217,19 @@ var useSyncExternalStoreWithSelector = (subscribe, getClientSnapshot, getServerS
     cacheRef.current = isUnchanged ? cached != null ? cached : snapshot : snapshot;
     return cacheRef.current;
   };
-  const result = (0, import_react3.useSyncExternalStore)(subscribe, _getClientSnapshot, _getServerSnapshot);
+  const result = (0, import_react5.useSyncExternalStore)(subscribe, _getClientSnapshot, _getServerSnapshot);
   return typeof window !== "undefined" ? noSsr(result, _getServerSnapshot == null ? void 0 : _getServerSnapshot()) : result;
 };
 
 // src/createBundle.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var createBundle = (client, options = {}) => {
-  const PluvContext = (0, import_react4.createContext)(null);
-  const PluvRoomContext = (0, import_react4.createContext)(null);
-  const MockedRoomContext = (0, import_react4.createContext)({ room: null });
-  const MockedRoomProvider = (0, import_react4.memo)((props) => {
+  const PluvContext = (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_react4.useState)(() => {
+    const [room] = (0, import_react6.useState)(() => {
       var _a;
       return new import_client.MockedRoom(_room, {
         events,
@@ -118,14 +237,28 @@ var createBundle = (client, options = {}) => {
         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 }) });
+    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_react4.memo)((props) => {
-    const { children, debug, initialPresence, initialStorage, metadata, onAuthorizationFail, room: _room } = props;
+  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 { room: mockedRoom } = (0, import_react4.useContext)(MockedRoomContext);
-    const [room] = (0, import_react4.useState)(() => {
+    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(metadata) : resolved;
+    }));
+    const [room] = (0, import_react6.useState)(() => {
       var _a;
       return client.createRoom(_room, {
         addons: options.addons,
@@ -137,7 +270,7 @@ var createBundle = (client, options = {}) => {
         router: options.router
       });
     });
-    (0, import_react4.useEffect)(() => {
+    (0, import_react6.useEffect)(() => {
       const unsubscribe = room.subscribe("connection", () => {
         rerender();
       });
@@ -145,35 +278,56 @@ var createBundle = (client, options = {}) => {
         unsubscribe();
       };
     }, [rerender, room]);
-    (0, import_react4.useEffect)(() => {
-      client.enter(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();
+        }))
+      );
       return () => {
-        client.leave(room);
+        leaveRoom();
       };
-    }, [room]);
+    }, [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_react4.memo)((props) => {
+  const PluvProvider = (0, import_react6.memo)((props) => {
     const { children } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PluvContext.Provider, { value: client, children });
   });
   PluvProvider.displayName = "PluvProvider";
-  const useClient = () => (0, import_react4.useContext)(PluvContext);
+  const useClient = () => (0, import_react6.useContext)(PluvContext);
   const useRoom = () => {
-    const room = (0, import_react4.useContext)(PluvRoomContext);
+    const room = (0, import_react6.useContext)(PluvRoomContext);
     if (!room) throw new Error("Room could not be found. Component must be wrapped with PluvRoomProvider");
     return room;
   };
   const useBroadcast = () => {
     const room = useRoom();
-    const broadcast = (0, import_react4.useCallback)(
+    const broadcast = (0, import_react6.useCallback)(
       (event2, data) => {
         room.broadcast(event2, data);
       },
       [room]
     );
-    return (0, import_react4.useMemo)(() => {
+    return (0, import_react6.useMemo)(() => {
       return new Proxy(broadcast, {
         get(fn, prop) {
           return (data) => {
@@ -185,35 +339,35 @@ var createBundle = (client, options = {}) => {
   };
   const useCanRedo = () => {
     const room = useRoom();
-    const subscribe = (0, import_react4.useCallback)((onStoreChange) => room.storageRoot(onStoreChange), [room]);
-    const getSnapshot = (0, import_react4.useCallback)(() => room.canRedo(), [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);
     return canRedo;
   };
   const useCanUndo = () => {
     const room = useRoom();
-    const subscribe = (0, import_react4.useCallback)((onStoreChange) => room.storageRoot(onStoreChange), [room]);
-    const getSnapshot = (0, import_react4.useCallback)(() => room.canUndo(), [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);
     return canUndo;
   };
   const useConnection = (selector = identity, options2) => {
     var _a;
     const room = useRoom();
-    const subscribe = (0, import_react4.useCallback)(
+    const subscribe = (0, import_react6.useCallback)(
       (onStoreChange) => {
         return room.subscribe("connection", onStoreChange);
       },
       [room]
     );
     const getSnapshot = room.getConnection;
-    const _selector = (0, import_react4.useCallback)((snapshot) => selector(snapshot), [selector]);
+    const _selector = (0, import_react6.useCallback)((snapshot) => selector(snapshot), [selector]);
     return useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal.default
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal2.default
     );
   };
   const useDoc = () => {
@@ -222,7 +376,7 @@ var createBundle = (client, options = {}) => {
   };
   const useEvent = (type, callback) => {
     const room = useRoom();
-    (0, import_react4.useEffect)(() => {
+    (0, import_react6.useEffect)(() => {
       const unsubscribe = room.event(type, callback);
       return () => {
         unsubscribe();
@@ -243,34 +397,34 @@ var createBundle = (client, options = {}) => {
   const useMyPresence = (selector = identity, options2) => {
     var _a;
     const room = useRoom();
-    const subscribe = (0, import_react4.useCallback)(
+    const subscribe = (0, import_react6.useCallback)(
       (onStoreChange) => {
         return room.subscribe("my-presence", onStoreChange);
       },
       [room]
     );
     const getSnapshot = room.getMyPresence;
-    const _selector = (0, import_react4.useCallback)((snapshot) => selector(snapshot), [selector]);
+    const _selector = (0, import_react6.useCallback)((snapshot) => selector(snapshot), [selector]);
     const myPresence = useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal.default
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal2.default
     );
     return [myPresence, room.updateMyPresence];
   };
   const useMyself = (selector = identity, options2) => {
     var _a;
     const room = useRoom();
-    const subscribe = (0, import_react4.useCallback)(
+    const subscribe = (0, import_react6.useCallback)(
       (onStoreChange) => {
         return room.subscribe("myself", onStoreChange);
       },
       [room]
     );
     const getSnapshot = room.getMyself;
-    const _selector = (0, import_react4.useCallback)(
+    const _selector = (0, import_react6.useCallback)(
       (snapshot) => {
         return !snapshot ? null : selector(snapshot);
       },
@@ -281,20 +435,20 @@ var createBundle = (client, options = {}) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal.default
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal2.default
     );
   };
   const useOther = (connectionId, selector = identity, options2) => {
     var _a;
     const room = useRoom();
-    const subscribe = (0, import_react4.useCallback)(
+    const subscribe = (0, import_react6.useCallback)(
       (onStoreChange) => {
         return room.other(connectionId, onStoreChange);
       },
       [room, connectionId]
     );
-    const getSnapshot = (0, import_react4.useCallback)(() => room.getOther(connectionId), [room, connectionId]);
-    const _selector = (0, import_react4.useCallback)(
+    const getSnapshot = (0, import_react6.useCallback)(() => room.getOther(connectionId), [room, connectionId]);
+    const _selector = (0, import_react6.useCallback)(
       (snapshot) => {
         return !snapshot ? null : selector(snapshot);
       },
@@ -305,13 +459,13 @@ var createBundle = (client, options = {}) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal.default
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal2.default
     );
   };
   const useOthers = (selector = identity, options2) => {
     var _a;
     const room = useRoom();
-    const subscribe = (0, import_react4.useCallback)(
+    const subscribe = (0, import_react6.useCallback)(
       (onStoreChange) => {
         return room.subscribe("others", onStoreChange);
       },
@@ -327,7 +481,7 @@ var createBundle = (client, options = {}) => {
         if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
           return shallowArrayEqual(a, b);
         }
-        return (0, import_fast_deep_equal.default)(a, b);
+        return (0, import_fast_deep_equal2.default)(a, b);
       }
     );
   };
@@ -342,11 +496,11 @@ var createBundle = (client, options = {}) => {
     room.subscribe("storage-loaded", () => {
       rerender();
     });
-    const subscribe = (0, import_react4.useCallback)((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
-    const getSnapshot = (0, import_react4.useCallback)(() => {
+    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]);
-    const _selector = (0, import_react4.useCallback)(
+    const _selector = (0, import_react6.useCallback)(
       (snapshot) => {
         return snapshot === null ? null : selector(snapshot);
       },
@@ -357,7 +511,7 @@ var createBundle = (client, options = {}) => {
       getSnapshot,
       getSnapshot,
       _selector,
-      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal.default
+      (_a = options2 == null ? void 0 : options2.isEqual) != null ? _a : import_fast_deep_equal2.default
     );
     const sharedType = (_b = room.getStorage(key)) != null ? _b : null;
     return [data, sharedType];