From 56ef16665eb85ce9079d6810d5b5b0fd820e586b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 18 Jan 2022 13:20:06 +0000
Subject: [PATCH] Transform the output of JS expressions to be actual types
 rather than strings

---
 .../src/helpers/javascript.js                 |  6 ++-
 .../src/processors/postprocessor.js           |  5 ++
 .../string-templates/test/javascript.spec.js  | 48 ++++++++++++++++++-
 3 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/packages/string-templates/src/helpers/javascript.js b/packages/string-templates/src/helpers/javascript.js
index 9231283e89..0173be0b54 100644
--- a/packages/string-templates/src/helpers/javascript.js
+++ b/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"
   }
diff --git a/packages/string-templates/src/processors/postprocessor.js b/packages/string-templates/src/processors/postprocessor.js
index 4d1c84013a..7fc3f663fe 100644
--- a/packages/string-templates/src/processors/postprocessor.js
+++ b/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
   }),
diff --git a/packages/string-templates/test/javascript.spec.js b/packages/string-templates/test/javascript.spec.js
index 05cc80331a..5363f37e02 100644
--- a/packages/string-templates/test/javascript.spec.js
+++ b/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: [