saasufy-components 3.25.0 → 3.26.0

package/README.md

@@ -250,6 +250,7 @@ A Saasufy component which integrates with data from Saasufy is known as a `socke
 - `url` (required): Specifies the URL for the Saasufy service to use as the data store for all components which are placed inside it.
 - `auth-token-name`: Allows you to specify a custom key for your token - This will be used as the key in localStorage. You generally do not need to set this attribute. It is intended for situations were an app has multiple `socket-provider` elements connecting different services with different/separate authentication flows.
 - `disable-tab-sync`: By default, the socket provider synchronizes socket auth state across multiple tabs via localStorage. If this attribute is set, then the socket auth state will not sync automatically and a manual page refresh may be necessary to update to the latest auth state.
+- `socket-options`: Can be used to set options on the inner `socket`. Must be in the format `option1:type1=value1,option2:type2=value2`; the type of each option can be string, boolean or number. If not specified, the default type is string.
 
 ### collection-browser
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "3.25.0",
+  "version": "3.26.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -20,7 +20,7 @@
     "ag-collection": "^5.1.0",
     "ag-model": "^3.1.0",
     "capitalisk-auth-client": "^1.5.1",
-    "socketcluster-client": "^19.1.0",
+    "socketcluster-client": "^19.1.1",
     "uuid": "^8.3.2"
   },
   "bugs": {

package/socket.js

@@ -1,4 +1,5 @@
 import { create } from '/node_modules/socketcluster-client/socketcluster-client.min.js';
+import { convertStringToFieldParams } from './utils.js';
 
 let globalSocket;
 
@@ -21,23 +22,12 @@ export class SocketProvider extends HTMLElement {
     super();
     this.saasufySocket = null;
     this.isReady = false;
+    this.lastExtraSocketOptionsString = '';
   }
 
   connectedCallback() {
     this.isReady = true;
     this.getSocket();
-    let disableTabSync = this.hasAttribute('disable-tab-sync');
-    if (!disableTabSync) {
-      if (this.storageChangeWatcher) {
-        window.removeEventListener('storage', this.storageChangeWatcher);
-      }
-      this.storageChangeWatcher = (event) => {
-        if (event.storageArea === window.localStorage && event.key === this.saasufySocket.options.authTokenName) {
-          this.saasufySocket.reconnect();
-        }
-      };
-    }
-    window.addEventListener('storage', this.storageChangeWatcher);
   }
 
   disconnectedCallback() {
@@ -50,7 +40,9 @@ export class SocketProvider extends HTMLElement {
   static get observedAttributes() {
     return [
       'url',
-      'auth-token-name'
+      'auth-token-name',
+      'disable-tab-sync',
+      'socket-options'
     ];
   }
 
@@ -72,6 +64,7 @@ export class SocketProvider extends HTMLElement {
 
   getSocketOptions() {
     let authTokenName = this.getAttribute('auth-token-name') || null;
+    let socketOptionsString = this.getAttribute('socket-options') || '';
     let url = this.getSanitizedURL();
     let urlOptions;
     let matchedList = url.match(urlPartsRegExp);
@@ -92,18 +85,24 @@ export class SocketProvider extends HTMLElement {
       }
       urlOptions = {};
     }
+    let {
+      fieldValues: extraSocketOptions
+    } = convertStringToFieldParams(socketOptionsString);
     let socketOptions = {
       authTokenName,
+      autoConnect: !!url,
+      ...extraSocketOptions,
       ...urlOptions
     };
-    socketOptions.autoConnect = !!url;
     return socketOptions;
   }
 
   getSocket() {
+    let socket;
+    let socketOptionsString = this.getAttribute('socket-options') || '';
     if (this.saasufySocket) {
       let sanitizedURL = this.getSanitizedURL();
-      if (this.lastSaasufySocketURL !== sanitizedURL) {
+      if (this.lastSaasufySocketURL !== sanitizedURL || this.lastExtraSocketOptionsString !== socketOptionsString) {
         this.saasufySocket.connect(
           this.getSocketOptions()
         );
@@ -111,15 +110,31 @@ export class SocketProvider extends HTMLElement {
         this.saasufySocket.connect();
       }
       this.lastSaasufySocketURL = sanitizedURL;
-      return this.saasufySocket;
+      this.lastExtraSocketOptionsString = socketOptionsString;
+      socket = this.saasufySocket;
+    } else {
+      socket = this.createSocket();
+    }
+    if (this.storageChangeWatcher) {
+      window.removeEventListener('storage', this.storageChangeWatcher);
     }
-    return this.createSocket();
+    let disableTabSync = this.hasAttribute('disable-tab-sync');
+    if (!disableTabSync) {
+      this.storageChangeWatcher = (event) => {
+        if (event.storageArea === window.localStorage && event.key === this.saasufySocket.options.authTokenName) {
+          this.saasufySocket.reconnect();
+        }
+      };
+      window.addEventListener('storage', this.storageChangeWatcher);
+    }
+    return socket;
   }
 
   createSocket() {
     let socketOptions = this.getSocketOptions();
     this.saasufySocket = create(socketOptions);
     this.lastSaasufySocketURL = this.getSanitizedURL();
+    this.lastExtraSocketOptionsString = this.getAttribute('socket-options') || '';
 
     return this.saasufySocket;
   }