@liveblocks/react 0.17.2 → 0.17.5

package/index.d.ts

@@ -240,12 +240,12 @@ declare type RoomContext<
    * @example
    * const animals = useList("animals");  // e.g. [] or ["🦁", "🐍", "🦍"]
    */
-  deprecated_useList<TValue extends Lson>(key: string): LiveList<TValue> | null;
+  useList_deprecated<TValue extends Lson>(key: string): LiveList<TValue> | null;
   /**
    * @deprecated We no longer recommend initializing the
    * items from the useList() hook. For details, see https://bit.ly/3Niy5aP.
    */
-  deprecated_useList<TValue extends Lson>(
+  useList_deprecated<TValue extends Lson>(
     key: string,
     items: TValue[]
   ): LiveList<TValue> | null;
@@ -259,14 +259,14 @@ declare type RoomContext<
    * @example
    * const shapesById = useMap("shapes");
    */
-  deprecated_useMap<TKey extends string, TValue extends Lson>(
+  useMap_deprecated<TKey extends string, TValue extends Lson>(
     key: string
   ): LiveMap<TKey, TValue> | null;
   /**
    * @deprecated We no longer recommend initializing the
    * entries from the useMap() hook. For details, see https://bit.ly/3Niy5aP.
    */
-  deprecated_useMap<TKey extends string, TValue extends Lson>(
+  useMap_deprecated<TKey extends string, TValue extends Lson>(
     key: string,
     entries: readonly (readonly [TKey, TValue])[] | null
   ): LiveMap<TKey, TValue> | null;
@@ -280,14 +280,14 @@ declare type RoomContext<
    * @example
    * const object = useObject("obj");
    */
-  deprecated_useObject<TData extends LsonObject>(
+  useObject_deprecated<TData extends LsonObject>(
     key: string
   ): LiveObject<TData> | null;
   /**
    * @deprecated We no longer recommend initializing the fields from the
    * useObject() hook. For details, see https://bit.ly/3Niy5aP.
    */
-  deprecated_useObject<TData extends LsonObject>(
+  useObject_deprecated<TData extends LsonObject>(
     key: string,
     initialData: TData
   ): LiveObject<TData> | null;

package/index.js

@@ -67,6 +67,9 @@ function useRerender() {
     return x + 1;
   }, 0)[1];
 }
+function useInitial(value) {
+  return React__namespace.useRef(value).current;
+}
 function createRoomContext(client$1) {
   var useClient$1;
   useClient$1 =
@@ -125,7 +128,7 @@ function createRoomContext(client$1) {
       [root]
     );
   }
-  function deprecated_useMap(key, entries) {
+  function useMap_deprecated(key, entries) {
     internal.errorIf(
       entries,
       "Support for initializing entries in useMap() directly will be removed in @liveblocks/react 0.18.\n\nInstead, please initialize this data where you set up your RoomProvider:\n\n    const initialStorage = () => ({\n      " +
@@ -148,7 +151,7 @@ function createRoomContext(client$1) {
         ),
         null);
   }
-  function deprecated_useList(key, items) {
+  function useList_deprecated(key, items) {
     internal.errorIf(
       items,
       'Support for initializing items in useList() directly will be removed in @liveblocks/react 0.18.\n\nInstead, please initialize this data where you set up your RoomProvider:\n\n    import { LiveList } from "@liveblocks/client";\n\n    const initialStorage = () => ({\n      ' +
@@ -168,7 +171,7 @@ function createRoomContext(client$1) {
         ),
         null);
   }
-  function deprecated_useObject(key, initialData) {
+  function useObject_deprecated(key, initialData) {
     internal.errorIf(
       initialData,
       'Support for initializing data in useObject() directly will be removed in @liveblocks/react 0.18.\n\nInstead, please initialize this data where you set up your RoomProvider:\n\n    import { LiveObject } from "@liveblocks/client";\n\n    const initialStorage = () => ({\n      ' +
@@ -194,14 +197,15 @@ function createRoomContext(client$1) {
   function useStorageValue(key, initialValue) {
     var room = useRoom(),
       root = useStorage()[0],
-      rerender = useRerender();
+      rerender = useRerender(),
+      frozenInitialValue = useInitial(initialValue);
     if (
       (React__namespace.useEffect(
         function () {
           if (null != root) {
             var liveValue = root.get(key);
             null == liveValue &&
-              ((liveValue = initialValue), root.set(key, liveValue));
+              ((liveValue = frozenInitialValue), root.set(key, liveValue));
             var unsubscribeCrdt = room.subscribe(liveValue, rerender),
               unsubscribeRoot = room.subscribe(root, function () {
                 var newCrdt = root.get(key);
@@ -219,7 +223,7 @@ function createRoomContext(client$1) {
             );
           }
         },
-        [root, room]
+        [root, room, key, frozenInitialValue, rerender]
       ),
       null == root)
     )
@@ -253,6 +257,12 @@ function createRoomContext(client$1) {
           "RoomProvider's `defaultStorageRoot` prop will be removed in @liveblocks/react 0.18. Please use `initialStorage` instead. For more info, see https://bit.ly/3Niy5aP"
         );
       var _client = useClient$1(),
+        frozen = useInitial({
+          initialPresence: initialPresence,
+          initialStorage: initialStorage,
+          defaultPresence: defaultPresence,
+          defaultStorageRoot: defaultStorageRoot,
+        }),
         _React$useState = React__namespace.useState(function () {
           return _client.enter(roomId, {
             initialPresence: initialPresence,
@@ -270,10 +280,10 @@ function createRoomContext(client$1) {
             return (
               setRoom(
                 _client.enter(roomId, {
-                  initialPresence: initialPresence,
-                  initialStorage: initialStorage,
-                  defaultPresence: defaultPresence,
-                  defaultStorageRoot: defaultStorageRoot,
+                  initialPresence: frozen.initialPresence,
+                  initialStorage: frozen.initialStorage,
+                  defaultPresence: frozen.defaultPresence,
+                  defaultStorageRoot: frozen.defaultStorageRoot,
                   DO_NOT_USE_withoutConnecting: "undefined" == typeof window,
                 })
               ),
@@ -282,7 +292,7 @@ function createRoomContext(client$1) {
               }
             );
           },
-          [_client, roomId]
+          [_client, roomId, frozen]
         ),
         React__namespace.createElement(
           RoomCtx.Provider,
@@ -342,10 +352,10 @@ function createRoomContext(client$1) {
     },
     useHistory: useHistory,
     useList: function (key) {
-      return deprecated_useList(key);
+      return useList_deprecated(key);
     },
     useMap: function (key) {
-      return deprecated_useMap(key);
+      return useMap_deprecated(key);
     },
     useMyPresence: function () {
       var room = useRoom(),
@@ -359,7 +369,7 @@ function createRoomContext(client$1) {
               unsubscribe();
             };
           },
-          [room]
+          [room, rerender]
         ),
         [
           presence,
@@ -373,7 +383,7 @@ function createRoomContext(client$1) {
       );
     },
     useObject: function (key) {
-      return deprecated_useObject(key);
+      return useObject_deprecated(key);
     },
     useOthers: function () {
       var room = useRoom(),
@@ -386,7 +396,7 @@ function createRoomContext(client$1) {
               unsubscribe();
             };
           },
-          [room]
+          [room, rerender]
         ),
         room.getOthers()
       );
@@ -407,7 +417,7 @@ function createRoomContext(client$1) {
               unsubscribePresence(), unsubscribeConnection();
             };
           },
-          [room]
+          [room, rerender]
         ),
         room.getSelf()
       );
@@ -425,9 +435,9 @@ function createRoomContext(client$1) {
         [room]
       );
     },
-    deprecated_useList: deprecated_useList,
-    deprecated_useMap: deprecated_useMap,
-    deprecated_useObject: deprecated_useObject,
+    useList_deprecated: useList_deprecated,
+    useMap_deprecated: useMap_deprecated,
+    useObject_deprecated: useObject_deprecated,
   };
 }
 var _hooks = createRoomContext("__legacy");
@@ -498,7 +508,7 @@ var _hooks = createRoomContext("__legacy");
       internal.deprecate(
         "Please use `createRoomContext()` instead of importing `useList` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
       ),
-      _hooks.deprecated_useList(key, items)
+      _hooks.useList_deprecated(key, items)
     );
   }),
   (exports.useMap = function (key, entries) {
@@ -506,7 +516,7 @@ var _hooks = createRoomContext("__legacy");
       internal.deprecate(
         "Please use `createRoomContext()` instead of importing `useMap` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
       ),
-      _hooks.deprecated_useMap(key, entries)
+      _hooks.useMap_deprecated(key, entries)
     );
   }),
   (exports.useMyPresence = function () {
@@ -522,7 +532,7 @@ var _hooks = createRoomContext("__legacy");
       internal.deprecate(
         "Please use `createRoomContext()` instead of importing `useObject` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
       ),
-      _hooks.deprecated_useObject(key, initialData)
+      _hooks.useObject_deprecated(key, initialData)
     );
   }),
   (exports.useOthers = function () {

package/index.mjs

@@ -55,6 +55,9 @@ function useRerender() {
   const [, update] = useReducer((x) => x + 1, 0);
   return update;
 }
+function useInitial(value) {
+  return React.useRef(value).current;
+}
 function createRoomContext(client) {
   let useClient$1;
   useClient$1 = "__legacy" !== client ? () => client : useClient;
@@ -86,7 +89,7 @@ function createRoomContext(client) {
       [root]
     );
   }
-  function deprecated_useMap(key, entries) {
+  function useMap_deprecated(key, entries) {
     errorIf(
       entries,
       `Support for initializing entries in useMap() directly will be removed in @liveblocks/react 0.18.\n\nInstead, please initialize this data where you set up your RoomProvider:\n\n    const initialStorage = () => ({\n      ${JSON.stringify(
@@ -109,7 +112,7 @@ function createRoomContext(client) {
         ),
         null);
   }
-  function deprecated_useList(key, items) {
+  function useList_deprecated(key, items) {
     errorIf(
       items,
       `Support for initializing items in useList() directly will be removed in @liveblocks/react 0.18.\n\nInstead, please initialize this data where you set up your RoomProvider:\n\n    import { LiveList } from "@liveblocks/client";\n\n    const initialStorage = () => ({\n      ${JSON.stringify(
@@ -129,7 +132,7 @@ function createRoomContext(client) {
         ),
         null);
   }
-  function deprecated_useObject(key, initialData) {
+  function useObject_deprecated(key, initialData) {
     errorIf(
       initialData,
       `Support for initializing data in useObject() directly will be removed in @liveblocks/react 0.18.\n\nInstead, please initialize this data where you set up your RoomProvider:\n\n    import { LiveObject } from "@liveblocks/client";\n\n    const initialStorage = () => ({\n      ${JSON.stringify(
@@ -155,13 +158,14 @@ function createRoomContext(client) {
   function useStorageValue(key, initialValue) {
     const room = useRoom(),
       [root] = useStorage(),
-      rerender = useRerender();
+      rerender = useRerender(),
+      frozenInitialValue = useInitial(initialValue);
     if (
       (React.useEffect(() => {
         if (null == root) return;
         let liveValue = root.get(key);
         null == liveValue &&
-          ((liveValue = initialValue), root.set(key, liveValue));
+          ((liveValue = frozenInitialValue), root.set(key, liveValue));
         let unsubscribeCrdt = room.subscribe(liveValue, rerender);
         const unsubscribeRoot = room.subscribe(root, function () {
           const newCrdt = root.get(key);
@@ -177,7 +181,7 @@ function createRoomContext(client) {
             unsubscribeRoot(), unsubscribeCrdt();
           }
         );
-      }, [root, room]),
+      }, [root, room, key, frozenInitialValue, rerender]),
       null == root)
     )
       return { status: "loading" };
@@ -214,6 +218,12 @@ function createRoomContext(client) {
           "RoomProvider's `defaultStorageRoot` prop will be removed in @liveblocks/react 0.18. Please use `initialStorage` instead. For more info, see https://bit.ly/3Niy5aP"
         );
       const _client = useClient$1(),
+        frozen = useInitial({
+          initialPresence: initialPresence,
+          initialStorage: initialStorage,
+          defaultPresence: defaultPresence,
+          defaultStorageRoot: defaultStorageRoot,
+        }),
         [room, setRoom] = React.useState(() =>
           _client.enter(roomId, {
             initialPresence: initialPresence,
@@ -228,10 +238,10 @@ function createRoomContext(client) {
           () => (
             setRoom(
               _client.enter(roomId, {
-                initialPresence: initialPresence,
-                initialStorage: initialStorage,
-                defaultPresence: defaultPresence,
-                defaultStorageRoot: defaultStorageRoot,
+                initialPresence: frozen.initialPresence,
+                initialStorage: frozen.initialStorage,
+                defaultPresence: frozen.defaultPresence,
+                defaultStorageRoot: frozen.defaultStorageRoot,
                 DO_NOT_USE_withoutConnecting: "undefined" == typeof window,
               })
             ),
@@ -239,7 +249,7 @@ function createRoomContext(client) {
               _client.leave(roomId);
             }
           ),
-          [_client, roomId]
+          [_client, roomId, frozen]
         ),
         React.createElement(RoomCtx.Provider, { value: room }, props.children)
       );
@@ -288,10 +298,10 @@ function createRoomContext(client) {
     },
     useHistory: useHistory,
     useList: function (key) {
-      return deprecated_useList(key);
+      return useList_deprecated(key);
     },
     useMap: function (key) {
-      return deprecated_useMap(key);
+      return useMap_deprecated(key);
     },
     useMyPresence: function () {
       const room = useRoom(),
@@ -303,7 +313,7 @@ function createRoomContext(client) {
           return () => {
             unsubscribe();
           };
-        }, [room]),
+        }, [room, rerender]),
         [
           presence,
           React.useCallback(
@@ -314,7 +324,7 @@ function createRoomContext(client) {
       );
     },
     useObject: function (key) {
-      return deprecated_useObject(key);
+      return useObject_deprecated(key);
     },
     useOthers: function () {
       const room = useRoom(),
@@ -325,7 +335,7 @@ function createRoomContext(client) {
           return () => {
             unsubscribe();
           };
-        }, [room]),
+        }, [room, rerender]),
         room.getOthers()
       );
     },
@@ -343,7 +353,7 @@ function createRoomContext(client) {
           return () => {
             unsubscribePresence(), unsubscribeConnection();
           };
-        }, [room]),
+        }, [room, rerender]),
         room.getSelf()
       );
     },
@@ -360,9 +370,9 @@ function createRoomContext(client) {
         [room]
       );
     },
-    deprecated_useList: deprecated_useList,
-    deprecated_useMap: deprecated_useMap,
-    deprecated_useObject: deprecated_useObject,
+    useList_deprecated: useList_deprecated,
+    useMap_deprecated: useMap_deprecated,
+    useObject_deprecated: useObject_deprecated,
   };
 }
 const _hooks = createRoomContext("__legacy");
@@ -483,7 +493,7 @@ function useList(key, items) {
     deprecate(
       "Please use `createRoomContext()` instead of importing `useList` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
     ),
-    _hooks.deprecated_useList(key, items)
+    _hooks.useList_deprecated(key, items)
   );
 }
 function useMap(key, entries) {
@@ -491,7 +501,7 @@ function useMap(key, entries) {
     deprecate(
       "Please use `createRoomContext()` instead of importing `useMap` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
     ),
-    _hooks.deprecated_useMap(key, entries)
+    _hooks.useMap_deprecated(key, entries)
   );
 }
 function useObject(key, initialData) {
@@ -499,7 +509,7 @@ function useObject(key, initialData) {
     deprecate(
       "Please use `createRoomContext()` instead of importing `useObject` from `@liveblocks/react` directly. See https://liveblocks.io/docs/guides/upgrading#upgrading-from-0-16-to-0-17 for details."
     ),
-    _hooks.deprecated_useObject(key, initialData)
+    _hooks.useObject_deprecated(key, initialData)
   );
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react",
-  "version": "0.17.2",
+  "version": "0.17.5",
   "description": "A set of React hooks and providers to use Liveblocks declaratively.",
   "main": "./index.js",
   "module": "./index.mjs",
@@ -29,7 +29,7 @@
   },
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@liveblocks/client": "0.17.2",
+    "@liveblocks/client": "0.17.5",
     "react": "^16.14.0 || ^17 || ^18"
   },
   "devDependencies": {
@@ -48,6 +48,7 @@
     "@typescript-eslint/parser": "^5.26.0",
     "eslint": "^8.12.0",
     "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "jest": "^26.6.3",
     "msw": "^0.27.1",