Merge branch 'component-sdk' of github.com:Budibase/budibase into feature/page-refactor

2020-11-23 11:00:19 +00:00 · 2020-11-23 11:00:19 +00:00 · 6aa2e53a40
parent 6a2812f4f4 a6821814f8
commit 6aa2e53a40
137 changed files with 3470 additions and 11674 deletions
--- a/package.json
+++ b/package.json
@ -26,7 +26,7 @@
    "nuke": "rimraf ~/.budibase && npm run restore",
    "clean": "lerna clean",
    "kill-port": "kill-port 4001",
-    "dev": "npm run kill-port && node ./scripts/symlinkDev.js && lerna run --parallel dev:builder --concurrency 1",
+    "dev": "yarn run kill-port && node ./scripts/symlinkDev.js && lerna run --parallel dev:builder --concurrency 1",
    "test": "lerna run test",
    "lint": "eslint packages",
    "lint:fix": "eslint --fix packages",
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -90,6 +90,7 @@
    "@babel/preset-env": "^7.5.5",
    "@babel/runtime": "^7.5.5",
    "@rollup/plugin-alias": "^3.0.1",
+    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-json": "^4.0.3",
    "@sveltech/routify": "1.7.11",
    "@testing-library/jest-dom": "^5.11.0",
@ -104,7 +105,6 @@
    "rimraf": "^3.0.2",
    "rollup": "^2.11.2",
    "rollup-plugin-alias": "^1.5.2",
-    "rollup-plugin-commonjs": "^10.0.0",
    "rollup-plugin-copy": "^3.0.0",
    "rollup-plugin-css-only": "^2.1.0",
    "rollup-plugin-livereload": "^1.0.0",
--- a/packages/builder/rollup.config.js
+++ b/packages/builder/rollup.config.js
@ -1,7 +1,7 @@
 import alias from "@rollup/plugin-alias"
 import svelte from "rollup-plugin-svelte"
 import resolve from "rollup-plugin-node-resolve"
-import commonjs from "rollup-plugin-commonjs"
+import commonjs from "@rollup/plugin-commonjs"
 import url from "rollup-plugin-url"
 import livereload from "rollup-plugin-livereload"
 import { terser } from "rollup-plugin-terser"
@ -15,102 +15,7 @@ import json from "@rollup/plugin-json"
 import path from "path"

 const production = !process.env.ROLLUP_WATCH
-
-const lodash_fp_exports = [
-  "flow",
-  "pipe",
-  "union",
-  "reduce",
-  "isUndefined",
-  "cloneDeep",
-  "split",
-  "some",
-  "map",
-  "filter",
-  "isEmpty",
-  "countBy",
-  "includes",
-  "last",
-  "find",
-  "constant",
-  "take",
-  "first",
-  "intersection",
-  "mapValues",
-  "isNull",
-  "has",
-  "isInteger",
-  "isNumber",
-  "isString",
-  "isBoolean",
-  "isDate",
-  "isArray",
-  "isObject",
-  "clone",
-  "values",
-  "keyBy",
-  "isNaN",
-  "keys",
-  "orderBy",
-  "concat",
-  "reverse",
-  "difference",
-  "merge",
-  "flatten",
-  "each",
-  "pull",
-  "join",
-  "defaultCase",
-  "uniqBy",
-  "every",
-  "uniqWith",
-  "isFunction",
-  "groupBy",
-  "differenceBy",
-  "intersectionBy",
-  "isEqual",
-  "max",
-  "sortBy",
-  "assign",
-  "uniq",
-  "trimChars",
-  "trimCharsStart",
-  "isObjectLike",
-  "flattenDeep",
-  "indexOf",
-  "isPlainObject",
-  "toNumber",
-  "takeRight",
-  "toPairs",
-  "remove",
-  "findIndex",
-  "compose",
-  "get",
-  "tap",
-]
-
-const lodash_exports = [
-  "flow",
-  "join",
-  "replace",
-  "trim",
-  "dropRight",
-  "takeRight",
-  "head",
-  "reduce",
-  "tail",
-  "startsWith",
-  "findIndex",
-  "merge",
-  "assign",
-  "each",
-  "find",
-  "orderBy",
-  "union",
-]
-
 const outputpath = "../server/builder"
-
 const coreExternal = [
  "lodash",
  "lodash/fp",
@ -224,13 +129,7 @@ export default {
        )
      },
    }),
-    commonjs({
-      namedExports: {
-        "lodash/fp": lodash_fp_exports,
-        lodash: lodash_exports,
-        shortid: ["generate"],
-      },
-    }),
+    commonjs(),
    url({
      limit: 0,
      include: ["**/*.woff2", "**/*.png"],
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@ -19,7 +19,7 @@
  }

  const getComponentTypeName = component => {
-    let [componentName] = component._component.match(/[a-z]*$/)
+    let [componentName] = component._component.match(/[a-zA-Z]*$/)
    return componentName || "element"
  }

--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@ -11,7 +11,7 @@ export default `<html>
      *, *:before, *:after {
        box-sizing: border-box;
      }
-      .container-screenslot-placeholder {
+      [data-bb-id="container-screenslot-placeholder"] {
        display: flex;
        align-items: center;
        justify-content: center;
@ -23,7 +23,7 @@ export default `<html>
        background-color: rgba(0, 0, 0, 0.05);
        flex: 1 1 auto;
      }
