saasufy-components 1.1.1 → 1.2.0

package/app-router.js

@@ -1,4 +1,4 @@
-import { getSafeHTML } from './utils.js';
+import { toSafeHTML } from './utils.js';
 import { renderTemplate } from './utils.js';
 
 export class AppRouter extends HTMLElement {

package/collection-browser.js

@@ -155,7 +155,10 @@ class CollectionBrowser extends SocketConsumer {
     let items = [];
 
     for (let modelItem of this.collection.value) {
-      let itemString = renderTemplate(itemTemplate.innerHTML, modelItem, this.collection.type);
+      let itemString = renderTemplate(
+        itemTemplate.innerHTML,
+        { [this.collection.type]: modelItem }
+      );
       items.push(itemString);
     }
     let noItemTemplate = this.shadowRoot.querySelector('slot[name="no-item"]').assignedNodes()[0];

package/model-input.js

@@ -1,5 +1,5 @@
 import { SocketConsumer } from './socket.js';
-import { getSafeHTML, debouncer } from './utils.js';
+import { debouncer } from './utils.js';
 import AGModel from '/node_modules/ag-model/ag-model.js';
 
 class ModelInput extends SocketConsumer {
@@ -166,7 +166,7 @@ class ModelInput extends SocketConsumer {
 
   syncInputElementWithModel(inputElement, model, fieldName, messageContainerElement) {
     if (model.isLoaded) {
-      let fieldValue = getSafeHTML(model.value[fieldName]);
+      let fieldValue = model.value[fieldName];
       if (inputElement.type === 'checkbox') {
         inputElement.checked = !!fieldValue;
       } else {
@@ -178,7 +178,7 @@ class ModelInput extends SocketConsumer {
     (async () => {
       for await (let event of changeConsumer) {
         if (event.resourceField !== fieldName || !event.isRemote) continue;
-        let fieldValue = getSafeHTML(model.value[fieldName]);
+        let fieldValue = model.value[fieldName];
         if (inputElement.type === 'checkbox') {
           inputElement.checked = fieldValue;
         } else {

package/model-text.js

@@ -1,5 +1,5 @@
 import { SocketConsumer } from './socket.js';
-import { getSafeHTML } from './utils.js';
+import { toSafeHTML } from './utils.js';
 import AGModel from '/node_modules/ag-model/ag-model.js';
 
 class ModelText extends SocketConsumer {
@@ -79,12 +79,12 @@ class ModelText extends SocketConsumer {
     (async () => {
       for await (let event of changeConsumer) {
         if (event.resourceField !== modelField || !event.isRemote) continue;
-        let fieldValue = getSafeHTML(model.value[modelField]);
+        let fieldValue = toSafeHTML(model.value[modelField]);
         this.innerHTML = fieldValue;
       }
     })();
     if (model.isLoaded) {
-      this.innerHTML = getSafeHTML(model.value[modelField]);
+      this.innerHTML = toSafeHTML(model.value[modelField]);
     }
     this.destroy = () => {
       changeConsumer.kill();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -19,6 +19,7 @@
   "dependencies": {
     "ag-collection": "^3.2.1",
     "ag-model": "^1.3.6",
+    "expr-eval": "^2.0.2",
     "socketcluster-client": "^19.0.2"
   },
   "bugs": {

package/socket.js

@@ -1,16 +1,11 @@
 import { create } from '/node_modules/socketcluster-client/socketcluster-client.min.js';
 
-const DEFAULT_AUTH_TOKEN_NAME = 'saasufy.authToken';
-
 let globalSocket;
 
 let urlPartsRegExp = /(^[^:]+):\/\/([^:\/]*)(:[0-9]*)?(\/.*)/;
 
 export function createGlobalSocket(options) {
-  globalSocket = create({
-    authTokenName: DEFAULT_AUTH_TOKEN_NAME,
-    ...options
-  });
+  globalSocket = create({ ...options });
   return globalSocket;
 }
 
@@ -64,7 +59,7 @@ export class SocketProvider extends HTMLElement {
   }
 
   createSocket() {
-    let authTokenName = this.getAttribute('auth-token-name') || DEFAULT_AUTH_TOKEN_NAME;
+    let authTokenName = this.getAttribute('auth-token-name') || null;
     let url = this.getAttribute('url') || '';
     let urlOptions;
     let matchedList = url.match(urlPartsRegExp);

package/utils.js

@@ -1,10 +1,11 @@
 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;
 
-export function getSafeHTML(text) {
+export function toSafeHTML(text) {
   if (typeof text === 'string') {
     return text.replace(/&/g, '&')
       .replace(/</g, '&lt;')
@@ -29,10 +30,10 @@ export function debouncer() {
   };
 }
 
-export function getSafeModelValue(value) {
+export function toSafeModelValue(value) {
   return Object.fromEntries(
     Object.entries(value || {}).map(
-      ([key, value]) => [ key, getSafeHTML(value) ]
+      ([key, value]) => [ key, toSafeHTML(value) ]
     )
   );
 }
@@ -60,7 +61,7 @@ export function createReactiveCollection(collectionOptions, callback) {
 
       if (!collection.isLoaded) continue;
 
-      collection.safeValue = collection.value.map(getSafeModelValue);
+      collection.safeValue = collection.value.map(toSafeModelValue);
 
       callback({
         changes
@@ -102,7 +103,7 @@ export function createReactiveModel(modelOptions, callback) {
         changes[event.resourceField] = event.isRemote;
       }
 
-      model.safeValue = getSafeModelValue(model.value);
+      model.safeValue = toSafeModelValue(model.value);
       callback({
         changes
       });
@@ -128,7 +129,7 @@ export function createCollection(collectionOptions) {
   (async () => {
     for await (let event of collection.listener('change')) {
       if (!collection.isLoaded) continue;
-      collection.safeValue = collection.value.map(getSafeModelValue);
+      collection.safeValue = collection.value.map(toSafeModelValue);
     }
   })();
 
@@ -148,7 +149,7 @@ export function createModel(modelOptions) {
 
   (async () => {
     for await (let event of model.listener('change')) {
-      model.safeValue = getSafeModelValue(model.value);
+      model.safeValue = toSafeModelValue(model.value);
     }
   })();
 
@@ -162,20 +163,32 @@ let templateFormatters = {
   capitalize: (value) => {
     let valueString = String(value);
     return `${valueString.slice(0, 1).toUpperCase()}${valueString.slice(1)}`;
+  },
+  fallback: (...args) => {
+    return args.filter(arg => arg)[0];
   }
 };
 
-export function renderTemplate(templateString, data, dataType) {
-  for (let [ field, value ] of Object.entries(data)) {
-    let safeValue = getSafeHTML(value);
-    for (let [ formatName, formatFunction ] of Object.entries(templateFormatters)) {
-      let formatRegExp = new RegExp(`{{${formatName}:${dataType ? dataType + '.' : ''}${field}}}`, 'g');
-      templateString = templateString.replace(formatRegExp, formatFunction(safeValue));
+let templateTagsRegExp = /{{[^}]+}}/g;
+
+export function renderTemplate(templateString, data) {
+  return templateString.replace(templateTagsRegExp, (match) => {
+    let expString = match.slice(2, -2);
+    let options = {
+      ...templateFormatters,
+      ...data
+    };
+    try {
+      return toSafeHTML(
+        Parser.evaluate(
+          expString,
+          options
+        )
+      );
+    } catch (error) {
+      return match;
     }
-    let regExp = new RegExp(`{{${dataType ? dataType + '.' : ''}${field}}}`, 'g');
-    templateString = templateString.replace(regExp, safeValue);
-  }
-  return templateString;
+  });
 }
 
 export function wait(duration) {