@liveblocks/react 0.9.0 → 0.12.0-beta.10

package/lib/index.js

@@ -1,1397 +1,59 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var client = require('@liveblocks/client');
 var React = require('react');
 
-var ServerMessageType;
-(function (ServerMessageType) {
-    ServerMessageType[ServerMessageType["UpdatePresence"] = 100] = "UpdatePresence";
-    ServerMessageType[ServerMessageType["UserJoined"] = 101] = "UserJoined";
-    ServerMessageType[ServerMessageType["UserLeft"] = 102] = "UserLeft";
-    ServerMessageType[ServerMessageType["Event"] = 103] = "Event";
-    ServerMessageType[ServerMessageType["RoomState"] = 104] = "RoomState";
-    ServerMessageType[ServerMessageType["InitialStorageState"] = 200] = "InitialStorageState";
-    ServerMessageType[ServerMessageType["UpdateStorage"] = 201] = "UpdateStorage";
-})(ServerMessageType || (ServerMessageType = {}));
-var ClientMessageType;
-(function (ClientMessageType) {
-    ClientMessageType[ClientMessageType["UpdatePresence"] = 100] = "UpdatePresence";
-    ClientMessageType[ClientMessageType["ClientEvent"] = 103] = "ClientEvent";
-    ClientMessageType[ClientMessageType["FetchStorage"] = 200] = "FetchStorage";
-    ClientMessageType[ClientMessageType["UpdateStorage"] = 201] = "UpdateStorage";
-})(ClientMessageType || (ClientMessageType = {}));
-var CrdtType;
-(function (CrdtType) {
-    CrdtType[CrdtType["Record"] = 0] = "Record";
-    CrdtType[CrdtType["List"] = 1] = "List";
-    CrdtType[CrdtType["Register"] = 2] = "Register";
-})(CrdtType || (CrdtType = {}));
-var OpType;
-(function (OpType) {
-    OpType[OpType["Init"] = 100] = "Init";
-    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["NOT_ALLOWED"] = 4001] = "NOT_ALLOWED";
-    WebsocketCloseCodes[WebsocketCloseCodes["MAX_NUMBER_OF_MESSAGES_PER_SECONDS"] = 4002] = "MAX_NUMBER_OF_MESSAGES_PER_SECONDS";
-    WebsocketCloseCodes[WebsocketCloseCodes["MAX_NUMBER_OF_CONCURRENT_CONNECTIONS"] = 4003] = "MAX_NUMBER_OF_CONCURRENT_CONNECTIONS";
-    WebsocketCloseCodes[WebsocketCloseCodes["MAX_NUMBER_OF_MESSAGES_PER_DAY_PER_APP"] = 4004] = "MAX_NUMBER_OF_MESSAGES_PER_DAY_PER_APP";
-    WebsocketCloseCodes[WebsocketCloseCodes["MAX_NUMBER_OF_CONCURRENT_CONNECTIONS_PER_ROOM"] = 4005] = "MAX_NUMBER_OF_CONCURRENT_CONNECTIONS_PER_ROOM";
-})(WebsocketCloseCodes || (WebsocketCloseCodes = {}));
-
-const min = 32;
-const max = 127;
-function makePosition(before, after) {
-    // No children
-    if (before == null && after == null) {
-        return pos([min + 1]);
-    }
-    // Insert at the end
-    if (before != null && after == null) {
-        return getNextPosition(before);
-    }
-    // Insert at the start
-    if (before == null && after != null) {
-        return getPreviousPosition(after);
-    }
-    return pos(makePositionFromCodes(posCodes(before), posCodes(after)));
-}
-function getPreviousPosition(after) {
-    const result = [];
-    const afterCodes = posCodes(after);
-    for (let i = 0; i < afterCodes.length; i++) {
-        const code = afterCodes[i];
-        if (code <= min + 1) {
-            result.push(min);
-            if (afterCodes.length - 1 === i) {
-                result.push(max - 1);
-                break;
-            }
-        }
-        else {
-            result.push(code - 1);
-            break;
-        }
-    }
-    return pos(result);
-}
-function getNextPosition(before) {
-    const result = [];
-    const beforeCodes = posCodes(before);
-    for (let i = 0; i < beforeCodes.length; i++) {
-        const code = beforeCodes[i];
-        if (code === max - 1) {
-            result.push(code);
-            if (beforeCodes.length - 1 === i) {
-                result.push(min + 1);
-                break;
-            }
-        }
-        else {
-            result.push(code + 1);
-            break;
-        }
-    }
-    return pos(result);
-}
-function makePositionFromCodes(before, after) {
-    let index = 0;
-    const result = [];
-    while (true) {
-        const beforeDigit = before[index] || min;
-        const afterDigit = after[index] || max;
-        if (beforeDigit > afterDigit) {
-            throw new Error(`Impossible to generate position between ${before} and ${after}`);
-        }
-        if (beforeDigit === afterDigit) {
-            result.push(beforeDigit);
-            index++;
-            continue;
-        }
-        if (afterDigit - beforeDigit === 1) {
-            result.push(beforeDigit);
-            result.push(...makePositionFromCodes(before.slice(index + 1), []));
-            break;
-        }
-        const mid = beforeDigit + Math.floor((afterDigit - beforeDigit) / 2);
-        result.push(mid);
-        break;
-    }
-    return result;
-}
-function posCodes(str) {
-    const codes = [];
-    for (let i = 0; i < str.length; i++) {
-        codes.push(str.charCodeAt(i));
-    }
-    return codes;
-}
-function pos(codes) {
-    return String.fromCharCode(...codes);
-}
-function compare(itemA, itemB) {
-    const aCodes = posCodes(itemA.position);
-    const bCodes = posCodes(itemB.position);
-    const maxLength = Math.max(aCodes.length, bCodes.length);
-    for (let i = 0; i < maxLength; i++) {
-        const a = aCodes[i] == null ? min : aCodes[i];
-        const b = bCodes[i] == null ? min : bCodes[i];
-        if (a === b) {
-            continue;
-        }
-        else {
-            return a - b;
-        }
-    }
-    throw new Error(`Impossible to compare similar position "${itemA.position}" and "${itemB.position}"`);
-}
-
-const RECORD = Symbol("liveblocks.record");
-const LIST = Symbol("liveblocks.list");
-function createRecord(id, data) {
-    return Object.assign({ id, $$type: RECORD }, data);
-}
-function createList(id, items = []) {
-    return {
-        id,
-        $$type: LIST,
-        length: items.length,
-        toArray: () => items,
-        map: (callback) => items.map(callback),
-    };
-}
-function noop() { }
-class Doc {
-    constructor(root, _cache, _emit) {
-        this.root = root;
-        this._cache = _cache;
-        this._emit = _emit;
-    }
-    static empty(id = "root", emit = noop) {
-        const root = {
-            id,
-            $$type: RECORD,
-        };
-        return new Doc(root, { links: new Map(), listCache: new Map() }, emit);
-    }
-    static createFromRoot(data, id = "root", emit = noop) {
-        let doc = Doc.empty(id, emit);
-        doc = doc.updateRecord(doc.root.id, data);
-        return doc;
-    }
-    static load(root, emit = noop) {
-        let doc = Doc.empty(root.id, emit);
-        return doc.dispatch({
-            type: OpType.RecordUpdate,
-            id: root.id,
-            data: root.data,
-        });
-    }
-    get data() {
-        return this.root;
-    }
-    dispatch(op, shouldEmit = false) {
-        if (shouldEmit) {
-            this._emit(op);
-        }
-        if (op.id === this.root.id) {
-            const node = dispatch(this.root, op, this._cache, []);
-            return new Doc(node, this._cache, this._emit);
-        }
-        else {
-            const links = getAllLinks(op.id, this.root.id, this._cache.links);
-            const node = dispatch(this.root, op, this._cache, links);
-            return new Doc(node, this._cache, this._emit);
-        }
-    }
-    getChild(id) {
-        if (id === this.root.id) {
-            return this.root;
-        }
-        const allLinks = getAllLinks(id, this.root.id, this._cache.links);
-        return getChildDeep(this.root, id, allLinks, this._cache);
-    }
-    updateRecord(id, overrides) {
-        const currentRecord = this.getChild(id);
-        if (currentRecord == null) {
-            throw new Error(`Record with id "${id}" does not exist`);
-        }
-        let data = {};
-        for (const key in overrides) {
-            const value = overrides[key];
-            data[key] = serialize(value);
-        }
-        const op = {
-            id: currentRecord.id,
-            type: OpType.RecordUpdate,
-            data,
-        };
-        return this.dispatch(op, true);
-    }
-    pushItem(id, item) {
-        const list = this.getChild(id);
-        if (list == null) {
-            throw new Error(`List with id "${id}" does not exist`);
-        }
-        if (list.$$type !== LIST) {
-            throw new Error(`Node with id "${id}" is not a list`);
-        }
-        if (!isRecord(item)) {
-            throw new Error("List can't only have Record as children");
-        }
-        const data = serialize(item);
-        if (list.length === 0) {
-            return this.dispatch({
-                type: OpType.ListInsert,
-                id: list.id,
-                position: makePosition(),
-                data,
-            }, true);
-        }
-        const items = sortedListItems(getListItems(this._cache, id));
-        const [tailPosition] = items[items.length - 1];
-        const position = makePosition(tailPosition);
-        const operation = {
-            type: OpType.ListInsert,
-            id: list.id,
-            position,
-            data,
-        };
-        return this.dispatch(operation, true);
-    }
-    moveItem(id, index, targetIndex) {
-        const list = this.getChild(id);
-        if (list == null) {
-            throw new Error(`List with id "${id}" does not exist`);
-        }
-        if (list.$$type !== LIST) {
-            throw new Error(`Node with id "${id}" is not a list`);
-        }
-        const items = sortedListItems(getListItems(this._cache, id));
-        if (targetIndex < 0) {
-            throw new Error("targetIndex cannot be less than 0");
-        }
-        if (targetIndex >= items.length) {
-            throw new Error("targetIndex cannot be greater or equal than the list length");
-        }
-        if (index < 0) {
-            throw new Error("index cannot be less than 0");
-        }
-        if (index >= items.length) {
-            throw new Error("index cannot be greater or equal than the list length");
-        }
-        if (index === targetIndex) {
-            return this;
-        }
-        let beforePosition = null;
-        let afterPosition = null;
-        if (index < targetIndex) {
-            afterPosition =
-                targetIndex === items.length - 1
-                    ? undefined
-                    : items[targetIndex + 1][0];
-            beforePosition = items[targetIndex][0];
-        }
-        else {
-            afterPosition = items[targetIndex][0];
-            beforePosition =
-                targetIndex === 0 ? undefined : items[targetIndex - 1][0];
-        }
-        const position = makePosition(beforePosition, afterPosition);
-        const [, item] = items[index];
-        return this.dispatch({
-            type: OpType.ListMove,
-            id: list.id,
-            itemId: item.id,
-            position,
-        }, true);
-    }
-    deleteItem(id, index) {
-        const list = this.getChild(id);
-        if (list == null) {
-            throw new Error(`List with id "${id}" does not exist`);
-        }
-        if (list.$$type !== LIST) {
-            throw new Error(`Node with id "${id}" is not a list`);
-        }
-        const items = sortedListItems(getListItems(this._cache, id));
-        const [, item] = items[index];
-        return this.dispatch({
-            type: OpType.ListRemove,
-            id: list.id,
-            itemId: item.id,
-        }, true);
-    }
-    deleteItemById(id, itemId) {
-        const list = this.getChild(id);
-        if (list == null) {
-            throw new Error(`List with id "${id}" does not exist`);
-        }
-        if (list.$$type !== LIST) {
-            throw new Error(`Node with id "${id}" is not a list`);
-        }
-        const itemsMap = getListItems(this._cache, id);
-        let item = null;
-        for (const [, crdt] of itemsMap) {
-            if (crdt.id === itemId) {
-                item = crdt;
-                break;
-            }
-        }
-        if (item == null) {
-            throw new Error(`List with id "${id}" does not have an item with id "${itemId}"`);
-        }
-        return this.dispatch({
-            type: OpType.ListRemove,
-            id: list.id,
-            itemId: item.id,
-        }, true);
-    }
-}
-function getAllLinks(id, rootId, links) {
-    let currentId = id;
-    const result = [];
-    do {
-        const link = links.get(currentId);
-        if (link == null) {
-            throw new Error(`Can't find link for id "${currentId}"`);
-        }
-        currentId = link.parentId;
-        result.push(link);
-    } while (currentId !== rootId);
-    return result;
-}
-function deserializeList(serialized, cache) {
-    const listItems = new Map();
-    for (const position in serialized.data) {
-        const item = deserialize(serialized.data[position], cache);
-        if (!isRecord(item)) {
-            throw new Error("TODO");
-        }
-        listItems.set(position, item);
-        cache.links.set(item.id, { parentId: serialized.id, parentKey: position });
-    }
-    cache.listCache.set(serialized.id, listItems);
-    return createList(serialized.id, listItemsToArray(listItems));
-}
-function getListItems(cache, listId) {
-    const items = cache.listCache.get(listId);
-    if (items == null) {
-        throw new Error(`Can't find list cache for id "${listId}"`);
-    }
-    return items;
-}
-function deserializeRecord(serialized, cache) {
-    const result = {
-        id: serialized.id,
-        $$type: RECORD,
-    };
-    for (const key in serialized.data) {
-        const item = deserialize(serialized.data[key], cache);
-        if (isCrdt(item)) {
-            cache.links.set(item.id, {
-                parentId: serialized.id,
-                parentKey: key,
-            });
-        }
-        result[key] = item;
-    }
-    return result;
-}
-function deserialize(serialized, cache) {
-    switch (serialized.type) {
-        case CrdtType.Register: {
-            return serialized.data;
-        }
-        case CrdtType.Record: {
-            return deserializeRecord(serialized, cache);
-        }
-        case CrdtType.List: {
-            return deserializeList(serialized, cache);
-        }
-        default: {
-            throw new Error("TODO");
-        }
-    }
-}
-function dispatchOnRecord(record, op, cache, links) {
-    if (links.length === 0) {
-        if (record.id !== op.id) {
-            throw new Error("TODO");
-        }
-        switch (op.type) {
-            case OpType.RecordUpdate: {
-                return updateRecord(record, op, cache);
-            }
-            default: {
-                console.warn("Unsupported operation");
-                return record;
-            }
-        }
-    }
-    const currentLink = links.pop();
-    const child = record[currentLink.parentKey];
-    const newNode = dispatch(child, op, cache, links);
-    return Object.assign(Object.assign({}, record), { [currentLink.parentKey]: newNode });
-}
-function dispatchOnList(list, op, cache, links) {
-    if (links.length === 0) {
-        if (list.id !== op.id) {
-            throw new Error("TODO");
-        }
-        switch (op.type) {
-            case OpType.ListInsert: {
-                return listInsert(list, op, cache);
-            }
-            case OpType.ListMove: {
-                return listMove(list, op, cache);
-            }
-            case OpType.ListRemove: {
-                return listDelete(list, op, cache);
-            }
-            default: {
-                console.warn("Unsupported operation");
-                return list;
-            }
-        }
-    }
-    const currentLink = links.pop();
-    const position = currentLink.parentKey;
-    const items = getListItems(cache, list.id);
-    const item = items.get(position);
-    if (item == null) {
-        throw new Error("TODO");
-    }
-    const newItem = dispatch(item, op, cache, links);
-    items.set(position, newItem);
-    return createList(list.id, listItemsToArray(items));
-}
-function dispatch(node, op, cache, links) {
-    switch (node.$$type) {
-        case RECORD:
-            return dispatchOnRecord(node, op, cache, links);
-        case LIST:
-            return dispatchOnList(node, op, cache, links);
-        default: {
-            throw new Error("Unknown CRDT");
-        }
-    }
-}
-function updateRecord(node, op, cache) {
-    const result = Object.assign({}, node);
-    for (const key in op.data) {
-        const value = op.data[key];
-        const item = deserialize(value, cache);
-        if (isCrdt(item)) {
-            cache.links.set(item.id, { parentId: node.id, parentKey: key });
-        }
-        result[key] = item;
-    }
-    return result;
-}
-function listInsert(list, op, cache) {
-    const items = getListItems(cache, list.id);
-    const item = deserialize(op.data, cache);
-    if (isCrdt(item)) {
-        items.set(op.position, item);
-        cache.links.set(item.id, { parentId: list.id, parentKey: op.position });
-    }
-    return createList(list.id, listItemsToArray(items));
-}
-function listMove(list, op, cache) {
-    const items = getListItems(cache, list.id);
-    const link = getLinkOrThrow(cache, op.itemId);
-    const item = items.get(link.parentKey);
-    if (item == null) {
-        throw new Error("TODO");
-    }
-    // Delete old position cache entry
-    items.delete(link.parentKey);
-    // Insert new position in cache
-    items.set(op.position, item);
-    // Update link
-    cache.links.set(op.itemId, { parentId: list.id, parentKey: op.position });
-    return createList(list.id, listItemsToArray(items));
-}
-function getLinkOrThrow(cache, id) {
-    const link = cache.links.get(id);
-    if (link == null) {
-        throw new Error(`Can't find link with id "${id}"`);
-    }
-    return link;
-}
-function listDelete(list, op, cache) {
-    const items = getListItems(cache, list.id);
-    const link = getLinkOrThrow(cache, op.itemId);
-    items.delete(link.parentKey);
-    cache.links.delete(op.itemId);
-    return createList(list.id, listItemsToArray(items));
-}
-function listItemsToArray(items) {
-    return sortedListItems(items).map((entry) => entry[1]);
-}
-function sortedListItems(items) {
-    return Array.from(items.entries()).sort((entryA, entryB) => compare({ position: entryA[0] }, { position: entryB[0] }));
-}
-function getChildDeep(node, id, links, cache) {
-    let currentNode = node;
-    while (currentNode.id !== id) {
-        const link = links.pop();
-        if (link == null || link.parentId !== currentNode.id) {
-            throw new Error("TODO");
-        }
-        if (currentNode.$$type === RECORD) {
-            currentNode = currentNode[link.parentKey];
-        }
-        else {
-            const listItems = getListItems(cache, currentNode.id);
-            const item = listItems.get(link.parentKey);
-            if (item == null) {
-                throw new Error("TODO");
-            }
-            currentNode = item;
-        }
-    }
-    return currentNode;
-}
-function isRecord(value) {
-    return value != null && typeof value === "object" && value.$$type === RECORD;
-}
-function isList(value) {
-    return value != null && typeof value === "object" && value.$$type === LIST;
-}
-function isCrdt(value) {
-    return isRecord(value) || isList(value);
-}
-function serializeRecord(record) {
-    const serializedData = {};
-    for (const key in record) {
-        if (key !== "id" && key !== "$$type") {
-            const value = record[key]; // TODO: Find out why typescript does not like that
-            serializedData[key] = serialize(value);
-        }
-    }
-    return {
-        id: record.id,
-        type: CrdtType.Record,
-        data: serializedData,
-    };
-}
-function serializeList(list) {
-    return {
-        id: list.id,
-        type: CrdtType.List,
-        data: {},
-    };
-}
-function serialize(value) {
-    if (isRecord(value)) {
-        return serializeRecord(value);
-    }
-    else if (isList(value)) {
-        return serializeList(value);
-    }
-    else {
-        return { type: CrdtType.Register, data: value };
-    }
-}
-
-var LiveStorageState;
-(function (LiveStorageState) {
-    LiveStorageState[LiveStorageState["NotInitialized"] = 0] = "NotInitialized";
-    LiveStorageState[LiveStorageState["Loading"] = 1] = "Loading";
-    LiveStorageState[LiveStorageState["Loaded"] = 2] = "Loaded";
-})(LiveStorageState || (LiveStorageState = {}));
-
-function remove(array, item) {
-    for (let i = 0; i < array.length; i++) {
-        if (array[i] === item) {
-            array.splice(i, 1);
-            break;
-        }
-    }
-}
-
-var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-function fetchAuthorize(endpoint, room) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const res = yield fetch(endpoint, {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-                room,
-            }),
-        });
-        if (!res.ok) {
-            throw new AuthenticationError(`Authentication error. Liveblocks could not parse the response of your authentication "${endpoint}"`);
-        }
-        let authResponse = null;
-        try {
-            authResponse = yield res.json();
-        }
-        catch (er) {
-            throw new AuthenticationError(`Authentication error. Liveblocks could not parse the response of your authentication "${endpoint}"`);
-        }
-        if (typeof authResponse.token !== "string") {
-            throw new AuthenticationError(`Authentication error. Liveblocks could not parse the response of your authentication "${endpoint}"`);
-        }
-        return authResponse.token;
-    });
-}
-function auth(endpoint, room) {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (typeof endpoint === "string") {
-            return fetchAuthorize(endpoint, room);
-        }
-        if (typeof endpoint === "function") {
-            return endpoint(room);
-        }
-        throw new Error("Authentication error. Liveblocks could not parse the response of your authentication endpoint");
-    });
-}
-class AuthenticationError extends Error {
-    constructor(message) {
-        super(message);
-    }
-}
-function parseToken(token) {
-    const tokenParts = token.split(".");
-    if (tokenParts.length !== 3) {
-        throw new AuthenticationError(`Authentication error. Liveblocks could not parse the response of your authentication endpoint`);
-    }
-    const data = JSON.parse(atob(tokenParts[1]));
-    if (typeof data.actor !== "number") {
-        throw new AuthenticationError(`Authentication error. Liveblocks could not parse the response of your authentication endpoint`);
-    }
-    return data;
-}
-
-var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-const BACKOFF_RETRY_DELAYS = [250, 500, 1000, 2000, 4000, 8000, 10000];
-const HEARTBEAT_INTERVAL = 30000;
-// const WAKE_UP_CHECK_INTERVAL = 2000;
-const PONG_TIMEOUT = 2000;
-function isValidRoomEventType(value) {
-    return (value === "storage" ||
-        value === "my-presence" ||
-        value === "others" ||
-        value === "event" ||
-        value === "error" ||
-        value === "connection");
-}
-function makeIdFactory(connectionId) {
-    let count = 0;
-    return () => `${connectionId}:${count++}`;
-}
-function makeOthers(presenceMap) {
-    const array = Object.values(presenceMap);
-    return {
-        get count() {
-            return array.length;
-        },
-        map(callback) {
-            return array.map(callback);
-        },
-        toArray() {
-            return array;
-        },
-    };
-}
-function makeStateMachine(state, context, mockedEffects) {
-    const effects = mockedEffects || {
-        authenticate() {
-            return __awaiter$1(this, void 0, void 0, function* () {
-                try {
-                    const token = yield auth(context.authEndpoint, context.room);
-                    const parsedToken = parseToken(token);
-                    const socket = new WebSocket(`${context.liveblocksServer}/?token=${token}`);
-                    socket.addEventListener("message", onMessage);
-                    socket.addEventListener("open", onOpen);
-                    socket.addEventListener("close", onClose);
-                    socket.addEventListener("error", onError);
-                    authenticationSuccess(parsedToken, socket);
-                }
-                catch (er) {
-                    authenticationFailure(er);
-                }
-            });
-        },
-        send(messageOrMessages) {
-            if (state.socket == null) {
-                throw new Error("Can't send message if socket is null");
-            }
-            state.socket.send(JSON.stringify(messageOrMessages));
-        },
-        delayFlush(delay) {
-            return setTimeout(tryFlushing, delay);
-        },
-        startHeartbeatInterval() {
-            return setInterval(heartbeat, HEARTBEAT_INTERVAL);
-        },
-        schedulePongTimeout() {
-            return setTimeout(pongTimeout, PONG_TIMEOUT);
-        },
-        scheduleReconnect(delay) {
-            return setTimeout(connect, delay);
-        },
-    };
-    function subscribe(type, listener) {
-        if (!isValidRoomEventType(type)) {
-            throw new Error(`"${type}" is not a valid event name`);
-        }
-        state.listeners[type].push(listener);
-    }
-    function unsubscribe(event, callback) {
-        if (!isValidRoomEventType(event)) {
-            throw new Error(`"${event}" is not a valid event name`);
-        }
-        const callbacks = state.listeners[event];
-        remove(callbacks, callback);
-    }
-    function getConnectionState() {
-        return state.connection.state;
-    }
-    function getCurrentUser() {
-        return state.connection.state === "open" ||
-            state.connection.state === "connecting"
-            ? {
-                connectionId: state.connection.id,
-                id: state.connection.userId,
-                info: state.connection.userInfo,
-                presence: getPresence(),
-            }
-            : null;
-    }
-    function connect() {
-        if (typeof window === "undefined") {
-            return;
-        }
-        if (state.connection.state !== "closed" &&
-            state.connection.state !== "unavailable") {
-            return null;
-        }
-        updateConnection({ state: "authenticating" });
-        effects.authenticate();
-    }
-    function updatePresence(overrides) {
-        const newPresence = Object.assign(Object.assign({}, state.me), overrides);
-        if (state.flushData.presence == null) {
-            state.flushData.presence = overrides;
-        }
-        else {
-            for (const key in overrides) {
-                state.flushData.presence[key] = overrides[key];
-            }
-        }
-        state.me = newPresence;
-        tryFlushing();
-        for (const listener of state.listeners["my-presence"]) {
-            listener(state.me);
-        }
-    }
-    function authenticationSuccess(token, socket) {
-        updateConnection({
-            state: "connecting",
-            id: token.actor,
-            userInfo: token.info,
-            userId: token.id,
-        });
-        state.idFactory = makeIdFactory(token.actor);
-        state.socket = socket;
-    }
-    function authenticationFailure(error) {
-        console.error(error);
-        updateConnection({ state: "unavailable" });
-        state.numberOfRetry++;
-        state.timeoutHandles.reconnect = effects.scheduleReconnect(getRetryDelay());
-    }
-    function onVisibilityChange(visibilityState) {
-        if (visibilityState === "visible" && state.connection.state === "open") {
-            heartbeat();
-        }
-    }
-    function onUpdatePresenceMessage(message) {
-        const user = state.users[message.actor];
-        if (user == null) {
-            state.users[message.actor] = {
-                connectionId: message.actor,
-                presence: message.data,
-            };
-        }
-        else {
-            state.users[message.actor] = {
-                id: user.id,
-                info: user.info,
-                connectionId: message.actor,
-                presence: Object.assign(Object.assign({}, user.presence), message.data),
-            };
-        }
-        updateUsers({
-            type: "update",
-            updates: message.data,
-            user: state.users[message.actor],
-        });
-    }
-    function updateUsers(event) {
-        state.others = makeOthers(state.users);
-        for (const listener of state.listeners["others"]) {
-            listener(state.others, event);
-        }
-    }
-    function onUserLeftMessage(message) {
-        const userLeftMessage = message;
-        const user = state.users[userLeftMessage.actor];
-        if (user) {
-            delete state.users[userLeftMessage.actor];
-            updateUsers({ type: "leave", user });
-        }
-    }
-    function onRoomStateMessage(message) {
-        const newUsers = {};
-        for (const key in message.users) {
-            const connectionId = Number.parseInt(key);
-            const user = message.users[key];
-            newUsers[connectionId] = {
-                connectionId,
-                info: user.info,
-                id: user.id,
-            };
-        }
-        state.users = newUsers;
-        updateUsers({ type: "reset" });
-    }
-    function onNavigatorOnline() {
-        if (state.connection.state === "unavailable") {
-            reconnect();
-        }
-    }
-    function onEvent(message) {
-        for (const listener of state.listeners.event) {
-            listener({ connectionId: message.actor, event: message.event });
-        }
-    }
-    function onUserJoinedMessage(message) {
-        state.users[message.actor] = {
-            connectionId: message.actor,
-            info: message.info,
-            id: message.id,
-        };
-        updateUsers({ type: "enter", user: state.users[message.actor] });
-        if (state.me) {
-            // Send current presence to new user
-            // TODO: Consider storing it on the backend
-            state.flushData.messages.push({
-                type: ClientMessageType.UpdatePresence,
-                data: state.me,
-                targetActor: message.actor,
-            });
-            tryFlushing();
-        }
-    }
-    function onMessage(event) {
-        if (event.data === "pong") {
-            clearTimeout(state.timeoutHandles.pongTimeout);
-            return;
-        }
-        const message = JSON.parse(event.data);
-        switch (message.type) {
-            case ServerMessageType.InitialStorageState: {
-                onInitialStorageState(message);
-                break;
-            }
-            case ServerMessageType.UpdateStorage: {
-                onStorageUpdates(message);
-                break;
-            }
-            case ServerMessageType.UserJoined: {
-                onUserJoinedMessage(message);
-                break;
-            }
-            case ServerMessageType.UpdatePresence: {
-                onUpdatePresenceMessage(message);
-                break;
-            }
-            case ServerMessageType.Event: {
-                onEvent(message);
-                break;
-            }
-            case ServerMessageType.UserLeft: {
-                onUserLeftMessage(message);
-                break;
-            }
-            case ServerMessageType.RoomState: {
-                onRoomStateMessage(message);
-                break;
-            }
-        }
-    }
-    // function onWakeUp() {
-    //   // Sometimes, the browser can put the webpage on pause (computer is on sleep mode for example)
-    //   // The client will not know that the server has probably close the connection even if the readyState is Open
-    //   // One way to detect this kind of pause is to ensure that a setInterval is not taking more than the delay it was configured with
-    //   if (state.connection.state === "open") {
-    //     log("Try to reconnect after laptop wake up");
-    //     reconnect();
-    //   }
-    // }
-    function onClose(event) {
-        state.socket = null;
-        clearTimeout(state.timeoutHandles.pongTimeout);
-        clearInterval(state.intervalHandles.heartbeat);
-        if (state.timeoutHandles.flush) {
-            clearTimeout(state.timeoutHandles.flush);
-        }
-        clearTimeout(state.timeoutHandles.reconnect);
-        state.users = {};
-        updateUsers({ type: "reset" });
-        if (event.code >= 4000 && event.code <= 4100) {
-            updateConnection({ state: "failed" });
-            const error = new LiveblocksError(event.reason, event.code);
-            for (const listener of state.listeners.error) {
-                listener(error);
-            }
-        }
-        else if (event.wasClean === false) {
-            updateConnection({ state: "unavailable" });
-            state.numberOfRetry++;
-            state.timeoutHandles.reconnect = effects.scheduleReconnect(getRetryDelay());
-        }
-        else {
-            updateConnection({ state: "closed" });
-        }
-    }
-    function updateConnection(connection) {
-        state.connection = connection;
-        for (const listener of state.listeners.connection) {
-            listener(connection.state);
-        }
-    }
-    function getRetryDelay() {
-        return BACKOFF_RETRY_DELAYS[state.numberOfRetry < BACKOFF_RETRY_DELAYS.length
-            ? state.numberOfRetry
-            : BACKOFF_RETRY_DELAYS.length - 1];
-    }
-    function onError() { }
-    function onOpen() {
-        clearInterval(state.intervalHandles.heartbeat);
-        state.intervalHandles.heartbeat = effects.startHeartbeatInterval();
-        if (state.connection.state === "connecting") {
-            updateConnection(Object.assign(Object.assign({}, state.connection), { state: "open" }));
-            state.numberOfRetry = 0;
-            tryFlushing();
-        }
-    }
-    function heartbeat() {
-        if (state.socket == null) {
-            // Should never happen, because we clear the pong timeout when the connection is dropped explictly
-            return;
-        }
-        clearTimeout(state.timeoutHandles.pongTimeout);
-        state.timeoutHandles.pongTimeout = effects.schedulePongTimeout();
-        if (state.socket.readyState === WebSocket.OPEN) {
-            state.socket.send("ping");
-        }
-    }
-    function pongTimeout() {
-        reconnect();
-    }
-    function reconnect() {
-        if (state.socket) {
-            state.socket.removeEventListener("open", onOpen);
-            state.socket.removeEventListener("message", onMessage);
-            state.socket.removeEventListener("close", onClose);
-            state.socket.removeEventListener("error", onError);
-            state.socket.close();
-            state.socket = null;
-        }
-        updateConnection({ state: "unavailable" });
-        clearTimeout(state.timeoutHandles.pongTimeout);
-        if (state.timeoutHandles.flush) {
-            clearTimeout(state.timeoutHandles.flush);
-        }
-        clearTimeout(state.timeoutHandles.reconnect);
-        clearInterval(state.intervalHandles.heartbeat);
-        connect();
-    }
-    function tryFlushing() {
-        if (state.socket == null) {
-            return;
-        }
-        if (state.socket.readyState !== WebSocket.OPEN) {
-            return;
-        }
-        const now = Date.now();
-        const elapsedTime = now - state.lastFlushTime;
-        if (elapsedTime > context.throttleDelay) {
-            const messages = flushDataToMessages(state);
-            if (messages.length === 0) {
-                return;
-            }
-            effects.send(messages);
-            state.flushData = {
-                messages: [],
-                storageOperations: [],
-                presence: null,
-            };
-            state.lastFlushTime = now;
-        }
-        else {
-            if (state.timeoutHandles.flush != null) {
-                clearTimeout(state.timeoutHandles.flush);
-            }
-            state.timeoutHandles.flush = effects.delayFlush(context.throttleDelay - (now - state.lastFlushTime));
-        }
-    }
-    function flushDataToMessages(state) {
-        const messages = [];
-        if (state.flushData.presence) {
-            messages.push({
-                type: ClientMessageType.UpdatePresence,
-                data: state.flushData.presence,
-            });
-        }
-        for (const event of state.flushData.messages) {
-            messages.push(event);
-        }
-        if (state.flushData.storageOperations.length > 0) {
-            messages.push({
-                type: ClientMessageType.UpdateStorage,
-                ops: state.flushData.storageOperations,
-            });
-        }
-        return messages;
-    }
-    function disconnect() {
-        if (state.socket) {
-            state.socket.removeEventListener("open", onOpen);
-            state.socket.removeEventListener("message", onMessage);
-            state.socket.removeEventListener("close", onClose);
-            state.socket.removeEventListener("error", onError);
-            state.socket.close();
-            state.socket = null;
-        }
-        updateConnection({ state: "closed" });
-        if (state.timeoutHandles.flush) {
-            clearTimeout(state.timeoutHandles.flush);
-        }
-        clearTimeout(state.timeoutHandles.reconnect);
-        clearTimeout(state.timeoutHandles.pongTimeout);
-        clearInterval(state.intervalHandles.heartbeat);
-        state.users = {};
-        updateUsers({ type: "reset" });
-        clearListeners();
-    }
-    function clearListeners() {
-        for (const key in state.listeners) {
-            state.listeners[key] = [];
-        }
-    }
-    function getPresence() {
-        return state.me;
-    }
-    function getOthers() {
-        return state.others;
-    }
-    function broadcastEvent(event) {
-        if (state.socket == null) {
-            return;
-        }
-        state.flushData.messages.push({
-            type: ClientMessageType.ClientEvent,
-            event,
-        });
-        tryFlushing();
-    }
-    /**
-     * STORAGE
-     */
-    function onStorageUpdates(message) {
-        if (state.doc == null) {
-            // TODO: Cache updates in case they are coming while root is queried
-            return;
-        }
-        updateDoc(message.ops.reduce((doc, op) => doc.dispatch(op), state.doc));
-    }
-    function updateDoc(doc) {
-        state.doc = doc;
-        if (doc) {
-            for (const listener of state.listeners.storage) {
-                listener(getStorage());
-            }
-        }
-    }
-    function getStorage() {
-        if (state.storageState === LiveStorageState.Loaded) {
-            return {
-                state: state.storageState,
-                root: state.doc.root,
-            };
-        }
-        return {
-            state: state.storageState,
-        };
-    }
-    function onInitialStorageState(message) {
-        state.storageState = LiveStorageState.Loaded;
-        if (message.root == null) {
-            const rootId = makeId();
-            state.doc = Doc.empty(rootId, (op) => dispatch(op));
-            updateDoc(state.doc.updateRecord(rootId, state.initialStorageFactory({
-                createRecord: (data) => createRecord$1(data),
-                createList: () => createList$1(),
-            })));
-        }
-        else {
-            updateDoc(Doc.load(message.root, (op) => dispatch(op)));
-        }
-    }
-    function makeId() {
-        if (state.idFactory == null) {
-            throw new Error("Can't generate id. Id factory is missing.");
-        }
-        return state.idFactory();
-    }
-    function dispatch(op) {
-        state.flushData.storageOperations.push(op);
-        tryFlushing();
-    }
-    function createRecord$1(data) {
-        return createRecord(makeId(), data);
-    }
-    function createList$1() {
-        return createList(makeId());
-    }
-    function fetchStorage(initialStorageFactory) {
-        state.initialStorageFactory = initialStorageFactory;
-        state.storageState = LiveStorageState.Loading;
-        state.flushData.messages.push({ type: ClientMessageType.FetchStorage });
-        tryFlushing();
-    }
-    function updateRecord(record, overrides) {
-        updateDoc(state.doc.updateRecord(record.id, overrides));
-    }
-    function pushItem(list, item) {
-        updateDoc(state.doc.pushItem(list.id, item));
-    }
-    function deleteItem(list, index) {
-        updateDoc(state.doc.deleteItem(list.id, index));
-    }
-    function deleteItemById(list, itemId) {
-        updateDoc(state.doc.deleteItemById(list.id, itemId));
-    }
-    function moveItem(list, index, targetIndex) {
-        updateDoc(state.doc.moveItem(list.id, index, targetIndex));
-    }
-    return {
-        // Internal
-        onOpen,
-        onClose,
-        onMessage,
-        authenticationSuccess,
-        heartbeat,
-        onNavigatorOnline,
-        // onWakeUp,
-        onVisibilityChange,
-        // Core
-        connect,
-        disconnect,
-        subscribe,
-        unsubscribe,
-        // Presence
-        updatePresence,
-        broadcastEvent,
-        // Storage
-        fetchStorage,
-        createRecord: createRecord$1,
-        updateRecord,
-        createList: createList$1,
-        pushItem,
-        deleteItem,
-        deleteItemById,
-        moveItem,
-        selectors: {
-            // Core
-            getConnectionState,
-            getCurrentUser,
-            // Presence
-            getPresence,
-            getOthers,
-            // Storage
-            getStorage,
-        },
-    };
-}
-function defaultState(me) {
-    return {
-        connection: { state: "closed" },
-        socket: null,
-        listeners: {
-            storage: [],
-            event: [],
-            others: [],
-            "my-presence": [],
-            error: [],
-            connection: [],
-        },
-        numberOfRetry: 0,
-        lastFlushTime: 0,
-        timeoutHandles: {
-            flush: null,
-            reconnect: 0,
-            pongTimeout: 0,
-        },
-        flushData: {
-            presence: me == null ? {} : me,
-            messages: [],
-            storageOperations: [],
-        },
-        intervalHandles: {
-            heartbeat: 0,
-        },
-        me: me == null ? {} : me,
-        users: {},
-        others: makeOthers({}),
-        storageState: LiveStorageState.NotInitialized,
-        initialStorageFactory: null,
-        doc: null,
-        idFactory: null,
-    };
-}
-function createRoom(name, options) {
-    const throttleDelay = options.throttle || 100;
-    const liveblocksServer = options.liveblocksServer || "wss://liveblocks.net";
-    const authEndpoint = options.authEndpoint;
-    const state = defaultState(options.initialPresence);
-    const machine = makeStateMachine(state, {
-        throttleDelay,
-        liveblocksServer,
-        authEndpoint,
-        room: name,
-    });
-    const room = {
-        /////////////
-        // Core    //
-        /////////////
-        getConnectionState: machine.selectors.getConnectionState,
-        getCurrentUser: machine.selectors.getCurrentUser,
-        subscribe: machine.subscribe,
-        unsubscribe: machine.unsubscribe,
-        /////////////
-        // Storage //
-        /////////////
-        getStorage: machine.selectors.getStorage,
-        fetchStorage: machine.fetchStorage,
-        createRecord: machine.createRecord,
-        createList: machine.createList,
-        updateRecord: machine.updateRecord,
-        pushItem: machine.pushItem,
-        deleteItem: machine.deleteItem,
-        deleteItemById: machine.deleteItemById,
-        moveItem: machine.moveItem,
-        //////////////
-        // Presence //
-        //////////////
-        getPresence: machine.selectors.getPresence,
-        updatePresence: machine.updatePresence,
-        getOthers: machine.selectors.getOthers,
-        broadcastEvent: machine.broadcastEvent,
-    };
-    return {
-        connect: machine.connect,
-        disconnect: machine.disconnect,
-        onNavigatorOnline: machine.onNavigatorOnline,
-        onVisibilityChange: machine.onVisibilityChange,
-        room,
-    };
-}
-class LiveblocksError extends Error {
-    constructor(message, code) {
-        super(message);
-        this.code = code;
-    }
-}
-
-/**
- * Create a client that will be responsible to communicate with liveblocks servers.
- *
- * ### Example
- * ```
- * const client = createClient({
- *   authEndpoint: "/api/auth"
- * })
- * ```
- */
-function createClient(options) {
-    if (typeof options.throttle === "number") {
-        if (options.throttle < 80 || options.throttle > 1000) {
-            throw new Error("Liveblocks client throttle should be between 80 and 1000 ms");
-        }
-    }
-    const rooms = new Map();
-    function getRoom(roomId) {
-        const internalRoom = rooms.get(roomId);
-        return internalRoom ? internalRoom.room : null;
-    }
-    function enter(roomId, initialPresence) {
-        let internalRoom = rooms.get(roomId);
-        if (internalRoom) {
-            return internalRoom.room;
-        }
-        internalRoom = createRoom(roomId, Object.assign(Object.assign({}, options), { initialPresence }));
-        rooms.set(roomId, internalRoom);
-        internalRoom.connect();
-        return internalRoom.room;
-    }
-    function leave(roomId) {
-        let room = rooms.get(roomId);
-        if (room) {
-            room.disconnect();
-            rooms.delete(roomId);
-        }
-    }
-    if (typeof window !== "undefined") {
-        // TODO: Expose a way to clear these
-        window.addEventListener("online", () => {
-            for (const [, room] of rooms) {
-                room.onNavigatorOnline();
-            }
-        });
-    }
-    if (typeof document !== "undefined") {
-        document.addEventListener("visibilitychange", () => {
-            for (const [, room] of rooms) {
-                room.onVisibilityChange(document.visibilityState);
-            }
-        });
-    }
-    return {
-        getRoom,
-        enter,
-        leave,
-    };
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
 }
 
 var ClientContext = React.createContext(null);
