fix: preserve functions in stringifying & parsing

Author: ruchamahabal

frontend/src/components/Code.vue

@@ -34,7 +34,7 @@ import { EditorView, keymap } from "@codemirror/view"
 import { indentationMarkers } from "@replit/codemirror-indentation-markers"
 import { tomorrow } from "thememirror"
 import JSON5 from "json5"
-import { jsonToJs, isPrivateKey } from "@/utils/helpers"
+import { jsonToJs, isPrivateKey, jsonReplacer, jsonReviver } from "@/utils/helpers"
 
 import InputLabel from "@/components/InputLabel.vue"
 
@@ -72,7 +72,7 @@ const setEditorValue = () => {
 	let value = props.modelValue ?? ""
 	try {
 		if (props.language === "json" || typeof value === "object") {
-			value = JSON5.stringify(value, { replacer: null, space: 2, quote: '"' })
+			value = JSON5.stringify(value, { replacer: jsonReplacer, space: 2, quote: '"' })
 		}
 		code.value = value
 	} catch (e) {
@@ -103,7 +103,7 @@ const emitEditorValue = () => {
 			} else if (props.language === "javascript" && isValidObjectString(value)) {
 				try {
 					// forgiving single-quoted/unquoted keys; trailing commas
-					value = JSON5.parse(value)
+					value = JSON5.parse(value, jsonReviver)
 				} catch (e) {
 					// fallback to JSON parsing
 					value = jsonToJs(value)

frontend/src/utils/helpers.ts

@@ -239,38 +239,40 @@ function isJSONString(str: string) {
 	return true
 }
 
-function jsToJson(obj: ObjectLiteral): string {
-	const replacer = (_key: string, value: any) => {
-		// Preserve functions by converting them to strings
-		if (typeof value === "function") {
-			return value.toString()
+const jsonReplacer = (_key: string, value: any) => {
+	// Preserve functions by converting them to strings
+	if (typeof value === "function") {
+		return value.toString()
+	}
+	// Handle circular references
+	if (typeof value === "object" && value !== null) {
+		if (value instanceof Set) {
+		return [...value]
 		}
-		// Handle circular references
-		if (typeof value === "object" && value !== null) {
-			if (value instanceof Set) {
-			return [...value]
-			}
-			if (value instanceof Map) {
-			return Object.fromEntries(value.entries())
-			}
+		if (value instanceof Map) {
+		return Object.fromEntries(value.entries())
 		}
-		return value
 	}
-	return JSON.stringify(obj, replacer, 2)
+	return value
 }
 
-function jsonToJs(json: string): any {
+function jsToJson(obj: ObjectLiteral): string {
+	return JSON.stringify(obj, jsonReplacer, 2)
+}
+
+const jsonReviver = (_key: string, value: any) => {
 	const registeredComponents = window.__APP_COMPONENTS__ || {}
-	const reviver = (_key: string, value: any) => {
-		// Convert functions back to functions
-		if (typeof value === "string" && value.startsWith("function")) {
-			// provide access to render function & frappeUI lib for editing props
-			const newFunc = new Function("scope", `with(scope) { return ${value}; }`)
-			return newFunc({"h": h, ...registeredComponents})
-		}
-		return value
+	// Convert functions back to functions
+	if (typeof value === "string" && value.startsWith("function")) {
+		// provide access to render function & frappeUI lib for editing props
+		const newFunc = new Function("scope", `with(scope) { return ${value}; }`)
+		return newFunc({"h": h, ...registeredComponents})
 	}
-	return JSON.parse(json, reviver)
+	return value
+}
+
+function jsonToJs(json: string): any {
+	return JSON.parse(json, jsonReviver)
 }
 
 const mapToObject = (map: Map<any, any>) => Object.fromEntries(map.entries());
@@ -584,6 +586,8 @@ export {
 	isJSONString,
 	jsToJson,
 	jsonToJs,
+	jsonReplacer,
+	jsonReviver,
 	mapToObject,
 	replaceMapKey,
 	isTargetEditable,