@hocuspocus/provider 2.2.3 → 2.3.0

package/dist/hocuspocus-provider.esm.js

@@ -1,5 +1,5 @@
+import { WsReadyStates, Unauthorized, Forbidden, MessageTooBig, readAuthMessage, writeAuthentication, awarenessStatesToArray } from '@hocuspocus/common';
 import * as Y from 'yjs';
-import { readAuthMessage, writeAuthentication, WsReadyStates, Unauthorized, Forbidden, MessageTooBig, awarenessStatesToArray } from '@hocuspocus/common';
 import { retry } from '@lifeomic/attempt';
 
 /**
@@ -50,6 +50,22 @@ const setIfUndefined = (map, key, createT) => {
 
 const create$1 = () => new Set();
 
+/**
+ * Utility module to work with Arrays.
+ *
+ * @module array
+ */
+
+/**
+ * Transforms something array-like to an actual Array.
+ *
+ * @function
+ * @template T
+ * @param {ArrayLike<T>|Iterable<T>} arraylike
+ * @return {T}
+ */
+const from = Array.from;
+
 /**
  * Utility module to work with strings.
  *
@@ -212,22 +228,6 @@ const onChange = eventHandler => usePolyfill || addEventListener('storage', /**
 /* c8 ignore next */
 const offChange = eventHandler => usePolyfill || removeEventListener('storage', /** @type {any} */ (eventHandler));
 
-/**
- * Utility module to work with Arrays.
- *
- * @module array
- */
-
-/**
- * Transforms something array-like to an actual Array.
- *
- * @function
- * @template T
- * @param {ArrayLike<T>|Iterable<T>} arraylike
- * @return {T}
- */
-const from = Array.from;
-
 /**
  * Utility functions for working with EcmaScript objects.
  *
@@ -375,7 +375,6 @@ const equalityDeep = (a, b) => {
  */
 // @ts-ignore
 const isOneOf = (value, options) => options.includes(value);
-/* c8 ignore stop */
 
 /**
  * Isomorphic module to work access the environment (query params, env variables).
@@ -507,7 +506,9 @@ const min = (a, b) => a < b ? a : b;
 const max = (a, b) => a > b ? a : b;
 
 /* eslint-env browser */
+const BIT7 = 64;
 const BIT8 = 128;
