improvement(inspect): handle circular references and allow custom ins…

…pection
edge-js · May 2, 2020 · ddd5541 · ddd5541
1 parent f596011
commit ddd5541
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 51 deletions.
diff --git a/example/index.ts b/example/index.ts
@@ -4,17 +4,32 @@ import { createServer } from 'http'
 
 edge.mount(join(__dirname, 'views'))
 
+class Base {
+  public isModel = true
+  public foo = true
+}
+
+class User extends Base {
+  public attributes = {
+    username: 'virk',
+    email: 'virk@adonisjs.com',
+    isAdmin: true,
+    lastLoginAt: null,
+  }
+
+  public parent: User
+  public get username () {
+    return this.attributes.username
+  }
+}
+
+const user = new User()
+user.parent = user
+
 createServer((_req, res) => {
   res.writeHead(200, { 'content-type': 'text/html' })
   res.end(edge.render('welcome', {
-    user: {
-      username: 'virk',
-      email: 'virk@adonisjs.com',
-      isAdmin: true,
-      lastLoginAt: null,
-      createdAt: new Date(),
-      updatedAt: new Date(),
-    },
+    user: user,
   }))
 }).listen(3000, () => {
   console.log('Listening on 127.0.0.1:3000')

diff --git a/example/views/welcome.edge b/example/views/welcome.edge
@@ -5,8 +5,7 @@
   <title></title>
 </head>
 <body>
-  {{ inspect(state) }}
-
+  {{ inspect(state.user) }}
   @component('components.modal', title = 'Card', age = 22)
     @slot('body')
       <p>hello</p>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,8 +34,8 @@
   "devDependencies": {
     "@adonisjs/mrm-preset": "^2.3.0",
     "@poppinss/dev-utils": "^1.0.6",
-    "@types/node": "^13.11.1",
-    "commitizen": "^4.0.4",
+    "@types/node": "^13.13.4",
+    "commitizen": "^4.0.5",
     "cz-conventional-changelog": "^3.1.0",
     "dedent-js": "^1.0.1",
     "del-cli": "^3.0.0",
@@ -45,9 +45,9 @@
     "husky": "^4.2.5",
     "japa": "^3.0.1",
     "js-stringify": "^1.0.2",
-    "mrm": "^2.2.1",
+    "mrm": "^2.3.0",
     "np": "^6.2.1",
-    "ts-node": "^8.8.2",
+    "ts-node": "^8.9.1",
     "typescript": "^3.8.3"
   },
   "config": {

diff --git a/src/Edge/globals/PrettyPrint.ts b/src/Edge/globals/PrettyPrint.ts
@@ -12,6 +12,9 @@
  * https://www.npmjs.com/package/pretty-print-json package and then tweaked
  * to fit our use cases.
  */
+
+const inspectSymbol = Symbol.for('edge.inspect')
+
 export class PrettyPrint {
   private styles = {
     string: 'color: rgb(173, 219, 103);',
@@ -90,20 +93,40 @@ export class PrettyPrint {
   }
 
   /**
-   * Pretty print by converting the value to JSON string first
+   * JSON replacer that also handles circular references
    */
-  public print (value: any) {
-    const json = JSON.stringify(value, (key, keyValue) => {
+  private getJSONReplacer () {
+    const seen = new WeakSet()
+
+    return (key, value) => {
       if (this.isStandardGlobal(key)) {
         return undefined
       }
 
-      if (typeof (keyValue) === 'function') {
-        return `[Function (${keyValue.name || 'anonymous'})]`
+      if (typeof value === 'object' && value !== null) {
+        if (seen.has(value)) {
+          return '[Circular]'
+        }
+        seen.add(value)
+      }
+
+      if (typeof (value) === 'function') {
+        return `[Function (${value.name || 'anonymous'})]`
       }
 
-      return keyValue
-    }, 2)
+      return value
+    }
+  }
+
+  /**
+   * Pretty print by converting the value to JSON string first
+   */
+  public print (value: any) {
+    const serialized = typeof (value[inspectSymbol]) === 'function'
+      ? value[inspectSymbol]()
+      : value
+
+    const json = JSON.stringify(serialized, this.getJSONReplacer(), 2)
 
     const jsonLineRegex = /^( *)("[^"]+": )?("[^"]*"|[\w.+-]*)?([{}[\],]*)?$/mg
     return `<pre style="${this.styles.pre}"><code>${this.encodeHTML(json).replace(jsonLineRegex, this.replacer.bind(this))}</code></pre>`