From 32a143cf419e8616b4b6e8843b8818e06f55a041 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 20 Nov 2020 09:50:10 +0000
Subject: [PATCH] Add support for full depth data binding

---
 packages/client/src/api/datasources.js        |  6 +--
 .../client/src/components/ClientApp.svelte    |  7 +--
 .../client/src/components/Component.svelte    | 31 +++++++------
 .../client/src/components/DataProvider.svelte | 24 +++++++++++
 packages/client/src/components/Router.svelte  |  7 +--
 packages/client/src/sdk.js                    |  2 +
 packages/client/src/store/auth.js             |  1 -
 packages/client/src/store/dataContext.js      | 43 +++++++++++++++++++
 packages/client/src/store/index.js            |  1 +
 .../client/src/utils/enrichDataBinding.js     |  4 +-
 packages/client/src/utils/index.js            |  1 +
 .../standard-components/src/Button.svelte     |  4 +-
 packages/standard-components/src/Card.svelte  |  4 +-
 .../src/CardHorizontal.svelte                 |  4 +-
 .../standard-components/src/Container.svelte  |  4 +-
 .../standard-components/src/DataForm.svelte   |  4 +-
 .../src/DataFormWide.svelte                   |  4 +-
 .../src/DataProvider.svelte                   | 19 --------
 .../standard-components/src/DatePicker.svelte |  4 +-
 packages/standard-components/src/Embed.svelte |  4 +-
 packages/standard-components/src/Form.svelte  | 23 +++++++---
 .../standard-components/src/Heading.svelte    |  4 +-
 packages/standard-components/src/Icon.svelte  |  4 +-
 packages/standard-components/src/Image.svelte |  4 +-
 packages/standard-components/src/Input.svelte |  4 +-
 packages/standard-components/src/Link.svelte  |  4 +-
 .../src/LinkedRowSelector.svelte              |  2 +-
 packages/standard-components/src/List.svelte  |  9 ++--
 packages/standard-components/src/Login.svelte |  4 +-
 .../standard-components/src/Navigation.svelte |  4 +-
 .../standard-components/src/NewRow.svelte     |  4 +-
 .../standard-components/src/RichText.svelte   |  2 +-
 .../standard-components/src/RowDetail.svelte  |  3 +-
 .../src/StackedList.svelte                    |  4 +-
 packages/standard-components/src/Text.svelte  |  4 +-
 .../src/attachments/Dropzone.svelte           |  2 +-
 .../src/charts/ApexChart.svelte               |  4 +-
 .../src/charts/BarChart.svelte                |  3 +-
 .../src/charts/CandleStickChart.svelte        |  3 +-
 .../src/charts/LineChart.svelte               |  3 +-
 .../src/charts/PieChart.svelte                |  3 +-
 .../src/grid/Component.svelte                 |  4 +-
 .../src/grid/CreateRow/Modal.svelte           |  2 +-
 .../src/stores/dataProvider.js                | 26 -----------
 44 files changed, 169 insertions(+), 138 deletions(-)
 create mode 100644 packages/client/src/components/DataProvider.svelte
 create mode 100644 packages/client/src/store/dataContext.js
 delete mode 100644 packages/standard-components/src/DataProvider.svelte
 delete mode 100644 packages/standard-components/src/stores/dataProvider.js

diff --git a/packages/client/src/api/datasources.js b/packages/client/src/api/datasources.js
index 66890b230b..f97618b4a9 100644
--- a/packages/client/src/api/datasources.js
+++ b/packages/client/src/api/datasources.js
@@ -6,7 +6,7 @@ import { enrichRows } from "./rows"
 /**
  * Fetches all rows for a particular Budibase data source.
  */
