@liveblocks/react - npm Package Compare versions

Comparing version 0.16.4-beta2 to 0.16.4

index.d.ts

 import * as React from 'react';
 import { Client, Room, Presence, Others, BroadcastOptions, Json, User, LiveObject, Lson, LiveMap, LiveList, LsonObject, History } from '@liveblocks/client';
 export { Json, JsonObject } from '@liveblocks/client';
+import { Resolve, RoomInitializers } from '@liveblocks/client/internal';
 
@@ -19,3 +20,3 @@ declare type LiveblocksProviderProps = {
 
-declare type RoomProviderProps<TStorage> = {
+declare type RoomProviderProps<TStorage> = Resolve<{
     /**
@@ -25,10 +26,4 @@ * The id of the room you want to connect to
     id: string;
-    /**
-     * A callback that let you initialize the default presence when entering the room.
-     * If ommited, the default presence will be an empty object
-     */
-    defaultPresence?: () => Presence;
-    defaultStorageRoot?: TStorage;
     children: React.ReactNode;
-};
+} & RoomInitializers<Presence, TStorage>>;
 /**
@@ -155,39 +150,46 @@ * Makes a Room available in the component hierarchy below.
  * @param key The storage key associated with the LiveMap
- * @param entries Optional entries that are used to create the LiveMap for the first time
  * @returns null while the storage is loading, otherwise, returns the LiveMap associated to the storage
  *
  * @example
- * const emptyMap = useMap("mapA");
- * const mapWithItems = useMap("mapB", [["keyA", "valueA"], ["keyB", "valueB"]]);
+ * const shapesById = useMap<string, Shape>("shapes");
  */
-declare function useMap<TKey extends string, TValue extends Lson>(key: string, entries?: readonly (readonly [TKey, TValue])[] | null | undefined): LiveMap<TKey, TValue> | null;
+declare function useMap<TKey extends string, TValue extends Lson>(key: string): LiveMap<TKey, TValue> | null;
 /**
- * Returns the LiveList associated with the provided key. If the LiveList does not exist, a new LiveList will be created.
+ * @deprecated We no longer recommend initializing the
+ * entries from the useMap() hook. For details, see https://bit.ly/3Niy5aP.
+ */
+declare function useMap<TKey extends string, TValue extends Lson>(key: string, entries: readonly (readonly [TKey, TValue])[] | null): LiveMap<TKey, TValue> | null;
+/**
+ * Returns the LiveList associated with the provided key.
  * The hook triggers a re-render if the LiveList is updated, however it does not triggers a re-render if a nested CRDT is updated.
  *
  * @param key The storage key associated with the LiveList
- * @param items Optional items that are used to create the LiveList for the first time
  * @returns null while the storage is loading, otherwise, returns the LiveList associated to the storage
  *
  * @example
- * const emptyList = useList("listA");
- * const listWithItems = useList("listB", ["a", "b", "c"]);
+ * const animals = useList("animals");  // e.g. [] or ["🦁", "🐍", "🦍"]
  */
-declare function useList<TValue extends Lson>(key: string, items?: TValue[] | undefined): LiveList<TValue> | null;
+declare function useList<TValue extends Lson>(key: string): LiveList<TValue> | null;
 /**
- * Returns the LiveObject associated with the provided key. If the LiveObject does not exist, it will be created with the initialData parameter.
+ * @deprecated We no longer recommend initializing the
+ * items from the useList() hook. For details, see https://bit.ly/3Niy5aP.
+ */
+declare function useList<TValue extends Lson>(key: string, items: TValue[]): LiveList<TValue> | null;
+/**
+ * Returns the LiveObject associated with the provided key.
  * The hook triggers a re-render if the LiveObject is updated, however it does not triggers a re-render if a nested CRDT is updated.
  *
  * @param key The storage key associated with the LiveObject
- * @param initialData Optional data that is used to create the LiveObject for the first time
  * @returns null while the storage is loading, otherwise, returns the LveObject associated to the storage
  *
  * @example
- * const object = useObject("obj", {
- *   company: "Liveblocks",
- *   website: "https://liveblocks.io"
- * });
+ * const object = useObject("obj");
  */
-declare function useObject<TData extends LsonObject>(key: string, initialData?: TData): LiveObject<TData> | null;
+declare function useObject<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.
+ */
+declare function useObject<TData extends LsonObject>(key: string, initialData: TData): LiveObject<TData> | null;
+/**
  * Returns a function that undoes the last operation executed by the current client.
@@ -194,0 +196,0 @@ * It does not impact operations made by other clients.

index.js

@@ -7,2 +7,3 @@ 'use strict';
 var client = require('@liveblocks/client');
+var internal = require('@liveblocks/client/internal');
 
@@ -93,2 +94,4 @@ function _interopNamespace(e) {
   var roomId = props.id,
+      initialPresence = props.initialPresence,
+      initialStorage = props.initialStorage,
       defaultPresence = props.defaultPresence,
@@ -107,2 +110,4 @@ defaultStorageRoot = props.defaultStorageRoot;
 
+  internal.deprecateIf(defaultPresence, "RoomProvider's `defaultPresence` prop will be removed in @liveblocks/react 0.18. Please use `initialPresence` instead. For more info, see https://bit.ly/3Niy5aP", "defaultPresence");
+  internal.deprecateIf(defaultStorageRoot, "RoomProvider's `defaultStorageRoot` prop will be removed in @liveblocks/react 0.18. Please use `initialStorage` instead. For more info, see https://bit.ly/3Niy5aP", "defaultStorageRoot");
   var client = useClient();
@@ -112,3 +117,5 @@
     return client.enter(roomId, {
-      defaultPresence: defaultPresence ? defaultPresence() : undefined,
+      initialPresence: initialPresence,
+      initialStorage: initialStorage,
+      defaultPresence: defaultPresence,
       defaultStorageRoot: defaultStorageRoot,
@@ -123,3 +130,5 @@ DO_NOT_USE_withoutConnecting: typeof window === "undefined"
     setRoom(client.enter(roomId, {
-      defaultPresence: defaultPresence ? defaultPresence() : undefined,
+      initialPresence: initialPresence,
+      initialStorage: initialStorage,
+      defaultPresence: defaultPresence,
       defaultStorageRoot: defaultStorageRoot,
@@ -285,9 +294,33 @@ DO_NOT_USE_withoutConnecting: typeof window === "undefined"
 function useMap(key, entries) {
-  return useCrdt(key, new client.LiveMap(entries));
+  internal.deprecateIf(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(key) + ": new LiveMap(...),\n      ...\n    };\n\n    <RoomProvider initialStorage={initialStorage}>\n      ...\n    </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.");
+  var value = useCrdt(key, new client.LiveMap(entries));
+
+  if (value.status === "ok") {
+    return value.value;
+  } else {
+    internal.deprecateIf(value.status === "notfound", "Key " + JSON.stringify(key) + " was not found in Storage. Starting with 0.18, useMap() will no longer automatically create this key.\n\nInstead, please initialize your storage where you set up your RoomProvider:\n\n    import { LiveMap } from \"@liveblocks/client\";\n\n    const initialStorage = () => {\n      " + JSON.stringify(key) + ": new LiveMap(...),\n      ...\n    };\n\n    <RoomProvider initialStorage={initialStorage}>\n      ...\n    </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.");
+    return null;
+  }
 }
 function useList(key, items) {
-  return useCrdt(key, new client.LiveList(items));
+  internal.deprecateIf(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(key) + ": new LiveList(...),\n      ...\n    };\n\n    <RoomProvider initialStorage={initialStorage}>\n      ...\n    </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.");
+  var value = useCrdt(key, new client.LiveList(items));
+
+  if (value.status === "ok") {
+    return value.value;
+  } else {
+    internal.deprecateIf(value.status === "notfound", "Key " + JSON.stringify(key) + " was not found in Storage. Starting with 0.18, useList() will no longer automatically create this key.\n\nInstead, please initialize your storage where you set up your RoomProvider:\n\n    import { LiveList } from \"@liveblocks/client\";\n\n    const initialStorage = () => {\n      " + JSON.stringify(key) + ": new LiveList(...),\n      ...\n    };\n\n    <RoomProvider initialStorage={initialStorage}>\n      ...\n    </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.");
+    return null;
+  }
 }
 function useObject(key, initialData) {
-  return useCrdt(key, new client.LiveObject(initialData));
+  internal.deprecateIf(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(key) + ": new LiveObject(...),\n      ...\n    };\n\n    <RoomProvider initialStorage={initialStorage}>\n      ...\n    </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.");
+  var value = useCrdt(key, new client.LiveObject(initialData));
+
+  if (value.status === "ok") {
+    return value.value;
+  } else {
+    internal.deprecateIf(value.status === "notfound", "Key " + JSON.stringify(key) + " was not found in Storage. Starting with 0.18, useObject() will no longer automatically create this key.\n\nInstead, please initialize your storage where you set up your RoomProvider:\n\n    import { LiveObject } from \"@liveblocks/client\";\n\n    const initialStorage = () => {\n      " + JSON.stringify(key) + ": new LiveObject(...),\n      ...\n    };\n\n    <RoomProvider initialStorage={initialStorage}>\n      ...\n    </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.");
+    return null;
+  }
 }
@@ -308,4 +341,2 @@ function useUndo() {
 function useCrdt(key, initialCrdt) {
-  var _root$get;
-
   var room = useRoom();
@@ -348,3 +379,21 @@
   }, [root, room]);
-  return (_root$get = root == null ? void 0 : root.get(key)) != null ? _root$get : null;
+
+  if (root == null) {
+    return {
+      status: "loading"
+    };
+  } else {
+    var value = root.get(key);
+
+    if (value == null) {
+      return {
+        status: "notfound"
+      };
+    } else {
+      return {
+        status: "ok",
+        value: value
+      };
+    }
+  }
 }
@@ -351,0 +400,0 @@

package.json

 {
   "name": "@liveblocks/react",
-  "version": "0.16.4-beta2",
+  "version": "0.16.4",
   "description": "A set of React hooks and providers to use Liveblocks declaratively.",
@@ -30,3 +30,3 @@ "main": "./index.js",
   "peerDependencies": {
-    "@liveblocks/client": "0.16.4-beta2",
+    "@liveblocks/client": "0.16.4",
     "react": "^16.14.0 || ^17 || ^18"
@@ -33,0 +33,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

43220

increased by19.03%

Lines of code

1049

increased by13.16%

No dependency changes