@liveblocks/react - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0-beta

lib/index.d.ts

@@ -12,2 +12,7 @@ import { Client, RecordData, Others, Presence, Record, InitialStorageFactory, Room } from "@liveblocks/client";
 export declare function useOthersPresence<T extends Presence>(room: string): Others<T>;
+export declare function useBroadcastEvent(room: string): (event: any) => void;
+export declare function useEventListener(room: string, callback: ({ actor, event }: {
+    actor: number;
+    event: any;
+}) => void): void;
 declare type StorageActions = {
@@ -14,0 +19,0 @@ createRecord: Room["createRecord"];

lib/index.js

@@ -10,2 +10,3 @@ Object.defineProperty(exports, '__esModule', { value: true });
     ServerMessageType[ServerMessageType["UserLeft"] = 102] = "UserLeft";
+    ServerMessageType[ServerMessageType["Event"] = 103] = "Event";
     ServerMessageType[ServerMessageType["InitialDocumentState"] = 200] = "InitialDocumentState";
@@ -17,2 +18,3 @@ ServerMessageType[ServerMessageType["UpdateStorage"] = 201] = "UpdateStorage";
     ClientMessageType[ClientMessageType["UpdatePresence"] = 100] = "UpdatePresence";
+    ClientMessageType[ClientMessageType["ClientEvent"] = 103] = "ClientEvent";
     ClientMessageType[ClientMessageType["FetchStorage"] = 200] = "FetchStorage";
@@ -671,2 +673,3 @@ ClientMessageType[ClientMessageType["UpdateStorage"] = 201] = "UpdateStorage";
         value === "others-presence" ||
+        value === "event" ||
         value === "close");
@@ -684,2 +687,3 @@ }
         storage: [],
+        event: [],
         "others-presence": [],
@@ -824,2 +828,7 @@ "my-presence": [],
     }
+    function onEvent(message) {
+        for (const listener of _listeners.event) {
+            listener({ actor: message.actor, event: message.event });
+        }
+    }
     function onMessage(event) {
@@ -851,2 +860,6 @@ const message = JSON.parse(event.data);
             }
+            case ServerMessageType.Event: {
+                onEvent(message);
+                break;
+            }
             case ServerMessageType.UserLeft: {
@@ -915,2 +928,3 @@ const userLeftMessage = message;
         _listeners["others-presence"] = [];
+        _listeners.event = [];
         _listeners.storage = [];
@@ -957,2 +971,7 @@ _listeners.close = [];
     }
+    function broadcastEvent(event) {
+        if (state === RoomState.Connected) {
+            send({ type: ClientMessageType.ClientEvent, event });
+        }
+    }
     function addEventListener(type, listener) {
@@ -981,3 +1000,4 @@ if (!isValidRoomEventType(type)) {
                 _listeners.storage.length +
-                _listeners.close.length);
+                _listeners.close.length +
+                _listeners.event.length);
         },
@@ -1014,2 +1034,3 @@ getState() {
         getOthers,
+        broadcastEvent,
     };
@@ -1144,2 +1165,36 @@ }
 }
+function useBroadcastEvent(room) {
+    var client = useClient();
+    React.useEffect(function () {
+        var _room = client.getRoom(room);
+        _room.connect();
+        return function () {
+            if (_room.getListenersCount() === 0) {
+                _room.disconnect();
+            }
+        };
+    }, [client, room]);
+    return React.useCallback(function (event) {
+        var _room = client.getRoom(room);
+        _room.broadcastEvent(event);
+    }, [room, client]);
+}
+function useEventListener(room, callback) {
+    var client = useClient();
+    var savedCallback = React.useRef(callback);
+    React.useEffect(function () {
+        savedCallback.current = callback;
+    });
+    React.useEffect(function () {
+        var _room = client.getRoom(room);
+        _room.connect();
+        _room.addEventListener("event", savedCallback.current);
+        return function () {
+            _room.removeEventListener("event", savedCallback.current);
+            if (_room.getListenersCount() === 0) {
+                _room.disconnect();
+            }
+        };
+    }, [room, client]);
+}
 function useStorage(room, initialStorage) {
@@ -1206,3 +1261,5 @@ var client = useClient();
 exports.createClient = createClient;
+exports.useBroadcastEvent = useBroadcastEvent;
 exports.useClient = useClient;
+exports.useEventListener = useEventListener;
 exports.useMyPresence = useMyPresence;
@@ -1209,0 +1266,0 @@ exports.useOthersPresence = useOthersPresence;

package.json

 {
   "name": "@liveblocks/react",
-  "version": "0.5.0",
+  "version": "0.6.0-beta",
   "description": "",
@@ -16,3 +16,3 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@liveblocks/client": "0.5.0"
+    "@liveblocks/client": "0.6.0-beta"
   },
@@ -19,0 +19,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

137254

increased by4.55%

Lines of code

1276

increased by5.11%

Dependency changes

• + Added@liveblocks/client@0.6.0-beta(transitive)

• - Removed@liveblocks/client@0.5.0(transitive)

• Updated@liveblocks/client@0.6.0-beta