@pluv/react 0.18.0 → 0.19.0

package/.turbo/turbo-build.log

@@ -1,18 +1,18 @@
 
-> @pluv/react@0.18.0 build /home/runner/work/pluv/pluv/packages/react
+> @pluv/react@0.19.0 build /home/runner/work/pluv/pluv/packages/react
 > tsup src/index.ts --format esm,cjs --dts --external react
 
-CLI Building entry: src/index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.0.2
-CLI Target: es6
-ESM Build start
-CJS Build start
-CJS dist/index.js 12.77 KB
-CJS ⚡️ Build success in 100ms
-ESM dist/index.mjs 10.18 KB
-ESM ⚡️ Build success in 100ms
-DTS Build start
-DTS ⚡️ Build success in 3856ms
-DTS dist/index.d.mts 5.38 KB
-DTS dist/index.d.ts  5.38 KB
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.1.0
+CLI Target: es6
+ESM Build start
+CJS Build start
+ESM dist/index.mjs 11.61 KB
+ESM ⚡️ Build success in 85ms
+CJS dist/index.js 14.02 KB
+CJS ⚡️ Build success in 86ms
+DTS Build start
+DTS ⚡️ Build success in 4322ms
+DTS dist/index.d.mts 5.35 KB
+DTS dist/index.d.ts  5.35 KB

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @pluv/react
 
+## 0.19.0
+
+### Minor Changes
+
+- 798e32d: **Breaking**: useOthers now allows returning any data besides arrays when using a custom selector.
+- 8450306: **Breaking**: Require minimum react version of ^18.0.0.
+
+### Patch Changes
+
+- 607afe3: Update the `updateMyPresence` function from `useMyPresence` to simply forward the function from the `PluvRoom`. This means all `updateMyPresence` functions should be the same underlying reference across all `useMyPresence` hooks.
+- Updated dependencies [137444b]
+- Updated dependencies [f5e4370]
+  - @pluv/client@0.19.0
+  - @pluv/crdt@0.19.0
+  - @pluv/types@0.19.0
+
 ## 0.18.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -33,7 +33,7 @@ interface SubscriptionHookOptions<T extends unknown> {
 }
 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>]: (callback: Id<InferIOInput<TIO>[event]>) => void;
+    [event in keyof InferIOInput<TIO>]: (input: Id<InferIOInput<TIO>[event]>) => void;
 };
 type EventProxy<TIO extends IOLike> = {
     [event in keyof InferIOOutput<TIO>]: {
@@ -52,8 +52,8 @@ interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TSt
     useEvent: <TType extends keyof InferIOOutput<TIO>>(type: TType, callback: (data: Id<IOEventMessage<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<Id<T> | null>) => Id<T> | null;
-    useOthers: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[], options?: SubscriptionHookOptions<readonly Id<T>[]>) => readonly Id<T>[];
+    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: () => AbstractRoom<TIO, TPresence, TStorage>;
     useStorage: <TKey extends keyof TStorage, TData extends unknown = InferCrdtStorageJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferCrdtStorageJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: TStorage[TKey] | null];

package/dist/index.d.ts

@@ -33,7 +33,7 @@ interface SubscriptionHookOptions<T extends unknown> {
 }
 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>]: (callback: Id<InferIOInput<TIO>[event]>) => void;
+    [event in keyof InferIOInput<TIO>]: (input: Id<InferIOInput<TIO>[event]>) => void;
 };
 type EventProxy<TIO extends IOLike> = {
     [event in keyof InferIOOutput<TIO>]: {
@@ -52,8 +52,8 @@ interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TSt
     useEvent: <TType extends keyof InferIOOutput<TIO>>(type: TType, callback: (data: Id<IOEventMessage<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<Id<T> | null>) => Id<T> | null;
-    useOthers: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[], options?: SubscriptionHookOptions<readonly Id<T>[]>) => readonly Id<T>[];
+    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: () => AbstractRoom<TIO, TPresence, TStorage>;
     useStorage: <TKey extends keyof TStorage, TData extends unknown = InferCrdtStorageJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferCrdtStorageJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: TStorage[TKey] | null];

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,40 @@ 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();
+    return selector(data);
+  } : 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 +124,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 +138,7 @@ var createRoomBundle = (client, options) => {
         onAuthorizationFail
       });
     });
