Transform the output of JS expressions to be actual types rather than strings

packages/string-templates/src/helpers/javascript.js

@@ -1,5 +1,6 @@
 const { atob } = require("../utilities")
 const { cloneDeep } = require("lodash/fp")
+const { LITERAL_MARKER } = require("../helpers/constants")
 
 // The method of executing JS scripts depends on the bundle being built.
 // This setter is used in the entrypoint (either index.cjs or index.mjs).
@@ -46,8 +47,9 @@ module.exports.processJS = (handlebars, context) => {
       $: path => getContextValue(path, cloneDeep(context)),
     }
 
-    // Create a sandbox with out context and run the JS
-    return runJS(js, sandboxContext)
+    // Create a sandbox with our context and run the JS
+    const res = { data: runJS(js, sandboxContext) }
+    return `{{${LITERAL_MARKER} js_result-${JSON.stringify(res)}}}`
   } catch (error) {
     return "Error while executing JS"
   }

packages/string-templates/src/processors/postprocessor.js

@@ -36,6 +36,11 @@ module.exports.processors = [
         return value === "true"
       case "object":
         return JSON.parse(value)
+      case "js_result":
+        // We use the literal helper to process the result of JS expressions
+        // as we want to be able to return any types.
+        // We wrap the value in an abject to be able to use undefined properly.
+        return JSON.parse(value).data
     }
     return value
   }),

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

@@ -7,7 +7,7 @@ const processJS = (js, context) => {
 describe("Test the JavaScript helper", () => {
   it("should execute a simple expression", () => {
     const output = processJS(`return 1 + 2`)
-    expect(output).toBe("3")
+    expect(output).toBe(3)
   })
 
   it("should be able to use primitive bindings", () => {
@@ -50,6 +50,52 @@ describe("Test the JavaScript helper", () => {
     expect(output).toBe("shazbat")
   })
 
+  it("should be able to return an object", () => {
+    const output = processJS(`return $("foo")`, {
+      foo: {
+        bar: {
+          baz: "shazbat",
+        },
+      },
+    })
+    expect(output.bar.baz).toBe("shazbat")
+  })
+
+  it("should be able to return an array", () => {
+    const output = processJS(`return $("foo")`, {
+      foo: ["a", "b", "c"],
+    })
+    expect(output[2]).toBe("c")
+  })
+
+  it("should be able to return null", () => {
+    const output = processJS(`return $("foo")`, {
+      foo: null,
+    })
+    expect(output).toBe(null)
+  })
+
+  it("should be able to return undefined", () => {
+    const output = processJS(`return $("foo")`, {
+      foo: undefined,
+    })
+    expect(output).toBe(undefined)
+  })
+
+  it("should be able to return 0", () => {
+    const output = processJS(`return $("foo")`, {
+      foo: 0,
+    })
+    expect(output).toBe(0)
+  })
+
+  it("should be able to return an empty string", () => {
+    const output = processJS(`return $("foo")`, {
+      foo: "",
+    })
+    expect(output).toBe("")
+  })
+
   it("should be able to use a deep array binding", () => {
     const output = processJS(`return $("foo.0.bar")`, {
       foo: [