@pluv/react 0.17.3 → 0.19.0

package/dist/index.mjs

@@ -8,26 +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,
-  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;
@@ -37,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) => {
@@ -45,14 +76,8 @@ var createRoomBundle = (client, options) => {
   const PluvRoomContext = createContext(null);
   const MockedRoomContext = createContext({ room: null });
   const MockedRoomProvider = memo((props) => {
-    const {
-      children,
-      events,
-      initialPresence,
-      initialStorage,
-      room: _room
-    } = props;
-    const [room] = useState2(() => {
+    const { children, events, initialPresence, initialStorage, room: _room } = props;
+    const [room] = useState3(() => {
       return new MockedRoom(_room, {
         events,
         initialPresence,
@@ -64,17 +89,10 @@ var createRoomBundle = (client, options) => {
   });
   MockedRoomProvider.displayName = "MockedRoomProvider";
   const PluvRoomProvider = memo((props) => {
-    const {
-      children,
-      debug,
-      initialPresence,
-      initialStorage,
-      onAuthorizationFail,
-      room: _room
-    } = props;
+    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,
@@ -84,7 +102,7 @@ var createRoomBundle = (client, options) => {
         onAuthorizationFail
       });
     });
-    useEffect(() => {
+    useEffect2(() => {
       const unsubscribe = room.subscribe("connection", () => {
         rerender();
       });
@@ -92,7 +110,7 @@ var createRoomBundle = (client, options) => {
         unsubscribe();
       };
     }, [rerender, room]);
-    useEffect(() => {
+    useEffect2(() => {
       client.enter(room);
       return () => {
         client.leave(room);
@@ -104,57 +122,47 @@ var createRoomBundle = (client, options) => {
   const useRoom = () => useContext(PluvRoomContext);
   const useBroadcast = () => {
     const room = useRoom();
-    return useCallback2(
-      (event, data) => {
-        room.broadcast(event, data);
+    const broadcast = useCallback3(
+      (event2, data) => {
+        room.broadcast(event2, data);
       },
       [room]
     );
+    return useMemo(() => {
+      return new Proxy(broadcast, {
+        get(fn, prop) {
+          return (data) => {
+            return fn(prop, data);
+          };
+        }
+      });
+    }, [broadcast]);
   };
   const useCanRedo = () => {
     const room = useRoom();
-    const subscribe = useCallback2(
-      (onStoreChange) => room.storageRoot(onStoreChange),
-      [room]
-    );
-    const getSnapshot = useCallback2(() => room.canRedo(), [room]);
-    const canRedo = useSyncExternalStoreWithSelector(
-      subscribe,
-      getSnapshot,
-      getSnapshot,
-      identity
-    );
+    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,
@@ -169,27 +177,35 @@ var createRoomBundle = (client, options) => {
   };
   const useEvent = (type, callback) => {
     const room = useRoom();
-    useEffect(() => {
+    useEffect2(() => {
       const unsubscribe = room.event(type, callback);
       return () => {
         unsubscribe();
       };
     }, [callback, room, type]);
   };
+  const event = new Proxy(
+    {},
+    {
+      get(_, prop) {
+        const useProxyEvent = (callback) => {
+          return useEvent(prop, callback);
+        };
+        return { useEvent: useProxyEvent };
+      }
+    }
+  );
   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,
@@ -197,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);
       },
@@ -233,17 +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);
       },
@@ -260,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);
       },
@@ -272,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 = () => {
@@ -286,15 +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);
       },
@@ -322,6 +330,8 @@ var createRoomBundle = (client, options) => {
     // components
     MockedRoomProvider,
     PluvRoomProvider,
+    // proxies
+    event,
     // hooks
     useBroadcast,
     useCanRedo,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/react",
-  "version": "0.17.3",
+  "version": "0.19.0",
   "description": "@pluv/client React.js bindings",
   "author": "leedavidcs",
   "license": "MIT",
@@ -17,24 +17,23 @@
     "access": "public"
   },
   "dependencies": {
-    "@types/react": "^18.2.78",
-    "@types/use-sync-external-store": "^0.0.6",
     "fast-deep-equal": "^3.1.3",
-    "use-sync-external-store": "^1.2.0",
-    "@pluv/client": "^0.17.3",
-    "@pluv/crdt": "^0.17.3",
-    "@pluv/types": "^0.17.3"
+    "@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.2.0",
-    "tsup": "^8.0.2",
+    "react": "^18.3.1",
+    "tsup": "^8.1.0",
     "typescript": "^5.4.5",
-    "@pluv/tsconfig": "^0.17.3",
-    "eslint-config-pluv": "^0.17.3"
+    "@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/createBundle.tsx

@@ -3,10 +3,7 @@ import type { AbstractCrdtType } from "@pluv/crdt";
 import type { IOLike, JsonObject } from "@pluv/types";
 import type { FC, ReactNode } from "react";
 import { createContext, memo, useContext } from "react";
-import type {
-    CreateRoomBundle,
-    CreateRoomBundleOptions,
-} from "./createRoomBundle";
+import type { CreateRoomBundle, CreateRoomBundleOptions } from "./createRoomBundle";
 import { createRoomBundle as _createRoomBundle } from "./createRoomBundle";
 
 export interface PluvProviderProps {
@@ -29,9 +26,7 @@ export interface CreateBundle<TIO extends IOLike> {
     useClient: () => PluvClient<TIO>;
 }
 
-export const createBundle = <TIO extends IOLike>(
-    client: PluvClient<TIO>,
-): CreateBundle<TIO> => {
+export const createBundle = <TIO extends IOLike>(client: PluvClient<TIO>): CreateBundle<TIO> => {
     /**
      * !HACK
      * @description We'll let the context error out if client is not provided,
@@ -44,11 +39,7 @@ export const createBundle = <TIO extends IOLike>(
     const PluvProvider = memo<PluvProviderProps>((props) => {
         const { children } = props;
 
-        return (
-            <PluvContext.Provider value={client}>
-                {children}
-            </PluvContext.Provider>
-        );
+        return <PluvContext.Provider value={client}>{children}</PluvContext.Provider>;
     });
 
     PluvProvider.displayName = "PluvProvider";
@@ -60,8 +51,7 @@ export const createBundle = <TIO extends IOLike>(
         TStorage extends Record<string, AbstractCrdtType<any, any>> = {},
     >(
         options: CreateRoomBundleOptions<TIO, TPresence, TStorage>,
-    ): CreateRoomBundle<TIO, TPresence, TStorage> =>
-        _createRoomBundle(client, options);
+    ): CreateRoomBundle<TIO, TPresence, TStorage> => _createRoomBundle(client, options);
 
     return {
         createRoomBundle,