@@ -1418,7 +80,7 @@ function useClient() {
  * That means that you can't have 2 RoomProvider with the same room id in your react tree.
  */
 function RoomProvider(_a) {
-    var id = _a.id, children = _a.children, defaultPresence = _a.defaultPresence;
+    var id = _a.id, children = _a.children, defaultPresence = _a.defaultPresence, defaultStorageRoot = _a.defaultStorageRoot;
     var client = useClient();
     React.useEffect(function () {
         return function () {
@@ -1426,7 +88,10 @@ function RoomProvider(_a) {
         };
     }, [client, id]);
     var room = client.getRoom(id) ||
-        client.enter(id, defaultPresence ? defaultPresence() : undefined);
+        client.enter(id, {
+            defaultPresence: defaultPresence ? defaultPresence() : undefined,
+            defaultStorageRoot: defaultStorageRoot,
+        });
     return React.createElement(RoomContext.Provider, { value: room }, children);
 }
 /**
@@ -1444,8 +109,7 @@ function useRoom() {
  * It is different from the setState function returned by the useState hook from React.
  * You don't need to pass the full presence object to update it.
  *
- * ### Example
- * ``` typescript
+ * @example
  * import { useMyPresence } from "@liveblocks/react";
  *
  * const [myPresence, updateMyPresence] = useMyPresence();
@@ -1453,7 +117,6 @@ function useRoom() {
  * updateMyPresence({ y: 0 });
  *
  * // At the next render, "myPresence" will be equal to "{ x: 0, y: 0 }"
- * ```
  */
 function useMyPresence() {
     var room = useRoom();
@@ -1475,8 +138,7 @@ function useMyPresence() {
  * useUpdateMyPresence is similar to useMyPresence but it only returns the function to update the current user presence.
  * If you don't use the current user presence in your component, but you need to update it (e.g. live cursor), it's better to use useUpdateMyPresence to avoid unnecessary renders.
  *
- * ### Example
- * ``` typescript
+ * @example
  * import { useUpdateMyPresence } from "@liveblocks/react";
  *
  * const updateMyPresence = useUpdateMyPresence();
@@ -1484,7 +146,6 @@ function useMyPresence() {
  * updateMyPresence({ y: 0 });
  *
  * // At the next render, the presence of the current user will be equal to "{ x: 0, y: 0 }"
- * ```
  */
 function useUpdateMyPresence() {
     var room = useRoom();
@@ -1495,8 +156,7 @@ function useUpdateMyPresence() {
 /**
  * Returns an object that lets you get information about all the the users currently connected in the room.
  *
- * ### Example
- * ``` typescript
+ * @example
  * import { useOthers } from "@liveblocks/react";
  *
  * const others = useOthers();
@@ -1510,7 +170,6 @@ function useUpdateMyPresence() {
  *     return <Cursor key={connectionId} cursor={presence.cursor} />
  *   })
  * }
- * ```
  */
 function useOthers() {
     var room = useRoom();
@@ -1529,14 +188,12 @@ function useOthers() {
 /**
  * Returns a callback that lets you broadcast custom events to other users in the room
  *
- * ### Example
- * ``` typescript
+ * @example
  * import { useBroadcastEvent } from "@liveblocks/react";
  *
  * const broadcast = useBroadcastEvent();
  *
  * broadcast({ type: "CUSTOM_EVENT", data: { x: 0, y: 0 } });
- * ```
  */
 function useBroadcastEvent() {
     var room = useRoom();
@@ -1547,14 +204,12 @@ function useBroadcastEvent() {
 /**
  * useErrorListener is a react hook that lets you react to potential room connection errors.
  *
- * ### Example
- * ``` typescript
+ * @example
  * import { useErrorListener } from "@liveblocks/react";
  *
  * useErrorListener(er => {
  *   console.error(er);
  * })
- * ```
  */
 function useErrorListener(callback) {
     var room = useRoom();
@@ -1573,8 +228,7 @@ function useErrorListener(callback) {
 /**
  * useEventListener is a react hook that lets you react to event broadcasted by other users in the room.
  *
- * ### Example
- * ``` typescript
+ * @example
  * import { useEventListener } from "@liveblocks/react";
  *
  * useEventListener(({ connectionId, event }) => {
@@ -1582,7 +236,6 @@ function useErrorListener(callback) {
  *     // Do something
  *   }
  * });
- * ```
  */
 function useEventListener(callback) {
     var room = useRoom();
@@ -1601,16 +254,14 @@ function useEventListener(callback) {
     }, [room]);
 }
 /**
- * useCurrentUser is a react hook that lets you react to get the current user once it is connected to the room.
+ * Gets the current user once it is connected to the room.
  *
- * ### Example
- * ``` typescript
- * import { useCurrentUser } from "@liveblocks/react";
+ * @example
+ * import { useSelf } from "@liveblocks/react";
  *
- * const user = useCurrentUser();
- * ```
+ * const user = useSelf();
  */
-function useCurrentUser() {
+function useSelf() {
     var room = useRoom();
     var _a = React.useState(0), update = _a[1];
     React.useEffect(function () {
@@ -1624,74 +275,115 @@ function useCurrentUser() {
             room.unsubscribe("connection", onChange);
         };
     }, [room]);
-    return room.getCurrentUser();
+    return room.getSelf();
 }
-function useStorage(initialStorage) {
+function useStorage() {
     var room = useRoom();
-    var storage = room.getStorage();
-    var _a = React.useState(0), update = _a[1];
+    var _a = React.useState(null), root = _a[0], setState = _a[1];
     React.useEffect(function () {
-        function onStorageChange() {
-            update(function (x) { return x + 1; });
+        function fetchStorage() {
+            return __awaiter(this, void 0, void 0, function () {
+                var storage;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, room.getStorage()];
+                        case 1:
+                            storage = _a.sent();
+                            setState(storage.root);
+                            return [2 /*return*/];
+                    }
+                });
+            });
         }
-        room.fetchStorage(initialStorage);
-        room.subscribe("storage", onStorageChange);
-        return function () {
-            room.unsubscribe("storage", onStorageChange);
-        };
+        fetchStorage();
+        return function () { };
     }, [room]);
-    var root = storage.state === LiveStorageState.Loaded
-        ? storage.root
-        : null;
-    var actions = useStorageActions();
-    return [root, actions];
+    return [root];
 }
-function useStorageActions() {
-    var room = useRoom();
-    return React.useMemo(function () {
-        function createRecord(data) {
-            return room.createRecord(data);
+function useMap(key) {
+    var _a;
+    var root = useStorage()[0];
+    var _b = React.useState(0), setCount = _b[1];
+    React.useEffect(function () {
+        if (root == null) {
+            return;
         }
-        function updateRecord(record, overrides) {
-            return room.updateRecord(record, overrides);
+        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 useList(key) {
+    var _a;
+    var root = useStorage()[0];
+    var _b = React.useState(0), setCount = _b[1];
+    React.useEffect(function () {
+        if (root == null) {
+            return;
         }
-        function createList() {
-            return room.createList();
+        var list = root.get(key);
+        if (list == null) {
+            list = new client.LiveList();
+            root.set(key, list);
         }
-        function moveItem(list, index, targetIndex) {
-            return room.moveItem(list, index, targetIndex);
+        function onChange() {
+            setCount(function (x) { return x + 1; });
         }
-        function deleteItem(list, index) {
-            return room.deleteItem(list, index);
+        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 useObject(key) {
+    var _a;
+    var root = useStorage()[0];
+    var _b = React.useState(0), setCount = _b[1];
+    React.useEffect(function () {
+        if (root == null) {
+            return;
         }
-        function deleteItemById(list, itemId) {
-            return room.deleteItemById(list, itemId);
+        var obj = root.get(key);
+        if (obj == null) {
+            obj = new client.LiveObject();
+            root.set(key, obj);
         }
-        function pushItem(list, item) {
-            return room.pushItem(list, item);
+        function onChange() {
+            setCount(function (x) { return x + 1; });
         }
-        return {
-            createRecord: createRecord,
-            updateRecord: updateRecord,
-            createList: createList,
-            moveItem: moveItem,
-            deleteItem: deleteItem,
-            deleteItemById: deleteItemById,
-            pushItem: pushItem,
+        obj.subscribe(onChange);
+        setCount(function (x) { return x + 1; });
+        return function () {
+            return obj.unsubscribe(onChange);
         };
-    }, [room]);
+    }, [root]);
+    return (_a = root === null || root === void 0 ? void 0 : root.get(key)) !== null && _a !== void 0 ? _a : null;
 }
 
 exports.LiveblocksProvider = LiveblocksProvider;
 exports.RoomProvider = RoomProvider;
-exports.createClient = createClient;
 exports.useBroadcastEvent = useBroadcastEvent;
-exports.useCurrentUser = useCurrentUser;
 exports.useErrorListener = useErrorListener;
 exports.useEventListener = useEventListener;
+exports.useList = useList;
+exports.useMap = useMap;
 exports.useMyPresence = useMyPresence;
+exports.useObject = useObject;
 exports.useOthers = useOthers;
+exports.useSelf = useSelf;
 exports.useStorage = useStorage;
-exports.useStorageActions = useStorageActions;
 exports.useUpdateMyPresence = useUpdateMyPresence;
 //# sourceMappingURL=index.js.map