Some minor fixes for edge cases.

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

@@ -62,7 +62,7 @@
 
   const updateValue = val => {
     valid = isValid(readableToRuntimeBinding(bindings, val))
-    console.log(decodeJSBinding(readableToRuntimeBinding(bindings, val)))
+    console.log(readableToRuntimeBinding(bindings, val))
     if (valid) {
       dispatch("change", val)
     }

packages/string-templates/src/conversion/index.js

@@ -32,9 +32,9 @@ function buildList(parts, value) {
       .join(", ")
   }
   if (!value) {
-    return parts.length > 1 ? `...[${build()}]` : build()
+    return parts.length > 1 ? `${build()}` : build()
   } else {
-    return parts.length === 0 ? value : `...[${value}, ${build()}]`
+    return parts.length === 0 ? value : `${value}, ${build()}`
   }
 }
 
@@ -50,12 +50,15 @@ function splitBySpace(layer) {
       parts.push(layer.substring(started, index + 1).trim())
       started = null
       last = index
-    } else if (started == null && char === " ") {
+    } else if (started == null && char === " " && last !== index - 1) {
       parts.push(layer.substring(last, index).trim())
       last = index
     }
   }
-  if (!layer.startsWith("[")) {
+  if (
+    (!layer.startsWith("[") || parts.length === 0) &&
+    last !== layer.length - 1
+  ) {
     parts.push(layer.substring(last, layer.length).trim())
   }
   return parts

packages/string-templates/test/hbsToJs.spec.js

@@ -24,6 +24,14 @@ describe("Test that the string processing works correctly", () => {
     ])
   })
 
+  it("handle properties", () => {
+    const response = convertToJS("{{ [query].id }}")
+    checkLines(response, [
+      "const var1 = $(\"[query].id\");",
+      "return `${var1}`;",
+    ])
+  })
+
   it("should convert some basic HBS strings", () => {
     const response = convertToJS("Hello {{ name }}, welcome to {{ company }}!")
     checkLines(response, [
@@ -33,6 +41,14 @@ describe("Test that the string processing works correctly", () => {
     ])
   })
 
+  it("Should handle many square brackets in helpers", () => {
+    const response = convertToJS("Hello {{ avg [user].[_id] [user].[_rev] }}")
+    checkLines(response, [
+      "const var1 = helpers.avg($(\"[user].[_id]\"), $(\"[user].[_rev]\"));",
+      "return `Hello ${var1}`;"
+    ])
+  })
+
   it("should handle a helper block", () => {
     const response = convertToJS("This is the average: {{ avg array }}")
     checkLines(response, [
@@ -44,7 +60,7 @@ describe("Test that the string processing works correctly", () => {
   it("should handle multi-variable helper", () => {
     const response = convertToJS("This is the average: {{ join ( avg val1 val2 val3 ) }}")
     checkLines(response, [
-      "const var1 = helpers.join(helpers.avg(...[$(\"val1\"), $(\"val2\"), $(\"val3\")]));",
+      "const var1 = helpers.join(helpers.avg($(\"val1\"), $(\"val2\"), $(\"val3\")));",
       "return `This is the average: ${var1}`;",
     ])
   })
@@ -52,7 +68,7 @@ describe("Test that the string processing works correctly", () => {
   it("should handle a complex statement", () => {
     const response = convertToJS("This is the average: {{ join ( avg val1 val2 val3 ) val4 }}")
     checkLines(response, [
-      "const var1 = helpers.join(...[helpers.avg(...[$(\"val1\"), $(\"val2\"), $(\"val3\")]), $(\"val4\")]);",
+      "const var1 = helpers.join(helpers.avg($(\"val1\"), $(\"val2\"), $(\"val3\")), $(\"val4\"));",
       "return `This is the average: ${var1}`;",
     ])
   })
@@ -76,8 +92,8 @@ describe("Test that the string processing works correctly", () => {
   it("should handle multiple complex statements", () => {
     const response = convertToJS("average: {{ avg ( abs val1 ) val2 }} add: {{ add 1 2 }}")
     checkLines(response, [
-      "const var1 = helpers.avg(...[helpers.abs($(\"val1\")), $(\"val2\")]);",
-      "const var2 = helpers.add(...[1, 2]);",
+      "const var1 = helpers.avg(helpers.abs($(\"val1\")), $(\"val2\"));",
+      "const var2 = helpers.add(1, 2);",
       "return `average: ${var1} add: ${var2}`;",
     ])
   })