Fix URL select not working properly, and massively reduce usage of getBindableProperties to improve settings loading speed

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

@@ -18,8 +18,8 @@
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
-  $: tempValue = Array.isArray(value) ? value : []
   $: readableValue = runtimeToReadableBinding(bindings, value)
+  $: tempValue = readableValue
 
   const handleClose = () => {
     onChange(tempValue)
@@ -56,7 +56,7 @@
     slot="body"
     value={readableValue}
     close={handleClose}
-    on:update={event => (tempValue = event.detail)}
+    on:change={event => (tempValue = event.detail)}
     bindableProperties={bindings}
   />
 </Drawer>

packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte

@@ -11,6 +11,7 @@
   export let componentDefinition
   export let componentInstance
   export let assetInstance
+  export let bindings
 
   const layoutDefinition = []
   const screenDefinition = [
@@ -65,6 +66,7 @@
             options: setting.options,
             placeholder: setting.placeholder,
           }}
+          {bindings}
         />
       {/if}
     {/each}

packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte

@@ -4,6 +4,7 @@
   import ConditionalUIDrawer from "./PropertyControls/ConditionalUIDrawer.svelte"
 
   export let componentInstance
+  export let bindings
 
   let tempValue
   let drawer
@@ -32,5 +33,5 @@
     Show, hide and update components in response to conditions being met.
   </svelte:fragment>
   <Button cta slot="buttons" on:click={() => save()}>Save</Button>
-  <ConditionalUIDrawer slot="body" bind:conditions={tempValue} />
+  <ConditionalUIDrawer slot="body" bind:conditions={tempValue} {bindings} />
 </Drawer>

packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte

@@ -4,6 +4,7 @@
 
   export let componentDefinition
   export let componentInstance
