saasufy-components 1.8.0 → 1.10.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) {
@@ -75,7 +157,11 @@ export class AppRouter extends HTMLElement {
       routeArgs = {};
     }
 
-    routerViewport.innerHTML = renderTemplate(pageTemplate.innerHTML, routeArgs);
+    routerViewport.innerHTML = renderTemplate(
+      pageTemplate.innerHTML,
+      routeArgs,
+      this.socket
+    );
   }
 
   render() {

package/collection-browser.js

@@ -171,7 +171,8 @@ class CollectionBrowser extends SocketConsumer {
       for (let modelItem of this.collection.value) {
         let itemString = renderTemplate(
           itemTemplate.innerHTML,
-          { [type]: modelItem }
+          { [type]: modelItem },
+          this.socket
         );
         items.push(itemString);
       }

package/collection-reducer.js

@@ -139,7 +139,8 @@ class CollectionReducer extends SocketConsumer {
       let type = this.getAttribute('type-alias') || this.collection.type;
       let itemString = renderTemplate(
         itemTemplate.innerHTML,
-        { [type]: this.collection.value }
+        { [type]: this.collection.value },
+        this.socket
       );
       viewportNode.innerHTML = itemString;
     }

package/model-viewer.js

@@ -59,7 +59,8 @@ class ModelViewer extends SocketConsumer {
       let type = this.getAttribute('type-alias') || this.model.type;
       let itemString = renderTemplate(
         itemTemplate.innerHTML,
-        { [type]: modelValue }
+        { [type]: modelValue },
+        this.socket
       );
       viewportNode.innerHTML = itemString;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -20,7 +20,6 @@
     "ag-collection": "^3.3.0",
     "ag-model": "^1.4.1",
     "capitalisk-auth-client": "^1.5.1",
-    "expr-eval": "^2.0.2",
     "socketcluster-client": "^19.1.0"
   },
   "bugs": {

package/utils.js

@@ -1,6 +1,5 @@
 import AGCollection from '/node_modules/ag-collection/ag-collection.js';
 import AGModel from '/node_modules/ag-model/ag-model.js';
-import { Parser } from '/node_modules/expr-eval/dist/index.mjs';
 
 const DEFAULT_DEBOUNCE_DELAY = 300;
 const DEFAULT_RELOAD_DELAY = 0;
@@ -11,7 +10,8 @@ export function toSafeHTML(text) {
       .replace(/</g, '&lt;')
       .replace(/>/g, '&gt;')
       .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#039;');
+      .replace(/'/g, '&#039;')
+      .replace(/\n/g, '<br />');
   } else if (text != null && typeof text.toString !== 'function') {
     return '[invalid]';
   }
@@ -170,21 +170,48 @@ let templateFormatters = {
   },
   joinFields: (list, field, sep) => {
     return list.map(item => item[field]).join(sep);
+  },
+  date: (timestamp) => {
+    let date = new Date(timestamp);
+    let year = date.getFullYear();
+    let month = date.toLocaleString('default', { month: 'long' });
+    let day = date.getDate();
+    let hour = date.getHours();
+    let minutes = date.getMinutes();
+    return `${month} ${day}, ${year} at ${hour}:${minutes.toString().padStart(2, '0')}`;
   }
 };
 
 let templateTagsRegExp = /{{[^}]+}}/g;
 
-export function renderTemplate(templateString, data) {
+function execExpression(expression, options) {
+  let keys = Object.keys(options);
+  let args = [
+    ...keys,
+    `return (function () {
+      return ${expression};
+    })();`
+  ];
+  return (new Function(...args))(...keys.map(key => options[key]));
+}
+
+export function renderTemplate(templateString, data, socket) {
   return templateString.replace(templateTagsRegExp, (match) => {
     let expString = match.slice(2, -2);
     let options = {
       ...templateFormatters,
+      socket: socket ? {
+        state: socket.state,
+        pendingReconnect: socket.pendingReconnect,
+        connectAttempts: socket.connectAttempts,
+        authState: socket.authState,
+        authToken: socket.authToken
+      } : undefined,
       ...data
     };
     try {
       return toSafeHTML(
-        Parser.evaluate(
+        execExpression(
           expString,
           options
         )