Handle Map/Set objects in template interpolation (Fix#1067)

packages/shared/__tests__/index.spec.ts

@@ -0,0 +1,41 @@
+import { toDisplayString } from '../src'
+
+test('toDisplayString', () => {
+  expect(toDisplayString(null)).toBe(``)
+  expect(toDisplayString([1, 2, 3])).toBe(`[
+  1,
+  2,
+  3
+]`)
+  expect(
+    toDisplayString({
+      foo: 'bar',
+      baz: 1
+    })
+  ).toBe(`{
+  "foo": "bar",
+  "baz": 1
+}`)
+  expect(toDisplayString(new Map<any, any>([['foo', 'bar'], ['baz', 1]])))
+    .toBe(`{
+  "dataType": "Map",
+  "value": [
+    [
+      "foo",
+      "bar"
+    ],
+    [
+      "baz",
+      1
+    ]
+  ]
+}`)
+  expect(toDisplayString(new Set<any>([1, 2, 3]))).toBe(`{
+  "dataType": "Set",
+  "value": [
+    1,
+    2,
+    3
+  ]
+}`)
+})

packages/shared/src/index.ts

@@ -114,11 +114,33 @@ export const hasChanged = (value: any, oldValue: any): boolean =>
 
 // For converting {{ interpolation }} values to displayed strings.
 export const toDisplayString = (val: unknown): string => {
-  return val == null
-    ? ''
-    : isArray(val) || (isPlainObject(val) && val.toString === objectToString)
-      ? JSON.stringify(val, null, 2)
-      : String(val)
+  if (val == null) return ''
+  if (isArray(val) || (isPlainObject(val) && val.toString === objectToString)) {
+    return JSON.stringify(val, null, 2)
+  }
+  if (val instanceof Map || val instanceof Set) {
+    return JSON.stringify(
+      val,
+      function replacer(key, value) {
+        const originalObject = this[key]
+        if (originalObject instanceof Map) {
+          return {
+            dataType: 'Map',
+            value: Array.from(originalObject.entries())
+          }
+        }
+        if (originalObject instanceof Set) {
+          return {
+            dataType: 'Set',
+            value: Array.from(originalObject.values())
+          }
+        }
+        return value
+      },
+      2
+    )
+  }
+  return String(val)
 }
 
 export const invokeArrayFns = (fns: Function[], arg?: any) => {