theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(compiler-core): improve template type handling

Browse Source
This commit is contained in:
Evan You 2020-01-31 17:20:52 -05:00
parent 78c4f321cd
commit 34e61197c7
4 changed files with 120 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap
View File

@ -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\\"></div></template>",
"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,
},
],

19
packages/compiler-core/__tests__/parse.spec.ts
View File

@ -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('<template v-if="ok"></template>')
const element = ast.children[0]
expect(element).toMatchObject({
type: NodeTypes.ELEMENT,
tagType: ElementTypes.TEMPLATE
})
})
test('template element without directives', () => {
const ast = baseParse('<template></template>')
const element = ast.children[0]
expect(element).toMatchObject({
type: NodeTypes.ELEMENT,
tagType: ElementTypes.ELEMENT
})
})
test('native element with `isNativeTag`', () => {
const ast = baseParse('<div></div><comp></comp><Comp></Comp>', {
isNativeTag: tag => tag === 'div'

15
packages/compiler-core/src/parse.ts
View File

@ -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. `<div id=a>`) 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
}
}

12
packages/compiler-core/src/transforms/transformElement.ts
View File

@ -33,7 +33,6 @@ import {
} from '../runtimeHelpers'
import {
getInnerRange,
isVSlot,
toValidAssetId,
findProp,
isCoreComponent
@ -48,12 +47,11 @@ const directiveImportMap = new WeakMap<DirectiveNode, symbol>()
// 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 ||
// <template v-if/v-for> should have already been replaced
// <template v-slot> is handled by buildSlots
(node.tagType === ElementTypes.TEMPLATE && node.props.some(isVSlot))
!(
node.type === NodeTypes.ELEMENT &&
(node.tagType === ElementTypes.ELEMENT ||
node.tagType === ElementTypes.COMPONENT)
)
) {
return
}