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(':nth-child(3) > .budibase__input').type('11')
+        cy.get('.container input').first().type('goodboy')
+        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', () => {
-        cy.contains('backend').click()
 
-        cy.addRecord('bob', '15')
+    it('should add record when a new record is added', () => {
+        cy.contains('backend').click()
 
+        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
-      class="uk-input uk-form-width-{width} uk-form-{size}"
-      bind:this={input} />
-  </div>
+  <input
+    class="uk-input uk-form-width-{width} uk-form-{size}"
+    bind:this={input} />
 </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} />
-  </div>
+
+  <textarea value={valuesText} on:change={inputChanged} />
+
 </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)
-    filters = filters
+    view.filters.splice(idx, 1)
+    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}>
-      {#each Object.keys(pages) as page}
-        <option value={page}>{page}</option>
-      {/each}
-    </select>
-  </div>
+
+  <select class="budibase__input" bind:value={pageName}>
+    {#each Object.keys(pages) as page}
+      <option value={page}>{page}</option>
+    {/each}
+  </select>
+
   {#if components.length > 0}
     <label class="uk-form-label">Component</label>
-    <div class="uk-form-controls">
-      <select class="budibase__input" bind:value>
-        {#each components as component}
-          <option value={component._id}>{component._id}</option>
-        {/each}
-      </select>
-    </div>
+    <select class="budibase__input" bind:value>
+      {#each components as component}
+        <option value={component._id}>{component._id}</option>
+      {/each}
+    </select>
   {/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>
-      <option value="" />
-      {#each $backendUiStore.models as model}
-        <option value={model}>{model.name}</option>
-      {/each}
-    </select>
-  </div>
+  <select class="budibase__input" bind:value>
+    <option value="" />
+    {#each $backendUiStore.models as model}
+      <option value={model}>{model.name}</option>
+    {/each}
+  </select>
 </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}>
-      {#each $backendUiStore.models as model}
-        <option value={model}>{model.name}</option>
-      {/each}
-    </select>
-  </div>
+  <select class="budibase__input" bind:value={value.model}>
+    {#each $backendUiStore.models as model}
+      <option value={model}>{model.name}</option>
+    {/each}
+  </select>
 </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">
-        <Input bind:value={value[field]} label={field} />
+      <div class="bb-margin-xl">
+        <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/builder/yarn.lock

@@ -688,15 +688,17 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.27.1":
-  version "1.27.1"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.27.1.tgz#79625cb4235a6f0dad07338a05f1525de7ccade3"
+"@budibase/bbui@^1.29.1":
+  version "1.29.1"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.29.1.tgz#edaa6c7ce43a71d94460f7a3669ade1d4523333e"
+  integrity sha512-t8zxP7IIHQ4CMT+CRZWUvMgD6NC01J/dwH+pBerR8lJPSygmCOmrDy3ySfSmqcIhzjCbPIVtk32UKnXFqHtzRQ==
   dependencies:
     sirv-cli "^0.4.6"
 
 "@budibase/client@^0.1.19":
   version "0.1.19"
   resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.19.tgz#3906781423ab4626118c981657ecf7a4578c547c"
+  integrity sha512-crxnLgebsh6CR0aMleDahY/1vFPbveG6JuSS/EVZeoBmckzK8hwiUQYQhIlf68nZfzWsCE/M9TX7SJxsrKY3bQ==
   dependencies:
     "@nx-js/compiler-util" "^2.0.0"
     bcryptjs "^2.4.3"
@@ -719,18 +721,20 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@cypress/listr-verbose-renderer@0.4.1":
+"@cypress/listr-verbose-renderer@^0.4.1":
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/@cypress/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#a77492f4b11dcc7c446a34b3e28721afd33c642a"
+  integrity sha1-p3SS9LEdzHxEajSz4ochr9M8ZCo=
   dependencies:
     chalk "^1.1.3"
     cli-cursor "^1.0.2"
     date-fns "^1.27.2"
     figures "^1.7.0"
 
-"@cypress/request@2.88.5":
+"@cypress/request@^2.88.5":
   version "2.88.5"
   resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.5.tgz#8d7ecd17b53a849cfd5ab06d5abe7d84976375d7"
+  integrity sha512-TzEC1XMi1hJkywWpRfD2clreTa/Z+lOrXDCxxBTBPEcY5azdPi56A6Xw+O4tWJnaJH3iIE7G5aDXZC6JgRZLcA==
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.8.0"
@@ -753,9 +757,10 @@
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
-"@cypress/xvfb@1.2.4":
+"@cypress/xvfb@^1.2.4":
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/@cypress/xvfb/-/xvfb-1.2.4.tgz#2daf42e8275b39f4aa53c14214e557bd14e7748a"
+  integrity sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==
   dependencies:
     debug "^3.1.0"
     lodash.once "^4.1.1"
@@ -960,6 +965,7 @@
 "@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"
+  integrity sha512-AxSQbwj9zqt8DYPZ6LwZdytqnwfiOEdcFdq4l8sdjkZmU2clTht7RDLCI8xvkp7KqgcNaOGlTeCM55TULWruyQ==
 
 "@polka/url@^0.5.0":
   version "0.5.0"
@@ -1204,13 +1210,15 @@
   dependencies:
     "@types/node" "*"
 
-"@types/sinonjs__fake-timers@6.0.1":
+"@types/sinonjs__fake-timers@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.1.tgz#681df970358c82836b42f989188d133e218c458e"
+  integrity sha512-yYezQwGWty8ziyYLdZjwxyMb0CZR49h8JALHGrxjQHWlqGgc8kLdHEgWrgL0uZ29DMvEVBDnHU2Wg36zKSIUtA==
 
-"@types/sizzle@2.3.2":
+"@types/sizzle@^2.3.2":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47"
+  integrity sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==
 
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
@@ -1346,9 +1354,10 @@ anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-arch@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.1.tgz#8f5c2731aa35a30929221bb0640eed65175ec84e"
+arch@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.2.tgz#0c52bbe7344bb4fa260c443d2cbad9c00ff2f0bf"
+  integrity sha512-NTBIIbAfkJeIletyABbVtdPgeKfDafR+1mZV/AyyfC1UkVkp9iUjV+wwmqtUgphHYajbI86jejBJp5e+jkGTiQ==
 
 argparse@^1.0.7:
   version "1.0.10"
@@ -1382,6 +1391,7 @@ array-equal@^1.0.0:
 array-filter@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
 
 array-union@^2.1.0:
   version "2.1.0"
@@ -1421,9 +1431,10 @@ async-limiter@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
 
-async@^3.1.0:
+async@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.0.tgz#b3a2685c5ebb641d3de02d161002c60fc9f85720"
+  integrity sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==
 
 asynckit@^0.4.0:
   version "0.4.0"
@@ -1440,6 +1451,7 @@ atob@^2.1.2:
 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"
+  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
   dependencies:
     array-filter "^1.0.0"
 
@@ -1520,6 +1532,7 @@ bcrypt-pbkdf@^1.0.0:
 bcryptjs@^2.4.3:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/bcryptjs/-/bcryptjs-2.4.3.tgz#9ab5627b93e60621ff7cdac5da9733027df1d0cb"
+  integrity sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms=
 
 binary-extensions@^2.0.0:
   version "2.0.0"
@@ -1537,7 +1550,12 @@ bl@~0.8.1:
   dependencies:
     readable-stream "~1.0.26"
 
-bluebird@3.7.2:
+blob-util@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
+  integrity sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==
+
+bluebird@3.7.2, bluebird@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
 
@@ -1710,9 +1728,10 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
-cachedir@2.3.0:
+cachedir@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
+  integrity sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==
 
 callsites@^3.0.0:
   version "3.1.0"
@@ -1740,14 +1759,6 @@ caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
 
-chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
 chalk@^1.0.0, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -1758,6 +1769,14 @@ chalk@^1.0.0, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
 chalk@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
@@ -1765,11 +1784,19 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@^4.0.0, chalk@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
+  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 cheap-watch@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/cheap-watch/-/cheap-watch-1.0.2.tgz#bfa648aea6bcd15e9fe4dce4ac760ab81cd0133c"
 
-check-more-types@2.24.0:
+check-more-types@2.24.0, check-more-types@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
 
@@ -1823,12 +1850,13 @@ cli-cursor@^2.0.0, cli-cursor@^2.1.0:
   dependencies:
     restore-cursor "^2.0.0"
 
-cli-table3@0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.5.1.tgz#0252372d94dfc40dbd8df06005f48f31f656f202"
+cli-table3@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.0.tgz#b7b1bc65ca8e7b5cef9124e13dc2b21e2ce4faee"
+  integrity sha512-gnB85c3MGC7Nm9I/FkiasNBOKjOiO1RNuXXarQms37q4QMpWdlbBgD/VnOStA2faG1dpXMv31RFApjX1/QdgWQ==
   dependencies:
     object-assign "^4.1.0"
-    string-width "^2.1.1"
+    string-width "^4.2.0"
   optionalDependencies:
     colors "^1.1.2"
 
@@ -1904,17 +1932,19 @@ commander@2, commander@^2.19.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
 
-commander@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.0.tgz#545983a0603fe425bc672d66c9e3c89c42121a83"
+commander@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
 commander@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
 
-common-tags@1.8.0:
+common-tags@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
+  integrity sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==
 
 component-emitter@^1.2.1:
   version "1.3.0"
@@ -2078,47 +2108,49 @@ cypress-terminal-report@^1.4.1:
     chalk "^3.0.0"
     methods "^1.1.2"
 
-cypress@^4.8.0:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-4.8.0.tgz#8fe731db77f39310511d83e81439d06ae3388554"
-  dependencies:
-    "@cypress/listr-verbose-renderer" "0.4.1"
-    "@cypress/request" "2.88.5"
-    "@cypress/xvfb" "1.2.4"
-    "@types/sinonjs__fake-timers" "6.0.1"
-    "@types/sizzle" "2.3.2"
-    arch "2.1.1"
-    bluebird "3.7.2"
-    cachedir "2.3.0"
-    chalk "2.4.2"
-    check-more-types "2.24.0"
-    cli-table3 "0.5.1"
-    commander "4.1.0"
-    common-tags "1.8.0"
-    debug "4.1.1"
-    eventemitter2 "4.1.2"
-    execa "1.0.0"
-    executable "4.1.1"
-    extract-zip "1.7.0"
-    fs-extra "8.1.0"
-    getos "3.1.4"
-    is-ci "2.0.0"
-    is-installed-globally "0.1.0"
-    lazy-ass "1.6.0"
-    listr "0.14.3"
-    lodash "4.17.15"
-    log-symbols "3.0.0"
-    minimist "1.2.5"
-    moment "2.24.0"
-    ospath "1.2.2"
-    pretty-bytes "5.3.0"
-    ramda "0.26.1"
-    request-progress "3.0.0"
-    supports-color "7.1.0"
-    tmp "0.1.0"
-    untildify "4.0.0"
-    url "0.11.0"
-    yauzl "2.10.0"
+cypress@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-5.1.0.tgz#979e9ff3e0acd792eefd365bf104046479a9643b"
+  integrity sha512-craPRO+Viu4268s7eBvX5VJW8aBYcAQT+EwEccQSMY+eH1ZPwnxIgyDlmMWvxLVX9SkWxOlZbEycPyzanQScBQ==
+  dependencies:
+    "@cypress/listr-verbose-renderer" "^0.4.1"
+    "@cypress/request" "^2.88.5"
+    "@cypress/xvfb" "^1.2.4"
+    "@types/sinonjs__fake-timers" "^6.0.1"
+    "@types/sizzle" "^2.3.2"
+    arch "^2.1.2"
+    blob-util "2.0.2"
+    bluebird "^3.7.2"
+    cachedir "^2.3.0"
+    chalk "^4.1.0"
+    check-more-types "^2.24.0"
+    cli-table3 "~0.6.0"
+    commander "^4.1.1"
+    common-tags "^1.8.0"
+    debug "^4.1.1"
+    eventemitter2 "^6.4.2"
+    execa "^4.0.2"
+    executable "^4.1.1"
+    extract-zip "^1.7.0"
+    fs-extra "^9.0.1"
+    getos "^3.2.1"
+    is-ci "^2.0.0"
+    is-installed-globally "^0.3.2"
+    lazy-ass "^1.6.0"
+    listr "^0.14.3"
+    lodash "^4.17.19"
+    log-symbols "^4.0.0"
+    minimist "^1.2.5"
+    moment "^2.27.0"
+    ospath "^1.2.2"
+    pretty-bytes "^5.3.0"
+    ramda "~0.26.1"
+    request-progress "^3.0.0"
+    supports-color "^7.1.0"
+    tmp "~0.2.1"
+    untildify "^4.0.0"
+    url "^0.11.0"
+    yauzl "^2.10.0"
 
 d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0:
   version "1.2.4"
@@ -2395,6 +2427,7 @@ decode-uri-component@^0.2.0:
 deep-equal@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
+  integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
   dependencies:
     es-abstract "^1.17.5"
     es-get-iterator "^1.1.0"
@@ -2542,6 +2575,11 @@ emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
 
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
 end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -2579,6 +2617,7 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
 es-abstract@^1.17.4:
   version "1.17.6"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
+  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
   dependencies:
     es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
@@ -2592,9 +2631,28 @@ es-abstract@^1.17.4:
     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"
+  integrity sha512-elZXTZXKn51hUBdJjSZGYRujuzilgXo8vSPQzjGYXLvSlGiCo8VO8ZGV3kjo9a0WNJJ57hENagwbtlRuHuzkcQ==
+  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"
+  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
   dependencies:
     es-abstract "^1.17.4"
     has-symbols "^1.0.1"
@@ -2669,9 +2727,10 @@ event-stream@=3.3.4:
     stream-combiner "~0.0.4"
     through "~2.3.1"
 
-eventemitter2@4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-4.1.2.tgz#0e1a8477af821a6ef3995b311bf74c23a5247f15"
+eventemitter2@^6.4.2:
+  version "6.4.3"
+  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.3.tgz#35c563619b13f3681e7eb05cbdaf50f56ba58820"
+  integrity sha512-t0A2msp6BzOf+QAcI6z9XMktLj52OjGQg+8SJH6v5+3uxNpWYRR3wQmfA+6xtMU9kOC59qk9licus5dYcrYkMQ==
 
 evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
   version "1.0.3"
@@ -2684,7 +2743,22 @@ exec-sh@^0.3.2:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.4.tgz#3a018ceb526cc6f6df2bb504b2bfe8e3a4934ec5"
 
-execa@1.0.0, execa@^1.0.0:
+execa@3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-3.4.0.tgz#c08ed4550ef65d858fac269ffc8572446f37eb89"
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    p-finally "^2.0.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
+execa@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
   dependencies:
@@ -2696,9 +2770,10 @@ execa@1.0.0, execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-execa@3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-3.4.0.tgz#c08ed4550ef65d858fac269ffc8572446f37eb89"
+execa@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.3.tgz#0a34dabbad6d66100bd6f2c576c8669403f317f2"
+  integrity sha512-WFDXGHckXPWZX19t1kCsXzOpqX9LWYNqn4C+HqZlk/V0imTkzJZqf87ZBhvpHaftERYknpk0fjSylnXVlVgI0A==
   dependencies:
     cross-spawn "^7.0.0"
     get-stream "^5.0.0"
@@ -2707,13 +2782,13 @@ execa@3.4.0:
     merge-stream "^2.0.0"
     npm-run-path "^4.0.0"
     onetime "^5.1.0"
-    p-finally "^2.0.0"
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
-executable@4.1.1:
+executable@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c"
+  integrity sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==
   dependencies:
     pify "^2.2.0"
 
@@ -2778,9 +2853,10 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-extract-zip@1.7.0:
+extract-zip@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.7.0.tgz#556cc3ae9df7f452c493a0cfb51cc30277940927"
+  integrity sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==
   dependencies:
     concat-stream "^1.6.2"
     debug "^2.6.9"
@@ -2906,6 +2982,7 @@ for-in@^1.0.2:
 foreach@^2.0.5, foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
 
 forever-agent@~0.6.1:
   version "0.6.1"
@@ -2929,7 +3006,7 @@ from@~0:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
 
-fs-extra@8.1.0, fs-extra@^8.1.0:
+fs-extra@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
   dependencies:
@@ -2946,6 +3023,16 @@ fs-extra@^9.0.0:
     jsonfile "^6.0.1"
     universalify "^1.0.0"
 
+fs-extra@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc"
+  integrity sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^1.0.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -2999,11 +3086,12 @@ get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
 
-getos@3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/getos/-/getos-3.1.4.tgz#29cdf240ed10a70c049add7b6f8cb08c81876faf"
+getos@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/getos/-/getos-3.2.1.tgz#0134d1f4e00eb46144c5a9c0ac4dc087cbb27dc5"
+  integrity sha512-U56CfOK17OKgTVqozZjUKNdkfEv6jk5WISBJ8SHoagjE6L69zOwl3Z+O8myjY9MEW3i2HPWQBt/LTbCgcC973Q==
   dependencies:
-    async "^3.1.0"
+    async "^3.2.0"
 
 getpass@^0.1.1:
   version "0.1.7"
@@ -3028,11 +3116,12 @@ glob@^7.1.1, glob@^7.1.2, glob@^7.1.3:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-global-dirs@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445"
+global-dirs@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-2.0.1.tgz#acdf3bb6685bcd55cb35e8a052266569e9469201"
+  integrity sha512-5HqUqdhkEovj2Of/ms3IeS/EekcO54ytHRLV4PEY2rhRwrHXLQjeVEES0Lhka0xwNDtGYn58wyC4s5+MHsOO6A==
   dependencies:
-    ini "^1.3.4"
+    ini "^1.3.5"
 
 globals@^11.1.0, globals@^11.12.0:
   version "11.12.0"
@@ -3241,9 +3330,10 @@ inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1,
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
 
-ini@^1.3.4:
+ini@^1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
 
 invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
@@ -3270,6 +3360,7 @@ is-accessor-descriptor@^1.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"
+  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
 
 is-arrayish@^0.2.1:
   version "0.2.1"
@@ -3278,6 +3369,7 @@ is-arrayish@^0.2.1:
 is-bigint@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
+  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
 
 is-binary-path@~2.1.0:
   version "2.1.0"
@@ -3288,6 +3380,7 @@ is-binary-path@~2.1.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"
+  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
 
 is-buffer@^1.1.5:
   version "1.1.6"
@@ -3300,8 +3393,9 @@ is-callable@^1.1.4, is-callable@^1.1.5:
 is-callable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
+  integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
 
-is-ci@2.0.0, is-ci@^2.0.0:
+is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
   dependencies:
@@ -3363,6 +3457,11 @@ is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
 
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
 is-generator-fn@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
@@ -3373,12 +3472,18 @@ is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-is-installed-globally@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
+is-installed-globally@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141"
+  integrity sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==
   dependencies:
-    global-dirs "^0.1.0"
-    is-path-inside "^1.0.0"
+    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"
+  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
 
 is-map@^2.0.1:
   version "2.0.1"
@@ -3388,9 +3493,15 @@ is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
 
+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"
+  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
+
 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"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
 
 is-number@^3.0.0:
   version "3.0.0"
@@ -3412,11 +3523,10 @@ is-observable@^1.1.0:
   dependencies:
     symbol-observable "^1.1.0"
 
-is-path-inside@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
-  dependencies:
-    path-is-inside "^1.0.1"
+is-path-inside@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.2.tgz#f5220fc82a3e233757291dddc9c5877f2a1f3017"
+  integrity sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==
 
 is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
@@ -3450,15 +3560,17 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
-is-regex@^1.1.0:
+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"
+  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
   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"
+  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
 
 is-stream@^1.1.0:
   version "1.1.0"
@@ -3471,6 +3583,7 @@ is-stream@^2.0.0:
 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"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
 
 is-symbol@^1.0.2:
   version "1.0.3"
@@ -3481,6 +3594,7 @@ is-symbol@^1.0.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"
+  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
   dependencies:
     available-typed-arrays "^1.0.0"
     es-abstract "^1.17.4"
@@ -3494,10 +3608,12 @@ is-typedarray@~1.0.0:
 is-weakmap@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
 
 is-weakset@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
 
 is-windows@^1.0.2:
   version "1.0.2"
@@ -3522,6 +3638,7 @@ isarray@1.0.0, isarray@~1.0.0:
 isarray@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
 
 isbuffer@~0.0.0:
   version "0.0.0"
@@ -4091,7 +4208,7 @@ kleur@^3.0.0, kleur@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
 
-lazy-ass@1.6.0:
+lazy-ass@1.6.0, lazy-ass@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
 
@@ -4222,9 +4339,10 @@ listr-verbose-renderer@^0.5.0:
     date-fns "^1.27.2"
     figures "^2.0.0"
 
-listr@0.14.3:
+listr@^0.14.3:
   version "0.14.3"
   resolved "https://registry.yarnpkg.com/listr/-/listr-0.14.3.tgz#2fea909604e434be464c50bddba0d496928fa586"
+  integrity sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==
   dependencies:
     "@samverschueren/stream-to-observable" "^0.3.0"
     is-observable "^1.1.0"
@@ -4292,15 +4410,14 @@ lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
 
-lodash@4.17.15, lodash@^4.17.13, lodash@^4.17.15:
+lodash@^4.17.13, lodash@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
 
-log-symbols@3.0.0, log-symbols@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
-  dependencies:
-    chalk "^2.4.2"
+lodash@^4.17.19:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
 log-symbols@^1.0.2:
   version "1.0.2"
@@ -4308,6 +4425,19 @@ log-symbols@^1.0.2:
   dependencies:
     chalk "^1.0.0"
 
+log-symbols@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
+  dependencies:
+    chalk "^2.4.2"
+
+log-symbols@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
+  integrity sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==
+  dependencies:
+    chalk "^4.0.0"
+
 log-update@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708"
@@ -4329,6 +4459,7 @@ ltgt@^2.1.2:
 lunr@^2.3.5:
   version "2.3.9"
   resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1"
+  integrity sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==
 
 magic-string@^0.22.5:
   version "0.22.5"
@@ -4465,7 +4596,7 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@1.2.5, minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
+minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
 
@@ -4482,9 +4613,10 @@ mkdirp@^0.5.1, mkdirp@^0.5.4:
   dependencies:
     minimist "^1.2.5"
 
-moment@2.24.0:
-  version "2.24.0"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+moment@^2.27.0:
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.27.0.tgz#8bff4e3e26a236220dfe3e36de756b6ebaa0105d"
+  integrity sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==
 
 mri@^1.1.0:
   version "1.1.6"
@@ -4627,9 +4759,15 @@ 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"
+  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
+
 object-is@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
+  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
   dependencies:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
@@ -4719,9 +4857,10 @@ optionator@^0.8.1:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/opts/-/opts-1.2.7.tgz#4de4721d592c96901dae623a438c988e9ea7779f"
 
-ospath@1.2.2:
+ospath@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/ospath/-/ospath-1.2.2.tgz#1276639774a3f8ef2572f7fe4280e0ea4550c07b"
+  integrity sha1-EnZjl3Sj+O8lcvf+QoDg6kVQwHs=
 
 p-each-series@^1.0.0:
   version "1.0.0"
@@ -4830,10 +4969,6 @@ path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
 
-path-is-inside@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
-
 path-key@^2.0.0, path-key@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
@@ -4930,9 +5065,10 @@ prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
 
-pretty-bytes@5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
+pretty-bytes@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"
+  integrity sha512-s1Iam6Gwz3JI5Hweaz4GoCD1WUNUIyzePFy5+Js2hjwGVt2Z79wNN+ZKOZ2vB6C+Xs6njyB84Z1IthQg8d9LxA==
 
 pretty-format@^24.9.0:
   version "24.9.0"
@@ -5027,9 +5163,10 @@ querystring@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
-ramda@0.26.1:
+ramda@~0.26.1:
   version "0.26.1"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
+  integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
 
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
@@ -5151,6 +5288,7 @@ regex-not@^1.0.0, regex-not@^1.0.2:
 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"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
   dependencies:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
@@ -5158,6 +5296,7 @@ regexp.prototype.flags@^1.3.0:
 regexparam@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
 
 regexpu-core@^4.7.0:
   version "4.7.0"
@@ -5192,9 +5331,10 @@ repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
 
-request-progress@3.0.0:
+request-progress@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-3.0.0.tgz#4ca754081c7fec63f505e4faa825aa06cd669dbe"
+  integrity sha1-TKdUCBx/7GP1BeT6qCWqBs1mnb4=
   dependencies:
     throttleit "^1.0.0"
 
@@ -5305,7 +5445,7 @@ rimraf@^2.5.4, rimraf@^2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^3.0.2:
+rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   dependencies:
@@ -5552,15 +5692,17 @@ shellwords@^0.1.1:
 shortid@^2.2.15, shortid@^2.2.8:
   version "2.2.15"
   resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
+  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
   dependencies:
     nanoid "^2.1.0"
 
 side-channel@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
+  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
   dependencies:
-    es-abstract "^1.17.0-next.1"
-    object-inspect "^1.7.0"
+    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"
@@ -5780,6 +5922,15 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
+string-width@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
+  integrity sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.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"
@@ -5844,6 +5995,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
+  dependencies:
+    ansi-regex "^5.0.0"
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -5862,12 +6020,6 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
-supports-color@7.1.0, supports-color@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
-  dependencies:
-    has-flag "^4.0.0"
-
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -5884,6 +6036,12 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  dependencies:
+    has-flag "^4.0.0"
+
 svelte-jester@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/svelte-jester/-/svelte-jester-1.0.6.tgz#a95da31acdcdd339468745c05c63fd0b52acff93"
@@ -5905,6 +6063,7 @@ svelte@3.23.x:
 svelte@^3.9.2:
   version "3.24.1"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
+  integrity sha512-OX/IBVUJSFo1rnznXdwf9rv6LReJ3qQ0PwRjj76vfUWyTfbHbR9OXqJBnUrpjyis2dwYcbT2Zm1DFjOOF1ZbbQ==
 
 symbol-observable@^1.1.0:
   version "1.2.0"
@@ -5951,11 +6110,12 @@ tinydate@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/tinydate/-/tinydate-1.3.0.tgz#e6ca8e5a22b51bb4ea1c3a2a4fd1352dbd4c57fb"
 
-tmp@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.1.0.tgz#ee434a4e22543082e294ba6201dcc6eafefa2877"
+tmp@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
+  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
   dependencies:
-    rimraf "^2.6.3"
+    rimraf "^3.0.0"
 
 tmpl@1.0.x:
   version "1.0.4"
@@ -6099,9 +6259,10 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
-untildify@4.0.0:
+untildify@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
+  integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
 
 uri-js@^4.2.2:
   version "4.2.2"
@@ -6113,9 +6274,10 @@ urix@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
 
-url@0.11.0:
+url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
   dependencies:
     punycode "1.3.2"
     querystring "0.2.0"
@@ -6244,6 +6406,7 @@ whatwg-url@^8.0.0:
 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"
+  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
   dependencies:
     is-bigint "^1.0.0"
     is-boolean-object "^1.0.0"
@@ -6254,6 +6417,7 @@ which-boxed-primitive@^1.0.1:
 which-collection@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
   dependencies:
     is-map "^2.0.1"
     is-set "^2.0.1"
@@ -6267,6 +6431,7 @@ which-module@^2.0.0:
 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"
+  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
   dependencies:
     available-typed-arrays "^1.0.2"
     es-abstract "^1.17.5"
@@ -6393,7 +6558,7 @@ yargs@^13.3.0:
     y18n "^4.0.0"
     yargs-parser "^13.1.2"
 
-yauzl@2.10.0, yauzl@^2.10.0:
+yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
   dependencies:

packages/client/package.json

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

packages/client/rollup.config.js

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

packages/client/src/api/authenticate.js

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

packages/client/src/api/index.js

@@ -1,62 +1,59 @@
 import { authenticate } from "./authenticate"
 import { triggerWorkflow } from "./workflow"
-
-export const createApi = ({ setState, getState }) => {
-  const apiCall = method => async ({ url, body }) => {
-    const response = await fetch(url, {
-      method: method,
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: body && JSON.stringify(body),
-      credentials: "same-origin",
-    })
-
-    switch (response.status) {
-      case 200:
+import appStore from "../state/store"
+
+const apiCall = method => async ({ url, body }) => {
+  const response = await fetch(url, {
+    method: method,
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: body && JSON.stringify(body),
+    credentials: "same-origin",
+  })
+
+  switch (response.status) {
+    case 200:
+      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 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 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 = {
-    setState,
-    getState,
-    isSuccess,
-    error,
-    post,
-    get,
-    patch,
-    delete: del,
-  }
+const isSuccess = obj => !obj || !obj[ERROR_MEMBER]
 
-  return {
-    authenticate: authenticate(apiOpts),
-    triggerWorkflow: triggerWorkflow(apiOpts),
-  }
+const apiOpts = {
+  isSuccess,
+  error,
+  post,
+  get,
+  patch,
+  delete: del,
+}
+
+export default {
+  authenticate: authenticate(apiOpts),
+  triggerWorkflow: triggerWorkflow(apiOpts),
 }

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

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

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

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

packages/client/src/render/attachChildren.js

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

packages/client/src/render/prepareRenderComponent.js

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

packages/client/src/render/screenRouter.js

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

packages/client/src/state/bbComponentApi.js

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

packages/client/src/state/eventHandlers.js

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

packages/client/src/state/getState.js

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

packages/client/src/state/hasBinding.js

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

packages/client/src/state/renderTemplateString.js

@@ -0,0 +1,17 @@
+import mustache from "mustache"
+
+// this is a much more liberal version of mustache's escape function
+// ...just ignoring < and > to prevent tags from user input
+// original version here https://github.com/janl/mustache.js/blob/4b7908f5c9fec469a11cfaed2f2bed23c84e1c5c/mustache.js#L78
+
+const entityMap = {
+  "<": "&lt;",
+  ">": "&gt;",
+}
+
+mustache.escape = text =>
+  String(text).replace(/[&<>"'`=/]/g, function fromEntityMap(s) {
+    return entityMap[s]
+  })
+
+export default mustache.render

packages/client/src/state/setBindableComponentProp.js

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

packages/client/src/state/setState.js

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

packages/client/src/state/stateManager.js

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

packages/client/src/state/store.js

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

packages/client/tests/binding.spec.js

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

packages/client/tests/initialiseApp.spec.js

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

packages/client/tests/testAppDef.js

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

packages/client/tests/testComponents/container.svelte

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

packages/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"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.2.tgz#52b71e9088515d0606d9dd9cc7aa48dc1f98e73a"
+  version "4.0.3"
+  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",
-			"grid":"string",
+			"margin": "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>