Unify and clean code

packages/builder/src/components/common/CodeEditor/CodeEditor.svelte

@@ -43,7 +43,8 @@
   } from "@codemirror/commands"
   import { setDiagnostics } from "@codemirror/lint"
   import type { Diagnostic } from "@codemirror/lint"
-  import { Compartment, EditorState, Extension } from "@codemirror/state"
+  import { Compartment, EditorState } from "@codemirror/state"
+  import type { Extension } from "@codemirror/state"
   import { javascript } from "@codemirror/lang-javascript"
   import { EditorModes } from "./"
   import { themeStore } from "@/stores/portal"

packages/builder/src/components/common/CodeEditor/index.ts

@@ -137,9 +137,13 @@ export const hbAutocomplete = (
   baseCompletions: BindingCompletionOption[]
 ): BindingCompletion => {
   function coreCompletion(context: CompletionContext) {
-    let bindingStart = context.matchBefore(EditorModes.Handlebars.match)
+    if (!baseCompletions.length) {
+      return null
+    }
 
-    let options = baseCompletions || []
+    const bindingStart = context.matchBefore(EditorModes.Handlebars.match)
+
+    const options = baseCompletions
 
     if (!bindingStart) {
       return null
@@ -150,7 +154,7 @@ export const hbAutocomplete = (
       return null
     }
     const query = bindingStart.text.replace(match[0], "")
-    let filtered = bindingFilter(options, query)
+    const filtered = bindingFilter(options, query)
 
     return {
       from: bindingStart.from + match[0].length,
@@ -170,8 +174,12 @@ export const jsAutocomplete = (
   baseCompletions: BindingCompletionOption[]
 ): BindingCompletion => {
   function coreCompletion(context: CompletionContext) {
-    let jsBinding = wrappedAutocompleteMatch(context)
+    if (!baseCompletions.length) {
-    let options = baseCompletions || []
+      return null
+    }
+
+    const jsBinding = wrappedAutocompleteMatch(context)
+    const options = baseCompletions
 
     if (jsBinding) {
       // Accommodate spaces
@@ -210,6 +218,10 @@ function setAutocomplete(
   options: BindingCompletionOption[]
 ): BindingCompletion {
   return function (context: CompletionContext) {
+    if (!options.length) {
+      return null
+    }
+
     if (wrappedAutocompleteMatch(context)) {
       return null
     }

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

@@ -70,8 +70,6 @@
   let expressionLogs: Log[] | undefined
   let expressionError: string | undefined
   let evaluating = false
-  let completions: BindingCompletion[] = []
-  let autocompleteOptions: BindingCompletionOption[] = []
 
   $: useSnippets = allowSnippets && !$licensing.isFreePlan
   $: editorModeOptions = getModeOptions(allowHBS, allowJS)
@@ -92,41 +90,18 @@
   $: requestEval(runtimeExpression, context, snippets)
   $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
 
-  function getOptions(
+  $: bindingOptions = bindingsToCompletions(bindings, editorMode)
-    mode: typeof editorMode,
+  $: helperOptions = allowHelpers ? getHelperCompletions(editorMode) : []
-    bindings: EnrichedBinding[]
+  $: snippetsOptions =
-  ): [BindingCompletionOption[], BindingCompletion[]] {
+    usingJS && useSnippets && snippets?.length ? snippets : []
-    const autocompleteOptions = []
-    const completions = []
 
-    const bindingOptions = bindingsToCompletions(bindings, editorMode)
+  $: completions = !usingJS
-    const helperOptions = getHelperCompletions(mode)
+    ? [hbAutocomplete([...bindingOptions, ...helperOptions])]
-
+    : [
-    if (mode.name === "handlebars") {
+        jsAutocomplete(bindingOptions),
-      autocompleteOptions.push(...bindingOptions)
+        jsHelperAutocomplete(helperOptions),
-      autocompleteOptions.push(...helperOptions)
+        snippetAutoComplete(snippetsOptions),
-
+      ]
-      completions.push(hbAutocomplete(autocompleteOptions))
-    } else if (mode.name === "javascript") {
-      if (bindingOptions.length) {
-        completions.push(jsAutocomplete(bindingOptions))
-      }
-
-      if (allowHelpers) {
-        completions.push(jsHelperAutocomplete(helperOptions))
-      }
-      if (useSnippets && snippets?.length) {
-        completions.push(snippetAutoComplete(snippets))
-      }
-    }
-
-    return [autocompleteOptions, completions]
-  }
-
-  $: [autocompleteOptions, completions] = getOptions(
-    editorMode,
-    enrichedBindings
-  )
 
   $: {
     // Ensure a valid side panel option is always selected
@@ -373,7 +348,6 @@
               bind:getCaretPosition
               bind:insertAtPos
               {completions}
-              options={autocompleteOptions}
               autofocus={autofocusEditor}
               placeholder={placeholder ||
                 "Add bindings by typing {{ or use the menu on the right"}