+const BITS6 = 63;
 const BITS7 = 127;
 
 /**
@@ -865,6 +866,44 @@ const readVarUint = decoder => {
   throw errorUnexpectedEndOfArray
 };
 
+/**
+ * Read signed integer (32bit) with variable length.
+ * 1/8th of the storage is used as encoding overhead.
+ *  * numbers < 2^7 is stored in one bytlength
+ *  * numbers < 2^14 is stored in two bylength
+ * @todo This should probably create the inverse ~num if number is negative - but this would be a breaking change.
+ *
+ * @function
+ * @param {Decoder} decoder
+ * @return {number} An unsigned integer.length
+ */
+const readVarInt = decoder => {
+  let r = decoder.arr[decoder.pos++];
+  let num = r & BITS6;
+  let mult = 64;
+  const sign = (r & BIT7) > 0 ? -1 : 1;
+  if ((r & BIT8) === 0) {
+    // don't continue reading
+    return sign * num
+  }
+  const len = decoder.arr.length;
+  while (decoder.pos < len) {
+    r = decoder.arr[decoder.pos++];
+    // num = num | ((r & binary.BITS7) << len)
+    num = num + (r & BITS7) * mult;
+    mult *= 128;
+    if (r < BIT8) {
+      return sign * num
+    }
+    /* c8 ignore start */
+    if (num > MAX_SAFE_INTEGER) {
+      throw errorIntegerOutOfRange
+    }
+    /* c8 ignore stop */
+  }
+  throw errorUnexpectedEndOfArray
+};
+
 /**
  * We don't test this function anymore as we use native decoding/encoding by default now.
  * Better not modify this anymore..
@@ -1112,6 +1151,50 @@ const publish = (room, data, origin = null) => {
   c.subs.forEach(sub => sub(data, origin));
 };
 
+/**
+ * Mutual exclude for JavaScript.
+ *
+ * @module mutex
+ */
+
+/**
+ * @callback mutex
+ * @param {function():void} cb Only executed when this mutex is not in the current stack
+ * @param {function():void} [elseCb] Executed when this mutex is in the current stack
+ */
+
+/**
+ * Creates a mutual exclude function with the following property:
+ *
+ * ```js
+ * const mutex = createMutex()
+ * mutex(() => {
+ *   // This function is immediately executed
+ *   mutex(() => {
+ *     // This function is not executed, as the mutex is already active.
+ *   })
+ * })
+ * ```
+ *
+ * @return {mutex} A mutual exclude function
+ * @public
+ */
+const createMutex = () => {
+  let token = true;
+  return (f, g) => {
+    if (token) {
+      token = false;
+      try {
+        f();
+      } finally {
+        token = true;
+      }
+    } else if (g !== undefined) {
+      g();
+    }
+  }
+};
+
 /**
  * Utility module to work with time.
  *
@@ -1462,50 +1545,6 @@ const applyAwarenessUpdate = (awareness, update, origin) => {
   }
 };
 
-/**
- * Mutual exclude for JavaScript.
- *
- * @module mutex
- */
-
-/**
- * @callback mutex
- * @param {function():void} cb Only executed when this mutex is not in the current stack
- * @param {function():void} [elseCb] Executed when this mutex is in the current stack
- */
-
-/**
- * Creates a mutual exclude function with the following property:
- *
- * ```js
- * const mutex = createMutex()
- * mutex(() => {
- *   // This function is immediately executed
- *   mutex(() => {
- *     // This function is not executed, as the mutex is already active.
- *   })
- * })
- * ```
- *
- * @return {mutex} A mutual exclude function
- * @public
- */
-const createMutex = () => {
-  let token = true;
-  return (f, g) => {
-    if (token) {
-      token = false;
-      try {
-        f();
-      } finally {
-        token = true;
-      }
-    } else if (g !== undefined) {
-      g();
-    }
-  }
-};
-
 class EventEmitter {
     constructor() {
         this.callbacks = {};
@@ -1541,717 +1580,696 @@ class EventEmitter {
     }
 }
 
-class IncomingMessage {
-    constructor(data) {
-        this.data = data;
-        this.encoder = createEncoder();
-        this.decoder = createDecoder(new Uint8Array(this.data));
-    }
-    readVarUint() {
-        return readVarUint(this.decoder);
-    }
-    readVarString() {
-        return readVarString(this.decoder);
-    }
-    readVarUint8Array() {
-        return readVarUint8Array(this.decoder);
-    }
-    writeVarUint(type) {
-        return writeVarUint(this.encoder, type);
-    }
-    writeVarString(string) {
-        return writeVarString(this.encoder, string);
-    }
-    writeVarUint8Array(data) {
-        return writeVarUint8Array(this.encoder, data);
-    }
-    length() {
-        return length(this.encoder);
-    }
-}
-
-/**
- * @module sync-protocol
- */
-
-/**
- * @typedef {Map<number, number>} StateMap
- */
-
 /**
- * Core Yjs defines two message types:
- * • YjsSyncStep1: Includes the State Set of the sending client. When received, the client should reply with YjsSyncStep2.
- * • YjsSyncStep2: Includes all missing structs and the complete delete set. When received, the client is assured that it
- *   received all information from the remote client.
- *
- * In a peer-to-peer network, you may want to introduce a SyncDone message type. Both parties should initiate the connection
- * with SyncStep1. When a client received SyncStep2, it should reply with SyncDone. When the local client received both
- * SyncStep2 and SyncDone, it is assured that it is synced to the remote client.
- *
- * In a client-server model, you want to handle this differently: The client should initiate the connection with SyncStep1.
- * When the server receives SyncStep1, it should reply with SyncStep2 immediately followed by SyncStep1. The client replies
- * with SyncStep2 when it receives SyncStep1. Optionally the server may send a SyncDone after it received SyncStep2, so the
- * client knows that the sync is finished.  There are two reasons for this more elaborated sync model: 1. This protocol can
- * easily be implemented on top of http and websockets. 2. The server shoul only reply to requests, and not initiate them.
- * Therefore it is necesarry that the client initiates the sync.
- *
- * Construction of a message:
- * [messageType : varUint, message definition..]
- *
- * Note: A message does not include information about the room name. This must to be handled by the upper layer protocol!
+ * Utility module to work with urls.
  *
- * stringify[messageType] stringifies a message definition (messageType is already read from the bufffer)
+ * @module url
  */
 
-const messageYjsSyncStep1 = 0;
-const messageYjsSyncStep2 = 1;
-const messageYjsUpdate = 2;
-
 /**
- * Create a sync step 1 message based on the state of the current shared document.
- *
- * @param {encoding.Encoder} encoder
- * @param {Y.Doc} doc
+ * @param {Object<string,string>} params
+ * @return {string}
  */
-const writeSyncStep1 = (encoder, doc) => {
-  writeVarUint(encoder, messageYjsSyncStep1);
-  const sv = Y.encodeStateVector(doc);
-  writeVarUint8Array(encoder, sv);
-};
+const encodeQueryParams = params =>
+  map(params, (val, key) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&');
 
-/**
- * @param {encoding.Encoder} encoder
- * @param {Y.Doc} doc
- * @param {Uint8Array} [encodedStateVector]
- */
-const writeSyncStep2 = (encoder, doc, encodedStateVector) => {
-  writeVarUint(encoder, messageYjsSyncStep2);
-  writeVarUint8Array(encoder, Y.encodeStateAsUpdate(doc, encodedStateVector));
-};
+var MessageType;
+(function (MessageType) {
+    MessageType[MessageType["Sync"] = 0] = "Sync";
+    MessageType[MessageType["Awareness"] = 1] = "Awareness";
+    MessageType[MessageType["Auth"] = 2] = "Auth";
+    MessageType[MessageType["QueryAwareness"] = 3] = "QueryAwareness";
+    MessageType[MessageType["Stateless"] = 5] = "Stateless";
+    MessageType[MessageType["CLOSE"] = 7] = "CLOSE";
+    MessageType[MessageType["SyncStatus"] = 8] = "SyncStatus";
+})(MessageType || (MessageType = {}));
+var WebSocketStatus;
+(function (WebSocketStatus) {
+    WebSocketStatus["Connecting"] = "connecting";
+    WebSocketStatus["Connected"] = "connected";
+    WebSocketStatus["Disconnected"] = "disconnected";
+})(WebSocketStatus || (WebSocketStatus = {}));
 
-/**
- * Read SyncStep1 message and reply with SyncStep2.
- *
- * @param {decoding.Decoder} decoder The reply to the received message
- * @param {encoding.Encoder} encoder The received message
- * @param {Y.Doc} doc
- */
-const readSyncStep1 = (decoder, encoder, doc) =>
-  writeSyncStep2(encoder, doc, readVarUint8Array(decoder));
-
-/**
- * Read and apply Structs and then DeleteStore to a y instance.
- *
- * @param {decoding.Decoder} decoder
- * @param {Y.Doc} doc
- * @param {any} transactionOrigin
- */
-const readSyncStep2 = (decoder, doc, transactionOrigin) => {
-  try {
-    Y.applyUpdate(doc, readVarUint8Array(decoder), transactionOrigin);
-  } catch (error) {
-    // This catches errors that are thrown by event handlers
-    console.error('Caught error while handling a Yjs update', error);
-  }
-};
-
-/**
- * @param {encoding.Encoder} encoder
- * @param {Uint8Array} update
- */
-const writeUpdate = (encoder, update) => {
-  writeVarUint(encoder, messageYjsUpdate);
-  writeVarUint8Array(encoder, update);
-};
-
-/**
- * Read and apply Structs and then DeleteStore to a y instance.
- *
- * @param {decoding.Decoder} decoder
- * @param {Y.Doc} doc
- * @param {any} transactionOrigin
- */
-const readUpdate = readSyncStep2;
-
-/**
- * @param {decoding.Decoder} decoder A message received from another client
- * @param {encoding.Encoder} encoder The reply message. Will not be sent if empty.
- * @param {Y.Doc} doc
- * @param {any} transactionOrigin
- */
-const readSyncMessage = (decoder, encoder, doc, transactionOrigin) => {
-  const messageType = readVarUint(decoder);
-  switch (messageType) {
-    case messageYjsSyncStep1:
-      readSyncStep1(decoder, encoder, doc);
-      break
-    case messageYjsSyncStep2:
-      readSyncStep2(decoder, doc, transactionOrigin);
-      break
-    case messageYjsUpdate:
-      readUpdate(decoder, doc, transactionOrigin);
-      break
-    default:
-      throw new Error('Unknown message type')
-  }
-  return messageType
-};
-
-var MessageType;
-(function (MessageType) {
-    MessageType[MessageType["Sync"] = 0] = "Sync";
-    MessageType[MessageType["Awareness"] = 1] = "Awareness";
-    MessageType[MessageType["Auth"] = 2] = "Auth";
-    MessageType[MessageType["QueryAwareness"] = 3] = "QueryAwareness";
-    MessageType[MessageType["Stateless"] = 5] = "Stateless";
-    MessageType[MessageType["CLOSE"] = 7] = "CLOSE";
-    MessageType[MessageType["SyncStatus"] = 8] = "SyncStatus";
-})(MessageType || (MessageType = {}));
-var WebSocketStatus;
-(function (WebSocketStatus) {
-    WebSocketStatus["Connecting"] = "connecting";
-    WebSocketStatus["Connected"] = "connected";
-    WebSocketStatus["Disconnected"] = "disconnected";
-})(WebSocketStatus || (WebSocketStatus = {}));
-
-class OutgoingMessage {
-    constructor() {
-        this.encoder = createEncoder();
+class HocuspocusProviderWebsocket extends EventEmitter {
+    constructor(configuration) {
+        super();
+        this.messageQueue = [];
+        this.configuration = {
+            url: '',
+            // @ts-ignore
+            document: undefined,
+            // @ts-ignore
+            awareness: undefined,
+            WebSocketPolyfill: undefined,
+            parameters: {},
+            connect: true,
+            broadcast: true,
+            forceSyncInterval: false,
+            // TODO: this should depend on awareness.outdatedTime
+            messageReconnectTimeout: 30000,
+            // 1 second
+            delay: 1000,
+            // instant
+            initialDelay: 0,
+            // double the delay each time
+            factor: 2,
+            // unlimited retries
+            maxAttempts: 0,
+            // wait at least 1 second
+            minDelay: 1000,
+            // at least every 30 seconds
+            maxDelay: 30000,
+            // randomize
+            jitter: true,
+            // retry forever
+            timeout: 0,
+            onOpen: () => null,
+            onConnect: () => null,
+            onMessage: () => null,
+            onOutgoingMessage: () => null,
+            onStatus: () => null,
+            onDisconnect: () => null,
+            onClose: () => null,
+            onDestroy: () => null,
+            onAwarenessUpdate: () => null,
+            onAwarenessChange: () => null,
+            quiet: false,
+        };
+        this.subscribedToBroadcastChannel = false;
+        this.webSocket = null;
+        this.shouldConnect = true;
+        this.status = WebSocketStatus.Disconnected;
+        this.lastMessageReceived = 0;
+        this.mux = createMutex();
+        this.intervals = {
+            forceSync: null,
+            connectionChecker: null,
+        };
+        this.connectionAttempt = null;
+        this.receivedOnOpenPayload = undefined;
+        this.receivedOnStatusPayload = undefined;
+        this.boundConnect = this.connect.bind(this);
+        this.setConfiguration(configuration);
+        this.configuration.WebSocketPolyfill = configuration.WebSocketPolyfill ? configuration.WebSocketPolyfill : WebSocket;
+        this.on('open', this.configuration.onOpen);
+        this.on('open', this.onOpen.bind(this));
+        this.on('connect', this.configuration.onConnect);
+        this.on('message', this.configuration.onMessage);
+        this.on('outgoingMessage', this.configuration.onOutgoingMessage);
+        this.on('status', this.configuration.onStatus);
+        this.on('status', this.onStatus.bind(this));
+        this.on('disconnect', this.configuration.onDisconnect);
+        this.on('close', this.configuration.onClose);
+        this.on('destroy', this.configuration.onDestroy);
+        this.on('awarenessUpdate', this.configuration.onAwarenessUpdate);
+        this.on('awarenessChange', this.configuration.onAwarenessChange);
+        this.on('close', this.onClose.bind(this));
+        this.on('message', this.onMessage.bind(this));
+        this.registerEventListeners();
+        this.intervals.connectionChecker = setInterval(this.checkConnection.bind(this), this.configuration.messageReconnectTimeout / 10);
+        if (typeof configuration.connect !== 'undefined') {
+            this.shouldConnect = configuration.connect;
+        }
+        if (!this.shouldConnect) {
+            return;
+        }
+        this.connect();
     }
-    get(args) {
-        return args.encoder;
+    async onOpen(event) {
+        this.receivedOnOpenPayload = event;
     }
-    toUint8Array() {
-        return toUint8Array(this.encoder);
+    async onStatus(data) {
+        this.receivedOnStatusPayload = data;
     }
-}
-
-class MessageReceiver {
-    constructor(message) {
-        this.broadcasted = false;
-        this.message = message;
+    attach(provider) {
+        if (this.status === WebSocketStatus.Disconnected && this.shouldConnect) {
+            this.connect();
+        }
+        if (this.receivedOnOpenPayload) {
+            provider.onOpen(this.receivedOnOpenPayload);
+        }
+        if (this.receivedOnStatusPayload) {
+            provider.onStatus(this.receivedOnStatusPayload);
+        }
     }
-    setBroadcasted(value) {
-        this.broadcasted = value;
-        return this;
+    detach(provider) {
+        // tell the server to remove the listener
     }
-    apply(provider, emitSynced = true) {
-        const { message } = this;
-        const type = message.readVarUint();
-        const emptyMessageLength = message.length();
-        switch (type) {
-            case MessageType.Sync:
-                this.applySyncMessage(provider, emitSynced);
-                break;
-            case MessageType.Awareness:
-                this.applyAwarenessMessage(provider);
-                break;
-            case MessageType.Auth:
-                this.applyAuthMessage(provider);
-                break;
-            case MessageType.QueryAwareness:
-                this.applyQueryAwarenessMessage(provider);
-                break;
-            case MessageType.Stateless:
-                provider.receiveStateless(readVarString(message.decoder));
-                break;
-            case MessageType.SyncStatus:
-                // nothing for now; forward-compatability
-                break;
-            default:
-                throw new Error(`Can’t apply message of unknown type: ${type}`);
+    setConfiguration(configuration = {}) {
+        this.configuration = { ...this.configuration, ...configuration };
+    }
+    async connect() {
+        if (this.status === WebSocketStatus.Connected) {
+            return;
         }
-        // Reply
-        if (message.length() > emptyMessageLength + 1) { // length of documentName (considered in emptyMessageLength plus length of yjs sync type, set in applySyncMessage)
-            if (this.broadcasted) {
-                // TODO: Some weird TypeScript error
-                // @ts-ignore
-                provider.broadcast(OutgoingMessage, { encoder: message.encoder });
-            }
-            else {
-                // TODO: Some weird TypeScript error
-                // @ts-ignore
-                provider.send(OutgoingMessage, { encoder: message.encoder });
+        // Always cancel any previously initiated connection retryer instances
+        if (this.cancelWebsocketRetry) {
+            this.cancelWebsocketRetry();
+            this.cancelWebsocketRetry = undefined;
+        }
+        this.receivedOnOpenPayload = undefined;
+        this.receivedOnStatusPayload = undefined;
+        this.shouldConnect = true;
+        const abortableRetry = () => {
+            let cancelAttempt = false;
+            const retryPromise = retry(this.createWebSocketConnection.bind(this), {
+                delay: this.configuration.delay,
+                initialDelay: this.configuration.initialDelay,
+                factor: this.configuration.factor,
+                maxAttempts: this.configuration.maxAttempts,
+                minDelay: this.configuration.minDelay,
+                maxDelay: this.configuration.maxDelay,
+                jitter: this.configuration.jitter,
+                timeout: this.configuration.timeout,
+                beforeAttempt: context => {
+                    if (!this.shouldConnect || cancelAttempt) {
+                        context.abort();
+                    }
+                },
+            }).catch((error) => {
+                // If we aborted the connection attempt then don’t throw an error
+                // ref: https://github.com/lifeomic/attempt/blob/master/src/index.ts#L136
+                if (error && error.code !== 'ATTEMPT_ABORTED') {
+                    throw error;
+                }
+            });
+            return {
+                retryPromise,
+                cancelFunc: () => {
+                    cancelAttempt = true;
+                },
+            };
+        };
+        const { retryPromise, cancelFunc } = abortableRetry();
+        this.cancelWebsocketRetry = cancelFunc;
+        return retryPromise;
+    }
+    createWebSocketConnection() {
+        return new Promise((resolve, reject) => {
+            if (this.webSocket) {
+                this.messageQueue = [];
+                this.webSocket.close();
+                this.webSocket = null;
             }
+            // Init the WebSocket connection
+            const ws = new this.configuration.WebSocketPolyfill(this.url);
+            ws.binaryType = 'arraybuffer';
+            ws.onmessage = (payload) => this.emit('message', payload);
+            ws.onclose = (payload) => this.emit('close', { event: payload });
+            ws.onopen = (payload) => this.emit('open', payload);
+            ws.onerror = (err) => {
+                reject(err);
+            };
+            this.webSocket = ws;
+            // Reset the status
+            this.status = WebSocketStatus.Connecting;
+            this.emit('status', { status: WebSocketStatus.Connecting });
+            // Store resolve/reject for later use
+            this.connectionAttempt = {
+                resolve,
+                reject,
+            };
+        });
+    }
+    onMessage(event) {
+        this.resolveConnectionAttempt();
+        this.lastMessageReceived = getUnixTime();
+    }
+    resolveConnectionAttempt() {
+        if (this.connectionAttempt) {
+            this.connectionAttempt.resolve();
+            this.connectionAttempt = null;
+            this.status = WebSocketStatus.Connected;
+            this.emit('status', { status: WebSocketStatus.Connected });
+            this.emit('connect');
+            this.messageQueue.forEach(message => this.send(message));
+            this.messageQueue = [];
         }
     }
-    applySyncMessage(provider, emitSynced) {
-        const { message } = this;
-        message.writeVarUint(MessageType.Sync);
-        // Apply update
-        const syncMessageType = readSyncMessage(message.decoder, message.encoder, provider.document, provider);
-        // Synced once we receive Step2
-        if (emitSynced && syncMessageType === messageYjsSyncStep2) {
-            provider.synced = true;
+    stopConnectionAttempt() {
+        this.connectionAttempt = null;
+    }
+    rejectConnectionAttempt() {
+        var _a;
+        (_a = this.connectionAttempt) === null || _a === void 0 ? void 0 : _a.reject();
+        this.connectionAttempt = null;
+    }
+    checkConnection() {
+        var _a;
+        // Don’t check the connection when it’s not even established
+        if (this.status !== WebSocketStatus.Connected) {
+            return;
+        }
+        // Don’t close then connection while waiting for the first message
+        if (!this.lastMessageReceived) {
+            return;
+        }
+        // Don’t close the connection when a message was received recently
+        if (this.configuration.messageReconnectTimeout >= getUnixTime() - this.lastMessageReceived) {
+            return;
+        }
+        // No message received in a long time, not even your own
+        // Awareness updates, which are updated every 15 seconds.
+        (_a = this.webSocket) === null || _a === void 0 ? void 0 : _a.close();
+        this.messageQueue = [];
+    }
+    registerEventListeners() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        window.addEventListener('online', this.boundConnect);
+    }
+    // Ensure that the URL always ends with /
+    get serverUrl() {
+        while (this.configuration.url[this.configuration.url.length - 1] === '/') {
+            return this.configuration.url.slice(0, this.configuration.url.length - 1);
         }
-        if (syncMessageType === messageYjsUpdate || syncMessageType === messageYjsSyncStep2) {
-            if (provider.unsyncedChanges > 0) {
-                provider.updateUnsyncedChanges(-1);
+        return this.configuration.url;
+    }
+    get url() {
+        const encodedParams = encodeQueryParams(this.configuration.parameters);
+        return `${this.serverUrl}${encodedParams.length === 0 ? '' : `?${encodedParams}`}`;
+    }
+    disconnect() {
+        this.shouldConnect = false;
+        if (this.webSocket === null) {
+            return;
+        }
+        try {
+            this.webSocket.close();
+            this.messageQueue = [];
+        }
+        catch {
+            //
+        }
+    }
+    send(message) {
+        var _a;
+        if (((_a = this.webSocket) === null || _a === void 0 ? void 0 : _a.readyState) === WsReadyStates.Open) {
+            this.webSocket.send(message);
+        }
+        else {
+            this.messageQueue.push(message);
+        }
+    }
+    onClose({ event }) {
+        this.webSocket = null;
+        if (this.status === WebSocketStatus.Connected) {
+            this.status = WebSocketStatus.Disconnected;
+            this.emit('status', { status: WebSocketStatus.Disconnected });
+            this.emit('disconnect', { event });
+        }
+        if (event.code === Unauthorized.code) {
+            if (event.reason === Unauthorized.reason) {
+                console.warn('[HocuspocusProvider] An authentication token is required, but you didn’t send one. Try adding a `token` to your HocuspocusProvider configuration. Won’t try again.');
             }
+            else {
+                console.warn(`[HocuspocusProvider] Connection closed with status Unauthorized: ${event.reason}`);
+            }
+            this.shouldConnect = false;
+        }
+        if (event.code === Forbidden.code) {
+            if (!this.configuration.quiet) {
+                console.warn('[HocuspocusProvider] The provided authentication token isn’t allowed to connect to this server. Will try again.');
+                return; // TODO REMOVE ME
+            }
+        }
+        if (event.code === MessageTooBig.code) {
+            console.warn(`[HocuspocusProvider] Connection closed with status MessageTooBig: ${event.reason}`);
+            this.shouldConnect = false;
+        }
+        if (this.connectionAttempt) {
+            // That connection attempt failed.
+            this.rejectConnectionAttempt();
+        }
+        else if (this.shouldConnect) {
+            // The connection was closed by the server. Let’s just try again.
+            this.connect();
+        }
+        // If we’ll reconnect, we’re done for now.
+        if (this.shouldConnect) {
+            return;
+        }
+        // The status is set correctly already.
+        if (this.status === WebSocketStatus.Disconnected) {
+            return;
         }
+        // Let’s update the connection status.
+        this.status = WebSocketStatus.Disconnected;
+        this.emit('status', { status: WebSocketStatus.Disconnected });
+        this.emit('disconnect', { event });
     }
-    applyAwarenessMessage(provider) {
-        const { message } = this;
-        applyAwarenessUpdate(provider.awareness, message.readVarUint8Array(), provider);
-    }
-    applyAuthMessage(provider) {
-        const { message } = this;
-        readAuthMessage(message.decoder, provider.permissionDeniedHandler.bind(provider), provider.authenticatedHandler.bind(provider));
-    }
-    applyQueryAwarenessMessage(provider) {
-        const { message } = this;
-        message.writeVarUint(MessageType.Awareness);
-        message.writeVarUint8Array(encodeAwarenessUpdate(provider.awareness, Array.from(provider.awareness.getStates().keys())));
+    destroy() {
+        this.emit('destroy');
+        if (this.intervals.forceSync) {
+            clearInterval(this.intervals.forceSync);
+        }
+        clearInterval(this.intervals.connectionChecker);
+        // If there is still a connection attempt outstanding then we should stop
+        // it before calling disconnect, otherwise it will be rejected in the onClose
+        // handler and trigger a retry
+        this.stopConnectionAttempt();
+        this.disconnect();
+        this.removeAllListeners();
+        if (typeof window === 'undefined') {
+            return;
+        }
+        window.removeEventListener('online', this.boundConnect);
     }
 }
 
-class MessageSender {
-    constructor(Message, args = {}) {
-        this.message = new Message();
-        this.encoder = this.message.get(args);
+class IncomingMessage {
+    constructor(data) {
+        this.data = data;
+        this.encoder = createEncoder();
+        this.decoder = createDecoder(new Uint8Array(this.data));
     }
-    create() {
-        return toUint8Array(this.encoder);
+    readVarUint() {
+        return readVarUint(this.decoder);
     }
-    send(webSocket) {
-        webSocket === null || webSocket === void 0 ? void 0 : webSocket.send(this.create());
+    readVarString() {
+        return readVarString(this.decoder);
     }
-    broadcast(channel) {
-        publish(channel, this.create());
+    readVarUint8Array() {
+        return readVarUint8Array(this.decoder);
     }
-}
-
-class SyncStepOneMessage extends OutgoingMessage {
-    constructor() {
-        super(...arguments);
-        this.type = MessageType.Sync;
-        this.description = 'First sync step';
+    writeVarUint(type) {
+        return writeVarUint(this.encoder, type);
     }
-    get(args) {
-        if (typeof args.document === 'undefined') {
-            throw new Error('The sync step one message requires document as an argument');
-        }
-        writeVarString(this.encoder, args.documentName);
-        writeVarUint(this.encoder, this.type);
-        writeSyncStep1(this.encoder, args.document);
-        return this.encoder;
+    writeVarString(string) {
+        return writeVarString(this.encoder, string);
     }
-}
-
-class SyncStepTwoMessage extends OutgoingMessage {
-    constructor() {
-        super(...arguments);
-        this.type = MessageType.Sync;
-        this.description = 'Second sync step';
+    writeVarUint8Array(data) {
+        return writeVarUint8Array(this.encoder, data);
     }
-    get(args) {
-        if (typeof args.document === 'undefined') {
-            throw new Error('The sync step two message requires document as an argument');
-        }
-        writeVarString(this.encoder, args.documentName);
-        writeVarUint(this.encoder, this.type);
-        writeSyncStep2(this.encoder, args.document);
-        return this.encoder;
+    length() {
+        return length(this.encoder);
     }
 }
 
-class QueryAwarenessMessage extends OutgoingMessage {
-    constructor() {
-        super(...arguments);
-        this.type = MessageType.QueryAwareness;
-        this.description = 'Queries awareness states';
-    }
-    get(args) {
-        console.log('queryAwareness: writing string docName', args.documentName);
-        console.log(this.encoder.cpos);
-        writeVarString(this.encoder, args.documentName);
-        writeVarUint(this.encoder, this.type);
-        return this.encoder;
-    }
-}
+/**
+ * @module sync-protocol
+ */
 
-class AuthenticationMessage extends OutgoingMessage {
-    constructor() {
-        super(...arguments);
-        this.type = MessageType.Auth;
-        this.description = 'Authentication';
-    }
-    get(args) {
-        if (typeof args.token === 'undefined') {
-            throw new Error('The authentication message requires `token` as an argument.');
-        }
-        writeVarString(this.encoder, args.documentName);
-        writeVarUint(this.encoder, this.type);
-        writeAuthentication(this.encoder, args.token);
-        return this.encoder;
-    }
-}
+/**
+ * @typedef {Map<number, number>} StateMap
+ */
 
-class AwarenessMessage extends OutgoingMessage {
-    constructor() {
-        super(...arguments);
-        this.type = MessageType.Awareness;
-        this.description = 'Awareness states update';
-    }
-    get(args) {
-        if (typeof args.awareness === 'undefined') {
-            throw new Error('The awareness message requires awareness as an argument');
-        }
-        if (typeof args.clients === 'undefined') {
-            throw new Error('The awareness message requires clients as an argument');
-        }
-        writeVarString(this.encoder, args.documentName);
-        writeVarUint(this.encoder, this.type);
-        let awarenessUpdate;
-        if (args.states === undefined) {
-            awarenessUpdate = encodeAwarenessUpdate(args.awareness, args.clients);
-        }
-        else {
-            awarenessUpdate = encodeAwarenessUpdate(args.awareness, args.clients, args.states);
-        }
-        writeVarUint8Array(this.encoder, awarenessUpdate);
-        return this.encoder;
-    }
-}
+/**
+ * Core Yjs defines two message types:
+ * • YjsSyncStep1: Includes the State Set of the sending client. When received, the client should reply with YjsSyncStep2.
+ * • YjsSyncStep2: Includes all missing structs and the complete delete set. When received, the client is assured that it
+ *   received all information from the remote client.
+ *
+ * In a peer-to-peer network, you may want to introduce a SyncDone message type. Both parties should initiate the connection
+ * with SyncStep1. When a client received SyncStep2, it should reply with SyncDone. When the local client received both
+ * SyncStep2 and SyncDone, it is assured that it is synced to the remote client.
+ *
+ * In a client-server model, you want to handle this differently: The client should initiate the connection with SyncStep1.
+ * When the server receives SyncStep1, it should reply with SyncStep2 immediately followed by SyncStep1. The client replies
+ * with SyncStep2 when it receives SyncStep1. Optionally the server may send a SyncDone after it received SyncStep2, so the
+ * client knows that the sync is finished.  There are two reasons for this more elaborated sync model: 1. This protocol can
+ * easily be implemented on top of http and websockets. 2. The server shoul only reply to requests, and not initiate them.
+ * Therefore it is necesarry that the client initiates the sync.
+ *
+ * Construction of a message:
+ * [messageType : varUint, message definition..]
+ *
+ * Note: A message does not include information about the room name. This must to be handled by the upper layer protocol!
+ *
+ * stringify[messageType] stringifies a message definition (messageType is already read from the bufffer)
+ */
 
-class UpdateMessage extends OutgoingMessage {
-    constructor() {
-        super(...arguments);
-        this.type = MessageType.Sync;
-        this.description = 'A document update';
-    }
-    get(args) {
-        writeVarString(this.encoder, args.documentName);
-        writeVarUint(this.encoder, this.type);
-        writeUpdate(this.encoder, args.update);
-        return this.encoder;
-    }
-}
+const messageYjsSyncStep1 = 0;
+const messageYjsSyncStep2 = 1;
+const messageYjsUpdate = 2;
 
 /**
- * Utility module to work with urls.
+ * Create a sync step 1 message based on the state of the current shared document.
  *
- * @module url
+ * @param {encoding.Encoder} encoder
+ * @param {Y.Doc} doc
+ */
+const writeSyncStep1 = (encoder, doc) => {
+  writeVarUint(encoder, messageYjsSyncStep1);
+  const sv = Y.encodeStateVector(doc);
+  writeVarUint8Array(encoder, sv);
+};
+
+/**
+ * @param {encoding.Encoder} encoder
+ * @param {Y.Doc} doc
+ * @param {Uint8Array} [encodedStateVector]
+ */
+const writeSyncStep2 = (encoder, doc, encodedStateVector) => {
+  writeVarUint(encoder, messageYjsSyncStep2);
+  writeVarUint8Array(encoder, Y.encodeStateAsUpdate(doc, encodedStateVector));
+};
+
+/**
+ * Read SyncStep1 message and reply with SyncStep2.
+ *
+ * @param {decoding.Decoder} decoder The reply to the received message
+ * @param {encoding.Encoder} encoder The received message
+ * @param {Y.Doc} doc
+ */
+const readSyncStep1 = (decoder, encoder, doc) =>
+  writeSyncStep2(encoder, doc, readVarUint8Array(decoder));
+
+/**
+ * Read and apply Structs and then DeleteStore to a y instance.
+ *
+ * @param {decoding.Decoder} decoder
+ * @param {Y.Doc} doc
+ * @param {any} transactionOrigin
+ */
+const readSyncStep2 = (decoder, doc, transactionOrigin) => {
+  try {
+    Y.applyUpdate(doc, readVarUint8Array(decoder), transactionOrigin);
+  } catch (error) {
+    // This catches errors that are thrown by event handlers
+    console.error('Caught error while handling a Yjs update', error);
+  }
+};
+
+/**
+ * @param {encoding.Encoder} encoder
+ * @param {Uint8Array} update
+ */
+const writeUpdate = (encoder, update) => {
+  writeVarUint(encoder, messageYjsUpdate);
+  writeVarUint8Array(encoder, update);
+};
+
+/**
+ * Read and apply Structs and then DeleteStore to a y instance.
+ *
+ * @param {decoding.Decoder} decoder
+ * @param {Y.Doc} doc
+ * @param {any} transactionOrigin
  */
+const readUpdate = readSyncStep2;
 
 /**
- * @param {Object<string,string>} params
- * @return {string}
+ * @param {decoding.Decoder} decoder A message received from another client
+ * @param {encoding.Encoder} encoder The reply message. Will not be sent if empty.
+ * @param {Y.Doc} doc
+ * @param {any} transactionOrigin
  */
-const encodeQueryParams = params =>
-  map(params, (val, key) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&');
+const readSyncMessage = (decoder, encoder, doc, transactionOrigin) => {
+  const messageType = readVarUint(decoder);
+  switch (messageType) {
+    case messageYjsSyncStep1:
+      readSyncStep1(decoder, encoder, doc);
+      break
+    case messageYjsSyncStep2:
+      readSyncStep2(decoder, doc, transactionOrigin);
+      break
+    case messageYjsUpdate:
+      readUpdate(decoder, doc, transactionOrigin);
+      break
+    default:
+      throw new Error('Unknown message type')
+  }
+  return messageType
+};
 
-class HocuspocusProviderWebsocket extends EventEmitter {
-    constructor(configuration) {
-        super();
-        this.configuration = {
-            url: '',
-            // @ts-ignore
-            document: undefined,
-            // @ts-ignore
-            awareness: undefined,
-            WebSocketPolyfill: undefined,
-            parameters: {},
-            connect: true,
-            broadcast: true,
-            forceSyncInterval: false,
-            // TODO: this should depend on awareness.outdatedTime
-            messageReconnectTimeout: 30000,
-            // 1 second
-            delay: 1000,
-            // instant
-            initialDelay: 0,
-            // double the delay each time
-            factor: 2,
-            // unlimited retries
-            maxAttempts: 0,
-            // wait at least 1 second
-            minDelay: 1000,
-            // at least every 30 seconds
-            maxDelay: 30000,
-            // randomize
-            jitter: true,
-            // retry forever
-            timeout: 0,
-            onOpen: () => null,
-            onConnect: () => null,
-            onMessage: () => null,
-            onOutgoingMessage: () => null,
-            onStatus: () => null,
-            onDisconnect: () => null,
-            onClose: () => null,
-            onDestroy: () => null,
-            onAwarenessUpdate: () => null,
-            onAwarenessChange: () => null,
-            quiet: false,
-        };
-        this.subscribedToBroadcastChannel = false;
-        this.webSocket = null;
-        this.shouldConnect = true;
-        this.status = WebSocketStatus.Disconnected;
-        this.lastMessageReceived = 0;
-        this.mux = createMutex();
-        this.intervals = {
-            forceSync: null,
-            connectionChecker: null,
-        };
-        this.connectionAttempt = null;
-        this.receivedOnOpenPayload = undefined;
-        this.receivedOnStatusPayload = undefined;
-        this.boundConnect = this.connect.bind(this);
-        this.setConfiguration(configuration);
-        this.configuration.WebSocketPolyfill = configuration.WebSocketPolyfill ? configuration.WebSocketPolyfill : WebSocket;
-        this.on('open', this.configuration.onOpen);
-        this.on('open', this.onOpen.bind(this));
-        this.on('connect', this.configuration.onConnect);
-        this.on('message', this.configuration.onMessage);
-        this.on('outgoingMessage', this.configuration.onOutgoingMessage);
-        this.on('status', this.configuration.onStatus);
-        this.on('status', this.onStatus.bind(this));
-        this.on('disconnect', this.configuration.onDisconnect);
-        this.on('close', this.configuration.onClose);
-        this.on('destroy', this.configuration.onDestroy);
-        this.on('awarenessUpdate', this.configuration.onAwarenessUpdate);
-        this.on('awarenessChange', this.configuration.onAwarenessChange);
-        this.on('close', this.onClose.bind(this));
-        this.on('message', this.onMessage.bind(this));
-        this.registerEventListeners();
-        this.intervals.connectionChecker = setInterval(this.checkConnection.bind(this), this.configuration.messageReconnectTimeout / 10);
-        if (typeof configuration.connect !== 'undefined') {
-            this.shouldConnect = configuration.connect;
-        }
-        if (!this.shouldConnect) {
-            return;
-        }
-        this.connect();
-    }
-    async onOpen(event) {
-        this.receivedOnOpenPayload = event;
+class OutgoingMessage {
+    constructor() {
+        this.encoder = createEncoder();
     }
-    async onStatus(data) {
-        this.receivedOnStatusPayload = data;
+    get(args) {
+        return args.encoder;
     }
-    attach(provider) {
-        if (this.receivedOnOpenPayload) {
-            provider.onOpen(this.receivedOnOpenPayload);
-        }
-        if (this.receivedOnStatusPayload) {
-            provider.onStatus(this.receivedOnStatusPayload);
-        }
+    toUint8Array() {
+        return toUint8Array(this.encoder);
     }
-    detach(provider) {
-        // tell the server to remove the listener
+}
+
+class MessageReceiver {
+    constructor(message) {
+        this.broadcasted = false;
+        this.message = message;
     }
-    setConfiguration(configuration = {}) {
-        this.configuration = { ...this.configuration, ...configuration };
+    setBroadcasted(value) {
+        this.broadcasted = value;
+        return this;
     }
-    async connect() {
-        if (this.status === WebSocketStatus.Connected) {
-            return;
-        }
-        // Always cancel any previously initiated connection retryer instances
-        if (this.cancelWebsocketRetry) {
-            this.cancelWebsocketRetry();
-            this.cancelWebsocketRetry = undefined;
+    apply(provider, emitSynced) {
+        const { message } = this;
+        const type = message.readVarUint();
+        const emptyMessageLength = message.length();
+        switch (type) {
+            case MessageType.Sync:
+                this.applySyncMessage(provider, emitSynced);
+                break;
+            case MessageType.Awareness:
+                this.applyAwarenessMessage(provider);
+                break;
+            case MessageType.Auth:
+                this.applyAuthMessage(provider);
+                break;
+            case MessageType.QueryAwareness:
+                this.applyQueryAwarenessMessage(provider);
+                break;
+            case MessageType.Stateless:
+                provider.receiveStateless(readVarString(message.decoder));
+                break;
+            case MessageType.SyncStatus:
+                this.applySyncStatusMessage(provider, readVarInt(message.decoder) === 1);
+                break;
+            default:
+                throw new Error(`Can’t apply message of unknown type: ${type}`);
         }
-        this.shouldConnect = true;
-        const abortableRetry = () => {
-            let cancelAttempt = false;
-            const retryPromise = retry(this.createWebSocketConnection.bind(this), {
-                delay: this.configuration.delay,
-                initialDelay: this.configuration.initialDelay,
-                factor: this.configuration.factor,
-                maxAttempts: this.configuration.maxAttempts,
-                minDelay: this.configuration.minDelay,
-                maxDelay: this.configuration.maxDelay,
-                jitter: this.configuration.jitter,
-                timeout: this.configuration.timeout,
-                beforeAttempt: context => {
-                    if (!this.shouldConnect || cancelAttempt) {
-                        context.abort();
-                    }
-                },
-            }).catch((error) => {
-                // If we aborted the connection attempt then don’t throw an error
-                // ref: https://github.com/lifeomic/attempt/blob/master/src/index.ts#L136
-                if (error && error.code !== 'ATTEMPT_ABORTED') {
-                    throw error;
-                }
-            });
-            return {
-                retryPromise,
-                cancelFunc: () => {
-                    cancelAttempt = true;
-                },
-            };
-        };
-        const { retryPromise, cancelFunc } = abortableRetry();
-        this.cancelWebsocketRetry = cancelFunc;
-        return retryPromise;
-    }
-    createWebSocketConnection() {
-        return new Promise((resolve, reject) => {
-            if (this.webSocket) {
-                this.webSocket.close();
-                this.webSocket = null;
+        // Reply
+        if (message.length() > emptyMessageLength + 1) { // length of documentName (considered in emptyMessageLength plus length of yjs sync type, set in applySyncMessage)
+            if (this.broadcasted) {
+                // TODO: Some weird TypeScript error
+                // @ts-ignore
+                provider.broadcast(OutgoingMessage, { encoder: message.encoder });
             }
-            // Init the WebSocket connection
-            const ws = new this.configuration.WebSocketPolyfill(this.url);
-            ws.binaryType = 'arraybuffer';
-            ws.onmessage = (payload) => this.emit('message', payload);
-            ws.onclose = (payload) => this.emit('close', { event: payload });
-            ws.onopen = (payload) => this.emit('open', payload);
-            ws.onerror = (err) => {
-                reject(err);
-            };
-            this.webSocket = ws;
-            // Reset the status
-            this.status = WebSocketStatus.Connecting;
-            this.emit('status', { status: WebSocketStatus.Connecting });
-            // Store resolve/reject for later use
-            this.connectionAttempt = {
-                resolve,
-                reject,
-            };
-        });
+            else {
+                // TODO: Some weird TypeScript error
+                // @ts-ignore
+                provider.send(OutgoingMessage, { encoder: message.encoder });
+            }
+        }
     }
-    onMessage(event) {
-        this.resolveConnectionAttempt();
-        this.lastMessageReceived = getUnixTime();
+    applySyncMessage(provider, emitSynced) {
+        const { message } = this;
+        message.writeVarUint(MessageType.Sync);
+        // Apply update
+        const syncMessageType = readSyncMessage(message.decoder, message.encoder, provider.document, provider);
+        // Synced once we receive Step2
+        if (emitSynced && syncMessageType === messageYjsSyncStep2) {
+            provider.synced = true;
+        }
     }
-    resolveConnectionAttempt() {
-        if (this.connectionAttempt) {
-            this.connectionAttempt.resolve();
-            this.connectionAttempt = null;
-            this.status = WebSocketStatus.Connected;
-            this.emit('status', { status: WebSocketStatus.Connected });
-            this.emit('connect');
+    applySyncStatusMessage(provider, applied) {
+        if (applied) {
+            provider.decrementUnsyncedChanges();
         }
     }
-    stopConnectionAttempt() {
-        this.connectionAttempt = null;
+    applyAwarenessMessage(provider) {
+        const { message } = this;
+        applyAwarenessUpdate(provider.awareness, message.readVarUint8Array(), provider);
     }
-    rejectConnectionAttempt() {
-        var _a;
-        (_a = this.connectionAttempt) === null || _a === void 0 ? void 0 : _a.reject();
-        this.connectionAttempt = null;
+    applyAuthMessage(provider) {
+        const { message } = this;
+        readAuthMessage(message.decoder, provider.permissionDeniedHandler.bind(provider), provider.authenticatedHandler.bind(provider));
     }
-    checkConnection() {
-        var _a;
-        // Don’t check the connection when it’s not even established
-        if (this.status !== WebSocketStatus.Connected) {
-            return;
-        }
-        // Don’t close then connection while waiting for the first message
-        if (!this.lastMessageReceived) {
-            return;
-        }
-        // Don’t close the connection when a message was received recently
-        if (this.configuration.messageReconnectTimeout >= getUnixTime() - this.lastMessageReceived) {
-            return;
-        }
-        // No message received in a long time, not even your own
-        // Awareness updates, which are updated every 15 seconds.
-        (_a = this.webSocket) === null || _a === void 0 ? void 0 : _a.close();
+    applyQueryAwarenessMessage(provider) {
+        const { message } = this;
+        message.writeVarUint(MessageType.Awareness);
+        message.writeVarUint8Array(encodeAwarenessUpdate(provider.awareness, Array.from(provider.awareness.getStates().keys())));
     }
-    registerEventListeners() {
-        if (typeof window === 'undefined') {
-            return;
-        }
-        window.addEventListener('online', this.boundConnect);
+}
+
+class MessageSender {
+    constructor(Message, args = {}) {
+        this.message = new Message();
+        this.encoder = this.message.get(args);
     }
-    // Ensure that the URL always ends with /
-    get serverUrl() {
-        while (this.configuration.url[this.configuration.url.length - 1] === '/') {
-            return this.configuration.url.slice(0, this.configuration.url.length - 1);
-        }
-        return this.configuration.url;
+    create() {
+        return toUint8Array(this.encoder);
     }
-    get url() {
-        const encodedParams = encodeQueryParams(this.configuration.parameters);
-        return `${this.serverUrl}${encodedParams.length === 0 ? '' : `?${encodedParams}`}`;
+    send(webSocket) {
+        webSocket === null || webSocket === void 0 ? void 0 : webSocket.send(this.create());
     }
-    disconnect() {
-        this.shouldConnect = false;
-        if (this.webSocket === null) {
-            return;
-        }
-        try {
-            this.webSocket.close();
-        }
-        catch {
-            //
-        }
+    broadcast(channel) {
+        publish(channel, this.create());
     }
-    send(message) {
-        var _a;
-        if (((_a = this.webSocket) === null || _a === void 0 ? void 0 : _a.readyState) === WsReadyStates.Open) {
-            this.webSocket.send(message);
-        }
+}
+
+class AuthenticationMessage extends OutgoingMessage {
+    constructor() {
+        super(...arguments);
+        this.type = MessageType.Auth;
+        this.description = 'Authentication';
     }
-    onClose({ event }) {
-        this.webSocket = null;
-        if (this.status === WebSocketStatus.Connected) {
-            this.status = WebSocketStatus.Disconnected;
-            this.emit('status', { status: WebSocketStatus.Disconnected });
-            this.emit('disconnect', { event });
-        }
-        if (event.code === Unauthorized.code) {
-            if (event.reason === Unauthorized.reason) {
-                console.warn('[HocuspocusProvider] An authentication token is required, but you didn’t send one. Try adding a `token` to your HocuspocusProvider configuration. Won’t try again.');
-            }
-            else {
-                console.warn(`[HocuspocusProvider] Connection closed with status Unauthorized: ${event.reason}`);
-            }
-            this.shouldConnect = false;
-        }
-        if (event.code === Forbidden.code) {
-            if (!this.configuration.quiet) {
-                console.warn('[HocuspocusProvider] The provided authentication token isn’t allowed to connect to this server. Will try again.');
-                return; // TODO REMOVE ME
-            }
-        }
-        if (event.code === MessageTooBig.code) {
-            console.warn(`[HocuspocusProvider] Connection closed with status MessageTooBig: ${event.reason}`);
-            this.shouldConnect = false;
+    get(args) {
+        if (typeof args.token === 'undefined') {
+            throw new Error('The authentication message requires `token` as an argument.');
         }
-        if (this.connectionAttempt) {
-            // That connection attempt failed.
-            this.rejectConnectionAttempt();
+        writeVarString(this.encoder, args.documentName);
+        writeVarUint(this.encoder, this.type);
+        writeAuthentication(this.encoder, args.token);
+        return this.encoder;
+    }
+}
+
+class AwarenessMessage extends OutgoingMessage {
+    constructor() {
+        super(...arguments);
+        this.type = MessageType.Awareness;
+        this.description = 'Awareness states update';
+    }
+    get(args) {
+        if (typeof args.awareness === 'undefined') {
+            throw new Error('The awareness message requires awareness as an argument');
         }
-        else if (this.shouldConnect) {
-            // The connection was closed by the server. Let’s just try again.
-            this.connect();
+        if (typeof args.clients === 'undefined') {
+            throw new Error('The awareness message requires clients as an argument');
         }
-        // If we’ll reconnect, we’re done for now.
-        if (this.shouldConnect) {
-            return;
+        writeVarString(this.encoder, args.documentName);
+        writeVarUint(this.encoder, this.type);
+        let awarenessUpdate;
+        if (args.states === undefined) {
+            awarenessUpdate = encodeAwarenessUpdate(args.awareness, args.clients);
         }
-        // The status is set correctly already.
-        if (this.status === WebSocketStatus.Disconnected) {
-            return;
+        else {
+            awarenessUpdate = encodeAwarenessUpdate(args.awareness, args.clients, args.states);
         }
-        // Let’s update the connection status.
-        this.status = WebSocketStatus.Disconnected;
-        this.emit('status', { status: WebSocketStatus.Disconnected });
-        this.emit('disconnect', { event });
+        writeVarUint8Array(this.encoder, awarenessUpdate);
+        return this.encoder;
     }
-    destroy() {
-        this.emit('destroy');
-        if (this.intervals.forceSync) {
-            clearInterval(this.intervals.forceSync);
-        }
-        clearInterval(this.intervals.connectionChecker);
-        // If there is still a connection attempt outstanding then we should stop
-        // it before calling disconnect, otherwise it will be rejected in the onClose
-        // handler and trigger a retry
-        this.stopConnectionAttempt();
-        this.disconnect();
-        this.removeAllListeners();
-        if (typeof window === 'undefined') {
-            return;
-        }
-        window.removeEventListener('online', this.boundConnect);
+}
+
+class CloseMessage extends OutgoingMessage {
+    constructor() {
+        super(...arguments);
+        this.type = MessageType.CLOSE;
+        this.description = 'Ask the server to close the connection';
+    }
+    get(args) {
+        writeVarString(this.encoder, args.documentName);
+        writeVarUint(this.encoder, this.type);
+        return this.encoder;
+    }
+}
+
+class QueryAwarenessMessage extends OutgoingMessage {
+    constructor() {
+        super(...arguments);
+        this.type = MessageType.QueryAwareness;
+        this.description = 'Queries awareness states';
+    }
+    get(args) {
+        console.log('queryAwareness: writing string docName', args.documentName);
+        console.log(this.encoder.cpos);
+        writeVarString(this.encoder, args.documentName);
+        writeVarUint(this.encoder, this.type);
+        return this.encoder;
     }
 }
 
@@ -2270,15 +2288,50 @@ class StatelessMessage extends OutgoingMessage {
     }
 }
 
-class CloseMessage extends OutgoingMessage {
+class SyncStepOneMessage extends OutgoingMessage {
     constructor() {
         super(...arguments);
-        this.type = MessageType.CLOSE;
-        this.description = 'Ask the server to close the connection';
+        this.type = MessageType.Sync;
+        this.description = 'First sync step';
+    }
+    get(args) {
+        if (typeof args.document === 'undefined') {
+            throw new Error('The sync step one message requires document as an argument');
+        }
+        writeVarString(this.encoder, args.documentName);
+        writeVarUint(this.encoder, this.type);
+        writeSyncStep1(this.encoder, args.document);
+        return this.encoder;
+    }
+}
+
+class SyncStepTwoMessage extends OutgoingMessage {
+    constructor() {
+        super(...arguments);
+        this.type = MessageType.Sync;
+        this.description = 'Second sync step';
+    }
+    get(args) {
+        if (typeof args.document === 'undefined') {
+            throw new Error('The sync step two message requires document as an argument');
+        }
+        writeVarString(this.encoder, args.documentName);
+        writeVarUint(this.encoder, this.type);
+        writeSyncStep2(this.encoder, args.document);
+        return this.encoder;
+    }
+}
+
+class UpdateMessage extends OutgoingMessage {
+    constructor() {
+        super(...arguments);
+        this.type = MessageType.Sync;
+        this.description = 'A document update';
     }
     get(args) {
         writeVarString(this.encoder, args.documentName);
         writeVarUint(this.encoder, this.type);
+        writeUpdate(this.encoder, args.update);
         return this.encoder;
     }
 }
@@ -2311,6 +2364,8 @@ class HocuspocusProvider extends EventEmitter {
             onAwarenessChange: () => null,
             onStateless: () => null,
             quiet: false,
+            connect: true,
+            preserveConnection: true,
         };
         this.subscribedToBroadcastChannel = false;
         this.isSynced = false;
@@ -2324,7 +2379,7 @@ class HocuspocusProvider extends EventEmitter {
         };
         this.isConnected = true;
         this.boundBroadcastChannelSubscriber = this.broadcastChannelSubscriber.bind(this);
-        this.boundBeforeUnload = this.beforeUnload.bind(this);
+        this.boundPageUnload = this.pageUnload.bind(this);
         this.boundOnOpen = this.onOpen.bind(this);
         this.boundOnMessage = this.onMessage.bind(this);
         this.boundOnClose = this.onClose.bind(this);
@@ -2384,6 +2439,7 @@ class HocuspocusProvider extends EventEmitter {
             const websocketProviderConfig = configuration;
             this.configuration.websocketProvider = new HocuspocusProviderWebsocket({
                 url: websocketProviderConfig.url,
+                connect: websocketProviderConfig.connect,
                 parameters: websocketProviderConfig.parameters,
             });
         }
@@ -2398,21 +2454,28 @@ class HocuspocusProvider extends EventEmitter {
     get hasUnsyncedChanges() {
         return this.unsyncedChanges > 0;
     }
-    updateUnsyncedChanges(unsyncedChanges = 0) {
-        this.unsyncedChanges += unsyncedChanges;
+    incrementUnsyncedChanges() {
+        this.unsyncedChanges += 1;
+        this.emit('unsyncedChanges', this.unsyncedChanges);
+    }
+    decrementUnsyncedChanges() {
+        this.unsyncedChanges -= 1;
+        if (this.unsyncedChanges === 0) {
+            this.synced = true;
+        }
         this.emit('unsyncedChanges', this.unsyncedChanges);
     }
     forceSync() {
         this.send(SyncStepOneMessage, { document: this.document, documentName: this.configuration.name });
     }
-    beforeUnload() {
+    pageUnload() {
         removeAwarenessStates(this.awareness, [this.document.clientID], 'window unload');
     }
     registerEventListeners() {
         if (typeof window === 'undefined') {
             return;
         }
-        window.addEventListener('beforeunload', this.boundBeforeUnload);
+        window.addEventListener('unload', this.boundPageUnload);
     }
     sendStateless(payload) {
         this.send(StatelessMessage, { documentName: this.configuration.name, payload });
@@ -2421,7 +2484,7 @@ class HocuspocusProvider extends EventEmitter {
         if (origin === this) {
             return;
         }
-        this.updateUnsyncedChanges(1);
+        this.incrementUnsyncedChanges();
         this.send(UpdateMessage, { update, documentName: this.configuration.name }, true);
     }
     awarenessUpdateHandler({ added, updated, removed }, origin) {
@@ -2432,6 +2495,12 @@ class HocuspocusProvider extends EventEmitter {
             documentName: this.configuration.name,
         }, true);
     }
+    /**
+     * Indicates whether a first handshake with the server has been established
+     *
+     * Note: this does not mean all updates from the client have been persisted to the backend. For this,
+     * use `hasUnsyncedChanges`.
+     */
     get synced() {
         return this.isSynced;
     }
@@ -2439,9 +2508,6 @@ class HocuspocusProvider extends EventEmitter {
         if (this.isSynced === state) {
             return;
         }
-        if (state && this.unsyncedChanges > 0) {
-            this.updateUnsyncedChanges(-1 * this.unsyncedChanges);
-        }
         this.isSynced = state;
         this.emit('synced', { state });
         this.emit('sync', { state });
@@ -2459,6 +2525,9 @@ class HocuspocusProvider extends EventEmitter {
     disconnect() {
         this.disconnectBroadcastChannel();
         this.configuration.websocketProvider.detach(this);
+        if (!this.configuration.preserveConnection) {
+            this.configuration.websocketProvider.disconnect();
+        }
     }
     async onOpen(event) {
         this.isAuthenticated = false;
@@ -2479,6 +2548,7 @@ class HocuspocusProvider extends EventEmitter {
         return this.configuration.token;
     }
     startSync() {
+        this.incrementUnsyncedChanges();
         this.send(SyncStepOneMessage, { document: this.document, documentName: this.configuration.name });
         if (this.awareness.getLocalState() !== null) {
             this.send(AwarenessMessage, {
@@ -2489,8 +2559,9 @@ class HocuspocusProvider extends EventEmitter {
         }
     }
     send(message, args, broadcast = false) {
-        if (!this.isConnected)
+        if (!this.isConnected) {
             return;
+        }
         if (broadcast) {
             this.mux(() => { this.broadcast(message, args); });
         }
@@ -2506,7 +2577,7 @@ class HocuspocusProvider extends EventEmitter {
         }
         message.writeVarString(documentName);
         this.emit('message', { event, message: new IncomingMessage(event.data) });
-        new MessageReceiver(message).apply(this);
+        new MessageReceiver(message).apply(this, true);
     }
     onClose(event) {
         this.isAuthenticated = false;
@@ -2542,7 +2613,7 @@ class HocuspocusProvider extends EventEmitter {
         if (typeof window === 'undefined') {
             return;
         }
-        window.removeEventListener('beforeunload', this.boundBeforeUnload);
+        window.removeEventListener('unload', this.boundPageUnload);
     }
     permissionDeniedHandler(reason) {
         this.emit('authenticationFailed', { reason });