saasufy-components 1.8.0 → 1.9.0

package/app-router.js

@@ -1,21 +1,25 @@
-import { toSafeHTML } from './utils.js';
-import { renderTemplate } from './utils.js';
+import { toSafeHTML, renderTemplate, debouncer } from './utils.js';
+import { SocketConsumer } from './socket.js';
 
-export class AppRouter extends HTMLElement {
+const DEFAULT_DEBOUNCE_DELAY = 100;
+
+export class AppRouter extends SocketConsumer {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
 
     this.pages = {};
     this.pageRouteInfos = [];
+    this.debounce = debouncer();
+    this.debounceDelay = DEFAULT_DEBOUNCE_DELAY;
 
     this.hashStartRegex = /^#/;
 
     this.handleHashChangeEvent = () => {
-      this.renderCurrentPage();
+      this.debounce(this.renderCurrentPage, this.debounceDelay);
     };
 
-    this.handleSlotChangeEvent = () => {
+    this.handleSlotChangeEvent = (event) => {
       let pageTemplates = this.shadowRoot.querySelector('slot[name="page"]').assignedNodes();
 
       for (let template of pageTemplates) {
@@ -30,8 +34,9 @@ export class AppRouter extends HTMLElement {
           params: [ ...route.matchAll(/:[^\/]*/g) ].map(paramMatch => paramMatch[0].replace(':', ''))
         };
       });
-
-      this.renderCurrentPage();
+      if (!this.socket || this.socket.state === this.socket.OPEN) {
+        this.debounce(this.renderCurrentPage, this.debounceDelay);
+      }
     };
   }
 
@@ -43,15 +48,61 @@ export class AppRouter extends HTMLElement {
     return Object.fromEntries(argEntries);
   }
 
+  static get observedAttributes() {
+    return [
+      'default-page',
+      'debounce-delay'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'debounce-delay') {
+      if (newValue) {
+        this.debounceDelay = Number(newValue);
+      } else {
+        this.debounceDelay = DEFAULT_DEBOUNCE_DELAY;
+      }
+    } else if (this.isReady) {
+      this.renderCurrentPage();
+    }
+  }
+
   connectedCallback() {
     window.addEventListener('hashchange', this.handleHashChangeEvent);
     this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
+
+    try {
+      // Socket is optional as not all routing use cases require authentication.
+      this.socket = this.getSocket();
+    } catch (error) {}
+    if (this.socket) {
+      let hasProcessedSocketConnect = this.socket.state === this.socket.OPEN;
+      this.authStateChangeConsumer = this.socket.listener('authStateChange').createConsumer();
+      (async () => {
+        for await (let event of this.authStateChangeConsumer) {
+          if (hasProcessedSocketConnect) {
+            this.debounce(this.renderCurrentPage, this.debounceDelay);
+          }
+        }
+      })();
+
+      this.connectConsumer = this.socket.listener('connect').createConsumer();
+      (async () => {
+        for await (let event of this.connectConsumer) {
+          hasProcessedSocketConnect = true;
+          this.debounce(this.renderCurrentPage, this.debounceDelay);
+        }
+      })();
+    }
     this.render();
+    this.isReady = true;
   }
 
   disconnectedCallback() {
     window.removeEventListener('hashchange', this.handleHashChangeEvent);
     this.shadowRoot.removeEventListener('slotchange', this.handleSlotChangeEvent);
+    this.authStateChangeConsumer.kill();
+    this.connectConsumer.kill();
   }
 
   renderCurrentPage() {
@@ -66,7 +117,38 @@ export class AppRouter extends HTMLElement {
     ) || {};
 
     let pageTemplate = this.pages[route];
-    if (!pageTemplate) return;
+    if (!pageTemplate) {
+      let defaultPage = this.getAttribute('default-page');
+      if (!defaultPage) return;
+      pageTemplate = this.pages[defaultPage];
+    };
+
+    let noAuthRedirect = pageTemplate.getAttribute('no-auth-redirect');
+    let authRedirect = pageTemplate.getAttribute('auth-redirect');
+    let hardRedirect = pageTemplate.hasAttribute('hard-redirect');
+
+    if (this.socket && (authRedirect || noAuthRedirect)) {
+      if (this.socket.authState === 'authenticated') {
+        if (authRedirect) {
+          if (hardRedirect) {
+            location.hash = authRedirect;
+            return;
+          } else {
+            pageTemplate = this.pages[authRedirect];
+          }
+        }
+      } else {
+        if (this.socket.state !== this.socket.OPEN) return;
+        if (noAuthRedirect) {
+          if (hardRedirect) {
+            location.hash = noAuthRedirect;
+            return;
+          } else {
+            pageTemplate = this.pages[noAuthRedirect];
+          }
+        }
+      }
+    }
 
     let routeArgs;
     if (route) {

package/package.json

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