@liveblocks/react - npm Package Compare versions

Comparing version 0.12.3 to 0.13.0-beta.1

lib/index.d.ts

@@ -1,2 +0,2 @@
-import { Client, Others, Presence, LiveObject, LiveMap, User, LiveList } from "@liveblocks/client";
+import { Client, Others, Presence, LiveObject, LiveMap, Room, User, LiveList } from "@liveblocks/client";
 import * as React from "react";
@@ -31,2 +31,6 @@ declare type LiveblocksProviderProps = {
 /**
+ * Returns the room of the nearest RoomProvider above in the react component tree
+ */
+export declare function useRoom(): Room;
+/**
  * Returns the presence of the current user of the current room, and a function to update it.
@@ -47,3 +51,5 @@ * It is different from the setState function returned by the useState hook from React.
     T,
-    (overrides: Partial<T>) => void
+    (overrides: Partial<T>, options?: {
+        addToHistory: boolean;
+    }) => void
 ];
@@ -63,3 +69,5 @@ /**
  */
-export declare function useUpdateMyPresence<T extends Presence>(): (overrides: Partial<T>) => void;
+export declare function useUpdateMyPresence<T extends Presence>(): (overrides: Partial<T>, options?: {
+    addToHistory: boolean;
+}) => void;
 /**
@@ -176,11 +184,24 @@ * Returns an object that lets you get information about all the the users currently connected in the room.
 /**
- * Returns a function that undo the last operation executed by the current client.
- * Undo does not impact operations made by other clients.
+ * Returns a function that undoes the last operation executed by the current client.
+ * It does not impact operations made by other clients.
  */
 export declare function useUndo(): () => void;
 /**
- * Returns a function that redo the last operation executed by the current client.
- * Redo does not impact operations made by other clients.
+ * Returns a function that redoes the last operation executed by the current client.
+ * It does not impact operations made by other clients.
  */
 export declare function useRedo(): () => void;
+/**
+ * Returns a function that batches modifications made during the given function.
+ * All the modifications are sent to other clients in a single message.
+ * All the modifications are merged in a single history item (undo/redo).
+ * All the subscribers are called only after the batch is over.
+ */
+export declare function useBatch(): (fn: () => void) => void;
+export declare function useHistory(): {
+    undo: () => void;
+    redo: () => void;
+    pause: () => void;
+    resume: () => void;
+};
 export {};

lib/index.js

@@ -129,8 +129,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
         }
-        room.subscribe("my-presence", onMyPresenceChange);
+        var unsubscribe = room.subscribe("my-presence", onMyPresenceChange);
         return function () {
-            room.unsubscribe("my-presence", onMyPresenceChange);
+            unsubscribe();
         };
     }, [room]);
-    var setPresence = React.useCallback(function (overrides) { return room.updatePresence(overrides); }, [room]);
+    var setPresence = React.useCallback(function (overrides, options) {
+        return room.updatePresence(overrides, options);
+    }, [room]);
     return [presence, setPresence];
@@ -153,4 +155,4 @@ }
     var room = useRoom();
-    return React.useCallback(function (overrides) {
-        room.updatePresence(overrides);
+    return React.useCallback(function (overrides, options) {
+        room.updatePresence(overrides, options);
     }, [room]);
@@ -183,5 +185,5 @@ }
         }
-        room.subscribe("others", onOthersChange);
+        var unsubscribe = room.subscribe("others", onOthersChange);
         return function () {
-            room.subscribe("others", onOthersChange);
+            unsubscribe();
         };
@@ -225,5 +227,5 @@ }, [room]);
         var listener = function (e) { return savedCallback.current(e); };
-        room.subscribe("error", listener);
+        var unsubscribe = room.subscribe("error", listener);
         return function () {
-            room.unsubscribe("error", listener);
+            unsubscribe();
         };
@@ -254,5 +256,5 @@ }, [room]);
         };
-        room.subscribe("event", listener);
+        var unsubscribe = room.subscribe("event", listener);
         return function () {
-            room.unsubscribe("event", listener);
+            unsubscribe();
         };
@@ -276,7 +278,7 @@ }, [room]);
         }
-        room.subscribe("my-presence", onChange);
-        room.subscribe("connection", onChange);
+        var unsubscribePresence = room.subscribe("my-presence", onChange);
+        var unsubscribeConnection = room.subscribe("connection", onChange);
         return function () {
-            room.unsubscribe("my-presence", onChange);
-            room.unsubscribe("connection", onChange);
+            unsubscribePresence();
+            unsubscribeConnection();
         };
@@ -362,17 +364,30 @@ }, [room]);
 /**
- * Returns a function that undo the last operation executed by the current client.
- * Undo does not impact operations made by other clients.
+ * Returns a function that undoes the last operation executed by the current client.
+ * It does not impact operations made by other clients.
  */
 function useUndo() {
-    return useRoom().undo;
+    return useRoom().history.undo;
 }
 /**
- * Returns a function that redo the last operation executed by the current client.
- * Redo does not impact operations made by other clients.
+ * Returns a function that redoes the last operation executed by the current client.
+ * It does not impact operations made by other clients.
  */
 function useRedo() {
-    return useRoom().redo;
+    return useRoom().history.redo;
 }
