@liveblocks/react 0.18.2 → 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

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"
         })
       );
@@ -166,19 +200,12 @@ function createRoomContext(client) {
   }
   const NOT_FOUND = Symbol();
   function useOther(connectionId, selector, isEqual) {
-    const lastKnownValue = React2.useRef(NOT_FOUND);
     const wrappedSelector = React2.useCallback(
       (others) => {
         const other2 = others.find(
           (other3) => other3.connectionId === connectionId
         );
-        if (other2 !== void 0) {
-          const value = selector(other2);
-          lastKnownValue.current = value;
-          return value;
-        } else {
-          return lastKnownValue.current;
-        }
+        return other2 !== void 0 ? selector(other2) : NOT_FOUND;
       },
       [connectionId, selector]
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react",
-  "version": "0.18.2",
+  "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.2",
+    "@liveblocks/client": "0.18.3",
     "react": "^16.14.0 || ^17 || ^18"
   },
   "repository": {