@pluv/react 0.18.0 → 0.20.0

package/dist/index.js

@@ -38,25 +38,39 @@ module.exports = __toCommonJS(src_exports);
 var import_client2 = require("@pluv/client");
 
 // src/createBundle.tsx
-var import_react3 = require("react");
+var import_react5 = require("react");
 
 // src/createRoomBundle.tsx
 var import_client = require("@pluv/client");
 var import_crdt = require("@pluv/crdt");
 var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
-var import_react2 = require("react");
+var import_react4 = require("react");
 
-// src/internal/hooks/useRerender.ts
+// src/internal/hooks/useNoSsr.ts
 var import_react = 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)(
+    (value, fallback = null) => {
+      return didMount ? typeof value !== "function" ? value : value() : fallback;
+    },
+    [didMount]
+  );
+  return noSsr;
+};
+
+// src/internal/hooks/useRerender.ts
+var import_react2 = require("react");
 var useRerender = () => {
-  const [, setCount] = (0, import_react.useState)(0);
-  return (0, import_react.useCallback)(() => {
+  const [, setCount] = (0, import_react2.useState)(0);
+  return (0, import_react2.useCallback)(() => {
     setCount((oldCount) => (oldCount + 1) % Number.MAX_SAFE_INTEGER);
   }, []);
 };
 
 // src/internal/hooks/useSyncExternalStoreWithSelector.ts
-var import_with_selector = require("use-sync-external-store/with-selector.js");
+var import_react3 = require("react");
 
 // src/internal/utils/identity.ts
 var identity = (x) => x;
@@ -66,16 +80,45 @@ var shallowArrayEqual = (a, b) => {
   return a.length === b.length && a.every((item, i) => item === b[i]);
 };
 
+// src/internal/utils/shallowEqual.ts
+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 _getServerSnapshot = getServerSnapshot ? () => {
+    const data = getServerSnapshot();
+    const snapshot = selector(data);
+    const compare = isEqual != null ? isEqual : shallowEqual;
+    const cached = cacheRef.current;
+    const isUnchanged = cached === null ? snapshot === null : compare(cached, snapshot);
+    cacheRef.current = isUnchanged ? cached != null ? cached : snapshot : snapshot;
+    return cacheRef.current;
+  } : void 0;
+  const _getClientSnapshot = () => {
+    const data = getClientSnapshot();
+    const snapshot = selector(data);
+    const compare = isEqual != null ? isEqual : shallowEqual;
+    const cached = cacheRef.current;
+    const isUnchanged = cached === null ? snapshot === null : compare(cached, snapshot);
+    cacheRef.current = isUnchanged ? cached != null ? cached : snapshot : snapshot;
+    return cacheRef.current;
+  };
+  const result = (0, import_react3.useSyncExternalStore)(subscribe, _getClientSnapshot, _getServerSnapshot);
+  return typeof window !== "undefined" ? noSsr(result, _getServerSnapshot == null ? void 0 : _getServerSnapshot()) : result;
+};
+
 // src/createRoomBundle.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var createRoomBundle = (client, options) => {
   var _a;
   const _initialStorage = (_a = options.initialStorage) != null ? _a : import_crdt.noop.doc();
-  const PluvRoomContext = (0, import_react2.createContext)(null);
-  const MockedRoomContext = (0, import_react2.createContext)({ room: null });
-  const MockedRoomProvider = (0, import_react2.memo)((props) => {
+  const PluvRoomContext = (0, import_react4.createContext)(null);
+  const MockedRoomContext = (0, import_react4.createContext)({ room: null });
+  const MockedRoomProvider = (0, import_react4.memo)((props) => {
     const { children, events, initialPresence, initialStorage, room: _room } = props;
-    const [room] = (0, import_react2.useState)(() => {
+    const [room] = (0, import_react4.useState)(() => {
       return new import_client.MockedRoom(_room, {
         events,
         initialPresence,
@@ -86,11 +129,11 @@ var createRoomBundle = (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_react2.memo)((props) => {
+  const PluvRoomProvider = (0, import_react4.memo)((props) => {
     const { children, debug, initialPresence, initialStorage, onAuthorizationFail, room: _room } = props;
     const rerender = useRerender();
-    const { room: mockedRoom } = (0, import_react2.useContext)(MockedRoomContext);
-    const [room] = (0, import_react2.useState)(() => {
+    const { room: mockedRoom } = (0, import_react4.useContext)(MockedRoomContext);
+    const [room] = (0, import_react4.useState)(() => {
       return client.createRoom(_room, {
         addons: options.addons,
         debug,
@@ -100,7 +143,7 @@ var createRoomBundle = (client, options) => {
         onAuthorizationFail
       });
     });
-    (0, import_react2.useEffect)(() => {
+    (0, import_react4.useEffect)(() => {
       const unsubscribe = room.subscribe("connection", () => {
         rerender();
       });
@@ -108,7 +151,7 @@ var createRoomBundle = (client, options) => {
         unsubscribe();
       };
     }, [rerender, room]);
-    (0, import_react2.useEffect)(() => {
+    (0, import_react4.useEffect)(() => {
       client.enter(room);
       return () => {
         client.leave(room);
@@ -117,16 +160,16 @@ var createRoomBundle = (client, options) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PluvRoomContext.Provider, { value: mockedRoom != null ? mockedRoom : room, children });
   });
   PluvRoomProvider.displayName = "PluvRoomProvider";
-  const useRoom = () => (0, import_react2.useContext)(PluvRoomContext);
+  const useRoom = () => (0, import_react4.useContext)(PluvRoomContext);
   const useBroadcast = () => {
     const room = useRoom();
-    const broadcast = (0, import_react2.useCallback)(
+    const broadcast = (0, import_react4.useCallback)(
       (event2, data) => {
         room.broadcast(event2, data);
       },
       [room]
     );
-    return (0, import_react2.useMemo)(() => {
+    return (0, import_react4.useMemo)(() => {
       return new Proxy(broadcast, {
         get(fn, prop) {
           return (data) => {
@@ -138,30 +181,30 @@ var createRoomBundle = (client, options) => {
   };
   const useCanRedo = () => {
     const room = useRoom();
-    const subscribe = (0, import_react2.useCallback)((onStoreChange) => room.storageRoot(onStoreChange), [room]);
-    const getSnapshot = (0, import_react2.useCallback)(() => room.canRedo(), [room]);
-    const canRedo = (0, import_with_selector.useSyncExternalStoreWithSelector)(subscribe, getSnapshot, getSnapshot, identity);
+    const subscribe = (0, import_react4.useCallback)((onStoreChange) => room.storageRoot(onStoreChange), [room]);
+    const getSnapshot = (0, import_react4.useCallback)(() => room.canRedo(), [room]);
+    const canRedo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
     return canRedo;
   };
   const useCanUndo = () => {
     const room = useRoom();
-    const subscribe = (0, import_react2.useCallback)((onStoreChange) => room.storageRoot(onStoreChange), [room]);
-    const getSnapshot = (0, import_react2.useCallback)(() => room.canUndo(), [room]);
-    const canRedo = (0, import_with_selector.useSyncExternalStoreWithSelector)(subscribe, getSnapshot, getSnapshot, identity);
-    return canRedo;
+    const subscribe = (0, import_react4.useCallback)((onStoreChange) => room.storageRoot(onStoreChange), [room]);
+    const getSnapshot = (0, import_react4.useCallback)(() => room.canUndo(), [room]);
+    const canUndo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
+    return canUndo;
   };
   const useConnection = (selector = identity, options2) => {
     var _a2;
     const room = useRoom();
-    const subscribe = (0, import_react2.useCallback)(
+    const subscribe = (0, import_react4.useCallback)(
       (onStoreChange) => {
         return room.subscribe("connection", onStoreChange);
       },
       [room]
     );
     const getSnapshot = room.getConnection;
-    const _selector = (0, import_react2.useCallback)((snapshot) => selector(snapshot), [selector]);
-    return (0, import_with_selector.useSyncExternalStoreWithSelector)(
+    const _selector = (0, import_react4.useCallback)((snapshot) => selector(snapshot), [selector]);
+    return useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
       getSnapshot,
@@ -175,7 +218,7 @@ var createRoomBundle = (client, options) => {
   };
   const useEvent = (type, callback) => {
     const room = useRoom();
-    (0, import_react2.useEffect)(() => {
+    (0, import_react4.useEffect)(() => {
       const unsubscribe = room.event(type, callback);
       return () => {
         unsubscribe();
@@ -196,47 +239,40 @@ var createRoomBundle = (client, options) => {
   const useMyPresence = (selector = identity, options2) => {
     var _a2;
     const room = useRoom();
-    const subscribe = (0, import_react2.useCallback)(
+    const subscribe = (0, import_react4.useCallback)(
       (onStoreChange) => {
         return room.subscribe("my-presence", onStoreChange);
       },
       [room]
     );
     const getSnapshot = room.getMyPresence;
-    const _selector = (0, import_react2.useCallback)((snapshot) => selector(snapshot), [selector]);
-    const myPresence = (0, import_with_selector.useSyncExternalStoreWithSelector)(
+    const _selector = (0, import_react4.useCallback)((snapshot) => selector(snapshot), [selector]);
+    const myPresence = useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
       getSnapshot,
       _selector,
       (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : import_fast_deep_equal.default
     );
-    const updateMyPresence = (0, import_react2.useCallback)(
-      (value) => {
-        const presence = typeof value === "function" ? value(room.getMyPresence()) : value;
-        room.updateMyPresence(presence);
-      },
-      [room]
-    );
-    return [myPresence, updateMyPresence];
+    return [myPresence, room.updateMyPresence];
   };
   const useMyself = (selector = identity, options2) => {
     var _a2;
     const room = useRoom();
-    const subscribe = (0, import_react2.useCallback)(
+    const subscribe = (0, import_react4.useCallback)(
       (onStoreChange) => {
         return room.subscribe("myself", onStoreChange);
       },
       [room]
     );
     const getSnapshot = room.getMyself;
-    const _selector = (0, import_react2.useCallback)(
+    const _selector = (0, import_react4.useCallback)(
       (snapshot) => {
         return !snapshot ? null : selector(snapshot);
       },
       [selector]
     );
-    return (0, import_with_selector.useSyncExternalStoreWithSelector)(
+    return useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
       getSnapshot,
@@ -247,20 +283,20 @@ var createRoomBundle = (client, options) => {
   const useOther = (connectionId, selector = identity, options2) => {
     var _a2;
     const room = useRoom();
-    const subscribe = (0, import_react2.useCallback)(
+    const subscribe = (0, import_react4.useCallback)(
       (onStoreChange) => {
         return room.other(connectionId, onStoreChange);
       },
       [room, connectionId]
     );
-    const getSnapshot = (0, import_react2.useCallback)(() => room.getOther(connectionId), [room, connectionId]);
-    const _selector = (0, import_react2.useCallback)(
+    const getSnapshot = (0, import_react4.useCallback)(() => room.getOther(connectionId), [room, connectionId]);
+    const _selector = (0, import_react4.useCallback)(
       (snapshot) => {
         return !snapshot ? null : selector(snapshot);
       },
       [selector]
     );
-    return (0, import_with_selector.useSyncExternalStoreWithSelector)(
+    return useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
       getSnapshot,
@@ -271,19 +307,24 @@ var createRoomBundle = (client, options) => {
   const useOthers = (selector = identity, options2) => {
     var _a2;
     const room = useRoom();
-    const subscribe = (0, import_react2.useCallback)(
+    const subscribe = (0, import_react4.useCallback)(
       (onStoreChange) => {
         return room.subscribe("others", onStoreChange);
       },
       [room]
     );
     const getSnapshot = room.getOthers;
-    return (0, import_with_selector.useSyncExternalStoreWithSelector)(
+    return useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
       getSnapshot,
       selector,
-      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : shallowArrayEqual
+      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : (a, b) => {
+        if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
+          return shallowArrayEqual(a, b);
+        }
+        return (0, import_fast_deep_equal.default)(a, b);
+      }
     );
   };
   const useRedo = () => {
@@ -297,18 +338,17 @@ var createRoomBundle = (client, options) => {
     room.subscribe("storage-loaded", () => {
       rerender();
     });
-    const subscribe = (0, import_react2.useCallback)((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
-    const getSnapshot = (0, import_react2.useCallback)(() => {
-      var _a3;
-      return (_a3 = room.getStorage(key)) == null ? void 0 : _a3.toJson();
+    const subscribe = (0, import_react4.useCallback)((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
+    const getSnapshot = (0, import_react4.useCallback)(() => {
+      return room.getStorageJson(key);
     }, [key, room]);
-    const _selector = (0, import_react2.useCallback)(
+    const _selector = (0, import_react4.useCallback)(
       (snapshot) => {
         return snapshot === null ? null : selector(snapshot);
       },
       [selector]
     );
-    const data = (0, import_with_selector.useSyncExternalStoreWithSelector)(
+    const data = useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
       getSnapshot,
@@ -354,13 +394,13 @@ var createRoomBundle = (client, options) => {
 // src/createBundle.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var createBundle = (client) => {
-  const PluvContext = (0, import_react3.createContext)(null);
-  const PluvProvider = (0, import_react3.memo)((props) => {
+  const PluvContext = (0, import_react5.createContext)(null);
+  const PluvProvider = (0, import_react5.memo)((props) => {
     const { children } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PluvContext.Provider, { value: client, children });
   });
   PluvProvider.displayName = "PluvProvider";
-  const useClient = () => (0, import_react3.useContext)(PluvContext);
+  const useClient = () => (0, import_react5.useContext)(PluvContext);
   const createRoomBundle2 = (options) => createRoomBundle(client, options);
   return {
     createRoomBundle: createRoomBundle2,

package/dist/index.mjs

@@ -8,19 +8,33 @@ import { createContext as createContext2, memo as memo2, useContext as useContex
 import { MockedRoom } from "@pluv/client";
 import { noop } from "@pluv/crdt";
 import fastDeepEqual from "fast-deep-equal";
-import { createContext, memo, useCallback as useCallback2, useContext, useEffect, useMemo, useState as useState2 } from "react";
+import { createContext, memo, useCallback as useCallback3, useContext, useEffect as useEffect2, useMemo, useState as useState3 } from "react";
+
+// src/internal/hooks/useNoSsr.ts
+import { useCallback, useEffect, useState } from "react";
+var useNoSsr = () => {
+  const [didMount, setDidMount] = useState(false);
+  useEffect(() => setDidMount(typeof window !== "undefined"), []);
+  const noSsr = useCallback(
+    (value, fallback = null) => {
+      return didMount ? typeof value !== "function" ? value : value() : fallback;
+    },
+    [didMount]
+  );
+  return noSsr;
+};
 
 // src/internal/hooks/useRerender.ts
-import { useCallback, useState } from "react";
+import { useCallback as useCallback2, useState as useState2 } from "react";
 var useRerender = () => {
-  const [, setCount] = useState(0);
-  return useCallback(() => {
+  const [, setCount] = useState2(0);
+  return useCallback2(() => {
     setCount((oldCount) => (oldCount + 1) % Number.MAX_SAFE_INTEGER);
   }, []);
 };
 
 // src/internal/hooks/useSyncExternalStoreWithSelector.ts
-import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector.js";
+import { useRef, useSyncExternalStore } from "react";
 
 // src/internal/utils/identity.ts
 var identity = (x) => x;
@@ -30,6 +44,35 @@ var shallowArrayEqual = (a, b) => {
   return a.length === b.length && a.every((item, i) => item === b[i]);
 };
 
+// src/internal/utils/shallowEqual.ts
+var shallowEqual = (a, b) => a === b;
+
+// src/internal/hooks/useSyncExternalStoreWithSelector.ts
+var useSyncExternalStoreWithSelector = (subscribe, getClientSnapshot, getServerSnapshot, selector, isEqual) => {
+  const noSsr = useNoSsr();
+  const cacheRef = useRef(null);
+  const _getServerSnapshot = getServerSnapshot ? () => {
+    const data = getServerSnapshot();
+    const snapshot = selector(data);
+    const compare = isEqual != null ? isEqual : shallowEqual;
+    const cached = cacheRef.current;
+    const isUnchanged = cached === null ? snapshot === null : compare(cached, snapshot);
+    cacheRef.current = isUnchanged ? cached != null ? cached : snapshot : snapshot;
+    return cacheRef.current;
+  } : void 0;
+  const _getClientSnapshot = () => {
+    const data = getClientSnapshot();
+    const snapshot = selector(data);
+    const compare = isEqual != null ? isEqual : shallowEqual;
+    const cached = cacheRef.current;
+    const isUnchanged = cached === null ? snapshot === null : compare(cached, snapshot);
+    cacheRef.current = isUnchanged ? cached != null ? cached : snapshot : snapshot;
+    return cacheRef.current;
+  };
+  const result = useSyncExternalStore(subscribe, _getClientSnapshot, _getServerSnapshot);
+  return typeof window !== "undefined" ? noSsr(result, _getServerSnapshot == null ? void 0 : _getServerSnapshot()) : result;
+};
+
 // src/createRoomBundle.tsx
 import { jsx } from "react/jsx-runtime";
 var createRoomBundle = (client, options) => {
@@ -39,7 +82,7 @@ var createRoomBundle = (client, options) => {
   const MockedRoomContext = createContext({ room: null });
   const MockedRoomProvider = memo((props) => {
     const { children, events, initialPresence, initialStorage, room: _room } = props;
-    const [room] = useState2(() => {
+    const [room] = useState3(() => {
       return new MockedRoom(_room, {
         events,
         initialPresence,
@@ -54,7 +97,7 @@ var createRoomBundle = (client, options) => {
     const { children, debug, initialPresence, initialStorage, onAuthorizationFail, room: _room } = props;
     const rerender = useRerender();
     const { room: mockedRoom } = useContext(MockedRoomContext);
-    const [room] = useState2(() => {
+    const [room] = useState3(() => {
       return client.createRoom(_room, {
         addons: options.addons,
         debug,
@@ -64,7 +107,7 @@ var createRoomBundle = (client, options) => {
         onAuthorizationFail
       });
     });
-    useEffect(() => {
+    useEffect2(() => {
       const unsubscribe = room.subscribe("connection", () => {
         rerender();
       });
@@ -72,7 +115,7 @@ var createRoomBundle = (client, options) => {
         unsubscribe();
       };
     }, [rerender, room]);
-    useEffect(() => {
+    useEffect2(() => {
       client.enter(room);
       return () => {
         client.leave(room);
@@ -84,7 +127,7 @@ var createRoomBundle = (client, options) => {
   const useRoom = () => useContext(PluvRoomContext);
   const useBroadcast = () => {
     const room = useRoom();
-    const broadcast = useCallback2(
+    const broadcast = useCallback3(
       (event2, data) => {
         room.broadcast(event2, data);
       },
@@ -102,29 +145,29 @@ var createRoomBundle = (client, options) => {
   };
   const useCanRedo = () => {
     const room = useRoom();
-    const subscribe = useCallback2((onStoreChange) => room.storageRoot(onStoreChange), [room]);
-    const getSnapshot = useCallback2(() => room.canRedo(), [room]);
+    const subscribe = useCallback3((onStoreChange) => room.storageRoot(onStoreChange), [room]);
+    const getSnapshot = useCallback3(() => room.canRedo(), [room]);
     const canRedo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
     return canRedo;
   };
   const useCanUndo = () => {
     const room = useRoom();
-    const subscribe = useCallback2((onStoreChange) => room.storageRoot(onStoreChange), [room]);
-    const getSnapshot = useCallback2(() => room.canUndo(), [room]);
-    const canRedo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
-    return canRedo;
+    const subscribe = useCallback3((onStoreChange) => room.storageRoot(onStoreChange), [room]);
+    const getSnapshot = useCallback3(() => room.canUndo(), [room]);
+    const canUndo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
+    return canUndo;
   };
   const useConnection = (selector = identity, options2) => {
     var _a2;
     const room = useRoom();
-    const subscribe = useCallback2(
+    const subscribe = useCallback3(
       (onStoreChange) => {
         return room.subscribe("connection", onStoreChange);
       },
       [room]
     );
     const getSnapshot = room.getConnection;
-    const _selector = useCallback2((snapshot) => selector(snapshot), [selector]);
+    const _selector = useCallback3((snapshot) => selector(snapshot), [selector]);
     return useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
@@ -139,7 +182,7 @@ var createRoomBundle = (client, options) => {
   };
   const useEvent = (type, callback) => {
     const room = useRoom();
-    useEffect(() => {
+    useEffect2(() => {
       const unsubscribe = room.event(type, callback);
       return () => {
         unsubscribe();
@@ -160,14 +203,14 @@ var createRoomBundle = (client, options) => {
   const useMyPresence = (selector = identity, options2) => {
     var _a2;
     const room = useRoom();
-    const subscribe = useCallback2(
+    const subscribe = useCallback3(
       (onStoreChange) => {
         return room.subscribe("my-presence", onStoreChange);
       },
       [room]
     );
     const getSnapshot = room.getMyPresence;
-    const _selector = useCallback2((snapshot) => selector(snapshot), [selector]);
+    const _selector = useCallback3((snapshot) => selector(snapshot), [selector]);
     const myPresence = useSyncExternalStoreWithSelector(
       subscribe,
       getSnapshot,
@@ -175,26 +218,19 @@ var createRoomBundle = (client, options) => {
       _selector,
       (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : fastDeepEqual
     );
-    const updateMyPresence = useCallback2(
-      (value) => {
-        const presence = typeof value === "function" ? value(room.getMyPresence()) : value;
-        room.updateMyPresence(presence);
-      },
-      [room]
-    );
-    return [myPresence, updateMyPresence];
+    return [myPresence, room.updateMyPresence];
   };
   const useMyself = (selector = identity, options2) => {
     var _a2;
     const room = useRoom();
-    const subscribe = useCallback2(
+    const subscribe = useCallback3(
       (onStoreChange) => {
         return room.subscribe("myself", onStoreChange);
       },
       [room]
     );
     const getSnapshot = room.getMyself;
-    const _selector = useCallback2(
+    const _selector = useCallback3(
       (snapshot) => {
         return !snapshot ? null : selector(snapshot);
       },
@@ -211,14 +247,14 @@ var createRoomBundle = (client, options) => {
   const useOther = (connectionId, selector = identity, options2) => {
     var _a2;
     const room = useRoom();
-    const subscribe = useCallback2(
+    const subscribe = useCallback3(
       (onStoreChange) => {
         return room.other(connectionId, onStoreChange);
       },
       [room, connectionId]
     );
-    const getSnapshot = useCallback2(() => room.getOther(connectionId), [room, connectionId]);
-    const _selector = useCallback2(
+    const getSnapshot = useCallback3(() => room.getOther(connectionId), [room, connectionId]);
+    const _selector = useCallback3(
       (snapshot) => {
         return !snapshot ? null : selector(snapshot);
       },
@@ -235,7 +271,7 @@ var createRoomBundle = (client, options) => {
   const useOthers = (selector = identity, options2) => {
     var _a2;
     const room = useRoom();
-    const subscribe = useCallback2(
+    const subscribe = useCallback3(
       (onStoreChange) => {
         return room.subscribe("others", onStoreChange);
       },
@@ -247,7 +283,12 @@ var createRoomBundle = (client, options) => {
       getSnapshot,
       getSnapshot,
       selector,
-      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : shallowArrayEqual
+      (_a2 = options2 == null ? void 0 : options2.isEqual) != null ? _a2 : (a, b) => {
+        if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
+          return shallowArrayEqual(a, b);
+        }
+        return fastDeepEqual(a, b);
+      }
     );
   };
   const useRedo = () => {
@@ -261,12 +302,11 @@ var createRoomBundle = (client, options) => {
     room.subscribe("storage-loaded", () => {
       rerender();
     });
-    const subscribe = useCallback2((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
-    const getSnapshot = useCallback2(() => {
-      var _a3;
-      return (_a3 = room.getStorage(key)) == null ? void 0 : _a3.toJson();
+    const subscribe = useCallback3((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
+    const getSnapshot = useCallback3(() => {
+      return room.getStorageJson(key);
     }, [key, room]);
-    const _selector = useCallback2(
+    const _selector = useCallback3(
       (snapshot) => {
         return snapshot === null ? null : selector(snapshot);
       },

package/package.json

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