Initial work to pretty-print CLI

crutchcorn · crutchcorn · commit e32e51dfa81b · 2021-11-08T01:12:59.000-08:00
diff --git a/src/__tests__/get-user-code-frame.js b/src/__tests__/get-user-code-frame.js
@@ -0,0 +1,82 @@
+import fs from 'fs'
+import {getUserCodeFrame} from '../get-user-code-frame'
+
+jest.mock('fs', () => ({
+  // We setup the contents of a sample file
+  readFileSync: jest.fn(
+    () => `
+    import {screen} from '@testing-library/dom'
+    it('renders', () => {
+      document.body.appendChild(
+        document.createTextNode('Hello world')
+      )
+      screen.debug()
+      expect(screen.getByText('Hello world')).toBeInTheDocument()
+    })
+  `,
+  ),
+}))
+
+const userStackFrame = 'at somethingWrong (/sample-error/error-example.js:7:14)'
+
+let globalErrorMock
+
+beforeEach(() => {
+  // Mock global.Error so we can setup our own stack messages
+  globalErrorMock = jest.spyOn(global, 'Error')
+})
+
+afterEach(() => {
+  global.Error.mockRestore()
+})
+
+test('it returns only user code frame when code frames from node_modules are first', () => {
+  const stack = `Error: Kaboom
+      at Object.<anonymous> (/sample-error/node_modules/@es2050/console/build/index.js:4:10)
+      ${userStackFrame}
+  `
+  globalErrorMock.mockImplementationOnce(() => ({stack}))
+  const userTrace = getUserCodeFrame(stack)
+
+  expect(userTrace).toMatchInlineSnapshot(`
+    /sample-error/error-example.js:7:14
+      5 |         document.createTextNode('Hello world')
+      6 |       )
+    > 7 |       screen.debug()
+        |              ^
+    
+  `)
+})
+
+test('it returns only user code frame when node code frames are present afterwards', () => {
+  const stack = `Error: Kaboom
+      at Object.<anonymous> (/sample-error/node_modules/@es2050/console/build/index.js:4:10)
+      ${userStackFrame}
+      at Object.<anonymous> (/sample-error/error-example.js:14:1)
+      at internal/main/run_main_module.js:17:47
+  `
+  globalErrorMock.mockImplementationOnce(() => ({stack}))
+  const userTrace = getUserCodeFrame()
+
+  expect(userTrace).toMatchInlineSnapshot(`
+    /sample-error/error-example.js:7:14
+      5 |         document.createTextNode('Hello world')
+      6 |       )
+    > 7 |       screen.debug()
+        |              ^
+    
+  `)
+})
+
+test("it returns empty string if file from code frame can't be read", () => {
+  // Make fire read purposely fail
+  fs.readFileSync.mockImplementationOnce(() => {
+    throw Error()
+  })
+  const stack = `Error: Kaboom
+      ${userStackFrame}
+  `
+  globalErrorMock.mockImplementationOnce(() => ({stack}))
+
+  expect(getUserCodeFrame(stack)).toEqual('')
+})
diff --git a/src/get-user-code-frame.js b/src/get-user-code-frame.js
@@ -0,0 +1,67 @@
+// We try to load node dependencies
+let chalk = null
+let readFileSync = null
+let codeFrameColumns = null
+
+try {
+  const nodeRequire = module && module.require
+
+  readFileSync = nodeRequire.call(module, 'fs').readFileSync
+  codeFrameColumns = nodeRequire.call(
+    module,
+    '@babel/code-frame',
+  ).codeFrameColumns
+  chalk = nodeRequire.call(module, 'chalk')
+} catch {
+  // We're in a browser environment
+}
+
+// frame has the form "at myMethod (location/to/my/file.js:10:2)"
+function getCodeFrame(frame) {
+  const locationStart = frame.indexOf('(') + 1
+  const locationEnd = frame.indexOf(')')
+  const frameLocation = 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 = readFileSync(filename, 'utf-8')
+  } catch {
+    return ''
+  }
+
+  const codeFrame = codeFrameColumns(
+    rawFileContents,
+    {
+      start: {line, column},
+    },
+    {
+      highlightCode: true,
+      linesBelow: 0,
+    },
+  )
+  return `${chalk.dim(frameLocation)}\n${codeFrame}\n`
+}
+
+function getUserCodeFrame() {
+  // If we couldn't load dependencies, we can't generate the user trace
+  /* istanbul ignore next */
+  if (!readFileSync || !codeFrameColumns) {
+    return ''
+  }
+  const err = new Error()
+  const firstClientCodeFrame = err.stack
+    .split('\n')
+    .slice(1) // Remove first line which has the form "Error: TypeError"
+    .find(frame => !frame.includes('node_modules/')) // Ignore frames from 3rd party libraries
+
+  return getCodeFrame(firstClientCodeFrame)
+}
+
+export {getUserCodeFrame}
diff --git a/src/pretty-cli.js b/src/pretty-cli.js
@@ -0,0 +1,59 @@
+import {getUserCodeFrame} from './get-user-code-frame'
+import {getCurrentInstance} from './helpers'
+
+// Regarding `maxLength`:
+// This may cause a problem if an ANSI escape sequence is not closed during this length
+// Can we just, like, pass all ANSI escape sequences through?
+function prettyCLI(instance, maxLength) {
+  if (!instance) {
+    instance = getCurrentInstance()
+  }
+  if (typeof maxLength !== 'number') {
+    maxLength =
+      (typeof process !== 'undefined' && process.env.DEBUG_PRINT_LIMIT) || 7000
+  }
+
+  if (maxLength === 0) {
+    return ''
+  }
+
+  const contentArr = instance.stdoutArr()
+
+  const finalArr = [];
+
+  let currSize = 0;
+  for (let content of contentArr) {
+    if (currSize >= maxLength) {
+      break;
+    }
+    let maxValLength = maxLength - currSize;
+    if (maxValLength <= 0) maxValLength = 0;
+    if (Buffer.isBuffer(content)) {
+      const bufferSize = Buffer.byteLength(content);
+      if (bufferSize > maxValLength) {
+        content = content.slice(0, maxValLength);
+      }
+      finalArr.push(content);
+      currSize += bufferSize;
+      continue;
+    }
+    // content is a string
+    if (content.length > maxValLength) {
+      content = content.substr(0, maxValLength);
+    }
+    finalArr.push(content);
+    currSize += content.length;
+  }
+
+  return finalArr;
+}
+
+const logCLI = (...args) => {
+  const userCodeFrame = getUserCodeFrame()
+  process.stdout.write(prettyCLI(...args))
+  if (userCodeFrame) {
+    console.log(`\n\n${userCodeFrame}`)
+  }
+}
+
+export {prettyCLI, logCLI}
