From 0ff8a9a67b18c6bd03e112526ee59a15dd4fda7b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 19 Nov 2020 09:24:58 +0000
Subject: [PATCH] Add data binding enrichment

---
 .../client/src/components/Component.svelte    | 16 ++++++++--
 .../client/src/utils/enrichDataBinding.js     | 32 +++++++++++++++++++
 .../src/DataProvider.svelte                   | 10 ++++--
 3 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 packages/client/src/utils/enrichDataBinding.js

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 0aaa2c5ac..fb4b7c732 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -1,10 +1,15 @@
 <script>
+  import { getContext } from "svelte"
   import * as ComponentLibrary from "@budibase/standard-components"
   import Router from "./Router.svelte"
+  import renderMustacheString from "../utils/renderMustacheString"
+
+  const dataProviderStore = getContext("data")
 
   export let definition = {}
 
-  $: componentProps = extractValidProps(definition)
+  $: contextRow = dataProviderStore ? $dataProviderStore.row : undefined
+  $: componentProps = extractValidProps(definition, contextRow)
   $: children = definition._children
   $: componentName = extractComponentName(definition._component)
   $: constructor = getComponentConstructor(componentName)
@@ -18,13 +23,20 @@
   }
 
   // Extracts valid props to pass to the real svelte component
-  const extractValidProps = component => {
+  const extractValidProps = (component, row) => {
     let props = {}
     Object.entries(component)
       .filter(([name]) => !name.startsWith("_"))
       .forEach(([key, value]) => {
         props[key] = value
       })
+
+    // Enrich props if we're in a data provider context
+    if (row !== undefined) {
+      Object.entries(props).forEach(([key, value]) => {
+        props[key] = renderMustacheString(value, { data: row })
+      })
+    }
     return props
   }
 
diff --git a/packages/client/src/utils/enrichDataBinding.js b/packages/client/src/utils/enrichDataBinding.js
new file mode 100644
index 000000000..bd058fbf1
--- /dev/null
+++ b/packages/client/src/utils/enrichDataBinding.js
@@ -0,0 +1,32 @@
+import mustache from "mustache"
+
+// this is a much more liberal version of mustache's escape function
+// ...just ignoring < and > to prevent tags from user input
+// original version here https://github.com/janl/mustache.js/blob/4b7908f5c9fec469a11cfaed2f2bed23c84e1c5c/mustache.js#L78
+const entityMap = {
+  "<": "&lt;",
+  ">": "&gt;",
+}
+mustache.escape = text => {
+  return text.replace(/[<>]/g, function fromEntityMap(s) {
+    return entityMap[s] || s
+  })
+}
+
+// Regex to test inputs with to see if they are likely candidates for mustache
+const looksLikeMustache = /{{.*}}/
+
+/**
+ * Enriches a given input with a row from the database.
+ */
+export default (input, context) => {
+  // Only accept string inputs
+  if (!input || typeof input !== "string") {
+    return input
+  }
+  // Do a fast regex check if this looks like a mustache string
+  if (!looksLikeMustache.test(input)) {
+    return input
+  }
+  return mustache.render(input, context)
+}
diff --git a/packages/standard-components/src/DataProvider.svelte b/packages/standard-components/src/DataProvider.svelte
index 36f868e1f..44bd39e6d 100644
--- a/packages/standard-components/src/DataProvider.svelte
+++ b/packages/standard-components/src/DataProvider.svelte
@@ -2,14 +2,18 @@
   import { setContext, onMount } from "svelte"
   import { createDataProviderStore } from "./stores/dataProvider"
 
-  export let row
-
   const dataProviderStore = createDataProviderStore()
   setContext("data", dataProviderStore)
 
+  export let row
+  let loaded = false
+
   onMount(async () => {
     await dataProviderStore.actions.setRow(row)
+    loaded = true
   })
 </script>
 
-<slot />
+{#if loaded}
+  <slot />
+{/if}