From 911fa31fe3a54cc028c4e92b3607b2b6b3f7ae05 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 20 Nov 2020 10:49:39 +0000
Subject: [PATCH 1/3] Tidy up data binding

---
 .../builderStore/fetchBindableProperties.js   | 43 ++++---------------
 .../src/builderStore/replaceBindings.js       |  5 +--
 .../AppPreview/iframeTemplate.js              |  2 +-
 .../client/src/components/Component.svelte    |  5 +--
 .../client/src/components/DataProvider.svelte |  3 +-
 packages/client/src/store/dataContext.js      | 12 ++----
 6 files changed, 19 insertions(+), 51 deletions(-)

diff --git a/packages/builder/src/builderStore/fetchBindableProperties.js b/packages/builder/src/builderStore/fetchBindableProperties.js
index 9a193112fb..962fb80ebf 100644
--- a/packages/builder/src/builderStore/fetchBindableProperties.js
+++ b/packages/builder/src/builderStore/fetchBindableProperties.js
@@ -24,7 +24,7 @@ import { cloneDeep, difference } from "lodash/fp"
  * @returns {Array.<BindableProperty>}
  */
 export default function({ componentInstanceId, screen, components, tables }) {
-  const walkResult = walk({
+  const result = walk({
     // cloning so we are free to mutate props (e.g. by adding _contexts)
     instance: cloneDeep(screen.props),
     targetId: componentInstanceId,
@@ -33,13 +33,10 @@ export default function({ componentInstanceId, screen, components, tables }) {
   })
 
   return [
-    ...walkResult.bindableInstances
-      .filter(isInstanceInSharedContext(walkResult))
-      .map(componentInstanceToBindable(walkResult)),
-
-    ...(walkResult.target?._contexts
-      .map(contextToBindables(tables, walkResult))
-      .flat() ?? []),
+    ...result.bindableInstances
+      .filter(isInstanceInSharedContext(result))
+      .map(componentInstanceToBindable),
+    ...(result.target?._contexts.map(contextToBindables(tables)).flat() ?? []),
   ]
 }
 
@@ -53,26 +50,18 @@ const isInstanceInSharedContext = walkResult => i =>
 
 // turns a component instance prop into binding expressions
 // used by the UI
-const componentInstanceToBindable = walkResult => i => {
-  const lastContext =
-    i.instance._contexts.length &&
-    i.instance._contexts[i.instance._contexts.length - 1]
-  const contextParentPath = lastContext
-    ? getParentPath(walkResult, lastContext)
-    : ""
-
+const componentInstanceToBindable = i => {
   return {
     type: "instance",
     instance: i.instance,
     // how the binding expression persists, and is used in the app at runtime
-    runtimeBinding: `${contextParentPath}${i.instance._id}.${i.prop}`,
+    runtimeBinding: `${i.instance._id}`,
     // how the binding exressions looks to the user of the builder
     readableBinding: `${i.instance._instanceName}`,
   }
 }
 
-const contextToBindables = (tables, walkResult) => context => {
-  const contextParentPath = getParentPath(walkResult, context)
+const contextToBindables = tables => context => {
   const tableId = context.table?.tableId ?? context.table
   const table = tables.find(table => table._id === tableId)
   let schema =
@@ -98,7 +87,7 @@ const contextToBindables = (tables, walkResult) => context => {
       fieldSchema,
       instance: context.instance,
       // how the binding expression persists, and is used in the app at runtime
-      runtimeBinding: `${contextParentPath}data.${runtimeBoundKey}`,
+      runtimeBinding: `${context.instance._id}.${runtimeBoundKey}`,
       // how the binding expressions looks to the user of the builder
       readableBinding: `${context.instance._instanceName}.${table.name}.${key}`,
       // table / view info
@@ -118,20 +107,6 @@ const contextToBindables = (tables, walkResult) => context => {
   )
 }
 
-const getParentPath = (walkResult, context) => {
-  // describes the number of "parent" in the path
-  // clone array first so original array is not mtated
-  const contextParentNumber = [...walkResult.target._contexts]
-    .reverse()
-    .indexOf(context)
-
-  return (
-    new Array(contextParentNumber).fill("parent").join(".") +
-    // trailing . if has parents
-    (contextParentNumber ? "." : "")
-  )
-}
-
 const walk = ({ instance, targetId, components, tables, result }) => {
   if (!result) {
     result = {
diff --git a/packages/builder/src/builderStore/replaceBindings.js b/packages/builder/src/builderStore/replaceBindings.js
index aa57301261..0bf9f485c9 100644
--- a/packages/builder/src/builderStore/replaceBindings.js
+++ b/packages/builder/src/builderStore/replaceBindings.js
@@ -12,10 +12,7 @@ export function readableToRuntimeBinding(bindableProperties, textWithBindings) {
         return boundValue === `{{ ${readableBinding} }}`
       })
       if (binding) {
-        result = textWithBindings.replace(
-          boundValue,
-          `{{ ${binding.runtimeBinding} }}`
-        )
+        result = result.replace(boundValue, `{{ ${binding.runtimeBinding} }}`)
       }
     })
   return result
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index 745ae7c89b..a2e7d1ee8b 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -46,7 +46,7 @@ export default `<html>
 
         selectedComponentStyle = document.createElement('style');
         document.head.appendChild(selectedComponentStyle)
-        var selectedCss = '[data-bb-id="' + data.selectedComponentType + '-' + data.selectedComponentId + '"]'  + '{border:2px solid #0055ff !important;}'
+        var selectedCss = '[data-bb-id="' + data.selectedComponentId + '"]'  + '{border:2px solid #0055ff !important;}'
         selectedComponentStyle.appendChild(document.createTextNode(selectedCss))
 
         styles = document.createElement('style')
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 273d217df3..62d9f5ef94 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -30,14 +30,13 @@
   // 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 })
+  // Set contexts to be consumed by component
+  setContext("style", { ...definition._styles, id: definition._id })
   $: console.log("Rendering: " + componentName)
 </script>
 
diff --git a/packages/client/src/components/DataProvider.svelte b/packages/client/src/components/DataProvider.svelte
index 30c1b4aec6..48465599f2 100644
--- a/packages/client/src/components/DataProvider.svelte
+++ b/packages/client/src/components/DataProvider.svelte
@@ -6,6 +6,7 @@
 
   // Get current contexts
   const dataContext = getContext("data")
+  const { id } = getContext("style")
 
   // Clone current context to this context
   const newDataContext = createDataContextStore($dataContext)
@@ -14,7 +15,7 @@
   // Add additional layer to context
   let loaded = false
   onMount(() => {
-    newDataContext.actions.addContext(row)
+    newDataContext.actions.addContext(row, id)
     loaded = true
   })
 </script>
diff --git a/packages/client/src/store/dataContext.js b/packages/client/src/store/dataContext.js
index 959731d207..90acc42664 100644
--- a/packages/client/src/store/dataContext.js
+++ b/packages/client/src/store/dataContext.js
@@ -3,7 +3,6 @@ import { enrichDataBinding } from "../utils"
 import { cloneDeep } from "lodash/fp"
 
 const initialValue = {
-  parent: null,
   data: null,
 }
 
@@ -12,15 +11,12 @@ export const createDataContextStore = existingContext => {
   const store = writable(initial)
 
   // Adds a context layer to the data context tree
-  const addContext = row => {
+  const addContext = (row, componentId) => {
     store.update(state => {
-      if (state.data) {
-        state.parent = {
-          parent: state.parent,
-          data: state.data,
-        }
+      if (row && componentId) {
+        state[componentId] = row
+        state.data = row
       }
-      state.data = row
       return state
     })
   }

From 192959c8651ecdce7784ba7c8158f7b5f9db21c6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 23 Nov 2020 11:29:24 +0000
Subject: [PATCH 2/3] Fix builder preview

---
 .../AppPreview/CurrentItemPreview.svelte      | 102 +++++-------------
 .../AppPreview/iframeTemplate.js              |  59 +++++-----
 .../client/src/components/Component.svelte    |   1 -
 packages/client/src/components/Screen.svelte  |   2 +-
 packages/client/src/store/screens.js          |  19 +++-
 .../client/src/utils/enrichDataBinding.js     |   3 -
 packages/standard-components/components.json  |  34 +-----
 .../standard-components/src/RowDetail.svelte  |   1 -
 .../src/charts/LineChart.svelte               |   2 +-
 9 files changed, 75 insertions(+), 148 deletions(-)

diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 45a25bd71f..c9fe02e786 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -1,28 +1,13 @@
 <script>
-  import { store, backendUiStore } from "builderStore"
-  import { map, join } from "lodash/fp"
+  import { onMount } from "svelte"
+  import { store } from "builderStore"
   import iframeTemplate from "./iframeTemplate"
-  import { pipe } from "../../../helpers"
-  import { Screen } from "../../../builderStore/store/screenTemplates/utils/Screen"
-  import { Component } from "../../../builderStore/store/screenTemplates/utils/Component"
+  import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
+  import { Component } from "builderStore/store/screenTemplates/utils/Component"
 
   let iframe
-  let styles = ""
-
-  function transform_component(comp) {
-    const props = comp.props || comp
-    if (props && props._children && props._children.length) {
-      props._children = props._children.map(transform_component)
-    }
-
-    return props
-  }
-
-  const getComponentTypeName = component => {
-    let [componentName] = component._component.match(/[a-zA-Z]*$/)
-    return componentName || "element"
-  }
 
+  // Styles for screenslot placeholder
   const headingStyle = {
     width: "500px",
     padding: "8px",
@@ -70,71 +55,39 @@
   // TODO: this ID is attached to how the screen slot is rendered, confusing, would be better a type etc
   screenPlaceholder.props._id = "screenslot-placeholder"
 
-  $: hasComponent = !!$store.currentPreviewItem
-
-  $: {
-    styles = ""
-    // Apply the CSS from the currently selected page and its screens
-    const currentPage = $store.pages[$store.currentPageName]
-    styles += currentPage._css
-    for (let screen of currentPage._screens) {
-      styles += screen._css
-    }
-    styles = styles
+  // Extract data to pass to the iframe
+  $: page = $store.pages[$store.currentPageName]
+  $: screen =
+    $store.currentFrontEndType === "page"
+      ? screenPlaceholder
+      : $store.currentPreviewItem
+  $: selectedComponentId = $store.currentComponentInfo?._id ?? ""
+  $: previewData = {
+    page,
+    screen,
+    selectedComponentId,
   }
 
-  $: stylesheetLinks = pipe($store.pages.stylesheets, [
-    map(s => `<link rel="stylesheet" href="${s}"/>`),
-    join("\n"),
-  ])
-
-  $: screensExist =
-    $store.currentPreviewItem._screens &&
-    $store.currentPreviewItem._screens.length > 0
-
-  $: frontendDefinition = {
-    appId: $store.appId,
-    libraries: $store.libraries,
-    page: $store.pages[$store.currentPageName],
-    screens: [
-      $store.currentFrontEndType === "page"
-        ? screenPlaceholder
-        : $store.currentPreviewItem,
-    ],
-  }
-
-  $: selectedComponentType = getComponentTypeName($store.currentComponentInfo)
-
-  $: selectedComponentId = $store.currentComponentInfo
-    ? $store.currentComponentInfo._id
-    : ""
-
+  // Update the iframe with the builder info to render the correct preview
   const refreshContent = () => {
-    iframe.contentWindow.postMessage(
-      JSON.stringify({
-        styles,
-        stylesheetLinks,
-        selectedComponentType,
-        selectedComponentId,
-        frontendDefinition,
-        appId: $store.appId,
-        instanceId: $backendUiStore.selectedDatabase._id,
-      })
-    )
+    if (iframe) {
+      iframe.contentWindow.postMessage(JSON.stringify(previewData))
+    }
   }
 
-  $: if (iframe)
+  // Refrech the preview when required
+  $: refreshContent(previewData)
+
+  // Initialise the app when mounted
+  onMount(() => {
     iframe.contentWindow.addEventListener("bb-ready", refreshContent, {
       once: true,
     })
-
-  $: if (iframe && frontendDefinition) {
-    refreshContent()
-  }
+  })
 </script>
 
 <div class="component-container">
-  {#if hasComponent && $store.currentPreviewItem}
+  {#if $store.currentPreviewItem}
     <iframe
       style="height: 100%; width: 100%"
       title="componentPreview"
@@ -152,7 +105,6 @@
     margin: auto;
     height: 100%;
   }
-
   .component-container iframe {
     border: 0;
     left: 0;
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index a2e7d1ee8b..2b12267a85 100644
--- 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;
       }
-      [data-bb-id="container-screenslot-placeholder"] {
+      [data-bb-id="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;
       }
-      [data-bb-id="container-screenslot-placeholder"] span {
+      [data-bb-id="screenslot-placeholder"] span {
         display: block;
         margin-bottom: 10px;
       }
@@ -31,45 +31,46 @@ export default `<html>
     <script src='/assets/budibase-client.js'></script>
     <script>
       function receiveMessage(event) { 
+        if (!event.data) {
+          return
+        }
 
-        if (!event.data) return
-
-        const data = JSON.parse(event.data)
-
-        try {
-          if (styles) document.head.removeChild(styles)
-        } catch(_) { }
-
-        try {
-          if (selectedComponentStyle) document.head.removeChild(selectedComponentStyle)
-        } catch(_) { }
-
-        selectedComponentStyle = document.createElement('style');
+        // Extract data from message
+        const { selectedComponentId, page, screen } = JSON.parse(event.data)
+        
+        // Update selected component style
+        if (selectedComponentStyle) {
+          document.head.removeChild(selectedComponentStyle)
+        }
+        selectedComponentStyle = document.createElement("style");
         document.head.appendChild(selectedComponentStyle)
-        var selectedCss = '[data-bb-id="' + data.selectedComponentId + '"]'  + '{border:2px solid #0055ff !important;}'
+        var selectedCss = '[data-bb-id="' + 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))
-
+        // Set some flags so the app knows we're in the builder
         window["##BUDIBASE_IN_BUILDER##"] = true;
+        window["##BUDIBASE_PREVIEW_PAGE##"] = page;
+        window["##BUDIBASE_PREVIEW_SCREEN##"] = screen;
+        
+        // Initialise app
         if (window.loadBudibase) {
           loadBudibase()
         }
       }
-      let styles
+      
       let selectedComponentStyle
 
-      document.addEventListener("click", function(e) {
-        e.preventDefault()
-        e.stopPropagation()
-        return false;
-      }, true)
+      // Ignore clicks
+      ["click", "mousedown"].forEach(type => {
+        document.addEventListener(type, function(e) {
+          e.preventDefault()
+          e.stopPropagation()
+          return false
+        }, true)
+      })
 
-      window.addEventListener('message', receiveMessage)
-      window.dispatchEvent(new Event('bb-ready'))
-      
+      window.addEventListener("message", receiveMessage)
+      window.dispatchEvent(new Event("bb-ready"))
     </script>
   </head>
   <body>
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 62d9f5ef94..801080fea2 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -37,7 +37,6 @@
 
   // Set contexts to be consumed by component
   setContext("style", { ...definition._styles, id: definition._id })
-  $: console.log("Rendering: " + componentName)
 </script>
 
 {#if constructor}
diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte
index feb3671789..ac17556113 100644
--- a/packages/client/src/components/Screen.svelte
+++ b/packages/client/src/components/Screen.svelte
@@ -4,7 +4,7 @@
 
   // Keep route params up to date
   export let params
-  $: routeStore.actions.setRouteParams(params)
+  $: routeStore.actions.setRouteParams(params || {})
 
   // Get the screen definition for the current route
   $: screenDefinition = $screenStore.activeScreen?.props
diff --git a/packages/client/src/store/screens.js b/packages/client/src/store/screens.js
index 4e29e44621..a39a67e3d4 100644
--- a/packages/client/src/store/screens.js
+++ b/packages/client/src/store/screens.js
@@ -24,11 +24,20 @@ const createScreenStore = () => {
   })
 
   const fetchScreens = async () => {
-    const appDefinition = await API.fetchAppDefinition(getAppId())
-    config.set({
-      screens: appDefinition.screens,
-      page: appDefinition.page,
-    })
+    let screens
+    let page
+    const inBuilder = !!window["##BUDIBASE_IN_BUILDER##"]
+    if (inBuilder) {
+      // Load screen and page from the window object if in the builder
+      screens = [window["##BUDIBASE_PREVIEW_SCREEN##"]]
+      page = window["##BUDIBASE_PREVIEW_PAGE##"]
+    } else {
+      // Otherwise load from API
+      const appDefinition = await API.fetchAppDefinition(getAppId())
+      screens = appDefinition.screens
+      page = appDefinition.page
+    }
+    config.set({ screens, page })
   }
 
   return {
diff --git a/packages/client/src/utils/enrichDataBinding.js b/packages/client/src/utils/enrichDataBinding.js
index 9f5f98502a..3b16f70fc9 100644
--- a/packages/client/src/utils/enrichDataBinding.js
+++ b/packages/client/src/utils/enrichDataBinding.js
@@ -28,8 +28,5 @@ export const enrichDataBinding = (input, context) => {
   if (!looksLikeMustache.test(input)) {
     return input
   }
-  console.log("====================================")
-  console.log(input)
-  console.log(context)
   return mustache.render(input, context)
 }
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index a766d3084c..7eddadb68e 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -130,15 +130,6 @@
 			"form"
 		]
 	},
-	"select": {
-		"name": "Select",
-		"bindable": "value",
-		"description": "An HTML <select> (dropdown)",
-		"props": {
-			"value": "string",
-			"className": "string"
-		}
-	},
 	"option": {
 		"name": "Option",
 		"description": "An HTML <option>, to be used with <select>",
@@ -181,28 +172,6 @@
 			"value": "string"
 		}
 	},
-	"checkbox": {
-		"name": "Checkbox",
-		"bindable": "value",
-		"description": "A selectable checkbox component",
-		"props": {
-			"label": "string",
-			"checked": "bool",
-			"value": "string",
-			"onchange": "event"
-		}
-	},
-	"radiobutton": {
-		"name": "Radiobutton",
-		"bindable": "value",
-		"description": "A selectable radiobutton component",
-		"props": {
-			"label": "string",
-			"checked": "bool",
-			"value": "string",
-			"onchange": "event"
-		}
-	},
 	"icon": {
 		"description": "A HTML icon tag",
 		"props": {
@@ -687,7 +656,8 @@
 		"description": "Date Picker",
 		"bindable": "value",
 		"props": {
-			"placeholder": "string"
+			"placeholder": "string",
+			"value": "string"
 		}
 	},
 	"link": {
diff --git a/packages/standard-components/src/RowDetail.svelte b/packages/standard-components/src/RowDetail.svelte
index 036fa6ce5b..d260e414d9 100644
--- a/packages/standard-components/src/RowDetail.svelte
+++ b/packages/standard-components/src/RowDetail.svelte
@@ -23,7 +23,6 @@
 
     // if srcdoc, then we assume this is the builder preview
     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 })
diff --git a/packages/standard-components/src/charts/LineChart.svelte b/packages/standard-components/src/charts/LineChart.svelte
index c966686959..6e7f7f65f0 100644
--- a/packages/standard-components/src/charts/LineChart.svelte
+++ b/packages/standard-components/src/charts/LineChart.svelte
@@ -97,4 +97,4 @@
   })
 </script>
 
