saasufy-components 7.14.0 → 8.0.0

package/README.md

@@ -65,6 +65,16 @@ You should always include the `socket.js` script and create a top-level `socket-
 Linking the scripts directly from `saasufy.com` is the simplest way to get started as it doesn't require loading anything or hosting the scripts yourself.
 An alternative approach is to download Saasufy components using `npm install saasufy-components` and self-host them.
 
+### Templating
+
+Many components allow you to substitute dynamic values or JavaScript expressions inside them using double brackets such as `{{someValue}}`. Using double brackets is the safest way to inject values into your components as it escapes all HTML characters to mitigate XSS attacks.
+
+In order to render HTML which was generated dynamically, you need to use triple brackets such as `{{{someValue}}}` but you should not inject untrusted user-generated values directly in this way.
+
+Saasufy components support nested expressions but you should not inject untrusted/unsanitized input via a nested expression as it can make your application vulerable to XSS attacks.
+
+When an expression fails to render (I.e. throws an error), it will remain unchanged in its original expression format within the component/template. If an expression is nested inside a child component, the parent will attempt to evaluate it first. If it fails, then it will remain as-is and the child may later also attempt to evaluate it as part of its own rendering (e.g. once the child provides the missing state).
+
 ### Styling
 
 This project does not impose any specific approach to styling components, however, it comes with an optional `styles.css` stylesheet which can be added inside your `<head>` tag like this:

package/app-router.js

@@ -272,9 +272,10 @@ export class AppRouter extends SocketConsumer {
       window.scrollTo(0, 0);
     }
 
+    this.setCurrentState(routeArgs);
     routerViewport.innerHTML = renderTemplate(
       pageTemplate.innerHTML,
-      routeArgs,
+      this.getStateContext(),
       this.socket
     );
   }

package/collection-reducer.js

@@ -147,9 +147,10 @@ class CollectionReducer extends SocketConsumer {
     let errorTemplate = this.shadowRoot.querySelector('slot[name="error"]').assignedNodes()[0];
     if (errorTemplate) {
       let type = this.getAttribute('type-alias') || this.getAttribute('collection-type');
+      this.setCurrentState({ [`$${type}`]: { error } });
       let errorItemString = renderTemplate(
         errorTemplate.innerHTML,
-        { [`$${type}`]: { error } },
+        this.getStateContext(),
         this.socket
       );
       viewportNode.innerHTML = errorItemString;
@@ -187,9 +188,10 @@ class CollectionReducer extends SocketConsumer {
       viewportNode.innerHTML = noItemTemplate.innerHTML;
     } else if (itemTemplate) {
       let type = this.getAttribute('type-alias') || this.collection.type;
+      this.setCurrentState({ [type]: this.collection.value, [`$${type}`]: this.collection.meta });
       let itemString = renderTemplate(
         itemTemplate.innerHTML,
-        { [type]: this.collection.value, [`$${type}`]: this.collection.meta },
+        this.getStateContext(),
         this.socket
       );
       viewportNode.innerHTML = itemString;

package/collection-viewer.js

@@ -1,4 +1,4 @@
-import { SocketConsumer } from './socket.js';
+import { SocketConsumer, setElementState } from './socket.js';
 import AGCollection from '/node_modules/ag-collection/ag-collection.js';
 import { renderTemplate, convertStringToFieldParams } from './utils.js';
 
@@ -251,15 +251,30 @@ class CollectionViewer extends SocketConsumer {
     let errorTemplate = this.shadowRoot.querySelector('slot[name="error"]').assignedNodes()[0];
     if (errorTemplate) {
       let type = this.getAttribute('type-alias') || this.getAttribute('collection-type');
+      this.setCurrentState({ [`$${type}`]: { error } });
       let errorItemString = renderTemplate(
         errorTemplate.innerHTML,
-        { [`$${type}`]: { error } },
+        this.getStateContext(),
         this.socket
       );
       viewportNode.innerHTML = errorItemString;
     }
   }
 
+  getNodesWithState(htmlString, state) {
+    let items = [];
+    let template = document.createElement('template');
+    template.innerHTML = htmlString;
+    let content = template.content;
+    for (let child of content.children) {
+      setElementState(child, state);
+    }
+    for (let node of content.childNodes) {
+      items.push(node);
+    }
+    return items;
+  }
+
   renderList() {
     let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
     if (!viewportSlot) return;
@@ -289,47 +304,56 @@ class CollectionViewer extends SocketConsumer {
     let firstItemTemplate = this.shadowRoot.querySelector('slot[name="first-item"]').assignedNodes()[0];
     let lastItemTemplate = this.shadowRoot.querySelector('slot[name="last-item"]').assignedNodes()[0];
 
+    viewportNode.innerHTML = '';
+    this.setCurrentState(null);
+    let stateContext = this.getStateContext();
     let items = [];
 
     let type = this.getAttribute('type-alias') || this.collection.type;
 
     if (firstItemTemplate) {
+      let state = { [`$${type}`]: this.collection.meta };
       let itemString = renderTemplate(
         firstItemTemplate.innerHTML,
-        { [`$${type}`]: this.collection.meta },
+        {...stateContext, ...state},
         this.socket
       );
-      items.push(itemString);
+      items.push(...this.getNodesWithState(itemString, state));
     }
     if (noItemTemplate && !this.collection.value.length) {
+      let state = { [`$${type}`]: this.collection.meta };
       let itemString = renderTemplate(
         noItemTemplate.innerHTML,
-        { [`$${type}`]: this.collection.meta },
+        {...stateContext, ...state},
         this.socket
       );
-      items.push(itemString);
+      items.push(...this.getNodesWithState(itemString, state));
     } else if (itemTemplate) {
       for (let modelItem of this.collection.value) {
+        let state = {
+          [type]: modelItem,
+          [`$${type}`]: this.collection.meta
+        };
         let itemString = renderTemplate(
           itemTemplate.innerHTML,
-          {
-            [type]: modelItem,
-            [`$${type}`]: this.collection.meta
-          },
+          {...stateContext, ...state},
           this.socket
         );
-        items.push(itemString);
+        items.push(...this.getNodesWithState(itemString, state));
       }
     }
     if (lastItemTemplate) {
+      let state = { [`$${type}`]: this.collection.meta };
       let itemString = renderTemplate(
         lastItemTemplate.innerHTML,
-        { [`$${type}`]: this.collection.meta },
+        {...stateContext, ...state},
         this.socket
       );
-      items.push(itemString);
+      items.push(...this.getNodesWithState(itemString, state));
+    }
+    for (let item of items) {
+      viewportNode.appendChild(item);
     }
-    viewportNode.innerHTML = items.join('');
   }
 
   render() {

package/model-viewer.js

@@ -63,9 +63,10 @@ class ModelViewer extends SocketConsumer {
     let errorTemplate = this.shadowRoot.querySelector('slot[name="error"]').assignedNodes()[0];
     if (errorTemplate) {
       let type = this.getAttribute('type-alias') || this.getAttribute('model-type');
+      this.setCurrentState({ [`$${type}`]: { error } });
       let errorItemString = renderTemplate(
         errorTemplate.innerHTML,
-        { [`$${type}`]: { error } },
+        this.getStateContext(),
         this.socket
       );
       viewportNode.innerHTML = errorItemString;
@@ -100,9 +101,10 @@ class ModelViewer extends SocketConsumer {
       viewportNode.innerHTML = noItemTemplate.innerHTML;
     } else if (itemTemplate) {
       let type = this.getAttribute('type-alias') || this.model.type;
+      this.setCurrentState({ [type]: modelValue });
       let itemString = renderTemplate(
         itemTemplate.innerHTML,
-        { [type]: modelValue },
+        this.getStateContext(),
         this.socket
       );
       viewportNode.innerHTML = itemString;

package/package.json

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

package/socket.js

@@ -151,7 +151,33 @@ export class SocketProvider extends HTMLElement {
   }
 }
 
+export function setElementState(element, currentState) {
+  element.saasufyState = currentState;
+}
+
 export class SocketConsumer extends HTMLElement {
+  setCurrentState(currentState) {
+    this.saasufyState = currentState;
+  }
+  getStateContext(currentState) {
+    let currentNode = this.parentNode;
+    let statefulParentNodes = [];
+    while (currentNode) {
+      if (currentNode.saasufyState) {
+        statefulParentNodes.push(currentNode);
+      }
+      currentNode = currentNode.getRootNode().host || currentNode.parentNode;
+    }
+    statefulParentNodes.reverse();
+    let stateContext = {};
+    for (let parentNode of statefulParentNodes) {
+      Object.assign(stateContext, parentNode.saasufyState);
+    }
+    return {
+      ...stateContext,
+      ...(currentState || this.saasufyState)
+    };
+  }
   getSocket() {
     let socket = null;
     let currentNode = this.parentNode;