Improve handling of nullish expression to provide a more reliable match to the real evaluation

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

@@ -12,13 +12,9 @@
     isValid,
     decodeJSBinding,
     encodeJSBinding,
-    convertToJS,
     processStringSync,
   } from "@budibase/string-templates"
-  import {
-    readableToRuntimeBinding,
-    runtimeToReadableBinding,
-  } from "dataBinding"
+  import { readableToRuntimeBinding } from "dataBinding"
   import CodeEditor from "../CodeEditor/CodeEditor.svelte"
   import {
     getHelperCompletions,
@@ -93,7 +89,8 @@
   }
 
   const getBindingValue = (binding, context) => {
-    const hbs = `{{ literal ${binding.runtimeBinding} }}`
+    const js = `return $("${binding.runtimeBinding}")`
+    const hbs = encodeJSBinding(js)
     const res = processStringSync(hbs, context)
     return JSON.stringify(res, null, 2)
   }
@@ -171,15 +168,6 @@
     updateValue(jsValue)
   }
 
-  const convert = () => {
-    const runtime = readableToRuntimeBinding(enrichedBindings, hbsValue)
-    const runtimeJs = encodeJSBinding(convertToJS(runtime))
-    jsValue = runtimeToReadableBinding(enrichedBindings, runtimeJs)
-    hbsValue = null
-    mode = "JavaScript"
-    onSelectBinding("", { forceJS: true })
-  }
-
   onMount(() => {
     valid = isValid(readableToRuntimeBinding(enrichedBindings, value))
   })
@@ -296,7 +284,11 @@
           mode={editorMode}
         />
       {:else if sidePanel === SidePanels.Evaluation}
-        <EvaluationSidePanel {expressionResult} {evaluating} />
+        <EvaluationSidePanel
+          {expressionResult}
+          {evaluating}
+          expression={editorValue}
+        />
       {/if}
     </div>
   </div>

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

@@ -71,7 +71,7 @@
   }
 
   const showBindingPopover = (binding, target) => {
-    if (!context) {
+    if (!context || !binding.value || binding.value === "") {
       return
     }
     stopHidingPopover()

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

@@ -6,13 +6,17 @@
 
   export let expressionResult
   export let evaluating = false
+  export let expression = null
 
   $: error = expressionResult === "Error while executing JS"
-  $: empty = expressionResult == null || expressionResult === ""
+  $: empty = expression == null || expression?.trim() === ""
   $: success = !error && !empty
   $: highlightedResult = highlight(expressionResult)
 
   const highlight = json => {
+    if (json == null) {
+      return ""
+    }
     // Attempt to parse and then stringify, in case this is valid JSON
     try {
       json = JSON.stringify(JSON.parse(json), null, 2)
@@ -67,10 +71,10 @@
     </div>
   </div>
   <div class="body">
-    {#if expressionResult}
-      {@html highlightedResult}
-    {:else}
+    {#if empty}
       Your expression will be evaluated here
+    {:else}
+      {@html highlightedResult}
     {/if}
   </div>
 </div>