WIP

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

@@ -88,7 +88,7 @@ const INITIAL_FRONTEND_STATE = {
   selectedLayoutId: null,
 
   // Client state
-  selectedComponentInstance: null,
+  selectedComponentContext: null,
 
   // Onboarding
   onboarding: false,
@@ -504,6 +504,12 @@ export const getFrontendStore = () => {
           return state
         })
       },
+      setSelectedComponentContext: context => {
+        store.update(state => {
+          state.selectedComponentContext = context
+          return state
+        })
+      },
     },
     layouts: {
       select: layoutId => {

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -45,6 +45,7 @@
   export let valid
   export let allowJS = false
   export let allowHelpers = true
+  export let context = null
 
   const drawerActions = getContext("drawer-actions")
   const bindingDrawerActions = getContext("binding-drawer-actions")
@@ -250,6 +251,7 @@
                 <BindingPicker
                   {bindings}
                   {allowHelpers}
+                  {context}
                   addHelper={onSelectHelper}
                   addBinding={onSelectBinding}
                   mode={editorMode}
@@ -330,6 +332,7 @@
                   <BindingPicker
                     {bindings}
                     {allowHelpers}
+                    {context}
                     addHelper={onSelectHelper}
                     addBinding={onSelectBinding}
                     mode={editorMode}

packages/builder/src/components/common/bindings/BindingPicker.svelte

@@ -1,6 +1,6 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { convertToJS } from "@budibase/string-templates"
+  import { convertToJS, processStringSync } from "@budibase/string-templates"
   import { Input, Layout, ActionButton, Icon, Popover } from "@budibase/bbui"
   import { handlebarsCompletions } from "constants/completions"
 
@@ -9,6 +9,7 @@
   export let bindings
   export let mode
   export let allowHelpers
+  export let context = null
 
   let search = ""
   let popover
@@ -95,6 +96,9 @@
         {#if hoverTarget.example}
           <pre class="helper__example">{hoverTarget.example}</pre>
         {/if}
+        {#if hoverTarget.val}
+          <pre>{hoverTarget.val}</pre>
+        {/if}
       </div>
     </Layout>
   </Popover>
@@ -165,13 +169,14 @@
               <li
                 class="binding"
                 on:mouseenter={e => {
+                  const hbs = `{{ ${binding.runtimeBinding} }}`
+                  const val = processStringSync(hbs, context)
+                  console.log(binding.runtimeBinding, val)
                   popoverAnchor = e.target
-                  if (!binding.description) {
-                    return
-                  }
                   hoverTarget = {
                     title: binding.display?.name || binding.fieldSchema?.name,
                     description: binding.description,
+                    val,
                   }
                   popover.show()
                   e.stopPropagation()

packages/builder/src/components/common/bindings/ClientBindingPanel.svelte

@@ -6,7 +6,7 @@
   export let value = ""
   export let allowJS = false
   export let allowHelpers = true
-
+  export let context = null
   $: enrichedBindings = enrichBindings(bindings)
 
   // Ensure bindings have the correct categories
@@ -24,6 +24,7 @@
 <BindingPanel
   bind:valid
   bindings={enrichedBindings}
+  {context}
   {value}
   {allowJS}
   {allowHelpers}

packages/builder/src/components/common/bindings/DrawerBindableInput.svelte

@@ -4,7 +4,6 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
-
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import { createEventDispatcher, setContext } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"
@@ -22,8 +21,10 @@
   export let updateOnChange = true
   export let drawerLeft
   export let disableBindings = false
+  export let context = null
 
   const dispatch = createEventDispatcher()
+
   let bindingDrawer
   let valid = true
   let currentVal = value
@@ -95,6 +96,7 @@
     bind:valid
     value={readableValue}
     on:change={event => (tempValue = event.detail)}
+    {context}
     {bindings}
     {allowJS}
     {allowHelpers}

packages/builder/src/components/design/settings/controls/PropertyControl.svelte

@@ -24,6 +24,7 @@
   export let propertyFocus = false
   export let info = null
   export let disableBindings = false
+  export let context = null
 
   $: nullishValue = value == null || value === ""
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
@@ -97,6 +98,7 @@
       onChange={handleChange}
       bindings={allBindings}
       name={key}
+      {context}
       {nested}
       {key}
       {type}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte

@@ -8,6 +8,7 @@
   import { getComponentForSetting } from "components/design/settings/componentSettings"
   import InfoDisplay from "./InfoDisplay.svelte"
   import analytics, { Events } from "analytics"
+  import { onMount } from "svelte"
 
   export let componentDefinition
   export let componentInstance
@@ -26,6 +27,7 @@
     tag,
     includeHidden
   )
+  $: context = $store.selectedComponentContext
 
   const getSections = (instance, definition, isScreen, tag, includeHidden) => {
     const settings = definition?.settings ?? []
@@ -145,6 +147,12 @@
     }
     return shouldDisplay(instance, setting)
   }
+
+  onMount(() => {
+    store.actions.preview.sendEvent("request-context")
+  })
+
+  $: console.log(context)
 </script>
 
 {#each sections as section, idx (section.name)}
@@ -191,6 +199,7 @@
                 min: setting.min ?? null,
                 max: setting.max ?? null,
               }}
+              {context}
               {bindings}
               {componentBindings}
               {componentInstance}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -181,6 +181,16 @@
     } else if (type === "add-parent-component") {
       const { componentId, parentType } = data
       await store.actions.components.addParent(componentId, parentType)
+    } else if (type === "provide-context") {
+      let context = data?.context
+      if (context) {
+        try {
+          context = JSON.parse(context)
+        } catch (error) {
+          context = null
+        }
+      }
+      store.actions.preview.setSelectedComponentContext(context)
     } else {
       console.warn(`Client sent unknown event type: ${type}`)
     }

packages/client/src/index.js

@@ -75,6 +75,12 @@ const loadBudibase = async () => {
       } else {
         dndStore.actions.reset()
       }
+    } else if (type === "request-context") {
+      const { selectedComponentInstance } = get(componentStore)
+      const context = selectedComponentInstance?.getDataContext()
+      eventStore.actions.dispatchEvent("provide-context", {
+        context: JSON.stringify(context),
+      })
     }
   }