saasufy-components 3.19.1 → 3.21.0

package/README.md

@@ -207,6 +207,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.
 
 ### collection-browser
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "3.19.1",
+  "version": "3.21.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {

package/socket.js

@@ -26,9 +26,24 @@ export class SocketProvider extends HTMLElement {
   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() {
+    if (this.storageChangeWatcher) {
+      window.removeEventListener('storage', this.storageChangeWatcher);
+    }
     this.destroySocket();
   }
 

package/utils.js

@@ -233,6 +233,7 @@ let templateFormatters = {
   computeId
 };
 
+let templateRawTagsRegExp = /{{{.*?}}}/gs;
 let templateTagsRegExp = /{{.*?}}/gs;
 
 function execExpression(expression, options) {
@@ -246,33 +247,49 @@ function execExpression(expression, options) {
   return (new Function(...args))(...keys.map(key => options[key]));
 }
 
+function getRenderOptions(data, socket) {
+  return {
+    ...templateFormatters,
+    uuid,
+    socket: socket ? {
+      state: socket.state,
+      pendingReconnect: socket.pendingReconnect,
+      connectAttempts: socket.connectAttempts,
+      authState: socket.authState,
+      authToken: socket.authToken
+    } : undefined,
+    ...data
+  };
+}
+
 export function renderTemplate(templateString, data, socket) {
-  return templateString.replace(templateTagsRegExp, (match) => {
-    let expString = match.slice(2, -2);
-    let options = {
-      ...templateFormatters,
-      uuid,
-      socket: socket ? {
-        state: socket.state,
-        pendingReconnect: socket.pendingReconnect,
-        connectAttempts: socket.connectAttempts,
-        authState: socket.authState,
-        authToken: socket.authToken
-      } : undefined,
-      ...data
-    };
-
-    try {
-      return toSafeHTML(
-        execExpression(
+  return templateString
+    .replace(templateRawTagsRegExp, (match) => {
+      let expString = match.slice(3, -3);
+      let options = getRenderOptions(data, socket);
+      try {
+        return execExpression(
           toExpression(expString),
           options
-        )
-      );
-    } catch (error) {
-      return match;
-    }
-  });
+        );
+      } catch (error) {
+        return match;
+      }
+    })
+    .replace(templateTagsRegExp, (match) => {
+      let expString = match.slice(2, -2);
+      let options = getRenderOptions(data, socket);
+      try {
+        return toSafeHTML(
+          execExpression(
+            toExpression(expString),
+            options
+          )
+        );
+      } catch (error) {
+        return match;
+      }
+    });
 }
 
 export function updateConsumerElements(consumers, value, template, sourceElementName) {