@liveblocks/client 0.14.0 → 0.14.1

package/lib/cjs/client.js

@@ -29,11 +29,7 @@ const room_1 = require("./room");
  */
 function createClient(options) {
     const clientOptions = options;
-    if (typeof clientOptions.throttle === "number") {
-        if (clientOptions.throttle < 80 || clientOptions.throttle > 1000) {
-            throw new Error("Liveblocks client throttle should be between 80 and 1000 ms");
-        }
-    }
+    const throttleDelay = getThrottleDelayFromOptions(options);
     const rooms = new Map();
     function getRoom(roomId) {
         const internalRoom = rooms.get(roomId);
@@ -44,9 +40,21 @@ function createClient(options) {
         if (internalRoom) {
             return internalRoom.room;
         }
-        internalRoom = (0, room_1.createRoom)(roomId, Object.assign(Object.assign({}, clientOptions), options));
+        internalRoom = (0, room_1.createRoom)({
+            defaultPresence: options.defaultPresence,
+            defaultStorageRoot: options.defaultStorageRoot,
+        }, {
+            room: roomId,
+            throttleDelay,
+            WebSocketPolyfill: clientOptions.WebSocketPolyfill,
+            fetchPolyfill: clientOptions.fetchPolyfill,
+            liveblocksServer: clientOptions.liveblocksServer || "wss://liveblocks.net/v5",
+            authentication: prepareAuthentication(clientOptions),
+        });
         rooms.set(roomId, internalRoom);
-        internalRoom.connect();
+        if (!options.DO_NOT_USE_withoutConnecting) {
+            internalRoom.connect();
+        }
         return internalRoom.room;
     }
     function leave(roomId) {
@@ -78,3 +86,38 @@ function createClient(options) {
     };
 }
 exports.createClient = createClient;
+function getThrottleDelayFromOptions(options) {
+    if (options.throttle === undefined) {
+        return 100;
+    }
+    if (typeof options.throttle !== "number" ||
+        options.throttle < 80 ||
+        options.throttle > 1000) {
+        throw new Error("throttle should be a number between 80 and 1000.");
+    }
+    return options.throttle;
+}
+function prepareAuthentication(clientOptions) {
+    // TODO: throw descriptive errors for invalid options
+    if (typeof clientOptions.publicApiKey === "string") {
+        return {
+            type: "public",
+            publicApiKey: clientOptions.publicApiKey,
+            url: clientOptions.publicAuthorizeEndpoint ||
+                "https://liveblocks.io/api/public/authorize",
+        };
+    }
+    else if (typeof clientOptions.authEndpoint === "string") {
+        return {
+            type: "private",
+            url: clientOptions.authEndpoint,
+        };
+    }
+    else if (typeof clientOptions.authEndpoint === "function") {
+        return {
+            type: "custom",
+            callback: clientOptions.authEndpoint,
+        };
+    }
+    throw new Error("Invalid Liveblocks client options. For more information: https://liveblocks.io/docs/api-reference/liveblocks-client#createClient");
+}

package/lib/cjs/immutable.d.ts

@@ -0,0 +1,9 @@
+import { LiveList } from "./LiveList";
+import { LiveObject } from "./LiveObject";
+import { StorageUpdate } from "./types";
+export declare function liveObjectToJson(liveObject: LiveObject<any>): any;
+export declare function liveNodeToJson(value: any): any;
+export declare function patchLiveList<T>(liveList: LiveList<T>, prev: Array<T>, next: Array<T>): void;
+export declare function patchLiveObjectKey<T>(liveObject: LiveObject<T>, key: keyof T, prev: any, next: any): void;
+export declare function patchLiveObject<T extends Record<string, any>>(root: LiveObject<T>, prev: T, next: T): void;
+export declare function patchImmutableObject<T>(state: T, updates: StorageUpdate[]): T;

package/lib/cjs/immutable.js

@@ -0,0 +1,291 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchImmutableObject = exports.patchLiveObject = exports.patchLiveObjectKey = exports.patchLiveList = exports.liveNodeToJson = exports.liveObjectToJson = void 0;
+const LiveList_1 = require("./LiveList");
+const LiveMap_1 = require("./LiveMap");
+const LiveObject_1 = require("./LiveObject");
+const LiveRegister_1 = require("./LiveRegister");
+function liveObjectToJson(liveObject) {
+    const result = {};
+    const obj = liveObject.toObject();
+    for (const key in obj) {
+        result[key] = liveNodeToJson(obj[key]);
+    }
+    return result;
+}
+exports.liveObjectToJson = liveObjectToJson;
+function liveMapToJson(map) {
+    const result = {};
+    const obj = Object.fromEntries(map);
+    for (const key in obj) {
+        result[key] = liveNodeToJson(obj[key]);
+    }
+    return result;
+}
+function liveListToJson(value) {
+    return value.toArray().map(liveNodeToJson);
+}
+function liveNodeToJson(value) {
+    if (value instanceof LiveObject_1.LiveObject) {
+        return liveObjectToJson(value);
+    }
+    else if (value instanceof LiveList_1.LiveList) {
+        return liveListToJson(value);
+    }
+    else if (value instanceof LiveMap_1.LiveMap) {
+        return liveMapToJson(value);
+    }
+    else if (value instanceof LiveRegister_1.LiveRegister) {
+        return value.data;
+    }
+    return value;
+}
+exports.liveNodeToJson = liveNodeToJson;
+function isPlainObject(obj) {
+    return Object.prototype.toString.call(obj) === "[object Object]";
+}
+function anyToCrdt(obj) {
+    if (obj == null) {
+        return obj;
+    }
+    if (Array.isArray(obj)) {
+        return new LiveList_1.LiveList(obj.map(anyToCrdt));
+    }
+    if (isPlainObject(obj)) {
+        const init = {};
+        for (const key in obj) {
+            init[key] = anyToCrdt(obj[key]);
+        }
+        return new LiveObject_1.LiveObject(init);
+    }
+    return obj;
+}
+function patchLiveList(liveList, prev, next) {
+    let i = 0;
+    let prevEnd = prev.length - 1;
+    let nextEnd = next.length - 1;
+    let prevNode = prev[0];
+    let nextNode = next[0];
+    /**
+     * For A,B,C => A,B,C,D
+     * i = 3, prevEnd = 2, nextEnd = 3
+     *
+     * For A,B,C => B,C
+     * i = 2, prevEnd = 2, nextEnd = 1
+     *
+     * For B,C => A,B,C
+     * i = 0, pre
+     */
+    outer: {
+        while (prevNode === nextNode) {
+            ++i;
+            if (i > prevEnd || i > nextEnd) {
+                break outer;
+            }
+            prevNode = prev[i];
+            nextNode = next[i];
+        }
+        prevNode = prev[prevEnd];
+        nextNode = next[nextEnd];
+        while (prevNode === nextNode) {
+            prevEnd--;
+            nextEnd--;
+            if (i > prevEnd || i > nextEnd) {
+                break outer;
+            }
+            prevNode = prev[prevEnd];
+            nextNode = next[nextEnd];
+        }
+    }
+    if (i > prevEnd) {
+        if (i <= nextEnd) {
+            while (i <= nextEnd) {
+                liveList.insert(anyToCrdt(next[i]), i);
+                i++;
+            }
+        }
+    }
+    else if (i > nextEnd) {
+        let localI = i;
+        while (localI <= prevEnd) {
+            liveList.delete(i);
+            localI++;
+        }
+    }
+    else {
+        while (i <= prevEnd && i <= nextEnd) {
+            prevNode = prev[i];
+            nextNode = next[i];
+            const liveListNode = liveList.get(i);
+            if (liveListNode instanceof LiveObject_1.LiveObject &&
+                isPlainObject(prevNode) &&
+                isPlainObject(nextNode)) {
+                patchLiveObject(liveListNode, prevNode, nextNode);
+            }
+            else {
+                liveList.delete(i);
+                liveList.insert(anyToCrdt(nextNode), i);
+            }
+            i++;
+        }
+        while (i <= nextEnd) {
+            liveList.insert(anyToCrdt(next[i]), i);
+            i++;
+        }
+        while (i <= prevEnd) {
+            liveList.delete(i);
+            i++;
+        }
+    }
+}
+exports.patchLiveList = patchLiveList;
+function patchLiveObjectKey(liveObject, key, prev, next) {
+    const value = liveObject.get(key);
+    if (next === undefined) {
+        liveObject.delete(key);
+    }
+    else if (value === undefined) {
+        liveObject.set(key, anyToCrdt(next));
+    }
+    else if (prev === next) {
+        return;
+    }
+    else if (value instanceof LiveList_1.LiveList &&
+        Array.isArray(prev) &&
+        Array.isArray(next)) {
+        patchLiveList(value, prev, next);
+    }
+    else if (value instanceof LiveObject_1.LiveObject &&
+        isPlainObject(prev) &&
+        isPlainObject(next)) {
+        patchLiveObject(value, prev, next);
+    }
+    else {
+        liveObject.set(key, anyToCrdt(next));
+    }
+}
+exports.patchLiveObjectKey = patchLiveObjectKey;
+function patchLiveObject(root, prev, next) {
+    const updates = {};
+    for (const key in next) {
+        patchLiveObjectKey(root, key, prev[key], next[key]);
+    }
+    for (const key in prev) {
+        if (next[key] === undefined) {
+            root.delete(key);
+        }
+    }
+    if (Object.keys(updates).length > 0) {
+        root.update(updates);
+    }
+}
+exports.patchLiveObject = patchLiveObject;
+function getParentsPath(node) {
+    const path = [];
+    while (node._parentKey != null && node._parent != null) {
+        if (node._parent instanceof LiveList_1.LiveList) {
+            path.push(node._parent._indexOfPosition(node._parentKey));
+        }
+        else {
+            path.push(node._parentKey);
+        }
+        node = node._parent;
+    }
+    return path;
+}
+function patchImmutableObject(state, updates) {
+    return updates.reduce((state, update) => patchImmutableObjectWithUpdate(state, update), state);
+}
+exports.patchImmutableObject = patchImmutableObject;
+function patchImmutableObjectWithUpdate(state, update) {
+    const path = getParentsPath(update.node);
+    return patchImmutableNode(state, path, update);
+}
+function patchImmutableNode(state, path, update) {
+    var _a, _b, _c, _d;
+    const pathItem = path.pop();
+    if (pathItem === undefined) {
+        switch (update.type) {
+            case "LiveObject": {
+                if (typeof state !== "object") {
+                    throw new Error("Internal: received update on LiveObject but state was not an object");
+                }
+                let newState = Object.assign({}, state);
+                for (const key in update.updates) {
+                    if (((_a = update.updates[key]) === null || _a === void 0 ? void 0 : _a.type) === "update") {
+                        newState[key] = liveNodeToJson(update.node.get(key));
+                    }
+                    else if (((_b = update.updates[key]) === null || _b === void 0 ? void 0 : _b.type) === "delete") {
+                        delete newState[key];
+                    }
+                }
+                return newState;
+            }
+            case "LiveList": {
+                if (Array.isArray(state) === false) {
+                    throw new Error("Internal: received update on LiveList but state was not an array");
+                }
+                let newState = state.map((x) => x);
+                for (const listUpdate of update.updates) {
+                    if (listUpdate.type === "insert") {
+                        if (listUpdate.index === newState.length) {
+                            newState.push(liveNodeToJson(listUpdate.item));
+                        }
+                        else {
+                            newState = [
+                                ...newState.slice(0, listUpdate.index),
+                                liveNodeToJson(listUpdate.item),
+                                ...newState.slice(listUpdate.index),
+                            ];
+                        }
+                    }
+                    else if (listUpdate.type === "delete") {
+                        newState.splice(listUpdate.index, 1);
+                    }
+                    else if (listUpdate.type === "move") {
+                        if (listUpdate.previousIndex > listUpdate.index) {
+                            newState = [
+                                ...newState.slice(0, listUpdate.index),
+                                liveNodeToJson(listUpdate.item),
+                                ...newState.slice(listUpdate.index, listUpdate.previousIndex),
+                                ...newState.slice(listUpdate.previousIndex + 1),
+                            ];
+                        }
+                        else {
+                            newState = [
+                                ...newState.slice(0, listUpdate.previousIndex),
+                                ...newState.slice(listUpdate.previousIndex + 1, listUpdate.index + 1),
+                                liveNodeToJson(listUpdate.item),
+                                ...newState.slice(listUpdate.index + 1),
+                            ];
+                        }
+                    }
+                }
+                return newState;
+            }
+            case "LiveMap": {
+                if (typeof state !== "object") {
+                    throw new Error("Internal: received update on LiveMap but state was not an object");
+                }
+                let newState = Object.assign({}, state);
+                for (const key in update.updates) {
+                    if (((_c = update.updates[key]) === null || _c === void 0 ? void 0 : _c.type) === "update") {
+                        newState[key] = liveNodeToJson(update.node.get(key));
+                    }
+                    else if (((_d = update.updates[key]) === null || _d === void 0 ? void 0 : _d.type) === "delete") {
+                        delete newState[key];
+                    }
+                }
+                return newState;
+            }
+        }
+    }
+    if (Array.isArray(state)) {
+        const newArray = [...state];
+        newArray[pathItem] = patchImmutableNode(state[pathItem], path, update);
+        return newArray;
+    }
+    else {
+        return Object.assign(Object.assign({}, state), { [pathItem]: patchImmutableNode(state[pathItem], path, update) });
+    }
+}

package/lib/cjs/room.d.ts

@@ -1,4 +1,4 @@
-import { Others, Presence, ClientOptions, Room, MyPresenceCallback, OthersEventCallback, AuthEndpoint, EventCallback, User, Connection, ErrorCallback, AuthenticationToken, ConnectionCallback, StorageCallback, StorageUpdate, BroadcastOptions } from "./types";
+import { Others, Presence, Room, MyPresenceCallback, OthersEventCallback, EventCallback, User, Connection, ErrorCallback, AuthenticationToken, ConnectionCallback, StorageCallback, StorageUpdate, BroadcastOptions, AuthorizeResponse, Authentication } from "./types";
 import { ClientMessage, Op } from "./live";
 import { LiveMap } from "./LiveMap";
 import { LiveObject } from "./LiveObject";
@@ -66,7 +66,7 @@ export declare type State = {
     offlineOperations: Map<string, Op>;
 };
 export declare type Effects = {
-    authenticate(): void;
+    authenticate(auth: (room: string) => Promise<AuthorizeResponse>, createWebSocket: (token: string) => WebSocket): void;
     send(messages: ClientMessage[]): void;
     delayFlush(delay: number): number;
     startHeartbeatInterval(): number;
@@ -75,13 +75,13 @@ export declare type Effects = {
 };
 declare type Context = {
     room: string;
-    authEndpoint: AuthEndpoint;
-    liveblocksServer: string;
     throttleDelay: number;
-    publicApiKey?: string;
+    fetchPolyfill?: typeof fetch;
+    WebSocketPolyfill?: typeof WebSocket;
+    authentication: Authentication;
+    liveblocksServer: string;
 };
 export declare function makeStateMachine(state: State, context: Context, mockedEffects?: Effects): {
-    onOpen: () => void;
     onClose: (event: {
         code: number;
         wasClean: boolean;
@@ -152,8 +152,8 @@ export declare type InternalRoom = {
     onNavigatorOnline: () => void;
     onVisibilityChange: (visibilityState: VisibilityState) => void;
 };
-export declare function createRoom(name: string, options: ClientOptions & {
+export declare function createRoom(options: {
     defaultPresence?: Presence;
     defaultStorageRoot?: Record<string, any>;
-}): InternalRoom;
+}, context: Context): InternalRoom;
 export {};

package/lib/cjs/room.js

@@ -1,23 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __awaiter = (this && this.__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) {
@@ -30,7 +11,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createRoom = exports.defaultState = exports.makeStateMachine = void 0;
 const utils_1 = require("./utils");
-const authentication_1 = __importStar(require("./authentication"));
 const live_1 = require("./live");
 const LiveMap_1 = require("./LiveMap");
 const LiveObject_1 = require("./LiveObject");
@@ -75,16 +55,12 @@ function log(...params) {
 }
 function makeStateMachine(state, context, mockedEffects) {
     const effects = mockedEffects || {
-        authenticate() {
+        authenticate(auth, createWebSocket) {
             return __awaiter(this, void 0, void 0, function* () {
                 try {
-                    const token = yield (0, authentication_1.default)(context.authEndpoint, context.room, context.publicApiKey);
-                    const parsedToken = (0, authentication_1.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);
+                    const { token } = yield auth(context.room);
+                    const parsedToken = parseToken(token);
+                    const socket = createWebSocket(token);
                     authenticationSuccess(parsedToken, socket);
                 }
                 catch (er) {
@@ -433,15 +409,14 @@ See v0.13 release notes for more information.
             : null;
     }
     function connect() {
-        if (typeof window === "undefined") {
-            return;
-        }
         if (state.connection.state !== "closed" &&
             state.connection.state !== "unavailable") {
             return null;
         }
+        const auth = prepareAuthEndpoint(context.authentication, context.fetchPolyfill);
+        const createWebSocket = prepareCreateWebSocket(context.liveblocksServer, context.WebSocketPolyfill);
         updateConnection({ state: "authenticating" });
-        effects.authenticate();
+        effects.authenticate(auth, createWebSocket);
     }
     function updatePresence(overrides, options) {
         const oldValues = {};
@@ -468,6 +443,10 @@ See v0.13 release notes for more information.
         }
     }
     function authenticationSuccess(token, socket) {
+        socket.addEventListener("message", onMessage);
+        socket.addEventListener("open", onOpen);
+        socket.addEventListener("close", onClose);
+        socket.addEventListener("error", onError);
         updateConnection({
             state: "connecting",
             id: token.actor,
@@ -701,7 +680,7 @@ See v0.13 release notes for more information.
         }
         clearTimeout(state.timeoutHandles.pongTimeout);
         state.timeoutHandles.pongTimeout = effects.schedulePongTimeout();
-        if (state.socket.readyState === WebSocket.OPEN) {
+        if (state.socket.readyState === state.socket.OPEN) {
             state.socket.send("ping");
         }
     }
@@ -748,7 +727,7 @@ See v0.13 release notes for more information.
                 state.offlineOperations.set(op.opId, op);
             });
         }
-        if (state.socket == null || state.socket.readyState !== WebSocket.OPEN) {
+        if (state.socket == null || state.socket.readyState !== state.socket.OPEN) {
             state.buffer.storageOperations = [];
             return;
         }
@@ -952,7 +931,6 @@ See v0.13 release notes for more information.
     }
     return {
         // Internal
-        onOpen,
         onClose,
         onMessage,
         authenticationSuccess,
@@ -1042,26 +1020,9 @@ function defaultState(me, defaultStorageRoot) {
     };
 }
 exports.defaultState = defaultState;
-function createRoom(name, options) {
-    const throttleDelay = options.throttle || 100;
-    const liveblocksServer = options.liveblocksServer || "wss://liveblocks.net/v5";
-    let authEndpoint;
-    if (options.authEndpoint) {
-        authEndpoint = options.authEndpoint;
-    }
-    else {
-        const publicAuthorizeEndpoint = options.publicAuthorizeEndpoint ||
-            "https://liveblocks.io/api/public/authorize";
-        authEndpoint = publicAuthorizeEndpoint;
-    }
+function createRoom(options, context) {
     const state = defaultState(options.defaultPresence, options.defaultStorageRoot);
-    const machine = makeStateMachine(state, {
-        throttleDelay,
-        liveblocksServer,
-        authEndpoint,
-        room: name,
-        publicApiKey: options.publicApiKey,
-    });
+    const machine = makeStateMachine(state, context);
     const room = {
         /////////////
         // Core    //
@@ -1106,3 +1067,76 @@ class LiveblocksError extends Error {
         this.code = code;
     }
 }
+function parseToken(token) {
+    const tokenParts = token.split(".");
+    if (tokenParts.length !== 3) {
+        throw new Error(`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 Error(`Authentication error. Liveblocks could not parse the response of your authentication endpoint`);
+    }
+    return data;
+}
+function prepareCreateWebSocket(liveblocksServer, WebSocketPolyfill) {
+    if (typeof window === "undefined" && WebSocketPolyfill == null) {
+        throw new Error("To use Liveblocks client in a non-dom environment, you need to provide a WebSocket polyfill.");
+    }
+    const ws = WebSocketPolyfill || WebSocket;
+    return (token) => {
+        return new ws(`${liveblocksServer}/?token=${token}`);
+    };
+}
+function prepareAuthEndpoint(authentication, fetchPolyfill) {
+    if (authentication.type === "public") {
+        if (typeof window === "undefined" && fetchPolyfill == null) {
+            throw new Error("To use Liveblocks client in a non-dom environment with a publicApiKey, you need to provide a fetch polyfill.");
+        }
+        return (room) => fetchAuthEndpoint(fetchPolyfill || fetch, authentication.url, {
+            room,
+            publicApiKey: authentication.publicApiKey,
+        });
+    }
+    if (authentication.type === "private") {
+        if (typeof window === "undefined" && fetchPolyfill == null) {
+            throw new Error("To use Liveblocks client in a non-dom environment with a url as auth endpoint, you need to provide a fetch polyfill.");
+        }
+        return (room) => fetchAuthEndpoint(fetchPolyfill || fetch, authentication.url, {
+            room,
+        });
+    }
+    if (authentication.type === "custom") {
+        return authentication.callback;
+    }
+    throw new Error("Internal error. Unexpected authentication type");
+}
+function fetchAuthEndpoint(fetch, endpoint, body) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const res = yield fetch(endpoint, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(body),
+        });
+        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;
+    });
+}
+class AuthenticationError extends Error {
+    constructor(message) {
+        super(message);
+    }
+}

package/lib/cjs/types.d.ts

@@ -121,6 +121,8 @@ export declare type AuthEndpoint = string | AuthEndpointCallback;
  */
 export declare type ClientOptions = {
     throttle?: number;
+    fetchPolyfill?: any;
+    WebSocketPolyfill?: any;
 } & ({
     publicApiKey: string;
     authEndpoint?: never;
@@ -131,6 +133,17 @@ export declare type ClientOptions = {
 export declare type AuthorizeResponse = {
     token: string;
 };
+export declare type Authentication = {
+    type: "public";
+    publicApiKey: string;
+    url: string;
+} | {
+    type: "private";
+    url: string;
+} | {
+    type: "custom";
+    callback: (room: string) => Promise<AuthorizeResponse>;
+};
 declare type ConnectionState = "closed" | "authenticating" | "unavailable" | "failed" | "open" | "connecting";
 export declare type Connection = {
     state: "closed" | "authenticating" | "unavailable" | "failed";

package/lib/esm/client.js

@@ -26,11 +26,7 @@ import { createRoom } from "./room";
  */
 export function createClient(options) {
     const clientOptions = options;
-    if (typeof clientOptions.throttle === "number") {
-        if (clientOptions.throttle < 80 || clientOptions.throttle > 1000) {
-            throw new Error("Liveblocks client throttle should be between 80 and 1000 ms");
-        }
-    }
+    const throttleDelay = getThrottleDelayFromOptions(options);
     const rooms = new Map();
     function getRoom(roomId) {
         const internalRoom = rooms.get(roomId);
@@ -41,9 +37,21 @@ export function createClient(options) {
         if (internalRoom) {
             return internalRoom.room;
         }
-        internalRoom = createRoom(roomId, Object.assign(Object.assign({}, clientOptions), options));
+        internalRoom = createRoom({
+            defaultPresence: options.defaultPresence,
+            defaultStorageRoot: options.defaultStorageRoot,
+        }, {
+            room: roomId,
+            throttleDelay,
+            WebSocketPolyfill: clientOptions.WebSocketPolyfill,
+            fetchPolyfill: clientOptions.fetchPolyfill,
+            liveblocksServer: clientOptions.liveblocksServer || "wss://liveblocks.net/v5",
+            authentication: prepareAuthentication(clientOptions),
+        });
         rooms.set(roomId, internalRoom);
-        internalRoom.connect();
+        if (!options.DO_NOT_USE_withoutConnecting) {
+            internalRoom.connect();
+        }
         return internalRoom.room;
     }
     function leave(roomId) {
@@ -74,3 +82,38 @@ export function createClient(options) {
         leave,
     };
 }
+function getThrottleDelayFromOptions(options) {
+    if (options.throttle === undefined) {
+        return 100;
+    }
+    if (typeof options.throttle !== "number" ||
+        options.throttle < 80 ||
+        options.throttle > 1000) {
+        throw new Error("throttle should be a number between 80 and 1000.");
+    }
+    return options.throttle;
+}
+function prepareAuthentication(clientOptions) {
+    // TODO: throw descriptive errors for invalid options
+    if (typeof clientOptions.publicApiKey === "string") {
+        return {
+            type: "public",
+            publicApiKey: clientOptions.publicApiKey,
+            url: clientOptions.publicAuthorizeEndpoint ||
+                "https://liveblocks.io/api/public/authorize",
+        };
+    }
+    else if (typeof clientOptions.authEndpoint === "string") {
+        return {
+            type: "private",
+            url: clientOptions.authEndpoint,
+        };
+    }
+    else if (typeof clientOptions.authEndpoint === "function") {
+        return {
+            type: "custom",
+            callback: clientOptions.authEndpoint,
+        };
+    }
+    throw new Error("Invalid Liveblocks client options. For more information: https://liveblocks.io/docs/api-reference/liveblocks-client#createClient");
+}

package/lib/esm/immutable.d.ts

@@ -0,0 +1,9 @@
+import { LiveList } from "./LiveList";
+import { LiveObject } from "./LiveObject";
+import { StorageUpdate } from "./types";
+export declare function liveObjectToJson(liveObject: LiveObject<any>): any;
+export declare function liveNodeToJson(value: any): any;
+export declare function patchLiveList<T>(liveList: LiveList<T>, prev: Array<T>, next: Array<T>): void;
+export declare function patchLiveObjectKey<T>(liveObject: LiveObject<T>, key: keyof T, prev: any, next: any): void;
+export declare function patchLiveObject<T extends Record<string, any>>(root: LiveObject<T>, prev: T, next: T): void;
+export declare function patchImmutableObject<T>(state: T, updates: StorageUpdate[]): T;

package/lib/esm/immutable.js

@@ -0,0 +1,282 @@
+import { LiveList } from "./LiveList";
+import { LiveMap } from "./LiveMap";
+import { LiveObject } from "./LiveObject";
+import { LiveRegister } from "./LiveRegister";
+export function liveObjectToJson(liveObject) {
+    const result = {};
+    const obj = liveObject.toObject();
+    for (const key in obj) {
+        result[key] = liveNodeToJson(obj[key]);
+    }
+    return result;
+}
+function liveMapToJson(map) {
+    const result = {};
+    const obj = Object.fromEntries(map);
+    for (const key in obj) {
+        result[key] = liveNodeToJson(obj[key]);
+    }
+    return result;
+}
+function liveListToJson(value) {
+    return value.toArray().map(liveNodeToJson);
+}
+export function liveNodeToJson(value) {
+    if (value instanceof LiveObject) {
+        return liveObjectToJson(value);
+    }
+    else if (value instanceof LiveList) {
+        return liveListToJson(value);
+    }
+    else if (value instanceof LiveMap) {
+        return liveMapToJson(value);
+    }
+    else if (value instanceof LiveRegister) {
+        return value.data;
+    }
+    return value;
+}
+function isPlainObject(obj) {
+    return Object.prototype.toString.call(obj) === "[object Object]";
+}
+function anyToCrdt(obj) {
+    if (obj == null) {
+        return obj;
+    }
+    if (Array.isArray(obj)) {
+        return new LiveList(obj.map(anyToCrdt));
+    }
+    if (isPlainObject(obj)) {
+        const init = {};
+        for (const key in obj) {
+            init[key] = anyToCrdt(obj[key]);
+        }
+        return new LiveObject(init);
+    }
+    return obj;
+}
+export function patchLiveList(liveList, prev, next) {
+    let i = 0;
+    let prevEnd = prev.length - 1;
+    let nextEnd = next.length - 1;
+    let prevNode = prev[0];
+    let nextNode = next[0];
+    /**
+     * For A,B,C => A,B,C,D
+     * i = 3, prevEnd = 2, nextEnd = 3
+     *
+     * For A,B,C => B,C
+     * i = 2, prevEnd = 2, nextEnd = 1
+     *
+     * For B,C => A,B,C
+     * i = 0, pre
+     */
+    outer: {
+        while (prevNode === nextNode) {
+            ++i;
+            if (i > prevEnd || i > nextEnd) {
+                break outer;
+            }
+            prevNode = prev[i];
+            nextNode = next[i];
+        }
+        prevNode = prev[prevEnd];
+        nextNode = next[nextEnd];
+        while (prevNode === nextNode) {
+            prevEnd--;
+            nextEnd--;
+            if (i > prevEnd || i > nextEnd) {
+                break outer;
+            }
+            prevNode = prev[prevEnd];
+            nextNode = next[nextEnd];
+        }
+    }
+    if (i > prevEnd) {
+        if (i <= nextEnd) {
+            while (i <= nextEnd) {
+                liveList.insert(anyToCrdt(next[i]), i);
+                i++;
+            }
+        }
+    }
+    else if (i > nextEnd) {
+        let localI = i;
+        while (localI <= prevEnd) {
+            liveList.delete(i);
+            localI++;
+        }
+    }
+    else {
+        while (i <= prevEnd && i <= nextEnd) {
+            prevNode = prev[i];
+            nextNode = next[i];
+            const liveListNode = liveList.get(i);
+            if (liveListNode instanceof LiveObject &&
+                isPlainObject(prevNode) &&
+                isPlainObject(nextNode)) {
+                patchLiveObject(liveListNode, prevNode, nextNode);
+            }
+            else {
+                liveList.delete(i);
+                liveList.insert(anyToCrdt(nextNode), i);
+            }
+            i++;
+        }
+        while (i <= nextEnd) {
+            liveList.insert(anyToCrdt(next[i]), i);
+            i++;
+        }
+        while (i <= prevEnd) {
+            liveList.delete(i);
+            i++;
+        }
+    }
+}
+export function patchLiveObjectKey(liveObject, key, prev, next) {
+    const value = liveObject.get(key);
+    if (next === undefined) {
+        liveObject.delete(key);
+    }
+    else if (value === undefined) {
+        liveObject.set(key, anyToCrdt(next));
+    }
+    else if (prev === next) {
+        return;
+    }
+    else if (value instanceof LiveList &&
+        Array.isArray(prev) &&
+        Array.isArray(next)) {
+        patchLiveList(value, prev, next);
+    }
+    else if (value instanceof LiveObject &&
+        isPlainObject(prev) &&
+        isPlainObject(next)) {
+        patchLiveObject(value, prev, next);
+    }
+    else {
+        liveObject.set(key, anyToCrdt(next));
+    }
+}
+export function patchLiveObject(root, prev, next) {
+    const updates = {};
+    for (const key in next) {
+        patchLiveObjectKey(root, key, prev[key], next[key]);
+    }
+    for (const key in prev) {
+        if (next[key] === undefined) {
+            root.delete(key);
+        }
+    }
+    if (Object.keys(updates).length > 0) {
+        root.update(updates);
+    }
+}
+function getParentsPath(node) {
+    const path = [];
+    while (node._parentKey != null && node._parent != null) {
+        if (node._parent instanceof LiveList) {
+            path.push(node._parent._indexOfPosition(node._parentKey));
+        }
+        else {
+            path.push(node._parentKey);
+        }
+        node = node._parent;
+    }
+    return path;
+}
+export function patchImmutableObject(state, updates) {
+    return updates.reduce((state, update) => patchImmutableObjectWithUpdate(state, update), state);
+}
+function patchImmutableObjectWithUpdate(state, update) {
+    const path = getParentsPath(update.node);
+    return patchImmutableNode(state, path, update);
+}
+function patchImmutableNode(state, path, update) {
+    var _a, _b, _c, _d;
+    const pathItem = path.pop();
+    if (pathItem === undefined) {
+        switch (update.type) {
+            case "LiveObject": {
+                if (typeof state !== "object") {
+                    throw new Error("Internal: received update on LiveObject but state was not an object");
+                }
+                let newState = Object.assign({}, state);
+                for (const key in update.updates) {
+                    if (((_a = update.updates[key]) === null || _a === void 0 ? void 0 : _a.type) === "update") {
+                        newState[key] = liveNodeToJson(update.node.get(key));
+                    }
+                    else if (((_b = update.updates[key]) === null || _b === void 0 ? void 0 : _b.type) === "delete") {
+                        delete newState[key];
+                    }
+                }
+                return newState;
+            }
+            case "LiveList": {
+                if (Array.isArray(state) === false) {
+                    throw new Error("Internal: received update on LiveList but state was not an array");
+                }
+                let newState = state.map((x) => x);
+                for (const listUpdate of update.updates) {
+                    if (listUpdate.type === "insert") {
+                        if (listUpdate.index === newState.length) {
+                            newState.push(liveNodeToJson(listUpdate.item));
+                        }
+                        else {
+                            newState = [
+                                ...newState.slice(0, listUpdate.index),
+                                liveNodeToJson(listUpdate.item),
+                                ...newState.slice(listUpdate.index),
+                            ];
+                        }
+                    }
+                    else if (listUpdate.type === "delete") {
+                        newState.splice(listUpdate.index, 1);
+                    }
+                    else if (listUpdate.type === "move") {
+                        if (listUpdate.previousIndex > listUpdate.index) {
+                            newState = [
+                                ...newState.slice(0, listUpdate.index),
+                                liveNodeToJson(listUpdate.item),
+                                ...newState.slice(listUpdate.index, listUpdate.previousIndex),
+                                ...newState.slice(listUpdate.previousIndex + 1),
+                            ];
+                        }
+                        else {
+                            newState = [
+                                ...newState.slice(0, listUpdate.previousIndex),
+                                ...newState.slice(listUpdate.previousIndex + 1, listUpdate.index + 1),
+                                liveNodeToJson(listUpdate.item),
+                                ...newState.slice(listUpdate.index + 1),
+                            ];
+                        }
+                    }
+                }
+                return newState;
+            }
+            case "LiveMap": {
+                if (typeof state !== "object") {
+                    throw new Error("Internal: received update on LiveMap but state was not an object");
+                }
+                let newState = Object.assign({}, state);
+                for (const key in update.updates) {
+                    if (((_c = update.updates[key]) === null || _c === void 0 ? void 0 : _c.type) === "update") {
+                        newState[key] = liveNodeToJson(update.node.get(key));
+                    }
+                    else if (((_d = update.updates[key]) === null || _d === void 0 ? void 0 : _d.type) === "delete") {
+                        delete newState[key];
+                    }
+                }
+                return newState;
+            }
+        }
+    }
+    if (Array.isArray(state)) {
+        const newArray = [...state];
+        newArray[pathItem] = patchImmutableNode(state[pathItem], path, update);
+        return newArray;
+    }
+    else {
+        return Object.assign(Object.assign({}, state), { [pathItem]: patchImmutableNode(state[pathItem], path, update) });
+    }
+}

package/lib/esm/room.d.ts

@@ -1,4 +1,4 @@
-import { Others, Presence, ClientOptions, Room, MyPresenceCallback, OthersEventCallback, AuthEndpoint, EventCallback, User, Connection, ErrorCallback, AuthenticationToken, ConnectionCallback, StorageCallback, StorageUpdate, BroadcastOptions } from "./types";
+import { Others, Presence, Room, MyPresenceCallback, OthersEventCallback, EventCallback, User, Connection, ErrorCallback, AuthenticationToken, ConnectionCallback, StorageCallback, StorageUpdate, BroadcastOptions, AuthorizeResponse, Authentication } from "./types";
 import { ClientMessage, Op } from "./live";
 import { LiveMap } from "./LiveMap";
 import { LiveObject } from "./LiveObject";
@@ -66,7 +66,7 @@ export declare type State = {
     offlineOperations: Map<string, Op>;
 };
 export declare type Effects = {
-    authenticate(): void;
+    authenticate(auth: (room: string) => Promise<AuthorizeResponse>, createWebSocket: (token: string) => WebSocket): void;
     send(messages: ClientMessage[]): void;
     delayFlush(delay: number): number;
     startHeartbeatInterval(): number;
@@ -75,13 +75,13 @@ export declare type Effects = {
 };
 declare type Context = {
     room: string;
-    authEndpoint: AuthEndpoint;
-    liveblocksServer: string;
     throttleDelay: number;
-    publicApiKey?: string;
+    fetchPolyfill?: typeof fetch;
+    WebSocketPolyfill?: typeof WebSocket;
+    authentication: Authentication;
+    liveblocksServer: string;
 };
 export declare function makeStateMachine(state: State, context: Context, mockedEffects?: Effects): {
-    onOpen: () => void;
     onClose: (event: {
         code: number;
         wasClean: boolean;
@@ -152,8 +152,8 @@ export declare type InternalRoom = {
     onNavigatorOnline: () => void;
     onVisibilityChange: (visibilityState: VisibilityState) => void;
 };
-export declare function createRoom(name: string, options: ClientOptions & {
+export declare function createRoom(options: {
     defaultPresence?: Presence;
     defaultStorageRoot?: Record<string, any>;
-}): InternalRoom;
+}, context: Context): InternalRoom;
 export {};

package/lib/esm/room.js

@@ -8,7 +8,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { getTreesDiffOperations, isSameNodeOrChildOf, remove } from "./utils";
-import auth, { parseToken } from "./authentication";
 import { ClientMessageType, ServerMessageType, OpType, } from "./live";
 import { LiveMap } from "./LiveMap";
 import { LiveObject } from "./LiveObject";
@@ -53,16 +52,12 @@ function log(...params) {
 }
 export function makeStateMachine(state, context, mockedEffects) {
     const effects = mockedEffects || {
-        authenticate() {
+        authenticate(auth, createWebSocket) {
             return __awaiter(this, void 0, void 0, function* () {
                 try {
-                    const token = yield auth(context.authEndpoint, context.room, context.publicApiKey);
+                    const { token } = yield auth(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);
+                    const socket = createWebSocket(token);
                     authenticationSuccess(parsedToken, socket);
                 }
                 catch (er) {
@@ -411,15 +406,14 @@ See v0.13 release notes for more information.
             : null;
     }
     function connect() {
-        if (typeof window === "undefined") {
-            return;
-        }
         if (state.connection.state !== "closed" &&
             state.connection.state !== "unavailable") {
             return null;
         }
+        const auth = prepareAuthEndpoint(context.authentication, context.fetchPolyfill);
+        const createWebSocket = prepareCreateWebSocket(context.liveblocksServer, context.WebSocketPolyfill);
         updateConnection({ state: "authenticating" });
-        effects.authenticate();
+        effects.authenticate(auth, createWebSocket);
     }
     function updatePresence(overrides, options) {
         const oldValues = {};
@@ -446,6 +440,10 @@ See v0.13 release notes for more information.
         }
     }
     function authenticationSuccess(token, socket) {
+        socket.addEventListener("message", onMessage);
+        socket.addEventListener("open", onOpen);
+        socket.addEventListener("close", onClose);
+        socket.addEventListener("error", onError);
         updateConnection({
             state: "connecting",
             id: token.actor,
@@ -679,7 +677,7 @@ See v0.13 release notes for more information.
         }
         clearTimeout(state.timeoutHandles.pongTimeout);
         state.timeoutHandles.pongTimeout = effects.schedulePongTimeout();
-        if (state.socket.readyState === WebSocket.OPEN) {
+        if (state.socket.readyState === state.socket.OPEN) {
             state.socket.send("ping");
         }
     }
@@ -726,7 +724,7 @@ See v0.13 release notes for more information.
                 state.offlineOperations.set(op.opId, op);
             });
         }
-        if (state.socket == null || state.socket.readyState !== WebSocket.OPEN) {
+        if (state.socket == null || state.socket.readyState !== state.socket.OPEN) {
             state.buffer.storageOperations = [];
             return;
         }
@@ -930,7 +928,6 @@ See v0.13 release notes for more information.
     }
     return {
         // Internal
-        onOpen,
         onClose,
         onMessage,
         authenticationSuccess,
@@ -1018,26 +1015,9 @@ export function defaultState(me, defaultStorageRoot) {
         offlineOperations: new Map(),
     };
 }
-export function createRoom(name, options) {
-    const throttleDelay = options.throttle || 100;
-    const liveblocksServer = options.liveblocksServer || "wss://liveblocks.net/v5";
-    let authEndpoint;
-    if (options.authEndpoint) {
-        authEndpoint = options.authEndpoint;
-    }
-    else {
-        const publicAuthorizeEndpoint = options.publicAuthorizeEndpoint ||
-            "https://liveblocks.io/api/public/authorize";
-        authEndpoint = publicAuthorizeEndpoint;
-    }
+export function createRoom(options, context) {
     const state = defaultState(options.defaultPresence, options.defaultStorageRoot);
-    const machine = makeStateMachine(state, {
-        throttleDelay,
-        liveblocksServer,
-        authEndpoint,
-        room: name,
-        publicApiKey: options.publicApiKey,
-    });
+    const machine = makeStateMachine(state, context);
     const room = {
         /////////////
         // Core    //
@@ -1081,3 +1061,76 @@ class LiveblocksError extends Error {
         this.code = code;
     }
 }
+function parseToken(token) {
+    const tokenParts = token.split(".");
+    if (tokenParts.length !== 3) {
+        throw new Error(`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 Error(`Authentication error. Liveblocks could not parse the response of your authentication endpoint`);
+    }
+    return data;
+}
+function prepareCreateWebSocket(liveblocksServer, WebSocketPolyfill) {
+    if (typeof window === "undefined" && WebSocketPolyfill == null) {
+        throw new Error("To use Liveblocks client in a non-dom environment, you need to provide a WebSocket polyfill.");
+    }
+    const ws = WebSocketPolyfill || WebSocket;
+    return (token) => {
+        return new ws(`${liveblocksServer}/?token=${token}`);
+    };
+}
+function prepareAuthEndpoint(authentication, fetchPolyfill) {
+    if (authentication.type === "public") {
+        if (typeof window === "undefined" && fetchPolyfill == null) {
+            throw new Error("To use Liveblocks client in a non-dom environment with a publicApiKey, you need to provide a fetch polyfill.");
+        }
+        return (room) => fetchAuthEndpoint(fetchPolyfill || fetch, authentication.url, {
+            room,
+            publicApiKey: authentication.publicApiKey,
+        });
+    }
+    if (authentication.type === "private") {
+        if (typeof window === "undefined" && fetchPolyfill == null) {
+            throw new Error("To use Liveblocks client in a non-dom environment with a url as auth endpoint, you need to provide a fetch polyfill.");
+        }
+        return (room) => fetchAuthEndpoint(fetchPolyfill || fetch, authentication.url, {
+            room,
+        });
+    }
+    if (authentication.type === "custom") {
+        return authentication.callback;
+    }
+    throw new Error("Internal error. Unexpected authentication type");
+}
+function fetchAuthEndpoint(fetch, endpoint, body) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const res = yield fetch(endpoint, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(body),
+        });
+        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;
+    });
+}
+class AuthenticationError extends Error {
+    constructor(message) {
+        super(message);
+    }
+}

package/lib/esm/types.d.ts

@@ -121,6 +121,8 @@ export declare type AuthEndpoint = string | AuthEndpointCallback;
  */
 export declare type ClientOptions = {
     throttle?: number;
+    fetchPolyfill?: any;
+    WebSocketPolyfill?: any;
 } & ({
     publicApiKey: string;
     authEndpoint?: never;
@@ -131,6 +133,17 @@ export declare type ClientOptions = {
 export declare type AuthorizeResponse = {
     token: string;
 };
+export declare type Authentication = {
+    type: "public";
+    publicApiKey: string;
+    url: string;
+} | {
+    type: "private";
+    url: string;
+} | {
+    type: "custom";
+    callback: (room: string) => Promise<AuthorizeResponse>;
+};
 declare type ConnectionState = "closed" | "authenticating" | "unavailable" | "failed" | "open" | "connecting";
 export declare type Connection = {
     state: "closed" | "authenticating" | "unavailable" | "failed";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/client",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -29,13 +29,17 @@
     "@babel/preset-env": "^7.12.16",
     "@babel/preset-typescript": "^7.12.16",
     "@types/jest": "^26.0.21",
+    "@types/node-fetch": "^2.6.1",
+    "@types/ws": "^8.2.2",
     "babel-jest": "^26.6.3",
     "jest": "^26.6.3",
-    "typescript": "^4.4.0"
+    "node-fetch": "2.6.7",
+    "typescript": "^4.4.0",
+    "ws": "^8.5.0"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/liveblocks/liveblocks.git",
     "directory": "packages/liveblocks"
   }
-}
+}