Add JSONTree

src/__tests__/__snapshots__/jsonTree.ts.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`displays json tree diagram 1`] = `
+"<Object>
+├── null: null
+├── boolean: true
+├── number: 42
+├── string: \\"hello\\"
+├── multilineString: \\"line1\\\\nline2\\"
+├── array: <Array>
+│   ├── 0: 1
+│   ├── 1: 2
+│   └── 2: 3
+└── object: <Object>
+    └── foo: \\"bar\\""
+`;

src/__tests__/jsonTree.ts

@@ -0,0 +1,15 @@
+import { JSONTree } from '../trees/JSONTree'
+
+it('displays json tree diagram', () => {
+  expect(
+    JSONTree.diagram({
+      null: null,
+      boolean: true,
+      number: 42,
+      string: 'hello',
+      multilineString: 'line1\nline2',
+      array: [1, 2, 3],
+      object: { foo: 'bar' },
+    })
+  ).toMatchSnapshot()
+})

src/trees/JSONTree.ts

@@ -0,0 +1,33 @@
+import { defineTree } from '../defineTree'
+
+export type JSONValue =
+  | string
+  | number
+  | boolean
+  | null
+  | JSONValue[]
+  | { [key: string]: JSONValue }
+
+export const JSONTree = defineTree({
+  getEntries(node: JSONValue) {
+    if (typeof node === 'object' && node !== null) {
+      return Object.entries(node)
+    } else {
+      return []
+    }
+  },
+}).withOptions({
+  getLabel(node, keyPath) {
+    const key = keyPath[keyPath.length - 1]
+    const text = printJSONValue(node)
+    return key === undefined ? text : key + ': ' + text
+  },
+})
+
+function printJSONValue(value: JSONValue): string {
+  if (typeof value === 'object' && value !== null) {
+    return `<${Object.prototype.toString.call(value).slice(8, -1)}>`
+  } else {
+    return JSON.stringify(value)
+  }
+}