Merge pull request #556 from Budibase/feature/binding-interface

Adds binding interface functionality to Budibase

packages/builder/cypress/integration/createBinding.spec.js

@@ -0,0 +1,18 @@
+context('Create a Binding', () => {
+    before(() => {
+        cy.visit('localhost:4001/_builder')
+        cy.createApp('Binding App', 'Binding App Description')
+        cy.navigateToFrontend()
+    })
+
+    it('add an input binding', () => {
+        cy.get(".nav-items-container").contains('Home').click()
+        cy.contains("Add").click()
+        cy.get("[data-cy=Input]").click()
+        cy.get("[data-cy=Textfield]").click()
+        cy.contains("Heading").click()
+        cy.get("[data-cy=text-binding-button]").click()
+        cy.get("[data-cy=binding-dropdown-modal]").contains('Input 1').click()
+        cy.get("[data-cy=binding-dropdown-modal] textarea").should('have.value', 'Home{{ Input 1 }}')
+    })
+})

packages/builder/package.json

@@ -49,6 +49,9 @@
     ],
     "setupFilesAfterEnv": [
       "@testing-library/jest-dom/extend-expect"
+    ],
+    "setupFiles": [
+      "./scripts/jestSetup.js"
     ]
   },
   "eslintConfig": {
@@ -57,7 +60,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.24.1",
+    "@budibase/bbui": "^1.29.1",
     "@budibase/client": "^0.1.19",
     "@budibase/colorpicker": "^1.0.1",
     "@sentry/browser": "5.19.1",
@@ -111,4 +114,4 @@
     "svelte-jester": "^1.0.6"
   },
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
-}
+}

packages/builder/scripts/jestSetup.js

@@ -0,0 +1,25 @@
+if (!Array.prototype.flat) {
+  Object.defineProperty(Array.prototype, "flat", {
+    configurable: true,
+    value: function flat() {
+      var depth = isNaN(arguments[0]) ? 1 : Number(arguments[0])
+
+      return depth
+        ? Array.prototype.reduce.call(
+            this,
+            function(acc, cur) {
+              if (Array.isArray(cur)) {
+                acc.push.apply(acc, flat.call(cur, depth - 1))
+              } else {
+                acc.push(cur)
+              }
+
+              return acc
+            },
+            []
+          )
+        : Array.prototype.slice.call(this)
+    },
+    writable: true,
+  })
+}

packages/builder/src/builderStore/fetchBindableProperties.js

@@ -0,0 +1,157 @@
+import { cloneDeep, difference } from "lodash/fp"
+
+/**
+ * parameter for fetchBindableProperties function
+ * @typedef {Object} fetchBindablePropertiesParameter
+ * @property {string}  componentInstanceId - an _id of a component that has been added to a screen, which you want to fetch bindable props for
+ * @propperty {Object} screen - current screen - where componentInstanceId lives
+ * @property {Object} components - dictionary of component definitions
+ * @property {Array} models - array of all models
+ */
+
+/**
+ *
+ * @typedef {Object} BindableProperty
+ * @property {string} type - either "instance" (binding to a component instance) or "context" (binding to data in context e.g. List Item)
+ * @property {Object} instance - relevant component instance. If "context" type, this instance is the component that provides the context... e.g. the List
+ * @property {string} runtimeBinding - a binding string that is a) saved against the string, and b) used at runtime to read/write the value
+ * @property {string} readableBinding - a binding string that is displayed to the user, in the builder
+ */
+
+/**
+ * Generates all allowed bindings from within any particular component instance
+ * @param {fetchBindablePropertiesParameter} param
+ * @returns {Array.<BindableProperty>}
+ */
+export default function({ componentInstanceId, screen, components, models }) {
+  const walkResult = walk({
+    // cloning so we are free to mutate props (e.g. by adding _contexts)
+    instance: cloneDeep(screen.props),
+    targetId: componentInstanceId,
+    components,
+    models,
+  })
+
+  return [
+    ...walkResult.bindableInstances
+      .filter(isInstanceInSharedContext(walkResult))
+      .map(componentInstanceToBindable(walkResult)),
+
+    ...walkResult.target._contexts.map(contextToBindables(walkResult)).flat(),
+  ]
+}
+
+const isInstanceInSharedContext = walkResult => i =>
+  // should cover
+  // - neither are in any context
+  // - both in same context
+  // - instance is in ancestor context of target
+  i.instance._contexts.length <= walkResult.target._contexts.length &&
+  difference(i.instance._contexts, walkResult.target._contexts).length === 0
+
+// turns a component instance prop into binding expressions
+// used by the UI
+const componentInstanceToBindable = walkResult => i => {
+  const lastContext =
+    i.instance._contexts.length &&
+    i.instance._contexts[i.instance._contexts.length - 1]
+  const contextParentPath = lastContext
+    ? getParentPath(walkResult, lastContext)
+    : ""
+
+  return {
+    type: "instance",
+    instance: i.instance,
+    // how the binding expression persists, and is used in the app at runtime
+    runtimeBinding: `${contextParentPath}${i.instance._id}.${i.prop}`,
+    // how the binding exressions looks to the user of the builder
+    readableBinding: `${i.instance._instanceName}`,
+  }
+}
+
+const contextToBindables = walkResult => context => {
+  const contextParentPath = getParentPath(walkResult, context)
+
+  return Object.keys(context.model.schema).map(k => ({
+    type: "context",
+    instance: context.instance,
+    // how the binding expression persists, and is used in the app at runtime
+    runtimeBinding: `${contextParentPath}data.${k}`,
+    // how the binding exressions looks to the user of the builder
+    readableBinding: `${context.instance._instanceName}.${context.model.name}.${k}`,
+  }))
+}
+
+const getParentPath = (walkResult, context) => {
+  // describes the number of "parent" in the path
+  // clone array first so original array is not mtated
+  const contextParentNumber = [...walkResult.target._contexts]
+    .reverse()
+    .indexOf(context)
+
+  return (
+    new Array(contextParentNumber).fill("parent").join(".") +
+    // trailing . if has parents
+    (contextParentNumber ? "." : "")
+  )
+}
+
+const walk = ({ instance, targetId, components, models, result }) => {
+  if (!result) {
+    result = {
+      target: null,
+      bindableInstances: [],
+      allContexts: [],
+      currentContexts: [],
+    }
+  }
+
+  if (!instance._contexts) instance._contexts = []
+
+  // "component" is the component definition (object in component.json)
+  const component = components[instance._component]
+
+  if (instance._id === targetId) {
+    // found it
+    result.target = instance
+  } else {
+    if (component && component.bindable) {
+      // pushing all components in here initially
+      // but this will not be correct, as some of
+      // these components will be in another context
+      // but we dont know this until the end of the walk
+      // so we will filter in another method
+      result.bindableInstances.push({
+        instance,
+        prop: component.bindable,
+      })
+    }
+  }
+
+  // a component that provides context to it's children
+  const contextualInstance =
+    component && component.context && instance[component.context]
+
+  if (contextualInstance) {
+    // add to currentContexts (ancestory of context)
+    // before walking children
+    const model = models.find(m => m._id === instance[component.context])
+    result.currentContexts.push({ instance, model })
+  }
+
+  const currentContexts = [...result.currentContexts]
+  for (let child of instance._children || []) {
+    // attaching _contexts of components, for eas comparison later
+    // these have been deep cloned above, so shouln't modify the
+    // original component instances
+    child._contexts = currentContexts
+    walk({ instance: child, targetId, components, models, result })
+  }
+
+  if (contextualInstance) {
+    // child walk done, remove from currentContexts
+    result.currentContexts.pop()
+  }
+
+  return result
+}

packages/builder/src/builderStore/getNewComponentName.js

@@ -0,0 +1,39 @@
+import { walkProps } from "./storeUtils"
+import { get_capitalised_name } from "../helpers"
+
+export default function(component, state) {
+  const capitalised = get_capitalised_name(component)
+
+  const matchingComponents = []
+
+  const findMatches = props => {
+    walkProps(props, c => {
+      if ((c._instanceName || "").startsWith(capitalised)) {
+        matchingComponents.push(c._instanceName)
+      }
+    })
+  }
+
+  // check page first
+  findMatches(state.pages[state.currentPageName].props)
+
+  // if viewing screen, check current screen for duplicate
+  if (state.currentFrontEndType === "screen") {
+    findMatches(state.currentPreviewItem.props)
+  } else {
+    // viewing master page - need to find against all screens
+    for (let screen of state.screens) {
+      findMatches(screen.props)
+    }
+  }
+
+  let index = 1
+  let name
+  while (!name) {
+    const tryName = `${capitalised} ${index}`
+    if (!matchingComponents.includes(tryName)) name = tryName
+    index++
+  }
+
+  return name
+}

