Merging with master and fixing conflicts

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

@@ -0,0 +1,18 @@
+xcontext('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/cypress/integration/createUser.spec.js

@@ -9,7 +9,7 @@ context('Create a User', () => {
 
     // https://on.cypress.io/interacting-with-elements
     it('should create a user', () => {
-        cy.createUser('bbuser', 'test', 'ADMIN')
+        cy.createUser('bbuser', 'test', 'POWER_USER')
 
         // Check to make sure user was created!
         cy.get("input[disabled]").should('have.value', 'bbuser')

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

@@ -1,4 +1,4 @@
-xcontext('Create a workflow', () => {
+context('Create a workflow', () => {
 
     before(() => {
         cy.server()
@@ -9,7 +9,7 @@ xcontext('Create a workflow', () => {
 
     // https://on.cypress.io/interacting-with-elements
     it('should create a workflow', () => {
-        cy.createTable('dog', 'name', 'age')
+        cy.createTestTableWithData()
 
         cy.contains('workflow').click()
         cy.contains('Create New Workflow').click()
@@ -23,21 +23,23 @@ xcontext('Create a workflow', () => {
 
         // Create action
         cy.get('[data-cy=SAVE_RECORD]').click()
-        cy.get(':nth-child(2) > .budibase__input').type('goodboy')
+        cy.get('.container input').first().type('goodboy')
-        cy.get(':nth-child(3) > .budibase__input').type('11')
+        cy.get('.container input').eq(1).type('11')
 
         // Save
         cy.contains('Save Workflow').click()
 
         // Activate Workflow
         cy.get('[data-cy=activate-workflow]').click()
-
+        cy.contains("Add Record").should("be.visible")
+        cy.get(".stop-button.highlighted").should("be.visible")
     })
-    xit('should add record when a new record is added', () => {
+
+    it('should add record when a new record is added', () => {
         cy.contains('backend').click()
 
-        cy.addRecord('bob', '15')
+        cy.addRecord(["Rover", 15])
-
+        cy.reload()
         cy.contains('goodboy').should('have.text', 'goodboy')
 
     })

packages/builder/cypress/support/commands.js

@@ -57,12 +57,17 @@ Cypress.Commands.add("createApp", name => {
     })
 })
 
+Cypress.Commands.add("createTestTableWithData", () => {
+  cy.createTable("dog")
+  cy.addColumn("dog", "name", "Plain Text")
+  cy.addColumn("dog", "age", "Number")
+})
+
 Cypress.Commands.add("createTable", tableName => {
   // Enter model name
   cy.contains("Create New Table").click()
   cy.get("[placeholder='Table Name']").type(tableName)
 
-  // Add 'name' field
   cy.contains("Save").click()
   cy.contains(tableName).should("be.visible")
 })
@@ -84,7 +89,7 @@ Cypress.Commands.add("addRecord", values => {
   cy.contains("Create New Row").click()
 
   for (let i = 0; i < values.length; i++) {
-    cy.get("input")
+    cy.get(".actions input")
       .eq(i)
       .type(values[i])
   }
@@ -93,7 +98,7 @@ Cypress.Commands.add("addRecord", values => {
   cy.contains("Save").click()
 })
 
-Cypress.Commands.add("createUser", (username, password) => {
+Cypress.Commands.add("createUser", (username, password, accessLevel) => {
   // Create User
   cy.get(".toprightnav > .settings").click()
   cy.contains("Users").click()
@@ -104,9 +109,12 @@ Cypress.Commands.add("createUser", (username, password) => {
   cy.get("[name=Password]")
     .first()
     .type(password)
+  cy.get("select")
+    .first()
+    .select(accessLevel)
 
   // Save
-  cy.get(".create-button").click()
+  cy.get(".create-button > button").click()
 })
 
 Cypress.Commands.add("addHeadlineComponent", text => {

packages/builder/cypress/support/cookies.js

@@ -1,3 +1,3 @@
 Cypress.Cookies.defaults({
-  whitelist: "builder:token",
+  preserve: "builder:token",
 })

packages/builder/package.json

@@ -49,15 +49,21 @@
     ],
     "setupFilesAfterEnv": [
       "@testing-library/jest-dom/extend-expect"
+    ],
+    "setupFiles": [
+      "./scripts/jestSetup.js"
     ]
   },
   "eslintConfig": {
     "extends": [
       "plugin:cypress/recommended"
-    ]
+    ],
+    "rules": {
+      "cypress/no-unnecessary-waiting": "off"
+    }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.27.1",
+    "@budibase/bbui": "^1.29.1",
     "@budibase/client": "^0.1.19",
     "@budibase/colorpicker": "^1.0.1",
     "@sentry/browser": "5.19.1",
@@ -88,7 +94,7 @@
     "@testing-library/jest-dom": "^5.11.0",
     "@testing-library/svelte": "^3.0.0",
     "babel-jest": "^24.8.0",
-    "cypress": "^4.8.0",
+    "cypress": "^5.1.0",
     "cypress-terminal-report": "^1.4.1",
     "eslint-plugin-cypress": "^2.11.1",
     "identity-obj-proxy": "^3.0.0",

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/budibase.css

@@ -127,4 +127,30 @@
     align-items: center;
     justify-content: center;
     font-size: 20px;
-}
+}
+
+/* Table styles */
+.bb-table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+    margin-bottom: var(--spacing-xl);
+}
+
+* + .bb-table { 
+    margin-top: var(--spacing-xl)
+}
+
+.bb-table th {
+    padding: var(--spacing-l) var(--spacing-m);
+    text-align: left;
+    vertical-align: bottom;
+}
+
+.bb-table td {
+    padding: var(--spacing-l) var(--spacing-m);
+    vertical-align: top;
+}
+
+.bb-table td > :last-child { margin-bottom: 0; }
+

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"
@@ -24,6 +24,7 @@ import {
   saveScreenApi as _saveScreenApi,
   regenerateCssForCurrentScreen,
   generateNewIdsForComponent,
+  getComponentDefinition,
 } from "../storeUtils"
 export const getStore = () => {
   const initial = {
@@ -74,9 +75,6 @@ export const getStore = () => {
 
 export default getStore
 
-export const getComponentDefinition = (state, name) =>
-  name.startsWith("##") ? getBuiltin(name) : state.components[name]
-
 const setPackage = (store, initial) => async pkg => {
   const [main_screens, unauth_screens] = await Promise.all([
     api
@@ -278,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,
@@ -484,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

@@ -1,7 +1,11 @@
-import { makePropsSafe } from "components/userInterface/pagesParsing/createProps"
+import {
+  makePropsSafe,
+  getBuiltin,
+} from "components/userInterface/pagesParsing/createProps"
 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("##")
@@ -81,7 +85,11 @@ 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) =>
+  name.startsWith("##") ? getBuiltin(name) : state.components[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/common/DatePicker.svelte

@@ -26,9 +26,7 @@
 
 <div class="bb-margin-m">
   <label class="uk-form-label">{label}</label>
-  <div class="uk-form-controls">
+  <input
-    <input
+    class="uk-input uk-form-width-{width} uk-form-{size}"
-      class="uk-input uk-form-width-{width} uk-form-{size}"
+    bind:this={input} />
-      bind:this={input} />
-  </div>
 </div>

packages/builder/src/components/common/ValuesList.svelte

@@ -17,9 +17,9 @@
 
 <div class="margin">
   <label class="label">{label}</label>
-  <div class="uk-form-controls">
+
-    <textarea value={valuesText} on:change={inputChanged} />
+  <textarea value={valuesText} on:change={inputChanged} />
-  </div>
+
 </div>
 
 <style>

packages/builder/src/components/database/DataTable/ModelDataTable.svelte

@@ -63,7 +63,7 @@
       {/if}
     </div>
   </div>
-  <table class="uk-table">
+  <table class="bb-table">
     <thead>
       <tr>
         <th class="edit-header">

packages/builder/src/components/database/DataTable/Table.svelte

@@ -44,7 +44,7 @@
       <slot />
     </div>
   </div>
-  <table class="uk-table">
+  <table class="bb-table">
     <thead>
       <tr>
         {#each columns as header}

packages/builder/src/components/database/DataTable/ViewDataTable.svelte

@@ -45,8 +45,10 @@
   }
 </script>
 
-<Table title={decodeURI(view.name)} schema={view.schema} {data}>
+<Table title={decodeURI(name)} schema={view.schema} {data}>
   <FilterPopover {view} />
   <CalculationPopover {view} />
-  <GroupByPopover {view} />
+  {#if view.calculation}
+    <GroupByPopover {view} />
+  {/if}
 </Table>

packages/builder/src/components/database/DataTable/popovers/Filter.svelte

@@ -53,7 +53,6 @@
 
   let anchor
   let dropdown
-  let filters = view.filters || []
 
   $: viewModel = $backendUiStore.models.find(
     ({ _id }) => _id === $backendUiStore.selectedView.modelId
@@ -61,19 +60,18 @@
   $: fields = viewModel && Object.keys(viewModel.schema)
 
   function saveView() {
-    view.filters = filters
     backendUiStore.actions.views.save(view)
     notifier.success(`View ${view.name} saved.`)
     dropdown.hide()
   }
 
   function removeFilter(idx) {
-    filters.splice(idx, 1)
+    view.filters.splice(idx, 1)
-    filters = filters
+    view.filters = view.filters
   }
 
   function addFilter() {
-    filters = [...filters, {}]
+    view.filters = [...view.filters, {}]
   }
 </script>
 
@@ -82,7 +80,7 @@
     text
     small
     on:click={dropdown.show}
-    active={filters && filters.length}>
+    active={view.filters && view.filters.length}>
     <Icon name="filter" />
     Filter
   </TextButton>
@@ -90,7 +88,7 @@
 <Popover bind:this={dropdown} {anchor} align="left">
   <h5>Filter</h5>
   <div class="input-group-row">
-    {#each filters as filter, idx}
+    {#each view.filters as filter, idx}
       {#if idx === 0}
         <p>Where</p>
       {:else}

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/ComponentDropdownMenu.svelte

@@ -1,7 +1,7 @@
 <script>
   import { MoreIcon } from "components/common/Icons"
   import { store } from "builderStore"
-  import { getComponentDefinition } from "builderStore/store"
+  import { getComponentDefinition } from "builderStore/storeUtils"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { last, cloneDeep } from "lodash/fp"
   import UIkit from "uikit"

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

@@ -11,6 +11,11 @@
 
   export let screens = []
 
+  /* 
+  Using a store here seems odd.... 
+  have a look in the <ComponentsHierarchyChildren /> code file to find out why. 
+  I have commented the dragDropStore parameter
+  */
   const dragDropStore = writable({})
 
   let confirmDeleteDialog

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

@@ -10,11 +10,29 @@
     ChevronDownIcon,
     CopyIcon,
   } from "../common/Icons"
+  import { getComponentDefinition } from "builderStore/storeUtils"
 
   export let components = []
   export let currentComponent
   export let onSelect = () => {}
   export let level = 0
+
+  /*
+  "dragDropStore" is a svelte store.
+  This component is recursive... a tree.
+  Using a single, shared store, all the nodes in the tree can subscribe to state that is changed by other nodes, in the same tree.
+
+  e.g. Say i have the structure
+  - Heading 1
+  - Container 
+    - Heading 2
+    - Heading 3
+  - Heading 4
+
+  1. When I dragover "Heading 1", a placeholder drop-slot appears below it
+  2. I drag down a bit so the cursor is INSIDE the container (i.e. now in a child <ComponentsHierarchyChildren />)
+  3. Using store subscribes... the original drop-slot now knows that it should disappear, and a new one is created inside the container.
+  */
   export let dragDropStore
 
   let dropUnderComponent
@@ -47,7 +65,7 @@
 
   const dragover = (component, index) => e => {
     const canHaveChildrenButIsEmpty =
-      $store.components[component._component].children &&
+      getComponentDefinition($store, component._component).children &&
       component._children.length === 0
 
     e.dataTransfer.dropEffect = "copy"
@@ -97,6 +115,15 @@
       return s
     })
   }
+
+  const dragend = () => {
+    dragDropStore.update(s => {
+      s.dropPosition = ""
+      s.targetComponent = null
+      s.componentToDrop = null
+      return s
+    })
+  }
 </script>
 
 <ul>
@@ -117,6 +144,7 @@
         class:selected={currentComponent === component}
         style="padding-left: {level * 20 + 40}px"
         draggable={true}
+        on:dragend={dragend}
         on:dragstart={dragstart(component)}
         on:dragover={dragover(component, index)}
         on:drop={drop}

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 = ""
@@ -9,6 +15,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") {
@@ -18,13 +67,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
@@ -32,7 +97,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
@@ -44,10 +109,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;
@@ -73,4 +157,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

@@ -4,6 +4,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 = {}
@@ -13,6 +15,7 @@
   export let screenOrPageInstance
 
   let pageScreenProps = ["title", "favicon", "description", "route"]
+  let duplicateName = false
 
   const propExistsOnComponentDef = prop =>
     pageScreenProps.includes(prop) || prop in componentDefinition.props
@@ -42,6 +45,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}
@@ -63,7 +103,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}
@@ -89,4 +132,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

@@ -4,6 +4,7 @@ import Checkbox from "../common/Checkbox.svelte"
 import ModelSelect from "components/userInterface/ModelSelect.svelte"
 import ModelViewSelect from "components/userInterface/ModelViewSelect.svelte"
 import ModelViewFieldSelect from "components/userInterface/ModelViewFieldSelect.svelte"
+import Event from "components/userInterface/EventsEditor/EventPropertyControl.svelte"
 
 import { all } from "./propertyCategories.js"
 /* 
@@ -203,6 +204,7 @@ export default {
                 valueKey: "checked",
                 control: Checkbox,
               },
+              { label: "onClick", key: "onClick", control: Event },
             ],
           },
         },

packages/builder/src/components/workflow/SetupPanel/ParamInputs/ComponentSelector.svelte

@@ -25,21 +25,19 @@
 
 <div class="bb-margin-xl block-field">
   <label class="uk-form-label">Page</label>
-  <div class="uk-form-controls">
+
-    <select class="budibase__input" bind:value={pageName}>
+  <select class="budibase__input" bind:value={pageName}>
-      {#each Object.keys(pages) as page}
+    {#each Object.keys(pages) as page}
-        <option value={page}>{page}</option>
+      <option value={page}>{page}</option>
-      {/each}
+    {/each}
-    </select>
+  </select>
-  </div>
+
   {#if components.length > 0}
     <label class="uk-form-label">Component</label>
-    <div class="uk-form-controls">
+    <select class="budibase__input" bind:value>
-      <select class="budibase__input" bind:value>
+      {#each components as component}
-        {#each components as component}
+        <option value={component._id}>{component._id}</option>
-          <option value={component._id}>{component._id}</option>
+      {/each}
-        {/each}
+    </select>
-      </select>
-    </div>
   {/if}
 </div>

packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte

@@ -5,12 +5,10 @@
 </script>
 
 <div class="bb-margin-xl block-field">
-  <div class="uk-form-controls">
+  <select class="budibase__input" bind:value>
-    <select class="budibase__input" bind:value>
+    <option value="" />
-      <option value="" />
+    {#each $backendUiStore.models as model}
-      {#each $backendUiStore.models as model}
+      <option value={model}>{model.name}</option>
-        <option value={model}>{model.name}</option>
+    {/each}
-      {/each}
+  </select>
-    </select>
-  </div>
 </div>

packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte

@@ -3,24 +3,36 @@
   import { Input } from "@budibase/bbui"
 
   export let value
+
+  function setParsedValue(evt, field) {
+    const fieldSchema = value.model.schema[field]
+    if (fieldSchema.type === "number") {
+      value[field] = parseInt(evt.target.value)
+      return
+    }
+
+    value[field] = evt.target.value
+  }
 </script>
 
 <div class="bb-margin-xl block-field">
-  <div class="uk-form-controls">
+  <select class="budibase__input" bind:value={value.model}>
-    <select class="budibase__input" bind:value={value.model}>
+    {#each $backendUiStore.models as model}
-      {#each $backendUiStore.models as model}
+      <option value={model}>{model.name}</option>
-        <option value={model}>{model.name}</option>
+    {/each}
-      {/each}
+  </select>
-    </select>
-  </div>
 </div>
 
 {#if value.model}
   <div class="bb-margin-xl block-field">
     <label class="uk-form-label fields">Fields</label>
     {#each Object.keys(value.model.schema) as field}
-      <div class="uk-form-controls bb-margin-xl">
+      <div class="bb-margin-xl">
-        <Input bind:value={value[field]} label={field} />
+        <Input
+          thin
+          value={value[field]}
+          label={field}
+          on:change={e => setParsedValue(e, field)} />
       </div>
     {/each}
   </div>

packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte

@@ -44,7 +44,7 @@
     {:else if type === 'model'}
       <ModelSelector bind:value={workflowBlock.args[parameter]} />
     {:else if type === 'record'}
-      <RecordSelector bind:value={workflowBlock.args[parameter]} />
+      <RecordSelector value={workflowBlock.args[parameter]} />
     {:else if type === 'string'}
       <Input type="text" thin bind:value={workflowBlock.args[parameter]} />
     {/if}

packages/builder/src/global.css

@@ -96,6 +96,8 @@ textarea {
     cursor: pointer;
 }
 
+/* Top bottom spacing */
+
 .bb-margin-m {
     margin-bottom: var(--spacing-m);
 }

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/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",
+    "regexparam": "^1.3.0"
-    "shortid": "^2.2.8",
-    "svelte": "^3.9.2"
   },
   "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 apiCall = method => async ({ url, body }) => {
+  const response = await fetch(url, {
-    const response = await fetch(url, {
+    method: method,
-      method: method,
+    headers: {
-      headers: {
+      "Content-Type": "application/json",
-        "Content-Type": "application/json",
+    },
-      },
+    body: body && JSON.stringify(body),
-      body: body && JSON.stringify(body),
+    credentials: "same-origin",
-      credentials: "same-origin",
+  })
-    })
 
-    switch (response.status) {
+  switch (response.status) {
-      case 200:
+    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}`)
+      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),
   }
 }
+
+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 renderTemplateString from "../../state/renderTemplateString"
-import mustache from "mustache"
+import appStore from "../../state/store"
-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 childNode = prepareRenderComponent({
-        const childNodesThisIteration = prepareRenderComponent({
+        props: childProps,
-          props: childProps,
+        parentNode: treeNode,
-          parentNode: treeNode,
+        ComponentConstructor,
-          ComponentConstructor,
+        htmlElement,
-          htmlElement,
+        anchor,
-          anchor,
+        // in same context as parent, unless a new one was supplied
-          context: ctx,
+        contextStoreKey,
-        })
+      })
 
-        for (let childNode of childNodesThisIteration) {
+      childNodes.push(childNode)
-          childNodes.push(childNode)
-        }
-      }
-
-      prepareNodes(context)
     }
   }
 
+  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 renderTemplateString from "../state/renderTemplateString"
-import mustache from "mustache"
+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 = []
+  // the treeNode is first created (above), and then this
-  const createNodeAndRender = () => {
+  // render method is add. The treeNode is returned, and
-    let componentContext = parentContext
+  // render is called later (in attachChildren)
-    if (context) {
+  thisNode.render = initialProps => {
-      componentContext = { ...context }
+    thisNode.component = new ComponentConstructor({
-      componentContext.$parent = parentContext
+      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()
+    // make this node listen to the store
-    thisNode.context = componentContext
+    if (thisNode.stateBound) {
-    thisNode.parentNode = parentNode
+      const unsubscribe = appStore.subscribe(state => {
-    thisNode.props = props
+        const storeBoundProps = Object.keys(initialProps._bb.props).filter(p =>
-    nodesToRender.push(thisNode)
+          hasBinding(initialProps._bb.props[p])
-
+        )
-    thisNode.render = initialProps => {
+        if (storeBoundProps.length > 0) {
-      thisNode.component = new ComponentConstructor({
+          const toSet = {}
-        target: htmlElement,
+          for (let prop of storeBoundProps) {
-        props: initialProps,
+            const propValue = initialProps._bb.props[prop]
-        hydrate: false,
+            toSet[prop] = renderTemplateString(propValue, state)
-        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,
-              })
-            }
           }
-          thisNode.component.$set(storeBoundProps)
+          thisNode.component.$set(toSet)
-        })
+        }
-        thisNode.unsubscribe = unsubscribe
+      }, thisNode.contextStoreKey)
-      }
+      thisNode.unsubscribe = unsubscribe
     }
   }
 
-  createNodeAndRender()
+  return thisNode
-
-  return nodesToRender
 }
 
 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,
+      setBinding: setBindableComponentProp(treeNode),
-      getContext: getContext(treeNode),
-      setContext: setContext(treeNode),
-      store: store,
       api,
       parent,
       // these parameters are populated by screenRouter

packages/client/src/state/eventHandlers.js

@@ -1,8 +1,4 @@
-import { setState } from "./setState"
+import api from "../api"
-import { getState } from "./getState"
-import { isArray, isUndefined } from "lodash/fp"
-
-import { createApi } 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 renderTemplateString from "./renderTemplateString"
-import { get } from "svelte/store"
+import appStore from "./store"
-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 = hasBinding(propValue)
-    const isBound = typeof propValue === "string" && propValue.includes("{{")
 
     if (isBound) {
-      initialProps[propName] = mustache.render(propValue, {
+      const state = appStore.getState(node.contextStoreKey)
-        state: currentStoreState,
+      initialProps[propName] = renderTemplateString(propValue, state)
-        context,
-      })
 
       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, {
+            renderTemplateString(paramValue, state)
-              state: getCurrentState(),
-              context,
-            })
         }
 
         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({})
+// we assume that the reference to this state object
-appStore.actions = {}
+// will remain for the life of the application
+const rootState = {}
+const rootStore = writable(rootState)
+const contextStores = {}
 
-const routerStore = writable({})
+// contextProviderId is the component id that provides the data for the context
-routerStore.actions = {}
+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/server/src/api/controllers/workflow/actions/SAVE_RECORD.js

@@ -14,9 +14,8 @@ module.exports = async function saveRecord({ args, context }) {
     user: { instanceId: context.instanceId },
   }
 
-  await recordController.save(ctx)
-
   try {
+    await recordController.save(ctx)
     return {
       record: ctx.body,
     }

packages/server/yarn.lock

@@ -172,6 +172,20 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@budibase/client@^0.1.19":
+  version "0.1.19"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.19.tgz#3906781423ab4626118c981657ecf7a4578c547c"
+  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"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -354,6 +368,10 @@
     path-to-regexp "1.x"
     urijs "^1.19.2"
 
+"@nx-js/compiler-util@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297"
+
 "@sendgrid/client@^7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@sendgrid/client/-/client-7.1.1.tgz#09a25e58ac7e5321d66807e7110ff0fb61bb534f"
@@ -811,6 +829,10 @@ array-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
 
+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+
 array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@@ -869,6 +891,12 @@ atomic-sleep@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
 
+available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sdk@^2.706.0:
   version "2.706.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.706.0.tgz#09f65e9a91ecac5a635daf934082abae30eca953"
@@ -980,8 +1008,8 @@ bindings@^1.5.0:
     file-uri-to-path "1.0.0"
 
 bl@^4.0.1:
-  version "4.0.2"
+  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.2.tgz#52b71e9088515d0606d9dd9cc7aa48dc1f98e73a"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.3.tgz#12d6287adc29080e22a705e5764b2a9522cdc489"
   dependencies:
     buffer "^5.5.0"
     inherits "^2.0.4"
@@ -1537,6 +1565,25 @@ decompress-response@^3.3.0:
   dependencies:
     mimic-response "^1.0.0"
 
+deep-equal@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
+  dependencies:
+    es-abstract "^1.17.5"
+    es-get-iterator "^1.1.0"
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.2"
+    is-regex "^1.0.5"
+    isarray "^2.0.5"
+    object-is "^1.1.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.2"
+    which-boxed-primitive "^1.0.1"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.2"
+
 deep-equal@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -1863,6 +1910,51 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
+es-abstract@^1.17.4:
+  version "1.17.6"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-regex "^1.1.0"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-abstract@^1.18.0-next.0:
+  version "1.18.0-next.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.0.tgz#b302834927e624d8e5837ed48224291f2c66e6fc"
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-negative-zero "^2.0.0"
+    is-regex "^1.1.1"
+    object-inspect "^1.8.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-get-iterator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
+  dependencies:
+    es-abstract "^1.17.4"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -2753,16 +2845,28 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-arguments@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
 
+is-bigint@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
   dependencies:
     binary-extensions "^2.0.0"
 
+is-boolean-object@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -2771,6 +2875,10 @@ is-callable@^1.1.4, is-callable@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
 
+is-callable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
+
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -2793,7 +2901,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
 
@@ -2856,10 +2964,22 @@ is-installed-globally@^0.3.1:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
+is-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
+
+is-negative-zero@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
+
 is-npm@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
 
+is-number-object@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -2890,10 +3010,24 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
+is-regex@^1.1.0, is-regex@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
+  dependencies:
+    has-symbols "^1.0.1"
+
+is-set@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
+
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
+is-string@^1.0.4, is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@@ -2908,10 +3042,27 @@ is-type-of@^1.0.0:
     is-class-hotfix "~0.0.6"
     isstream "~0.1.2"
 
+is-typed-array@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
+  dependencies:
+    available-typed-arrays "^1.0.0"
+    es-abstract "^1.17.4"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+
+is-weakset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -2932,6 +3083,10 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+
 isbinaryfile@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@@ -3871,6 +4026,10 @@ ltgt@~2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.1.3.tgz#10851a06d9964b971178441c23c9e52698eece34"
 
+lunr@^2.3.5:
+  version "2.3.9"
+  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1"
+
 make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -4035,6 +4194,10 @@ nan@^2.12.1:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
 
+nanoid@^2.1.0:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -4182,6 +4345,17 @@ object-inspect@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
 
+object-inspect@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
+
+object-is@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -4828,6 +5002,17 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
+regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@@ -4996,10 +5181,14 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
+safe-buffer@^5.0.1, safe-buffer@^5.1.2:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
 
+safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@@ -5119,6 +5308,19 @@ shellwords@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
 
+shortid@^2.2.8:
+  version "2.2.15"
+  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
+  dependencies:
+    nanoid "^2.1.0"
+
+side-channel@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
+  dependencies:
+    es-abstract "^1.18.0-next.0"
+    object-inspect "^1.8.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -5335,7 +5537,7 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.trimend@^1.0.0:
+string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
   dependencies:
@@ -5358,7 +5560,7 @@ string.prototype.trimright@^2.1.1:
     es-abstract "^1.17.5"
     string.prototype.trimend "^1.0.0"
 
-string.prototype.trimstart@^1.0.0:
+string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
   dependencies:
@@ -5476,6 +5678,10 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svelte@^3.9.2:
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
+
 symbol-tree@^3.2.2:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@@ -5908,10 +6114,40 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
+which-boxed-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
+  dependencies:
+    is-bigint "^1.0.0"
+    is-boolean-object "^1.0.0"
+    is-number-object "^1.0.3"
+    is-string "^1.0.4"
+    is-symbol "^1.0.2"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
+which-typed-array@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    es-abstract "^1.17.5"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"

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"
 				]
 			}
 		}
@@ -392,7 +401,7 @@
 			"lineGradient": "string",
 			"titleText": "string",
 			"valueLabel": "string"
-		}	
+		}
 	},
 	"stackedbar": {
 		"description": "Stacked Bar Chart",
@@ -421,7 +430,7 @@
 			"yAxisLabel": "string",
 			"yAxisLabelOffset": "number",
 			"useLegend": "bool"
-		}		
+		}
 	},
 	"stackarea": {
 		"description": "Step Chart",
@@ -450,7 +459,7 @@
 			"xAxisCustomFormat": "string",
 			"xAxisFormat": "string",
 			"xAxisScale": "string",
-			"xAxisValueType":"string",
+			"xAxisValueType": "string",
 			"yTicks": "number",
 			"xTicks": "number",
 			"yAxisBaseline": "string",
@@ -468,14 +477,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",
@@ -491,7 +500,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",
@@ -587,8 +596,8 @@
 			"color": "string",
 			"height": "string",
 			"width": "string",
-			"margin":"string",
+			"margin": "string",
-			"grid":"string",
+			"grid": "string",
 			"groupLabel": "string",
 			"isAnimated": "bool",
 			"isHorizontal": "bool",
@@ -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>