@liveblocks/client 0.14.0-beta.1 → 0.14.2

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";
@@ -36,6 +35,9 @@ function makeOthers(presenceMap) {
         get count() {
             return array.length;
         },
+        [Symbol.iterator]() {
+            return array[Symbol.iterator]();
+        },
         map(callback) {
             return array.map(callback);
         },
@@ -50,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) {
@@ -162,6 +160,7 @@ export function makeStateMachine(state, context, mockedEffects) {
     function load(items) {
         const [root, parentToChildren] = buildRootAndParentToChildren(items);
         return LiveObject._deserialize(root, parentToChildren, {
+            getItem,
             addItem,
             deleteItem,
             generateId,
@@ -337,31 +336,31 @@ export function makeStateMachine(state, context, mockedEffects) {
             }
             case OpType.CreateObject: {
                 const parent = state.items.get(op.parentId);
-                if (parent == null || getItem(op.id) != null) {
+                if (parent == null) {
                     return { modified: false };
                 }
-                return parent._attachChild(op.id, op.parentKey, new LiveObject(op.data), isLocal);
+                return parent._attachChild(op.id, op.parentKey, new LiveObject(op.data), op.opId, isLocal);
             }
             case OpType.CreateList: {
                 const parent = state.items.get(op.parentId);
-                if (parent == null || getItem(op.id) != null) {
+                if (parent == null) {
                     return { modified: false };
                 }
-                return parent._attachChild(op.id, op.parentKey, new LiveList(), isLocal);
+                return parent._attachChild(op.id, op.parentKey, new LiveList(), op.opId, isLocal);
             }
             case OpType.CreateRegister: {
                 const parent = state.items.get(op.parentId);
-                if (parent == null || getItem(op.id) != null) {
+                if (parent == null) {
                     return { modified: false };
                 }
-                return parent._attachChild(op.id, op.parentKey, new LiveRegister(op.data), isLocal);
+                return parent._attachChild(op.id, op.parentKey, new LiveRegister(op.data), op.opId, isLocal);
             }
             case OpType.CreateMap: {
                 const parent = state.items.get(op.parentId);
-                if (parent == null || getItem(op.id) != null) {
+                if (parent == null) {
                     return { modified: false };
                 }
-                return parent._attachChild(op.id, op.parentKey, new LiveMap(), isLocal);
+                return parent._attachChild(op.id, op.parentKey, new LiveMap(), op.opId, isLocal);
             }
         }
         return { modified: false };
@@ -408,15 +407,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 = {};
@@ -443,6 +441,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,
@@ -453,7 +455,9 @@ See v0.13 release notes for more information.
         state.socket = socket;
     }
     function authenticationFailure(error) {
-        console.error(error);
+        if (process.env.NODE_ENV !== "production") {
+            console.error("Call to authentication endpoint failed", error);
+        }
         updateConnection({ state: "unavailable" });
         state.numberOfRetry++;
         state.timeoutHandles.reconnect = effects.scheduleReconnect(getRetryDelay());
@@ -620,14 +624,20 @@ See v0.13 release notes for more information.
             updateConnection({ state: "failed" });
             const error = new LiveblocksError(event.reason, event.code);
             for (const listener of state.listeners.error) {
-                console.error(`Liveblocks WebSocket connection closed. Reason: ${error.message} (code: ${error.code})`);
+                if (process.env.NODE_ENV !== "production") {
+                    console.error(`Connection to Liveblocks websocket server closed. Reason: ${error.message} (code: ${error.code})`);
+                }
                 listener(error);
             }
         }
         else if (event.wasClean === false) {
-            updateConnection({ state: "unavailable" });
             state.numberOfRetry++;
-            state.timeoutHandles.reconnect = effects.scheduleReconnect(getRetryDelay());
+            const delay = getRetryDelay();
+            if (process.env.NODE_ENV !== "production") {
+                console.warn(`Connection to Liveblocks websocket server closed (code: ${event.code}). Retrying in ${delay}ms.`);
+            }
+            updateConnection({ state: "unavailable" });
+            state.timeoutHandles.reconnect = effects.scheduleReconnect(delay);
         }
         else {
             updateConnection({ state: "closed" });
@@ -668,7 +678,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");
         }
     }
@@ -715,7 +725,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;
         }
@@ -791,8 +801,10 @@ See v0.13 release notes for more information.
     function getOthers() {
         return state.others;
     }
-    function broadcastEvent(event) {
-        if (state.socket == null) {
+    function broadcastEvent(event, options = {
+        shouldQueueEventIfNotReady: false,
+    }) {
+        if (state.socket == null && options.shouldQueueEventIfNotReady == false) {
             return;
         }
         state.buffer.messages.push({
@@ -917,7 +929,6 @@ See v0.13 release notes for more information.
     }
     return {
         // Internal
-        onOpen,
         onClose,
         onMessage,
         authenticationSuccess,
@@ -1005,26 +1016,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    //
@@ -1068,3 +1062,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

@@ -28,6 +28,14 @@ export declare type LiveListUpdates<TItem = any> = {
     type: "LiveList";
     node: LiveList<TItem>;
 };
+export declare type BroadcastOptions = {
+    /**
+     * Whether or not event is queued if the connection is currently closed.
+     *
+     * ❗ We are not sure if we want to support this option in the future so it might be deprecated to be replaced by something else
+     */
+    shouldQueueEventIfNotReady: boolean;
+};
 export declare type StorageUpdate = LiveMapUpdates | LiveObjectUpdates | LiveListUpdates;
 export declare type StorageCallback = (updates: StorageUpdate[]) => void;
 export declare type Client = {
@@ -65,6 +73,10 @@ export interface Others<TPresence extends Presence = Presence> {
      * Number of other users in the room.
      */
     readonly count: number;
+    /**
+     * Returns a new Iterator object that contains the users.
+     */
+    [Symbol.iterator](): IterableIterator<User<TPresence>>;
     /**
      * Returns the array of connected users in room.
      */
@@ -109,6 +121,8 @@ export declare type AuthEndpoint = string | AuthEndpointCallback;
  */
 export declare type ClientOptions = {
     throttle?: number;
+    fetchPolyfill?: any;
+    WebSocketPolyfill?: any;
 } & ({
     publicApiKey: string;
     authEndpoint?: never;
@@ -119,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";
@@ -423,7 +448,7 @@ export declare type Room = {
      *   }
      * });
      */
-    broadcastEvent: (event: any) => void;
+    broadcastEvent: (event: any, options?: BroadcastOptions) => void;
     /**
      * Get the room's storage asynchronously.
      * The storage's root is a {@link LiveObject}.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/client",
-  "version": "0.14.0-beta.1",
+  "version": "0.14.2",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -29,9 +29,13 @@
     "@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",

package/lib/cjs/authentication.d.ts

@@ -1,3 +0,0 @@
-import { AuthEndpoint, AuthenticationToken } from "./types";
-export default function auth(endpoint: AuthEndpoint, room: string, publicApiKey?: string): Promise<string>;
-export declare function parseToken(token: string): AuthenticationToken;

package/lib/cjs/authentication.js

@@ -1,71 +0,0 @@
-"use strict";
-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) {
-        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());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseToken = void 0;
-function fetchAuthorize(endpoint, room, publicApiKey) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const res = yield fetch(endpoint, {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-                room,
-                publicApiKey,
-            }),
-        });
-        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, publicApiKey) {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (typeof endpoint === "string") {
-            return fetchAuthorize(endpoint, room, publicApiKey);
-        }
-        if (typeof endpoint === "function") {
-            const { token } = yield endpoint(room);
-            // TODO: Validation
-            return token;
-        }
-        throw new Error("Authentication error. Liveblocks could not parse the response of your authentication endpoint");
-    });
-}
-exports.default = auth;
-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;
-}
-exports.parseToken = parseToken;

package/lib/esm/authentication.d.ts

@@ -1,3 +0,0 @@
-import { AuthEndpoint, AuthenticationToken } from "./types";
-export default function auth(endpoint: AuthEndpoint, room: string, publicApiKey?: string): Promise<string>;
-export declare function parseToken(token: string): AuthenticationToken;

package/lib/esm/authentication.js

@@ -1,66 +0,0 @@
-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) {
-        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, publicApiKey) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const res = yield fetch(endpoint, {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-                room,
-                publicApiKey,
-            }),
-        });
-        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;
-    });
-}
-export default function auth(endpoint, room, publicApiKey) {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (typeof endpoint === "string") {
-            return fetchAuthorize(endpoint, room, publicApiKey);
-        }
-        if (typeof endpoint === "function") {
-            const { token } = yield endpoint(room);
-            // TODO: Validation
-            return token;
-        }
-        throw new Error("Authentication error. Liveblocks could not parse the response of your authentication endpoint");
-    });
-}
-class AuthenticationError extends Error {
-    constructor(message) {
-        super(message);
-    }
-}
-export 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;
-}