-      .container-screenslot-placeholder span {
+      [data-bb-id="container-screenslot-placeholder"] span {
        display: block;
        margin-bottom: 10px;
      }
@ -46,16 +46,16 @@ export default `<html>

        selectedComponentStyle = document.createElement('style');
        document.head.appendChild(selectedComponentStyle)
-        var selectedCss = '.' + data.selectedComponentType + '-' + data.selectedComponentId + '{ border: 2px solid #0055ff;  }'
+        var selectedCss = '[data-bb-id="' + data.selectedComponentType + '-' + data.selectedComponentId + '"]'  + '{border:2px solid #0055ff !important;}'
        selectedComponentStyle.appendChild(document.createTextNode(selectedCss))

        styles = document.createElement('style')
        document.head.appendChild(styles)
        styles.appendChild(document.createTextNode(data.styles))

-        window["##BUDIBASE_FRONTEND_DEFINITION##"] = data.frontendDefinition;
+        window["##BUDIBASE_IN_BUILDER##"] = true;
        if (window.loadBudibase) {
-          loadBudibase({ window, localStorage })
+          loadBudibase()
        }
      }
      let styles
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@ -1,7 +1,7 @@
 <script>
  import { TextButton, Body, DropdownMenu, ModalContent } from "@budibase/bbui"
  import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
-  import { EVENT_TYPE_MEMBER_NAME } from "../../../../../client/src/state/eventHandlers"
+  import { EVENT_TYPE_MEMBER_NAME } from "../../../../../client/src/old/state/eventHandlers"
  import actionTypes from "./actions"
  import { createEventDispatcher } from "svelte"

--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@ -1,9 +1,8 @@
 <script>
-  import { buildStyle } from "../../helpers.js"
  export let value = ""
  export let text = ""
  export let icon = ""
-  export let onClick = value => {}
+  export let onClick = () => {}
  export let selected = false

  $: useIcon = !!icon
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
--- a/packages/client/babel.config.js
+++ b/packages/client/babel.config.js
@ -1,13 +0,0 @@
-module.exports = {
-  presets: ["@babel/preset-env"],
-  sourceMaps: "inline",
-  retainLines: true,
-  plugins: [
-    [
-      "@babel/plugin-transform-runtime",
-      {
-        regenerator: true,
-      },
-    ],
-  ],
-}
--- a/packages/client/package.json
+++ b/packages/client/package.json
@ -6,57 +6,28 @@
  "module": "dist/budibase-client.esm.mjs",
  "scripts": {
    "build": "rollup -c",
-    "test": "jest",
    "dev:builder": "rollup -cw"
  },
-  "jest": {
-    "globals": {
-      "GLOBALS": {
-        "client": "web"
-      }
-    },
-    "testURL": "http://test.com",
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/fileMock.js",
-      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
-    },
-    "moduleFileExtensions": [
-      "js",
-      "svelte"
-    ],
-    "moduleDirectories": [
-      "node_modules"
-    ],
-    "transform": {
-      "^.+js$": "babel-jest",
-      "^.+.svelte$": "svelte-jester"
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/(?!svelte).+\\.js$"
-    ]
-  },
  "dependencies": {
    "deep-equal": "^2.0.1",
    "mustache": "^4.0.1",
-    "regexparam": "^1.3.0"
+    "regexparam": "^1.3.0",
+    "svelte-spa-router": "^3.0.5"
  },
  "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-transform-runtime": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/runtime": "^7.5.5",
-    "babel-jest": "^24.8.0",
+    "@budibase/standard-components": "^0.3.8",
+    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
    "fs-extra": "^8.1.0",
-    "jest": "^24.8.0",
    "jsdom": "^16.0.1",
-    "rollup": "^1.12.0",
-    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup": "^2.33.2",
    "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",
    "svelte": "^3.29.7",
-    "svelte-jester": "^1.0.6"
+    "svelte-jester": "^1.0.6",
+    "rollup-plugin-svelte": "^6.1.1"
  },
  "gitHead": "e4e053cb6ff9a0ddc7115b44ccaa24b8ec41fb9a"
 }
--- a/packages/client/rollup.config.js
+++ b/packages/client/rollup.config.js
@ -1,7 +1,9 @@
-import resolve from "rollup-plugin-node-resolve"
-import commonjs from "rollup-plugin-commonjs"
+import commonjs from "@rollup/plugin-commonjs"
+import resolve from "@rollup/plugin-node-resolve"
 import builtins from "rollup-plugin-node-builtins"
-import nodeglobals from "rollup-plugin-node-globals"
+import svelte from "rollup-plugin-svelte"
+
+const production = !process.env.ROLLUP_WATCH

 export default {
  input: "src/index.js",
@ -19,13 +21,16 @@ export default {
    },
  ],
  plugins: [
+    svelte({
+      dev: !production,
+    }),
    resolve({
      preferBuiltins: true,
      browser: true,
+      dedupe: ["svelte", "svelte/internal"],
    }),
    commonjs(),
    builtins(),
-    nodeglobals(),
  ],
  watch: {
    clearScreen: false,
--- a/packages/client/src/api/api.js
+++ b/packages/client/src/api/api.js
@ -0,0 +1,96 @@
+import { getAppId } from "../utils"
+
+/**
+ * API cache for cached request responses.
+ */
+let cache = {}
+
+/**
+ * Makes a fully formatted URL based on the SDK configuration.
+ */
+const makeFullURL = path => {
+  return `/${path}`.replace("//", "/")
+}
+
+/**
+ * Handler for API errors.
+ */
+const handleError = error => {
+  return { error }
+}
+
+/**
+ * Performs an API call to the server.
+ * App ID header is always correctly set.
+ */
+const makeApiCall = async ({ method, url, body, json = true }) => {
+  try {
+    const requestBody = json ? JSON.stringify(body) : body
+    let headers = {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      "x-budibase-app-id": getAppId(),
+    }
+    if (!window["##BUDIBASE_IN_BUILDER##"]) {
+      headers["x-budibase-type"] = "client"
+    }
+    const response = await fetch(url, {
+      method,
+      headers,
+      body: requestBody,
+      credentials: "same-origin",
+    })
+    switch (response.status) {
+      case 200:
+        return response.json()
+      case 404:
+        return handleError(`${url}: Not Found`)
+      case 400:
+        return handleError(`${url}: Bad Request`)
+      case 403:
+        return handleError(`${url}: Forbidden`)
+      default:
+        if (response.status >= 200 && response.status < 400) {
+          return response.json()
+        }
+        return handleError(`${url} - ${response.statusText}`)
+    }
+  } catch (error) {
+    return handleError(error)
+  }
+}
+
+/**
+ * Performs an API call to the server and caches the response.
+ * Future invocation for this URL will return the cached result instead of
+ * hitting the server again.
+ */
+const makeCachedApiCall = async params => {
+  const identifier = params.url
+  if (!identifier) {
+    return null
+  }
+  if (!cache[identifier]) {
+    cache[identifier] = makeApiCall(params)
+    cache[identifier] = await cache[identifier]
+  }
+  return await cache[identifier]
+}
+
+/**
+ * Constructs an API call function for a particular HTTP method.
+ */
+const requestApiCall = method => async params => {
+  const { url, cache = false } = params
+  const fullURL = makeFullURL(url)
+  const enrichedParams = { ...params, method, url: fullURL }
+  return await (cache ? makeCachedApiCall : makeApiCall)(enrichedParams)
+}
+
+export default {
+  post: requestApiCall("POST"),
+  get: requestApiCall("GET"),
+  patch: requestApiCall("PATCH"),
+  del: requestApiCall("DELETE"),
+  error: handleError,
+}
--- a/packages/client/src/api/app.js
+++ b/packages/client/src/api/app.js
@ -0,0 +1,10 @@
+import API from "./api"
+
+/**
+ * Fetches screen definition for an app.
+ */
+export const fetchAppDefinition = async appId => {
+  return await API.get({
+    url: `/api/applications/${appId}/definition`,
+  })
+}
--- a/packages/client/src/api/attachments.js
+++ b/packages/client/src/api/attachments.js
@ -0,0 +1,12 @@
+import API from "./api"
+
+/**
+ * Uploads an attachment to the server.
+ */
+export const uploadAttachment = async data => {
+  return await API.post({
+    url: "/api/attachments/upload",
+    body: data,
+    json: false,
+  })
+}
--- a/packages/client/src/api/auth.js
+++ b/packages/client/src/api/auth.js
@ -0,0 +1,17 @@
+import API from "./api"
+
+/**
+ * Performs a log in request.
+ */
+export const logIn = async ({ username, password }) => {
+  if (!username) {
+    return API.error("Please enter your username")
+  }
+  if (!password) {
+    return API.error("Please enter your password")
+  }
+  return await API.post({
+    url: "/api/authenticate",
+    body: { username, password },
+  })
+}
--- a/packages/client/src/api/authenticate.js
+++ b/packages/client/src/api/authenticate.js
@ -1,28 +0,0 @@
-import appStore from "../state/store"
-
-export const USER_STATE_PATH = "_bbuser"
-
-export const authenticate = api => async ({ username, password }) => {
-  if (!username) {
-    api.error("Authenticate: username not set")
-    return
-  }
-
-  if (!password) {
-    api.error("Authenticate: password not set")
-    return
-  }
-
-  const user = await api.post({
-    url: "/api/authenticate",
-    body: { username, password },
-  })
-
-  // set user even if error - so it is defined at least
-  appStore.update(s => {
-    s[USER_STATE_PATH] = user
-    return s
-  })
-
-  localStorage.setItem("budibase:user", JSON.stringify(user))
-}
--- a/packages/client/src/api/datasources.js
+++ b/packages/client/src/api/datasources.js
@ -0,0 +1,31 @@
+import { fetchTableData } from "./tables"
+import { fetchViewData } from "./views"
+import { fetchRelationshipData } from "./relationships"
+import { enrichRows } from "./rows"
+
+/**
+ * Fetches all rows for a particular Budibase data source.
+ */
+export const fetchDatasource = async (datasource, dataContext) => {
+  if (!datasource || !datasource.type) {
+    return []
+  }
+
+  // Fetch all rows in data source
+  const { type, tableId, fieldName } = datasource
+  let rows = []
+  if (type === "table") {
+    rows = await fetchTableData(tableId)
+  } else if (type === "view") {
+    rows = await fetchViewData(datasource)
+  } else if (type === "link") {
+    rows = await fetchRelationshipData({
+      rowId: dataContext?.data?._id,
+      tableId: dataContext?.data?.tableId,
+      fieldName,
+    })
+  }
+
+  // Enrich rows
+  return await enrichRows(rows, tableId)
+}
--- a/packages/client/src/api/index.js
+++ b/packages/client/src/api/index.js
@ -1,120 +1,9 @@
-import { authenticate } from "./authenticate"
-import { getAppId } from "../render/getAppId"
-
-export async function baseApiCall(method, url, body) {
-  return await fetch(url, {
-    method: method,
-    headers: {
-      "Content-Type": "application/json",
-      "x-budibase-app-id": getAppId(window.document.cookie),
-      "x-budibase-type": "client",
-    },
-    body: body && JSON.stringify(body),
-    credentials: "same-origin",
-  })
-}
-
-const apiCall = method => async ({ url, body }) => {
-  const response = await baseApiCall(method, url, body)
-
-  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()
-      }
-
-      return error(`${url} - ${response.statusText}`)
-  }
-}
-
-const post = apiCall("POST")
-const get = apiCall("GET")
-const patch = apiCall("PATCH")
-const del = apiCall("DELETE")
-
-const ERROR_MEMBER = "##error"
-const error = message => {
-  // appStore.update(s => s["##error_message"], message)
-  return { [ERROR_MEMBER]: message }
-}
-
-const isSuccess = obj => !obj || !obj[ERROR_MEMBER]
-
-const apiOpts = {
-  isSuccess,
-  error,
-  post,
-  get,
-  patch,
-  delete: del,
-}
-
-const saveRow = async (params, state) =>
-  await post({
-    url: `/api/${params.tableId}/rows`,
-    body: makeRowRequestBody(params, state),
-  })
-
-const updateRow = async (params, state) => {
-  const row = makeRowRequestBody(params, state)
-  row._id = params._id
-  await patch({
-    url: `/api/${params.tableId}/rows/${params._id}`,
-    body: row,
-  })
-}
-
-const deleteRow = async params =>
-  await del({
-    url: `/api/${params.tableId}/rows/${params.rowId}/${params.revId}`,
-  })
-
-const makeRowRequestBody = (parameters, state) => {
-  // start with the row thats currently in context
-  const body = { ...(state.data || {}) }
-
-  // dont send the table
-  if (body._table) delete body._table
-
-  // then override with supplied parameters
-  if (parameters.fields) {
-    for (let fieldName of Object.keys(parameters.fields)) {
-      const field = parameters.fields[fieldName]
-
-      // ensure fields sent are of the correct type
-      if (field.type === "boolean") {
-        if (field.value === "true") body[fieldName] = true
-        if (field.value === "false") body[fieldName] = false
-      } else if (field.type === "number") {
-        const val = parseFloat(field.value)
-        if (!isNaN(val)) {
-          body[fieldName] = val
-        }
-      } else if (field.type === "datetime") {
-        const date = new Date(field.value)
-        if (!isNaN(date.getTime())) {
-          body[fieldName] = date.toISOString()
-        }
-      } else {
-        body[fieldName] = field.value
-      }
-    }
-  }
-
-  return body
-}
-
-export default {
-  authenticate: authenticate(apiOpts),
-  saveRow,
-  updateRow,
-  deleteRow,
-}
+export * from "./rows"
+export * from "./auth"
+export * from "./datasources"
+export * from "./tables"
+export * from "./attachments"
+export * from "./views"
+export * from "./relationships"
+export * from "./routes"
+export * from "./app"
--- a/packages/client/src/api/relationships.js
+++ b/packages/client/src/api/relationships.js
@ -0,0 +1,14 @@
+import API from "./api"
+import { enrichRows } from "./rows"
+
+/**
+ * Fetches related rows for a certain field of a certain row.
+ */
+export const fetchRelationshipData = async ({ tableId, rowId, fieldName }) => {
+  if (!tableId || !rowId || !fieldName) {
+    return []
+  }
+  const response = await API.get({ url: `/api/${tableId}/${rowId}/enrich` })
+  const rows = response[fieldName] || []
+  return await enrichRows(rows, tableId)
+}
--- a/packages/client/src/api/routes.js
+++ b/packages/client/src/api/routes.js
@ -0,0 +1,10 @@
+import API from "./api"
+
+/**
+ * Fetches available routes for the client app.
+ */
+export const fetchRoutes = async () => {
+  return await API.get({
+    url: `/api/routing/client`,
+  })
+}
--- a/packages/client/src/api/rows.js
+++ b/packages/client/src/api/rows.js
@ -0,0 +1,86 @@
+import API from "./api"
+import { fetchTableDefinition } from "./tables"
+
+/**
+ * Fetches data about a certain row in a table.
+ */
+export const fetchRow = async ({ tableId, rowId }) => {
+  const row = await API.get({
+    url: `/api/${tableId}/rows/${rowId}`,
+  })
+  return (await enrichRows([row], tableId))[0]
+}
+
+/**
+ * Creates a row in a table.
+ */
+export const saveRow = async row => {
+  return await API.post({
+    url: `/api/${row.tableId}/rows`,
+    body: row,
+  })
+}
+
+/**
+ * Updates a row in a table.
+ */
+export const updateRow = async row => {
+  return await API.patch({
+    url: `/api/${row.tableId}/rows/${row._id}`,
+    body: row,
+  })
+}
+
+/**
+ * Deletes a row from a table.
+ */
+export const deleteRow = async ({ tableId, rowId, revId }) => {
+  return await API.del({
+    url: `/api/${tableId}/rows/${rowId}/${revId}`,
+  })
+}
+
+/**
+ * Deletes many rows from a table.
+ */
+export const deleteRows = async ({ tableId, rows }) => {
+  return await API.post({
+    url: `/api/${tableId}/rows`,
+    body: {
+      rows,
+      type: "delete",
+    },
+  })
+}
+
+/**
+ * Enriches rows which contain certain field types so that they can
+ * be properly displayed.
+ */
+export const enrichRows = async (rows, tableId) => {
+  if (rows && rows.length && tableId) {
+    // Fetch table schema so we can check column types
+    const tableDefinition = await fetchTableDefinition(tableId)
+    const schema = tableDefinition && tableDefinition.schema
+    if (schema) {
+      const keys = Object.keys(schema)
+      rows.forEach(row => {
+        for (let key of keys) {
+          const type = schema[key].type
+          if (type === "link") {
+            // Enrich row with the count of any relationship fields
+            row[`${key}_count`] = Array.isArray(row[key]) ? row[key].length : 0
+          } else if (type === "attachment") {
+            // Enrich row with the first image URL for any attachment fields
+            let url = null
+            if (Array.isArray(row[key]) && row[key][0] != null) {
+              url = row[key][0].url
+            }
+            row[`${key}_first`] = url
+          }
+        }
+      })
+    }
+  }
+  return rows
+}
--- a/packages/client/src/api/tables.js
+++ b/packages/client/src/api/tables.js
@ -0,0 +1,18 @@
+import API from "./api"
+import { enrichRows } from "./rows"
+
+/**
+ * Fetches a table definition.
+ * Since definitions cannot change at runtime, the result is cached.
+ */
+export const fetchTableDefinition = async tableId => {
+  return await API.get({ url: `/api/tables/${tableId}`, cache: true })
+}
+
+/**
+ * Fetches all rows from a table.
+ */
+export const fetchTableData = async tableId => {
+  const rows = await API.get({ url: `/api/${tableId}/rows` })
+  return await enrichRows(rows, tableId)
+}
--- a/packages/client/src/api/views.js
+++ b/packages/client/src/api/views.js
@ -0,0 +1,30 @@
+import API from "./api"
+import { enrichRows } from "./rows"
+
+/**
+ * Fetches all rows in a view.
+ */
+export const fetchViewData = async ({
+  name,
+  field,
+  groupBy,
+  calculation,
+  tableId,
+}) => {
+  const params = new URLSearchParams()
+
+  if (calculation) {
+    params.set("field", field)
+    params.set("calculation", calculation)
+  }
+  if (groupBy) {
+    params.set("group", groupBy)
+  }
+
+  const QUERY_VIEW_URL = field
+    ? `/api/views/${name}?${params}`
+    : `/api/views/${name}`
+
+  const rows = await API.get({ url: QUERY_VIEW_URL })
+  return await enrichRows(rows, tableId)
+}
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@ -0,0 +1,23 @@
+<script>
+  import { setContext, onMount } from "svelte"
+  import Component from "./Component.svelte"
+  import SDK from "../sdk"
+  import { routeStore, screenStore, createDataContextStore } from "../store"
+
+  // Provide contexts
+  setContext("sdk", SDK)
+  setContext("data", createDataContextStore())
+
+  let loaded = false
+
+  // Load app config
+  onMount(async () => {
+    await routeStore.actions.fetchRoutes()
+    await screenStore.actions.fetchScreens()
+    loaded = true
+  })
+</script>
+
+{#if loaded}
+  <Component definition={$screenStore.page.props} />
+{/if}
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@ -0,0 +1,52 @@
+<script>
+  import { getContext, setContext } from "svelte"
+  import * as ComponentLibrary from "@budibase/standard-components"
+  import Router from "./Router.svelte"
+
+  export let definition = {}
+
+  // Extracts the actual component name from the library name
+  const extractComponentName = name => {
+    const split = name?.split("/")
+    return split?.[split.length - 1]
+  }
+
+  // Extracts valid props to pass to the real svelte component
+  const extractValidProps = component => {
+    let props = {}
+    Object.entries(component)
+      .filter(([name]) => !name.startsWith("_"))
+      .forEach(([key, value]) => {
+        props[key] = value
+      })
+    return props
+  }
+
+  // Gets the component constructor for the specified component
+  const getComponentConstructor = name => {
+    return name === "screenslot" ? Router : ComponentLibrary[componentName]
+  }
+
+  // Extract component definition info
+  const componentName = extractComponentName(definition._component)
+  const constructor = getComponentConstructor(componentName)
+  const id = `${componentName}-${definition._id}`
+  const componentProps = extractValidProps(definition)
+  const dataContext = getContext("data")
+  const enrichedProps = dataContext.actions.enrichDataBindings(componentProps)
+  const children = definition._children
+
+  // Set style context to be consumed by component
+  setContext("style", { ...definition._styles, id })
+  $: console.log("Rendering: " + componentName)
+</script>
+
+{#if constructor}
+  <svelte:component this={constructor} {...enrichedProps}>
+    {#if children && children.length}
+      {#each children as child}
+        <svelte:self definition={child} />
+      {/each}
+    {/if}
+  </svelte:component>
+{/if}
--- a/packages/client/src/components/DataProvider.svelte
+++ b/packages/client/src/components/DataProvider.svelte
@ -0,0 +1,24 @@
+<script>
+  import { onMount, getContext, setContext } from "svelte"
+  import { createDataContextStore } from "../store"
+
+  export let row
+
+  // Get current contexts
+  const dataContext = getContext("data")
+
+  // Clone current context to this context
+  const newDataContext = createDataContextStore($dataContext)
+  setContext("data", newDataContext)
+
+  // Add additional layer to context
+  let loaded = false
+  onMount(() => {
+    newDataContext.actions.addContext(row)
+    loaded = true
+  })
+</script>
+
+{#if loaded}
+  <slot />
+{/if}
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@ -0,0 +1,32 @@
+<script>
+  import { getContext } from "svelte"
+  import Router from "svelte-spa-router"
+  import { routeStore, screenStore } from "../store"
+  import Screen from "./Screen.svelte"
+
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
+
+  $: routerConfig = getRouterConfig($routeStore.routes)
+
+  const getRouterConfig = routes => {
+    let config = {}
+    routes.forEach(route => {
+      config[route.path] = Screen
+    })
+
+    // Add catch-all route so that we serve the Screen component always
+    config["*"] = Screen
+    return config
+  }
+
+  const onRouteLoading = ({ detail }) => {
+    routeStore.actions.setActiveRoute(detail.route)
+  }
+</script>
+
+{#if routerConfig}
+  <div use:styleable={styles}>
+    <Router on:routeLoading={onRouteLoading} routes={routerConfig} />
+  </div>
+{/if}
--- a/packages/client/src/components/Screen.svelte
+++ b/packages/client/src/components/Screen.svelte
@ -0,0 +1,18 @@
+<script>
+  import { screenStore, routeStore } from "../store"
+  import Component from "./Component.svelte"
+
+  // Keep route params up to date
+  export let params
+  $: routeStore.actions.setRouteParams(params)
+
+  // Get the screen definition for the current route
+  $: screenDefinition = $screenStore.activeScreen?.props
+
+  // Redirect to home page if no matching route
+  $: screenDefinition == null && routeStore.actions.navigate("/")
+</script>
+
+{#if screenDefinition}
+  <Component definition={screenDefinition} />
+{/if}
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@ -1,59 +1,12 @@
-import { createApp } from "./createApp"
-import { builtins, builtinLibName } from "./render/builtinComponents"
-import { getAppId } from "./render/getAppId"
+import ClientApp from "./components/ClientApp.svelte"

-/**
- * create a web application from static budibase definition files.
- * @param  {object} opts - configuration options for budibase client libary
- */
-export const loadBudibase = async opts => {
-  const _window = (opts && opts.window) || window
-  // const _localStorage = (opts && opts.localStorage) || localStorage
-  const appId = getAppId(window.document.cookie)
-  const frontendDefinition = _window["##BUDIBASE_FRONTEND_DEFINITION##"]
-
-  const user = {}
-
-  const componentLibraryModules = (opts && opts.componentLibraries) || {}
-
-  const libraries = frontendDefinition.libraries || []
-
-  for (let library of libraries) {
-    // fetch the JavaScript for the component libraries from the server
-    componentLibraryModules[library] = await import(
-      `/componentlibrary?library=${encodeURI(library)}&appId=${appId}`
-    )
-  }
-
-  componentLibraryModules[builtinLibName] = builtins(_window)
-
-  const {
-    initialisePage,
-    screenStore,
-    pageStore,
-    routeTo,
-    rootNode,
-  } = createApp({
-    componentLibraries: componentLibraryModules,
-    frontendDefinition,
-    user,
-    window: _window,
+// Initialise client app
+const loadBudibase = () => {
+  window.document.body.innerHTML = ""
+  new ClientApp({
+    target: window.document.body,
  })
-
-  const route = _window.location
-    ? _window.location.pathname.replace(`${appId}/`, "").replace(appId, "")
-    : ""
-
-  initialisePage(frontendDefinition.page, _window.document.body, route)
-
-  return {
-    screenStore,
-    pageStore,
-    routeTo,
-    rootNode,
-  }
 }

-if (window) {
-  window.loadBudibase = loadBudibase
-}
+// Attach to window so the HTML template can call this when it loads
+window.loadBudibase = loadBudibase
--- a/packages/client/src/old/createApp.js
+++ b/packages/client/src/old/createApp.js
@ -2,7 +2,7 @@ import { attachChildren } from "./render/attachChildren"
 import { createTreeNode } from "./render/prepareRenderComponent"
 import { screenRouter } from "./render/screenRouter"
 import { createStateManager } from "./state/stateManager"
-import { getAppId } from "./render/getAppId"
+import { getAppId } from "@budibase/component-sdk"

 export const createApp = ({
  componentLibraries,
@ -37,10 +37,7 @@ export const createApp = ({
      onScreenSelected,
      window,
    })
-    const fallbackPath = window.location.pathname.replace(
-      getAppId(window.document.cookie),
-      ""
-    )
+    const fallbackPath = window.location.pathname.replace(getAppId(), "")
    routeTo(currentUrl || fallbackPath)
  }

--- a/packages/client/src/old/index.js.old
+++ b/packages/client/src/old/index.js.old
@ -0,0 +1,59 @@
+import { createApp } from "./createApp"
+import { builtins, builtinLibName } from "./render/builtinComponents"
+import { getAppId } from "@budibase/component-sdk"
+
+/**
+ * create a web application from static budibase definition files.
+ * @param  {object} opts - configuration options for budibase client libary
+ */
+export const loadBudibase = async opts => {
+  const _window = (opts && opts.window) || window
+  // const _localStorage = (opts && opts.localStorage) || localStorage
+  const appId = getAppId(window.document.cookie)
+  const frontendDefinition = _window["##BUDIBASE_FRONTEND_DEFINITION##"]
+
+  const user = {}
+
+  const componentLibraryModules = (opts && opts.componentLibraries) || {}
+
+  const libraries = frontendDefinition.libraries || []
+
+  for (let library of libraries) {
+    // fetch the JavaScript for the component libraries from the server
+    componentLibraryModules[library] = await import(
+      `/componentlibrary?library=${encodeURI(library)}&appId=${appId}`
+    )
+  }
+
+  componentLibraryModules[builtinLibName] = builtins(_window)
+
+  const {
+    initialisePage,
+    screenStore,
+    pageStore,
+    routeTo,
+    rootNode,
+  } = createApp({
+    componentLibraries: componentLibraryModules,
+    frontendDefinition,
+    user,
+    window: _window,
+  })
+
+  const route = _window.location
+    ? _window.location.pathname.replace(`${appId}/`, "").replace(appId, "")
+    : ""
+
+  initialisePage(frontendDefinition.page, _window.document.body, route)
+
+  return {
+    screenStore,
+    pageStore,
+    routeTo,
+    rootNode,
+  }
+}
+
+if (window) {
+  window.loadBudibase = loadBudibase
+}
--- a/packages/client/src/old/render/attachChildren.js
+++ b/packages/client/src/old/render/attachChildren.js
--- a/packages/client/src/old/render/builtinComponents.js
+++ b/packages/client/src/old/render/builtinComponents.js
--- a/packages/client/src/old/render/prepareRenderComponent.js
+++ b/packages/client/src/old/render/prepareRenderComponent.js
--- a/packages/client/src/old/render/screenRouter.js
+++ b/packages/client/src/old/render/screenRouter.js
@ -1,6 +1,6 @@
 import regexparam from "regexparam"
 import appStore from "../state/store"
-import { getAppId } from "./getAppId"
+import { getAppId } from "@budibase/component-sdk"

 export const screenRouter = ({ screens, onScreenSelected, window }) => {
  function sanitize(url) {
@ -27,7 +27,7 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {

  const makeRootedPath = url => {
    if (isRunningLocally()) {
-      const appId = getAppId(window.document.cookie)
+      const appId = getAppId()
      if (url) {
        url = sanitize(url)
        if (!url.startsWith("/")) {
--- a/packages/client/src/old/render/screenSlotComponent.js
+++ b/packages/client/src/old/render/screenSlotComponent.js
--- a/packages/client/src/old/state/bbComponentApi.js
+++ b/packages/client/src/old/state/bbComponentApi.js
@ -1,20 +1,12 @@
 import setBindableComponentProp from "./setBindableComponentProp"
 import { attachChildren } from "../render/attachChildren"
-import store from "../state/store"
-import { baseApiCall } from "../api/index"
+import store from "./store"

 export const bbFactory = ({
  componentLibraries,
  onScreenSlotRendered,
  runEventActions,
 }) => {
-  const api = {
-    post: (url, body) => baseApiCall("POST", url, body),
-    get: (url, body) => baseApiCall("GET", url, body),
-    patch: (url, body) => baseApiCall("PATCH", url, body),
-    delete: (url, body) => baseApiCall("DELETE", url, body),
-  }
-
  return (treeNode, setupState) => {
    const attachParams = {
      componentLibraries,
@ -33,7 +25,6 @@ export const bbFactory = ({
          store.getState(treeNode.contextStoreKey)
        )),
      setBinding: setBindableComponentProp(treeNode),
-      api,
      parent,
      store: store.getStore(treeNode.contextStoreKey),
      // these parameters are populated by screenRouter
--- a/packages/client/src/old/state/eventHandlers.js
+++ b/packages/client/src/old/state/eventHandlers.js
@ -1,15 +1,14 @@
-import api from "../api"
 import renderTemplateString from "./renderTemplateString"
+import { updateRow, saveRow, deleteRow } from "@budibase/component-sdk"

 export const EVENT_TYPE_MEMBER_NAME = "##eventHandlerType"

 export const eventHandlers = routeTo => {
  const handlers = {
    "Navigate To": param => routeTo(param && param.url),
-    "Update Row": api.updateRow,
-    "Save Row": api.saveRow,
-    "Delete Row": api.deleteRow,
-    "Trigger Workflow": api.triggerWorkflow,
+    "Update Row": updateRow,
+    "Save Row": saveRow,
+    "Delete Row": deleteRow,
  }

  // when an event is called, this is what gets run
--- a/packages/client/src/old/state/getSetContext.js
+++ b/packages/client/src/old/state/getSetContext.js
--- a/packages/client/src/old/state/hasBinding.js
+++ b/packages/client/src/old/state/hasBinding.js
--- a/packages/client/src/old/state/renderTemplateString.js
+++ b/packages/client/src/old/state/renderTemplateString.js
--- a/packages/client/src/old/state/setBindableComponentProp.js
+++ b/packages/client/src/old/state/setBindableComponentProp.js
--- a/packages/client/src/old/state/stateManager.js
+++ b/packages/client/src/old/state/stateManager.js
--- a/packages/client/src/old/state/store.js
+++ b/packages/client/src/old/state/store.js
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@ -0,0 +1,16 @@
+import * as API from "./api"
+import { authStore, routeStore, screenStore } from "./store"
+import { styleable, getAppId } from "./utils"
+import { link as linkable } from "svelte-spa-router"
+import DataProvider from "./components/DataProvider.svelte"
+
+export default {
+  API,
+  authStore,
+  routeStore,
+  screenStore,
+  styleable,
+  linkable,
+  getAppId,
+  DataProvider,
+}
--- a/packages/client/src/state/runEventHandler.js
+++ b/packages/client/src/state/runEventHandler.js
--- a/packages/client/src/store/auth.js
+++ b/packages/client/src/store/auth.js
@ -0,0 +1,39 @@
+import * as API from "../api"
+import { getAppId } from "../utils"
+import { writable } from "svelte/store"
+
+const createAuthStore = () => {
+  const store = writable("")
+
+  /**
+   * Logs a user in.
+   */
+  const logIn = async ({ username, password }) => {
+    const user = await API.logIn({ username, password })
+    if (!user.error) {
+      store.set(user.token)
+      location.reload()
+    }
+  }
+
+  /**
+   * Logs a user out.
+   */
+  const logOut = () => {
+    store.set("")
+    const appId = getAppId()
+    if (appId) {
+      for (let environment of ["local", "cloud"]) {
+        window.document.cookie = `budibase:${appId}:${environment}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`
+      }
+    }
+    location.reload()
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: { logIn, logOut },
+  }
+}
+
+export const authStore = createAuthStore()
--- a/packages/client/src/store/dataContext.js
+++ b/packages/client/src/store/dataContext.js
@ -0,0 +1,43 @@
+import { writable, get } from "svelte/store"
+import { enrichDataBinding } from "../utils"
+import { cloneDeep } from "lodash/fp"
+
+const initialValue = {
+  parent: null,
+  data: null,
+}
+
+export const createDataContextStore = existingContext => {
+  const initial = existingContext ? cloneDeep(existingContext) : initialValue
+  const store = writable(initial)
+
+  // Adds a context layer to the data context tree
+  const addContext = row => {
+    store.update(state => {
+      if (state.data) {
+        state.parent = {
+          parent: state.parent,
+          data: state.data,
+        }
+      }
+      state.data = row
+      return state
+    })
+  }
+
+  // Enriches props by running mustache and filling in any data bindings present
+  // in the prop values
+  const enrichDataBindings = props => {
+    const state = get(store)
+    let enrichedProps = {}
+    Object.entries(props).forEach(([key, value]) => {
+      enrichedProps[key] = enrichDataBinding(value, state)
+    })
+    return enrichedProps
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: { addContext, enrichDataBindings },
+  }
+}
--- a/packages/client/src/store/index.js
+++ b/packages/client/src/store/index.js
@ -0,0 +1,4 @@
+export { authStore } from "./auth"
+export { routeStore } from "./routes"
+export { screenStore } from "./screens"
+export { createDataContextStore } from "./dataContext"
--- a/packages/client/src/store/routes.js
+++ b/packages/client/src/store/routes.js
@ -0,0 +1,49 @@
+import { writable } from "svelte/store"
+import { push } from "svelte-spa-router"
+import * as API from "../api"
+
+const createRouteStore = () => {
+  const initialState = {
+    routes: [],
+    routeParams: {},
+    activeRoute: null,
+  }
+  const store = writable(initialState)
+
+  const fetchRoutes = async () => {
+    const routeConfig = await API.fetchRoutes()
+    let routes = []
+    Object.values(routeConfig.routes).forEach(route => {
+      Object.entries(route.subpaths).forEach(([path, config]) => {
+        routes.push({
+          path,
+          screenId: config.screenId,
+        })
+      })
+    })
+    store.update(state => {
+      state.routes = routes
+      return state
+    })
+  }
+  const setRouteParams = routeParams => {
+    store.update(state => {
+      state.routeParams = routeParams
+      return state
+    })
+  }
+  const setActiveRoute = route => {
+    store.update(state => {
+      state.activeRoute = route
+      return state
+    })
+  }
+  const navigate = push
+
+  return {
+    subscribe: store.subscribe,
+    actions: { fetchRoutes, navigate, setRouteParams, setActiveRoute },
+  }
+}
+
+export const routeStore = createRouteStore()
--- a/packages/client/src/store/screens.js
+++ b/packages/client/src/store/screens.js
@ -0,0 +1,40 @@
+import { writable, derived } from "svelte/store"
+import { routeStore } from "./routes"
+import * as API from "../api"
+import { getAppId } from "../utils"
+
+const createScreenStore = () => {
+  const config = writable({
+    screens: [],
+    page: {},
+  })
+  const store = derived([config, routeStore], ([$config, $routeStore]) => {
+    const { screens, page } = $config
+    const activeScreen =
+      screens.length === 1
+        ? screens[0]
+        : screens.find(
+            screen => screen.routing.route === $routeStore.activeRoute
+          )
+    return {
+      screens,
+      page,
+      activeScreen,
+    }
+  })
+
+  const fetchScreens = async () => {
+    const appDefinition = await API.fetchAppDefinition(getAppId())
+    config.set({
+      screens: appDefinition.screens,
+      page: appDefinition.page,
+    })
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: { fetchScreens },
+  }
+}
+
+export const screenStore = createScreenStore()
--- a/packages/client/src/utils/enrichDataBinding.js
+++ b/packages/client/src/utils/enrichDataBinding.js
@ -0,0 +1,35 @@
+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 => {
+  return text.replace(/[<>]/g, function fromEntityMap(s) {
+    return entityMap[s] || s
+  })
+}
+
+// Regex to test inputs with to see if they are likely candidates for mustache
+const looksLikeMustache = /{{.*}}/
+
+/**
+ * Enriches a given input with a row from the database.
+ */
+export const enrichDataBinding = (input, context) => {
+  // Only accept string inputs
+  if (!input || typeof input !== "string") {
+    return input
+  }
+  // Do a fast regex check if this looks like a mustache string
+  if (!looksLikeMustache.test(input)) {
+    return input
+  }
+  console.log("====================================")
+  console.log(input)
+  console.log(context)
+  return mustache.render(input, context)
+}
--- a/packages/client/src/render/getAppId.js
+++ b/packages/client/src/render/getAppId.js
@ -9,6 +9,9 @@ function confirmAppId(possibleAppId) {
 }

 function tryGetFromCookie({ cookies }) {
+  if (!cookies) {
+    return undefined
+  }
  const cookie = cookies
    .split(COOKIE_SEPARATOR)
    .find(cookie => cookie.trim().startsWith("budibase:currentapp"))
@ -30,7 +33,7 @@ function tryGetFromSubdomain() {
  return confirmAppId(appId)
 }

-export const getAppId = cookies => {
+export const getAppId = (cookies = window.document.cookie) => {
  const functions = [tryGetFromSubdomain, tryGetFromPath, tryGetFromCookie]
  // try getting the app Id in order
  let appId
@ -42,5 +45,3 @@ export const getAppId = cookies => {
  }
  return appId
 }
-
-export const getAppIdFromPath = getAppId
--- a/packages/client/src/utils/index.js
+++ b/packages/client/src/utils/index.js
@ -0,0 +1,3 @@
+export { getAppId } from "./getAppId"
+export { styleable } from "./styleable"
+export { enrichDataBinding } from "./enrichDataBinding"
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@ -0,0 +1,46 @@
+const buildStyleString = styles => {
+  let str = ""
+  Object.entries(styles).forEach(([style, value]) => {
+    if (style && value) {
+      str += `${style}: ${value}; `
+    }
+  })
+  return str
+}
+
+/**
+ * Svelte action to apply correct component styles.
+ */
+export const styleable = (node, styles = {}) => {
+  const normalStyles = styles.normal || {}
+  const hoverStyles = {
+    ...normalStyles,
+    ...styles.hover,
+  }
+
+  function applyNormalStyles() {
+    node.style = buildStyleString(normalStyles)
+  }
+
+  function applyHoverStyles() {
+    node.style = buildStyleString(hoverStyles)
+  }
+
+  // Add listeners to toggle hover styles
+  node.addEventListener("mouseover", applyHoverStyles)
+  node.addEventListener("mouseout", applyNormalStyles)
+
+  // Apply normal styles initially
+  applyNormalStyles()
+
+  // Also apply data tags so we know how to reference each component
+  node.setAttribute("data-bb-id", styles.id)
+
+  return {
+    // Clean up event listeners when component is destroyed
+    destroy: () => {
+      node.removeEventListener("mouseover", applyHoverStyles)
+      node.removeEventListener("mouseout", applyNormalStyles)
+    },
+  }
+}
--- a/packages/client/tests/binding.spec.js
+++ b/packages/client/tests/binding.spec.js
@ -1,209 +0,0 @@
-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,
-    },
-  ]
-})
--- a/packages/client/tests/initialiseApp.spec.js
+++ b/packages/client/tests/initialiseApp.spec.js
@ -1,172 +0,0 @@
-import { load, makePage, makeScreen } from "./testAppDef"
-
-describe("initialiseApp", () => {
-  it("should populate simple div with initial props", async () => {
-    const { dom } = await load(
-      makePage({
-        _component: "testlib/div",
-        className: "my-test-class",
-      })
-    )
-
-    expect(dom.window.document.body.children.length).toBe(1)
-    const child = dom.window.document.body.children[0]
-    expect(child.className.includes("my-test-class")).toBeTruthy()
-  })
-
-  it("should populate child component with props", async () => {
-    const { dom } = await load(
-      makePage({
-        _component: "testlib/div",
-        _children: [
-          {
-            _component: "testlib/h1",
-            text: "header one",
-          },
-          {
-            _component: "testlib/h1",
-            text: "header two",
-          },
-        ],
-      })
-    )
-
-    const rootDiv = dom.window.document.body.children[0]
-
-    expect(rootDiv.children.length).toBe(2)
-    expect(rootDiv.children[0].tagName).toBe("H1")
-    expect(rootDiv.children[0].innerText).toBe("header one")
-    expect(rootDiv.children[1].tagName).toBe("H1")
-    expect(rootDiv.children[1].innerText).toBe("header two")
-  })
-
-  it("should append children when told to do so", async () => {
-    const { dom } = await load(
-      makePage({
-        _component: "testlib/div",
-        _children: [
-          {
-            _component: "testlib/h1",
-            text: "header one",
-          },
-          {
-            _component: "testlib/h1",
-            text: "header two",
-          },
-        ],
-        append: true,
-      })
-    )
-
-    const rootDiv = dom.window.document.body.children[0]
-
-    expect(rootDiv.children.length).toBe(3)
-    expect(rootDiv.children[0].tagName).toBe("DIV")
-    expect(rootDiv.children[0].className).toBe("default-child")
-    expect(rootDiv.children[1].tagName).toBe("H1")
-    expect(rootDiv.children[1].innerText).toBe("header one")
-    expect(rootDiv.children[2].tagName).toBe("H1")
-    expect(rootDiv.children[2].innerText).toBe("header two")
-  })
-
-  it("should populate page with correct screen", async () => {
-    const { dom } = await load(
-      makePage({
-        _component: "testlib/div",
-        _children: [
-          {
-            _component: "##builtin/screenslot",
-          },
-        ],
-      }),
-      [
-        makeScreen("/", {
-          _component: "testlib/div",
-          className: "screen-class",
-        }),
-      ]
-    )
-
-    const rootDiv = dom.window.document.body.children[0]
-
-    expect(rootDiv.children.length).toBe(1)
-    expect(rootDiv.children[0].children.length).toBe(1)
-    expect(
-      rootDiv.children[0].children[0].className.includes("screen-class")
-    ).toBeTruthy()
-  })
-
-  it("should populate screen with children", async () => {
-    const { dom } = await load(
-      makePage({
-        _component: "testlib/div",
-        _children: [
-          {
-            _component: "##builtin/screenslot",
-            text: "header one",
-          },
-        ],
-      }),
-      [
-        makeScreen("/", {
-          _component: "testlib/div",
-          className: "screen-class",
-          _children: [
-            {
-              _component: "testlib/h1",
-              text: "header one",
-            },
-            {
-              _component: "testlib/h1",
-              text: "header two",
-            },
-          ],
-        }),
-      ]
-    )
-
-    const rootDiv = dom.window.document.body.children[0]
-    expect(rootDiv.children.length).toBe(1)
-
-    const screenRoot = rootDiv.children[0]
-
-    expect(screenRoot.children.length).toBe(1)
-    expect(screenRoot.children[0].children.length).toBe(2)
-    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")
-  })
-})
--- a/packages/client/tests/screenRouting.spec.js
+++ b/packages/client/tests/screenRouting.spec.js
@ -1,174 +0,0 @@
-import { load, makePage, makeScreen, walkComponentTree } from "./testAppDef"
-import { isScreenSlot } from "../src/render/builtinComponents"
-jest.mock("../src/render/getAppId", () => ({
-  getAppId: () => "TEST_APP_ID"
-}))
-
-describe("screenRouting", () => {
-  it("should load correct screen, for initial URL", async () => {
-    const { page, screens } = pageWith3Screens()
-    const { dom } = await load(page, screens, "/screen2")
-
-    const rootDiv = dom.window.document.body.children[0]
-    expect(rootDiv.children.length).toBe(1)
-
-    const screenRoot = rootDiv.children[0]
-
-    expect(screenRoot.children.length).toBe(1)
-    expect(screenRoot.children[0].children.length).toBe(1)
-    expect(screenRoot.children[0].children[0].innerText).toBe("screen 2")
-  })
-
-  it("should load correct screen, for initial URL, when appRootPath is something", async () => {
-    const { page, screens } = pageWith3Screens()
-    const { dom } = await load(page, screens, "/TEST_APP_ID/screen2", "127.0.0.1")
-
-    const rootDiv = dom.window.document.body.children[0]
-    expect(rootDiv.children.length).toBe(1)
-
-    const screenRoot = rootDiv.children[0]
-
-    expect(screenRoot.children.length).toBe(1)
-    expect(screenRoot.children[0].children.length).toBe(1)
-    expect(screenRoot.children[0].children[0].innerText).toBe("screen 2")
-  })
-
-  it("should be able to route to the correct screen", async () => {
-    const { page, screens } = pageWith3Screens()
-    const { dom, app } = await load(page, screens, "/screen2")
-
-    app.routeTo()("/screen3")
-    const rootDiv = dom.window.document.body.children[0]
-    expect(rootDiv.children.length).toBe(1)
-
-    const screenRoot = rootDiv.children[0]
-
-    expect(screenRoot.children.length).toBe(1)
-    expect(screenRoot.children[0].children.length).toBe(1)
-    expect(screenRoot.children[0].children[0].innerText).toBe("screen 3")
-  })
-
-  it("should be able to route to the correct screen, when appRootPath is something", async () => {
-    const { page, screens } = pageWith3Screens()
-    const { dom, app } = await load(
-      page,
-      screens,
-      "/TEST_APP_ID/screen2",
-      "127.0.0.1"
-    )
-
-    app.routeTo()("/screen3")
-    const rootDiv = dom.window.document.body.children[0]
-    expect(rootDiv.children.length).toBe(1)
-
-    const screenRoot = rootDiv.children[0]
-
-    expect(screenRoot.children.length).toBe(1)
-    expect(screenRoot.children[0].children.length).toBe(1)
-    expect(screenRoot.children[0].children[0].innerText).toBe("screen 3")
-  })
-
-  it("should destroy and unsubscribe all components on a screen whe screen is changed", async () => {
-    const { page, screens } = pageWith3Screens()
-    const { app } = await load(page, screens, "/screen2")
-
-    const nodes = createTrackerNodes(app)
-
-    app.routeTo()("/screen3")
-
-    expect(nodes.length > 0).toBe(true)
-    expect(
-      nodes.some(n => n.isDestroyed === false && isUnderScreenSlot(n.node))
-    ).toBe(false)
-    expect(
-      nodes.some(n => n.isUnsubscribed === false && isUnderScreenSlot(n.node))
-    ).toBe(false)
-  })
-
-  it("should not destroy and unsubscribe page and screenslot components when screen is changed", async () => {
-    const { page, screens } = pageWith3Screens()
-    const { app } = await load(page, screens, "/screen2")
-
-    const nodes = createTrackerNodes(app)
-
-    app.routeTo()("/screen3")
-
-    expect(nodes.length > 0).toBe(true)
-    expect(
-      nodes.some(n => n.isDestroyed === true && !isUnderScreenSlot(n.node))
-    ).toBe(false)
-  })
-})
-
-const createTrackerNodes = app => {
-  const nodes = []
-  walkComponentTree(app.rootNode(), n => {
-    if (!n.component) return
-    const tracker = { node: n, isDestroyed: false, isUnsubscribed: false }
-    const _destroy = n.component.$destroy
-    n.component.$destroy = () => {
-      _destroy()
-      tracker.isDestroyed = true
-    }
-    const _unsubscribe = n.unsubscribe
-    if (!_unsubscribe) {
-      tracker.isUnsubscribed = undefined
-    } else {
-      n.unsubscribe = () => {
-        _unsubscribe()
-        tracker.isUnsubscribed = true
-      }
-    }
-    nodes.push(tracker)
-  })
-  return nodes
-}
-
-const isUnderScreenSlot = node =>
-  node.parentNode &&
-  (isScreenSlot(node.parentNode.props._component) ||
-    isUnderScreenSlot(node.parentNode))
-
-const pageWith3Screens = () => ({
-  page: makePage({
-    _component: "testlib/div",
-    _children: [
-      {
-        _component: "##builtin/screenslot",
-        text: "header one",
-      },
-    ],
-  }),
-  screens: [
-    makeScreen("/", {
-      _component: "testlib/div",
-      className: "screen-class",
-      _children: [
-        {
-          _component: "testlib/h1",
-          text: "screen 1",
-        },
-      ],
-    }),
-    makeScreen("/screen2", {
-      _component: "testlib/div",
-      className: "screen-class",
-      _children: [
-        {
-          _component: "testlib/h1",
-          text: "screen 2",
-        },
-      ],
-    }),
-    makeScreen("/screen3", {
-      _component: "testlib/div",
-      className: "screen-class",
-      _children: [
-        {
-          _component: "testlib/h1",
-          text: "screen 3",
-        },
-      ],
-    }),
-  ],
-})
--- a/packages/client/tests/testAppDef.js
+++ b/packages/client/tests/testAppDef.js
@ -1,244 +0,0 @@
-import jsdom, { JSDOM } from "jsdom"
-import { loadBudibase } from "../src/index"
-
-export const APP_ID = "TEST_APP_ID"
-
-export const load = async (page, screens, url, host = "test.com") => {
-  screens = screens || []
-  url = url || "/"
-
-  const fullUrl = `http://${host}${url}`
-  const cookieJar = new jsdom.CookieJar()
-  const cookie = `${btoa("{}")}.${btoa(`{"appId":"${APP_ID}"}`)}.signature`
-  cookieJar.setCookie(
-    `budibase:${APP_ID}:local=${cookie};domain=${host};path=/`,
-    fullUrl,
-    {
-      looseMode: false,
-    },
-    () => {}
-  )
-
-  const dom = new JSDOM("<!DOCTYPE html><html><body></body><html>", {
-    url: fullUrl,
-    cookieJar,
-  })
-
-  autoAssignIds(page.props)
-  for (let s of screens) {
-    autoAssignIds(s.props)
-  }
-  setAppDef(dom.window, page, screens)
-  addWindowGlobals(dom.window, page, screens, {
-    hierarchy: {},
-    actions: [],
-    triggers: [],
-  })
-  setComponentCodeMeta(page, screens)
-  const app = await loadBudibase({
-    componentLibraries: allLibs(dom.window),
-    window: dom.window,
-    localStorage: createLocalStorage(),
-  })
-  return { dom, app }
-}
-
-const addWindowGlobals = (window, page, screens) => {
-  window["##BUDIBASE_FRONTEND_DEFINITION##"] = {
-    page,
-    screens,
-  }
-}
-
-export const makePage = props => ({ props })
-export const makeScreen = (route, props) => ({
-  props,
-  routing: { route, accessLevelId: "" },
-})
-
-export const timeout = ms => new Promise(resolve => setTimeout(resolve, ms))
-
-export const walkComponentTree = (node, action) => {
-  action(node)
-
-  // works for nodes or props
-  const children = node.children || node._children
-
-  if (children) {
-    for (let child of children) {
-      walkComponentTree(child, action)
-    }
-  }
-}
-
-// this happens for real by the builder...
-// ..this only assigns _ids when missing
-const autoAssignIds = (props, count = 0) => {
-  if (!props._id) {
-    props._id = `auto_id_${count}`
-  }
-  if (props._children) {
-    for (let child of props._children) {
-      count += 1
-      autoAssignIds(child, count)
-    }
-  }
-}
-
-// any component with an id that include "based_on_store" is
-// assumed to have code that depends on store value
-const setComponentCodeMeta = (page, screens) => {
-  const setComponentCodeMeta_single = props => {
-    walkComponentTree(props, c => {
-      if (c._id.indexOf("based_on_store") >= 0) {
-        c._codeMeta = { dependsOnStore: true }
-      }
-    })
-  }
-  setComponentCodeMeta_single(page.props)
-  for (let s of screens || []) {
-    setComponentCodeMeta_single(s.props)
-  }
-}
-
-const setAppDef = (window, page, screens) => {
-  window["##BUDIBASE_FRONTEND_DEFINITION##"] = {
-    componentLibraries: [],
-    page,
-    screens,
-  }
-}
-
-const allLibs = window => ({
-  testlib: maketestlib(window),
-})
-
-const createLocalStorage = () => {
-  const data = {}
-  return {
-    getItem: key => data[key],
-    setItem: (key, value) => (data[key] = value),
-  }
-}
-
-const maketestlib = window => ({
-  div: function(opts) {
-    const node = window.document.createElement("DIV")
-    const defaultChild = window.document.createElement("DIV")
-    defaultChild.className = "default-child"
-    node.appendChild(defaultChild)
-
-    let currentProps = { ...opts.props }
-    let childNodes = []
-
-    const set = props => {
-      currentProps = Object.assign(currentProps, props)
-      node.className = currentProps.className || ""
-      if (currentProps._children && currentProps._children.length > 0) {
-        if (currentProps.append) {
-          for (let c of childNodes) {
-            node.removeChild(c)
-          }
-          const components = currentProps._bb.attachChildren(node, {
-            hydrate: false,
-          })
-          childNodes = components.map(c => c.component._element)
-        } else {
-          currentProps._bb.attachChildren(node)
-        }
-      }
-    }
-
-    this.$destroy = () => opts.target.removeChild(node)
-
-    this.$set = set
-    this._element = node
-    set(opts.props)
-    opts.target.appendChild(node)
-  },
-
-  h1: function(opts) {
-    const node = window.document.createElement("H1")
-
-    let currentProps = { ...opts.props }
-
-    const set = props => {
-      currentProps = Object.assign(currentProps, props)
-      if (currentProps.text) {
-        node.innerText = currentProps.text
-      }
-    }
-
-    this.$destroy = () => opts.target.removeChild(node)
-
-    this.$set = set
-    this._element = node
-    set(opts.props)
-    opts.target.appendChild(node)
-  },
-
-  button: function(opts) {
-    const node = window.document.createElement("BUTTON")
-
-    let currentProps = { ...opts.props }
-
-    const set = props => {
-      currentProps = Object.assign(currentProps, props)
-      if (currentProps.onClick) {
-        node.addEventListener("click", () => {
-          currentProps._bb.call("onClick")
-        })
-      }
-    }
-
-    this.$destroy = () => opts.target.removeChild(node)
-
-    this.$set = set
-    this._element = node
-    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)
-  },
-})
--- a/packages/client/tests/testComponents/container.svelte
+++ b/packages/client/tests/testComponents/container.svelte
@ -1,16 +0,0 @@
-<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} />
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@ -1,6 +1,5 @@
 {
  "name": "@budibase/standard-components",
-  "svelte": "src/index.svelte",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "scripts": {
@ -13,19 +12,21 @@
    "dev:builder": "rollup -cw"
  },
  "devDependencies": {
-    "@budibase/client": "^0.3.8",
-    "@rollup/plugin-commonjs": "^11.1.0",
+    "@rollup/plugin-alias": "^3.1.1",
+    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@rollup/plugin-replace": "^2.3.4",
    "lodash": "^4.17.15",
    "rollup": "^2.11.2",
-    "rollup-plugin-commonjs": "^10.0.2",
-    "rollup-plugin-json": "^4.0.0",
    "rollup-plugin-livereload": "^1.0.1",
-    "rollup-plugin-node-resolve": "^5.0.0",
    "rollup-plugin-postcss": "^3.1.5",
    "rollup-plugin-svelte": "^6.1.1",
    "rollup-plugin-terser": "^7.0.2",
    "shortid": "^2.2.15",
-    "sirv-cli": "^0.4.4",
+    "sirv-cli": "^0.4.4"
+  },
+  "peerDependencies": {
    "svelte": "^3.29.0"
  },
  "keywords": [
--- a/packages/standard-components/rollup.config.js
+++ b/packages/standard-components/rollup.config.js
@ -1,38 +1,39 @@
-import svelte from "rollup-plugin-svelte"
-import resolve from "rollup-plugin-node-resolve"
 import commonjs from "@rollup/plugin-commonjs"
+import resolve from "@rollup/plugin-node-resolve"
+// import replace from "@rollup/plugin-replace"
+import svelte from "rollup-plugin-svelte"
 import postcss from "rollup-plugin-postcss"
 import { terser } from "rollup-plugin-terser"

 const production = !process.env.ROLLUP_WATCH
-const lodash_fp_exports = ["isEmpty"]
+const externals = ["svelte", "svelte/internal"]

 export default {
+  external: externals,
  input: "src/index.js",
  output: [
    {
      file: "dist/index.js",
      format: "esm",
      name: "budibaseStandardComponents",
-      sourcemap: true,
+      sourcemap: false,
    },
  ],
  plugins: [
-    // Only run terser in production environments
    production && terser(),
-    postcss({
-      plugins: [],
-    }),
+    postcss(),
    svelte({
-      hydratable: true,
+      dev: !production,
    }),
    resolve({
      browser: true,
+      skip: externals,
    }),
-    commonjs({
-      namedExports: {
-        "lodash/fp": lodash_fp_exports,
-      },
-    }),
+    commonjs(),
+    // Fix for https://github.com/sveltejs/svelte/issues/3165
+    // replace({
+    //   "outros.c.push":
+    //     "if (outros === undefined) { block.o(local); return }\noutros.c.push",
+    // }),
  ],
 }
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@ -1,25 +1,16 @@
 <script>
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
+
  export let className = "default"
  export let disabled = false
  export let text
-
-  export let _bb
-  let theButton
-
-  $: if (_bb.props._children && _bb.props._children.length > 0)
-    theButton && _bb.attachChildren(theButton)
-
-  const clickHandler = () => {
-    _bb.call("onClick")
-  }
 </script>

-<button
-  bind:this={theButton}
-  class="default"
-  disabled={disabled || false}
-  on:click|once={clickHandler}>
-  {#if !_bb.props._children || _bb.props._children.length === 0}{text}{/if}
+<button class="default" disabled={disabled || false} use:styleable={styles}>
+  {text}
 </button>

 <style>
@ -37,28 +28,4 @@
    white-space: nowrap;
    text-align: center;
  }
-
-  .border {
-    border: var(--border);
-  }
-
-  .color {
-    color: var(--color);
-  }
-
-  .background {
-    background: var(--background);
-  }
-
-  .hoverBorder:hover {
-    border: var(--hoverBorder);
-  }
-
-  .hoverColor:hover {
-    color: var(--hoverColor);
-  }
-
-  .hoverBack:hover {
-    background: var(--hoverBackground);
-  }
 </style>
--- a/packages/standard-components/src/Card.svelte
+++ b/packages/standard-components/src/Card.svelte
@ -1,5 +1,9 @@
 <script>
-  import { cssVars, createClasses } from "./cssVars"
+  import { getContext } from "svelte"
+  import { cssVars } from "./helpers"
+
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")

  export const className = ""
  export let imageUrl = ""
@ -22,7 +26,7 @@
  $: showImage = !!imageUrl
 </script>

-<div use:cssVars={cssVariables} class="container">
+<div use:cssVars={cssVariables} class="container" use:styleable={styles}>
  {#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
  <div class="content">
    <h2 class="heading">{heading}</h2>
--- a/packages/standard-components/src/CardHorizontal.svelte
+++ b/packages/standard-components/src/CardHorizontal.svelte
@ -1,5 +1,9 @@
 <script>
-  import { cssVars, createClasses } from "./cssVars"
+  import { getContext } from "svelte"
+  import { cssVars } from "./helpers"
+
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")

  export const className = ""
  export let imageUrl = ""
@ -25,7 +29,7 @@
  $: showImage = !!imageUrl
 </script>

-<div use:cssVars={cssVariables} class="container">
+<div use:cssVars={cssVariables} class="container" use:styleable={styles}>
  {#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
  <div class="content">
    <main>
--- a/packages/standard-components/src/Checkbox.svelte
+++ b/packages/standard-components/src/Checkbox.svelte
@ -1,11 +0,0 @@
-<script>
-  import Input from "./Input.svelte"
-  export let _bb
-
-  export let label = ""
-  export let checked = false
-  export let value = ""
-  export let onchange = () => {}
-</script>
-
-<Input type="checkbox" {_bb} {checked} {label} {value} {onchange} />
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@ -1,50 +1,63 @@
 <script>
-  import { cssVars, createClasses } from "./cssVars"
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")

  export let className = ""
-  export let onLoad
  export let type = "div"
-  export let _bb
-
-  let containerElement
-  let hasLoaded
-  let currentChildren
-
-  $: {
-    if (containerElement) {
-      _bb.attachChildren(containerElement)
-      if (!hasLoaded) {
-        _bb.call("onLoad")
-        hasLoaded = true
-      }
-    }
-  }
 </script>

 {#if type === 'div'}
-  <div bind:this={containerElement} />
+  <div use:styleable={styles}>
+    <slot />
+  </div>
 {:else if type === 'header'}
-  <header bind:this={containerElement} />
+  <header use:styleable={styles}>
+    <slot />
+  </header>
 {:else if type === 'main'}
-  <main bind:this={containerElement} />
+  <main use:styleable={styles}>
+    <slot />
+  </main>
 {:else if type === 'footer'}
-  <footer bind:this={containerElement} />
+  <footer use:styleable={styles}>
+    <slot />
+  </footer>
 {:else if type === 'aside'}
-  <aside bind:this={containerElement} />
+  <aside use:styleable={styles}>
+    <slot />
+  </aside>
 {:else if type === 'summary'}
-  <summary bind:this={containerElement} />
+  <summary use:styleable={styles}>
+    <slot />
+  </summary>
 {:else if type === 'details'}
-  <details bind:this={containerElement} />
+  <details use:styleable={styles}>
+    <slot />
+  </details>
 {:else if type === 'article'}
-  <article bind:this={containerElement} />
+  <article use:styleable={styles}>
+    <slot />
+  </article>
 {:else if type === 'nav'}
-  <nav bind:this={containerElement} />
+  <nav use:styleable={styles}>
+    <slot />
+  </nav>
 {:else if type === 'mark'}
-  <mark bind:this={containerElement} />
+  <mark use:styleable={styles}>
+    <slot />
+  </mark>
 {:else if type === 'figure'}
-  <figure bind:this={containerElement} />
+  <figure use:styleable={styles}>
+    <slot />
+  </figure>
 {:else if type === 'figcaption'}
-  <figcaption bind:this={containerElement} />
+  <figcaption use:styleable={styles}>
+    <slot />
+  </figcaption>
 {:else if type === 'paragraph'}
-  <p bind:this={containerElement} />
+  <p use:styleable={styles}>
+    <slot />
+  </p>
 {/if}
--- a/packages/standard-components/src/DataForm.svelte
+++ b/packages/standard-components/src/DataForm.svelte
@ -1,10 +1,5 @@
 <script>
  import Form from "./Form.svelte"
-
-  export let _bb
-  export let table
-  export let title
-  export let buttonText
 </script>

-<Form {_bb} {table} {title} {buttonText} wide={false} />
+<Form wide={false} />
--- a/packages/standard-components/src/DataFormWide.svelte
+++ b/packages/standard-components/src/DataFormWide.svelte
@ -1,10 +1,5 @@
 <script>
  import Form from "./Form.svelte"
-
-  export let _bb
-  export let table
-  export let title
-  export let buttonText
 </script>

-<Form {_bb} {table} {title} {buttonText} wide={true} />
+<Form wide />
--- a/packages/standard-components/src/DataGrid/Relationship/tableCache.js
+++ b/packages/standard-components/src/DataGrid/Relationship/tableCache.js
@ -1,20 +0,0 @@
-import api from "../../api"
-
-let cache = {}
-
-async function fetchTable(id) {
-  const FETCH_TABLE_URL = `/api/tables/${id}`
-  const response = await api.get(FETCH_TABLE_URL)
-  return await response.json()
-}
-
-export async function getTable(tableId) {
-  if (!tableId) {
-    return null
-  }
-  if (!cache[tableId]) {
-    cache[tableId] = fetchTable(tableId)
-    cache[tableId] = await cache[tableId]
-  }
-  return await cache[tableId]
-}
--- a/packages/standard-components/src/DataList.svelte
+++ b/packages/standard-components/src/DataList.svelte
@ -1,82 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-
-  export let _bb
-  export let table
-  export let layout = "list"
-
-  let headers = []
-  let store = _bb.store
-
-  async function fetchData() {
-    if (!table || !table.length) return
-
-    const FETCH_ROWS_URL = `/api/views/all_${table}`
-    const response = await _bb.api.get(FETCH_ROWS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-
-      store.update(state => {
-        state[table] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch rows.", response)
-    }
-  }
-
-  $: data = $store[table] || []
-  $: if (table) fetchData()
-
-  onMount(async () => {
-    await fetchData()
-  })
-</script>
-
-<section class:grid={layout === 'grid'} class:list={layout === 'list'}>
-  {#each data as data}
-    <div class="data-card">
-      <ul>
-        {#each Object.keys(data) as key}
-          <li>
-            <span class="data-key">{key}:</span>
-            <span class="data-value">{data[key]}</span>
-          </li>
-        {/each}
-      </ul>
-    </div>
-  {/each}
-</section>
-
-<style>
-  .list {
-    display: flex;
-    flex-direction: column;
-    font-family: Inter;
-  }
-
-  .grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
-  ul {
-    list-style-type: none;
-  }
-
-  li {
-    margin: 5px 0 5px 0;
-  }
-
-  .data-card {
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 10px;
-  }
-
-  .data-key {
-    font-weight: bold;
-    font-size: 20px;
-    text-transform: capitalize;
-  }
-</style>
--- a/packages/standard-components/src/DataSearch.svelte
+++ b/packages/standard-components/src/DataSearch.svelte
@ -1,15 +0,0 @@
-<script>
-  export let _bb
-  export let table
-
-  let searchValue = ""
-
-  function search() {
-    const SEARCH_URL = _bb.api.get(``)
-  }
-</script>
-
-<div>
-  <input type="text" bind:value={searchValue} />
-  <button on:click={search}>Search</button>
-</div>
--- a/packages/standard-components/src/DatePicker.svelte
+++ b/packages/standard-components/src/DatePicker.svelte
@ -1,18 +1,19 @@
 <script>
-  import Flatpickr from "svelte-flatpickr"
  import { DatePicker } from "@budibase/bbui"
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")

  export let placeholder
  export let value

-  export let _bb
-
  function handleChange(event) {
-    const [fullDate, dateStr, instance] = event.detail
-    if (_bb) {
-      _bb.setBinding("value", fullDate)
-    }
+    const [fullDate] = event.detail
+    value = fullDate
  }
 </script>

-<DatePicker {placeholder} on:change={handleChange} {value} />
+<div use:styleable={styles}>
+  <DatePicker {placeholder} on:change={handleChange} {value} />
+</div>
--- a/packages/standard-components/src/Embed.svelte
+++ b/packages/standard-components/src/Embed.svelte
@ -1,5 +1,23 @@
 <script>
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
+
  export let embed
 </script>

-{@html embed}
+<div use:styleable={styles}>
+  {@html embed}
+</div>
+
+<style>
+  div {
+    position: relative;
+  }
+  div :global(> *) {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+</style>
--- a/packages/standard-components/src/Form.svelte
+++ b/packages/standard-components/src/Form.svelte
@ -1,54 +1,63 @@
 <script>
+  import { getContext } from "svelte"
  import { Label, DatePicker, Input, Select, Toggle } from "@budibase/bbui"
  import Dropzone from "./attachments/Dropzone.svelte"
  import LinkedRowSelector from "./LinkedRowSelector.svelte"
-  import ErrorsBox from "./ErrorsBox.svelte"
  import { capitalise } from "./helpers"

-  export let _bb
-  export let table
+  const { styleable, screenStore, API } = getContext("sdk")
+  const dataContextStore = getContext("data")
+  const styles = getContext("style")
+
  export let wide = false

-  let store = _bb.store
-  let schema = {}
-  let rowId
-  let errors = {}
+  let row
+  let schema
+  let fields = []

-  $: schema = $store.data && $store.data._table && $store.data._table.schema
-  $: fields = schema ? Object.keys(schema) : []
+  $: getContextDetails($dataContextStore)
+
+  const getContextDetails = async dataContext => {
+    row = dataContext?.data
+    if (row) {
+      const tableDefinition = await API.fetchTableDefinition(row.tableId)
+      schema = tableDefinition.schema
+      fields = Object.keys(schema)
+    }
+  }
 </script>

-<div class="form-content">
-  <ErrorsBox errors={$store.saveRowErrors || {}} />
+<div class="form-content" use:styleable={styles}>
+  <!--  <ErrorsBox errors={$store.saveRowErrors || {}} />-->
  {#each fields as field}
    <div class="form-field" class:wide>
      {#if !(schema[field].type === 'boolean' && !wide)}
        <Label extraSmall={!wide} grey>{capitalise(schema[field].name)}</Label>
      {/if}
      {#if schema[field].type === 'options'}
-        <Select secondary bind:value={$store.data[field]}>
+        <Select secondary bind:value={row[field]}>
          <option value="">Choose an option</option>
          {#each schema[field].constraints.inclusion as opt}
            <option>{opt}</option>
          {/each}
        </Select>
      {:else if schema[field].type === 'datetime'}
-        <DatePicker bind:value={$store.data[field]} />
+        <DatePicker bind:value={row[field]} />
      {:else if schema[field].type === 'boolean'}
        <Toggle
          text={wide ? null : capitalise(schema[field].name)}
-          bind:checked={$store.data[field]} />
+          bind:checked={row[field]} />
      {:else if schema[field].type === 'number'}
-        <Input type="number" bind:value={$store.data[field]} />
+        <Input type="number" bind:value={row[field]} />
      {:else if schema[field].type === 'string'}
-        <Input bind:value={$store.data[field]} />
+        <Input bind:value={row[field]} />
      {:else if schema[field].type === 'attachment'}
-        <Dropzone bind:files={$store.data[field]} />
+        <Dropzone bind:files={row[field]} />
      {:else if schema[field].type === 'link'}
        <LinkedRowSelector
          secondary
          showLabel={false}
-          bind:linkedRows={$store.data[field]}
+          bind:linkedRows={row[field]}
          schema={schema[field]} />
      {/if}
    </div>
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@ -1,30 +1,24 @@
 <script>
-  import { buildStyle } from "./buildStyle.js"
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
+
  export let className = ""
  export let type
  export let text = ""
-
-  export let _bb
-
-  let containerElement
-
-  $: containerElement &&
-    !text &&
-    _bb.props.children &&
-    _bb.props.children.length &&
-    _bb.attachChildren(containerElement)
 </script>

 {#if type === 'h1'}
-  <h1 class={className} bind:this={containerElement}>{text}</h1>
+  <h1 class={className} use:styleable={styles}>{text}</h1>
 {:else if type === 'h2'}
-  <h2 class={className} bind:this={containerElement}>{text}</h2>
+  <h2 class={className} use:styleable={styles}>{text}</h2>
 {:else if type === 'h3'}
-  <h3 class={className} bind:this={containerElement}>{text}</h3>
+  <h3 class={className} use:styleable={styles}>{text}</h3>
 {:else if type === 'h4'}
-  <h4 class={className} bind:this={containerElement}>{text}</h4>
+  <h4 class={className} use:styleable={styles}>{text}</h4>
 {:else if type === 'h5'}
-  <h5 class={className} bind:this={containerElement}>{text}</h5>
+  <h5 class={className} use:styleable={styles}>{text}</h5>
 {:else if type === 'h6'}
-  <h6 class={className} bind:this={containerElement}>{text}</h6>
+  <h6 class={className} use:styleable={styles}>{text}</h6>
 {/if}
--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@ -1,9 +1,16 @@
 <script>
  import "@fortawesome/fontawesome-free/js/all.js"
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")

  export let icon = ""
  export let size = "fa-lg"
  export let color = "#000"
 </script>

-<i style={`color: ${color};`} class={`${icon} ${size}`} />
+<i
+  style={`color: ${color};`}
+  class={`${icon} ${size}`}
+  use:styleable={styles} />
--- a/packages/standard-components/src/IconOld.svelte
+++ b/packages/standard-components/src/IconOld.svelte
@ -1,9 +0,0 @@
-<script>
-  export let icon = ""
-  export let fontSize = "1em"
-  export let _bb
-
-  $: style = { fontSize }
-</script>
-
-<i class={icon} {style} />
--- a/packages/standard-components/src/Image.svelte
+++ b/packages/standard-components/src/Image.svelte
@ -1,15 +1,20 @@
 <script>
-  import { buildStyle } from "./buildStyle"
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")

  export let className = ""
  export let url = ""
  export let description = ""
  export let height
  export let width
-
-  export let _bb
-
-  $: style = buildStyle({ height, width })
 </script>

-<img class={className} {style} src={url} alt={description} />
+<img
+  {height}
+  {width}
+  class={className}
+  src={url}
+  alt={description}
+  use:styleable={styles} />
--- a/packages/standard-components/src/Input.svelte
+++ b/packages/standard-components/src/Input.svelte
@ -1,22 +1,21 @@
 <script>
-  export let id = ""
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
+
  export let value = ""
  export let className = ""
  export let type = "text"
-  export let label = ""
-  export let checked = false
-
-  export let _bb
-
-  let actualValue = ""

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

-<label for={id}>{label}</label>
-<input {id} class={className} {type} {value} {checked} on:change={onchange} />
+<input
+  class={className}
+  {type}
+  {value}
+  on:change={onchange}
+  use:styleable={styles} />
--- a/packages/standard-components/src/Link.svelte
+++ b/packages/standard-components/src/Link.svelte
@ -1,22 +1,17 @@
 <script>
-  import { cssVars, createClasses } from "./cssVars"
+  import { getContext } from "svelte"
+
+  const { linkable, styleable } = getContext("sdk")
+  const styles = getContext("style")

  export let url = ""
  export let text = ""
  export let openInNewTab = false

-  export let _bb
-
-  let anchorElement
-
-  $: anchorElement && !text && _bb.attachChildren(anchorElement)
  $: target = openInNewTab ? "_blank" : "_self"
 </script>

-<a href={url} bind:this={anchorElement} {target}>{text}</a>
-
-<style>
-  .textDecoration {
-    text-decoration: var(--textDecoration);
-  }
-</style>
+<a href={url} use:linkable {target} use:styleable={styles}>
+  {text}
+  <slot />
+</a>
--- a/packages/standard-components/src/LinkedRowSelector.svelte
+++ b/packages/standard-components/src/LinkedRowSelector.svelte
@ -1,7 +1,9 @@
 <script>
  import { Label, Multiselect } from "@budibase/bbui"
-  import api from "./api"
  import { capitalise } from "./helpers"
+  import { getContext } from "svelte"
+
+  const { API } = getContext("sdk")

  export let schema = {}
  export let linkedRows = []
@ -16,22 +18,16 @@
  $: fetchRows(linkedTableId)
  $: fetchTable(linkedTableId)

-  async function fetchTable() {
-    if (linkedTableId == null) {
-      return
+  async function fetchTable(id) {
+    if (id != null) {
+      linkedTable = await API.fetchTableDefinition(id)
    }
-    const FETCH_TABLE_URL = `/api/tables/${linkedTableId}`
-    const response = await api.get(FETCH_TABLE_URL)
-    linkedTable = await response.json()
  }

-  async function fetchRows(linkedTableId) {
-    if (linkedTableId == null) {
-      return
+  async function fetchRows(id) {
+    if (id != null) {
+      allRows = await API.fetchTableData(id)
    }
-    const FETCH_ROWS_URL = `/api/${linkedTableId}/rows`
-    const response = await api.get(FETCH_ROWS_URL)
-    allRows = await response.json()
  }

  function getPrettyName(row) {
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@ -1,23 +1,26 @@
 <script>
-  import { onMount } from "svelte"
-  import fetchData from "./fetchData.js"
+  import { getContext, onMount } from "svelte"
  import { isEmpty } from "lodash/fp"

-  export let _bb
+  const { API, styleable, DataProvider } = getContext("sdk")
+  const dataContextStore = getContext("data")
+  const styles = getContext("style")
+
  export let datasource = []

-  let target
-  let store = _bb.store
+  let rows = []

  onMount(async () => {
    if (!isEmpty(datasource)) {
-      const data = await fetchData(datasource, $store)
-      _bb.attachChildren(target, {
-        hydrate: false,
-        context: data,
-      })
+      rows = await API.fetchDatasource(datasource, $dataContextStore)
    }
  })
 </script>

-<section bind:this={target} />
+<div use:styleable={styles}>
+  {#each rows as row}
+    <DataProvider {row}>
+      <slot />
+    </DataProvider>
+  {/each}
+</div>
--- a/packages/standard-components/src/Login.svelte
+++ b/packages/standard-components/src/Login.svelte
@ -1,5 +1,8 @@
 <script>
-  import Button from "./Button.svelte"
+  import { getContext } from "svelte"
+
+  const { authStore, styleable } = getContext("sdk")
+  const styles = getContext("style")

  export let buttonText = "Log In"
  export let logo = ""
@ -7,8 +10,6 @@
  export let buttonClass = ""
  export let inputClass = ""

-  export let _bb
-
  let username = ""
  let password = ""
  let loading = false
@ -23,23 +24,12 @@

  const login = async () => {
    loading = true
-    const response = await _bb.api.post("/api/authenticate", {
-      username,
-      password,
-    })
-    if (response.status === 200) {
-      const json = await response.json()
-      localStorage.setItem("budibase:token", json.token)
-      // TODO: possibly do something with the user information in the response?
-      location.reload()
-    } else {
-      loading = false
-      error = true
-    }
+    await authStore.actions.logIn({ username, password })
+    loading = false
  }
 </script>

-<div class="root">
+<div class="root" use:styleable={styles}>
  <div class="content">
    {#if logo}
      <div class="logo-container"><img src={logo} alt="logo" /></div>
--- a/packages/standard-components/src/Nav.svelte
+++ b/packages/standard-components/src/Nav.svelte
@ -1,116 +0,0 @@
-<script>
-  import cssVars from "./cssVars"
-
-  export let navBarBackground = ""
-  export let navBarBorder = ""
-  export let navBarColor = ""
-  export let selectedItemBackground = ""
-  export let selectedItemColor = ""
-  export let selectedItemBorder = ""
-  export let itemHoverBackground = ""
-  export let itemHoverColor = ""
-  export let hideNavBar = false
-  export let selectedItem = ""
-
-  export let _children
-  export let _bb
-
-  let selectedIndex = -1
-  let styleVars = {}
-  let components = {}
-  let componentElements = {}
-
-  const hasComponentElements = () =>
-    Object.getOwnPropertyNames(componentElements).length > 0
-
-  $: {
-    styleVars = {
-      navBarBackground,
-      navBarBorder,
-      navBarColor,
-      selectedItemBackground,
-      selectedItemColor,
-      selectedItemBorder,
-      itemHoverBackground,
-      itemHoverColor,
-    }
-
-    if (_children && _children.length > 0 && hasComponentElements()) {
-      const currentSelectedItem =
-        selectedIndex > 0 ? _children[selectedIndex].title : ""
-      if (selectedItem && currentSelectedItem !== selectedItem) {
-        let i = 0
-        for (let child of _children) {
-          if (child.title === selectedItem) {
-            onSelectItem(i)()
-          }
-          i++
-        }
-      } else if (!currentSelectedItem) {
-        onSelectItem(0)
-      }
-    }
-  }
-
-  const onSelectItem = index => () => {
-    selectedIndex = index
-    if (!components[index]) {
-      const comp = _bb.attachChildren(componentElements[index])
-      components[index] = comp
-    }
-  }
-</script>
-
-<div class="root" use:cssVars={styleVars}>
-  {#if !hideNavBar}
-    <div class="navbar">
-      {#each _children as navItem, index}
-        <div
-          class="navitem"
-          on:click={onSelectItem(index)}
-          class:selected={selectedIndex === index}>
-          {navItem.title}
-        </div>
-      {/each}
-    </div>
-  {/if}
-  {#each _children as navItem, index}
-    <div class="content" bind:this={componentElements[index]} />
-  {/each}
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    width: 100%;
-    grid-template-columns: [navbar] auto [content] 1fr;
-    display: grid;
-  }
-
-  .navbar {
-    grid-column: navbar;
-    background: var(--navBarBackground);
-    border: var(--navBarBorder);
-    color: var(--navBarColor);
-  }
-
-  .navitem {
-    padding: 10px 17px;
-    cursor: pointer;
-  }
-
-  .navitem:hover {
-    background: var(--itemHoverBackground);
-    color: var(--itemHoverColor);
-  }
-
-  .navitem.selected {
-    background: var(--selectedItemBackground);
-    border: var(--selectedItemBorder);
-    color: var(--selectedItemColor);
-  }
-
-  .content {
-    grid-column: content;
-  }
-</style>
--- a/packages/standard-components/src/Navigation.svelte
+++ b/packages/standard-components/src/Navigation.svelte
@ -1,37 +1,20 @@
 <script>
-  export let onLoad
+  import { getContext } from "svelte"
+
+  const { authStore, linkable, styleable } = getContext("sdk")
+  const styles = getContext("style")
+
  export let logoUrl
-  export let _bb
  export let title

-  let itemContainer
-  let hasLoaded
-
-  $: {
-    if (itemContainer) {
-      _bb.attachChildren(itemContainer)
-      if (!hasLoaded) {
-        _bb.call("onLoad")
-        hasLoaded = true
-      }
-    }
-  }
-
  const logOut = () => {
-    // TODO: not the best way to clear cookie, try to find better way
-    const appId = location.pathname.split("/")[1]
-    if (appId) {
-      for (let environment of ["local", "cloud"]) {
-        document.cookie = `budibase:${appId}:${environment}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`
-      }
-    }
-    location.href = `/${appId}`
+    authStore.actions.logOut()
  }
 </script>

-<div class="nav">
+<div class="nav" use:styleable={styles}>
  <div class="nav__top">
-    <a href="/">
+    <a href="/" use:linkable>
      {#if logoUrl}
        <img class="logo" alt="logo" src={logoUrl} height="48" />
      {/if}
@ -41,7 +24,9 @@
      <div on:click={logOut}>Log out</div>
    </div>
  </div>
-  <div class="nav__menu" bind:this={itemContainer} />
+  <div class="nav__menu">
+    <slot />
+  </div>
 </div>

 <style>
--- a/packages/standard-components/src/NewRow.svelte
+++ b/packages/standard-components/src/NewRow.svelte
@ -1,37 +1,11 @@
 <script>
-  import { onMount } from "svelte"
+  import { getContext } from "svelte"
+
+  const { DataProvider } = getContext("sdk")

-  export let _bb
  export let table
-
-  let row = {}
-
-  $: {
-    row.tableId = table
-  }
-
-  let target
-
-  async function fetchTable(id) {
-    const FETCH_TABLE_URL = `/api/tables/${id}`
-    const response = await _bb.api.get(FETCH_TABLE_URL)
-    return await response.json()
-  }
-
-  onMount(async () => {
-    if (table && typeof table === "string") {
-      const tableObj = await fetchTable(table)
-      row.tableId = table
-      row._table = tableObj
-      _bb.attachChildren(target, {
-        context: row,
-      })
-    } else {
-      _bb.attachChildren(target, {
-        context: {},
-      })
-    }
-  })
 </script>

-<section bind:this={target} />
+<DataProvider row={{ tableId: table }}>
+  <slot />
+</DataProvider>
--- a/packages/standard-components/src/Option.svelte
+++ b/packages/standard-components/src/Option.svelte
@ -1,13 +0,0 @@
-<script>
-  export let value = ""
-  export let text = ""
-  export let _bb
-
-  let actualValue
-  let actualText
-
-  $: actualValue = value || text || ""
-  $: actualText = text || value || ""
-</script>
-
-<option value={actualValue}>{actualText}</option>
--- a/packages/standard-components/src/Radiobutton.svelte
+++ b/packages/standard-components/src/Radiobutton.svelte
@ -1,11 +0,0 @@
-<script>
-  import Input from "./Input.svelte"
-  export let _bb
-
-  export let label = ""
-  export let checked = false
-  export let value = ""
-  export let onchange = () => {}
-</script>
-
-<Input type="radio" {_bb} {checked} {label} {value} {onchange} />
--- a/packages/standard-components/src/RichText.svelte
+++ b/packages/standard-components/src/RichText.svelte
@ -1,20 +1,12 @@
 <script>
+  import { getContext } from "svelte"
  import { RichText } from "@budibase/bbui"

-  export let _bb
+  const { styleable } = getContext("sdk")

-  export let content = ""
-
-  const updateValue = content => {
-    if (_bb) {
-      _bb.setBinding("value", content)
-    }
-  }
-
-  $: updateValue(content)
+  export let value = ""

  // Need to determine what options we want to expose.
-
  let options = {
    modules: {
      toolbar: [
@ -31,4 +23,6 @@
  }
 </script>

-<RichText bind:content {options} />
+<div use:styleable={styles}>
+  <RichText bind:content={value} {options} />
+</div>
--- a/packages/standard-components/src/RowDetail.svelte
+++ b/packages/standard-components/src/RowDetail.svelte
@ -1,81 +1,42 @@
 <script>
-  import { onMount } from "svelte"
+  import { onMount, getContext } from "svelte"
+
+  const { API, screenStore, routeStore, DataProvider } = getContext("sdk")

-  export let _bb
  export let table

  let headers = []
-  let store = _bb.store
-  let target
-
-  async function fetchTable(id) {
-    const FETCH_TABLE_URL = `/api/tables/${id}`
-    const response = await _bb.api.get(FETCH_TABLE_URL)
-    return await response.json()
-  }
+  let row

  async function fetchFirstRow() {
-    const FETCH_ROWS_URL = `/api/views/all_${table}`
-    const response = await _bb.api.get(FETCH_ROWS_URL)
-    if (response.status === 200) {
-      const allRows = await response.json()
-      if (allRows.length > 0) return allRows[0]
-      return { tableId: table }
-    }
+    const rows = await API.fetchTableData(table)
+    return Array.isArray(rows) && rows.length ? rows[0] : { tableId: table }
  }

  async function fetchData() {
-    const pathParts = window.location.pathname.split("/")
-
    if (!table) {
      return
    }

-    let row
+    const pathParts = window.location.pathname.split("/")
+    const routeParamId = $routeStore.routeParams.id
+
    // if srcdoc, then we assume this is the builder preview
-    if (pathParts.length === 0 || pathParts[0] === "srcdoc") {
-      if (table) row = await fetchFirstRow()
-    } else if (_bb.routeParams().id) {
-      const GET_ROW_URL = `/api/${table}/rows/${_bb.routeParams().id}`
-      const response = await _bb.api.get(GET_ROW_URL)
-      if (response.status === 200) {
-        row = await response.json()
-      } else {
-        throw new Error("Failed to fetch row.", response)
-      }
+    if ((pathParts.length === 0 || pathParts[0] === "srcdoc") && table) {
+      console.log("getting first row")
+      row = await fetchFirstRow()
+    } else if (routeParamId) {
+      row = await API.fetchRow({ tableId: table, rowId: routeParamId })
    } else {
-      throw new Exception("Row ID was not supplied to RowDetail")
-    }
-
-    if (row) {
-      // Fetch table schema so we can check for linked rows
-      const tableObj = await fetchTable(row.tableId)
-      for (let key of Object.keys(tableObj.schema)) {
-        const type = tableObj.schema[key].type
-        if (type === "link") {
-          row[`${key}_count`] = Array.isArray(row[key]) ? row[key].length : 0
-        } else if (type === "attachment") {
-          let url = null
-          if (Array.isArray(row[key]) && row[key][0] != null) {
-            url = row[key][0].url
-          }
-          row[`${key}_first`] = url
-        }
-      }
-
-      row._table = tableObj
-
-      _bb.attachChildren(target, {
-        context: row,
-      })
-    } else {
-      _bb.attachChildren(target)
+      throw new Error("Row ID was not supplied to RowDetail")
    }
  }

-  onMount(async () => {
-    await fetchData()
-  })
+  onMount(fetchData)
 </script>

-<section bind:this={target} />
+{#if row}
+  <DataProvider {row}>
+    <slot />
+  </DataProvider>
+{/if}
--- a/packages/standard-components/src/Select.svelte
+++ b/packages/standard-components/src/Select.svelte
@ -1,23 +0,0 @@
-<script>
-  export let value = ""
-  export let className = ""
-
-  export let _bb
-
-  let actualValue = ""
-  let selectElement
-
-  $: selectElement && _bb.attachChildren(selectElement)
-
-  const onchange = ev => {
-    if (_bb) {
-      _bb.setBinding("value", ev.target.value)
-    }
-  }
-</script>
-
-<select
-  class={className}
-  {value}
-  on:change={onchange}
-  bind:this={selectElement} />
--- a/packages/standard-components/src/StackedList.svelte
+++ b/packages/standard-components/src/StackedList.svelte
@ -1,4 +1,9 @@
 <script>
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
+
  export let imageUrl = ""
  export let heading = ""
  export let text1 = ""
@ -9,7 +14,7 @@
  $: showImage = !!imageUrl
 </script>

-<div class="container">
+<div class="container" use:styleable={styles}>
  <a href={destinationUrl}>
    <div class="content">
      {#if showImage}
--- a/packages/standard-components/src/Table.svelte
+++ b/packages/standard-components/src/Table.svelte
@ -1,77 +0,0 @@
-<script>
-  export let columns = []
-  export let data = ""
-  export let tableClass = ""
-  export let theadClass = ""
-  export let tbodyClass = ""
-  export let trClass = ""
-  export let thClass = ""
-  export let onRowClick
-
-  export let _bb
-
-  const rowClickHandler = row => () => {
-    // call currently only accepts one argument, so passing row does nothing
-    // however, we do not expose this event anyway. I am leaving this
-    // in for the future, as can and probably should hande this
-    _bb.call("onRowClick", row)
-  }
-
-  const cellValue = (colIndex, row) => {
-    const val = _bb.getStateOrValue(_bb.props.columns[colIndex].value, row)
-    return val
-  }
-</script>
-
-<table class={tableClass}>
-  <thead class={theadClass}>
-    <tr class={trClass}>
-      {#each columns as col}
-        <th class={thClass}>{col.title}</th>
-      {/each}
-    </tr>
-  </thead>
-  <tbody class={tbodyClass}>
-    {#if data}
-      {#each data as row}
-        <tr class={trClass} on:click={rowClickHandler(row)}>
-          {#each columns as col, index}
-            <th class={thClass}>{cellValue(index, row)}</th>
-          {/each}
-        </tr>
-      {/each}
-    {/if}
-  </tbody>
-</table>
-
-<style>
-  .table-default {
-    width: 100%;
-    margin-bottom: 1rem;
-    color: #212529;
-    border-collapse: collapse;
-  }
-
-  .table-default .thead-default .th-default {
-    vertical-align: bottom;
-    border-bottom: 2px solid #dee2e6;
-    font-weight: bold;
-  }
-
-  .table-default .th-default {
-    padding: 0.75rem;
-    vertical-align: top;
-    border-top: 1px solid #dee2e6;
-    font-weight: normal;
-  }
-
-  .th-default {
-    text-align: inherit;
-  }
-
-  .table-default .tbody-default .tr-default:hover {
-    color: #212529;
-    background-color: rgba(0, 0, 0, 0.075);
-    cursor: pointer;
-  }
-</style>
--- a/packages/standard-components/src/TableBody.svelte
+++ b/packages/standard-components/src/TableBody.svelte
@ -1,10 +0,0 @@
-<script>
-  export let className = ""
-  export let _bb
-
-  let thead
-
-  $: _bb.attachChildren(thead)
-</script>
-
-<tbody bind:this={thead} class="className" />
--- a/packages/standard-components/src/TableHead.svelte
+++ b/packages/standard-components/src/TableHead.svelte
@ -1,10 +0,0 @@
-<script>
-  export let className = ""
-  export let _bb
-
-  let thead
-
-  $: _bb.attachChildren(thead)
-</script>
-
-<thead bind:this={thead} class="className" />
--- a/packages/standard-components/src/Templates/saveRowButton.js
+++ b/packages/standard-components/src/Templates/saveRowButton.js
@ -1,23 +0,0 @@
-export default ({ rows }) =>
-  rows.map(r => ({
-    name: `Save ${r.name} Button`,
-    props: buttonProps(r),
-  }))
-
-const buttonProps = row => ({
-  _component: "@budibase/standard-components/button",
-  _children: [
-    {
-      _component: "@budibase/standard-components/text",
-      text: `Save ${row.name}`,
-    },
-  ],
-  onClick: [
-    {
-      "##eventHandlerType": "Save Row",
-      parameters: {
-        statePath: `${row.name}`,
-      },
-    },
-  ],
-})
--- a/packages/standard-components/src/Test/createApp.js
+++ b/packages/standard-components/src/Test/createApp.js
@ -1,25 +0,0 @@
-import { createApp } from "@budibase/client/src/createApp"
-import components from "./testComponents"
-import packageJson from "../../package.json"
-import { rootComponent } from "./rootComponent"
-
-export default async () => {
-  delete components._lib
-  const componentLibraries = {}
-  componentLibraries[packageJson.name] = components
-  componentLibraries["testcomponents"] = {
-    rootComponent: rootComponent(window),
-  }
-  const appDef = { hierarchy: {}, actions: {} }
-  const user = { name: "yeo", permissions: [] }
-  const { initialisePage } = createApp(
-    window.document,
-    componentLibraries,
-    {},
-    appDef,
-    user,
-    {},
-    []
-  )
-  return initialisePage
-}
--- a/packages/standard-components/src/Text.svelte
+++ b/packages/standard-components/src/Text.svelte
@ -1,35 +1,39 @@
 <script>
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const styles = getContext("style")
+
  export let text = ""
  export let className = ""
  export let type = ""
-  export let _bb

  const isTag = tag => type === tag
 </script>

 {#if isTag('none')}
-  <span>{text}</span>
+  <span use:styleable={styles}>{text}</span>
 {:else if isTag('bold')}
-  <b class={className}>{text}</b>
+  <b class={className} use:styleable={styles}>{text}</b>
 {:else if isTag('strong')}
-  <strong class={className}>{text}</strong>
+  <strong class={className} use:styleable={styles}>{text}</strong>
 {:else if isTag('italic')}
-  <i class={className}>{text}</i>
+  <i class={className} use:styleable={styles}>{text}</i>
 {:else if isTag('emphasis')}
-  <em class={className}>{text}</em>
+  <em class={className} use:styleable={styles}>{text}</em>
 {:else if isTag('mark')}
-  <mark class={className}>{text}</mark>
+  <mark class={className} use:styleable={styles}>{text}</mark>
 {:else if isTag('small')}
-  <small class={className}>{text}</small>
+  <small class={className} use:styleable={styles}>{text}</small>
 {:else if isTag('del')}
-  <del class={className}>{text}</del>
+  <del class={className} use:styleable={styles}>{text}</del>
 {:else if isTag('ins')}
-  <ins class={className}>{text}</ins>
+  <ins class={className} use:styleable={styles}>{text}</ins>
 {:else if isTag('sub')}
-  <sub class={className}>{text}</sub>
+  <sub class={className} use:styleable={styles}>{text}</sub>
 {:else if isTag('sup')}
-  <sup class={className}>{text}</sup>
-{:else}<span>{text}</span>{/if}
+  <sup class={className} use:styleable={styles}>{text}</sup>
+{:else}<span use:styleable={styles}>{text}</span>{/if}

 <style>
  span {
--- a/Show More
+++ b/Show More