vue-tmpl-compiler-source-range.js

// Output:
/*
`key` does not work on <slot> because slots are abstract outlets and can possibly expand into multiple elements. Use the key on a wrapping element instead.
  1 |
  2 |   <div>
> 3 |     <slot key="asdf" />
    |           ^^^^^^^^^^
  4 |   </div>
  5 |
 */

const compiler = require('../vue/packages/vue-template-compiler')
const { codeFrameColumns } = require('@babel/code-frame')

const LINE_REGEX = /\r\n|\n|\u2028|\u2029/g

const code = `
  <div>
    <slot key="asdf" />
  </div>
`

compiler.compile(code, { outputSourceRange: true }).errors.forEach(({ msg, start, end }) => {
  console.log(msg)
  if (start == null) {
    return
  }
  console.log(codeFrameColumns(code, { start: idx2loc(start), end: idx2loc(end) }))
  console.log()
})

function idx2loc(idx) {
  if (idx != null) {
    const lines = code.slice(0, idx).split(LINE_REGEX)
    return { line: lines.length, column: lines[lines.length - 1].length + 1 }
  }
}