saasufy-components 7.9.2 → 7.11.0

package/README.md

@@ -696,7 +696,7 @@ This component can be configured to provide its data to multiple components (con
 - `autocapitalize`: Can be `on` or `off` - It will set the auto-capitalize attribute on the inner input element. This is useful for mobile devices to enable or disable auto-capitalization of the first character which is typed into the input element.
 - `autocorrect`: Can be `on` or `off` - It will set the auto-correct attribute on the inner input element. This is useful for mobile devices to enable or disable auto-correct.
 - `input-props`: Can be used to set additional attributes on the inner `input` element. Must be in the format `attr1=value1,attr2=value2`.
-- `skip-init-change`: This attribute can be used to prevent an `input-provider` of type `select` from triggering a change when initialized with a default option. By default, the `input-provider` will trigger a change when initialized with a default value.
+- `skip-init-change`: This attribute can be used to prevent an `input-provider` from triggering a change when initialized with a default value. By default, the `input-provider` will trigger a change when initialized with a default value.
 - `force-init-change`: This attribute can be used to force an `input-provider` to always trigger a change when initialized, even if the value is empty.
 
 ### input-combiner

package/input-provider.js

@@ -74,8 +74,10 @@ class InputProvider extends HTMLElement {
       if (forceInitChange) {
         delete this.forceTriggerChange;
       }
+      let skipInitChange = this.skipInitChange && !forceInitChange;
+      delete this.skipInitChange;
       if (newValue && this.hasAttribute('computable-value')) {
-        newValue = renderTemplate(newValue);
+        newValue = renderTemplate(newValue, null, null, true);
       }
       this.updateInputClassList(newValue);
       let oldValue;
@@ -86,14 +88,14 @@ class InputProvider extends HTMLElement {
         } else {
           this.inputElement.checked = newValue;
         }
-        if (oldValue !== newValue || forceInitChange) {
+        if ((oldValue !== newValue || forceInitChange) && !skipInitChange) {
           this.triggerChange();
         }
         return;
       }
       oldValue = this.inputElement.value;
       this.inputElement.value = newValue;
-      if (oldValue !== newValue || forceInitChange) {
+      if ((oldValue !== newValue || forceInitChange) && !skipInitChange) {
         this.triggerChange();
       }
     }
@@ -197,7 +199,9 @@ class InputProvider extends HTMLElement {
       this.forceTriggerChange = true;
       this.value = value;
     } else if (value) {
-      if (type === 'select' && !this.hasAttribute('skip-init-change')) {
+      if (this.hasAttribute('skip-init-change')) {
+        this.skipInitChange = true;
+      } else if (type === 'select') {
         this.forceTriggerChange = true;
       }
       this.value = value;

package/model-input.js

@@ -71,7 +71,7 @@ class ModelInput extends SocketConsumer {
   set value(newValue) {
     if (this.inputElement) {
       if (newValue && this.hasAttribute('computable-value')) {
-        newValue = renderTemplate(newValue);
+        newValue = renderTemplate(newValue, null, null, true);
       }
       let oldValue;
       if (this.inputElement.type === 'checkbox') {

package/package.json

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

package/utils.js

@@ -5,10 +5,9 @@ import { sha256 } from './sha256.js';
 
 const DEFAULT_DEBOUNCE_DELAY = 300;
 const DEFAULT_RELOAD_DELAY = 0;
-
-export function toSafeHTML(text) {
-  if (typeof text === 'string') {
-    return text.replace(/&(?!(amp|lt|gt|quot|#039|#123|#125);)/g, '&')
+export function toSafeHTML(value) {
+  if (typeof value === 'string') {
+    return value.replace(/&(?!(amp|lt|gt|quot|#039|#123|#125);)/g, '&')
       .replace(/<(?!br ?\/?>)/g, '&lt;')
       .replace(/(?<!br ?\/?)>/g, '&gt;')
       .replace(/"/g, '&quot;')
@@ -16,14 +15,14 @@ export function toSafeHTML(text) {
       .replace(/\{/g, '&#123;')
       .replace(/\}/g, '&#125;')
       .replace(/\n/g, '<br>');
-  } else if (text != null && typeof text.toString !== 'function') {
+  } else if (value != null && typeof value.toString !== 'function') {
     return '[invalid]';
   }
-  return text;
+  return value;
 }
 
-export function toExpression(html) {
-  return html.replace(/&amp;/g, '&')
+export function toExpression(value) {
+  return value.replace(/&amp;/g, '&')
     .replace(/&lt;/g, '<')
     .replace(/&gt;/g, '>');
 }
@@ -216,9 +215,6 @@ let templateFormatters = {
   safeString: toSafeHTML
 };
 
-let templateTripleTagsRegExp = /{{{.*?}}}/gs;
-let templateTagsRegExp = /{{.*?}}/gs;
-
 function execExpression(expression, options) {
   let keys = Object.keys(options);
   let args = [
@@ -300,29 +296,53 @@ function replaceExpressions(string, replaceFn) {
   return charList.join('');
 }
 
-export function renderTemplate(templateString, data, socket) {
+let templateMultiStartBracesRegExp = /{{{*/g
+let templateMultiEndBracesRegExp = /}}}*/g
+
+export function renderTemplate(templateString, data, socket, autoExecFunction) {
   let options = getRenderOptions(data, socket);
   return replaceExpressions(templateString, (expression) => {
     let expString;
     if (expression.startsWith('{{{') && expression.endsWith('}}}')) {
       expString = expression.slice(3, -3);
       try {
-        return execExpression(
+        let result = execExpression(
           toExpression(expString),
           options
         );
+        if (typeof result === 'function') {
+          if (!autoExecFunction) {
+            return expression;
+          }
+          result = result();
+        }
+        return result;
       } catch (error) {
         return expression;
       }
     }
     expString = expression.slice(2, -2);
     try {
-      return toSafeHTML(
-        execExpression(
-          toExpression(expString),
-          options
-        )
+      let result = execExpression(
+        toExpression(expString),
+        options
       );
+      if (typeof result === 'function') {
+        if (!autoExecFunction) {
+          return expression;
+        }
+        result = result();
+      }
+      if (typeof result === 'string') {
+        // Double braces cannot contain sub-expressions as it
+        // would present an XSS vulnerability.
+        // Replace them with square braces so that any code inside
+        // will not be executed if output is re-processed later.
+        result = result
+          .replace(templateMultiStartBracesRegExp, '[[')
+          .replace(templateMultiEndBracesRegExp, ']]');
+      }
+      return toSafeHTML(result);
     } catch (error) {
       return expression;
     }
@@ -340,7 +360,7 @@ export function updateConsumerElements(consumers, value, template, sourceElement
       .filter(([ selector, attributeName ]) => selector);
 
     if (template) {
-      value = renderTemplate(template, { value });
+      value = renderTemplate(template, { value }, null, true);
     }
 
     if (outputType === 'boolean') {