saasufy-components 7.10.0 → 7.12.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,6 +74,8 @@ 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, null, null, true);
       }
@@ -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/package.json

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

package/utils.js

@@ -5,9 +5,23 @@ import { sha256 } from './sha256.js';
 
 const DEFAULT_DEBOUNCE_DELAY = 300;
 const DEFAULT_RELOAD_DELAY = 0;
+
+let expressionCharsRegExp = /\$\{(.*?)\}/g;
+let backtickRegExp = /`/g;
+let templateMultiStartBracesRegExp = /{{{*/g
+let templateMultiEndBracesRegExp = /}}}*/g
+
+export function toSafeString(value) {
+  return value.replace(expressionCharsRegExp, '$!{$1}')
+    .replace(backtickRegExp, `'`)
+    .replace(templateMultiStartBracesRegExp, '[[')
+    .replace(templateMultiEndBracesRegExp, ']]');
+}
+
 export function toSafeHTML(value) {
   if (typeof value === 'string') {
-    return value.replace(/&(?!(amp|lt|gt|quot|#039|#123|#125);)/g, '&')
+    return toSafeString(value)
+      .replace(/&(?!(amp|lt|gt|quot|#039|#123|#125);)/g, '&')
       .replace(/<(?!br ?\/?>)/g, '&lt;')
       .replace(/(?<!br ?\/?)>/g, '&gt;')
       .replace(/"/g, '&quot;')
@@ -296,9 +310,6 @@ function replaceExpressions(string, replaceFn) {
   return charList.join('');
 }
 
-let templateMultiStartBracesRegExp = /{{{*/g
-let templateMultiEndBracesRegExp = /}}}*/g
-
 export function renderTemplate(templateString, data, socket, autoExecFunction) {
   let options = getRenderOptions(data, socket);
   return replaceExpressions(templateString, (expression) => {
@@ -333,15 +344,6 @@ export function renderTemplate(templateString, data, socket, autoExecFunction) {
         }
         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;