@liveblocks/react 0.18.1 → 0.18.3

package/index.d.ts

@@ -32,6 +32,21 @@ declare type RoomProviderProps<TPresence extends JsonObject, TStorage extends Ls
      */
     id: string;
     children: React.ReactNode;
+    /**
+     * If you're on React 17 or lower, pass in a reference to
+     * `ReactDOM.unstable_batchedUpdates` or
+     * `ReactNative.unstable_batchedUpdates` here.
+     *
+     * @example
+     * import { unstable_batchedUpdates } from "react-dom";
+     *
+     * <RoomProvider ... unstable_batchedUpdates={unstable_batchedUpdates} />
+     *
+     * This will prevent you from running into the so-called "stale props"
+     * and/or "zombie child" problem that React 17 and lower can suffer from.
+     * Not necessary when you're on React v18 or later.
+     */
+    unstable_batchedUpdates?: (cb: () => void) => void;
 } & RoomInitializers<TPresence, TStorage>>;
 /**
  * For any function type, returns a similar function type, but without the
@@ -318,16 +333,6 @@ declare type RoomContextBundle<TPresence extends JsonObject, TStorage extends Ls
      * );
      */
     useOthersMapped<T>(itemSelector: (other: User<TPresence, TUserMeta>) => T, itemIsEqual?: (prev: T, curr: T) => boolean): ReadonlyArray<readonly [connectionId: number, data: T]>;
-    /**
-     * Given a connection ID (as obtained by using `useOthersConnectionIds`), you can
-     * call this selector deep down in your component stack to only have the
-     * component re-render if properties for this particular user change.
-     *
-     * @example
-     * // Returns full user and re-renders whenever anything on the user changes
-     * const secondUser = useOther(2);
-     */
-    useOther(connectionId: number): User<TPresence, TUserMeta>;
     /**
      * Given a connection ID (as obtained by using `useOthersConnectionIds`), you
      * can call this selector deep down in your component stack to only have the
@@ -635,17 +640,6 @@ declare type RoomContextBundle<TPresence extends JsonObject, TStorage extends Ls
          * );
          */
         useOthersMapped<T>(itemSelector: (other: User<TPresence, TUserMeta>) => T, itemIsEqual?: (prev: T, curr: T) => boolean): ReadonlyArray<readonly [connectionId: number, data: T]>;
