@atlaskit/collab-provider 10.15.0 → 10.16.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/collab-provider
 
+## 10.16.0
+
+### Minor Changes
+
+- [#158254](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/158254)
+  [`9ce9448c0e11a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9ce9448c0e11a) -
+  Add auto-close for Presence connections when window is in background
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.15.0
 
 ### Minor Changes

package/dist/cjs/channel.js

@@ -25,6 +25,8 @@ var _network = _interopRequireDefault(require("./connectivity/network"));
 var _internalErrors = require("./errors/internal-errors");
 var _ncsErrors = require("./errors/ncs-errors");
 var _customErrors = require("./errors/custom-errors");
+var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
+var _bindEventListener = require("bind-event-listener");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -418,6 +420,40 @@ var Channel = exports.Channel = /*#__PURE__*/function (_Emitter) {
         (_this$socket3 = _this.socket) === null || _this$socket3 === void 0 || _this$socket3.connect();
       }
     });
+    /**
+     * Unbinds event listeners and timers used when handling connection auto-close when tab is hidden
+     */
+    (0, _defineProperty2.default)(_this, "cleanupAutoDisconnect", function () {
+      _this.unbindVisibilityListener();
+      if (_this.disconnectTimer) {
+        clearTimeout(_this.disconnectTimer);
+        _this.disconnectTimer = undefined;
+      }
+    });
+    /**
+     * Cleanup the visiblitychange listener upon Collab Provider destroy
+     * Value set when the listener is binded in addVisiblityListener
+     */
+    (0, _defineProperty2.default)(_this, "unbindVisibilityListener", function () {});
+    (0, _defineProperty2.default)(_this, "autoDisconnect", function (disconnectTimer, disconnectDelay) {
+      if (document.hidden) {
+        logger('visibilitychange: hidden');
+        return setTimeout(function () {
+          var _this$socket4;
+          logger('visibilitychange: closing connection');
+          (_this$socket4 = _this.socket) === null || _this$socket4 === void 0 || _this$socket4.close();
+        }, disconnectDelay || disconnectDelay === 0 ? disconnectDelay * 1000 : 60 * 1000);
+      } else {
+        var _this$socket5;
+        logger('visibilitychange: visible');
+        if (disconnectTimer) {
+          clearTimeout(disconnectTimer);
+        }
+        logger('visibilitychange: re-connecting');
+        (_this$socket5 = _this.socket) === null || _this$socket5 === void 0 || _this$socket5.connect();
+        return;
+      }
+    });
     _this.config = config;
     _this.analyticsHelper = analyticsHelper;
     _this.initExperience = (0, _ufo.createDocInitExp)(_this.analyticsHelper);
@@ -651,6 +687,10 @@ var Channel = exports.Channel = /*#__PURE__*/function (_Emitter) {
       this.reconnectHelper = new _reconnectHelper.default();
       // Fired upon a reconnection attempt error (from Socket.IO Manager)
       this.socket.io.on('reconnect_error', this.onReconnectError);
+
+      // Automatic disconnect on tab background with delay, to keep presence UX accurate
+      // and reduce wasted connections. Reconnects upon tab becoming active again
+      this.addVisiblityListener();
     }
 
     // Ignored via go/ees005
@@ -775,11 +815,32 @@ var Channel = exports.Channel = /*#__PURE__*/function (_Emitter) {
     value: function isLimitExceeded(stepLimit, stepSizeLimit, maxStepSizeLimit) {
       return stepLimit > 0 && this.stepCounter > stepLimit || stepSizeLimit > 0 && this.stepSizeCounter > stepSizeLimit || maxStepSizeLimit > 0 && this.maxStepSize > maxStepSizeLimit;
     }
+  }, {
+    key: "addVisiblityListener",
+    value:
+    /**
+     * Adds an event listener for visibilitychange events to handle auto-disconnection if tab is in background
+     */
+    function addVisiblityListener() {
+      var _FeatureGates$getExpe,
+        _this3 = this;
+      var disconnectDelay = (_FeatureGates$getExpe = _featureGateJsClient.default.getExperimentValue('platform_editor_connection_auto_disconnect_delay', 'delay', -1)) !== null && _FeatureGates$getExpe !== void 0 ? _FeatureGates$getExpe : -1;
+      var isAutoDisconnectEnabled = disconnectDelay >= 0;
+      if (isAutoDisconnectEnabled && this.config.isPresenceOnly) {
+        this.unbindVisibilityListener = (0, _bindEventListener.bind)(document, {
+          type: 'visibilitychange',
+          listener: function listener() {
+            _this3.disconnectTimer = _this3.autoDisconnect(_this3.disconnectTimer, disconnectDelay);
+          }
+        });
+      }
+    }
   }, {
     key: "disconnect",
     value: function disconnect() {
       var _this$network;
       this.unsubscribeAll();
+      this.cleanupAutoDisconnect();
       (_this$network = this.network) === null || _this$network === void 0 || _this$network.destroy();
       this.network = null;
       if (this.socket) {

package/dist/cjs/version-wrapper.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = exports.name = "@atlaskit/collab-provider";
-var version = exports.version = "10.15.0";
+var version = exports.version = "10.16.0";
 var nextMajorVersion = exports.nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/channel.js

@@ -11,6 +11,8 @@ import Network from './connectivity/network';
 import { INTERNAL_ERROR_CODE } from './errors/internal-errors';
 import { NCS_ERROR_CODE } from './errors/ncs-errors';
 import { NotConnectedError, NotInitializedError } from './errors/custom-errors';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
+import { bind } from 'bind-event-listener';
 const logger = createLogger('Channel', 'green');
 export class Channel extends Emitter {
   constructor(config, analyticsHelper) {
@@ -299,6 +301,40 @@ export class Channel extends Emitter {
         (_this$socket3 = this.socket) === null || _this$socket3 === void 0 ? void 0 : _this$socket3.connect();
       }
     });
+    /**
+     * Unbinds event listeners and timers used when handling connection auto-close when tab is hidden
+     */
+    _defineProperty(this, "cleanupAutoDisconnect", () => {
+      this.unbindVisibilityListener();
+      if (this.disconnectTimer) {
+        clearTimeout(this.disconnectTimer);
+        this.disconnectTimer = undefined;
+      }
+    });
+    /**
+     * Cleanup the visiblitychange listener upon Collab Provider destroy
+     * Value set when the listener is binded in addVisiblityListener
+     */
+    _defineProperty(this, "unbindVisibilityListener", () => {});
+    _defineProperty(this, "autoDisconnect", (disconnectTimer, disconnectDelay) => {
+      if (document.hidden) {
+        logger('visibilitychange: hidden');
+        return setTimeout(() => {
+          var _this$socket4;
+          logger('visibilitychange: closing connection');
+          (_this$socket4 = this.socket) === null || _this$socket4 === void 0 ? void 0 : _this$socket4.close();
+        }, disconnectDelay || disconnectDelay === 0 ? disconnectDelay * 1000 : 60 * 1000);
+      } else {
+        var _this$socket5;
+        logger('visibilitychange: visible');
+        if (disconnectTimer) {
+          clearTimeout(disconnectTimer);
+        }
+        logger('visibilitychange: re-connecting');
+        (_this$socket5 = this.socket) === null || _this$socket5 === void 0 ? void 0 : _this$socket5.connect();
+        return;
+      }
+    });
     this.config = config;
     this.analyticsHelper = analyticsHelper;
     this.initExperience = createDocInitExp(this.analyticsHelper);
@@ -480,6 +516,10 @@ export class Channel extends Emitter {
     this.reconnectHelper = new ReconnectHelper();
     // Fired upon a reconnection attempt error (from Socket.IO Manager)
     this.socket.io.on('reconnect_error', this.onReconnectError);
+
+    // Automatic disconnect on tab background with delay, to keep presence UX accurate
+    // and reduce wasted connections. Reconnects upon tab becoming active again
+    this.addVisiblityListener();
   }
 
   // Ignored via go/ees005
@@ -546,9 +586,26 @@ export class Channel extends Emitter {
   isLimitExceeded(stepLimit, stepSizeLimit, maxStepSizeLimit) {
     return stepLimit > 0 && this.stepCounter > stepLimit || stepSizeLimit > 0 && this.stepSizeCounter > stepSizeLimit || maxStepSizeLimit > 0 && this.maxStepSize > maxStepSizeLimit;
   }
+  /**
+   * Adds an event listener for visibilitychange events to handle auto-disconnection if tab is in background
+   */
+  addVisiblityListener() {
+    var _FeatureGates$getExpe;
+    const disconnectDelay = (_FeatureGates$getExpe = FeatureGates.getExperimentValue('platform_editor_connection_auto_disconnect_delay', 'delay', -1)) !== null && _FeatureGates$getExpe !== void 0 ? _FeatureGates$getExpe : -1;
+    const isAutoDisconnectEnabled = disconnectDelay >= 0;
+    if (isAutoDisconnectEnabled && this.config.isPresenceOnly) {
+      this.unbindVisibilityListener = bind(document, {
+        type: 'visibilitychange',
+        listener: () => {
+          this.disconnectTimer = this.autoDisconnect(this.disconnectTimer, disconnectDelay);
+        }
+      });
+    }
+  }
   disconnect() {
     var _this$network;
     this.unsubscribeAll();
+    this.cleanupAutoDisconnect();
     (_this$network = this.network) === null || _this$network === void 0 ? void 0 : _this$network.destroy();
     this.network = null;
     if (this.socket) {

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/collab-provider";
-export const version = "10.15.0";
+export const version = "10.16.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/channel.js

@@ -25,6 +25,8 @@ import Network from './connectivity/network';
 import { INTERNAL_ERROR_CODE } from './errors/internal-errors';
 import { NCS_ERROR_CODE } from './errors/ncs-errors';
 import { NotConnectedError, NotInitializedError } from './errors/custom-errors';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
+import { bind } from 'bind-event-listener';
 var logger = createLogger('Channel', 'green');
 export var Channel = /*#__PURE__*/function (_Emitter) {
   function Channel(config, analyticsHelper) {
@@ -411,6 +413,40 @@ export var Channel = /*#__PURE__*/function (_Emitter) {
         (_this$socket3 = _this.socket) === null || _this$socket3 === void 0 || _this$socket3.connect();
       }
     });
+    /**
+     * Unbinds event listeners and timers used when handling connection auto-close when tab is hidden
+     */
+    _defineProperty(_this, "cleanupAutoDisconnect", function () {
+      _this.unbindVisibilityListener();
+      if (_this.disconnectTimer) {
+        clearTimeout(_this.disconnectTimer);
+        _this.disconnectTimer = undefined;
+      }
+    });
+    /**
+     * Cleanup the visiblitychange listener upon Collab Provider destroy
+     * Value set when the listener is binded in addVisiblityListener
+     */
+    _defineProperty(_this, "unbindVisibilityListener", function () {});
+    _defineProperty(_this, "autoDisconnect", function (disconnectTimer, disconnectDelay) {
+      if (document.hidden) {
+        logger('visibilitychange: hidden');
+        return setTimeout(function () {
+          var _this$socket4;
+          logger('visibilitychange: closing connection');
+          (_this$socket4 = _this.socket) === null || _this$socket4 === void 0 || _this$socket4.close();
+        }, disconnectDelay || disconnectDelay === 0 ? disconnectDelay * 1000 : 60 * 1000);
+      } else {
+        var _this$socket5;
+        logger('visibilitychange: visible');
+        if (disconnectTimer) {
+          clearTimeout(disconnectTimer);
+        }
+        logger('visibilitychange: re-connecting');
+        (_this$socket5 = _this.socket) === null || _this$socket5 === void 0 || _this$socket5.connect();
+        return;
+      }
+    });
     _this.config = config;
     _this.analyticsHelper = analyticsHelper;
     _this.initExperience = createDocInitExp(_this.analyticsHelper);
@@ -644,6 +680,10 @@ export var Channel = /*#__PURE__*/function (_Emitter) {
       this.reconnectHelper = new ReconnectHelper();
       // Fired upon a reconnection attempt error (from Socket.IO Manager)
       this.socket.io.on('reconnect_error', this.onReconnectError);
+
+      // Automatic disconnect on tab background with delay, to keep presence UX accurate
+      // and reduce wasted connections. Reconnects upon tab becoming active again
+      this.addVisiblityListener();
     }
 
     // Ignored via go/ees005
@@ -768,11 +808,32 @@ export var Channel = /*#__PURE__*/function (_Emitter) {
     value: function isLimitExceeded(stepLimit, stepSizeLimit, maxStepSizeLimit) {
       return stepLimit > 0 && this.stepCounter > stepLimit || stepSizeLimit > 0 && this.stepSizeCounter > stepSizeLimit || maxStepSizeLimit > 0 && this.maxStepSize > maxStepSizeLimit;
     }
+  }, {
+    key: "addVisiblityListener",
+    value:
+    /**
+     * Adds an event listener for visibilitychange events to handle auto-disconnection if tab is in background
+     */
+    function addVisiblityListener() {
+      var _FeatureGates$getExpe,
+        _this3 = this;
+      var disconnectDelay = (_FeatureGates$getExpe = FeatureGates.getExperimentValue('platform_editor_connection_auto_disconnect_delay', 'delay', -1)) !== null && _FeatureGates$getExpe !== void 0 ? _FeatureGates$getExpe : -1;
+      var isAutoDisconnectEnabled = disconnectDelay >= 0;
+      if (isAutoDisconnectEnabled && this.config.isPresenceOnly) {
+        this.unbindVisibilityListener = bind(document, {
+          type: 'visibilitychange',
+          listener: function listener() {
+            _this3.disconnectTimer = _this3.autoDisconnect(_this3.disconnectTimer, disconnectDelay);
+          }
+        });
+      }
+    }
   }, {
     key: "disconnect",
     value: function disconnect() {
       var _this$network;
       this.unsubscribeAll();
+      this.cleanupAutoDisconnect();
       (_this$network = this.network) === null || _this$network === void 0 || _this$network.destroy();
       this.network = null;
       if (this.socket) {

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/collab-provider";
-export var version = "10.15.0";
+export var version = "10.16.0";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/types/channel.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import { Emitter } from './emitter';
 import type { Config, ChannelEvent, Catchupv2Response, ReconcileResponse } from './types';
 import { type CatchupEventReason } from './helpers/const';
@@ -17,6 +18,7 @@ export declare class Channel extends Emitter<ChannelEvent> {
     private initExperience?;
     private token?;
     private network;
+    private disconnectTimer?;
     private readonly rateLimitWindowDurationMs;
     private rateLimitWindowStartMs;
     private stepCounter;
@@ -56,5 +58,19 @@ export declare class Channel extends Emitter<ChannelEvent> {
     sendMetadata: (metadata: Metadata) => void;
     sendPresenceJoined: () => void;
     onOnlineHandler: () => void;
+    /**
+     * Unbinds event listeners and timers used when handling connection auto-close when tab is hidden
+     */
+    private cleanupAutoDisconnect;
+    /**
+     * Cleanup the visiblitychange listener upon Collab Provider destroy
+     * Value set when the listener is binded in addVisiblityListener
+     */
+    private unbindVisibilityListener;
+    /**
+     * Adds an event listener for visibilitychange events to handle auto-disconnection if tab is in background
+     */
+    private addVisiblityListener;
+    autoDisconnect: (disconnectTimer: ReturnType<typeof setTimeout> | undefined, disconnectDelay: number) => NodeJS.Timeout | undefined;
     disconnect(): void;
 }

package/dist/types-ts4.5/channel.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import { Emitter } from './emitter';
 import type { Config, ChannelEvent, Catchupv2Response, ReconcileResponse } from './types';
 import { type CatchupEventReason } from './helpers/const';
@@ -17,6 +18,7 @@ export declare class Channel extends Emitter<ChannelEvent> {
     private initExperience?;
     private token?;
     private network;
+    private disconnectTimer?;
     private readonly rateLimitWindowDurationMs;
     private rateLimitWindowStartMs;
     private stepCounter;
@@ -56,5 +58,19 @@ export declare class Channel extends Emitter<ChannelEvent> {
     sendMetadata: (metadata: Metadata) => void;
     sendPresenceJoined: () => void;
     onOnlineHandler: () => void;
+    /**
+     * Unbinds event listeners and timers used when handling connection auto-close when tab is hidden
+     */
+    private cleanupAutoDisconnect;
+    /**
+     * Cleanup the visiblitychange listener upon Collab Provider destroy
+     * Value set when the listener is binded in addVisiblityListener
+     */
+    private unbindVisibilityListener;
+    /**
+     * Adds an event listener for visibilitychange events to handle auto-disconnection if tab is in background
+     */
+    private addVisiblityListener;
+    autoDisconnect: (disconnectTimer: ReturnType<typeof setTimeout> | undefined, disconnectDelay: number) => NodeJS.Timeout | undefined;
     disconnect(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/collab-provider",
-	"version": "10.15.0",
+	"version": "10.16.0",
 	"description": "A provider for collaborative editing.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,10 +42,11 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-collab": "^0.16.0",
 		"@atlaskit/react-ufo": "^3.13.0",
-		"@atlaskit/tmp-editor-statsig": "^4.24.0",
+		"@atlaskit/tmp-editor-statsig": "^4.25.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
+		"bind-event-listener": "^3.0.0",
 		"eventemitter2": "^4.1.0",
 		"lodash": "^4.17.21",
 		"prosemirror-changeset": "^2.2.1",