saasufy-components 1.9.0 → 1.10.1

package/app-router.js

@@ -157,7 +157,11 @@ export class AppRouter extends SocketConsumer {
       routeArgs = {};
     }
 
-    routerViewport.innerHTML = renderTemplate(pageTemplate.innerHTML, routeArgs);
+    routerViewport.innerHTML = renderTemplate(
+      pageTemplate.innerHTML,
+      routeArgs,
+      this.socket
+    );
   }
 
   render() {

package/collection-adder.js

@@ -12,7 +12,7 @@ class CollectionAdder extends SocketConsumer {
       checkbox: Boolean,
       number: Number
     };
-    this.fieldPartsRegExp = /([^,()]+(\([^)]*\))?(=[^,]+)?)/g;
+    this.fieldPartsRegExp = /([^,()]+(\([^)]*\))?(=[^,]*)?)/g;
     this.inputTypeWithParamsRegExp = /^([^()]*)(\(([^)]*)\))?/;
   }
 
@@ -51,7 +51,7 @@ class CollectionAdder extends SocketConsumer {
       let nameType = (subParts[0] || '').split(':');
       let name = nameType[0];
       let type = nameType[1] || 'text';
-      let value = subParts[1];
+      let value = subParts.slice(1).join('=');
       return {
         name,
         type,

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.9.0",
+  "version": "1.10.1",
   "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,49 @@ 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;
+let templateTagsRegExp = /{{.*?}}/gs;
+
+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) {
+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
         )