-        /**
-         * Given a connection ID (as obtained by using `useOthersConnectionIds`),
-         * you can call this selector deep down in your component stack to only
-         * have the component re-render if properties for this particular user
-         * change.
-         *
-         * @example
-         * // Returns full user and re-renders whenever anything on the user changes
-         * const secondUser = useOther(2);
-         */
-        useOther(connectionId: number): User<TPresence, TUserMeta>;
         /**
          * Given a connection ID (as obtained by using `useOthersConnectionIds`),
          * you can call this selector deep down in your component stack to only

package/index.js

@@ -12,6 +12,10 @@ function ClientSideSuspense(props) {
 
 // src/factory.tsx
 var _client = require('@liveblocks/client');
+
+
+
+
 var _internal = require('@liveblocks/client/internal');
 
 var _withselector = require('use-sync-external-store/shim/with-selector');
@@ -33,8 +37,20 @@ function useInitial(value) {
 var noop = () => {
 };
 var identity = (x) => x;
-function useSyncExternalStore(s, g, gg) {
-  return _withselector.useSyncExternalStoreWithSelector.call(void 0, s, g, gg, identity);
+var missing_unstable_batchedUpdates = (reactVersion, roomId) => `We noticed you\u2019re using React ${reactVersion}. Please pass unstable_batchedUpdates at the RoomProvider level until you\u2019re ready to upgrade to React 18:
+
+    import { unstable_batchedUpdates } from "react-dom";  // or "react-native"
+
+    <RoomProvider id=${JSON.stringify(
+  roomId
+)} ... unstable_batchedUpdates={unstable_batchedUpdates}>
+      ...
+    </RoomProvider>
+
+Why? Please see https://liveblocks.io/docs/guides/troubleshooting#stale-props-zombie-child for more information`;
+var superfluous_unstable_batchedUpdates = "You don\u2019t need to pass unstable_batchedUpdates to RoomProvider anymore, since you\u2019re on React 18+ already.";
+function useSyncExternalStore(s, gs, gss) {
+  return _withselector.useSyncExternalStoreWithSelector.call(void 0, s, gs, gss, identity);
 }
 var EMPTY_OTHERS = _internal.asArrayWithLegacyMethods.call(void 0, []);
 function getEmptyOthers() {
@@ -70,7 +86,12 @@ function makeMutationContext(room) {
 function createRoomContext(client) {
   const RoomContext = React2.createContext(null);
   function RoomProvider(props) {
-    const { id: roomId, initialPresence, initialStorage } = props;
+    const {
+      id: roomId,
+      initialPresence,
+      initialStorage,
+      unstable_batchedUpdates
+    } = props;
     if (process.env.NODE_ENV !== "production") {
       if (!roomId) {
         throw new Error(
@@ -80,15 +101,27 @@ function createRoomContext(client) {
       if (typeof roomId !== "string") {
         throw new Error("RoomProvider id property should be a string.");
       }
+      const majorReactVersion = parseInt(React2.version) || 1;
+      const oldReactVersion = majorReactVersion < 18;
+      _internal.errorIf.call(void 0, 
+        oldReactVersion && props.unstable_batchedUpdates === void 0,
+        missing_unstable_batchedUpdates(majorReactVersion, roomId)
+      );
+      _internal.deprecateIf.call(void 0, 
+        !oldReactVersion && props.unstable_batchedUpdates !== void 0,
+        superfluous_unstable_batchedUpdates
+      );
     }
     const frozen = useInitial({
       initialPresence,
-      initialStorage
+      initialStorage,
+      unstable_batchedUpdates
     });
     const [room, setRoom] = React2.useState(
       () => client.enter(roomId, {
-        initialPresence,
-        initialStorage,
+        initialPresence: frozen.initialPresence,
+        initialStorage: frozen.initialStorage,
+        unstable_batchedUpdates: frozen.unstable_batchedUpdates,
         DO_NOT_USE_withoutConnecting: typeof window === "undefined"
       })
     );
@@ -97,6 +130,7 @@ function createRoomContext(client) {
         client.enter(roomId, {
           initialPresence: frozen.initialPresence,
           initialStorage: frozen.initialStorage,
+          unstable_batchedUpdates: frozen.unstable_batchedUpdates,
           DO_NOT_USE_withoutConnecting: typeof window === "undefined"
         })
       );
@@ -164,50 +198,34 @@ function createRoomContext(client) {
     );
     return useOthers(wrappedSelector, wrappedIsEqual);
   }
-  const sentinel = Symbol();
+  const NOT_FOUND = Symbol();
   function useOther(connectionId, selector, isEqual) {
-    const _useCallback = React2.useCallback;
-    const _useOthers = useOthers;
-    if (selector === void 0) {
-      const selector2 = _useCallback(
-        (others) => others.find((other2) => other2.connectionId === connectionId),
-        [connectionId]
-      );
-      const other = _useOthers(selector2, _client.shallow);
-      if (other === void 0) {
-        throw new Error(
-          `No such other user with connection id ${connectionId} exists`
+    const wrappedSelector = React2.useCallback(
+      (others) => {
+        const other2 = others.find(
+          (other3) => other3.connectionId === connectionId
         );
-      }
-      return other;
-    } else {
-      const wrappedSelector = _useCallback(
-        (others) => {
-          const other2 = others.find(
-            (other3) => other3.connectionId === connectionId
-          );
-          return other2 !== void 0 ? selector(other2) : sentinel;
-        },
-        [connectionId, selector]
-      );
-      const wrappedIsEqual = _useCallback(
-        (prev, curr) => {
-          if (prev === sentinel || curr === sentinel) {
-            return prev === curr;
-          }
-          const eq = isEqual != null ? isEqual : Object.is;
-          return eq(prev, curr);
-        },
-        [isEqual]
+        return other2 !== void 0 ? selector(other2) : NOT_FOUND;
+      },
+      [connectionId, selector]
+    );
+    const wrappedIsEqual = React2.useCallback(
+      (prev, curr) => {
+        if (prev === NOT_FOUND || curr === NOT_FOUND) {
+          return prev === curr;
+        }
+        const eq = isEqual != null ? isEqual : Object.is;
+        return eq(prev, curr);
+      },
+      [isEqual]
+    );
+    const other = useOthers(wrappedSelector, wrappedIsEqual);
+    if (other === NOT_FOUND) {
+      throw new Error(
+        `No such other user with connection id ${connectionId} exists`
       );
-      const other = _useOthers(wrappedSelector, wrappedIsEqual);
-      if (other === sentinel) {
-        throw new Error(
-          `No such other user with connection id ${connectionId} exists`
-        );
-      }
-      return other;
     }
+    return other;
   }
   function useBroadcastEvent() {
     const room = useRoom();
@@ -443,11 +461,7 @@ function createRoomContext(client) {
   }
   function useOtherSuspense(connectionId, selector, isEqual) {
     useSuspendUntilPresenceLoaded();
-    return useOther(
-      connectionId,
-      selector,
-      isEqual
-    );
+    return useOther(connectionId, selector, isEqual);
   }
   function useLegacyKeySuspense(key) {
     useSuspendUntilStorageLoaded();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "description": "A set of React hooks and providers to use Liveblocks declaratively.",
   "main": "./index.js",
   "module": "./index.mjs",
@@ -27,7 +27,7 @@
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {
-    "@liveblocks/client": "0.18.1",
+    "@liveblocks/client": "0.18.3",
     "react": "^16.14.0 || ^17 || ^18"
   },
   "repository": {

package/.built-by-link-script

@@ -1 +0,0 @@
-ab4dc80c03188cfbc87c124cad9c824347a785b0