From 34e61197c705ccbd55368acc59621fd99d1e4446 Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 31 Jan 2020 17:20:52 -0500 Subject: [PATCH] refactor(compiler-core): improve template type handling --- .../__snapshots__/parse.spec.ts.snap | 168 +++++++++--------- .../compiler-core/__tests__/parse.spec.ts | 19 +- packages/compiler-core/src/parse.ts | 15 +- .../src/transforms/transformElement.ts | 12 +- 4 files changed, 120 insertions(+), 94 deletions(-) diff --git a/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap index f6aa2ece..978f4c9b 100644 --- a/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap +++ b/packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap @@ -42,7 +42,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -111,7 +111,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -180,7 +180,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -266,7 +266,7 @@ Object { }, ], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -352,7 +352,7 @@ Object { }, ], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -438,7 +438,7 @@ Object { }, ], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -524,7 +524,7 @@ Object { }, ], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -593,7 +593,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -662,7 +662,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -731,7 +731,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -800,7 +800,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -869,7 +869,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -962,7 +962,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -1031,7 +1031,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -1100,7 +1100,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -1169,7 +1169,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -1313,7 +1313,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -1388,7 +1388,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -1463,7 +1463,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -1532,7 +1532,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -1601,7 +1601,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -1676,7 +1676,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -1769,7 +1769,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -1838,7 +1838,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -1907,7 +1907,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -1976,7 +1976,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -2045,7 +2045,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -2114,7 +2114,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -2327,7 +2327,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -2402,7 +2402,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -2496,7 +2496,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -2590,7 +2590,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -2684,7 +2684,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -2794,7 +2794,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -2904,7 +2904,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -3014,7 +3014,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -3124,7 +3124,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -3234,7 +3234,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -3344,7 +3344,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -3454,7 +3454,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -3564,7 +3564,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -3633,7 +3633,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -3747,7 +3747,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -3816,7 +3816,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -3885,7 +3885,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -3954,7 +3954,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -4023,7 +4023,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -4110,7 +4110,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -4179,7 +4179,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -4265,7 +4265,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -4375,7 +4375,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -4469,7 +4469,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -4563,7 +4563,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -4614,7 +4614,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -4683,7 +4683,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -4752,7 +4752,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -4821,7 +4821,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -4967,7 +4967,7 @@ class=\\"bar\\">", "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -5112,7 +5112,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -5181,7 +5181,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -5250,7 +5250,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -5319,7 +5319,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -5388,7 +5388,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -5457,7 +5457,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -5526,7 +5526,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -5595,7 +5595,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -5664,7 +5664,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -5774,7 +5774,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -5884,7 +5884,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -5994,7 +5994,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -6104,7 +6104,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -6214,7 +6214,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -6324,7 +6324,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -6434,7 +6434,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -6544,7 +6544,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -6638,7 +6638,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -6748,7 +6748,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -6817,7 +6817,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -6929,7 +6929,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -7118,7 +7118,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -7169,7 +7169,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -7256,7 +7256,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -7508,7 +7508,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], @@ -7583,7 +7583,7 @@ Object { "ns": 0, "props": Array [], "tag": "template", - "tagType": 3, + "tagType": 0, "type": 1, }, ], diff --git a/packages/compiler-core/__tests__/parse.spec.ts b/packages/compiler-core/__tests__/parse.spec.ts index 53263f8d..b21288d9 100644 --- a/packages/compiler-core/__tests__/parse.spec.ts +++ b/packages/compiler-core/__tests__/parse.spec.ts @@ -526,7 +526,6 @@ describe('compiler: parse', () => { tagType: ElementTypes.ELEMENT, codegenNode: undefined, props: [], - isSelfClosing: false, children: [], loc: { @@ -583,6 +582,24 @@ describe('compiler: parse', () => { }) }) + 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' diff --git a/packages/compiler-core/src/parse.ts b/packages/compiler-core/src/parse.ts index 9b2425c0..e593979f 100644 --- a/packages/compiler-core/src/parse.ts +++ b/packages/compiler-core/src/parse.ts @@ -1,5 +1,5 @@ import { ParserOptions } from './options' -import { NO, isArray } from '@vue/shared' +import { NO, isArray, makeMap } from '@vue/shared' import { ErrorCodes, createCompilerError, defaultOnError } from './errors' import { assert, @@ -397,6 +397,10 @@ const enum TagType { End } +const isSpecialTemplateDirective = /*#__PURE__*/ makeMap( + `if,else,else-if,for,slot` +) + /** * Parse a tag (E.g. `
`) with that type (start tag or end tag). */ @@ -467,7 +471,14 @@ function parseTag( if (tag === 'slot') { tagType = ElementTypes.SLOT - } else if (tag === 'template') { + } else if ( + tag === 'template' && + props.some(p => { + return ( + p.type === NodeTypes.DIRECTIVE && isSpecialTemplateDirective(p.name) + ) + }) + ) { tagType = ElementTypes.TEMPLATE } } diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts index 65963da2..a9203d8f 100644 --- a/packages/compiler-core/src/transforms/transformElement.ts +++ b/packages/compiler-core/src/transforms/transformElement.ts @@ -33,7 +33,6 @@ import { } from '../runtimeHelpers' import { getInnerRange, - isVSlot, toValidAssetId, findProp, isCoreComponent @@ -48,12 +47,11 @@ const directiveImportMap = new WeakMap() // generate a JavaScript AST for this element's codegen export const transformElement: NodeTransform = (node, context) => { if ( - node.type !== NodeTypes.ELEMENT || - // handled by transformSlotOutlet - node.tagType === ElementTypes.SLOT || - //