feat(compiler-core/runtime-core): show codeframe in runtime compile errors (#220)

packages/compiler-core/__tests__/__snapshots__/codeframe.spec.ts.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`compiler: codeframe line in middle 1`] = `
+"2  |    <template key=\\"one\\"></template>
+3  |    <ul>
+4  |      <li v-for=\\"foobar\\">hi</li>
+   |          ^^^^^^^^^^^^^^
+5  |    </ul>
+6  |    <template key=\\"two\\"></template>"
+`;
+
+exports[`compiler: codeframe line near bottom 1`] = `
+"4  |      <li v-for=\\"foobar\\">hi</li>
+5  |    </ul>
+6  |    <template key=\\"two\\"></template>
+   |              ^^^^^^^^^
+7  |  </div>"
+`;
+
+exports[`compiler: codeframe line near top 1`] = `
+"1  |  <div>
+2  |    <template key=\\"one\\"></template>
+   |              ^^^^^^^^^
+3  |    <ul>
+4  |      <li v-for=\\"foobar\\">hi</li>"
+`;
+
+exports[`compiler: codeframe multi-line highlights 1`] = `
+"1  |  <div attr=\\"some
+   |       ^^^^^^^^^^
+2  |    multiline
+   |  ^^^^^^^^^^^
+3  |  attr
+   |  ^^^^
+4  |  \\">
+   |  ^"
+`;

packages/compiler-core/__tests__/codeframe.spec.ts

@@ -0,0 +1,46 @@
+import { generateCodeFrame } from '../src'
+
+describe('compiler: codeframe', () => {
+  const source = `
+<div>
+  <template key="one"></template>
+  <ul>
+    <li v-for="foobar">hi</li>
+  </ul>
+  <template key="two"></template>
+</div>
+    `.trim()
+
+  test('line near top', () => {
+    const keyStart = source.indexOf(`key="one"`)
+    const keyEnd = keyStart + `key="one"`.length
+    expect(generateCodeFrame(source, keyStart, keyEnd)).toMatchSnapshot()
+  })
+
+  test('line in middle', () => {
+    // should cover 5 lines
+    const forStart = source.indexOf(`v-for=`)
+    const forEnd = forStart + `v-for="foobar"`.length
+    expect(generateCodeFrame(source, forStart, forEnd)).toMatchSnapshot()
+  })
+
+  test('line near bottom', () => {
+    const keyStart = source.indexOf(`key="two"`)
+    const keyEnd = keyStart + `key="two"`.length
+    expect(generateCodeFrame(source, keyStart, keyEnd)).toMatchSnapshot()
+  })
+
+  test('multi-line highlights', () => {
+    const source = `
+<div attr="some
+  multiline
+attr
+">
+</div>
+    `.trim()
+
+    const attrStart = source.indexOf(`attr=`)
+    const attrEnd = source.indexOf(`">`) + 1
+    expect(generateCodeFrame(source, attrStart, attrEnd)).toMatchSnapshot()
+  })
+})