+/**
+ * Returns a function that batches modifications made during the given function.
+ * All the modifications are sent to other clients in a single message.
+ * All the modifications are merged in a single history item (undo/redo).
+ * All the subscribers are called only after the batch is over.
+ */
+function useBatch() {
+    return useRoom().batch;
+}
+function useHistory() {
+    return useRoom().history;
+}
 function useCrdt(key, initialCrdt) {
     var _a;
+    var room = useRoom();
     var root = useStorage()[0];
@@ -395,16 +410,16 @@ var _b = React.useState(0), setCount = _b[1];
             if (newCrdt !== crdt) {
-                crdt.unsubscribe(onChange);
+                unsubscribeCrdt();
                 crdt = newCrdt;
-                crdt.subscribe(onChange);
+                unsubscribeCrdt = room.subscribe(crdt /* AbstractCrdt */, onChange);
                 setCount(function (x) { return x + 1; });
             }
         }
-        crdt.subscribe(onChange);
-        root.subscribe(onRootChange);
+        var unsubscribeCrdt = room.subscribe(crdt /* AbstractCrdt */, onChange);
+        var unsubscribeRoot = room.subscribe(root /* AbstractCrdt */, onRootChange);
         setCount(function (x) { return x + 1; });
         return function () {
-            root.unsubscribe(onRootChange);
-            crdt.unsubscribe(onChange);
+            unsubscribeRoot();
+            unsubscribeCrdt();
         };
-    }, [root]);
+    }, [root, room]);
     return (_a = root === null || root === void 0 ? void 0 : root.get(key)) !== null && _a !== void 0 ? _a : null;
@@ -415,5 +430,7 @@ }
 exports.RoomProvider = RoomProvider;
+exports.useBatch = useBatch;
 exports.useBroadcastEvent = useBroadcastEvent;
 exports.useErrorListener = useErrorListener;
 exports.useEventListener = useEventListener;
+exports.useHistory = useHistory;
 exports.useList = useList;
@@ -425,2 +442,3 @@ exports.useMap = useMap;
 exports.useRedo = useRedo;
+exports.useRoom = useRoom;
 exports.useSelf = useSelf;
@@ -427,0 +445,0 @@ exports.useStorage = useStorage;

package.json

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

README.md

 <p align="center">
   <a href="https://liveblocks.io">
-    <img src="https://liveblocks.io/icon-192x192.png" height="96">
+    <img src="https://liveblocks.io/images/blog/introducing-liveblocks.png">
   </a>
 </p>
 
-# [Liveblocks](https://liveblocks.io) · [![Twitter Follow](https://shields.io/twitter/follow/liveblocks?label=Follow)](https://twitter.com/liveblocks)
+# Liveblocks · [![Twitter Follow](https://shields.io/twitter/follow/liveblocks?label=Follow)](https://twitter.com/liveblocks)
 
-Liveblocks helps you create performant and reliable collaborative experiences.
+**At [Liveblocks](https://liveblocks.io), we’re building tools to help companies create world-class collaborative products that attract, engage and retain users.** This repository is a set of open-source packages for building performant and reliable multiplayer experiences.
 
-## [Documentation](https://liveblocks.io/docs)
-
 ## Examples
 
-Try it live on [liveblocks.io](https://liveblocks.io/examples).
+- Browse our gallery of collaborative UI patterns. [View examples gallery](https://liveblocks.io/examples)
+- Explore and clone any of our open-source examples. [View code examples](https://github.com/liveblocks/liveblocks/tree/main/examples)
 
-Clone one of our [examples](https://github.com/liveblocks/liveblocks/tree/main/examples).
+## Packages
+
+- [@liveblocks/client](https://github.com/liveblocks/liveblocks/tree/main/packages/liveblocks)
+- [@liveblocks/react](https://github.com/liveblocks/liveblocks/tree/main/packages/liveblocks-react)
+- [@liveblocks/node](https://github.com/liveblocks/liveblocks/tree/main/packages/liveblocks-node)
+
+## Documentation
+
+[Read the documentation](https://liveblocks.io/docs) to start using Liveblocks.
+
+## Releases
+
+For changelog, visit [https://github.com/liveblocks/liveblocks/releases](https://github.com/liveblocks/liveblocks/releases).
+
+## Authors
+
+- Guillaume Salles ([@guillaume_slls](https://twitter.com/guillaume_slls)) - [Liveblocks](https://liveblocks.io)
+- Olivier Foucherot ([@ofoucherot](https://twitter.com/ofoucherot)) - [Liveblocks](https://liveblocks.io)
+- Steven Fabre ([@stevenfabre](https://twitter.com/stevenfabre)) - [Liveblocks](https://liveblocks.io)
+
+## Community
+
+- [Slack](https://join.slack.com/t/liveblocks-community/shared_invite/zt-qozwnk75-6RB0i1wk1lx470KX0YuZxQ) - To get involved with the Liveblocks community, ask questions and share tips.
+- [Twitter](https://twitter.com/liveblocks) - To receive updates, announcements, blog posts, and general Liveblocks tips.
+
+## License
+
+Licensed under the Apache License 2.0, Copyright © 2021-present [Liveblocks](https://liveblocks.io).
+
+See [LICENSE](./LICENSE) for more information.

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

48787

increased by8.75%

Lines of code

634

increased by6.55%

Number of lines in readme file

46

increased by155.56%

No dependency changes