@liveblocks/react - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

lib/index.d.ts

@@ -7,24 +7,18 @@ import { Client, RecordData, Others, Presence, Record, InitialStorageFactory, Room } from "@liveblocks/client";
 };
-declare enum ConnectionState {
-    Open = "open",
-    Closed = "closed"
-}
 export declare function LiveblocksProvider({ client, children, }: LiveblocksProviderProps): JSX.Element;
 export declare function useClient(): Client;
-export declare function useConnectionState(room: string): ConnectionState;
 export declare function useMyPresence<T extends Presence>(room: string, initPresence: () => T): [T, (overrides: Partial<T>) => void];
-export declare function useUpdateMyPresence<T extends Presence>(room: string): (overrides: Partial<T>) => void;
+export declare function useUpdateMyPresence<T extends Presence>(room: string, initPresence: () => T): (overrides: Partial<T>) => void;
 export declare function useOthersPresence<T extends Presence>(room: string): Others<T>;
-export declare function useStorage<TRoot extends RecordData>(room: string, initialStorage: InitialStorageFactory<TRoot>): [
-    root: Record<TRoot> | null,
-    actions: {
-        createRecord: Room["createRecord"];
-        updateRecord: Room["updateRecord"];
-        createList: Room["createList"];
-        moveItem: Room["moveItem"];
-        deleteItem: Room["deleteItem"];
-        pushItem: Room["pushItem"];
-    }
-];
+declare type StorageActions = {
+    createRecord: Room["createRecord"];
+    updateRecord: Room["updateRecord"];
+    createList: Room["createList"];
+    moveItem: Room["moveItem"];
+    deleteItem: Room["deleteItem"];
+    pushItem: Room["pushItem"];
+};
+export declare function useStorage<TRoot extends RecordData>(room: string, initialStorage: InitialStorageFactory<TRoot>): [root: Record<TRoot> | null, actions: StorageActions];
+export declare function useStorageActions(room: string): StorageActions;
 export { createClient } from "@liveblocks/client";
 export type { Record, Client, List } from "@liveblocks/client";

lib/index.js

@@ -5,2 +5,29 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
+var ServerMessageType;
+(function (ServerMessageType) {
+    ServerMessageType[ServerMessageType["UpdatePresence"] = 100] = "UpdatePresence";
+    ServerMessageType[ServerMessageType["UserJoined"] = 101] = "UserJoined";
+    ServerMessageType[ServerMessageType["UserLeft"] = 102] = "UserLeft";
+    ServerMessageType[ServerMessageType["InitialDocumentState"] = 200] = "InitialDocumentState";
+    ServerMessageType[ServerMessageType["DocumentOperations"] = 201] = "DocumentOperations";
+})(ServerMessageType || (ServerMessageType = {}));
+var ClientMessageType;
+(function (ClientMessageType) {
+    ClientMessageType[ClientMessageType["UpdatePresence"] = 100] = "UpdatePresence";
+    ClientMessageType[ClientMessageType["FetchStorage"] = 200] = "FetchStorage";
+    ClientMessageType[ClientMessageType["UpdateStorage"] = 201] = "UpdateStorage";
+})(ClientMessageType || (ClientMessageType = {}));
+var OpType;
+(function (OpType) {
+    OpType[OpType["ListInsert"] = 200] = "ListInsert";
+    OpType[OpType["ListMove"] = 201] = "ListMove";
+    OpType[OpType["ListRemove"] = 202] = "ListRemove";
+    OpType[OpType["RecordUpdate"] = 300] = "RecordUpdate";
+})(OpType || (OpType = {}));
+var WebsocketCloseCodes;
+(function (WebsocketCloseCodes) {
+    WebsocketCloseCodes[WebsocketCloseCodes["CLOSE_ABNORMAL"] = 1006] = "CLOSE_ABNORMAL";
+    WebsocketCloseCodes[WebsocketCloseCodes["INVALID_MESSAGE_FORMAT"] = 4000] = "INVALID_MESSAGE_FORMAT";
+})(WebsocketCloseCodes || (WebsocketCloseCodes = {}));
+
 const min = 32;
@@ -113,13 +140,6 @@ const max = 127;
 
-var OpType;
-(function (OpType) {
-    OpType[OpType["ListInsert"] = 0] = "ListInsert";
-    OpType[OpType["ListMove"] = 1] = "ListMove";
-    OpType[OpType["ListRemove"] = 2] = "ListRemove";
-    OpType[OpType["RecordUpdate"] = 3] = "RecordUpdate";
-})(OpType || (OpType = {}));
 const RECORD = Symbol("liveblocks.record");
 const LIST = Symbol("liveblocks.list");
 function createRecord(id, data) {
-    return Object.assign({ id, type: RECORD }, data);
+    return Object.assign({ id, $$type: RECORD }, data);
 }
