Improve how component context is retrieved for live eval and provide extra context from grid and card blocks

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

@@ -1,6 +1,7 @@
 <script>
   import BindingPanel from "./BindingPanel.svelte"
   import { previewStore } from "stores/builder"
+  import { onMount } from "svelte"
 
   export let bindings = []
   export let valid
@@ -21,6 +22,8 @@
       type: null,
     }))
   }
+
+  onMount(previewStore.requestComponentContext)
 </script>
 
 <BindingPanel

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

@@ -1,14 +1,13 @@
 <script>
   import { helpers } from "@budibase/shared-core"
   import { DetailSummary, notifications } from "@budibase/bbui"
-  import { componentStore, previewStore } from "stores/builder"
+  import { componentStore } from "stores/builder"
   import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
   import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
   import EjectBlockButton from "components/design/settings/controls/EjectBlockButton.svelte"
   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
@@ -145,10 +144,6 @@
     }
     return shouldDisplay(instance, setting)
   }
-
-  onMount(() => {
-    previewStore.sendEvent("request-context")
-  })
 </script>
 
 {#each sections as section, idx (section.name)}

packages/builder/src/stores/builder/preview.js

@@ -60,6 +60,10 @@ export const createPreviewStore = () => {
     })
   }
 
+  const requestComponentContext = () => {
+    sendEvent("request-context")
+  }
+
   return {
     subscribe: store.subscribe,
     setDevice,
@@ -69,6 +73,7 @@ export const createPreviewStore = () => {
     stopDrag,
     showPreview,
     setSelectedComponentContext,
+    requestComponentContext,
   }
 }
 

packages/client/src/components/app/GridBlock.svelte

@@ -53,7 +53,7 @@
   export const getAdditionalDataContext = () => {
     const rows = get(grid?.getContext()?.rows)
     const goldenRow = generateGoldenSample(rows)
-    const id = [get(component).id]
+    const id = get(component).id
     return {
       [id]: goldenRow,
       eventContext: {

packages/client/src/components/app/blocks/CardsBlock.svelte

@@ -4,6 +4,7 @@
   import BlockComponent from "components/BlockComponent.svelte"
   import { makePropSafe as safe } from "@budibase/string-templates"
   import { enrichSearchColumns, enrichFilter } from "utils/blocks.js"
+  import { get } from "svelte/store"
 
   export let title
   export let dataSource
@@ -31,7 +32,9 @@
   export let linkColumn
   export let noRowsMessage
 
-  const { fetchDatasourceSchema } = getContext("sdk")
+  const context = getContext("context")
+  const { fetchDatasourceSchema, generateGoldenSample } = getContext("sdk")
+  const component = getContext("component")
 
   let formId
   let dataProviderId
@@ -62,6 +65,16 @@
     },
   ]
 
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const rows = get(context)[dataProviderId]?.rows || []
+    const goldenRow = generateGoldenSample(rows)
+    const id = get(component).id
+    return {
+      [`${id}-repeater`]: goldenRow,
+    }
+  }
+
   // Builds a full details page URL for the card title
   const buildFullCardUrl = (link, url, repeaterId, linkColumn) => {
     if (!link || !url || !repeaterId) {