Add component data binding and simplify context sharing

packages/client/src/components/ClientApp.svelte

@@ -2,11 +2,11 @@
   import { setContext, onMount } from "svelte"
   import Component from "./Component.svelte"
   import SDK from "../sdk"
-  import { routeStore, screenStore, createDataContextStore } from "../store"
+  import { routeStore, screenStore, createDataStore } from "../store"
 
   // Provide contexts
   setContext("sdk", SDK)
-  setContext("data", createDataContextStore())
+  setContext("data", createDataStore())
 
   let loaded = false
 

packages/client/src/components/Component.svelte

@@ -3,6 +3,8 @@
   import { writable } from "svelte/store"
   import * as ComponentLibrary from "@budibase/standard-components"
   import Router from "./Router.svelte"
+  import { enrichDataBinding } from "../utils"
+  import { bindingStore } from "../store"
 
   export let definition = {}
 
@@ -23,6 +25,19 @@
     return props
   }
 
+  // Enriches data bindings to real values based on data context
+  const enrichDataBindings = (data, bindings, props) => {
+    const state = {
+      ...data,
+      ...bindings,
+    }
+    let enrichedProps = {}
+    Object.entries(props).forEach(([key, value]) => {
+      enrichedProps[key] = enrichDataBinding(value, state)
+    })
+    return enrichedProps
+  }
+
   // Gets the component constructor for the specified component
   const getComponentConstructor = name => {
     return name === "screenslot" ? Router : ComponentLibrary[componentName]
@@ -32,14 +47,25 @@
   $: componentName = extractComponentName(definition._component)
   $: constructor = getComponentConstructor(componentName)
   $: componentProps = extractValidProps(definition)
-  $: dataContext = getContext("data")
-  $: enrichedProps = dataContext.actions.enrichDataBindings(componentProps)
   $: children = definition._children
+  $: id = definition._id
+  $: dataStore = getContext("data")
+  $: enrichedProps = enrichDataBindings(
+    $dataStore,
+    $bindingStore,
+    componentProps
+  )
 
-  // Set observable style context
-  const styleStore = writable({})
-  setContext("style", styleStore)
-  $: styleStore.set({ ...definition._styles, id: definition._id })
+  // Update component context
+  // ID is duplicated inside style so that the "styleable" helper can set
+  // an ID data tag for unique reference to components
+  const componentStore = writable({})
+  setContext("component", componentStore)
+  $: componentStore.set({
+    id,
+    styles: { ...definition._styles, id },
+    dataContext: $dataStore.data,
+  })
 </script>
 
 {#if constructor}

packages/client/src/components/DataProvider.svelte

@@ -1,19 +1,19 @@
 <script>
   import { getContext, setContext } from "svelte"
-  import { createDataContextStore } from "../store"
+  import { createDataStore } from "../store"
 
   export let row
 
   // Get current contexts
-  const dataContext = getContext("data")
-  const styles = getContext("style")
+  const data = getContext("data")
+  const component = getContext("component")
 
   // Clone current context to this context
-  const newDataContext = createDataContextStore($dataContext)
-  setContext("data", newDataContext)
+  const newData = createDataStore($data)
+  setContext("data", newData)
 
   // Add additional layer to context
-  $: newDataContext.actions.addContext(row, $styles.id)
+  $: newData.actions.addContext(row, $component.id)
 </script>
 
 <slot />

packages/client/src/components/Router.svelte

@@ -5,7 +5,7 @@
   import Screen from "./Screen.svelte"
 
   const { styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   $: routerConfig = getRouterConfig($routeStore.routes)
 
@@ -26,7 +26,7 @@
 </script>
 
 {#if routerConfig}
-  <div use:styleable={$styles}>
+  <div use:styleable={$component.styles}>
     <Router on:routeLoading={onRouteLoading} routes={routerConfig} />
   </div>
 {/if}

packages/client/src/sdk.js

@@ -1,5 +1,5 @@
 import * as API from "./api"
-import { authStore, routeStore, screenStore } from "./store"
+import { authStore, routeStore, screenStore, bindingStore } from "./store"
 import { styleable, getAppId } from "./utils"
 import { link as linkable } from "svelte-spa-router"
 import DataProvider from "./components/DataProvider.svelte"
@@ -13,4 +13,5 @@ export default {
   linkable,
   getAppId,
   DataProvider,
+  setBindableValue: bindingStore.actions.setBindableValue,
 }

packages/client/src/store/auth.js

@@ -5,9 +5,6 @@ import { writable } from "svelte/store"
 const createAuthStore = () => {
   const store = writable("")
 
-  /**
-   * Logs a user in.
-   */
   const logIn = async ({ username, password }) => {
     const user = await API.logIn({ username, password })
     if (!user.error) {
@@ -15,10 +12,6 @@ const createAuthStore = () => {
       location.reload()
     }
   }
-
-  /**
-   * Logs a user out.
-   */
   const logOut = () => {
     store.set("")
     const appId = getAppId()

packages/client/src/store/binding.js

@@ -0,0 +1,21 @@
+import { writable } from "svelte/store"
+
+const createBindingStore = () => {
+  const store = writable({})
+
+  const setBindableValue = (value, componentId) => {
+    store.update(state => {
+      if (componentId) {
+        state[componentId] = value
+      }
+      return state
+    })
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: { setBindableValue },
+  }
+}
+
+export const bindingStore = createBindingStore()

packages/client/src/store/data.js

@@ -0,0 +1,27 @@
+import { writable } from "svelte/store"
+import { cloneDeep } from "lodash/fp"
+
+const initialValue = {
+  data: null,
+}
+
+export const createDataStore = existingContext => {
+  const initial = existingContext ? cloneDeep(existingContext) : initialValue
+  const store = writable(initial)
+
+  // Adds a context layer to the data context tree
+  const addContext = (row, componentId) => {
+    store.update(state => {
+      if (componentId) {
+        state[componentId] = row
+        state.data = row
+      }
+      return state
+    })
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: { addContext },
+  }
+}

packages/client/src/store/dataContext.js

@@ -1,39 +0,0 @@
-import { writable, get } from "svelte/store"
-import { enrichDataBinding } from "../utils"
-import { cloneDeep } from "lodash/fp"
-
-const initialValue = {
-  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, componentId) => {
-    store.update(state => {
-      if (row && componentId) {
-        state[componentId] = row
-        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 },
-  }
-}

packages/client/src/store/index.js

@@ -1,5 +1,8 @@
 export { authStore } from "./auth"
 export { routeStore } from "./routes"
 export { screenStore } from "./screens"
-export { createDataContextStore } from "./dataContext"
 export { builderStore } from "./builder"
+export { bindingStore } from "./binding"
+
+// Data stores are layered and duplicated, so it is not a singleton
+export { createDataStore } from "./data"

packages/standard-components/src/Button.svelte

@@ -2,14 +2,17 @@
   import { getContext } from "svelte"
 
   const { styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export let className = "default"
   export let disabled = false
   export let text
 </script>
 
-<button class="default" disabled={disabled || false} use:styleable={$styles}>
+<button
+  class="default"
+  disabled={disabled || false}
+  use:styleable={$component.styles}>
   {text}
 </button>
 

packages/standard-components/src/Card.svelte

@@ -3,7 +3,7 @@
   import { cssVars } from "./helpers"
 
   const { styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export const className = ""
   export let imageUrl = ""
@@ -26,7 +26,10 @@
   $: showImage = !!imageUrl
 </script>
 
-<div use:cssVars={cssVariables} class="container" use:styleable={$styles}>
+<div
+  use:cssVars={cssVariables}
+  class="container"
+  use:styleable={$component.styles}>
   {#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
   <div class="content">
     <h2 class="heading">{heading}</h2>

packages/standard-components/src/CardHorizontal.svelte

@@ -3,7 +3,7 @@
   import { cssVars } from "./helpers"
 
   const { styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export const className = ""
   export let imageUrl = ""
@@ -29,7 +29,10 @@
   $: showImage = !!imageUrl
 </script>
 
-<div use:cssVars={cssVariables} class="container" use:styleable={$styles}>
+<div
+  use:cssVars={cssVariables}
+  class="container"
+  use:styleable={$component.styles}>
   {#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
   <div class="content">
     <main>

packages/standard-components/src/Container.svelte

@@ -2,62 +2,62 @@
   import { getContext } from "svelte"
 
   const { styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export let className = ""
   export let type = "div"
 </script>
 
 {#if type === 'div'}
-  <div use:styleable={$styles}>
+  <div use:styleable={$component.styles}>
     <slot />
   </div>
 {:else if type === 'header'}
-  <header use:styleable={$styles}>
+  <header use:styleable={$component.styles}>
     <slot />
   </header>
 {:else if type === 'main'}
-  <main use:styleable={$styles}>
+  <main use:styleable={$component.styles}>
     <slot />
   </main>
 {:else if type === 'footer'}
-  <footer use:styleable={$styles}>
+  <footer use:styleable={$component.styles}>
     <slot />
   </footer>
 {:else if type === 'aside'}
-  <aside use:styleable={$styles}>
+  <aside use:styleable={$component.styles}>
     <slot />
   </aside>
 {:else if type === 'summary'}
-  <summary use:styleable={$styles}>
+  <summary use:styleable={$component.styles}>
     <slot />
   </summary>
 {:else if type === 'details'}
-  <details use:styleable={$styles}>
+  <details use:styleable={$component.styles}>
     <slot />
   </details>
 {:else if type === 'article'}
-  <article use:styleable={$styles}>
+  <article use:styleable={$component.styles}>
     <slot />
   </article>
 {:else if type === 'nav'}
-  <nav use:styleable={$styles}>
+  <nav use:styleable={$component.styles}>
     <slot />
   </nav>
 {:else if type === 'mark'}
-  <mark use:styleable={$styles}>
+  <mark use:styleable={$component.styles}>
     <slot />
   </mark>
 {:else if type === 'figure'}
-  <figure use:styleable={$styles}>
+  <figure use:styleable={$component.styles}>
     <slot />
   </figure>
 {:else if type === 'figcaption'}
-  <figcaption use:styleable={$styles}>
+  <figcaption use:styleable={$component.styles}>
     <slot />
   </figcaption>
 {:else if type === 'paragraph'}
-  <p use:styleable={$styles}>
+  <p use:styleable={$component.styles}>
     <slot />
   </p>
 {/if}

packages/standard-components/src/DatePicker.svelte

@@ -3,7 +3,7 @@
   import { getContext } from "svelte"
 
   const { styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export let placeholder
   export let value
@@ -14,6 +14,6 @@
   }
 </script>
 
-<div use:styleable={$styles}>
+<div use:styleable={$component.styles}>
   <DatePicker {placeholder} on:change={handleChange} {value} />
 </div>

packages/standard-components/src/Embed.svelte

@@ -2,12 +2,12 @@
   import { getContext } from "svelte"
 
   const { styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export let embed
 </script>
 
-<div use:styleable={$styles}>
+<div use:styleable={$component.styles}>
   {@html embed}
 </div>
 

packages/standard-components/src/Form.svelte

@@ -7,7 +7,7 @@
 
   const { styleable, screenStore, API } = getContext("sdk")
   const dataContextStore = getContext("data")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export let wide = false
 
@@ -27,7 +27,7 @@
   }
 </script>
 
-<div class="form-content" use:styleable={$styles}>
+<div class="form-content" use:styleable={$component.styles}>
   <!--  <ErrorsBox errors={$store.saveRowErrors || {}} />-->
   {#each fields as field}
     <div class="form-field" class:wide>

packages/standard-components/src/Heading.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
 
   const { styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export let className = ""
   export let type
@@ -10,15 +10,15 @@
 </script>
 
 {#if type === 'h1'}
-  <h1 class={className} use:styleable={$styles}>{text}</h1>
+  <h1 class={className} use:styleable={$component.styles}>{text}</h1>
 {:else if type === 'h2'}
-  <h2 class={className} use:styleable={$styles}>{text}</h2>
+  <h2 class={className} use:styleable={$component.styles}>{text}</h2>
 {:else if type === 'h3'}
-  <h3 class={className} use:styleable={$styles}>{text}</h3>
+  <h3 class={className} use:styleable={$component.styles}>{text}</h3>
 {:else if type === 'h4'}
-  <h4 class={className} use:styleable={$styles}>{text}</h4>
+  <h4 class={className} use:styleable={$component.styles}>{text}</h4>
 {:else if type === 'h5'}
-  <h5 class={className} use:styleable={$styles}>{text}</h5>
+  <h5 class={className} use:styleable={$component.styles}>{text}</h5>
 {:else if type === 'h6'}
-  <h6 class={className} use:styleable={$styles}>{text}</h6>
+  <h6 class={className} use:styleable={$component.styles}>{text}</h6>
 {/if}

packages/standard-components/src/Icon.svelte

@@ -3,7 +3,7 @@
   import { getContext } from "svelte"
 
   const { styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export let icon = ""
   export let size = "fa-lg"
@@ -13,4 +13,4 @@
 <i
   style={`color: ${color};`}
   class={`${icon} ${size}`}
-  use:styleable={$styles} />
+  use:styleable={$component.styles} />

packages/standard-components/src/Image.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
 
   const { styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export let className = ""
   export let url = ""
@@ -17,4 +17,4 @@
   class={className}
   src={url}
   alt={description}
-  use:styleable={$styles} />
+  use:styleable={$component.styles} />

packages/standard-components/src/Input.svelte

@@ -1,21 +1,12 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const { styleable, setBindableValue } = getContext("sdk")
+  const component = getContext("component")
 
-  export let value = ""
-  export let className = ""
-  export let type = "text"
-
-  const onchange = ev => {
-    value = ev.target.value
-  }
+  // Keep bindable value up to date
+  let value
+  $: setBindableValue(value, $component.id)
 </script>
 
-<input
-  class={className}
-  {type}
-  {value}
-  on:change={onchange}
-  use:styleable={$styles} />
+<input bind:value on:change={onchange} use:styleable={$component.styles} />

packages/standard-components/src/Link.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
 
   const { linkable, styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export let url = ""
   export let text = ""
@@ -11,7 +11,7 @@
   $: target = openInNewTab ? "_blank" : "_self"
 </script>
 
-<a href={url} use:linkable {target} use:styleable={$styles}>
+<a href={url} use:linkable {target} use:styleable={$component.styles}>
   {text}
   <slot />
 </a>

packages/standard-components/src/List.svelte

@@ -4,7 +4,7 @@
 
   const { API, styleable, DataProvider } = getContext("sdk")
   const dataContextStore = getContext("data")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export let datasource = []
 
@@ -17,7 +17,7 @@
   })
 </script>
 
-<div use:styleable={$styles}>
+<div use:styleable={$component.styles}>
   {#each rows as row}
     <DataProvider {row}>
       <slot />

packages/standard-components/src/Login.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
 
   const { authStore, styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export let buttonText = "Log In"
   export let logo = ""
@@ -29,7 +29,7 @@
   }
 </script>
 
-<div class="root" use:styleable={$styles}>
+<div class="root" use:styleable={$component.styles}>
   <div class="content">
     {#if logo}
       <div class="logo-container"><img src={logo} alt="logo" /></div>

packages/standard-components/src/Navigation.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
 
   const { authStore, linkable, styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export let logoUrl
   export let title
@@ -12,7 +12,7 @@
   }
 </script>
 
-<div class="nav" use:styleable={$styles}>
+<div class="nav" use:styleable={$component.styles}>
   <div class="nav__top">
     <a href="/" use:linkable>
       {#if logoUrl}

packages/standard-components/src/RichText.svelte

@@ -23,6 +23,6 @@
   }
 </script>
 
-<div use:styleable={$styles}>
+<div use:styleable={$component.styles}>
   <RichText bind:content={value} {options} />
 </div>

packages/standard-components/src/ScreenSlotPlaceholder.svelte

@@ -1,11 +1,11 @@
 <script>
   import { getContext } from "svelte"
 
-  const styles = getContext("style")
+  const component = getContext("component")
   const { styleable } = getContext("sdk")
 </script>
 
-<div use:styleable={$styles}>
+<div use:styleable={$component.styles}>
   <h1>Screen Slot</h1>
   <span>
     The screens that you create will be displayed inside this box.

packages/standard-components/src/StackedList.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
 
   const { styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export let imageUrl = ""
   export let heading = ""
@@ -14,7 +14,7 @@
   $: showImage = !!imageUrl
 </script>
 
-<div class="container" use:styleable={$styles}>
+<div class="container" use:styleable={$component.styles}>
   <a href={destinationUrl}>
     <div class="content">
       {#if showImage}

packages/standard-components/src/Text.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
 
   const { styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export let text = ""
   export let className = ""
@@ -12,28 +12,28 @@
 </script>
 
 {#if isTag('none')}
-  <span use:styleable={$styles}>{text}</span>
+  <span use:styleable={$component.styles}>{text}</span>
 {:else if isTag('bold')}
-  <b class={className} use:styleable={$styles}>{text}</b>
+  <b class={className} use:styleable={$component.styles}>{text}</b>
 {:else if isTag('strong')}
-  <strong class={className} use:styleable={$styles}>{text}</strong>
+  <strong class={className} use:styleable={$component.styles}>{text}</strong>
 {:else if isTag('italic')}
-  <i class={className} use:styleable={$styles}>{text}</i>
+  <i class={className} use:styleable={$component.styles}>{text}</i>
 {:else if isTag('emphasis')}
-  <em class={className} use:styleable={$styles}>{text}</em>
+  <em class={className} use:styleable={$component.styles}>{text}</em>
 {:else if isTag('mark')}
-  <mark class={className} use:styleable={$styles}>{text}</mark>
+  <mark class={className} use:styleable={$component.styles}>{text}</mark>
 {:else if isTag('small')}
-  <small class={className} use:styleable={$styles}>{text}</small>
+  <small class={className} use:styleable={$component.styles}>{text}</small>
 {:else if isTag('del')}
-  <del class={className} use:styleable={$styles}>{text}</del>
+  <del class={className} use:styleable={$component.styles}>{text}</del>
 {:else if isTag('ins')}
-  <ins class={className} use:styleable={$styles}>{text}</ins>
+  <ins class={className} use:styleable={$component.styles}>{text}</ins>
 {:else if isTag('sub')}
-  <sub class={className} use:styleable={$styles}>{text}</sub>
+  <sub class={className} use:styleable={$component.styles}>{text}</sub>
 {:else if isTag('sup')}
-  <sup class={className} use:styleable={$styles}>{text}</sup>
-{:else}<span use:styleable={$styles}>{text}</span>{/if}
+  <sup class={className} use:styleable={$component.styles}>{text}</sup>
+{:else}<span use:styleable={$component.styles}>{text}</span>{/if}
 
 <style>
   span {

packages/standard-components/src/charts/ApexChart.svelte

@@ -3,15 +3,15 @@
   import { chart } from "svelte-apexcharts"
 
   const { styleable } = getContext("sdk")
-  const styles = getContext("style")
+  const component = getContext("component")
 
   export let options
 </script>
 
 {#if options}
-  <div use:chart={options} use:styleable={$styles} />
+  <div use:chart={options} use:styleable={$component.styles} />
 {:else if options === false}
-  <div use:styleable={$styles}>Invalid chart options</div>
+  <div use:styleable={$component.styles}>Invalid chart options</div>
 {/if}
 
 <style>

packages/standard-components/src/grid/Component.svelte

@@ -16,7 +16,7 @@
   const setters = new Map([["number", number]])
   const SDK = getContext("sdk")
   const dataContext = getContext("data")
-  const styles = getContext("style")
+  const component = getContext("component")
   const { API, styleable } = SDK
 
   export let datasource = {}
@@ -28,9 +28,9 @@
 
   // Add setting height as css var to allow grid to use correct height
   $: gridStyles = {
-    ...$styles,
+    ...$component.styles,
     normal: {
-      ...$styles.normal,
+      ...$component.styles.normal,
       ["--grid-height"]: `${height}px`,
     },
   }