Fix existing issue of CodeEditor completions not being reactive and allow saving invalid HBS bindings

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

@@ -77,6 +77,18 @@
   $: runtimeExpression = readableToRuntimeBinding(enrichedBindings, value)
   $: requestUpdateEvaluation(runtimeExpression, context)
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
+  $: hbsCompletions = [
+    hbAutocomplete([
+      ...bindingCompletions,
+      ...getHelperCompletions(EditorModes.Handlebars),
+    ]),
+  ]
+  $: jsCompletions = [
+    jsAutocomplete([
+      ...bindingCompletions,
+      ...getHelperCompletions(EditorModes.JS),
+    ]),
+  ]
 
   const debouncedUpdateEvaluation = Utils.debounce((expression, context) => {
     expressionResult = processStringSync(expression || "", context)
@@ -217,38 +229,32 @@
       </div>
       <div class="editor">
         {#if mode === Modes.Text}
-          <CodeEditor
-            value={hbsValue}
-            on:change={onChangeHBSValue}
-            bind:getCaretPosition
-            bind:insertAtPos
-            completions={[
-              hbAutocomplete([
-                ...bindingCompletions,
-                ...getHelperCompletions(editorMode),
-              ]),
-            ]}
-            autofocus={autofocusEditor}
-            placeholder="Add bindings by typing &#123;&#123; or use the menu on the right"
-            jsBindingWrapping={false}
-          />
+          {#key hbsCompletions}
+            <CodeEditor
+              value={hbsValue}
+              on:change={onChangeHBSValue}
+              bind:getCaretPosition
+              bind:insertAtPos
+              completions={hbsCompletions}
+              autofocus={autofocusEditor}
+              placeholder="Add bindings by typing &#123;&#123; or use the menu on the right"
+              jsBindingWrapping={false}
+            />
+          {/key}
         {:else if mode === Modes.JavaScript}
-          <CodeEditor
-            value={decodeJSBinding(jsValue)}
-            on:change={onChangeJSValue}
-            completions={[
-              jsAutocomplete([
-                ...bindingCompletions,
-                ...getHelperCompletions(editorMode),
-              ]),
-            ]}
-            mode={EditorModes.JS}
-            bind:getCaretPosition
-            bind:insertAtPos
-            autofocus={autofocusEditor}
-            placeholder="Add bindings by typing $ or use the menu on the right"
-            jsBindingWrapping
-          />
+          {#key jsCompletions}
+            <CodeEditor
+              value={decodeJSBinding(jsValue)}
+              on:change={onChangeJSValue}
+              completions={jsCompletions}
+              mode={EditorModes.JS}
+              bind:getCaretPosition
+              bind:insertAtPos
+              autofocus={autofocusEditor}
+              placeholder="Add bindings by typing $ or use the menu on the right"
+              jsBindingWrapping
+            />
+          {/key}
         {/if}
         {#if targetMode}
           <div class="mode-overlay">

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

@@ -4,7 +4,6 @@
   import { onMount } from "svelte"
 
   export let bindings = []
-  export let valid
   export let value = ""
   export let allowJS = false
   export let allowHelpers = true
@@ -27,7 +26,6 @@
 </script>
 
 <BindingPanel
-  bind:valid
   bindings={enrichedBindings}
   context={$previewStore.selectedComponentContext}
   {value}

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

@@ -22,7 +22,6 @@
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
-  let valid = true
 
   $: readableValue = runtimeToReadableBinding(bindings, value)
   $: tempValue = readableValue
@@ -80,15 +79,12 @@
 </div>
 
 <Drawer bind:this={bindingDrawer} title={title ?? placeholder ?? "Bindings"}>
-  <Button cta slot="buttons" on:click={handleClose} disabled={!valid}>
-    Save
-  </Button>
+  <Button cta slot="buttons" on:click={handleClose}>Save</Button>
   <svelte:component
     this={panel}
     slot="body"
     value={readableValue}
     close={handleClose}
-    bind:valid
     on:change={event => (tempValue = event.detail)}
     {bindings}
     {allowJS}

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

@@ -28,7 +28,6 @@
   const dispatch = createEventDispatcher()
 
   let bindingDrawer
-  let valid = true
   let currentVal = value
 
   $: readableValue = runtimeToReadableBinding(bindings, value)
@@ -93,13 +92,10 @@
   title={title ?? placeholder ?? "Bindings"}
   {forceModal}
 >
-  <Button cta slot="buttons" disabled={!valid} on:click={saveBinding}>
-    Save
-  </Button>
+  <Button cta slot="buttons" on:click={saveBinding}>Save</Button>
   <svelte:component
     this={panel}
     slot="body"
-    bind:valid
     value={readableValue}
     on:change={event => (tempValue = event.detail)}
     {bindings}

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

@@ -25,7 +25,6 @@
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
-  let valid = true
   let currentVal = value
 
   $: readableValue = runtimeToReadableBinding(bindings, value)
@@ -176,13 +175,10 @@
   title={title ?? placeholder ?? "Bindings"}
   left={drawerLeft}
 >
-  <Button cta slot="buttons" disabled={!valid} on:click={saveBinding}>
-    Save
-  </Button>
+  <Button cta slot="buttons" on:click={saveBinding}>Save</Button>
   <svelte:component
     this={panel}
     slot="body"
-    bind:valid
     value={readableValue}
     on:change={event => (tempValue = event.detail)}
     {bindings}

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

@@ -2,7 +2,6 @@
   import BindingPanel from "./BindingPanel.svelte"
 
   export let bindings = []
-  export let valid
   export let value = ""
   export let allowJS = false
   export let context = null
@@ -20,7 +19,6 @@
 </script>
 
 <BindingPanel
-  bind:valid
   bindings={enrichedBindings}
   {value}
   {allowJS}

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

@@ -48,7 +48,6 @@
   let drawer
   let tmpQueryParams
   let tmpCustomData
-  let customDataValid = true
   let modal
 
   $: text = value?.label ?? "Choose an option"
@@ -267,14 +266,11 @@
     <Drawer title="Custom data" bind:this={drawer}>
       <div slot="buttons" style="display:contents">
         <Button primary on:click={promptForCSV}>Load CSV</Button>
-        <Button cta on:click={saveCustomData} disabled={!customDataValid}>
-          Save
-        </Button>
+        <Button cta on:click={saveCustomData}>Save</Button>
       </div>
       <div slot="description">Provide a JSON array to use as data</div>
       <ClientBindingPanel
         slot="body"
-        bind:valid={customDataValid}
         value={tmpCustomData}
         on:change={event => (tmpCustomData = event.detail)}
         {bindings}