Implementing JSONValue type for passing binding results around.

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

@@ -4,10 +4,10 @@
   import { Helpers } from "@budibase/bbui"
   import { fade } from "svelte/transition"
   import { UserScriptError } from "@budibase/string-templates"
+  import type { JSONValue } from "@budibase/types"
 
   // this can be essentially any primitive response from the JS function
-  export let expressionResult: string | boolean | object | number | undefined =
+  export let expressionResult: JSONValue | undefined = undefined
-    undefined
   export let expressionError: string | undefined = undefined
   export let evaluating = false
   export let expression: string | null = null
@@ -24,21 +24,20 @@
     return err.toString()
   }
 
+  // json can be any primitive type
   const highlight = (json?: any | null) => {
     if (json == null) {
       return ""
     }
 
     // Attempt to parse and then stringify, in case this is valid result
-    let jsonString: string
     try {
-      jsonString = JSON.stringify(JSON.parse(json), null, 2)
+      json = JSON.stringify(JSON.parse(json), null, 2)
     } catch (err) {
-      // Ignore
+      // couldn't parse/stringify, just treat it as the raw input
-      jsonString = json
     }
 
-    return JsonFormatter.format(jsonString, {
+    return JsonFormatter.format(json, {
       keyColor: "#e06c75",
       numberColor: "#e5c07b",
       stringColor: "#98c379",

packages/frontend-core/src/utils/jsonFormatter.ts

@@ -1,3 +1,5 @@
+import { JSONValue } from "@budibase/types"
+
 export type ColorsOptions = {
   keyColor?: string
   numberColor?: string
@@ -32,15 +34,10 @@ function escapeHtml(html: string) {
   })
 }
 
-export function format(json: string | object, colorOptions = {}) {
+export function format(json: JSONValue, colorOptions: ColorsOptions = {}) {
   const valueType = typeof json
-  if (valueType !== "string") {
+  let jsonString =
-    json = JSON.stringify(json, null, 2) || valueType
+    typeof json === "string" ? json : JSON.stringify(json, null, 2) || valueType
-  }
-  let jsonString: string =
-    valueType !== "string"
-      ? JSON.stringify(json, null, 2) || valueType
-      : (json as string)
   let colors = Object.assign({}, defaultColors, colorOptions)
   jsonString = jsonString
     .replace(/&/g, "&")
@@ -48,7 +45,7 @@ export function format(json: string | object, colorOptions = {}) {
     .replace(/>/g, ">")
   return jsonString.replace(
     /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+]?\d+)?)/g,
-    match => {
+    (match: string) => {
       let color = colors.numberColor
       let style = ""
       if (/^"/.test(match)) {

packages/types/src/core/common.ts

@@ -0,0 +1,7 @@
+export type JSONValue =
+  | string
+  | number
+  | boolean
+  | null
+  | { [key: string]: JSONValue }
+  | JSONValue[]

packages/types/src/core/index.ts

@@ -1,2 +1,3 @@
 export * from "./installation"
 export * from "./events"
+export * from "./common"