Instead of showing location of debug call, print full code frame

Author: victorandcode

package.json

@@ -38,11 +38,11 @@
     "types"
   ],
   "dependencies": {
+    "@babel/code-frame": "^7.10.4",
     "@babel/runtime": "^7.10.3",
     "@types/aria-query": "^4.2.0",
     "aria-query": "^4.2.2",
     "dom-accessibility-api": "^0.5.0",
-    "chalk": "^4.1.0",
     "pretty-format": "^25.5.0"
   },
   "devDependencies": {

src/__tests__/get-user-trace.js

@@ -1,7 +1,19 @@
 import {getUserTrace} from '../get-user-trace'
 
-jest.mock('chalk', () => ({
-  gray: msg => msg,
+jest.mock('fs', () => ({
+  readFileSync: () => `
+    import { screen } from '@testing-library/dom'
+
+    it('renders', () => {
+      document.body.appendChild(
+        document.createTextNode('Hello world')
+      )
+      screen.debug()
+      
+      
+      expect(screen.getByText('Hello world')).toBeInTheDocument()
+    })
+  `,
 }))
 
 let globalErrorMock
@@ -18,19 +30,23 @@ afterEach(() => {
 test('it returns only client error when frames from node_modules are first', () => {
   const stack = `Error: Kaboom
       at Object.<anonymous> (/home/john/projects/projects/sample-error/node_modules/@es2050/console/build/index.js:4:10)
-      at somethingWrong (/home/john/projects/sample-error/error-example.js:2:13)
+      at somethingWrong (/home/john/projects/sample-error/error-example.js:8:7)
   `
   globalErrorMock.mockImplementationOnce(() => ({stack}))
   const userTrace = getUserTrace(stack)
-  expect(userTrace).toEqual(
-    '/home/john/projects/sample-error/error-example.js:2:13\n',
-  )
+  expect(userTrace).toMatchInlineSnapshot(`
+    "  6 |         document.createTextNode('Hello world')
+      7 |       )
+    > 8 |       screen.debug()
+        |       ^
+    "
+  `)
 })
 
 test('it returns only client error when node frames are present afterwards', () => {
   const stack = `Error: Kaboom
       at Object.<anonymous> (/home/john/projects/projects/sample-error/node_modules/@es2050/console/build/index.js:4:10)
-      at somethingWrong (/home/john/projects/sample-error/error-example.js:2:13)
+      at somethingWrong (/home/john/projects/sample-error/error-example.js:8:7)
       at Object.<anonymous> (/home/user/Documents/projects/sample-error/error-example.js:14:1)
       at Module._compile (internal/modules/cjs/loader.js:1151:30)
       at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
@@ -41,7 +57,11 @@ test('it returns only client error when node frames are present afterwards', ()
   `
   globalErrorMock.mockImplementationOnce(() => ({stack}))
   const userTrace = getUserTrace()
-  expect(userTrace).toEqual(
-    '/home/john/projects/sample-error/error-example.js:2:13\n',
-  )
+  expect(userTrace).toMatchInlineSnapshot(`
+    "  6 |         document.createTextNode('Hello world')
+      7 |       )
+    > 8 |       screen.debug()
+        |       ^
+    "
+  `)
 })

src/get-user-trace.js

@@ -1,11 +1,26 @@
-import chalk from 'chalk'
+import fs from 'fs'
+import { codeFrameColumns } from '@babel/code-frame';
 
 // Frame has the form "at myMethod (location/to/my/file.js:10:2)"
-function getFrameLocation(frame) {
+function getCodeFrame(frame) {
   const locationStart = frame.indexOf('(') + 1
   const locationEnd = frame.indexOf(')')
+  const frameLocation = frame.slice(locationStart, locationEnd)
 
-  return frame.slice(locationStart, locationEnd)
+  const frameLocationElements = frameLocation.split(":")
+  const [filename, line, column] = [frameLocationElements[0], parseInt(frameLocationElements[1], 10), parseInt(frameLocationElements[2], 10)]
+  let rawFileContents = ""
+  try {
+    rawFileContents = fs.readFileSync(filename, 'utf-8')
+  } catch {
+    console.warn(`Couldn't read file ${filename} for displaying the code frame`)
+  }
+  return codeFrameColumns(rawFileContents, {
+    start: { line, column },
+  }, {
+    highlightCode: true,
+    linesBelow: 0,
+  })
 }
 
 function getUserTrace() {
@@ -15,7 +30,7 @@ function getUserTrace() {
     .slice(1) // Remove first line which has the form "Error: TypeError"
     .find(frame => !frame.includes('node_modules/')) // Ignore frames from 3rd party libraries
 
-  return chalk.gray(`${getFrameLocation(firstClientCodeFrame)}\n`)
+  return `${getCodeFrame(firstClientCodeFrame)}\n`
 }
 
 export {getUserTrace}