-    (0, import_react2.useEffect)(() => {
+    (0, import_react4.useEffect)(() => {
       const unsubscribe = room.subscribe("connection", () => {
         rerender();
       });
@@ -108,7 +146,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 +155,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 +176,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 +213,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 +234,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 +278,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 +302,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 +333,18 @@ 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)(() => {
+    const subscribe = (0, import_react4.useCallback)((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
+    const getSnapshot = (0, import_react4.useCallback)(() => {
       var _a3;
       return (_a3 = room.getStorage(key)) == null ? void 0 : _a3.toJson();
     }, [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 +390,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,30 @@ 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();
+    return selector(data);
+  } : 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 +77,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 +92,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 +102,7 @@ var createRoomBundle = (client, options) => {
         onAuthorizationFail
       });
     });
-    useEffect(() => {
+    useEffect2(() => {
       const unsubscribe = room.subscribe("connection", () => {
         rerender();
       });
@@ -72,7 +110,7 @@ var createRoomBundle = (client, options) => {
         unsubscribe();
       };
     }, [rerender, room]);
-    useEffect(() => {
+    useEffect2(() => {
       client.enter(room);
       return () => {
         client.leave(room);
@@ -84,7 +122,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 +140,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 +177,7 @@ var createRoomBundle = (client, options) => {
   };
   const useEvent = (type, callback) => {
     const room = useRoom();
-    useEffect(() => {
+    useEffect2(() => {
       const unsubscribe = room.event(type, callback);
       return () => {
         unsubscribe();
@@ -160,14 +198,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 +213,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 +242,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 +266,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 +278,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 +297,12 @@ var createRoomBundle = (client, options) => {
     room.subscribe("storage-loaded", () => {
       rerender();
     });
-    const subscribe = useCallback2((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
-    const getSnapshot = useCallback2(() => {
+    const subscribe = useCallback3((onStoreChange) => room.storage(key, onStoreChange), [key, room]);
+    const getSnapshot = useCallback3(() => {
       var _a3;
       return (_a3 = room.getStorage(key)) == null ? void 0 : _a3.toJson();
     }, [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.19.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.19.0",
+    "@pluv/crdt": "^0.19.0",
+    "@pluv/types": "^0.19.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.19.0",
+    "eslint-config-pluv": "^0.19.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",

package/src/createRoomBundle.tsx

@@ -65,7 +65,7 @@ export type BroadcastProxy<TIO extends IOLike> = (<TEvent extends keyof InferIOI
     event: TEvent,
     data: Id<InferIOInput<TIO>[TEvent]>,
 ) => void) & {
-    [event in keyof InferIOInput<TIO>]: (callback: Id<InferIOInput<TIO>[event]>) => void;
+    [event in keyof InferIOInput<TIO>]: (input: Id<InferIOInput<TIO>[event]>) => void;
 };
 
 export type EventProxy<TIO extends IOLike> = {
@@ -110,12 +110,12 @@ export interface CreateRoomBundle<
     useOther: <T extends unknown = UserInfo<TIO, TPresence>>(
         connectionId: string,
         selector?: (other: UserInfo<TIO, TPresence>) => T,
-        options?: SubscriptionHookOptions<Id<T> | null>,
-    ) => Id<T> | null;
-    useOthers: <T extends unknown = UserInfo<TIO, TPresence>>(
-        selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[],
-        options?: SubscriptionHookOptions<readonly Id<T>[]>,
-    ) => readonly Id<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: () => AbstractRoom<TIO, TPresence, TStorage>;
     useStorage: <TKey extends keyof TStorage, TData extends unknown = InferCrdtStorageJson<TStorage[TKey]>>(
@@ -258,9 +258,9 @@ export const createRoomBundle = <
 
         const getSnapshot = useCallback((): boolean => room.canUndo(), [room]);
 
-        const canRedo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
+        const canUndo = useSyncExternalStoreWithSelector(subscribe, getSnapshot, getSnapshot, identity);
 
-        return canRedo;
+        return canUndo;
     };
 
     const useConnection = <T extends unknown = WebSocketConnection>(
@@ -350,16 +350,7 @@ export const createRoomBundle = <
             options?.isEqual ?? fastDeepEqual,
         );
 
-        const updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>> = useCallback(
-            (value: UpdateMyPresenceAction<TPresence>): void => {
-                const presence = typeof value === "function" ? value(room.getMyPresence()) : value;
-
-                room.updateMyPresence(presence);
-            },
-            [room],
-        );
-
-        return [myPresence, updateMyPresence];
+        return [myPresence, room.updateMyPresence];
     };
 
     const useMyself = <T extends unknown = UserInfo<TIO, TPresence>>(
@@ -396,8 +387,8 @@ export const createRoomBundle = <
     const useOther = <T extends unknown = UserInfo<TIO, TPresence>>(
         connectionId: string,
         selector = identity as (other: UserInfo<TIO, TPresence>) => T,
-        options?: SubscriptionHookOptions<Id<T> | null>,
-    ): Id<T> | null => {
+        options?: SubscriptionHookOptions<T | null>,
+    ): T | null => {
         const room = useRoom();
 
         const subscribe = useCallback(
@@ -411,7 +402,7 @@ export const createRoomBundle = <
 
         const _selector = useCallback(
             (snapshot: Id<UserInfo<TIO, TPresence>> | null) => {
-                return !snapshot ? null : (selector(snapshot) as Id<T>);
+                return !snapshot ? null : (selector(snapshot) as T);
             },
             [selector],
         );
@@ -425,10 +416,10 @@ export const createRoomBundle = <
         );
     };
 
-    const useOthers = <T extends unknown = UserInfo<TIO, TPresence>>(
-        selector = identity as (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[],
-        options?: SubscriptionHookOptions<readonly Id<T>[]>,
-    ): readonly Id<T>[] => {
+    const useOthers = <T extends unknown = readonly UserInfo<TIO, TPresence>[]>(
+        selector = identity as (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T,
+        options?: SubscriptionHookOptions<T>,
+    ): T => {
         const room = useRoom();
 
         const subscribe = useCallback(
@@ -444,8 +435,23 @@ export const createRoomBundle = <
             subscribe,
             getSnapshot,
             getSnapshot,
-            selector as (other: readonly Id<UserInfo<TIO, TPresence>>[]) => Id<T>[],
-            options?.isEqual ?? shallowArrayEqual,
+            selector as (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T,
+            options?.isEqual ??
+                ((a, b) => {
+                    /**
+                     * !HACK
+                     * @description Assume the return type will always be an array when this occurs
+                     * and do a shallow comparison instead like how standard React dependency
+                     * arrays work. This is for performance's sake and may lead to bugs if the
+                     * selector doesn't always return an array
+                     * @date June 22, 2024
+                     */
+                    if (Array.isArray(a) && Array.isArray(b) && a.length === b.length) {
+                        return shallowArrayEqual(a, b);
+                    }
+
+                    return fastDeepEqual(a, b);
+                }),
         );
     };
 

package/src/internal/hooks/index.ts

@@ -1,3 +1,3 @@
+export { useNoSsr } from "./useNoSsr";
 export { useRerender } from "./useRerender";
-export { useSyncExternalStore } from "./useSyncExternalStore";
 export { useSyncExternalStoreWithSelector } from "./useSyncExternalStoreWithSelector";

package/src/internal/hooks/useNoSsr.ts

@@ -0,0 +1,18 @@
+import { useCallback, useEffect, useState } from "react";
+
+export type NoSsrFunction = <T = null>(value: T | (() => T), fallback?: T) => T;
+
+export const useNoSsr = (): NoSsrFunction => {
+    const [didMount, setDidMount] = useState<boolean>(false);
+
+    useEffect(() => setDidMount(typeof window !== "undefined"), []);
+
+    const noSsr = useCallback(
+        <T = null>(value: T | (() => T), fallback: T = null as T): T => {
+            return didMount ? (typeof value !== "function" ? value : (value as () => T)()) : fallback;
+        },
+        [didMount],
+    );
+
+    return noSsr;
+};

package/src/internal/hooks/useSyncExternalStoreWithSelector.ts

@@ -1 +1,44 @@
-export { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector.js";
+import { useRef, useSyncExternalStore } from "react";
+import { shallowEqual } from "../utils";
+import { useNoSsr } from "./useNoSsr";
+
+export const useSyncExternalStoreWithSelector = <TSnapshot, TSelection>(
+    subscribe: (onStoreChange: () => void) => () => void,
+    getClientSnapshot: () => TSnapshot,
+    getServerSnapshot: undefined | null | (() => TSnapshot),
+    selector: (snapshot: TSnapshot) => TSelection,
+    isEqual?: (a: TSelection, b: TSelection) => boolean,
+): TSelection => {
+    const noSsr = useNoSsr();
+    const cacheRef = useRef<TSelection | null>(null);
+
+    const _getServerSnapshot = getServerSnapshot
+        ? () => {
+              const data = getServerSnapshot();
+
+              return selector(data);
+          }
+        : undefined;
+
+    const _getClientSnapshot = () => {
+        const data = getClientSnapshot();
+        const snapshot = selector(data);
+        const compare = isEqual ?? shallowEqual;
+        const cached = cacheRef.current;
+
+        const isUnchanged = cached === null ? snapshot === null : compare(cached, snapshot);
+
+        /**
+         * !HACK
+         * @description Memoize only the last snapshot so that we can only rerender on changes
+         * @date June 22, 2024
+         */
+        cacheRef.current = isUnchanged ? cached ?? snapshot : snapshot;
+
+        return cacheRef.current;
+    };
+
+    const result = useSyncExternalStore(subscribe, _getClientSnapshot, _getServerSnapshot);
+
+    return typeof window !== "undefined" ? noSsr(result, _getServerSnapshot?.()) : result;
+};

package/src/internal/utils/index.ts

@@ -1,2 +1,3 @@
 export { identity } from "./identity";
 export { shallowArrayEqual } from "./shallowArrayEqual";
+export { shallowEqual } from "./shallowEqual";

package/src/internal/utils/shallowEqual.ts

@@ -0,0 +1 @@
+export const shallowEqual = (a: any, b: any): boolean => a === b;

package/tsconfig.json

@@ -1,5 +1,8 @@
 {
 	"extends": "@pluv/tsconfig/react-library.json",
 	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-	"exclude": ["node_modules"]
+	"exclude": ["node_modules"],
+	"compilerOptions": {
+		"lib": ["dom", "esnext"]
+	}
 }

package/src/internal/hooks/useSyncExternalStore.ts

@@ -1,10 +0,0 @@
-import { useSyncExternalStoreWithSelector } from "./useSyncExternalStoreWithSelector";
-import { identity } from "../utils";
-
-export const useSyncExternalStore = <TSnapshot extends unknown>(
-    subscribe: (onStoreChange: () => void) => () => void,
-    getSnapshot: () => TSnapshot,
-    getServerSnapshot: undefined | null | (() => TSnapshot),
-) => {
-    return useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, identity);
-};