@pluv/client 0.38.13 → 0.39.0

package/dist/index.mjs

@@ -316,9 +316,7 @@ var UsersManager = class {
   patchPresence(connectionId, patch) {
     var _a, _b;
     if (((_a = this._myself) == null ? void 0 : _a.connectionId) === connectionId) {
-      const presence2 = __spreadValues(__spreadValues({}, this._myPresence), patch);
-      this._myself.presence = presence2;
-      this._myPresence = presence2;
+      this.updateMyPresence(patch);
       return;
     }
     const other = this._others.get(connectionId);
@@ -369,8 +367,8 @@ var UsersManager = class {
   /**
    * @description This method need not care about being connected.
    */
-  updateMyPresence(presence) {
-    this._myPresence = __spreadValues(__spreadValues({}, this._myPresence), presence);
+  updateMyPresence(patch) {
+    this._myPresence = __spreadValues(__spreadValues({}, this._myPresence), patch);
     if (!this._myself) return;
     this._myself.presence = this._myPresence;
   }
@@ -409,7 +407,9 @@ var debounce = (fn, options) => {
 var ADD_TO_STORAGE_STATE_DEBOUNCE_MS = 1e3;
 var HEARTBEAT_INTERVAL_MS = 1e4;
 var PONG_TIMEOUT_MS = 2e3;
-var RECONNECT_TIMEOUT_MS = 3e4;
+var RECONNECT_TIMEOUT_MS = 5e3;
+var MIN_RECONNECT_TIMEOUT_MS = 1e3;
+var MAX_RECONNECT_TIMEOUT_MS = 6e4;
 var ORIGIN_INITIALIZED = "$initialized";
 var ORIGIN_STORAGE_UPDATED = "$storageUpdated";
 var DEFAULT_PLUV_CLIENT_ADDON = (input) => ({
@@ -427,6 +427,7 @@ var PluvRoom = class extends AbstractRoom {
       onAuthorizationFail,
       presence,
       publicKey,
+      reconnectTimeoutMs = RECONNECT_TIMEOUT_MS,
       router,
       wsEndpoint
     } = options;
@@ -436,7 +437,6 @@ var PluvRoom = class extends AbstractRoom {
     this._intervals = {
       heartbeat: null
     };
-    this._metadata = {};
     this._otherNotifier = new OtherNotifier();
     this._publicKey = null;
     this._stateNotifier = new StateNotifier();
@@ -447,12 +447,14 @@ var PluvRoom = class extends AbstractRoom {
       pong: null,
       reconnect: null
     };
+    this._lastMetadata = null;
     this._state = {
       authorization: {
         token: null,
         user: null
       },
       connection: {
+        attempts: 0,
         count: 0,
         id: null,
         state: "Untouched" /* Untouched */
@@ -591,18 +593,14 @@ var PluvRoom = class extends AbstractRoom {
     };
     const addon = this._getAddon(addons);
     const { storage } = __spreadValues(__spreadValues({}, DEFAULT_PLUV_CLIENT_ADDON({ room: this })), addon({ room: this }));
+    this.metadata = metadata;
     this._debug = debug;
     this._endpoints = { authEndpoint, wsEndpoint };
+    this._reconnectTimeoutMs = reconnectTimeoutMs;
     this._storageStore = storage;
-    if (typeof metadata !== "undefined") this._metadata = metadata;
     if (!!publicKey) this._publicKey = publicKey;
     this._listeners = {
       onAuthorizationFail: (error) => {
-        this._clearTimeout(this._timeouts.reconnect);
-        this._timeouts.reconnect = setTimeout(
-          this._reconnect.bind(this),
-          RECONNECT_TIMEOUT_MS
-        );
         onAuthorizationFail == null ? void 0 : onAuthorizationFail(error);
       }
     };
@@ -616,11 +614,13 @@ var PluvRoom = class extends AbstractRoom {
   get webSocket() {
     return this._state.webSocket;
   }
-  connect() {
+  connect(...args) {
     return __async(this, null, function* () {
-      if (!this._endpoints.wsEndpoint) {
-        throw new Error("Must provide an wsEndpoint.");
-      }
+      var _a;
+      const params = (_a = args[0]) != null ? _a : {};
+      const metadata = params.metadata;
+      this._setMetadata(metadata);
+      if (!this._endpoints.wsEndpoint) throw new Error("Must provide a wsEndpoint.");
       const canConnect = ["Closed" /* Closed */, "Untouched" /* Untouched */].some(
         (state) => this._state.connection.state === state
       );
@@ -632,21 +632,27 @@ var PluvRoom = class extends AbstractRoom {
       });
       yield this._storageStore.initialize();
       yield this._applyStorageStore();
-      const url = new URL(this._getWsEndpoint(this.id));
+      const url = new URL(this._getWsEndpoint(this.id, params));
       let authToken = null;
       let webSocket;
       try {
-        const publicKey = this._getPublicKey();
-        authToken = yield this._getAuthorization(this.id);
+        const publicKey = this._getPublicKey(params);
+        authToken = yield this._getAuthorization(this.id, params);
         authToken && url.searchParams.set("token", encodeURIComponent(authToken));
         publicKey && url.searchParams.set("public_key", encodeURIComponent(publicKey));
         webSocket = new WebSocket(url.toString());
       } catch (err) {
+        this._updateState((oldState) => {
+          oldState.connection.attempts += 1;
+          return oldState;
+        });
         yield this._storageStore.destroy();
-        this._onAuthorizationFail(err);
+        this._pollReconnect();
+        yield Promise.resolve(this._onAuthorizationFail(err));
         return;
       }
       this._updateState((oldState) => {
+        oldState.connection.attempts = 0;
         oldState.authorization.token = authToken;
         oldState.webSocket = webSocket;
         return oldState;
@@ -657,16 +663,21 @@ var PluvRoom = class extends AbstractRoom {
   }
   disconnect() {
     return __async(this, null, function* () {
-      if (!this._endpoints.wsEndpoint) {
-        throw new Error("Must provide an wsEndpoint.");
-      }
+      if (!this._endpoints.wsEndpoint) throw new Error("Must provide a wsEndpoint.");
       if (!this._state.webSocket) return;
       const canDisconnect = ["Connecting" /* Connecting */, "Open" /* Open */].some(
         (state) => this._state.connection.state === state
       );
       if (!canDisconnect) return;
-      this._clearInterval(this._intervals.heartbeat);
       this._closeWs();
+      this._clearInterval(this._intervals.heartbeat);
+      this._clearTimeout(this._timeouts.reconnect);
+      this._updateState((oldState) => {
+        oldState.authorization.token = null;
+        oldState.connection.state = "Closed" /* Closed */;
+        oldState.webSocket = null;
+        return oldState;
+      });
       yield this._storageStore.destroy();
       this._crdtManager.destroy();
       this._stateNotifier.subjects["my-presence"].next(null);
@@ -703,9 +714,11 @@ var PluvRoom = class extends AbstractRoom {
     if (typeof window === "undefined") return;
     if (typeof document === "undefined") return;
     this._windowListeners = {
+      onNavigatorOffline: this._onNavigatorOffline.bind(this),
       onNavigatorOnline: this._onNavigatorOnline.bind(this),
       onVisibilityChange: this._onVisibilityChange.bind(this)
     };
+    window.addEventListener("offline", this._windowListeners.onNavigatorOffline);
     window.addEventListener("online", this._windowListeners.onNavigatorOnline);
     document.addEventListener("visibilitychange", this._windowListeners.onVisibilityChange);
   }
@@ -731,24 +744,17 @@ var PluvRoom = class extends AbstractRoom {
     clearTimeout(timeout);
   }
   _closeWs() {
-    var _a, _b;
-    if (!this._state.webSocket) return;
+    var _a, _b, _c;
     (_b = (_a = this._subscriptions).observeCrdt) == null ? void 0 : _b.call(_a);
+    this._clearInterval(this._intervals.heartbeat);
     this._clearTimeout(this._timeouts.pong);
-    this._clearTimeout(this._timeouts.reconnect);
     this._detachWindowListeners();
     this._usersManager.removeMyself();
     this._usersManager.removeUsers();
     this._otherNotifier.clear();
     this._stateNotifier.subjects.myself.next(null);
     this._stateNotifier.subjects.others.next([]);
-    const canClose = [WebSocket.CONNECTING, WebSocket.OPEN].some(
-      (readyState) => {
-        var _a2;
-        return readyState === ((_a2 = this._state.webSocket) == null ? void 0 : _a2.readyState);
-      }
-    );
-    if (canClose) this._state.webSocket.close();
+    (_c = this._state.webSocket) == null ? void 0 : _c.close();
     this._detachWsListeners();
   }
   _detachWindowListeners() {
@@ -779,7 +785,8 @@ var PluvRoom = class extends AbstractRoom {
     );
     this._crdtNotifier.rootSubject.next(storageRoot);
   }
-  _getAuthFetchOptions(room) {
+  _getAuthFetchOptions(room, params) {
+    const metadata = params.metadata;
     if (typeof this._endpoints.authEndpoint === "undefined") return null;
     if (this._endpoints.authEndpoint === true) {
       return {
@@ -793,18 +800,16 @@ var PluvRoom = class extends AbstractRoom {
         options: {}
       };
     }
-    const result = this._endpoints.authEndpoint({ metadata: this._metadata, room });
+    const result = this._endpoints.authEndpoint({ metadata, room });
     return typeof result === "string" ? { url: result, options: {} } : result;
   }
-  _getAuthorization(room) {
+  _getAuthorization(room, params) {
     return __async(this, null, function* () {
-      const fetchOptions = this._getAuthFetchOptions(room);
+      const fetchOptions = this._getAuthFetchOptions(room, params);
       if (!fetchOptions) return null;
       const { url, options } = fetchOptions;
       const res = yield fetch(url, options);
-      if (!res.ok || res.status !== 200) {
-        throw new Error("Room is unauthorized");
-      }
+      if (!res.ok || res.status !== 200) throw new Error("Room is unauthorized");
       try {
         return yield res.text().then((text) => text.trim());
       } catch (err) {
@@ -812,19 +817,21 @@ var PluvRoom = class extends AbstractRoom {
       }
     });
   }
-  _getPublicKey() {
+  _getPublicKey(params) {
+    const metadata = params.metadata;
     if (!this._publicKey) return null;
     if (typeof this._publicKey === "string") return this._publicKey;
-    return this._publicKey({ metadata: this._metadata });
+    return this._publicKey({ metadata });
   }
-  _getWsEndpoint(room) {
+  _getWsEndpoint(room, params) {
+    const metadata = params.metadata;
     switch (typeof this._endpoints.wsEndpoint) {
       case "undefined":
-        return !!this._getPublicKey() ? `wss://rooms.pluv.io/api/room/${room}` : `/api/pluv/room/${room}`;
+        return !!this._getPublicKey(params) ? `wss://rooms.pluv.io/api/room/${room}` : `/api/pluv/room/${room}`;
       case "string":
         return this._endpoints.wsEndpoint;
       default:
-        return this._endpoints.wsEndpoint({ metadata: this._metadata, room });
+        return this._endpoints.wsEndpoint({ metadata, room });
     }
   }
   _handleExit(message) {
@@ -843,10 +850,9 @@ var PluvRoom = class extends AbstractRoom {
     if (!connectionId) return;
     if (!this._state.webSocket) throw new Error("Could not find WebSocket");
     const data = message.data;
-    this._usersManager.patchPresence(connectionId, data.presence);
-    const myPresence = this._usersManager.myPresence;
     const myself = (_a = this._usersManager.myself) != null ? _a : null;
     if ((myself == null ? void 0 : myself.connectionId) === connectionId) return;
+    this._usersManager.patchPresence(connectionId, data.presence);
     const other = this._usersManager.getOther(connectionId);
     const others = this._usersManager.getOthers();
     this._otherNotifier.subject(connectionId).next(other);
@@ -992,23 +998,30 @@ var PluvRoom = class extends AbstractRoom {
       return oldState;
     });
   }
-  /**
-   * TODO
-   * @description Determine if ws was closed with a code for closing without retries.
-   * Otherwise, attempt to retry again with incremental backoff
-   * @author leedavidcs
-   * @date August 19, 2022
-   */
   _onClose(event) {
     return __async(this, null, function* () {
       this._logDebug("WebSocket closed");
       !!event.reason && this._logDebug(event.reason);
-      this._clearInterval(this._intervals.heartbeat);
-      this._clearTimeout(this._timeouts.pong);
-      this._stateNotifier.subjects["myself"].next(null);
+      const shouldRetry = [
+        // Going away: Client/server is shutting down or navigating
+        1001,
+        // Abnormal closure: Usually network error
+        1006,
+        // Internal error: may be a larger problem, but try reconnecting for now
+        1011,
+        // Service restart: Server restarted
+        1012,
+        // Try again later: server overloaded
+        1013,
+        // Bad gateway
+        1014
+      ].some((okToRetryCode) => event.code === okToRetryCode);
+      this._closeWs();
+      if (!shouldRetry) this._clearTimeout(this._timeouts.reconnect);
+      else this._pollReconnect();
       this._updateState((oldState) => {
         oldState.authorization.token = null;
-        oldState.connection.state = "Closed" /* Closed */;
+        oldState.connection.state = shouldRetry ? "Unavailable" /* Unavailable */ : "Closed" /* Closed */;
         oldState.webSocket = null;
         return oldState;
       });
@@ -1017,7 +1030,6 @@ var PluvRoom = class extends AbstractRoom {
   /**
    * TODO
    * @description Handle websocket errors in a meaningful way, should they occur
-   * @author leedavidcs
    * @date August 19, 2022
    */
   _onError() {
@@ -1076,11 +1088,18 @@ var PluvRoom = class extends AbstractRoom {
     this._clearInterval(this._intervals.heartbeat);
     this._intervals.heartbeat = setInterval(this._heartbeat.bind(this), HEARTBEAT_INTERVAL_MS);
   }
+  _onNavigatorOffline() {
+    return __async(this, null, function* () {
+      if (this._state.connection.state === "Closed" /* Closed */) return;
+      this._updateState((oldState) => {
+        oldState.connection.state = "Unavailable" /* Unavailable */;
+        return oldState;
+      });
+    });
+  }
   _onNavigatorOnline() {
     return __async(this, null, function* () {
-      if (this._state.connection.state !== "Unavailable" /* Unavailable */) {
-        return;
-      }
+      if (this._state.connection.state !== "Unavailable" /* Unavailable */) return;
       yield this._reconnect();
     });
   }
@@ -1112,6 +1131,12 @@ var PluvRoom = class extends AbstractRoom {
       return null;
     }
   }
+  _pollReconnect() {
+    this._clearTimeout(this._timeouts.reconnect);
+    const timeoutMs = typeof this._reconnectTimeoutMs === "number" ? this._reconnectTimeoutMs : this._reconnectTimeoutMs({ attempts: this._state.connection.attempts });
+    const clampedMs = Math.max(Math.min(MIN_RECONNECT_TIMEOUT_MS, timeoutMs), MAX_RECONNECT_TIMEOUT_MS);
+    this._timeouts.reconnect = setTimeout(this._reconnect.bind(this), clampedMs);
+  }
   _reconnect() {
     return __async(this, null, function* () {
       if (!this._endpoints.wsEndpoint) {
@@ -1119,13 +1144,9 @@ var PluvRoom = class extends AbstractRoom {
       }
       if (!this._state.webSocket) return;
       this._closeWs();
-      this._updateState((oldState) => {
-        oldState.authorization.token = null;
-        oldState.connection.state = "Closed" /* Closed */;
-        oldState.webSocket = null;
-        return oldState;
-      });
-      yield this.connect();
+      const metadata = this._lastMetadata;
+      const params = typeof metadata === "undefined" ? [] : [{ metadata }];
+      yield this.connect(...params);
     });
   }
   _sendMessage(data) {
@@ -1146,6 +1167,9 @@ var PluvRoom = class extends AbstractRoom {
     const message = typeof data === "string" ? data : JSON.stringify(data);
     webSocket.send(message);
   }
+  _setMetadata(metadata) {
+    return this.metadata ? this.metadata.parse(metadata) : metadata;
+  }
   _updateState(updater) {
     let authorization;
     try {
@@ -1175,17 +1199,17 @@ var PluvClient = class {
       var _a;
       const oldRoom = this.getRoom(room);
       if (oldRoom) return oldRoom;
-      const metadata = this._metadata ? this._metadata.parse(options.metadata) : options.metadata;
       const newRoom = new PluvRoom(room, {
         addons: options.addons,
         authEndpoint: this._authEndpoint,
         debug: options.debug,
         initialPresence: options.initialPresence,
         initialStorage: this._initialStorage,
-        metadata,
+        metadata: this.metadata,
         onAuthorizationFail: options.onAuthorizationFail,
         presence: this._presence,
         publicKey: (_a = this._publicKey) != null ? _a : void 0,
+        reconnectTimeoutMs: options.reconnectTimeoutMs,
         router: options.router,
         wsEndpoint: this._wsEndpoint
       });
@@ -1193,11 +1217,11 @@ var PluvClient = class {
       this._logDebug(`New room was created: ${room}`);
       return newRoom;
     };
-    this.enter = (room) => __async(this, null, function* () {
+    this.enter = (room, ...args) => __async(this, null, function* () {
       const toEnter = typeof room === "string" ? this.getRoom(room) : room;
       if (!toEnter) throw new Error(`Could not find room: ${room}.`);
       this._rooms.set(toEnter.id, toEnter);
-      yield toEnter.connect();
+      yield toEnter.connect(...args);
       this._logDebug(`Entered room: ${room}`);
       return toEnter;
     });
@@ -1216,10 +1240,10 @@ var PluvClient = class {
       this._logDebug(`Left and deleted room: ${room}`);
     });
     const { authEndpoint, debug = false, initialStorage, metadata, presence, publicKey, wsEndpoint } = options;
+    this.metadata = metadata;
     this._authEndpoint = authEndpoint;
     this._debug = debug;
     this._initialStorage = initialStorage;
-    this._metadata = metadata;
     this._presence = presence;
     this._wsEndpoint = wsEndpoint;
     if (!!publicKey) this._publicKey = publicKey;
@@ -1268,6 +1292,7 @@ var MockedRoom = class extends AbstractRoom {
         user: null
       },
       connection: {
+        attempts: 0,
         count: 1,
         id: null,
         state: "Untouched" /* Untouched */

package/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { config } from "eslint-config-pluv/base";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluv/client",
-  "version": "0.38.13",
+  "version": "0.39.0",
   "description": "@pluv/io frontend client",
   "author": "leedavidcs",
   "license": "MIT",
@@ -18,20 +18,20 @@
   },
   "dependencies": {
     "wonka": "^6.3.5",
-    "@pluv/crdt": "^0.38.13",
-    "@pluv/types": "^0.38.13"
+    "@pluv/crdt": "^0.39.0",
+    "@pluv/types": "^0.39.0"
   },
   "devDependencies": {
-    "eslint": "^8.57.1",
+    "eslint": "^9.24.0",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
-    "@pluv/tsconfig": "^0.38.13",
-    "eslint-config-pluv": "^0.38.13"
+    "@pluv/tsconfig": "^0.39.0",
+    "eslint-config-pluv": "^0.39.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",
     "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
-    "lint": "eslint src/**/*.ts* --fix",
+    "lint": "eslint src/**/*.ts* --fix --max-warnings 0",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   }
 }

package/src/MockedRoom.ts

@@ -59,6 +59,7 @@ export class MockedRoom<
             user: null,
         },
         connection: {
+            attempts: 0,
             count: 1,
             id: null,
             state: ConnectionState.Untouched,

package/src/PluvClient.ts

@@ -2,11 +2,19 @@ import type { AbstractCrdtDocFactory, CrdtType } from "@pluv/crdt";
 import type { InputZodLike, IOLike, JsonObject } from "@pluv/types";
 import type { InferCallback } from "./infer";
 import { PluvProcedure } from "./PluvProcedure";
-import type { AuthEndpoint, PluvRoomAddon, PluvRoomDebug, RoomConfig, RoomEndpoints, WsEndpoint } from "./PluvRoom";
+import type {
+    AuthEndpoint,
+    PluvRoomAddon,
+    PluvRoomDebug,
+    ReconnectTimeoutMs,
+    RoomConfig,
+    RoomEndpoints,
+    WsEndpoint,
+} from "./PluvRoom";
 import { PluvRoom } from "./PluvRoom";
 import type { PluvRouterEventConfig } from "./PluvRouter";
 import { PluvRouter } from "./PluvRouter";
-import type { PublicKey } from "./types";
+import type { PublicKey, WithMetadata } from "./types";
 
 export type PluvClientOptions<
     TIO extends IOLike<any, any>,
@@ -34,8 +42,13 @@ export type CreateRoomOptions<
     initialPresence?: TPresence;
     initialStorage?: AbstractCrdtDocFactory<TStorage>;
     onAuthorizationFail?: (error: Error) => void;
+    reconnectTimeoutMs?: ReconnectTimeoutMs;
     router?: PluvRouter<TIO, TPresence, TStorage, TEvents>;
-} & (keyof TMetadata extends never ? { metadata?: undefined } : { metadata: TMetadata });
+};
+
+export type EnterRoomParams<TMetadata extends JsonObject = {}> = keyof TMetadata extends never
+    ? []
+    : [WithMetadata<TMetadata>];
 
 export class PluvClient<
     TIO extends IOLike<any, any>,
@@ -43,10 +56,11 @@ export class PluvClient<
     TStorage extends Record<string, CrdtType<any, any>> = {},
     TMetadata extends JsonObject = {},
 > {
+    public readonly metadata?: InputZodLike<TMetadata>;
+
     private readonly _authEndpoint: AuthEndpoint<TMetadata> | undefined;
     private readonly _debug: boolean;
     private readonly _initialStorage?: AbstractCrdtDocFactory<TStorage>;
-    private readonly _metadata?: InputZodLike<TMetadata>;
     private readonly _presence?: InputZodLike<TPresence>;
     private readonly _publicKey: PublicKey<TMetadata> | null = null;
     private readonly _rooms = new Map<string, PluvRoom<TIO, TMetadata, TPresence, TStorage, any>>();
@@ -65,10 +79,11 @@ export class PluvClient<
     constructor(options: PluvClientOptions<TIO, TPresence, TStorage, TMetadata>) {
         const { authEndpoint, debug = false, initialStorage, metadata, presence, publicKey, wsEndpoint } = options;
 
+        this.metadata = metadata;
+
         this._authEndpoint = authEndpoint as AuthEndpoint<TMetadata>;
         this._debug = debug;
         this._initialStorage = initialStorage;
-        this._metadata = metadata;
         this._presence = presence;
         this._wsEndpoint = wsEndpoint;
 
@@ -83,18 +98,17 @@ export class PluvClient<
 
         if (oldRoom) return oldRoom;
 
-        const metadata = this._metadata ? this._metadata.parse(options.metadata) : options.metadata;
-
         const newRoom = new PluvRoom<TIO, TMetadata, TPresence, TStorage, TEvents>(room, {
             addons: options.addons,
             authEndpoint: this._authEndpoint,
             debug: options.debug,
             initialPresence: options.initialPresence,
             initialStorage: this._initialStorage,
-            metadata,
+            metadata: this.metadata,
             onAuthorizationFail: options.onAuthorizationFail,
             presence: this._presence,
             publicKey: this._publicKey ?? undefined,
+            reconnectTimeoutMs: options.reconnectTimeoutMs,
             router: options.router,
             wsEndpoint: this._wsEndpoint,
         } as RoomConfig<TIO, TMetadata, TPresence, TStorage, TEvents>);
@@ -107,15 +121,15 @@ export class PluvClient<
     };
 
     public enter = async (
-        room: string | PluvRoom<TIO, any, any, any>,
+        room: string | PluvRoom<TIO, TMetadata, any, any, any>,
+        ...args: EnterRoomParams<TMetadata>
     ): Promise<PluvRoom<TIO, TMetadata, TPresence, TStorage, any>> => {
         const toEnter = typeof room === "string" ? this.getRoom(room) : room;
 
         if (!toEnter) throw new Error(`Could not find room: ${room}.`);
 
         this._rooms.set(toEnter.id, toEnter);
-
-        await toEnter.connect();
+        await toEnter.connect(...args);
 
         this._logDebug(`Entered room: ${room}`);