refactor: expose parse in compiler-dom, improve sfc parse error handling

This commit is contained in:
Evan You
2019-12-22 19:44:21 -05:00
parent 7d436ab59a
commit 90ddb7c260
33 changed files with 243 additions and 147 deletions

View File

@@ -1,5 +1,5 @@
import { ParserOptions } from '../src/options'
import { parse, TextModes } from '../src/parse'
import { baseParse, TextModes } from '../src/parse'
import { ErrorCodes } from '../src/errors'
import {
CommentNode,
@@ -16,7 +16,7 @@ import {
describe('compiler: parse', () => {
describe('Text', () => {
test('simple text', () => {
const ast = parse('some text')
const ast = baseParse('some text')
const text = ast.children[0] as TextNode
expect(text).toStrictEqual({
@@ -31,7 +31,7 @@ describe('compiler: parse', () => {
})
test('simple text with invalid end tag', () => {
const ast = parse('some text</div>', {
const ast = baseParse('some text</div>', {
onError: () => {}
})
const text = ast.children[0] as TextNode
@@ -48,7 +48,7 @@ describe('compiler: parse', () => {
})
test('text with interpolation', () => {
const ast = parse('some {{ foo + bar }} text')
const ast = baseParse('some {{ foo + bar }} text')
const text1 = ast.children[0] as TextNode
const text2 = ast.children[2] as TextNode
@@ -73,7 +73,7 @@ describe('compiler: parse', () => {
})
test('text with interpolation which has `<`', () => {
const ast = parse('some {{ a<b && c>d }} text')
const ast = baseParse('some {{ a<b && c>d }} text')
const text1 = ast.children[0] as TextNode
const text2 = ast.children[2] as TextNode
@@ -98,7 +98,7 @@ describe('compiler: parse', () => {
})
test('text with mix of tags and interpolations', () => {
const ast = parse('some <span>{{ foo < bar + foo }} text</span>')
const ast = baseParse('some <span>{{ foo < bar + foo }} text</span>')
const text1 = ast.children[0] as TextNode
const text2 = (ast.children[1] as ElementNode).children![1] as TextNode
@@ -123,7 +123,7 @@ describe('compiler: parse', () => {
})
test('lonly "<" don\'t separate nodes', () => {
const ast = parse('a < b', {
const ast = baseParse('a < b', {
onError: err => {
if (err.code !== ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME) {
throw err
@@ -144,7 +144,7 @@ describe('compiler: parse', () => {
})
test('lonly "{{" don\'t separate nodes', () => {
const ast = parse('a {{ b', {
const ast = baseParse('a {{ b', {
onError: error => {
if (error.code !== ErrorCodes.X_MISSING_INTERPOLATION_END) {
throw error
@@ -166,7 +166,7 @@ describe('compiler: parse', () => {
test('HTML entities compatibility in text (https://html.spec.whatwg.org/multipage/parsing.html#named-character-reference-state).', () => {
const spy = jest.fn()
const ast = parse('&ampersand;', {
const ast = baseParse('&ampersand;', {
namedCharacterReferences: { amp: '&' },
onError: spy
})
@@ -195,7 +195,7 @@ describe('compiler: parse', () => {
test('HTML entities compatibility in attribute (https://html.spec.whatwg.org/multipage/parsing.html#named-character-reference-state).', () => {
const spy = jest.fn()
const ast = parse(
const ast = baseParse(
'<div a="&ampersand;" b="&amp;ersand;" c="&amp!"></div>',
{
namedCharacterReferences: { amp: '&', 'amp;': '&' },
@@ -248,7 +248,7 @@ describe('compiler: parse', () => {
test('Some control character reference should be replaced.', () => {
const spy = jest.fn()
const ast = parse('&#x86;', { onError: spy })
const ast = baseParse('&#x86;', { onError: spy })
const text = ast.children[0] as TextNode
expect(text).toStrictEqual({
@@ -275,7 +275,7 @@ describe('compiler: parse', () => {
describe('Interpolation', () => {
test('simple interpolation', () => {
const ast = parse('{{message}}')
const ast = baseParse('{{message}}')
const interpolation = ast.children[0] as InterpolationNode
expect(interpolation).toStrictEqual({
@@ -300,7 +300,7 @@ describe('compiler: parse', () => {
})
test('it can have tag-like notation', () => {
const ast = parse('{{ a<b }}')
const ast = baseParse('{{ a<b }}')
const interpolation = ast.children[0] as InterpolationNode
expect(interpolation).toStrictEqual({
@@ -325,7 +325,7 @@ describe('compiler: parse', () => {
})
test('it can have tag-like notation (2)', () => {
const ast = parse('{{ a<b }}{{ c>d }}')
const ast = baseParse('{{ a<b }}{{ c>d }}')
const interpolation1 = ast.children[0] as InterpolationNode
const interpolation2 = ast.children[1] as InterpolationNode
@@ -371,7 +371,7 @@ describe('compiler: parse', () => {
})
test('it can have tag-like notation (3)', () => {
const ast = parse('<div>{{ "</div>" }}</div>')
const ast = baseParse('<div>{{ "</div>" }}</div>')
const element = ast.children[0] as ElementNode
const interpolation = element.children[0] as InterpolationNode
@@ -398,7 +398,7 @@ describe('compiler: parse', () => {
})
test('custom delimiters', () => {
const ast = parse('<p>{msg}</p>', {
const ast = baseParse('<p>{msg}</p>', {
delimiters: ['{', '}']
})
const element = ast.children[0] as ElementNode
@@ -428,7 +428,7 @@ describe('compiler: parse', () => {
describe('Comment', () => {
test('empty comment', () => {
const ast = parse('<!---->')
const ast = baseParse('<!---->')
const comment = ast.children[0] as CommentNode
expect(comment).toStrictEqual({
@@ -443,7 +443,7 @@ describe('compiler: parse', () => {
})
test('simple comment', () => {
const ast = parse('<!--abc-->')
const ast = baseParse('<!--abc-->')
const comment = ast.children[0] as CommentNode
expect(comment).toStrictEqual({
@@ -458,7 +458,7 @@ describe('compiler: parse', () => {
})
test('two comments', () => {
const ast = parse('<!--abc--><!--def-->')
const ast = baseParse('<!--abc--><!--def-->')
const comment1 = ast.children[0] as CommentNode
const comment2 = ast.children[1] as CommentNode
@@ -485,7 +485,7 @@ describe('compiler: parse', () => {
describe('Element', () => {
test('simple div', () => {
const ast = parse('<div>hello</div>')
const ast = baseParse('<div>hello</div>')
const element = ast.children[0] as ElementNode
expect(element).toStrictEqual({
@@ -516,7 +516,7 @@ describe('compiler: parse', () => {
})
test('empty', () => {
const ast = parse('<div></div>')
const ast = baseParse('<div></div>')
const element = ast.children[0] as ElementNode
expect(element).toStrictEqual({
@@ -538,7 +538,7 @@ describe('compiler: parse', () => {
})
test('self closing', () => {
const ast = parse('<div/>after')
const ast = baseParse('<div/>after')
const element = ast.children[0] as ElementNode
expect(element).toStrictEqual({
@@ -560,7 +560,7 @@ describe('compiler: parse', () => {
})
test('void element', () => {
const ast = parse('<img>after', {
const ast = baseParse('<img>after', {
isVoidTag: tag => tag === 'img'
})
const element = ast.children[0] as ElementNode
@@ -584,7 +584,7 @@ describe('compiler: parse', () => {
})
test('native element with `isNativeTag`', () => {
const ast = parse('<div></div><comp></comp><Comp></Comp>', {
const ast = baseParse('<div></div><comp></comp><Comp></Comp>', {
isNativeTag: tag => tag === 'div'
})
@@ -608,7 +608,7 @@ describe('compiler: parse', () => {
})
test('native element without `isNativeTag`', () => {
const ast = parse('<div></div><comp></comp><Comp></Comp>')
const ast = baseParse('<div></div><comp></comp><Comp></Comp>')
expect(ast.children[0]).toMatchObject({
type: NodeTypes.ELEMENT,
@@ -630,7 +630,7 @@ describe('compiler: parse', () => {
})
test('custom element', () => {
const ast = parse('<div></div><comp></comp>', {
const ast = baseParse('<div></div><comp></comp>', {
isNativeTag: tag => tag === 'div',
isCustomElement: tag => tag === 'comp'
})
@@ -649,7 +649,7 @@ describe('compiler: parse', () => {
})
test('attribute with no value', () => {
const ast = parse('<div id></div>')
const ast = baseParse('<div id></div>')
const element = ast.children[0] as ElementNode
expect(element).toStrictEqual({
@@ -682,7 +682,7 @@ describe('compiler: parse', () => {
})
test('attribute with empty value, double quote', () => {
const ast = parse('<div id=""></div>')
const ast = baseParse('<div id=""></div>')
const element = ast.children[0] as ElementNode
expect(element).toStrictEqual({
@@ -723,7 +723,7 @@ describe('compiler: parse', () => {
})
test('attribute with empty value, single quote', () => {
const ast = parse("<div id=''></div>")
const ast = baseParse("<div id=''></div>")
const element = ast.children[0] as ElementNode
expect(element).toStrictEqual({
@@ -764,7 +764,7 @@ describe('compiler: parse', () => {
})
test('attribute with value, double quote', () => {
const ast = parse('<div id=">\'"></div>')
const ast = baseParse('<div id=">\'"></div>')
const element = ast.children[0] as ElementNode
expect(element).toStrictEqual({
@@ -805,7 +805,7 @@ describe('compiler: parse', () => {
})
test('attribute with value, single quote', () => {
const ast = parse("<div id='>\"'></div>")
const ast = baseParse("<div id='>\"'></div>")
const element = ast.children[0] as ElementNode
expect(element).toStrictEqual({
@@ -846,7 +846,7 @@ describe('compiler: parse', () => {
})
test('attribute with value, unquoted', () => {
const ast = parse('<div id=a/></div>')
const ast = baseParse('<div id=a/></div>')
const element = ast.children[0] as ElementNode
expect(element).toStrictEqual({
@@ -887,7 +887,7 @@ describe('compiler: parse', () => {
})
test('multiple attributes', () => {
const ast = parse('<div id=a class="c" inert style=\'\'></div>')
const ast = baseParse('<div id=a class="c" inert style=\'\'></div>')
const element = ast.children[0] as ElementNode
expect(element).toStrictEqual({
@@ -974,7 +974,7 @@ describe('compiler: parse', () => {
})
test('directive with no value', () => {
const ast = parse('<div v-if/>')
const ast = baseParse('<div v-if/>')
const directive = (ast.children[0] as ElementNode).props[0]
expect(directive).toStrictEqual({
@@ -992,7 +992,7 @@ describe('compiler: parse', () => {
})
test('directive with value', () => {
const ast = parse('<div v-if="a"/>')
const ast = baseParse('<div v-if="a"/>')
const directive = (ast.children[0] as ElementNode).props[0]
expect(directive).toStrictEqual({
@@ -1020,7 +1020,7 @@ describe('compiler: parse', () => {
})
test('directive with argument', () => {
const ast = parse('<div v-on:click/>')
const ast = baseParse('<div v-on:click/>')
const directive = (ast.children[0] as ElementNode).props[0]
expect(directive).toStrictEqual({
@@ -1057,7 +1057,7 @@ describe('compiler: parse', () => {
})
test('directive with a modifier', () => {
const ast = parse('<div v-on.enter/>')
const ast = baseParse('<div v-on.enter/>')
const directive = (ast.children[0] as ElementNode).props[0]
expect(directive).toStrictEqual({
@@ -1075,7 +1075,7 @@ describe('compiler: parse', () => {
})
test('directive with two modifiers', () => {
const ast = parse('<div v-on.enter.exact/>')
const ast = baseParse('<div v-on.enter.exact/>')
const directive = (ast.children[0] as ElementNode).props[0]
expect(directive).toStrictEqual({
@@ -1093,7 +1093,7 @@ describe('compiler: parse', () => {
})
test('directive with argument and modifiers', () => {
const ast = parse('<div v-on:click.enter.exact/>')
const ast = baseParse('<div v-on:click.enter.exact/>')
const directive = (ast.children[0] as ElementNode).props[0]
expect(directive).toStrictEqual({
@@ -1130,7 +1130,7 @@ describe('compiler: parse', () => {
})
test('v-bind shorthand', () => {
const ast = parse('<div :a=b />')
const ast = baseParse('<div :a=b />')
const directive = (ast.children[0] as ElementNode).props[0]
expect(directive).toStrictEqual({
@@ -1178,7 +1178,7 @@ describe('compiler: parse', () => {
})
test('v-bind shorthand with modifier', () => {
const ast = parse('<div :a.sync=b />')
const ast = baseParse('<div :a.sync=b />')
const directive = (ast.children[0] as ElementNode).props[0]
expect(directive).toStrictEqual({
@@ -1226,7 +1226,7 @@ describe('compiler: parse', () => {
})
test('v-on shorthand', () => {
const ast = parse('<div @a=b />')
const ast = baseParse('<div @a=b />')
const directive = (ast.children[0] as ElementNode).props[0]
expect(directive).toStrictEqual({
@@ -1274,7 +1274,7 @@ describe('compiler: parse', () => {
})
test('v-on shorthand with modifier', () => {
const ast = parse('<div @a.enter=b />')
const ast = baseParse('<div @a.enter=b />')
const directive = (ast.children[0] as ElementNode).props[0]
expect(directive).toStrictEqual({
@@ -1322,7 +1322,7 @@ describe('compiler: parse', () => {
})
test('v-slot shorthand', () => {
const ast = parse('<Comp #a="{ b }" />')
const ast = baseParse('<Comp #a="{ b }" />')
const directive = (ast.children[0] as ElementNode).props[0]
expect(directive).toStrictEqual({
@@ -1369,7 +1369,7 @@ describe('compiler: parse', () => {
})
test('v-pre', () => {
const ast = parse(
const ast = baseParse(
`<div v-pre :id="foo"><Comp/>{{ bar }}</div>\n` +
`<div :id="foo"><Comp/>{{ bar }}</div>`
)
@@ -1451,7 +1451,7 @@ describe('compiler: parse', () => {
})
test('end tags are case-insensitive.', () => {
const ast = parse('<div>hello</DIV>after')
const ast = baseParse('<div>hello</DIV>after')
const element = ast.children[0] as ElementNode
const text = element.children[0] as TextNode
@@ -1468,14 +1468,14 @@ describe('compiler: parse', () => {
})
test('self closing single tag', () => {
const ast = parse('<div :class="{ some: condition }" />')
const ast = baseParse('<div :class="{ some: condition }" />')
expect(ast.children).toHaveLength(1)
expect(ast.children[0]).toMatchObject({ tag: 'div' })
})
test('self closing multiple tag', () => {
const ast = parse(
const ast = baseParse(
`<div :class="{ some: condition }" />\n` +
`<p v-bind:style="{ color: 'red' }"/>`
)
@@ -1488,7 +1488,7 @@ describe('compiler: parse', () => {
})
test('valid html', () => {
const ast = parse(
const ast = baseParse(
`<div :class="{ some: condition }">\n` +
` <p v-bind:style="{ color: 'red' }"/>\n` +
` <!-- a comment with <html> inside it -->\n` +
@@ -1513,11 +1513,11 @@ describe('compiler: parse', () => {
test('invalid html', () => {
expect(() => {
parse(`<div>\n<span>\n</div>\n</span>`)
baseParse(`<div>\n<span>\n</div>\n</span>`)
}).toThrow('Element is missing end tag.')
const spy = jest.fn()
const ast = parse(`<div>\n<span>\n</div>\n</span>`, {
const ast = baseParse(`<div>\n<span>\n</div>\n</span>`, {
onError: spy
})
@@ -1552,7 +1552,7 @@ describe('compiler: parse', () => {
})
test('parse with correct location info', () => {
const [foo, bar, but, baz] = parse(
const [foo, bar, but, baz] = baseParse(
`
foo
is {{ bar }} but {{ baz }}`.trim()
@@ -1588,7 +1588,7 @@ foo
describe('namedCharacterReferences option', () => {
test('use the given map', () => {
const ast: any = parse('&amp;&cups;', {
const ast: any = baseParse('&amp;&cups;', {
namedCharacterReferences: {
'cups;': '\u222A\uFE00' // UNION with serifs
},
@@ -1603,18 +1603,18 @@ foo
describe('whitespace management', () => {
it('should remove whitespaces at start/end inside an element', () => {
const ast = parse(`<div> <span/> </div>`)
const ast = baseParse(`<div> <span/> </div>`)
expect((ast.children[0] as ElementNode).children.length).toBe(1)
})
it('should remove whitespaces w/ newline between elements', () => {
const ast = parse(`<div/> \n <div/> \n <div/>`)
const ast = baseParse(`<div/> \n <div/> \n <div/>`)
expect(ast.children.length).toBe(3)
expect(ast.children.every(c => c.type === NodeTypes.ELEMENT)).toBe(true)
})
it('should remove whitespaces adjacent to comments', () => {
const ast = parse(`<div/> \n <!--foo--> <div/>`)
const ast = baseParse(`<div/> \n <!--foo--> <div/>`)
expect(ast.children.length).toBe(3)
expect(ast.children[0].type).toBe(NodeTypes.ELEMENT)
expect(ast.children[1].type).toBe(NodeTypes.COMMENT)
@@ -1622,7 +1622,7 @@ foo
})
it('should remove whitespaces w/ newline between comments and elements', () => {
const ast = parse(`<div/> \n <!--foo--> \n <div/>`)
const ast = baseParse(`<div/> \n <!--foo--> \n <div/>`)
expect(ast.children.length).toBe(3)
expect(ast.children[0].type).toBe(NodeTypes.ELEMENT)
expect(ast.children[1].type).toBe(NodeTypes.COMMENT)
@@ -1630,7 +1630,7 @@ foo
})
it('should NOT remove whitespaces w/ newline between interpolations', () => {
const ast = parse(`{{ foo }} \n {{ bar }}`)
const ast = baseParse(`{{ foo }} \n {{ bar }}`)
expect(ast.children.length).toBe(3)
expect(ast.children[0].type).toBe(NodeTypes.INTERPOLATION)
expect(ast.children[1]).toMatchObject({
@@ -1641,7 +1641,7 @@ foo
})
it('should NOT remove whitespaces w/o newline between elements', () => {
const ast = parse(`<div/> <div/> <div/>`)
const ast = baseParse(`<div/> <div/> <div/>`)
expect(ast.children.length).toBe(5)
expect(ast.children.map(c => c.type)).toMatchObject([
NodeTypes.ELEMENT,
@@ -1653,7 +1653,7 @@ foo
})
it('should condense consecutive whitespaces in text', () => {
const ast = parse(` foo \n bar baz `)
const ast = baseParse(` foo \n bar baz `)
expect((ast.children[0] as TextNode).content).toBe(` foo bar baz `)
})
})
@@ -2716,7 +2716,7 @@ foo
),
() => {
const spy = jest.fn()
const ast = parse(code, {
const ast = baseParse(code, {
getNamespace: (tag, parent) => {
const ns = parent ? parent.ns : Namespaces.HTML
if (ns === Namespaces.HTML) {

View File

@@ -1,4 +1,4 @@
import { parse } from '../src/parse'
import { baseParse } from '../src/parse'
import { transform, NodeTransform } from '../src/transform'
import {
ElementNode,
@@ -26,7 +26,7 @@ import { PatchFlags } from '@vue/shared'
describe('compiler: transform', () => {
test('context state', () => {
const ast = parse(`<div>hello {{ world }}</div>`)
const ast = baseParse(`<div>hello {{ world }}</div>`)
// manually store call arguments because context is mutable and shared
// across calls
@@ -72,7 +72,7 @@ describe('compiler: transform', () => {
})
test('context.replaceNode', () => {
const ast = parse(`<div/><span/>`)
const ast = baseParse(`<div/><span/>`)
const plugin: NodeTransform = (node, context) => {
if (node.type === NodeTypes.ELEMENT && node.tag === 'div') {
// change the node to <p>
@@ -106,7 +106,7 @@ describe('compiler: transform', () => {
})
test('context.removeNode', () => {
const ast = parse(`<span/><div>hello</div><span/>`)
const ast = baseParse(`<span/><div>hello</div><span/>`)
const c1 = ast.children[0]
const c2 = ast.children[2]
@@ -132,7 +132,7 @@ describe('compiler: transform', () => {
})
test('context.removeNode (prev sibling)', () => {
const ast = parse(`<span/><div/><span/>`)
const ast = baseParse(`<span/><div/><span/>`)
const c1 = ast.children[0]
const c2 = ast.children[2]
@@ -159,7 +159,7 @@ describe('compiler: transform', () => {
})
test('context.removeNode (next sibling)', () => {
const ast = parse(`<span/><div/><span/>`)
const ast = baseParse(`<span/><div/><span/>`)
const c1 = ast.children[0]
const d1 = ast.children[1]
@@ -186,7 +186,7 @@ describe('compiler: transform', () => {
})
test('context.hoist', () => {
const ast = parse(`<div :id="foo"/><div :id="bar"/>`)
const ast = baseParse(`<div :id="foo"/><div :id="bar"/>`)
const hoisted: ExpressionNode[] = []
const mock: NodeTransform = (node, context) => {
if (node.type === NodeTypes.ELEMENT) {
@@ -204,7 +204,7 @@ describe('compiler: transform', () => {
})
test('onError option', () => {
const ast = parse(`<div/>`)
const ast = baseParse(`<div/>`)
const loc = ast.children[0].loc
const plugin: NodeTransform = (node, context) => {
context.onError(
@@ -225,20 +225,20 @@ describe('compiler: transform', () => {
})
test('should inject toString helper for interpolations', () => {
const ast = parse(`{{ foo }}`)
const ast = baseParse(`{{ foo }}`)
transform(ast, {})
expect(ast.helpers).toContain(TO_STRING)
})
test('should inject createVNode and Comment for comments', () => {
const ast = parse(`<!--foo-->`)
const ast = baseParse(`<!--foo-->`)
transform(ast, {})
expect(ast.helpers).toContain(CREATE_COMMENT)
})
describe('root codegenNode', () => {
function transformWithCodegen(template: string) {
const ast = parse(template)
const ast = baseParse(template)
transform(ast, {
nodeTransforms: [
transformIf,

View File

@@ -1,5 +1,5 @@
import {
parse,
baseParse as parse,
transform,
NodeTypes,
generate,

View File

@@ -1,4 +1,9 @@
import { CompilerOptions, parse, transform, ErrorCodes } from '../../src'
import {
CompilerOptions,
baseParse as parse,
transform,
ErrorCodes
} from '../../src'
import {
RESOLVE_COMPONENT,
CREATE_VNODE,

View File

@@ -1,5 +1,5 @@
import {
parse,
baseParse as parse,
transform,
ElementNode,
DirectiveNode,

View File

@@ -1,6 +1,6 @@
import {
CompilerOptions,
parse,
baseParse as parse,
transform,
ElementNode,
NodeTypes,

View File

@@ -1,6 +1,6 @@
import {
CompilerOptions,
parse,
baseParse as parse,
transform,
NodeTypes,
generate,

View File

@@ -1,5 +1,5 @@
import {
parse,
baseParse as parse,
transform,
ElementNode,
ObjectExpression,

View File

@@ -1,4 +1,4 @@
import { parse } from '../../src/parse'
import { baseParse as parse } from '../../src/parse'
import { transform } from '../../src/transform'
import { transformIf } from '../../src/transforms/vIf'
import { transformFor } from '../../src/transforms/vFor'

View File

@@ -1,4 +1,4 @@
import { parse } from '../../src/parse'
import { baseParse as parse } from '../../src/parse'
import { transform } from '../../src/transform'
import { transformIf } from '../../src/transforms/vIf'
import { transformElement } from '../../src/transforms/transformElement'

View File

@@ -1,5 +1,5 @@
import {
parse,
baseParse as parse,
transform,
generate,
ElementNode,

View File

@@ -1,5 +1,5 @@
import {
parse,
baseParse as parse,
transform,
ElementNode,
ObjectExpression,

View File

@@ -1,5 +1,5 @@
import {
parse,
baseParse as parse,
transform,
NodeTypes,
generate,

View File

@@ -1,6 +1,6 @@
import {
CompilerOptions,
parse,
baseParse as parse,
transform,
generate,
ElementNode,