@liveblocks/react - npm Package Compare versions

Comparing version 0.12.0 to 0.12.1

lib/index.d.ts

@@ -132,14 +132,40 @@ import { Client, Others, Presence, LiveObject, LiveMap, User, LiveList } from "@liveblocks/client";
 /**
- * Returns the LiveMap associated to the provided key. If the LiveList does not exists, a new empty LiveMap will be created.
+ * Returns the LiveMap associated with the provided key. If the LiveMap does not exist, a new empty LiveMap will be created.
  * The hook triggers a re-render if the LiveMap is updated, however it does not triggers a re-render if a nested CRDT is updated.
+ *
+ * @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"]]);
  */
-export declare function useMap<TKey extends string, TValue>(key: string): LiveMap<TKey, TValue> | null;
+export declare function useMap<TKey extends string, TValue>(key: string, entries?: readonly (readonly [TKey, TValue])[] | null | undefined): LiveMap<TKey, TValue> | null;
 /**
- * Returns the LiveList associated to the provided key. If the LiveList does not exists, a new empty LiveList will be created.
+ * Returns the LiveList associated with the provided key. If the LiveList does not exist, a new LiveList will be created.
  * 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"]);
  */
-export declare function useList<TValue>(key: string): LiveList<TValue> | null;
+export declare function useList<TValue>(key: string, items?: TValue[] | undefined): LiveList<TValue> | null;
 /**
- * Returns the LiveObject associated to the provided key. If the LiveObject does not exists, it will be created with the initialData parameter.
+ * Returns the LiveObject associated with the provided key. If the LiveObject does not exist, it will be created with the initialData parameter.
  * 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"
+ * });
  */
@@ -146,0 +172,0 @@ export declare function useObject<TData>(key: string, initialData?: TData): LiveObject<TData> | null;

lib/index.js

@@ -304,62 +304,63 @@ Object.defineProperty(exports, '__esModule', { value: true });
 /**
- * Returns the LiveMap associated to the provided key. If the LiveList does not exists, a new empty LiveMap will be created.
+ * Returns the LiveMap associated with the provided key. If the LiveMap does not exist, a new empty LiveMap will be created.
  * The hook triggers a re-render if the LiveMap is updated, however it does not triggers a re-render if a nested CRDT is updated.
+ *
+ * @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"]]);
  */
-function useMap(key) {
-    var _a;
-    var root = useStorage()[0];
-    var _b = React.useState(0), setCount = _b[1];
-    React.useEffect(function () {
-        if (root == null) {
-            return;
-        }
-        var map = root.get(key);
-        if (map == null) {
-            map = new client.LiveMap();
-            root.set(key, map);
-        }
-        function onChange() {
-            setCount(function (x) { return x + 1; });
-        }
-        map.subscribe(onChange);
-        setCount(function (x) { return x + 1; });
-        return function () {
-            return map.unsubscribe(onChange);
-        };
-    }, [root]);
-    return (_a = root === null || root === void 0 ? void 0 : root.get(key)) !== null && _a !== void 0 ? _a : null;
+function useMap(key, entries) {
+    return useCrdt(key, new client.LiveMap(entries));
 }
 /**
- * Returns the LiveList associated to the provided key. If the LiveList does not exists, a new empty LiveList will be created.
+ * Returns the LiveList associated with the provided key. If the LiveList does not exist, a new LiveList will be created.
  * 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"]);
  */
-function useList(key) {
-    var _a;
-    var root = useStorage()[0];
-    var _b = React.useState(0), setCount = _b[1];
-    React.useEffect(function () {
-        if (root == null) {
-            return;
-        }
-        var list = root.get(key);
-        if (list == null) {
-            list = new client.LiveList();
-            root.set(key, list);
-        }
-        function onChange() {
-            setCount(function (x) { return x + 1; });
-        }
-        list.subscribe(onChange);
-        setCount(function (x) { return x + 1; });
-        return function () {
-            return list.unsubscribe(onChange);
-        };
-    }, [root]);
-    return (_a = root === null || root === void 0 ? void 0 : root.get(key)) !== null && _a !== void 0 ? _a : null;
+function useList(key, items) {
+    return useCrdt(key, new client.LiveList(items));
 }
 /**
- * Returns the LiveObject associated to the provided key. If the LiveObject does not exists, it will be created with the initialData parameter.
+ * Returns the LiveObject associated with the provided key. If the LiveObject does not exist, it will be created with the initialData parameter.
  * 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"
+ * });
  */
 function useObject(key, initialData) {
+    return useCrdt(key, new client.LiveObject(initialData));
+}
+/**
+ * Returns a function that undo the last operation executed by the current client.
+ * Undo does not impact operations made by other clients.
+ */
+function useUndo() {
+    return useRoom().undo;
+}
+/**
+ * Returns a function that redo the last operation executed by the current client.
+ * Redo does not impact operations made by other clients.
+ */
+function useRedo() {
+    return useRoom().redo;
+}
+function useCrdt(key, initialCrdt) {
     var _a;
@@ -372,6 +373,6 @@ var root = useStorage()[0];
         }
-        var obj = root.get(key);
-        if (obj == null) {
-            obj = new client.LiveObject(initialData);
-            root.set(key, obj);
+        var crdt = root.get(key);
+        if (crdt == null) {
+            crdt = initialCrdt;
+            root.set(key, crdt);
         }
@@ -381,6 +382,17 @@ function onChange() {
         }
-        obj.subscribe(onChange);
+        function onRootChange() {
+            var newCrdt = root.get(key);
+            if (newCrdt !== crdt) {
+                crdt.unsubscribe(onChange);
+                crdt = newCrdt;
+                crdt.subscribe(onChange);
+                setCount(function (x) { return x + 1; });
+            }
+        }
+        crdt.subscribe(onChange);
+        root.subscribe(onRootChange);
         setCount(function (x) { return x + 1; });
         return function () {
-            return obj.unsubscribe(onChange);
+            root.unsubscribe(onRootChange);
+            crdt.unsubscribe(onChange);
         };
@@ -390,16 +402,2 @@ }, [root]);
 }
-/**
- * Returns a function that undo the last operation executed by the current client.
- * Undo does not impact operations made by other clients.
- */
-function useUndo() {
-    return useRoom().undo;
-}
-/**
- * Returns a function that redo the last operation executed by the current client.
- * Redo does not impact operations made by other clients.
- */
-function useRedo() {
-    return useRoom().redo;
-}
 
@@ -406,0 +404,0 @@ exports.LiveblocksProvider = LiveblocksProvider;

package.json

 {
   "name": "@liveblocks/react",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "",
@@ -26,3 +26,3 @@ "main": "./lib/index.js",
   "peerDependencies": {
-    "@liveblocks/client": "0.12.0",
+    "@liveblocks/client": "0.12.1",
     "react": "^16.14.0 || ^17"
@@ -29,0 +29,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44522

increased by3.77%

Lines of code

590

increased by4.24%

No dependency changes