-<ApexChart {options} {styles} />
+<ApexChart {options} />

From e3fe891053c4062606a9e48ab0a5f295b8b7aed4 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 23 Nov 2020 11:29:34 +0000
Subject: [PATCH 3/3] Fix chart styling

---
 packages/standard-components/src/charts/BarChart.svelte         | 2 +-
 packages/standard-components/src/charts/CandleStickChart.svelte | 2 +-
 packages/standard-components/src/charts/PieChart.svelte         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/standard-components/src/charts/BarChart.svelte b/packages/standard-components/src/charts/BarChart.svelte
index 91cd4c4dc9..4bf01b9a21 100644
--- a/packages/standard-components/src/charts/BarChart.svelte
+++ b/packages/standard-components/src/charts/BarChart.svelte
@@ -89,4 +89,4 @@
   })
 </script>
 
-<ApexChart {options} {styles} />
+<ApexChart {options} />
diff --git a/packages/standard-components/src/charts/CandleStickChart.svelte b/packages/standard-components/src/charts/CandleStickChart.svelte
index 4659a6a3b7..341b1d714f 100644
--- a/packages/standard-components/src/charts/CandleStickChart.svelte
+++ b/packages/standard-components/src/charts/CandleStickChart.svelte
@@ -71,4 +71,4 @@
   })
 </script>
 
-<ApexChart {options} {styles} />
+<ApexChart {options} />
diff --git a/packages/standard-components/src/charts/PieChart.svelte b/packages/standard-components/src/charts/PieChart.svelte
index a8ee1ca6df..9a8db6b17a 100644
--- a/packages/standard-components/src/charts/PieChart.svelte
+++ b/packages/standard-components/src/charts/PieChart.svelte
@@ -63,4 +63,4 @@
   })
 </script>
 
-<ApexChart {options} {styles} />
+<ApexChart {options} />