packages/builder/src/builderStore/store/index.js

@@ -1,5 +1,5 @@
 import { values, cloneDeep } from "lodash/fp"
-import { get_capitalised_name } from "../../helpers"
+import getNewComponentName from "../getNewComponentName"
 import { backendUiStore } from "builderStore"
 import { writable, get } from "svelte/store"
 import api from "../api"
@@ -276,7 +276,7 @@ const addChildComponent = store => (componentToAdd, presetProps = {}) => {
     const component = getComponentDefinition(state, componentToAdd)
 
     const instanceId = get(backendUiStore).selectedDatabase._id
-    const instanceName = get_capitalised_name(componentToAdd)
+    const instanceName = getNewComponentName(componentToAdd, state)
 
     const newComponent = createProps(
       component,
@@ -482,7 +482,7 @@ const pasteComponent = store => (targetComponent, mode) => {
       // in case we paste a second time
       s.componentToPaste.isCut = false
     } else {
-      generateNewIdsForComponent(componentToPaste)
+      generateNewIdsForComponent(componentToPaste, s)
     }
     delete componentToPaste.isCut
 

packages/builder/src/builderStore/storeUtils.js

@@ -5,6 +5,7 @@ import {
 import api from "./api"
 import { generate_screen_css } from "./generate_css"
 import { uuid } from "./uuid"
+import getNewComponentName from "./getNewComponentName"
 
 export const selectComponent = (state, component) => {
   const componentDef = component._component.startsWith("##")
@@ -84,9 +85,10 @@ export const regenerateCssForCurrentScreen = state => {
   return state
 }
 
-export const generateNewIdsForComponent = c =>
+export const generateNewIdsForComponent = (c, state) =>
   walkProps(c, p => {
     p._id = uuid()
+    p._instanceName = getNewComponentName(p._component, state)
   })
 
 export const getComponentDefinition = (state, name) =>

packages/builder/src/builderStore/uuid.js

@@ -1,5 +1,7 @@
 export function uuid() {
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
+  // always want to make this start with a letter, as this makes it
+  // easier to use with mustache bindings in the client
+  return "cxxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, c => {
     const r = (Math.random() * 16) | 0,
       v = c == "x" ? r : (r & 0x3) | 0x8
     return v.toString(16)

packages/builder/src/components/userInterface/BindingDropdown.svelte

@@ -0,0 +1,116 @@
+<script>
+  import groupBy from "lodash/fp/groupBy"
+  import { Button, TextArea, Label, Body } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
+  export let bindableProperties
+  console.log("Bindable Props: ", bindableProperties)
+  export let value = ""
+  export let close
+
+  function addToText(readableBinding) {
+    value = value + `{{ ${readableBinding} }}`
+  }
+  let originalValue = value
+
+  $: dispatch("update", value)
+
+  function cancel() {
+    dispatch("update", originalValue)
+    close()
+  }
+
+  $: ({ instance, context } = groupBy("type", bindableProperties))
+</script>
+
+<div class="container" data-cy="binding-dropdown-modal">
+  <div class="list">
+    <Label size="l" color="dark">Objects</Label>
+    {#if context}
+      <Label size="s" color="dark">Table</Label>
+      <ul>
+        {#each context as { readableBinding }}
+          <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
+        {/each}
+      </ul>
+    {/if}
+    {#if instance}
+      <Label size="s" color="dark">Components</Label>
+      <ul>
+        {#each instance as { readableBinding }}
+          <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+  <div class="text">
+    <Label size="l" color="dark">Data binding</Label>
+    <Body size="s" color="dark">
+      Binding connects one piece of data to another and makes it dynamic. Click
+      the objects on the left, to add them to the textbox.
+    </Body>
+    <TextArea bind:value placeholder="" />
+    <div class="controls">
+      <a href="#">
+        <Body size="s" color="light">Learn more about binding</Body>
+      </a>
+      <Button on:click={cancel} secondary>Cancel</Button>
+      <Button on:click={close} primary>Done</Button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-template-columns: auto auto;
+  }
+  .list,
+  .text {
+    padding: var(--spacing-m);
+  }
+  .controls {
+    margin-top: var(--spacing-m);
+    display: grid;
+    align-items: center;
+    grid-gap: var(--spacing-l);
+    grid-template-columns: 1fr auto auto;
+  }
+  .list {
+    width: 150px;
+    border-right: 1.5px solid var(--grey-4);
+  }
+  .text {
+    width: 600px;
+    display: grid;
+  }
+  .text :global(p) {
+    margin: 0;
+  }
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    display: flex;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    color: var(--ink);
+    padding: var(--spacing-s) var(--spacing-m);
+    margin: auto 0px;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  li:hover {
+    background-color: var(--grey-2);
+  }
+
+  li:active {
+    color: var(--blue);
+  }
+</style>

packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { Button, DropdownMenu } from "@budibase/bbui"
+  import EventEditorModal from "./EventEditorModal.svelte"
+  import { getContext } from "svelte"
+
+  export let value
+  export let name
+
+  let button
+  let dropdown
+</script>
+
+<div bind:this={button}>
+  <Button secondary small on:click={dropdown.show}>Define Actions</Button>
+</div>
+<DropdownMenu bind:this={dropdown} align="right" anchor={button}>
+  <EventEditorModal
+    event={value}
+    eventType={name}
+    on:change
+    on:close={dropdown.hide} />
+</DropdownMenu>
+
+<style>
+
+</style>

packages/builder/src/components/userInterface/PropertyControl.svelte

@@ -1,4 +1,10 @@
 <script>
+  import { Icon } from "@budibase/bbui"
+  import Input from "./PropertyPanelControls/Input.svelte"
+  import { store, backendUiStore } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+  import { DropdownMenu } from "@budibase/bbui"
+  import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
   import { onMount, getContext } from "svelte"
 
   export let label = ""
@@ -8,6 +14,49 @@
   export let props = {}
   export let onChange = () => {}
 
+  let temporaryBindableValue = value
+
+  function handleClose() {
+    handleChange(key, temporaryBindableValue)
+  }
+
+  let bindableProperties = []
+
+  let anchor
+  let dropdown
+
+  function getBindableProperties() {
+    // Get all bindableProperties
+    bindableProperties = fetchBindableProperties({
+      componentInstanceId: $store.currentComponentInfo._id,
+      components: $store.components,
+      screen: $store.currentPreviewItem,
+      models: $backendUiStore.models,
+    })
+  }
+
+  const CAPTURE_VAR_INSIDE_MUSTACHE = /{{([^}]+)}}/g
+  function replaceBindings(textWithBindings) {
+    getBindableProperties()
+    // Find all instances of mustasche
+    const boundValues = textWithBindings.match(CAPTURE_VAR_INSIDE_MUSTACHE)
+
+    // Replace with names:
+    boundValues &&
+      boundValues.forEach(boundValue => {
+        const binding = bindableProperties.find(({ readableBinding }) => {
+          return boundValue === `{{ ${readableBinding} }}`
+        })
+        if (binding) {
+          textWithBindings = textWithBindings.replace(
+            boundValue,
+            `{{ ${binding.runtimeBinding} }}`
+          )
+        }
+      })
+    onChange(key, textWithBindings)
+  }
+
   function handleChange(key, v) {
     let innerVal = v
     if (typeof v === "object") {
@@ -17,13 +66,29 @@
         innerVal = props.valueKey ? v.target[props.valueKey] : v.target.value
       }
     }
-    onChange(key, innerVal)
+    replaceBindings(innerVal)
   }
 
   const safeValue = () => {
+    getBindableProperties()
+    let temp = value
+    const boundValues =
+      (typeof value === "string" && value.match(CAPTURE_VAR_INSIDE_MUSTACHE)) ||
+      []
+
+    // Replace with names:
+    boundValues.forEach(v => {
+      const binding = bindableProperties.find(({ runtimeBinding }) => {
+        return v === `{{ ${runtimeBinding} }}`
+      })
+      if (binding) {
+        temp = temp.replace(v, `{{ ${binding.readableBinding} }}`)
+      }
+    })
+    // console.log(temp)
     return value === undefined && props.defaultValue !== undefined
       ? props.defaultValue
-      : value
+      : temp
   }
 
   //Incase the component has a different value key name
@@ -31,7 +96,7 @@
     props.valueKey ? { [props.valueKey]: safeValue() } : { value: safeValue() }
 </script>
 
-<div class="property-control">
+<div class="property-control" bind:this={anchor}>
   <div class="label">{label}</div>
   <div data-cy={`${key}-prop-control`} class="control">
     <svelte:component
@@ -42,10 +107,29 @@
       {...props}
       name={key} />
   </div>
+  {#if control == Input}
+    <button data-cy={`${key}-binding-button`} on:click={dropdown.show}>
+      <Icon name="edit" />
+    </button>
+  {/if}
 </div>
+{#if control == Input}
+  <DropdownMenu
+    on:close={handleClose}
+    bind:this={dropdown}
+    {anchor}
+    align="right">
+    <BindingDropdown
+      {...handlevalueKey(value)}
+      close={dropdown.hide}
+      on:update={e => (temporaryBindableValue = e.detail)}
+      {bindableProperties} />
+  </DropdownMenu>
+{/if}
 
 <style>
   .property-control {
+    position: relative;
     display: flex;
     flex-flow: row;
     width: 260px;
@@ -71,4 +155,15 @@
     padding-left: 2px;
     max-width: 164px;
   }
+  button {
+    position: absolute;
+    background: none;
+    border: none;
+    border-radius: 50%;
+    height: 24px;
+    width: 24px;
+    background: rgb(224, 224, 224);
+    right: 5px;
+    --spacing-s: 0;
+  }
 </style>

packages/builder/src/components/userInterface/PropertyGroup.svelte

@@ -10,6 +10,8 @@
   export let onStyleChanged = () => {}
   export let open = false
 
+  $: console.log(properties)
+
   $: style = componentInstance["_styles"][styleCategory] || {}
 </script>
 

packages/builder/src/components/userInterface/SettingsView.svelte

@@ -3,6 +3,8 @@
   import Input from "./PropertyPanelControls/Input.svelte"
   import { goto } from "@sveltech/routify"
   import { excludeProps } from "./propertyCategories.js"
+  import { store } from "builderStore"
+  import { walkProps } from "builderStore/storeUtils"
 
   export let panelDefinition = []
   export let componentDefinition = {}
@@ -12,6 +14,7 @@
   export let screenOrPageInstance
 
   let pageScreenProps = ["title", "favicon", "description", "route"]
+  let duplicateName = false
 
   const propExistsOnComponentDef = prop =>
     pageScreenProps.includes(prop) || prop in componentDefinition.props
@@ -32,6 +35,43 @@
 
   $: isPage = screenOrPageInstance && screenOrPageInstance.favicon
   $: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition
+
+  const isDuplicateName = name => {
+    let duplicate = false
+
+    const lookForDuplicate = rootPops => {
+      walkProps(rootPops, (inst, cancel) => {
+        if (inst._instanceName === name && inst._id !== componentInstance._id) {
+          duplicate = true
+          cancel()
+        }
+      })
+    }
+    // check page first
+    lookForDuplicate($store.pages[$store.currentPageName].props)
+    if (duplicate) return true
+
+    // if viwing screen, check current screen for duplicate
+    if ($store.currentFrontEndType === "screen") {
+      lookForDuplicate($store.currentPreviewItem.props)
+    } else {
+      // viewing master page - need to dedupe against all screens
+      for (let screen of $store.screens) {
+        lookForDuplicate(screen.props)
+      }
+    }
+
+    return duplicate
+  }
+
+  const onInstanceNameChange = (_, name) => {
+    if (isDuplicateName(name)) {
+      duplicateName = true
+    } else {
+      duplicateName = false
+      onChange("_instanceName", name)
+    }
+  }
 </script>
 
 {#if screenOrPageInstance}
@@ -53,7 +93,10 @@
     label="Name"
     key="_instanceName"
     value={componentInstance._instanceName}
-    {onChange} />
+    onChange={onInstanceNameChange} />
+  {#if duplicateName}
+    <span class="duplicate-name">Name must be unique</span>
+  {/if}
 {/if}
 
 {#if panelDefinition && panelDefinition.length > 0}
@@ -78,4 +121,11 @@
   div {
     text-align: center;
   }
+
+  .duplicate-name {
+    color: var(--red);
+    font-size: var(--font-size-xs);
+    position: relative;
+    top: -10px;
+  }
 </style>

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -2,6 +2,7 @@ import Input from "./PropertyPanelControls/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import Checkbox from "../common/Checkbox.svelte"
 import ModelSelect from "components/userInterface/ModelSelect.svelte"
+import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
 
 import { all } from "./propertyCategories.js"
 /* 
@@ -201,6 +202,7 @@ export default {
                 valueKey: "checked",
                 control: Checkbox,
               },
+              { label: "onClick", key: "onClick", control: Event },
             ],
           },
         },

packages/builder/tests/fetchBindableProperties.spec.js

@@ -0,0 +1,201 @@
+import fetchBindableProperties from "../src/builderStore/fetchBindableProperties"
+
+describe("fetch bindable properties", () => {
+
+  it("should return bindable properties from screen components", () => {
+    const result = fetchBindableProperties({
+      componentInstanceId: "heading-id",
+      ...testData()
+    })
+    const componentBinding = result.find(r => r.instance._id === "search-input-id" && r.type === "instance")
+    expect(componentBinding).toBeDefined()
+    expect(componentBinding.type).toBe("instance")
+    expect(componentBinding.runtimeBinding).toBe("search-input-id.value")
+  })
+
+  it("should not return bindable components when not in their context", () => {
+    const result = fetchBindableProperties({
+      componentInstanceId: "heading-id",
+      ...testData()
+    })
+    const componentBinding = result.find(r => r.instance._id === "list-item-input-id")
+    expect(componentBinding).not.toBeDefined()
+  })
+
+  it("should return model schema, when inside a context", () => {
+    const result = fetchBindableProperties({
+      componentInstanceId: "list-item-input-id",
+      ...testData()
+    })
+    const contextBindings = result.filter(r => r.instance._id === "list-id" && r.type==="context")
+    expect(contextBindings.length).toBe(2)
+    
+    const namebinding = contextBindings.find(b => b.runtimeBinding === "data.name")
+    expect(namebinding).toBeDefined()
+    expect(namebinding.readableBinding).toBe("list-name.Test Model.name")
+    
+    const descriptionbinding = contextBindings.find(b => b.runtimeBinding === "data.description")
+    expect(descriptionbinding).toBeDefined()
+    expect(descriptionbinding.readableBinding).toBe("list-name.Test Model.description")
+  })
+
+  it("should return model schema, for grantparent context", () => {
+    const result = fetchBindableProperties({
+      componentInstanceId: "child-list-item-input-id",
+      ...testData()
+    })
+    const contextBindings = result.filter(r => r.type==="context")
+    expect(contextBindings.length).toBe(4)
+    
+    const namebinding_parent = contextBindings.find(b => b.runtimeBinding === "parent.data.name")
+    expect(namebinding_parent).toBeDefined()
+    expect(namebinding_parent.readableBinding).toBe("list-name.Test Model.name")
+    
+    const descriptionbinding_parent = contextBindings.find(b => b.runtimeBinding === "parent.data.description")
+    expect(descriptionbinding_parent).toBeDefined()
+    expect(descriptionbinding_parent.readableBinding).toBe("list-name.Test Model.description")
+    
+    const namebinding_own = contextBindings.find(b => b.runtimeBinding === "data.name")
+    expect(namebinding_own).toBeDefined()
+    expect(namebinding_own.readableBinding).toBe("child-list-name.Test Model.name")
+    
+    const descriptionbinding_own = contextBindings.find(b => b.runtimeBinding === "data.description")
+    expect(descriptionbinding_own).toBeDefined()
+    expect(descriptionbinding_own.readableBinding).toBe("child-list-name.Test Model.description")
+  })
+
+  it("should return bindable component props, from components in same context", () => {
+    const result = fetchBindableProperties({
+      componentInstanceId: "list-item-heading-id",
+      ...testData()
+    })
+    const componentBinding = result.find(r => r.instance._id === "list-item-input-id" && r.type === "instance")
+    expect(componentBinding).toBeDefined()
+    expect(componentBinding.runtimeBinding).toBe("list-item-input-id.value")
+  })
+
+  it("should not return components from child context", () => {
+    const result = fetchBindableProperties({
+      componentInstanceId: "list-item-heading-id",
+      ...testData()
+    })
+    const componentBinding = result.find(r => r.instance._id === "child-list-item-input-id" && r.type === "instance")
+    expect(componentBinding).not.toBeDefined()
+  })
+  
+  it("should return bindable component props, from components in same context (when nested context)", () => {
+    const result = fetchBindableProperties({
+      componentInstanceId: "child-list-item-heading-id",
+      ...testData()
+    })
+    const componentBinding = result.find(r => r.instance._id === "child-list-item-input-id" && r.type === "instance")
+    expect(componentBinding).toBeDefined()
+  }) 
+
+})
+
+const testData = () => {
+
+  const screen = {
+    instanceName: "test screen",
+    name: "screen-id",
+    route: "/",
+    props: {
+      _id:"screent-root-id", 
+      _component: "@budibase/standard-components/container",
+      _children: [
+        {
+          _id: "heading-id",
+          _instanceName: "list item heading",
+          _component: "@budibase/standard-components/heading",
+          text: "Screen Title"
+        },
+        {
+          _id: "search-input-id",
+          _instanceName: "Search Input",
+          _component: "@budibase/standard-components/input",
+          value: "search phrase"
+        },
+        {
+          _id: "list-id",
+          _component: "@budibase/standard-components/list",
+          _instanceName: "list-name",
+          model: "test-model-id",
+          _children: [
+            {
+              _id: "list-item-heading-id",
+              _instanceName: "list item heading",
+              _component: "@budibase/standard-components/heading",
+              text: "hello"
+            },
+            {
+              _id: "list-item-input-id",
+              _instanceName: "List Item Input",
+              _component: "@budibase/standard-components/input",
+              value: "list item"
+            },
+            {
+              _id: "child-list-id",
+              _component: "@budibase/standard-components/list",
+              _instanceName: "child-list-name",
+              model: "test-model-id",
+              _children: [
+                {
+                  _id: "child-list-item-heading-id",
+                  _instanceName: "child list item heading",
+                  _component: "@budibase/standard-components/heading",
+                  text: "hello"
+                },
+                {
+                  _id: "child-list-item-input-id",
+                  _instanceName: "Child List Item Input",
+                  _component: "@budibase/standard-components/input",
+                  value: "child list item"
+                },
+              ]
+            },
+          ]
+        },
+      ]
+    }
+  }
+
+  const models = [{
+    _id: "test-model-id",
+    name: "Test Model",
+      schema: {
+        name: {
+          type: "string"
+        },
+        description: {
+          type: "string"
+        }
+    }
+  }]
+
+  const components = {
+    "@budibase/standard-components/container" : {
+      props: {},
+    },
+    "@budibase/standard-components/list" : {
+      context: "model",
+      props: {
+        model: "string"
+      },
+    },
+    "@budibase/standard-components/input" : {
+      bindable: "value",
+      props: {
+        value: "string"
+      },
+    },
+    "@budibase/standard-components/heading" : {
+      props: {
+        text: "string"
+      },
+    },
+  }
+
+  return { screen, models, components }
+
+}

packages/builder/yarn.lock

@@ -688,10 +688,10 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.24.1":
-  version "1.24.1"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.24.1.tgz#d1c527990c3dcdef78080abfe6aaeef6e8fb2d66"
-  integrity sha512-yZE4Uk6EB3MoIUd2oNN50u8KOXRX65yRFv49gN0T6iCjTjEAdEk8JtsQR9AL3VWn3EdPz5xOkrGsIvNtxqaAFw==
+"@budibase/bbui@^1.29.1":
+  version "1.29.1"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.29.1.tgz#edaa6c7ce43a71d94460f7a3669ade1d4523333e"
+  integrity sha512-t8zxP7IIHQ4CMT+CRZWUvMgD6NC01J/dwH+pBerR8lJPSygmCOmrDy3ySfSmqcIhzjCbPIVtk32UKnXFqHtzRQ==
   dependencies:
     sirv-cli "^0.4.6"
 
@@ -2828,6 +2828,7 @@ for-in@^1.0.2:
 foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
 
 forever-agent@~0.6.1:
   version "0.6.1"
@@ -5393,6 +5394,7 @@ shellwords@^0.1.1:
 shortid@^2.2.15:
   version "2.2.15"
   resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
+  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
   dependencies:
     nanoid "^2.1.0"
 

packages/client/package.json

@@ -21,28 +21,24 @@
       "\\.(css|less|sass|scss)$": "identity-obj-proxy"
     },
     "moduleFileExtensions": [
-      "js"
+      "js",
+      "svelte"
     ],
     "moduleDirectories": [
       "node_modules"
     ],
     "transform": {
-      "^.+js$": "babel-jest"
+      "^.+js$": "babel-jest",
+      "^.+.svelte$": "svelte-jester"
     },
     "transformIgnorePatterns": [
       "/node_modules/(?!svelte).+\\.js$"
     ]
   },
   "dependencies": {
-    "@nx-js/compiler-util": "^2.0.0",
-    "bcryptjs": "^2.4.3",
     "deep-equal": "^2.0.1",
-    "lodash": "^4.17.15",
-    "lunr": "^2.3.5",
     "mustache": "^4.0.1",
-    "regexparam": "^1.3.0",
-    "shortid": "^2.2.8",
-    "svelte": "^3.9.2"
+    "regexparam": "^1.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",
@@ -58,7 +54,9 @@
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-terser": "^4.0.4"
+    "rollup-plugin-terser": "^4.0.4",
+    "svelte": "3.23.x",
+    "svelte-jester": "^1.0.6"
   },
   "gitHead": "e4e053cb6ff9a0ddc7115b44ccaa24b8ec41fb9a"
 }

packages/client/rollup.config.js

@@ -3,74 +3,6 @@ import commonjs from "rollup-plugin-commonjs"
 import builtins from "rollup-plugin-node-builtins"
 import nodeglobals from "rollup-plugin-node-globals"
 
-const lodash_fp_exports = [
-  "find",
-  "compose",
-  "isUndefined",
-  "split",
-  "max",
-  "last",
-  "union",
-  "reduce",
-  "isObject",
-  "cloneDeep",
-  "some",
-  "isArray",
-  "map",
-  "filter",
-  "keys",
-  "isFunction",
-  "isEmpty",
-  "countBy",
-  "join",
-  "includes",
-  "flatten",
-  "constant",
-  "first",
-  "intersection",
-  "take",
-  "has",
-  "mapValues",
-  "isString",
-  "isBoolean",
-  "isNull",
-  "isNumber",
-  "isObjectLike",
-  "isDate",
-  "clone",
-  "values",
-  "keyBy",
-  "isNaN",
-  "isInteger",
-  "toNumber",
-]
-
-const lodash_exports = [
-  "flow",
-  "head",
-  "find",
-  "each",
-  "tail",
-  "findIndex",
-  "startsWith",
-  "dropRight",
-  "takeRight",
-  "trim",
-  "split",
-  "replace",
-  "merge",
-  "assign",
-]
-
-const coreExternal = [
-  "lodash",
-  "lodash/fp",
-  "lunr",
-  "safe-buffer",
-  "shortid",
-  "@nx-js/compiler-util",
-]
-
 export default {
   input: "src/index.js",
   output: [
@@ -90,17 +22,8 @@ export default {
     resolve({
       preferBuiltins: true,
       browser: true,
-      dedupe: importee => {
-        return coreExternal.includes(importee)
-      },
-    }),
-    commonjs({
-      namedExports: {
-        "lodash/fp": lodash_fp_exports,
-        lodash: lodash_exports,
-        shortid: ["generate"],
-      },
     }),
+    commonjs(),
     builtins(),
     nodeglobals(),
   ],

packages/client/src/api/authenticate.js

@@ -1,3 +1,5 @@
+import appStore from "../state/store"
+
 export const USER_STATE_PATH = "_bbuser"
 
 export const authenticate = api => async ({ username, password }) => {
@@ -17,6 +19,10 @@ export const authenticate = api => async ({ username, password }) => {
   })
 
   // set user even if error - so it is defined at least
-  api.setState(USER_STATE_PATH, user)
+  appStore.update(s => {
+    s[USER_STATE_PATH] = user
+    return s
+  })
+
   localStorage.setItem("budibase:user", JSON.stringify(user))
 }

packages/client/src/api/index.js

@@ -1,62 +1,59 @@
 import { authenticate } from "./authenticate"
 import { triggerWorkflow } from "./workflow"
+import appStore from "../state/store"
 
-export const createApi = ({ setState, getState }) => {
-  const apiCall = method => async ({ url, body }) => {
-    const response = await fetch(url, {
-      method: method,
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: body && JSON.stringify(body),
-      credentials: "same-origin",
-    })
+const apiCall = method => async ({ url, body }) => {
+  const response = await fetch(url, {
+    method: method,
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: body && JSON.stringify(body),
+    credentials: "same-origin",
+  })
 
-    switch (response.status) {
-      case 200:
+  switch (response.status) {
+    case 200:
+      return response.json()
+    case 404:
+      return error(`${url} Not found`)
+    case 400:
+      return error(`${url} Bad Request`)
+    case 403:
+      return error(`${url} Forbidden`)
+    default:
+      if (response.status >= 200 && response.status < 400) {
         return response.json()
-      case 404:
-        return error(`${url} Not found`)
-      case 400:
-        return error(`${url} Bad Request`)
-      case 403:
-        return error(`${url} Forbidden`)
-      default:
-        if (response.status >= 200 && response.status < 400) {
-          return response.json()
-        }
+      }
 
-        return error(`${url} - ${response.statusText}`)
-    }
-  }
-
-  const post = apiCall("POST")
-  const get = apiCall("GET")
-  const patch = apiCall("PATCH")
-  const del = apiCall("DELETE")
-
-  const ERROR_MEMBER = "##error"
-  const error = message => {
-    const err = { [ERROR_MEMBER]: message }
-    setState("##error_message", message)
-    return err
-  }
-
-  const isSuccess = obj => !obj || !obj[ERROR_MEMBER]
-
-  const apiOpts = {
-    setState,
-    getState,
-    isSuccess,
-    error,
-    post,
-    get,
-    patch,
-    delete: del,
-  }
-
-  return {
-    authenticate: authenticate(apiOpts),
-    triggerWorkflow: triggerWorkflow(apiOpts),
+      return error(`${url} - ${response.statusText}`)
   }
 }
+
+const post = apiCall("POST")
+const get = apiCall("GET")
+const patch = apiCall("PATCH")
+const del = apiCall("DELETE")
+
+const ERROR_MEMBER = "##error"
+const error = message => {
+  const err = { [ERROR_MEMBER]: message }
+  appStore.update(s => s["##error_message"], message)
+  return err
+}
+
+const isSuccess = obj => !obj || !obj[ERROR_MEMBER]
+
+const apiOpts = {
+  isSuccess,
+  error,
+  post,
+  get,
+  patch,
+  delete: del,
+}
+
+export default {
+  authenticate: authenticate(apiOpts),
+  triggerWorkflow: triggerWorkflow(apiOpts),
+}

packages/client/src/api/workflow/actions.js

@@ -1,16 +1,6 @@
-import { setState } from "../../state/setState"
-
 const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
 
 export default {
-  SET_STATE: ({ context, args, id }) => {
-    setState(...Object.values(args))
-    context = {
-      ...context,
-      [id]: args,
-    }
-    return context
-  },
   NAVIGATE: () => {
     // TODO client navigation
   },

packages/client/src/api/workflow/index.js

@@ -1,6 +1,5 @@
-import { get } from "svelte/store"
-import mustache from "mustache"
-import { appStore } from "../../state/store"
+import renderTemplateString from "../../state/renderTemplateString"
+import appStore from "../../state/store"
 import Orchestrator from "./orchestrator"
 import clientActions from "./actions"
 
@@ -18,9 +17,9 @@ export const clientStrategy = ({ api }) => ({
       if (typeof argValue !== "string") continue
 
       // Render the string with values from the workflow context and state
-      mappedArgs[arg] = mustache.render(argValue, {
+      mappedArgs[arg] = renderTemplateString(argValue, {
         context: this.context,
-        state: get(appStore),
+        state: appStore.get(),
       })
     }
 

packages/client/src/render/attachChildren.js

@@ -1,7 +1,7 @@
-import { split, last, compose } from "lodash/fp"
 import { prepareRenderComponent } from "./prepareRenderComponent"
 import { isScreenSlot } from "./builtinComponents"
 import deepEqual from "deep-equal"
+import appStore from "../state/store"
 
 export const attachChildren = initialiseOpts => (htmlElement, options) => {
   const {
@@ -30,11 +30,28 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
     }
   }
 
-  const contextArray = Array.isArray(context) ? context : [context]
+  const contextStoreKeys = []
+
+  // create new context if supplied
+  if (context) {
+    let childIndex = 0
+    // if context is an array,  map to new structure
+    const contextArray = Array.isArray(context) ? context : [context]
+    for (let ctx of contextArray) {
+      const key = appStore.create(
+        ctx,
+        treeNode.props._id,
+        childIndex,
+        treeNode.contextStoreKey
+      )
+      contextStoreKeys.push(key)
+      childIndex++
+    }
+  }
 
   const childNodes = []
 
-  for (let context of contextArray) {
+  const createChildNodes = contextStoreKey => {
     for (let childProps of treeNode.props._children) {
       const { componentName, libName } = splitName(childProps._component)
 
@@ -42,25 +59,33 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
 
       const ComponentConstructor = componentLibraries[libName][componentName]
 
-      const prepareNodes = ctx => {
-        const childNodesThisIteration = prepareRenderComponent({
-          props: childProps,
-          parentNode: treeNode,
-          ComponentConstructor,
-          htmlElement,
-          anchor,
-          context: ctx,
-        })
+      const childNode = prepareRenderComponent({
+        props: childProps,
+        parentNode: treeNode,
+        ComponentConstructor,
+        htmlElement,
+        anchor,
+        // in same context as parent, unless a new one was supplied
+        contextStoreKey,
+      })
 
-        for (let childNode of childNodesThisIteration) {
-          childNodes.push(childNode)
-        }
-      }
-
-      prepareNodes(context)
+      childNodes.push(childNode)
     }
   }
 
+  if (context) {
+    // if new context(s) is supplied, then create nodes
+    // with keys to new context stores
+    for (let contextStoreKey of contextStoreKeys) {
+      createChildNodes(contextStoreKey)
+    }
+  } else {
+    // otherwise, use same context store as parent
+    // which maybe undefined (therfor using the root state)
+    createChildNodes(treeNode.contextStoreKey)
+  }
+
+  // if everything is equal, then don't re-render
   if (areTreeNodesEqual(treeNode.children, childNodes)) return treeNode.children
 
   for (let node of childNodes) {
@@ -81,9 +106,9 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
 }
 
 const splitName = fullname => {
-  const getComponentName = compose(last, split("/"))
+  const nameParts = fullname.split("/")
 
-  const componentName = getComponentName(fullname)
+  const componentName = nameParts[nameParts.length - 1]
 
   const libName = fullname.substring(
     0,

packages/client/src/render/prepareRenderComponent.js

@@ -1,5 +1,6 @@
-import { appStore } from "../state/store"
-import mustache from "mustache"
+import renderTemplateString from "../state/renderTemplateString"
+import appStore from "../state/store"
+import hasBinding from "../state/hasBinding"
 
 export const prepareRenderComponent = ({
   ComponentConstructor,
@@ -7,62 +8,54 @@ export const prepareRenderComponent = ({
   anchor,
   props,
   parentNode,
-  context,
+  contextStoreKey,
 }) => {
-  const parentContext = (parentNode && parentNode.context) || {}
+  const thisNode = createTreeNode()
+  thisNode.parentNode = parentNode
+  thisNode.props = props
+  thisNode.contextStoreKey = contextStoreKey
 
-  let nodesToRender = []
-  const createNodeAndRender = () => {
-    let componentContext = parentContext
-    if (context) {
-      componentContext = { ...context }
-      componentContext.$parent = parentContext
+  // the treeNode is first created (above), and then this
+  // render method is add. The treeNode is returned, and
+  // render is called later (in attachChildren)
+  thisNode.render = initialProps => {
+    thisNode.component = new ComponentConstructor({
+      target: htmlElement,
+      props: initialProps,
+      hydrate: false,
+      anchor,
+    })
+
+    // finds the root element of the component, which was created by the contructor above
+    // we use this later to attach a className to. This is how styles
+    // are applied by the builder
+    thisNode.rootElement = htmlElement.children[htmlElement.children.length - 1]
+
+    let [componentName] = props._component.match(/[a-z]*$/)
+    if (props._id && thisNode.rootElement) {
+      thisNode.rootElement.classList.add(`${componentName}-${props._id}`)
     }
 
-    const thisNode = createTreeNode()
-    thisNode.context = componentContext
-    thisNode.parentNode = parentNode
-    thisNode.props = props
-    nodesToRender.push(thisNode)
-
-    thisNode.render = initialProps => {
-      thisNode.component = new ComponentConstructor({
-        target: htmlElement,
-        props: initialProps,
-        hydrate: false,
-        anchor,
-      })
-      thisNode.rootElement =
-        htmlElement.children[htmlElement.children.length - 1]
-
-      let [componentName] = props._component.match(/[a-z]*$/)
-      if (props._id && thisNode.rootElement) {
-        thisNode.rootElement.classList.add(`${componentName}-${props._id}`)
-      }
-
-      // make this node listen to the store
-      if (thisNode.stateBound) {
-        const unsubscribe = appStore.subscribe(state => {
-          const storeBoundProps = { ...initialProps._bb.props }
-          for (let prop in storeBoundProps) {
-            const propValue = storeBoundProps[prop]
-            if (typeof propValue === "string") {
-              storeBoundProps[prop] = mustache.render(propValue, {
-                state,
-                context: componentContext,
-              })
-            }
+    // make this node listen to the store
+    if (thisNode.stateBound) {
+      const unsubscribe = appStore.subscribe(state => {
+        const storeBoundProps = Object.keys(initialProps._bb.props).filter(p =>
+          hasBinding(initialProps._bb.props[p])
+        )
+        if (storeBoundProps.length > 0) {
+          const toSet = {}
+          for (let prop of storeBoundProps) {
+            const propValue = initialProps._bb.props[prop]
+            toSet[prop] = renderTemplateString(propValue, state)
           }
-          thisNode.component.$set(storeBoundProps)
-        })
-        thisNode.unsubscribe = unsubscribe
-      }
+          thisNode.component.$set(toSet)
+        }
+      }, thisNode.contextStoreKey)
+      thisNode.unsubscribe = unsubscribe
     }
   }
 
-  createNodeAndRender()
-
-  return nodesToRender
+  return thisNode
 }
 
 export const createTreeNode = () => ({

packages/client/src/render/screenRouter.js

@@ -1,5 +1,5 @@
 import regexparam from "regexparam"
-import { appStore } from "../state/store"
+import appStore from "../state/store"
 import { parseAppIdFromCookie } from "./getAppId"
 
 export const screenRouter = ({ screens, onScreenSelected, window }) => {

packages/client/src/state/bbComponentApi.js

@@ -1,11 +1,9 @@
-import { setState } from "./setState"
+import setBindableComponentProp from "./setBindableComponentProp"
 import { attachChildren } from "../render/attachChildren"
-import { getContext, setContext } from "./getSetContext"
 
 export const trimSlash = str => str.replace(/^\/+|\/+$/g, "")
 
 export const bbFactory = ({
-  store,
   componentLibraries,
   onScreenSlotRendered,
   getCurrentState,
@@ -45,13 +43,9 @@ export const bbFactory = ({
 
     return {
       attachChildren: attachChildren(attachParams),
-      context: treeNode.context,
       props: treeNode.props,
       call: safeCallEvent,
-      setState,
-      getContext: getContext(treeNode),
-      setContext: setContext(treeNode),
-      store: store,
+      setBinding: setBindableComponentProp(treeNode),
       api,
       parent,
       // these parameters are populated by screenRouter

packages/client/src/state/eventHandlers.js

@@ -1,8 +1,4 @@
-import { setState } from "./setState"
-import { getState } from "./getState"
-import { isArray, isUndefined } from "lodash/fp"
-
-import { createApi } from "../api"
+import api from "../api"
 
 export const EVENT_TYPE_MEMBER_NAME = "##eventHandlerType"
 
@@ -12,21 +8,13 @@ export const eventHandlers = routeTo => {
     parameters,
   })
 
-  const api = createApi({
-    setState,
-    getState: (path, fallback) => getState(path, fallback),
-  })
-
-  const setStateHandler = ({ path, value }) => setState(path, value)
-
   return {
-    "Set State": handler(["path", "value"], setStateHandler),
     "Navigate To": handler(["url"], param => routeTo(param && param.url)),
     "Trigger Workflow": handler(["workflow"], api.triggerWorkflow),
   }
 }
 
 export const isEventType = prop =>
-  isArray(prop) &&
+  Array.isArray(prop) &&
   prop.length > 0 &&
-  !isUndefined(prop[0][EVENT_TYPE_MEMBER_NAME])
+  !prop[0][EVENT_TYPE_MEMBER_NAME] === undefined

packages/client/src/state/getState.js

@@ -1,9 +0,0 @@
-import { get } from "svelte/store"
-import getOr from "lodash/fp/getOr"
-import { appStore } from "./store"
-
-export const getState = (path, fallback) => {
-  if (!path || path.length === 0) return fallback
-
-  return getOr(fallback, path, get(appStore))
-}

packages/client/src/state/hasBinding.js

@@ -0,0 +1 @@
+export default value => typeof value === "string" && value.includes("{{")

packages/client/src/state/renderTemplateString.js

@@ -0,0 +1,17 @@
+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 =>
+  String(text).replace(/[&<>"'`=/]/g, function fromEntityMap(s) {
+    return entityMap[s]
+  })
+
+export default mustache.render

packages/client/src/state/setBindableComponentProp.js

@@ -0,0 +1,13 @@
+import appStore from "./store"
+
+export default treeNode => (propName, value) => {
+  if (!propName || propName.length === 0) return
+  if (!treeNode) return
+  const componentId = treeNode.props._id
+
+  appStore.update(state => {
+    state[componentId] = state[componentId] || {}
+    state[componentId][propName] = value
+    return state
+  }, treeNode.contextStoreKey)
+}

packages/client/src/state/setState.js

@@ -1,11 +0,0 @@
-import set from "lodash/fp/set"
-import { appStore } from "./store"
-
-export const setState = (path, value) => {
-  if (!path || path.length === 0) return
-
-  appStore.update(state => {
-    state = set(path, value, state)
-    return state
-  })
-}

packages/client/src/state/stateManager.js

@@ -4,9 +4,9 @@ import {
   EVENT_TYPE_MEMBER_NAME,
 } from "./eventHandlers"
 import { bbFactory } from "./bbComponentApi"
-import mustache from "mustache"
-import { get } from "svelte/store"
-import { appStore } from "./store"
+import renderTemplateString from "./renderTemplateString"
+import appStore from "./store"
+import hasBinding from "./hasBinding"
 
 const doNothing = () => {}
 doNothing.isPlaceholder = true
@@ -37,41 +37,34 @@ export const createStateManager = ({
   const getCurrentState = () => currentState
 
   const bb = bbFactory({
-    store: appStore,
     getCurrentState,
     componentLibraries,
     onScreenSlotRendered,
   })
 
-  const setup = _setup({ handlerTypes, getCurrentState, bb, store: appStore })
+  const setup = _setup({ handlerTypes, getCurrentState, bb })
 
   return {
     setup,
     destroy: () => {},
     getCurrentState,
-    store: appStore,
   }
 }
 
-const _setup = ({ handlerTypes, getCurrentState, bb, store }) => node => {
+const _setup = ({ handlerTypes, getCurrentState, bb }) => node => {
   const props = node.props
-  const context = node.context || {}
   const initialProps = { ...props }
-  const currentStoreState = get(appStore)
 
   for (let propName in props) {
     if (isMetaProp(propName)) continue
 
     const propValue = props[propName]
 
-    // A little bit of a hack - won't bind if the string doesn't start with {{
-    const isBound = typeof propValue === "string" && propValue.includes("{{")
+    const isBound = hasBinding(propValue)
 
     if (isBound) {
-      initialProps[propName] = mustache.render(propValue, {
-        state: currentStoreState,
-        context,
-      })
+      const state = appStore.getState(node.contextStoreKey)
+      initialProps[propName] = renderTemplateString(propValue, state)
 
       if (!node.stateBound) {
         node.stateBound = true
@@ -79,6 +72,7 @@ const _setup = ({ handlerTypes, getCurrentState, bb, store }) => node => {
     }
 
     if (isEventType(propValue)) {
+      const state = appStore.getState(node.contextStoreKey)
       const handlersInfos = []
       for (let event of propValue) {
         const handlerInfo = {
@@ -90,10 +84,7 @@ const _setup = ({ handlerTypes, getCurrentState, bb, store }) => node => {
         for (let paramName in handlerInfo.parameters) {
           const paramValue = handlerInfo.parameters[paramName]
           resolvedParams[paramName] = () =>
-            mustache.render(paramValue, {
-              state: getCurrentState(),
-              context,
-            })
+            renderTemplateString(paramValue, state)
         }
 
         handlerInfo.parameters = resolvedParams
@@ -113,7 +104,7 @@ const _setup = ({ handlerTypes, getCurrentState, bb, store }) => node => {
     }
   }
 
-  const setup = _setup({ handlerTypes, getCurrentState, bb, store })
+  const setup = _setup({ handlerTypes, getCurrentState, bb })
   initialProps._bb = bb(node, setup)
 
   return initialProps

packages/client/src/state/store.js

@@ -1,9 +1,104 @@
 import { writable } from "svelte/store"
 
-const appStore = writable({})
-appStore.actions = {}
+// we assume that the reference to this state object
+// will remain for the life of the application
+const rootState = {}
+const rootStore = writable(rootState)
+const contextStores = {}
 
-const routerStore = writable({})
-routerStore.actions = {}
+// contextProviderId is the component id that provides the data for the context
+const contextStoreKey = (dataProviderId, childIndex) =>
+  `${dataProviderId}${childIndex >= 0 ? ":" + childIndex : ""}`
 
-export { appStore, routerStore }
+// creates a store for a datacontext (e.g. each item in a list component)
+const create = (data, dataProviderId, childIndex, parentContextStoreId) => {
+  const key = contextStoreKey(dataProviderId, childIndex)
+  const state = { data }
+
+  // add reference to parent state object,
+  // so we can use bindings like state.parent.parent
+  // (if no parent, then parent is rootState )
+  state.parent = parentContextStoreId
+    ? contextStores[parentContextStoreId].state
+    : rootState
+
+  if (!contextStores[key]) {
+    contextStores[key] = {
+      store: writable(state),
+      subscriberCount: 0,
+      state,
+      parentContextStoreId,
+    }
+  }
+  return key
+}
+
+const subscribe = (subscription, storeKey) => {
+  if (!storeKey) {
+    return rootStore.subscribe(subscription)
+  }
+  const contextStore = contextStores[storeKey]
+
+  // we are subscribing to multiple stores,
+  // we dont want to run our listener for every subscription, the first time
+  // as this could repeatedly run $set on the same component
+  // ... which already has its initial properties set properly
+  const ignoreFirstSubscription = () => {
+    let hasRunOnce = false
+    return () => {
+      if (hasRunOnce) subscription(contextStore.state)
+      hasRunOnce = true
+    }
+  }
+
+  const unsubscribes = [rootStore.subscribe(ignoreFirstSubscription())]
+
+  // we subscribe to all stores in the hierarchy
+  const ancestorSubscribe = ctxStore => {
+    // unsubscribe func returned by svelte store
+    const svelteUnsub = ctxStore.store.subscribe(ignoreFirstSubscription())
+
+    // we wrap the svelte unsubscribe, so we can
+    // cleanup stores when they are no longer subscribed to
+    const unsub = () => {
+      ctxStore.subscriberCount = contextStore.subscriberCount - 1
+      // when no subscribers left, we delete the store
+      if (ctxStore.subscriberCount === 0) {
+        delete ctxStore[storeKey]
+      }
+      svelteUnsub()
+    }
+    unsubscribes.push(unsub)
+    if (ctxStore.parentContextStoreId) {
+      ancestorSubscribe(contextStores[ctxStore.parentContextStoreId])
+    }
+  }
+
+  ancestorSubscribe(contextStore)
+
+  // our final unsubscribe function calls unsubscribe on all stores
+  return () => unsubscribes.forEach(u => u())
+}
+
+const findStore = (dataProviderId, childIndex) =>
+  dataProviderId
+    ? contextStores[contextStoreKey(dataProviderId, childIndex)].store
+    : rootStore
+
+const update = (updatefunc, dataProviderId, childIndex) =>
+  findStore(dataProviderId, childIndex).update(updatefunc)
+
+const set = (value, dataProviderId, childIndex) =>
+  findStore(dataProviderId, childIndex).set(value)
+
+const getState = contextStoreKey =>
+  contextStoreKey ? contextStores[contextStoreKey].state : rootState
+
+export default {
+  subscribe,
+  update,
+  set,
+  getState,
+  create,
+  contextStoreKey,
+}

packages/client/tests/binding.spec.js

@@ -0,0 +1,209 @@
+import { load, makePage, makeScreen } from "./testAppDef"
+
+describe("binding", () => {
+
+
+  it("should bind to data in context", async () => {
+    const { dom } = await load(
+      makePage({
+        _component: "testlib/div",
+        _children: [
+          {
+            _component: "##builtin/screenslot",
+            text: "header one",
+          },
+        ],
+      }),
+      [
+        makeScreen("/", {
+          _component: "testlib/list",
+          data: dataArray,
+          _children: [
+            {
+              _component: "testlib/h1",
+              text: "{{data.name}}",
+            }
+          ],
+        }),
+      ]
+    )
+
+    const rootDiv = dom.window.document.body.children[0]
+    expect(rootDiv.children.length).toBe(1)
+
+    const screenRoot = rootDiv.children[0]
+
+    expect(screenRoot.children[0].children.length).toBe(2)
+    expect(screenRoot.children[0].children[0].innerText).toBe(dataArray[0].name)
+    expect(screenRoot.children[0].children[1].innerText).toBe(dataArray[1].name)
+  })
+
+  it("should bind to input in root", async () => {
+    const { dom } = await load(
+      makePage({
+        _component: "testlib/div",
+        _children: [
+          {
+            _component: "##builtin/screenslot",
+            text: "header one",
+          },
+        ],
+      }),
+      [
+        makeScreen("/", {
+          _component: "testlib/div",
+          _children: [
+            {
+              _component: "testlib/h1",
+              text: "{{inputid.value}}",
+            },
+            {
+              _id: "inputid",
+              _component: "testlib/input",
+              value: "hello"
+            }
+          ],
+        }),
+      ]
+    )
+
+    const rootDiv = dom.window.document.body.children[0]
+    expect(rootDiv.children.length).toBe(1)
+
+    const screenRoot = rootDiv.children[0]
+
+    expect(screenRoot.children[0].children.length).toBe(2)
+    expect(screenRoot.children[0].children[0].innerText).toBe("hello")
+
+    // change value of input
+    const input = dom.window.document.getElementsByClassName("input-inputid")[0]
+
+    changeInputValue(dom, input, "new value")
+    expect(screenRoot.children[0].children[0].innerText).toBe("new value")
+
+  })
+
+  it("should bind to input in context", async () => {
+    const { dom } = await load(
+      makePage({
+        _component: "testlib/div",
+        _children: [
+          {
+            _component: "##builtin/screenslot",
+            text: "header one",
+          },
+        ],
+      }),
+      [
+        makeScreen("/", {
+          _component: "testlib/list",
+          data: dataArray,
+          _children: [
+            {
+              _component: "testlib/h1",
+              text: "{{inputid.value}}",
+            },
+            {
+              _id: "inputid",
+              _component: "testlib/input",
+              value: "hello"
+            }
+          ],
+        }),
+      ]
+    )
+
+    const rootDiv = dom.window.document.body.children[0]
+    expect(rootDiv.children.length).toBe(1)
+
+    const screenRoot = rootDiv.children[0]
+    expect(screenRoot.children[0].children.length).toBe(4)
+
+    const firstHeader = screenRoot.children[0].children[0]
+    const firstInput = screenRoot.children[0].children[1]
+    const secondHeader = screenRoot.children[0].children[2]
+    const secondInput = screenRoot.children[0].children[3]
+    
+    expect(firstHeader.innerText).toBe("hello")
+    expect(secondHeader.innerText).toBe("hello")
+
+    changeInputValue(dom, firstInput, "first input value")
+    expect(firstHeader.innerText).toBe("first input value")
+
+    changeInputValue(dom, secondInput, "second input value")
+    expect(secondHeader.innerText).toBe("second input value")
+
+  })
+
+  it("should bind contextual component, to input in root context", async () => {
+    const { dom } = await load(
+      makePage({
+        _component: "testlib/div",
+        _children: [
+          {
+            _component: "##builtin/screenslot",
+            text: "header one",
+          },
+        ],
+      }),
+      [
+        makeScreen("/", {
+          _component: "testlib/div",
+          _children: [
+            {
+              _id: "inputid",
+              _component: "testlib/input",
+              value: "hello"
+            },
+            {
+              _component: "testlib/list",
+              data: dataArray,
+              _children: [
+                {
+                  _component: "testlib/h1",
+                  text: "{{parent.inputid.value}}",
+                },
+              ],
+            }
+          ]
+        }),
+      ]
+    )
+
+    const rootDiv = dom.window.document.body.children[0]
+    expect(rootDiv.children.length).toBe(1)
+
+    const screenRoot = rootDiv.children[0]
+    expect(screenRoot.children[0].children.length).toBe(2)
+
+    const input = screenRoot.children[0].children[0]
+
+    const firstHeader = screenRoot.children[0].children[1].children[0]
+    const secondHeader = screenRoot.children[0].children[1].children[0]
+    
+    expect(firstHeader.innerText).toBe("hello")
+    expect(secondHeader.innerText).toBe("hello")
+
+    changeInputValue(dom, input, "new input value")
+    expect(firstHeader.innerText).toBe("new input value")
+    expect(secondHeader.innerText).toBe("new input value")
+
+  })
+
+  const changeInputValue = (dom, input, newValue) => {
+    var event = new dom.window.Event("change")
+    input.value = newValue
+    input.dispatchEvent(event)
+  }
+
+  const dataArray = [
+    {
+      name: "katherine",
+      age: 30,
+    },
+    {
+      name: "steve",
+      age: 41,
+    },
+  ]
+})

packages/client/tests/initialiseApp.spec.js

@@ -135,4 +135,38 @@ describe("initialiseApp", () => {
     expect(screenRoot.children[0].children[0].innerText).toBe("header one")
     expect(screenRoot.children[0].children[1].innerText).toBe("header two")
   })
+
+  it("should repeat elements that pass an array of contexts", async () => {
+    const { dom } = await load(
+      makePage({
+        _component: "testlib/div",
+        _children: [
+          {
+            _component: "##builtin/screenslot",
+            text: "header one",
+          },
+        ],
+      }),
+      [
+        makeScreen("/", {
+          _component: "testlib/list",
+          data: [1,2,3,4],
+          _children: [
+            {
+              _component: "testlib/h1",
+              text: "header",
+            }
+          ],
+        }),
+      ]
+    )
+
+    const rootDiv = dom.window.document.body.children[0]
+    expect(rootDiv.children.length).toBe(1)
+
+    const screenRoot = rootDiv.children[0]
+
+    expect(screenRoot.children[0].children.length).toBe(4)
+    expect(screenRoot.children[0].children[0].innerText).toBe("header")
+  })
 })

packages/client/tests/testAppDef.js

@@ -194,4 +194,47 @@ const maketestlib = window => ({
     set(opts.props)
     opts.target.appendChild(node)
   },
+
+  list: function(opts) {
+    const node = window.document.createElement("DIV")
+
+    let currentProps = { ...opts.props }
+
+    const set = props => {
+      currentProps = Object.assign(currentProps, props)
+      if (currentProps._children && currentProps._children.length > 0) {
+        currentProps._bb.attachChildren(node, {
+          context: currentProps.data || {},
+        })
+      }
+    }
+
+    this.$destroy = () => opts.target.removeChild(node)
+
+    this.$set = set
+    this._element = node
+    set(opts.props)
+    opts.target.appendChild(node)
+  },
+
+  input: function(opts) {
+    const node = window.document.createElement("INPUT")
+    let currentProps = { ...opts.props }
+
+    const set = props => {
+      currentProps = Object.assign(currentProps, props)
+      opts.props._bb.setBinding("value", props.value)
+    }
+
+    node.addEventListener("change", e => {
+      opts.props._bb.setBinding("value", e.target.value)
+    })
+
+    this.$destroy = () => opts.target.removeChild(node)
+
+    this.$set = set
+    this._element = node
+    set(opts.props)
+    opts.target.appendChild(node)
+  },
 })

packages/client/tests/testComponents/container.svelte

@@ -0,0 +1,16 @@
+<script>
+  export let _bb
+  export let className = ""
+
+  let containerElement
+  let hasLoaded
+
+  $: {
+    if (containerElement) {
+      _bb.attachChildren(containerElement)
+      hasLoaded = true
+    }
+  }
+</script>
+
+<div bind:this={containerElement} class={className} />

packages/standard-components/components.json

@@ -93,6 +93,7 @@
 	},
 	"input": {
 		"name": "Input",
+		"bindable": "value",
 		"description": "An HTML input",
 		"props": {
 			"value": "string",
@@ -131,6 +132,7 @@
 	},
 	"select": {
 		"name": "Select",
+		"bindable": "value",
 		"description": "An HTML <select> (dropdown)",
 		"props": {
 			"value": "string",
@@ -152,7 +154,10 @@
 		"children": false,
 		"props": {
 			"text": "string",
-			"type": {"type": "string", "default": "none"}
+			"type": {
+				"type": "string",
+				"default": "none"
+			}
 		},
 		"tags": [
 			"div",
@@ -171,6 +176,7 @@
 	},
 	"checkbox": {
 		"name": "Checkbox",
+		"bindable": "value",
 		"description": "A selectable checkbox component",
 		"props": {
 			"label": "string",
@@ -181,6 +187,7 @@
 	},
 	"radiobutton": {
 		"name": "Radiobutton",
+		"bindable": "value",
 		"description": "A selectable radiobutton component",
 		"props": {
 			"label": "string",
@@ -245,6 +252,7 @@
 	},
 	"list": {
 		"description": "A configurable data list that attaches to your backend models.",
+		"context": "model",
 		"children": true,
 		"data": true,
 		"props": {
@@ -265,6 +273,7 @@
 	},
 	"recorddetail": {
 		"description": "Loads a record, using an ID in the url",
+		"context": "model",
 		"children": true,
 		"data": true,
 		"props": {
@@ -288,7 +297,7 @@
 					"12rem",
 					"16rem",
 					"20rem",
-					"24rem"				
+					"24rem"
 				]
 			},
 			"cardWidth": {
@@ -297,7 +306,7 @@
 				"options": [
 					"16rem",
 					"20rem",
-					"24rem"				
+					"24rem"
 				]
 			}
 		}
@@ -319,7 +328,7 @@
 				"options": [
 					"8rem",
 					"12rem",
-					"16rem"			
+					"16rem"
 				]
 			},
 			"cardWidth": {
@@ -332,7 +341,7 @@
 					"40rem",
 					"48rem",
 					"60rem",
-					"100%"		
+					"100%"
 				]
 			},
 			"imageHeight": {
@@ -341,7 +350,7 @@
 				"options": [
 					"8rem",
 					"12rem",
-					"16rem"			
+					"16rem"
 				]
 			}
 		}
@@ -391,7 +400,7 @@
 			"lineGradient": "string",
 			"titleText": "string",
 			"valueLabel": "string"
-		}	
+		}
 	},
 	"stackedbar": {
 		"description": "Stacked Bar Chart",
@@ -420,7 +429,7 @@
 			"yAxisLabel": "string",
 			"yAxisLabelOffset": "number",
 			"useLegend": "bool"
-		}		
+		}
 	},
 	"stackarea": {
 		"description": "Step Chart",
@@ -449,7 +458,7 @@
 			"xAxisCustomFormat": "string",
 			"xAxisFormat": "string",
 			"xAxisScale": "string",
-			"xAxisValueType":"string",
+			"xAxisValueType": "string",
 			"yTicks": "number",
 			"xTicks": "number",
 			"yAxisBaseline": "string",
@@ -467,14 +476,14 @@
 			"xAxisLabel": "string",
 			"xAxisLabelOffset": "string",
 			"yAxisLabel": "string",
-			"yAxisLabelOffset": "string",	
+			"yAxisLabelOffset": "string",
 			"yTicks": "string"
 		}
 	},
 	"scatterplot": {
 		"description": "Scatterplot Chart",
 		"data": true,
-		"props": { 
+		"props": {
 			"model": "string",
 			"color": "string",
 			"height": "number",
@@ -490,7 +499,7 @@
 			"xTicks": "string",
 			"yAxisFormat": "string",
 			"yAxisLabel": "string",
-			"yAxisLabelOffset": "string",	
+			"yAxisLabelOffset": "string",
 			"yTicks": "string"
 		}
 	},
@@ -547,7 +556,7 @@
 			"tooltipTitle": "string"
 		}
 	},
-	"brush":{
+	"brush": {
 		"description": "brush chart",
 		"data": true,
 		"props": {
@@ -575,7 +584,7 @@
 			"useLegend": "bool",
 			"yAxisLabel": "string",
 			"boxSize": "number"
-		}		
+		}
 	},
 	"groupedbar": {
 		"description": "Groupedbar chart",
@@ -585,13 +594,13 @@
 			"color": "string",
 			"height": "string",
 			"width": "string",
-			"margin":"string",
-			"grid":"string",
+			"margin": "string",
+			"grid": "string",
 			"groupLabel": "string",
 			"isAnimated": "bool",
 			"isHorizontal": "bool",
 			"nameLabel": "string",
-			"valueLabel":"string",
+			"valueLabel": "string",
 			"yTicks": "string",
 			"useLegend": "bool",
 			"tooltipTitle": "string"
@@ -600,7 +609,7 @@
 	"bullet": {
 		"description": "Bullet chart",
 		"data": true,
-		"props": { 
+		"props": {
 			"model": "string",
 			"color": "string",
 			"customSubtitle": "string",
@@ -651,12 +660,12 @@
 				"styleBindingProperty": "font-family",
 				"options": [
 					"initial",
-					"Times New Roman",	
+					"Times New Roman",
 					"Georgia",
 					"Arial",
-					"Arial Black",	
+					"Arial Black",
 					"Comic Sans MS",
-					"Impact",	
+					"Impact",
 					"Lucida Sans Unicode"
 				]
 			}
@@ -698,7 +707,7 @@
 				],
 				"default": "div"
 			}
-		},		
+		},
 		"container": true,
 		"tags": [
 			"div",
@@ -712,7 +721,7 @@
 		"props": {
 			"className": "string",
 			"text": "string",
-		"type": {
+			"type": {
 				"type": "options",
 				"default": "h1",
 				"options": [
@@ -741,4 +750,4 @@
 			"className": "string"
 		}
 	}
-}
+}

packages/standard-components/src/Input.svelte

@@ -12,7 +12,8 @@
 
   const onchange = ev => {
     if (_bb) {
-      _bb.setStateFromBinding(_bb.props.value, ev.target.value)
+      const val = type === "checkbox" ? ev.target.checked : ev.target.value
+      _bb.setBinding("value", val)
     }
   }
 </script>

packages/standard-components/src/Select.svelte

@@ -11,7 +11,7 @@
 
   const onchange = ev => {
     if (_bb) {
-      _bb.setStateFromBinding(_bb.props.value, ev.target.value)
+      _bb.setBinding("value", ev.target.value)
     }
   }
 </script>