@@ -129,3 +149,3 @@ function createList(id, items = []) {
         id,
-        type: LIST,
+        $$type: LIST,
         length: items.length,
@@ -146,3 +166,3 @@ toArray: () => items,
             id,
-            type: RECORD,
+            $$type: RECORD,
         };
@@ -210,3 +230,3 @@ return new Doc(root, { links: new Map(), listCache: new Map() }, emit);
         }
-        if (list.type !== LIST) {
+        if (list.$$type !== LIST) {
             throw new Error(`Node with id "${id}" is not a list`);
@@ -242,3 +262,3 @@ }
         }
-        if (list.type !== LIST) {
+        if (list.$$type !== LIST) {
             throw new Error(`Node with id "${id}" is not a list`);
@@ -263,3 +283,3 @@ }
         }
-        if (list.type !== LIST) {
+        if (list.$$type !== LIST) {
             throw new Error(`Node with id "${id}" is not a list`);
@@ -312,3 +332,3 @@ }
         id: serialized.id,
-        type: RECORD,
+        $$type: RECORD,
     };
@@ -396,3 +416,3 @@ for (const key in serialized.data) {
 function dispatch(node, op, cache, links) {
-    switch (node.type) {
+    switch (node.$$type) {
         case RECORD:
@@ -470,3 +490,3 @@ return dispatchOnRecord(node, op, cache, links);
         }
-        if (currentNode.type === RECORD) {
+        if (currentNode.$$type === RECORD) {
             currentNode = currentNode[link.parentKey];
@@ -486,6 +506,6 @@ }
 function isRecord(value) {
-    return typeof value === "object" && value.type === RECORD;
+    return typeof value === "object" && value.$$type === RECORD;
 }
 function isList(value) {
-    return typeof value === "object" && value.type === LIST;
+    return typeof value === "object" && value.$$type === LIST;
 }
@@ -498,3 +518,3 @@ function isCrdt(value) {
     for (const key in record) {
-        if (key !== "id" && key !== "type") {
+        if (key !== "id" && key !== "$$type") {
             const value = record[key]; // TODO: Find out why typescript does not like that
@@ -529,2 +549,8 @@ serializedData[key] = serialize(value);
 
+var LiveStorageState;
+(function (LiveStorageState) {
+    LiveStorageState[LiveStorageState["NotInitialized"] = 0] = "NotInitialized";
+    LiveStorageState[LiveStorageState["Loading"] = 1] = "Loading";
+    LiveStorageState[LiveStorageState["Loaded"] = 2] = "Loaded";
+})(LiveStorageState || (LiveStorageState = {}));
 var RoomState;
@@ -537,23 +563,2 @@ (function (RoomState) {
 })(RoomState || (RoomState = {}));
-var ServerMessageType;
-(function (ServerMessageType) {
-    ServerMessageType[ServerMessageType["UpdateUserState"] = 100] = "UpdateUserState";
-    ServerMessageType[ServerMessageType["UserJoined"] = 101] = "UserJoined";
-    ServerMessageType[ServerMessageType["UserLeft"] = 102] = "UserLeft";
-    ServerMessageType[ServerMessageType["InitialDocumentState"] = 200] = "InitialDocumentState";
-    ServerMessageType[ServerMessageType["DocumentOperations"] = 201] = "DocumentOperations";
-})(ServerMessageType || (ServerMessageType = {}));
-var ClientMessageType;
-(function (ClientMessageType) {
-    ClientMessageType[ClientMessageType["UpdateUserState"] = 100] = "UpdateUserState";
-    ClientMessageType[ClientMessageType["GetDocument"] = 200] = "GetDocument";
-    ClientMessageType[ClientMessageType["UpdateDocument"] = 201] = "UpdateDocument";
-})(ClientMessageType || (ClientMessageType = {}));
-var OpType$1;
-(function (OpType) {
-    OpType[OpType["ListInsert"] = 0] = "ListInsert";
-    OpType[OpType["ListMove"] = 1] = "ListMove";
-    OpType[OpType["ListRemove"] = 2] = "ListRemove";
-    OpType[OpType["RecordUpdate"] = 3] = "RecordUpdate";
-})(OpType$1 || (OpType$1 = {}));
 
@@ -665,3 +670,3 @@ function remove(array, item) {
 ];
-const WAIT = 100;
+const WAIT = 50;
 function isValidRoomEventType(value) {
@@ -691,2 +696,3 @@ return (value === "open" ||
     let _doc = null;
+    let _storageState = LiveStorageState.NotInitialized;
     let toFlush = [];
@@ -727,3 +733,3 @@ let _lastEmit = 0;
             send({
-                type: ClientMessageType.UpdateDocument,
+                type: ClientMessageType.UpdateStorage,
                 ops: toFlush,
@@ -741,3 +747,3 @@ });
             send({
-                type: ClientMessageType.UpdateDocument,
+                type: ClientMessageType.UpdateStorage,
                 ops: toFlush,
@@ -749,2 +755,27 @@ });
     }
+    function getStorage() {
+        if (_storageState === LiveStorageState.Loaded) {
+            return {
+                state: _storageState,
+                root: _doc.root,
+            };
+        }
+        return {
+            state: _storageState,
+        };
+    }
+    function fetchStorage(initialStorageFactory) {
+        _initialStorageFactory = initialStorageFactory;
+        _storageState = LiveStorageState.Loading;
+        if (state === RoomState.Connected) {
+            send({ type: ClientMessageType.FetchStorage });
+        }
+        else {
+            function onConnect() {
+                send({ type: ClientMessageType.FetchStorage });
+                remove(_listeners.open, onConnect);
+            }
+            _listeners.open.push(onConnect);
+        }
+    }
     function updateDoc(doc) {
@@ -754,3 +785,3 @@ _doc = doc;
             for (const listener of _listeners.storage) {
-                listener(doc.root);
+                listener(getStorage());
             }
@@ -772,2 +803,3 @@ }
     function onGetDocument(message) {
+        _storageState = LiveStorageState.Loaded;
         if (message.root == null) {
@@ -796,3 +828,3 @@ const rootId = makeId();
         if (_me != null) {
-            send({ type: ClientMessageType.UpdateUserState, data: _me });
+            send({ type: ClientMessageType.UpdatePresence, data: _me });
         }
@@ -817,3 +849,3 @@ for (const callback of _listeners.open) {
                 send({
-                    type: ClientMessageType.UpdateUserState,
+                    type: ClientMessageType.UpdatePresence,
                     data: _me,
@@ -824,3 +856,3 @@ targetActor: message.actor,
             }
-            case ServerMessageType.UpdateUserState: {
+            case ServerMessageType.UpdatePresence: {
                 const currentUser = _users[message.actor];
@@ -914,3 +946,3 @@ updateUsers(Object.assign(Object.assign({}, _users), { [message.actor]: currentUser
             send({
-                type: ClientMessageType.UpdateUserState,
+                type: ClientMessageType.UpdatePresence,
                 data: Object.assign(Object.assign({}, _toSend), overrides),
@@ -929,3 +961,3 @@ });
             send({
-                type: ClientMessageType.UpdateUserState,
+                type: ClientMessageType.UpdatePresence,
                 data: _toSend,
@@ -970,18 +1002,4 @@ });
         /////////////
-        getStorage: () => {
-            return _doc == null ? null : _doc.root;
-        },
-        fetchStorageOrInit(initialStorageFactory) {
-            _initialStorageFactory = initialStorageFactory;
-            if (state === RoomState.Connected) {
-                send({ type: ClientMessageType.GetDocument });
-            }
-            else {
-                function onConnect() {
-                    send({ type: ClientMessageType.GetDocument });
-                    remove(_listeners.open, onConnect);
-                }
-                _listeners.open.push(onConnect);
-            }
-        },
+        getStorage,
+        fetchStorage,
         createRecord: createRecord$1,
@@ -1050,7 +1068,2 @@ createList: createList$1,
 
-var ConnectionState;
-(function (ConnectionState) {
-    ConnectionState["Open"] = "open";
-    ConnectionState["Closed"] = "closed";
-})(ConnectionState || (ConnectionState = {}));
 var ClientContext = React.createContext(null);
@@ -1081,28 +1094,20 @@ function LiveblocksProvider(_a) {
 }
-function useConnectionState(room) {
+function useMyPresence(room, initPresence) {
     var client = useClient();
-    var _a = React.useState(function () {
-        var _room = client.getRoom(room);
-        var _state = _room.getState();
-        if (_state === RoomState.Connected) {
-            return ConnectionState.Open;
-        }
-        else {
-            return ConnectionState.Closed;
-        }
-    }), state = _a[0], setState = _a[1];
+    var _room = client.getRoom(room);
+    var presence = _room.getPresence() || initPresence();
+    var _a = React.useState(0), update = _a[1];
     React.useEffect(function () {
-        function onOpen() {
-            setState(ConnectionState.Open);
+        function onMyPresenceChange() {
+            update(function (x) { return x + 1; });
         }
-        function onClose() {
-            setState(ConnectionState.Closed);
-        }
         var _room = client.getRoom(room);
         _room.connect();
-        _room.addEventListener("open", onOpen);
-        _room.addEventListener("close", onClose);
+        var existingPresence = _room.getPresence();
+        if (existingPresence == null) {
+            _room.updatePresence(initPresence());
+        }
+        _room.addEventListener("my-presence", onMyPresenceChange);
         return function () {
-            _room.removeEventListener("open", onOpen);
-            _room.removeEventListener("close", onClose);
+            _room.removeEventListener("my-presence", onMyPresenceChange);
             if (_room.getListenersCount() === 0) {
@@ -1113,18 +1118,8 @@ _room.disconnect();
     }, [client, room]);
-    return state;
+    var setPresence = React.useCallback(function (overrides) { return client.getRoom(room).updatePresence(overrides); }, [room, client]);
+    return [presence, setPresence];
 }
-function useMyPresence(room, initPresence) {
+function useUpdateMyPresence(room, initPresence) {
     var client = useClient();
-    var _a = React.useState(function () {
-        var _room = client.getRoom(room);
-        var existingPresence = _room.getPresence();
-        if (existingPresence != null) {
-            return existingPresence;
-        }
-        return initPresence();
-    }), me = _a[0], innerSetPresence = _a[1];
     React.useEffect(function () {
-        function onMyPresenceChange(presence) {
-            innerSetPresence(presence);
-        }
         var _room = client.getRoom(room);
@@ -1136,18 +1131,3 @@ _room.connect();
         }
-        _room.addEventListener("my-presence", onMyPresenceChange);
-        return function () {
-            _room.removeEventListener("my-presence", onMyPresenceChange);
-            if (_room.getListenersCount() === 0) {
-                _room.disconnect();
-            }
-        };
     }, [client, room]);
-    var setPresence = React.useCallback(function (overrides) {
-        var _room = client.getRoom(room);
-        _room.updatePresence(overrides);
-    }, [room, client]);
-    return [me, setPresence];
-}
-function useUpdateMyPresence(room) {
-    var client = useClient();
     return React.useCallback(function (overrides) {
@@ -1160,9 +1140,9 @@ var _room = client.getRoom(room);
     var client = useClient();
-    var _a = React.useState({}), others = _a[0], setOthers = _a[1];
+    var _room = client.getRoom(room);
+    var _a = React.useState(0), update = _a[1];
     React.useEffect(function () {
-        function onOthersChange(others) {
-            setOthers(others);
+        function onOthersChange() {
+            update(function (x) { return x + 1; });
         }
         var _room = client.getRoom(room);
-        setOthers(_room.getOthers());
         _room.connect();
@@ -1177,17 +1157,19 @@ _room.addEventListener("others-presence", onOthersChange);
     }, [client, room]);
-    return others;
+    return _room.getOthers();
 }
 function useStorage(room, initialStorage) {
     var client = useClient();
-    var _a = React.useState(null), root = _a[0], innerSetRoot = _a[1];
+    var _room = client.getRoom(room);
+    var storage = _room.getStorage();
+    var _a = React.useState(0), update = _a[1];
     React.useEffect(function () {
-        function onRootChange(root) {
-            innerSetRoot(root);
+        function onStorageChange() {
+            update(function (x) { return x + 1; });
         }
         var _room = client.getRoom(room);
         _room.connect();
-        _room.fetchStorageOrInit(initialStorage);
-        _room.addEventListener("storage", onRootChange);
+        _room.fetchStorage(initialStorage);
+        _room.addEventListener("storage", onStorageChange);
         return function () {
-            _room.removeEventListener("storage", onRootChange);
+            _room.removeEventListener("storage", onStorageChange);
             if (_room.getListenersCount() === 0) {
@@ -1198,3 +1180,11 @@ _room.disconnect();
     }, [room]);
-    var actions = React.useMemo(function () {
+    var root = storage.state === LiveStorageState.Loaded
+        ? storage.root
+        : null;
+    var actions = useStorageActions(room);
+    return [root, actions];
+}
+function useStorageActions(room) {
+    var client = useClient();
+    return React.useMemo(function () {
         var _room = client.getRoom(room);
@@ -1228,3 +1218,2 @@ function createRecord(data) {
     }, [client, room]);
-    return [root, actions];
 }
@@ -1235,7 +1224,7 @@
 exports.useClient = useClient;
-exports.useConnectionState = useConnectionState;
 exports.useMyPresence = useMyPresence;
 exports.useOthersPresence = useOthersPresence;
 exports.useStorage = useStorage;
+exports.useStorageActions = useStorageActions;
 exports.useUpdateMyPresence = useUpdateMyPresence;
 //# sourceMappingURL=index.js.map

package.json

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

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

130243

increased by0.03%

Worsened metrics

Lines of code

1207

decreased by-1.47%

Dependency changes

• + Added@liveblocks/client@0.4.0(transitive)

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

• Updated@liveblocks/client@0.4.0