@pluv/react 0.17.3 → 0.19.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,22 +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 {
-      children,
-      events,
-      initialPresence,
-      initialStorage,
-      room: _room
-    } = props;
-    const [room] = (0, import_react2.useState)(() => {
+  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_react4.useState)(() => {
       return new import_client.MockedRoom(_room, {
         events,
         initialPresence,
@@ -92,18 +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 {
-      children,
-      debug,
-      initialPresence,
-      initialStorage,
-      onAuthorizationFail,
-      room: _room
-    } = 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,
@@ -113,7 +138,7 @@ var createRoomBundle = (client, options) => {
         onAuthorizationFail
       });
     });
-    (0, import_react2.useEffect)(() => {
+    (0, import_react4.useEffect)(() => {
       const unsubscribe = room.subscribe("connection", () => {
         rerender();
       });
@@ -121,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);
@@ -130,61 +155,51 @@ 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();
-    return (0, import_react2.useCallback)(
-      (event, data) => {
-        room.broadcast(event, data);
+    const broadcast = (0, import_react4.useCallback)(
+      (event2, data) => {
+        room.broadcast(event2, data);
       },
       [room]
     );
+    return (0, import_react4.useMemo)(() => {
+      return new Proxy(broadcast, {
+        get(fn, prop) {
+          return (data) => {
+            return fn(prop, data);
+          };
+        }
+      });
+    }, [broadcast]);
   };
   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,
@@ -198,60 +213,61 @@ 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();
       };
     }, [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 = (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,
@@ -262,23 +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,
@@ -289,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 = () => {
@@ -315,21 +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,
@@ -351,6 +366,8 @@ var createRoomBundle = (client, options) => {
     // components
     MockedRoomProvider,
     PluvRoomProvider,
+    // proxies
+    event,
     // hooks
     useBroadcast,
     useCanRedo,
@@ -373,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,