-export const fetchDatasource = async (datasource, context) => {
+export const fetchDatasource = async (datasource, dataContext) => {
   if (!datasource || !datasource.type) {
     return []
   }
@@ -20,9 +20,9 @@ export const fetchDatasource = async (datasource, context) => {
     rows = await fetchViewData(datasource)
   } else if (type === "link") {
     rows = await fetchRelationshipData({
-      tableId: context?.row?.tableId,
+      rowId: dataContext?.data?._id,
+      tableId: dataContext?.data?.tableId,
       fieldName,
-      rowId: context?.row?._id,
     })
   }
 
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 77454edfa5..a0be2120b5 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -2,10 +2,11 @@
   import { setContext, onMount } from "svelte"
   import Component from "./Component.svelte"
   import SDK from "../sdk"
-  import { routeStore, screenStore } from "../store"
+  import { routeStore, screenStore, createDataContextStore } from "../store"
 
-  // Provide SDK for components
-  setContext("app", SDK)
+  // Provide contexts
+  setContext("sdk", SDK)
+  setContext("data", createDataContextStore())
 
   let loaded = false
 
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 56e79e9449..273d217df3 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -1,21 +1,10 @@
 <script>
-  import { getContext } from "svelte"
+  import { getContext, setContext } from "svelte"
   import * as ComponentLibrary from "@budibase/standard-components"
   import Router from "./Router.svelte"
-  import enrichDataBinding from "../utils/enrichDataBinding"
-
-  const dataProviderStore = getContext("data")
 
   export let definition = {}
 
-  $: contextRow = dataProviderStore ? $dataProviderStore.row : undefined
-  $: componentProps = extractValidProps(definition, contextRow)
-  $: children = definition._children
-  $: componentName = extractComponentName(definition._component)
-  $: constructor = getComponentConstructor(componentName)
-  $: id = `${componentName}-${definition._id}`
-  $: styles = { ...definition._styles, id }
-
   // Extracts the actual component name from the library name
   const extractComponentName = name => {
     const split = name?.split("/")
@@ -23,13 +12,12 @@
   }
 
   // Extracts valid props to pass to the real svelte component
-  const extractValidProps = (component, row) => {
+  const extractValidProps = component => {
     let props = {}
-    const enrich = value => enrichDataBinding(value, { data: row })
     Object.entries(component)
       .filter(([name]) => !name.startsWith("_"))
       .forEach(([key, value]) => {
-        props[key] = row === undefined ? value : enrich(value)
+        props[key] = value
       })
     return props
   }
@@ -39,11 +27,22 @@
     return name === "screenslot" ? Router : ComponentLibrary[componentName]
   }
 
+  // Extract component definition info
+  const componentName = extractComponentName(definition._component)
+  const constructor = getComponentConstructor(componentName)
+  const id = `${componentName}-${definition._id}`
+  const componentProps = extractValidProps(definition)
+  const dataContext = getContext("data")
+  const enrichedProps = dataContext.actions.enrichDataBindings(componentProps)
+  const children = definition._children
+
+  // Set style context to be consumed by component
+  setContext("style", { ...definition._styles, id })
   $: console.log("Rendering: " + componentName)
 </script>
 
 {#if constructor}
-  <svelte:component this={constructor} {...componentProps} {styles}>
+  <svelte:component this={constructor} {...enrichedProps}>
     {#if children && children.length}
       {#each children as child}
         <svelte:self definition={child} />
diff --git a/packages/client/src/components/DataProvider.svelte b/packages/client/src/components/DataProvider.svelte
new file mode 100644
index 0000000000..30c1b4aec6
--- /dev/null
+++ b/packages/client/src/components/DataProvider.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { onMount, getContext, setContext } from "svelte"
+  import { createDataContextStore } from "../store"
+
+  export let row
+
+  // Get current contexts
+  const dataContext = getContext("data")
+
+  // Clone current context to this context
+  const newDataContext = createDataContextStore($dataContext)
+  setContext("data", newDataContext)
+
+  // Add additional layer to context
+  let loaded = false
+  onMount(() => {
+    newDataContext.actions.addContext(row)
+    loaded = true
+  })
+</script>
+
+{#if loaded}
+  <slot />
+{/if}
diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index f61bff7c10..693ec2dd28 100644
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@@ -1,11 +1,12 @@
 <script>
-  import { onMount } from "svelte"
+  import { getContext } from "svelte"
   import Router from "svelte-spa-router"
   import { routeStore, screenStore } from "../store"
   import Screen from "./Screen.svelte"
-  import { styleable } from "../utils"
 
-  export let styles
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
+
   $: routerConfig = getRouterConfig($routeStore.routes)
 
   const getRouterConfig = routes => {
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index a318eed393..cad3e20bd5 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -2,6 +2,7 @@ import * as API from "./api"
 import { authStore, routeStore, screenStore } from "./store"
 import { styleable, getAppId } from "./utils"
 import { link as linkable } from "svelte-spa-router"
+import DataProvider from "./components/DataProvider.svelte"
 
 export default {
   API,
@@ -11,4 +12,5 @@ export default {
   styleable,
   linkable,
   getAppId,
+  DataProvider,
 }
diff --git a/packages/client/src/store/auth.js b/packages/client/src/store/auth.js
index 5734534ba7..54ee35e8da 100644
--- a/packages/client/src/store/auth.js
+++ b/packages/client/src/store/auth.js
@@ -1,7 +1,6 @@
 import * as API from "../api"
 import { getAppId } from "../utils"
 import { writable } from "svelte/store"
-import { loc } from "svelte-spa-router"
 
 const createAuthStore = () => {
   const store = writable("")
diff --git a/packages/client/src/store/dataContext.js b/packages/client/src/store/dataContext.js
new file mode 100644
index 0000000000..959731d207
--- /dev/null
+++ b/packages/client/src/store/dataContext.js
@@ -0,0 +1,43 @@
+import { writable, get } from "svelte/store"
+import { enrichDataBinding } from "../utils"
+import { cloneDeep } from "lodash/fp"
+
+const initialValue = {
+  parent: null,
+  data: null,
+}
+
+export const createDataContextStore = existingContext => {
+  const initial = existingContext ? cloneDeep(existingContext) : initialValue
+  const store = writable(initial)
+
+  // Adds a context layer to the data context tree
+  const addContext = row => {
+    store.update(state => {
+      if (state.data) {
+        state.parent = {
+          parent: state.parent,
+          data: state.data,
+        }
+      }
+      state.data = row
+      return state
+    })
+  }
+
+  // Enriches props by running mustache and filling in any data bindings present
+  // in the prop values
+  const enrichDataBindings = props => {
+    const state = get(store)
+    let enrichedProps = {}
+    Object.entries(props).forEach(([key, value]) => {
+      enrichedProps[key] = enrichDataBinding(value, state)
+    })
+    return enrichedProps
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: { addContext, enrichDataBindings },
+  }
+}
diff --git a/packages/client/src/store/index.js b/packages/client/src/store/index.js
index da64d45dc6..a0683ba47e 100644
--- a/packages/client/src/store/index.js
+++ b/packages/client/src/store/index.js
@@ -1,3 +1,4 @@
 export { authStore } from "./auth"
 export { routeStore } from "./routes"
 export { screenStore } from "./screens"
+export { createDataContextStore } from "./dataContext"
diff --git a/packages/client/src/utils/enrichDataBinding.js b/packages/client/src/utils/enrichDataBinding.js
index 0c4fd16cf3..9f5f98502a 100644
--- a/packages/client/src/utils/enrichDataBinding.js
+++ b/packages/client/src/utils/enrichDataBinding.js
@@ -19,7 +19,7 @@ const looksLikeMustache = /{{.*}}/
 /**
  * Enriches a given input with a row from the database.
  */
-export default (input, context) => {
+export const enrichDataBinding = (input, context) => {
   // Only accept string inputs
   if (!input || typeof input !== "string") {
     return input
@@ -28,6 +28,8 @@ export default (input, context) => {
   if (!looksLikeMustache.test(input)) {
     return input
   }
+  console.log("====================================")
   console.log(input)
+  console.log(context)
   return mustache.render(input, context)
 }
diff --git a/packages/client/src/utils/index.js b/packages/client/src/utils/index.js
index 63da748cf6..2ccba5dcde 100644
--- a/packages/client/src/utils/index.js
+++ b/packages/client/src/utils/index.js
@@ -1,2 +1,3 @@
 export { getAppId } from "./getAppId"
 export { styleable } from "./styleable"
+export { enrichDataBinding } from "./enrichDataBinding"
diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index 2ff26ab591..e23adf6c15 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@@ -1,12 +1,12 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("app")
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
 
   export let className = "default"
   export let disabled = false
   export let text
-  export let styles
 </script>
 
 <button class="default" disabled={disabled || false} use:styleable={styles}>
diff --git a/packages/standard-components/src/Card.svelte b/packages/standard-components/src/Card.svelte
index b6f0d3ae44..cce45c0bf0 100644
--- a/packages/standard-components/src/Card.svelte
+++ b/packages/standard-components/src/Card.svelte
@@ -2,7 +2,8 @@
   import { getContext } from "svelte"
   import { cssVars } from "./helpers"
 
-  const { styleable } = getContext("app")
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
 
   export const className = ""
   export let imageUrl = ""
@@ -14,7 +15,6 @@
   export let linkHoverColor
   export let imageHeight
   export let cardWidth
-  export let styles
 
   $: cssVariables = {
     color,
diff --git a/packages/standard-components/src/CardHorizontal.svelte b/packages/standard-components/src/CardHorizontal.svelte
index df10a243cd..e681f08823 100644
--- a/packages/standard-components/src/CardHorizontal.svelte
+++ b/packages/standard-components/src/CardHorizontal.svelte
@@ -2,7 +2,8 @@
   import { getContext } from "svelte"
   import { cssVars } from "./helpers"
 
-  const { styleable } = getContext("app")
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
 
   export const className = ""
   export let imageUrl = ""
@@ -16,7 +17,6 @@
   export let cardWidth
   export let imageWidth
   export let imageHeight
-  export let styles
 
   $: cssVariables = {
     color,
diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte
index 77cfade60e..2a9f469701 100644
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@@ -1,11 +1,11 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("app")
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
 
   export let className = ""
   export let type = "div"
-  export let styles
 </script>
 
 {#if type === 'div'}
diff --git a/packages/standard-components/src/DataForm.svelte b/packages/standard-components/src/DataForm.svelte
index 9a370e18f8..6307bc6237 100644
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@@ -1,7 +1,5 @@
 <script>
   import Form from "./Form.svelte"
-
-  export let styles
 </script>
 
-<Form {styles} wide={false} />
+<Form wide={false} />
diff --git a/packages/standard-components/src/DataFormWide.svelte b/packages/standard-components/src/DataFormWide.svelte
index 0df31ea9ff..4edcf839b1 100644
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@@ -1,7 +1,5 @@
 <script>
   import Form from "./Form.svelte"
-
-  export let styles
 </script>
 
-<Form {styles} wide />
+<Form wide />
diff --git a/packages/standard-components/src/DataProvider.svelte b/packages/standard-components/src/DataProvider.svelte
deleted file mode 100644
index 44bd39e6dc..0000000000
--- a/packages/standard-components/src/DataProvider.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-  import { setContext, onMount } from "svelte"
-  import { createDataProviderStore } from "./stores/dataProvider"
-
-  const dataProviderStore = createDataProviderStore()
-  setContext("data", dataProviderStore)
-
-  export let row
-  let loaded = false
-
-  onMount(async () => {
-    await dataProviderStore.actions.setRow(row)
-    loaded = true
-  })
-</script>
-
-{#if loaded}
-  <slot />
-{/if}
diff --git a/packages/standard-components/src/DatePicker.svelte b/packages/standard-components/src/DatePicker.svelte
index 86706f9a52..7d14649847 100644
--- a/packages/standard-components/src/DatePicker.svelte
+++ b/packages/standard-components/src/DatePicker.svelte
@@ -2,11 +2,11 @@
   import { DatePicker } from "@budibase/bbui"
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("app")
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
 
   export let placeholder
   export let value
-  export let styles
 
   function handleChange(event) {
     const [fullDate] = event.detail
diff --git a/packages/standard-components/src/Embed.svelte b/packages/standard-components/src/Embed.svelte
index 18e1d1f76c..998e902289 100644
--- a/packages/standard-components/src/Embed.svelte
+++ b/packages/standard-components/src/Embed.svelte
@@ -1,10 +1,10 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("app")
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
 
   export let embed
-  export let styles
 </script>
 
 <div use:styleable={styles}>
diff --git a/packages/standard-components/src/Form.svelte b/packages/standard-components/src/Form.svelte
index 6188e7bcb7..2515496be5 100644
--- a/packages/standard-components/src/Form.svelte
+++ b/packages/standard-components/src/Form.svelte
@@ -5,15 +5,26 @@
   import LinkedRowSelector from "./LinkedRowSelector.svelte"
   import { capitalise } from "./helpers"
 
-  const { styleable, screenStore } = getContext("app")
-  const dataProviderStore = getContext("data")
+  const { styleable, screenStore, API } = getContext("sdk")
+  const dataContextStore = getContext("data")
+  const styles = getContext("style")
 
   export let wide = false
-  export let styles
 
-  $: row = $dataProviderStore?.row
-  $: schema = $dataProviderStore?.table && $dataProviderStore.table.schema
-  $: fields = schema ? Object.keys(schema) : []
+  let row
+  let schema
+  let fields = []
+
+  $: getContextDetails($dataContextStore)
+
+  const getContextDetails = async dataContext => {
+    row = dataContext?.data
+    if (row) {
+      const tableDefinition = await API.fetchTableDefinition(row.tableId)
+      schema = tableDefinition.schema
+      fields = Object.keys(schema)
+    }
+  }
 </script>
 
 <div class="form-content" use:styleable={styles}>
diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index 7d97a130d2..411049935c 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@@ -1,12 +1,12 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("app")
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
 
   export let className = ""
   export let type
   export let text = ""
-  export let styles
 </script>
 
 {#if type === 'h1'}
diff --git a/packages/standard-components/src/Icon.svelte b/packages/standard-components/src/Icon.svelte
index fa1b687923..d2795570d5 100644
--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@@ -2,12 +2,12 @@
   import "@fortawesome/fontawesome-free/js/all.js"
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("app")
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
 
   export let icon = ""
   export let size = "fa-lg"
   export let color = "#000"
-  export let styles
 </script>
 
 <i
diff --git a/packages/standard-components/src/Image.svelte b/packages/standard-components/src/Image.svelte
index 1e12165640..ae7e6f326c 100644
--- a/packages/standard-components/src/Image.svelte
+++ b/packages/standard-components/src/Image.svelte
@@ -1,14 +1,14 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("app")
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
 
   export let className = ""
   export let url = ""
   export let description = ""
   export let height
   export let width
-  export let styles
 </script>
 
 <img
diff --git a/packages/standard-components/src/Input.svelte b/packages/standard-components/src/Input.svelte
index d57cde94bb..041878fc62 100644
--- a/packages/standard-components/src/Input.svelte
+++ b/packages/standard-components/src/Input.svelte
@@ -1,12 +1,12 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("app")
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
 
   export let value = ""
   export let className = ""
   export let type = "text"
-  export let styles
 
   const onchange = ev => {
     value = ev.target.value
diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte
index ec18e21c77..0db21bcd4a 100644
--- a/packages/standard-components/src/Link.svelte
+++ b/packages/standard-components/src/Link.svelte
@@ -1,12 +1,12 @@
 <script>
   import { getContext } from "svelte"
 
-  const { linkable, styleable } = getContext("app")
+  const { linkable, styleable } = getContext("sdk")
+  const styles = getContext("style")
 
   export let url = ""
   export let text = ""
   export let openInNewTab = false
-  export let styles
 
   $: target = openInNewTab ? "_blank" : "_self"
 </script>
diff --git a/packages/standard-components/src/LinkedRowSelector.svelte b/packages/standard-components/src/LinkedRowSelector.svelte
index 9b0089ea5e..a2956d6b93 100644
--- a/packages/standard-components/src/LinkedRowSelector.svelte
+++ b/packages/standard-components/src/LinkedRowSelector.svelte
@@ -3,7 +3,7 @@
   import { capitalise } from "./helpers"
   import { getContext } from "svelte"
 
-  const { API } = getContext("app")
+  const { API } = getContext("sdk")
 
   export let schema = {}
   export let linkedRows = []
diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index 343915ccfb..89faa7ddb3 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -1,19 +1,18 @@
 <script>
   import { getContext, onMount } from "svelte"
   import { isEmpty } from "lodash/fp"
-  import DataProvider from "./DataProvider.svelte"
 
-  const { API, styleable } = getContext("app")
-  const dataContext = getContext("data")
+  const { API, styleable, DataProvider } = getContext("sdk")
+  const dataContextStore = getContext("data")
+  const styles = getContext("style")
 
   export let datasource = []
-  export let styles
 
   let rows = []
 
   onMount(async () => {
     if (!isEmpty(datasource)) {
-      rows = await API.fetchDatasource(datasource, $dataContext)
+      rows = await API.fetchDatasource(datasource, $dataContextStore)
     }
   })
 </script>
diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte
index e4cef3b761..71c392e98a 100644
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@@ -1,14 +1,14 @@
 <script>
   import { getContext } from "svelte"
 
-  const { authStore, styleable } = getContext("app")
+  const { authStore, styleable } = getContext("sdk")
+  const styles = getContext("style")
 
   export let buttonText = "Log In"
   export let logo = ""
   export let title = ""
   export let buttonClass = ""
   export let inputClass = ""
-  export let styles
 
   let username = ""
   let password = ""
diff --git a/packages/standard-components/src/Navigation.svelte b/packages/standard-components/src/Navigation.svelte
index 262517ca26..fb3a86ee98 100644
--- a/packages/standard-components/src/Navigation.svelte
+++ b/packages/standard-components/src/Navigation.svelte
@@ -1,11 +1,11 @@
 <script>
   import { getContext } from "svelte"
 
-  const { authStore, linkable, styleable } = getContext("app")
+  const { authStore, linkable, styleable } = getContext("sdk")
+  const styles = getContext("style")
 
   export let logoUrl
   export let title
-  export let styles
 
   const logOut = () => {
     authStore.actions.logOut()
diff --git a/packages/standard-components/src/NewRow.svelte b/packages/standard-components/src/NewRow.svelte
index 7456810aa0..8b9c57892d 100644
--- a/packages/standard-components/src/NewRow.svelte
+++ b/packages/standard-components/src/NewRow.svelte
@@ -1,5 +1,7 @@
 <script>
-  import DataProvider from "./DataProvider.svelte"
+  import { getContext } from "svelte"
+
+  const { DataProvider } = getContext("sdk")
 
   export let table
 </script>
diff --git a/packages/standard-components/src/RichText.svelte b/packages/standard-components/src/RichText.svelte
index c6a7cdd199..9b1e5f9fb6 100644
--- a/packages/standard-components/src/RichText.svelte
+++ b/packages/standard-components/src/RichText.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { RichText } from "@budibase/bbui"
 
-  const { styleable } = getContext("app")
+  const { styleable } = getContext("sdk")
 
   export let value = ""
 
diff --git a/packages/standard-components/src/RowDetail.svelte b/packages/standard-components/src/RowDetail.svelte
index 4299f2039e..036fa6ce5b 100644
--- a/packages/standard-components/src/RowDetail.svelte
+++ b/packages/standard-components/src/RowDetail.svelte
@@ -1,8 +1,7 @@
 <script>
   import { onMount, getContext } from "svelte"
-  import DataProvider from "./DataProvider.svelte"
 
-  const { API, screenStore, routeStore } = getContext("app")
+  const { API, screenStore, routeStore, DataProvider } = getContext("sdk")
 
   export let table
 
diff --git a/packages/standard-components/src/StackedList.svelte b/packages/standard-components/src/StackedList.svelte
index 45874bc5ef..6d8a2e4bc6 100644
--- a/packages/standard-components/src/StackedList.svelte
+++ b/packages/standard-components/src/StackedList.svelte
@@ -1,9 +1,9 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("app")
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
 
-  export let styles
   export let imageUrl = ""
   export let heading = ""
   export let text1 = ""
diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte
index 9207db3a2e..7594396079 100644
--- a/packages/standard-components/src/Text.svelte
+++ b/packages/standard-components/src/Text.svelte
@@ -1,12 +1,12 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("app")
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
 
   export let text = ""
   export let className = ""
   export let type = ""
-  export let styles
 
   const isTag = tag => type === tag
 </script>
diff --git a/packages/standard-components/src/attachments/Dropzone.svelte b/packages/standard-components/src/attachments/Dropzone.svelte
index 04fb1fcfdf..8ac3486354 100644
--- a/packages/standard-components/src/attachments/Dropzone.svelte
+++ b/packages/standard-components/src/attachments/Dropzone.svelte
@@ -2,7 +2,7 @@
   import { Dropzone } from "@budibase/bbui"
   import { getContext } from "svelte"
 
-  const { API } = getContext("app")
+  const { API } = getContext("sdk")
   const BYTES_IN_MB = 1000000
 
   export let files = []
diff --git a/packages/standard-components/src/charts/ApexChart.svelte b/packages/standard-components/src/charts/ApexChart.svelte
index d1886325c6..5a403f1263 100644
--- a/packages/standard-components/src/charts/ApexChart.svelte
+++ b/packages/standard-components/src/charts/ApexChart.svelte
@@ -2,10 +2,10 @@
   import { getContext } from "svelte"
   import { chart } from "svelte-apexcharts"
 
-  const { styleable } = getContext("app")
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
 
   export let options
-  export let styles
 </script>
 
 {#if options}
diff --git a/packages/standard-components/src/charts/BarChart.svelte b/packages/standard-components/src/charts/BarChart.svelte
index e1005492cc..91cd4c4dc9 100644
--- a/packages/standard-components/src/charts/BarChart.svelte
+++ b/packages/standard-components/src/charts/BarChart.svelte
@@ -4,7 +4,7 @@
   import ApexChart from "./ApexChart.svelte"
   import { isEmpty } from "lodash/fp"
 
-  const { API } = getContext("app")
+  const { API } = getContext("sdk")
   const dataContext = getContext("data")
 
   export let title
@@ -22,7 +22,6 @@
   export let stacked
   export let yAxisUnits
   export let palette
-  export let styles
 
   let options
 
diff --git a/packages/standard-components/src/charts/CandleStickChart.svelte b/packages/standard-components/src/charts/CandleStickChart.svelte
index 5de1450d95..4659a6a3b7 100644
--- a/packages/standard-components/src/charts/CandleStickChart.svelte
+++ b/packages/standard-components/src/charts/CandleStickChart.svelte
@@ -4,7 +4,7 @@
   import ApexChart from "./ApexChart.svelte"
   import { isEmpty } from "lodash/fp"
 
-  const { API } = getContext("app")
+  const { API } = getContext("sdk")
   const dataContext = getContext("data")
 
   export let title
@@ -20,7 +20,6 @@
   export let width
   export let animate
   export let yAxisUnits
-  export let styles
 
   let options
 
diff --git a/packages/standard-components/src/charts/LineChart.svelte b/packages/standard-components/src/charts/LineChart.svelte
index 4e91444b24..c966686959 100644
--- a/packages/standard-components/src/charts/LineChart.svelte
+++ b/packages/standard-components/src/charts/LineChart.svelte
@@ -4,7 +4,7 @@
   import ApexChart from "./ApexChart.svelte"
   import { isEmpty } from "lodash/fp"
 
-  const { API } = getContext("app")
+  const { API } = getContext("sdk")
   const dataContext = getContext("data")
 
   // Common props
@@ -23,7 +23,6 @@
   export let legend
   export let yAxisUnits
   export let palette
-  export let styles
 
   // Area specific props
   export let area
diff --git a/packages/standard-components/src/charts/PieChart.svelte b/packages/standard-components/src/charts/PieChart.svelte
index 01d6cf5ef1..a8ee1ca6df 100644
--- a/packages/standard-components/src/charts/PieChart.svelte
+++ b/packages/standard-components/src/charts/PieChart.svelte
@@ -4,7 +4,7 @@
   import ApexChart from "./ApexChart.svelte"
   import { isEmpty } from "lodash/fp"
 
-  const { API } = getContext("app")
+  const { API } = getContext("sdk")
   const dataContext = getContext("data")
 
   export let title
@@ -19,7 +19,6 @@
   export let legend
   export let donut
   export let palette
-  export let styles
 
   let options
 
diff --git a/packages/standard-components/src/grid/Component.svelte b/packages/standard-components/src/grid/Component.svelte
index 23beef81dd..9e7ebeef61 100644
--- a/packages/standard-components/src/grid/Component.svelte
+++ b/packages/standard-components/src/grid/Component.svelte
@@ -14,8 +14,9 @@
 
   // These maps need to be set up to handle whatever types that are used in the tables.
   const setters = new Map([["number", number]])
-  const SDK = getContext("app")
+  const SDK = getContext("sdk")
   const dataContext = getContext("data")
+  const styles = getContext("style")
   const { API, styleable } = SDK
 
   export let datasource = {}
@@ -24,7 +25,6 @@
   export let height = 500
   export let pagination
   export let detailUrl
-  export let styles
 
   // Add setting height as css var to allow grid to use correct height
   styles.normal["--grid-height"] = `${height}px`
diff --git a/packages/standard-components/src/grid/CreateRow/Modal.svelte b/packages/standard-components/src/grid/CreateRow/Modal.svelte
index fe1d502400..9c7de2b0ff 100644
--- a/packages/standard-components/src/grid/CreateRow/Modal.svelte
+++ b/packages/standard-components/src/grid/CreateRow/Modal.svelte
@@ -5,7 +5,7 @@
   import debounce from "lodash.debounce"
 
   const dispatch = createEventDispatcher()
-  const { fetchRow, saveRow, routeStore } = getContext("app")
+  const { fetchRow, saveRow, routeStore } = getContext("sdk")
 
   const DEFAULTS_FOR_TYPE = {
     string: "",
diff --git a/packages/standard-components/src/stores/dataProvider.js b/packages/standard-components/src/stores/dataProvider.js
deleted file mode 100644
index 9bbb95ed7a..0000000000
--- a/packages/standard-components/src/stores/dataProvider.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { getContext } from "svelte"
-import { writable } from "svelte/store"
-
-export const createDataProviderStore = () => {
-  const { API } = getContext("app")
-
-  const store = writable({
-    row: {},
-    table: null,
-  })
-  const setRow = async row => {
-    let table
-    if (row && row.tableId) {
-      table = await API.fetchTableDefinition(row.tableId)
-    }
-    store.update(state => {
-      state.row = row
-      state.table = table
-      return state
-    })
-  }
-  return {
-    subscribe: store.subscribe,
-    actions: { setRow },
-  }
-}