+  export let bindings
 
   const getStyles = def => {
     if (!def?.styles?.length) {
@@ -29,6 +30,7 @@
       columns={style.columns}
       properties={style.settings}
       {componentInstance}
+      {bindings}
     />
   {/each}
 {/if}

packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte

@@ -1,27 +1,45 @@
 <script>
-  import { store, selectedComponent } from "builderStore"
+  import { store, selectedComponent, currentAsset } from "builderStore"
   import { Tabs, Tab } from "@budibase/bbui"
   import ScreenSettingsSection from "./ScreenSettingsSection.svelte"
   import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
   import ConditionalUISection from "./ConditionalUISection.svelte"
+  import { getBindableProperties } from "builderStore/dataBinding"
 
   $: componentInstance = $selectedComponent
   $: componentDefinition = store.actions.components.getDefinition(
     $selectedComponent?._component
   )
+  $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
 </script>
 
 <Tabs selected="Settings" noPadding>
   <Tab title="Settings">
     <div class="container">
       {#key componentInstance?._id}
-        <ScreenSettingsSection {componentInstance} {componentDefinition} />
+        <ScreenSettingsSection
-        <ComponentSettingsSection {componentInstance} {componentDefinition} />
+          {componentInstance}
-        <DesignSection {componentInstance} {componentDefinition} />
+          {componentDefinition}
-        <CustomStylesSection {componentInstance} {componentDefinition} />
+          {bindings}
-        <ConditionalUISection {componentInstance} {componentDefinition} />
+        />
+        <ComponentSettingsSection
+          {componentInstance}
+          {componentDefinition}
+          {bindings}
+        />
+        <DesignSection {componentInstance} {componentDefinition} {bindings} />
+        <CustomStylesSection
+          {componentInstance}
+          {componentDefinition}
+          {bindings}
+        />
+        <ConditionalUISection
+          {componentInstance}
+          {componentDefinition}
+          {bindings}
+        />
       {/key}
     </div>
   </Tab>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte

@@ -13,12 +13,12 @@
   import { generate } from "shortid"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { OperatorOptions, getValidOperatorsForType } from "helpers/lucene"
-  import { getBindableProperties } from "builderStore/dataBinding"
+  import { selectedComponent, store } from "builderStore"
-  import { currentAsset, selectedComponent, store } from "builderStore"
   import { getComponentForSettingType } from "./componentSettings"
   import PropertyControl from "./PropertyControl.svelte"
 
   export let conditions = []
+  export let bindings = []
 
   const flipDurationMs = 150
   const actionOptions = [
@@ -64,10 +64,6 @@
       value: setting.key,
     }
   })
-  $: bindableProperties = getBindableProperties(
-    $currentAsset,
-    $store.selectedComponentId
-  )
   $: conditions.forEach(link => {
     if (!link.id) {
       link.id = generate()
@@ -194,6 +190,7 @@
                       placeholder: getSettingDefinition(condition.setting)
                         .placeholder,
                     }}
+                    {bindings}
                   />
                 {:else}
                   <Select disabled placeholder=" " />
@@ -201,7 +198,7 @@
               {/if}
               <div>IF</div>
               <DrawerBindableInput
-                bindings={bindableProperties}
+                {bindings}
                 placeholder="Value"
                 value={condition.newValue}
                 on:change={e => (condition.newValue = e.detail)}
@@ -222,7 +219,7 @@
               {#if ["string", "number"].includes(condition.valueType)}
                 <DrawerBindableInput
                   disabled={condition.noValue}
-                  bindings={bindableProperties}
+                  {bindings}
                   placeholder="Value"
                   value={condition.referenceValue}
                   on:change={e => (condition.referenceValue = e.detail)}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte

@@ -1,8 +1,5 @@
 <script>
-  import {
+  import { getDataProviderComponents } from "builderStore/dataBinding"
-    getBindableProperties,
-    getDataProviderComponents,
-  } from "builderStore/dataBinding"
   import {
     Button,
     Popover,
@@ -31,6 +28,7 @@
   export let value = {}
   export let otherSources
   export let showAllQueries
+  export let bindings = []
 
   $: text = value?.label ?? "Choose an option"
   $: tables = $tablesStore.list.map(m => ({
@@ -60,10 +58,6 @@
       parameters: query.parameters,
       type: "query",
     }))
-  $: bindableProperties = getBindableProperties(
-    $currentAsset,
-    $store.selectedComponentId
-  )
   $: dataProviders = getDataProviderComponents(
     $currentAsset,
     $store.selectedComponentId
@@ -75,13 +69,13 @@
     type: "provider",
     schema: provider.schema,
   }))
-  $: queryBindableProperties = bindableProperties.map(property => ({
+  $: queryBindableProperties = bindings.map(property => ({
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
     path: property.readableBinding,
   }))
-  $: links = bindableProperties
+  $: links = bindings
     .filter(x => x.fieldSchema?.type === "link")
     .map(property => {
       return {
@@ -138,7 +132,7 @@
               bind:customParams={value.queryParams}
               parameters={queries.find(query => query._id === value._id)
                 .parameters}
-              bindings={queryBindableProperties}
+              {bindings}
             />
           {/if}
           <IntegrationQueryEditor

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte

@@ -13,10 +13,10 @@
   import { generate } from "shortid"
 
   const flipDurationMs = 150
-
   const EVENT_TYPE_KEY = "##eventHandlerType"
 
   export let actions
+  export let bindings = []
 
   // dndzone needs an id on the array items, so this adds some temporary ones.
   $: {
@@ -121,6 +121,7 @@
         <svelte:component
           this={selectedActionComponent}
           parameters={selectedAction.parameters}
+          {bindings}
         />
       </div>
     {/if}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte

@@ -1,14 +1,12 @@
 <script>
   import { Select, Label, Checkbox, Input } from "@budibase/bbui"
-  import { store, currentAsset } from "builderStore"
   import { tables } from "stores/backend"
-  import { getBindableProperties } from "builderStore/dataBinding"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
+  export let bindings = []
 
   $: tableOptions = $tables.list || []
-  $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
 </script>
 
 <div class="root">

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte

@@ -1,21 +1,16 @@
 <script>
   import { Select, Layout, Input, Checkbox } from "@budibase/bbui"
-  import { store, currentAsset } from "builderStore"
   import { datasources, integrations, queries } from "stores/backend"
-  import { getBindableProperties } from "builderStore/dataBinding"
   import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
   import IntegrationQueryEditor from "components/integration/index.svelte"
 
   export let parameters
+  export let bindings = []
 
   $: query = $queries.list.find(q => q._id === parameters.queryId)
   $: datasource = $datasources.list.find(
     ds => ds._id === parameters.datasourceId
   )
-  $: bindableProperties = getBindableProperties(
-    $currentAsset,
-    $store.selectedComponentId
-  )
 
   function fetchQueryDefinition(query) {
     const source = $datasources.list.find(
@@ -61,7 +56,7 @@
           <ParameterBuilder
             bind:customParams={parameters.queryParams}
             parameters={query.parameters}
-            bindings={bindableProperties}
+            {bindings}
           />
           <IntegrationQueryEditor
             height={200}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte

@@ -1,12 +1,9 @@
 <script>
   import { Label } from "@budibase/bbui"
-  import { getBindableProperties } from "builderStore/dataBinding"
-  import { currentAsset, store } from "builderStore"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let parameters
-
+  export let bindings = []
-  $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
 </script>
 
 <div class="root">

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte

@@ -1,7 +1,5 @@
 <script>
   import { Label, ActionButton, Button, Select, Input } from "@budibase/bbui"
-  import { store, currentAsset } from "builderStore"
-  import { getBindableProperties } from "builderStore/dataBinding"
   import { createEventDispatcher } from "svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
@@ -11,13 +9,10 @@
   export let schemaFields
   export let fieldLabel = "Column"
   export let valueLabel = "Value"
+  export let bindings = []
 
   let fields = Object.entries(parameterFields || {})
   $: onChange(fields)
-  $: bindableProperties = getBindableProperties(
-    $currentAsset,
-    $store.selectedComponentId
-  )
 
   const addField = () => {
     fields = [...fields.filter(field => field[0]), ["", ""]]
@@ -69,7 +64,7 @@
     <DrawerBindableInput
       title={`Value for "${field[0]}"`}
       value={field[1]}
-      bindings={bindableProperties}
+      {bindings}
       on:change={event => updateFieldValue(idx, event.detail)}
     />
     <ActionButton

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte

@@ -20,6 +20,8 @@
 
   export let value = []
   export let componentInstance
+  export let bindings = []
+
   let drawer
   let tempValue = value || []
 
@@ -51,7 +53,7 @@
           constraints.
         {/if}
       </Body>
-      <LuceneFilterBuilder bind:value={tempValue} {schemaFields} />
+      <LuceneFilterBuilder bind:value={tempValue} {schemaFields} {bindings} />
     </Layout>
   </DrawerContent>
 </Drawer>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/LuceneFilterBuilder.svelte

@@ -7,20 +7,15 @@
     Combobox,
     Input,
   } from "@budibase/bbui"
-  import { store, currentAsset } from "builderStore"
-  import { getBindableProperties } from "builderStore/dataBinding"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { generate } from "shortid"
   import { OperatorOptions, getValidOperatorsForType } from "helpers/lucene"
 
   export let schemaFields
   export let value
+  export let bindings = []
 
   const BannedTypes = ["link", "attachment"]
-  $: bindableProperties = getBindableProperties(
-    $currentAsset,
-    $store.selectedComponentId
-  )
   $: fieldOptions = (schemaFields ?? [])
     .filter(field => !BannedTypes.includes(field.type))
     .map(field => field.name)
@@ -101,7 +96,7 @@
           title={`Value for "${expression.field}"`}
           value={expression.value}
           placeholder="Value"
-          bindings={bindableProperties}
+          {bindings}
           on:change={event => (expression.value = event.detail)}
         />
       {:else if ["string", "longform", "number"].includes(expression.type)}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte

@@ -1,8 +1,6 @@
 <script>
   import { Button, Icon, Drawer, Label } from "@budibase/bbui"
-  import { store, currentAsset } from "builderStore"
   import {
-    getBindableProperties,
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
@@ -18,18 +16,15 @@
   export let value = null
   export let props = {}
   export let onChange = () => {}
+  export let bindings = []
 
   let bindingDrawer
   let anchor
   let valid
 
-  $: bindableProperties = getBindableProperties(
+  $: safeValue = getSafeValue(value, props.defaultValue, bindings)
-    $currentAsset,
-    $store.selectedComponentId
-  )
-  $: safeValue = getSafeValue(value, props.defaultValue, bindableProperties)
   $: tempValue = safeValue
-  $: replaceBindings = val => readableToRuntimeBinding(bindableProperties, val)
+  $: replaceBindings = val => readableToRuntimeBinding(bindings, val)
 
   const handleClose = () => {
     handleChange(tempValue)
@@ -61,8 +56,8 @@
 
   // The "safe" value is the value with any bindings made readable
   // If there is no value set, any default value is used
-  const getSafeValue = (value, defaultValue, bindableProperties) => {
+  const getSafeValue = (value, defaultValue, bindings) => {
-    const enriched = runtimeToReadableBinding(bindableProperties, value)
+    const enriched = runtimeToReadableBinding(bindings, value)
     return enriched == null && defaultValue !== undefined
       ? defaultValue
       : enriched
@@ -83,6 +78,7 @@
       updateOnChange={false}
       on:change={handleChange}
       onChange={handleChange}
+      {bindings}
       name={key}
       text={label}
       {type}
@@ -108,7 +104,7 @@
           bind:valid
           value={safeValue}
           on:change={e => (tempValue = e.detail)}
-          {bindableProperties}
+          bindableProperties={bindings}
         />
       </Drawer>
     {/if}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte

@@ -3,10 +3,11 @@
   import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
 
   export let value
+  export let bindings
 
   $: urlOptions = $store.screens
     .map(screen => screen.routing?.route)
     .filter(x => x != null)
 </script>
 
-<DrawerBindableCombobox {value} on:change options={urlOptions} />
+<DrawerBindableCombobox {value} {bindings} on:change options={urlOptions} />

packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte

@@ -9,6 +9,7 @@
   import { FrontendTypes } from "constants"
 
   export let componentInstance
+  export let bindings
 
   function setAssetProps(name, value) {
     const selectedAsset = get(currentAsset)
@@ -44,6 +45,7 @@
         key={def.key}
         value={deepGet($currentAsset, def.key)}
         onChange={val => setAssetProps(def.key, val)}
+        {bindings}
       />
     {/each}
   </DetailSummary>

packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte

@@ -7,6 +7,7 @@
   export let columns
   export let properties
   export let componentInstance
+  export let bindings = []
 
   $: style = componentInstance._styles.normal || {}
   $: changed = properties?.some(prop => hasPropChanged(style, prop)) ?? false
@@ -36,6 +37,7 @@
           value={style[prop.key]}
           onChange={val => store.actions.components.updateStyle(prop.key, val)}
           props={getControlProps(prop)}
+          {bindings}
         />
       </div>
     {/each}

packages/standard-components/src/Link.svelte

@@ -14,7 +14,7 @@
   export let underline
   export let size
 
-  $: external = url && !url.startsWith("/")
+  $: external = url && typeof url === "string" && !url.startsWith("/")
   $: target = openInNewTab ? "_blank" : "_self"
   $: placeholder = $builderStore.inBuilder && !text
   $: componentText = $builderStore.inBuilder