import { ParserOptions } from '../src/options' import { baseParse, TextModes } from '../src/parse' import { ErrorCodes } from '../src/errors' import { CommentNode, ElementNode, ElementTypes, Namespaces, NodeTypes, Position, TextNode, InterpolationNode, ConstantTypes } from '../src/ast' describe('compiler: parse', () => { describe('Text', () => { test('simple text', () => { const ast = baseParse('some text') const text = ast.children[0] as TextNode expect(text).toStrictEqual({ type: NodeTypes.TEXT, content: 'some text', loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 9, line: 1, column: 10 }, source: 'some text' } }) }) test('simple text with invalid end tag', () => { const onError = jest.fn() const ast = baseParse('some text', { onError }) const text = ast.children[0] as TextNode expect(onError).toBeCalled() expect(text).toStrictEqual({ type: NodeTypes.TEXT, content: 'some text', loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 9, line: 1, column: 10 }, source: 'some text' } }) }) test('text with interpolation', () => { const ast = baseParse('some {{ foo + bar }} text') const text1 = ast.children[0] as TextNode const text2 = ast.children[2] as TextNode expect(text1).toStrictEqual({ type: NodeTypes.TEXT, content: 'some ', loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 5, line: 1, column: 6 }, source: 'some ' } }) expect(text2).toStrictEqual({ type: NodeTypes.TEXT, content: ' text', loc: { start: { offset: 20, line: 1, column: 21 }, end: { offset: 25, line: 1, column: 26 }, source: ' text' } }) }) test('text with interpolation which has `<`', () => { const ast = baseParse('some {{ ad }} text') const text1 = ast.children[0] as TextNode const text2 = ast.children[2] as TextNode expect(text1).toStrictEqual({ type: NodeTypes.TEXT, content: 'some ', loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 5, line: 1, column: 6 }, source: 'some ' } }) expect(text2).toStrictEqual({ type: NodeTypes.TEXT, content: ' text', loc: { start: { offset: 21, line: 1, column: 22 }, end: { offset: 26, line: 1, column: 27 }, source: ' text' } }) }) test('text with mix of tags and interpolations', () => { const ast = baseParse('some {{ foo < bar + foo }} text') const text1 = ast.children[0] as TextNode const text2 = (ast.children[1] as ElementNode).children![1] as TextNode expect(text1).toStrictEqual({ type: NodeTypes.TEXT, content: 'some ', loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 5, line: 1, column: 6 }, source: 'some ' } }) expect(text2).toStrictEqual({ type: NodeTypes.TEXT, content: ' text', loc: { start: { offset: 32, line: 1, column: 33 }, end: { offset: 37, line: 1, column: 38 }, source: ' text' } }) }) test('lonely "<" doesn\'t separate nodes', () => { const ast = baseParse('a < b', { onError: err => { if (err.code !== ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME) { throw err } } }) const text = ast.children[0] as TextNode expect(text).toStrictEqual({ type: NodeTypes.TEXT, content: 'a < b', loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 5, line: 1, column: 6 }, source: 'a < b' } }) }) test('lonely "{{" doesn\'t separate nodes', () => { const ast = baseParse('a {{ b', { onError: error => { if (error.code !== ErrorCodes.X_MISSING_INTERPOLATION_END) { throw error } } }) const text = ast.children[0] as TextNode expect(text).toStrictEqual({ type: NodeTypes.TEXT, content: 'a {{ b', loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 6, line: 1, column: 7 }, source: 'a {{ b' } }) }) }) describe('Interpolation', () => { test('simple interpolation', () => { const ast = baseParse('{{message}}') const interpolation = ast.children[0] as InterpolationNode expect(interpolation).toStrictEqual({ type: NodeTypes.INTERPOLATION, content: { type: NodeTypes.SIMPLE_EXPRESSION, content: `message`, isStatic: false, constType: ConstantTypes.NOT_CONSTANT, loc: { start: { offset: 2, line: 1, column: 3 }, end: { offset: 9, line: 1, column: 10 }, source: `message` } }, loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 11, line: 1, column: 12 }, source: '{{message}}' } }) }) test('it can have tag-like notation', () => { const ast = baseParse('{{ a { const ast = baseParse('{{ ad }}') const interpolation1 = ast.children[0] as InterpolationNode const interpolation2 = ast.children[1] as InterpolationNode expect(interpolation1).toStrictEqual({ type: NodeTypes.INTERPOLATION, content: { type: NodeTypes.SIMPLE_EXPRESSION, content: `ad', loc: { start: { offset: 12, line: 1, column: 13 }, end: { offset: 15, line: 1, column: 16 }, source: 'c>d' } }, loc: { start: { offset: 9, line: 1, column: 10 }, end: { offset: 18, line: 1, column: 19 }, source: '{{ c>d }}' } }) }) test('it can have tag-like notation (3)', () => { const ast = baseParse('
{{ "
" }}') const element = ast.children[0] as ElementNode const interpolation = element.children[0] as InterpolationNode expect(interpolation).toStrictEqual({ type: NodeTypes.INTERPOLATION, content: { type: NodeTypes.SIMPLE_EXPRESSION, isStatic: false, // The `constType` is the default value and will be determined in `transformExpression`. constType: ConstantTypes.NOT_CONSTANT, content: '""', loc: { start: { offset: 8, line: 1, column: 9 }, end: { offset: 16, line: 1, column: 17 }, source: '""' } }, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 19, line: 1, column: 20 }, source: '{{ "" }}' } }) }) test('custom delimiters', () => { const ast = baseParse('

{msg}

', { delimiters: ['{', '}'] }) const element = ast.children[0] as ElementNode const interpolation = element.children[0] as InterpolationNode expect(interpolation).toStrictEqual({ type: NodeTypes.INTERPOLATION, content: { type: NodeTypes.SIMPLE_EXPRESSION, content: `msg`, isStatic: false, constType: ConstantTypes.NOT_CONSTANT, loc: { start: { offset: 4, line: 1, column: 5 }, end: { offset: 7, line: 1, column: 8 }, source: 'msg' } }, loc: { start: { offset: 3, line: 1, column: 4 }, end: { offset: 8, line: 1, column: 9 }, source: '{msg}' } }) }) }) describe('Comment', () => { test('empty comment', () => { const ast = baseParse('') const comment = ast.children[0] as CommentNode expect(comment).toStrictEqual({ type: NodeTypes.COMMENT, content: '', loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 7, line: 1, column: 8 }, source: '' } }) }) test('simple comment', () => { const ast = baseParse('') const comment = ast.children[0] as CommentNode expect(comment).toStrictEqual({ type: NodeTypes.COMMENT, content: 'abc', loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 10, line: 1, column: 11 }, source: '' } }) }) test('two comments', () => { const ast = baseParse('') const comment1 = ast.children[0] as CommentNode const comment2 = ast.children[1] as CommentNode expect(comment1).toStrictEqual({ type: NodeTypes.COMMENT, content: 'abc', loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 10, line: 1, column: 11 }, source: '' } }) expect(comment2).toStrictEqual({ type: NodeTypes.COMMENT, content: 'def', loc: { start: { offset: 10, line: 1, column: 11 }, end: { offset: 20, line: 1, column: 21 }, source: '' } }) }) test('comments option', () => { const astOptionNoComment = baseParse('', { comments: false }) const astOptionWithComments = baseParse('', { comments: true }) expect(astOptionNoComment.children).toHaveLength(0) expect(astOptionWithComments.children).toHaveLength(1) }) // #2217 test('comments in the
 tag should be removed when comments option requires it', () => {
      const rawText = `

` const astWithComments = baseParse(`

${rawText}
`, { comments: true }) expect( (astWithComments.children[0] as ElementNode).children ).toMatchObject([ { type: NodeTypes.ELEMENT, tag: 'p' }, { type: NodeTypes.COMMENT }, { type: NodeTypes.ELEMENT, tag: 'p' } ]) const astWithoutComments = baseParse(`
${rawText}
`, { comments: false }) expect( (astWithoutComments.children[0] as ElementNode).children ).toMatchObject([ { type: NodeTypes.ELEMENT, tag: 'p' }, { type: NodeTypes.ELEMENT, tag: 'p' } ]) }) }) describe('Element', () => { test('simple div', () => { const ast = baseParse('
hello
') const element = ast.children[0] as ElementNode expect(element).toStrictEqual({ type: NodeTypes.ELEMENT, ns: Namespaces.HTML, tag: 'div', tagType: ElementTypes.ELEMENT, codegenNode: undefined, props: [], isSelfClosing: false, children: [ { type: NodeTypes.TEXT, content: 'hello', loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 10, line: 1, column: 11 }, source: 'hello' } } ], loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 16, line: 1, column: 17 }, source: '
hello
' } }) }) test('empty', () => { const ast = baseParse('
') const element = ast.children[0] as ElementNode expect(element).toStrictEqual({ type: NodeTypes.ELEMENT, ns: Namespaces.HTML, tag: 'div', tagType: ElementTypes.ELEMENT, codegenNode: undefined, props: [], isSelfClosing: false, children: [], loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 11, line: 1, column: 12 }, source: '
' } }) }) test('self closing', () => { const ast = baseParse('
after') const element = ast.children[0] as ElementNode expect(element).toStrictEqual({ type: NodeTypes.ELEMENT, ns: Namespaces.HTML, tag: 'div', tagType: ElementTypes.ELEMENT, codegenNode: undefined, props: [], isSelfClosing: true, children: [], loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 6, line: 1, column: 7 }, source: '
' } }) }) test('void element', () => { const ast = baseParse('after', { isVoidTag: tag => tag === 'img' }) const element = ast.children[0] as ElementNode expect(element).toStrictEqual({ type: NodeTypes.ELEMENT, ns: Namespaces.HTML, tag: 'img', tagType: ElementTypes.ELEMENT, codegenNode: undefined, props: [], isSelfClosing: false, children: [], loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 5, line: 1, column: 6 }, source: '' } }) }) test('template element with directives', () => { const ast = baseParse('') const element = ast.children[0] expect(element).toMatchObject({ type: NodeTypes.ELEMENT, tagType: ElementTypes.TEMPLATE }) }) test('template element without directives', () => { const ast = baseParse('') const element = ast.children[0] expect(element).toMatchObject({ type: NodeTypes.ELEMENT, tagType: ElementTypes.ELEMENT }) }) test('native element with `isNativeTag`', () => { const ast = baseParse('
', { isNativeTag: tag => tag === 'div' }) expect(ast.children[0]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'div', tagType: ElementTypes.ELEMENT }) expect(ast.children[1]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'comp', tagType: ElementTypes.COMPONENT }) expect(ast.children[2]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'Comp', tagType: ElementTypes.COMPONENT }) }) test('native element without `isNativeTag`', () => { const ast = baseParse('
') expect(ast.children[0]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'div', tagType: ElementTypes.ELEMENT }) expect(ast.children[1]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'comp', tagType: ElementTypes.ELEMENT }) expect(ast.children[2]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'Comp', tagType: ElementTypes.COMPONENT }) }) test('v-is with `isNativeTag`', () => { const ast = baseParse( `
`, { isNativeTag: tag => tag === 'div' } ) expect(ast.children[0]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'div', tagType: ElementTypes.ELEMENT }) expect(ast.children[1]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'div', tagType: ElementTypes.COMPONENT }) expect(ast.children[2]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'Comp', tagType: ElementTypes.COMPONENT }) }) test('v-is without `isNativeTag`', () => { const ast = baseParse(`
`) expect(ast.children[0]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'div', tagType: ElementTypes.ELEMENT }) expect(ast.children[1]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'div', tagType: ElementTypes.COMPONENT }) expect(ast.children[2]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'Comp', tagType: ElementTypes.COMPONENT }) }) test('custom element', () => { const ast = baseParse('
', { isNativeTag: tag => tag === 'div', isCustomElement: tag => tag === 'comp' }) expect(ast.children[0]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'div', tagType: ElementTypes.ELEMENT }) expect(ast.children[1]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'comp', tagType: ElementTypes.ELEMENT }) }) test('built-in component', () => { const ast = baseParse('
', { isBuiltInComponent: tag => (tag === 'comp' ? Symbol() : void 0) }) expect(ast.children[0]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'div', tagType: ElementTypes.ELEMENT }) expect(ast.children[1]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'comp', tagType: ElementTypes.COMPONENT }) }) test('slot element', () => { const ast = baseParse('') expect(ast.children[0]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'slot', tagType: ElementTypes.SLOT }) expect(ast.children[1]).toMatchObject({ type: NodeTypes.ELEMENT, tag: 'Comp', tagType: ElementTypes.COMPONENT }) }) test('attribute with no value', () => { const ast = baseParse('
') const element = ast.children[0] as ElementNode expect(element).toStrictEqual({ type: NodeTypes.ELEMENT, ns: Namespaces.HTML, tag: 'div', tagType: ElementTypes.ELEMENT, codegenNode: undefined, props: [ { type: NodeTypes.ATTRIBUTE, name: 'id', value: undefined, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 7, line: 1, column: 8 }, source: 'id' } } ], isSelfClosing: false, children: [], loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 14, line: 1, column: 15 }, source: '
' } }) }) test('attribute with empty value, double quote', () => { const ast = baseParse('
') const element = ast.children[0] as ElementNode expect(element).toStrictEqual({ type: NodeTypes.ELEMENT, ns: Namespaces.HTML, tag: 'div', tagType: ElementTypes.ELEMENT, codegenNode: undefined, props: [ { type: NodeTypes.ATTRIBUTE, name: 'id', value: { type: NodeTypes.TEXT, content: '', loc: { start: { offset: 8, line: 1, column: 9 }, end: { offset: 10, line: 1, column: 11 }, source: '""' } }, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 10, line: 1, column: 11 }, source: 'id=""' } } ], isSelfClosing: false, children: [], loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 17, line: 1, column: 18 }, source: '
' } }) }) test('attribute with empty value, single quote', () => { const ast = baseParse("
") const element = ast.children[0] as ElementNode expect(element).toStrictEqual({ type: NodeTypes.ELEMENT, ns: Namespaces.HTML, tag: 'div', tagType: ElementTypes.ELEMENT, codegenNode: undefined, props: [ { type: NodeTypes.ATTRIBUTE, name: 'id', value: { type: NodeTypes.TEXT, content: '', loc: { start: { offset: 8, line: 1, column: 9 }, end: { offset: 10, line: 1, column: 11 }, source: "''" } }, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 10, line: 1, column: 11 }, source: "id=''" } } ], isSelfClosing: false, children: [], loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 17, line: 1, column: 18 }, source: "
" } }) }) test('attribute with value, double quote', () => { const ast = baseParse('
') const element = ast.children[0] as ElementNode expect(element).toStrictEqual({ type: NodeTypes.ELEMENT, ns: Namespaces.HTML, tag: 'div', tagType: ElementTypes.ELEMENT, codegenNode: undefined, props: [ { type: NodeTypes.ATTRIBUTE, name: 'id', value: { type: NodeTypes.TEXT, content: ">'", loc: { start: { offset: 8, line: 1, column: 9 }, end: { offset: 12, line: 1, column: 13 }, source: '">\'"' } }, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 12, line: 1, column: 13 }, source: 'id=">\'"' } } ], isSelfClosing: false, children: [], loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 19, line: 1, column: 20 }, source: '
' } }) }) test('attribute with value, single quote', () => { const ast = baseParse("
") const element = ast.children[0] as ElementNode expect(element).toStrictEqual({ type: NodeTypes.ELEMENT, ns: Namespaces.HTML, tag: 'div', tagType: ElementTypes.ELEMENT, codegenNode: undefined, props: [ { type: NodeTypes.ATTRIBUTE, name: 'id', value: { type: NodeTypes.TEXT, content: '>"', loc: { start: { offset: 8, line: 1, column: 9 }, end: { offset: 12, line: 1, column: 13 }, source: "'>\"'" } }, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 12, line: 1, column: 13 }, source: "id='>\"'" } } ], isSelfClosing: false, children: [], loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 19, line: 1, column: 20 }, source: "
" } }) }) test('attribute with value, unquoted', () => { const ast = baseParse('
') const element = ast.children[0] as ElementNode expect(element).toStrictEqual({ type: NodeTypes.ELEMENT, ns: Namespaces.HTML, tag: 'div', tagType: ElementTypes.ELEMENT, codegenNode: undefined, props: [ { type: NodeTypes.ATTRIBUTE, name: 'id', value: { type: NodeTypes.TEXT, content: 'a/', loc: { start: { offset: 8, line: 1, column: 9 }, end: { offset: 10, line: 1, column: 11 }, source: 'a/' } }, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 10, line: 1, column: 11 }, source: 'id=a/' } } ], isSelfClosing: false, children: [], loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 17, line: 1, column: 18 }, source: '
' } }) }) test('multiple attributes', () => { const ast = baseParse('
') const element = ast.children[0] as ElementNode expect(element).toStrictEqual({ type: NodeTypes.ELEMENT, ns: Namespaces.HTML, tag: 'div', tagType: ElementTypes.ELEMENT, codegenNode: undefined, props: [ { type: NodeTypes.ATTRIBUTE, name: 'id', value: { type: NodeTypes.TEXT, content: 'a', loc: { start: { offset: 8, line: 1, column: 9 }, end: { offset: 9, line: 1, column: 10 }, source: 'a' } }, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 9, line: 1, column: 10 }, source: 'id=a' } }, { type: NodeTypes.ATTRIBUTE, name: 'class', value: { type: NodeTypes.TEXT, content: 'c', loc: { start: { offset: 16, line: 1, column: 17 }, end: { offset: 19, line: 1, column: 20 }, source: '"c"' } }, loc: { start: { offset: 10, line: 1, column: 11 }, end: { offset: 19, line: 1, column: 20 }, source: 'class="c"' } }, { type: NodeTypes.ATTRIBUTE, name: 'inert', value: undefined, loc: { start: { offset: 20, line: 1, column: 21 }, end: { offset: 25, line: 1, column: 26 }, source: 'inert' } }, { type: NodeTypes.ATTRIBUTE, name: 'style', value: { type: NodeTypes.TEXT, content: '', loc: { start: { offset: 32, line: 1, column: 33 }, end: { offset: 34, line: 1, column: 35 }, source: "''" } }, loc: { start: { offset: 26, line: 1, column: 27 }, end: { offset: 34, line: 1, column: 35 }, source: "style=''" } } ], isSelfClosing: false, children: [], loc: { start: { offset: 0, line: 1, column: 1 }, end: { offset: 41, line: 1, column: 42 }, source: '
' } }) }) // https://github.com/vuejs/core/issues/4251 test('class attribute should ignore whitespace when parsed', () => { const ast = baseParse('
') const element = ast.children[0] as ElementNode expect(element).toStrictEqual({ children: [], codegenNode: undefined, isSelfClosing: false, loc: { end: { column: 10, line: 3, offset: 29 }, source: '
', start: { column: 1, line: 1, offset: 0 } }, ns: Namespaces.HTML, props: [ { loc: { end: { column: 3, line: 3, offset: 22 }, source: 'class=" \n\t c \t\n "', start: { column: 6, line: 1, offset: 5 } }, name: 'class', type: NodeTypes.ATTRIBUTE, value: { content: 'c', loc: { end: { column: 3, line: 3, offset: 22 }, source: '" \n\t c \t\n "', start: { column: 12, line: 1, offset: 11 } }, type: NodeTypes.TEXT } } ], tag: 'div', tagType: ElementTypes.ELEMENT, type: NodeTypes.ELEMENT }) }) test('directive with no value', () => { const ast = baseParse('
') const directive = (ast.children[0] as ElementNode).props[0] expect(directive).toStrictEqual({ type: NodeTypes.DIRECTIVE, name: 'if', arg: undefined, modifiers: [], exp: undefined, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 9, line: 1, column: 10 }, source: 'v-if' } }) }) test('directive with value', () => { const ast = baseParse('
') const directive = (ast.children[0] as ElementNode).props[0] expect(directive).toStrictEqual({ type: NodeTypes.DIRECTIVE, name: 'if', arg: undefined, modifiers: [], exp: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'a', isStatic: false, constType: ConstantTypes.NOT_CONSTANT, loc: { start: { offset: 11, line: 1, column: 12 }, end: { offset: 12, line: 1, column: 13 }, source: 'a' } }, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 13, line: 1, column: 14 }, source: 'v-if="a"' } }) }) test('directive with argument', () => { const ast = baseParse('
') const directive = (ast.children[0] as ElementNode).props[0] expect(directive).toStrictEqual({ type: NodeTypes.DIRECTIVE, name: 'on', arg: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'click', isStatic: true, constType: ConstantTypes.CAN_STRINGIFY, loc: { source: 'click', start: { column: 11, line: 1, offset: 10 }, end: { column: 16, line: 1, offset: 15 } } }, modifiers: [], exp: undefined, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 15, line: 1, column: 16 }, source: 'v-on:click' } }) }) test('directive with dynamic argument', () => { const ast = baseParse('
') const directive = (ast.children[0] as ElementNode).props[0] expect(directive).toStrictEqual({ type: NodeTypes.DIRECTIVE, name: 'on', arg: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'event', isStatic: false, constType: ConstantTypes.NOT_CONSTANT, loc: { source: '[event]', start: { column: 11, line: 1, offset: 10 }, end: { column: 18, line: 1, offset: 17 } } }, modifiers: [], exp: undefined, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 17, line: 1, column: 18 }, source: 'v-on:[event]' } }) }) test('directive with a modifier', () => { const ast = baseParse('
') const directive = (ast.children[0] as ElementNode).props[0] expect(directive).toStrictEqual({ type: NodeTypes.DIRECTIVE, name: 'on', arg: undefined, modifiers: ['enter'], exp: undefined, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 15, line: 1, column: 16 }, source: 'v-on.enter' } }) }) test('directive with two modifiers', () => { const ast = baseParse('
') const directive = (ast.children[0] as ElementNode).props[0] expect(directive).toStrictEqual({ type: NodeTypes.DIRECTIVE, name: 'on', arg: undefined, modifiers: ['enter', 'exact'], exp: undefined, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 21, line: 1, column: 22 }, source: 'v-on.enter.exact' } }) }) test('directive with argument and modifiers', () => { const ast = baseParse('
') const directive = (ast.children[0] as ElementNode).props[0] expect(directive).toStrictEqual({ type: NodeTypes.DIRECTIVE, name: 'on', arg: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'click', isStatic: true, constType: ConstantTypes.CAN_STRINGIFY, loc: { source: 'click', start: { column: 11, line: 1, offset: 10 }, end: { column: 16, line: 1, offset: 15 } } }, modifiers: ['enter', 'exact'], exp: undefined, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 27, line: 1, column: 28 }, source: 'v-on:click.enter.exact' } }) }) test('directive with dynamic argument and modifiers', () => { const ast = baseParse('
') const directive = (ast.children[0] as ElementNode).props[0] expect(directive).toStrictEqual({ type: NodeTypes.DIRECTIVE, name: 'on', arg: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'a.b', isStatic: false, constType: ConstantTypes.NOT_CONSTANT, loc: { source: '[a.b]', start: { column: 11, line: 1, offset: 10 }, end: { column: 16, line: 1, offset: 15 } } }, modifiers: ['camel'], exp: undefined, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 21, line: 1, column: 22 }, source: 'v-on:[a.b].camel' } }) }) test('directive with no name', () => { let errorCode = -1 const ast = baseParse('
', { onError: err => { errorCode = err.code as number } }) const directive = (ast.children[0] as ElementNode).props[0] expect(errorCode).toBe(ErrorCodes.X_MISSING_DIRECTIVE_NAME) expect(directive).toStrictEqual({ type: NodeTypes.ATTRIBUTE, name: 'v-', value: undefined, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 7, line: 1, column: 8 }, source: 'v-' } }) }) test('v-bind shorthand', () => { const ast = baseParse('
') const directive = (ast.children[0] as ElementNode).props[0] expect(directive).toStrictEqual({ type: NodeTypes.DIRECTIVE, name: 'bind', arg: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'a', isStatic: true, constType: ConstantTypes.CAN_STRINGIFY, loc: { source: 'a', start: { column: 7, line: 1, offset: 6 }, end: { column: 8, line: 1, offset: 7 } } }, modifiers: [], exp: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'b', isStatic: false, constType: ConstantTypes.NOT_CONSTANT, loc: { start: { offset: 8, line: 1, column: 9 }, end: { offset: 9, line: 1, column: 10 }, source: 'b' } }, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 9, line: 1, column: 10 }, source: ':a=b' } }) }) test('v-bind .prop shorthand', () => { const ast = baseParse('
') const directive = (ast.children[0] as ElementNode).props[0] expect(directive).toStrictEqual({ type: NodeTypes.DIRECTIVE, name: 'bind', arg: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'a', isStatic: true, constType: ConstantTypes.CAN_STRINGIFY, loc: { source: 'a', start: { column: 7, line: 1, offset: 6 }, end: { column: 8, line: 1, offset: 7 } } }, modifiers: ['prop'], exp: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'b', isStatic: false, constType: ConstantTypes.NOT_CONSTANT, loc: { start: { offset: 8, line: 1, column: 9 }, end: { offset: 9, line: 1, column: 10 }, source: 'b' } }, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 9, line: 1, column: 10 }, source: '.a=b' } }) }) test('v-bind shorthand with modifier', () => { const ast = baseParse('
') const directive = (ast.children[0] as ElementNode).props[0] expect(directive).toStrictEqual({ type: NodeTypes.DIRECTIVE, name: 'bind', arg: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'a', isStatic: true, constType: ConstantTypes.CAN_STRINGIFY, loc: { source: 'a', start: { column: 7, line: 1, offset: 6 }, end: { column: 8, line: 1, offset: 7 } } }, modifiers: ['sync'], exp: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'b', isStatic: false, constType: ConstantTypes.NOT_CONSTANT, loc: { start: { offset: 13, line: 1, column: 14 }, end: { offset: 14, line: 1, column: 15 }, source: 'b' } }, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 14, line: 1, column: 15 }, source: ':a.sync=b' } }) }) test('v-on shorthand', () => { const ast = baseParse('
') const directive = (ast.children[0] as ElementNode).props[0] expect(directive).toStrictEqual({ type: NodeTypes.DIRECTIVE, name: 'on', arg: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'a', isStatic: true, constType: ConstantTypes.CAN_STRINGIFY, loc: { source: 'a', start: { column: 7, line: 1, offset: 6 }, end: { column: 8, line: 1, offset: 7 } } }, modifiers: [], exp: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'b', isStatic: false, constType: ConstantTypes.NOT_CONSTANT, loc: { start: { offset: 8, line: 1, column: 9 }, end: { offset: 9, line: 1, column: 10 }, source: 'b' } }, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 9, line: 1, column: 10 }, source: '@a=b' } }) }) test('v-on shorthand with modifier', () => { const ast = baseParse('
') const directive = (ast.children[0] as ElementNode).props[0] expect(directive).toStrictEqual({ type: NodeTypes.DIRECTIVE, name: 'on', arg: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'a', isStatic: true, constType: ConstantTypes.CAN_STRINGIFY, loc: { source: 'a', start: { column: 7, line: 1, offset: 6 }, end: { column: 8, line: 1, offset: 7 } } }, modifiers: ['enter'], exp: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'b', isStatic: false, constType: ConstantTypes.NOT_CONSTANT, loc: { start: { offset: 14, line: 1, column: 15 }, end: { offset: 15, line: 1, column: 16 }, source: 'b' } }, loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 15, line: 1, column: 16 }, source: '@a.enter=b' } }) }) test('v-slot shorthand', () => { const ast = baseParse('') const directive = (ast.children[0] as ElementNode).props[0] expect(directive).toStrictEqual({ type: NodeTypes.DIRECTIVE, name: 'slot', arg: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'a', isStatic: true, constType: ConstantTypes.CAN_STRINGIFY, loc: { source: 'a', start: { column: 8, line: 1, offset: 7 }, end: { column: 9, line: 1, offset: 8 } } }, modifiers: [], exp: { type: NodeTypes.SIMPLE_EXPRESSION, content: '{ b }', isStatic: false, // The `constType` is the default value and will be determined in transformExpression constType: ConstantTypes.NOT_CONSTANT, loc: { start: { offset: 10, line: 1, column: 11 }, end: { offset: 15, line: 1, column: 16 }, source: '{ b }' } }, loc: { start: { offset: 6, line: 1, column: 7 }, end: { offset: 16, line: 1, column: 17 }, source: '#a="{ b }"' } }) }) // #1241 special case for 2.x compat test('v-slot arg containing dots', () => { const ast = baseParse('') const directive = (ast.children[0] as ElementNode).props[0] expect(directive).toMatchObject({ type: NodeTypes.DIRECTIVE, name: 'slot', arg: { type: NodeTypes.SIMPLE_EXPRESSION, content: 'foo.bar', isStatic: true, constType: ConstantTypes.CAN_STRINGIFY, loc: { source: 'foo.bar', start: { column: 14, line: 1, offset: 13 }, end: { column: 21, line: 1, offset: 20 } } } }) }) test('v-pre', () => { const ast = baseParse( `
{{ bar }}
\n` + `
{{ bar }}
` ) const divWithPre = ast.children[0] as ElementNode expect(divWithPre.props).toMatchObject([ { type: NodeTypes.ATTRIBUTE, name: `:id`, value: { type: NodeTypes.TEXT, content: `foo` }, loc: { source: `:id="foo"`, start: { line: 1, column: 12 }, end: { line: 1, column: 21 } } } ]) expect(divWithPre.children[0]).toMatchObject({ type: NodeTypes.ELEMENT, tagType: ElementTypes.ELEMENT, tag: `Comp` }) expect(divWithPre.children[1]).toMatchObject({ type: NodeTypes.TEXT, content: `{{ bar }}` }) // should not affect siblings after it const divWithoutPre = ast.children[1] as ElementNode expect(divWithoutPre.props).toMatchObject([ { type: NodeTypes.DIRECTIVE, name: `bind`, arg: { type: NodeTypes.SIMPLE_EXPRESSION, isStatic: true, content: `id` }, exp: { type: NodeTypes.SIMPLE_EXPRESSION, isStatic: false, content: `foo` }, loc: { source: `:id="foo"`, start: { line: 2, column: 6 }, end: { line: 2, column: 15 } } } ]) expect(divWithoutPre.children[0]).toMatchObject({ type: NodeTypes.ELEMENT, tagType: ElementTypes.COMPONENT, tag: `Comp` }) expect(divWithoutPre.children[1]).toMatchObject({ type: NodeTypes.INTERPOLATION, content: { type: NodeTypes.SIMPLE_EXPRESSION, content: `bar`, isStatic: false } }) }) test('self-closing v-pre', () => { const ast = baseParse( `
\n
{{ bar }}
` ) // should not affect siblings after it const divWithoutPre = ast.children[1] as ElementNode expect(divWithoutPre.props).toMatchObject([ { type: NodeTypes.DIRECTIVE, name: `bind`, arg: { type: NodeTypes.SIMPLE_EXPRESSION, isStatic: true, content: `id` }, exp: { type: NodeTypes.SIMPLE_EXPRESSION, isStatic: false, content: `foo` }, loc: { source: `:id="foo"`, start: { line: 2, column: 6 }, end: { line: 2, column: 15 } } } ]) expect(divWithoutPre.children[0]).toMatchObject({ type: NodeTypes.ELEMENT, tagType: ElementTypes.COMPONENT, tag: `Comp` }) expect(divWithoutPre.children[1]).toMatchObject({ type: NodeTypes.INTERPOLATION, content: { type: NodeTypes.SIMPLE_EXPRESSION, content: `bar`, isStatic: false } }) }) test('end tags are case-insensitive.', () => { const ast = baseParse('
hello
after') const element = ast.children[0] as ElementNode const text = element.children[0] as TextNode expect(text).toStrictEqual({ type: NodeTypes.TEXT, content: 'hello', loc: { start: { offset: 5, line: 1, column: 6 }, end: { offset: 10, line: 1, column: 11 }, source: 'hello' } }) }) }) test('self closing single tag', () => { const ast = baseParse('
') expect(ast.children).toHaveLength(1) expect(ast.children[0]).toMatchObject({ tag: 'div' }) }) test('self closing multiple tag', () => { const ast = baseParse( `
\n` + `

` ) expect(ast).toMatchSnapshot() expect(ast.children).toHaveLength(2) expect(ast.children[0]).toMatchObject({ tag: 'div' }) expect(ast.children[1]).toMatchObject({ tag: 'p' }) }) test('valid html', () => { const ast = baseParse( `

\n` + `

\n` + ` \n` + `

` ) expect(ast).toMatchSnapshot() expect(ast.children).toHaveLength(1) const el = ast.children[0] as any expect(el).toMatchObject({ tag: 'div' }) expect(el.children).toHaveLength(2) expect(el.children[0]).toMatchObject({ tag: 'p' }) expect(el.children[1]).toMatchObject({ type: NodeTypes.COMMENT }) }) test('invalid html', () => { expect(() => { baseParse(`
\n\n
\n`) }).toThrow('Element is missing end tag.') const spy = jest.fn() const ast = baseParse(`
\n\n
\n`, { onError: spy }) expect(spy.mock.calls).toMatchObject([ [ { code: ErrorCodes.X_MISSING_END_TAG, loc: { start: { offset: 6, line: 2, column: 1 } } } ], [ { code: ErrorCodes.X_INVALID_END_TAG, loc: { start: { offset: 20, line: 4, column: 1 } } } ] ]) expect(ast).toMatchSnapshot() }) test('parse with correct location info', () => { const [foo, bar, but, baz] = baseParse( ` foo is {{ bar }} but {{ baz }}`.trim() ).children let offset = 0 expect(foo.loc.start).toEqual({ line: 1, column: 1, offset }) offset += foo.loc.source.length expect(foo.loc.end).toEqual({ line: 2, column: 5, offset }) expect(bar.loc.start).toEqual({ line: 2, column: 5, offset }) const barInner = (bar as InterpolationNode).content offset += 3 expect(barInner.loc.start).toEqual({ line: 2, column: 8, offset }) offset += barInner.loc.source.length expect(barInner.loc.end).toEqual({ line: 2, column: 11, offset }) offset += 3 expect(bar.loc.end).toEqual({ line: 2, column: 14, offset }) expect(but.loc.start).toEqual({ line: 2, column: 14, offset }) offset += but.loc.source.length expect(but.loc.end).toEqual({ line: 2, column: 19, offset }) expect(baz.loc.start).toEqual({ line: 2, column: 19, offset }) const bazInner = (baz as InterpolationNode).content offset += 3 expect(bazInner.loc.start).toEqual({ line: 2, column: 22, offset }) offset += bazInner.loc.source.length expect(bazInner.loc.end).toEqual({ line: 2, column: 25, offset }) offset += 3 expect(baz.loc.end).toEqual({ line: 2, column: 28, offset }) }) describe('decodeEntities option', () => { test('use default map', () => { const ast: any = baseParse('><&'"&foo;') expect(ast.children.length).toBe(1) expect(ast.children[0].type).toBe(NodeTypes.TEXT) expect(ast.children[0].content).toBe('><&\'"&foo;') }) test('use the given map', () => { const ast: any = baseParse('&∪︀', { decodeEntities: text => text.replace('∪︀', '\u222A\uFE00'), onError: () => {} // Ignore errors }) expect(ast.children.length).toBe(1) expect(ast.children[0].type).toBe(NodeTypes.TEXT) expect(ast.children[0].content).toBe('&\u222A\uFE00') }) }) describe('whitespace management when adopting strategy condense', () => { const parse = (content: string, options?: ParserOptions) => baseParse(content, { whitespace: 'condense', ...options }) it('should remove whitespaces at start/end inside an element', () => { const ast = parse(`
`) expect((ast.children[0] as ElementNode).children.length).toBe(1) }) it('should remove whitespaces w/ newline between elements', () => { const ast = parse(`
\n
\n
`) 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(`
\n
`) expect(ast.children.length).toBe(3) expect(ast.children[0].type).toBe(NodeTypes.ELEMENT) expect(ast.children[1].type).toBe(NodeTypes.COMMENT) expect(ast.children[2].type).toBe(NodeTypes.ELEMENT) }) it('should remove whitespaces w/ newline between comments and elements', () => { const ast = parse(`
\n \n
`) expect(ast.children.length).toBe(3) expect(ast.children[0].type).toBe(NodeTypes.ELEMENT) expect(ast.children[1].type).toBe(NodeTypes.COMMENT) expect(ast.children[2].type).toBe(NodeTypes.ELEMENT) }) it('should NOT remove whitespaces w/ newline between interpolations', () => { const ast = parse(`{{ foo }} \n {{ bar }}`) expect(ast.children.length).toBe(3) expect(ast.children[0].type).toBe(NodeTypes.INTERPOLATION) expect(ast.children[1]).toMatchObject({ type: NodeTypes.TEXT, content: ' ' }) expect(ast.children[2].type).toBe(NodeTypes.INTERPOLATION) }) it('should NOT remove whitespaces w/o newline between elements', () => { const ast = parse(`
`) expect(ast.children.length).toBe(5) expect(ast.children.map(c => c.type)).toMatchObject([ NodeTypes.ELEMENT, NodeTypes.TEXT, NodeTypes.ELEMENT, NodeTypes.TEXT, NodeTypes.ELEMENT ]) }) it('should condense consecutive whitespaces in text', () => { const ast = parse(` foo \n bar baz `) expect((ast.children[0] as TextNode).content).toBe(` foo bar baz `) }) it('should remove leading newline character immediately following the pre element start tag', () => { const ast = baseParse(`
\n  foo  bar  
`, { isPreTag: tag => tag === 'pre' }) expect(ast.children).toHaveLength(1) const preElement = ast.children[0] as ElementNode expect(preElement.children).toHaveLength(1) expect((preElement.children[0] as TextNode).content).toBe(` foo bar `) }) it('should NOT remove leading newline character immediately following child-tag of pre element', () => { const ast = baseParse(`
\n  foo  bar  
`, { isPreTag: tag => tag === 'pre' }) const preElement = ast.children[0] as ElementNode expect(preElement.children).toHaveLength(2) expect((preElement.children[1] as TextNode).content).toBe( `\n foo bar ` ) }) it('self-closing pre tag', () => { const ast = baseParse(`
\n  foo   bar`, {
        isPreTag: tag => tag === 'pre'
      })
      const elementAfterPre = ast.children[1] as ElementNode
      // should not affect the  and condense its whitespace inside
      expect((elementAfterPre.children[0] as TextNode).content).toBe(` foo bar`)
    })

    it('should NOT condense whitespaces in RCDATA text mode', () => {
      const ast = baseParse(``, {
        getTextMode: ({ tag }) =>
          tag === 'textarea' ? TextModes.RCDATA : TextModes.DATA
      })
      const preElement = ast.children[0] as ElementNode
      expect(preElement.children).toHaveLength(1)
      expect((preElement.children[0] as TextNode).content).toBe(`Text:\n   foo`)
    })
  })

  describe('whitespace management when adopting strategy preserve', () => {
    const parse = (content: string, options?: ParserOptions) =>
      baseParse(content, {
        whitespace: 'preserve',
        ...options
      })

    it('should still remove whitespaces at start/end inside an element', () => {
      const ast = parse(`
`) expect((ast.children[0] as ElementNode).children.length).toBe(1) }) it('should preserve whitespaces w/ newline between elements', () => { const ast = parse(`
\n
\n
`) expect(ast.children.length).toBe(5) expect(ast.children.map(c => c.type)).toMatchObject([ NodeTypes.ELEMENT, NodeTypes.TEXT, NodeTypes.ELEMENT, NodeTypes.TEXT, NodeTypes.ELEMENT ]) }) it('should preserve whitespaces adjacent to comments', () => { const ast = parse(`
\n
`) expect(ast.children.length).toBe(5) expect(ast.children.map(c => c.type)).toMatchObject([ NodeTypes.ELEMENT, NodeTypes.TEXT, NodeTypes.COMMENT, NodeTypes.TEXT, NodeTypes.ELEMENT ]) }) it('should preserve whitespaces w/ newline between comments and elements', () => { const ast = parse(`
\n \n
`) expect(ast.children.length).toBe(5) expect(ast.children.map(c => c.type)).toMatchObject([ NodeTypes.ELEMENT, NodeTypes.TEXT, NodeTypes.COMMENT, NodeTypes.TEXT, NodeTypes.ELEMENT ]) }) it('should preserve whitespaces w/ newline between interpolations', () => { const ast = parse(`{{ foo }} \n {{ bar }}`) expect(ast.children.length).toBe(3) expect(ast.children[0].type).toBe(NodeTypes.INTERPOLATION) expect(ast.children[1]).toMatchObject({ type: NodeTypes.TEXT, content: ' ' }) expect(ast.children[2].type).toBe(NodeTypes.INTERPOLATION) }) it('should preserve whitespaces w/o newline between elements', () => { const ast = parse(`
`) expect(ast.children.length).toBe(5) expect(ast.children.map(c => c.type)).toMatchObject([ NodeTypes.ELEMENT, NodeTypes.TEXT, NodeTypes.ELEMENT, NodeTypes.TEXT, NodeTypes.ELEMENT ]) }) it('should preserve consecutive whitespaces in text', () => { const content = ` foo \n bar baz ` const ast = parse(content) expect((ast.children[0] as TextNode).content).toBe(content) }) }) describe('Errors', () => { const patterns: { [key: string]: Array<{ code: string errors: Array<{ type: ErrorCodes; loc: Position }> options?: Partial }> } = { ABRUPT_CLOSING_OF_EMPTY_COMMENT: [ { code: '', errors: [ { type: ErrorCodes.ABRUPT_CLOSING_OF_EMPTY_COMMENT, loc: { offset: 10, line: 1, column: 11 } } ] }, { code: '', errors: [ { type: ErrorCodes.ABRUPT_CLOSING_OF_EMPTY_COMMENT, loc: { offset: 10, line: 1, column: 11 } } ] }, { code: '', errors: [] } ], CDATA_IN_HTML_CONTENT: [ { code: '', errors: [ { type: ErrorCodes.CDATA_IN_HTML_CONTENT, loc: { offset: 10, line: 1, column: 11 } } ] }, { code: '', errors: [] } ], DUPLICATE_ATTRIBUTE: [ { code: '', errors: [ { type: ErrorCodes.DUPLICATE_ATTRIBUTE, loc: { offset: 21, line: 1, column: 22 } } ] } ], END_TAG_WITH_ATTRIBUTES: [ { code: '', errors: [ { type: ErrorCodes.END_TAG_WITH_ATTRIBUTES, loc: { offset: 21, line: 1, column: 22 } } ] } ], END_TAG_WITH_TRAILING_SOLIDUS: [ { code: '', errors: [ { type: ErrorCodes.END_TAG_WITH_TRAILING_SOLIDUS, loc: { offset: 20, line: 1, column: 21 } } ] } ], EOF_BEFORE_TAG_NAME: [ { code: '