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

feat(compiler): generate TEXT patchFlag

Browse Source
This commit is contained in:
Evan You 2019-10-02 00:19:23 -04:00
parent 3a95a2f148
commit fe36555d9e
5 changed files with 137 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
View File

@ -5,7 +5,7 @@ exports[`compiler: integration tests function mode 1`] = `
return function render() {
with (this) {
const { createVNode: _createVNode, toString: _toString, openBlock: _openBlock, createBlock: _createBlock, Empty: _Empty, Fragment: _Fragment, renderList: _renderList } = _Vue
const { toString: _toString, openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Empty: _Empty, Fragment: _Fragment, renderList: _renderList } = _Vue
return _createVNode(\\"div\\", {
id: \\"foo\\",
@ -19,7 +19,7 @@ return function render() {
])),
_createVNode(_Fragment, null, _renderList(list, (value, index) => {
return (_openBlock(), _createBlock(\\"div\\", null, [
_createVNode(\\"span\\", null, _toString(value + index))
_createVNode(\\"span\\", null, _toString(value + index), 1 /* TEXT */)
]))
}), 128 /* UNKEYED_FRAGMENT */)
], 2 /* CLASS */)
@ -28,7 +28,7 @@ return function render() {
`;
exports[`compiler: integration tests function mode w/ prefixIdentifiers: true 1`] = `
"const { createVNode, toString, openBlock, createBlock, Empty, Fragment, renderList } = Vue
"const { toString, openBlock, createVNode, createBlock, Empty, Fragment, renderList } = Vue
return function render() {
const _ctx = this
@ -44,7 +44,7 @@ return function render() {
])),
createVNode(Fragment, null, renderList(_ctx.list, (value, index) => {
return (openBlock(), createBlock(\\"div\\", null, [
createVNode(\\"span\\", null, toString(value + index))
createVNode(\\"span\\", null, toString(value + index), 1 /* TEXT */)
]))
}), 128 /* UNKEYED_FRAGMENT */)
], 2 /* CLASS */)
@ -52,7 +52,7 @@ return function render() {
`;
exports[`compiler: integration tests module mode 1`] = `
"import { createVNode, toString, openBlock, createBlock, Empty, Fragment, renderList } from \\"vue\\"
"import { toString, openBlock, createVNode, createBlock, Empty, Fragment, renderList } from \\"vue\\"
export default function render() {
const _ctx = this
@ -68,7 +68,7 @@ export default function render() {
])),
createVNode(Fragment, null, renderList(_ctx.list, (value, index) => {
return (openBlock(), createBlock(\\"div\\", null, [
createVNode(\\"span\\", null, _toString(value + index))
createVNode(\\"span\\", null, _toString(value + index), 1 /* TEXT */)
]))
}), 128 /* UNKEYED_FRAGMENT */)
], 2 /* CLASS */)

12
packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`compiler: transform component slots dynamically named slots 1`] = `
"const { resolveComponent, createVNode, toString } = Vue
"const { toString, resolveComponent, createVNode } = Vue
return function render() {
const _ctx = this
@ -21,7 +21,7 @@ return function render() {
`;
exports[`compiler: transform component slots explicit default slot 1`] = `
"const { resolveComponent, createVNode, toString } = Vue
"const { toString, resolveComponent, createVNode } = Vue
return function render() {
const _ctx = this
@ -37,7 +37,7 @@ return function render() {
`;
exports[`compiler: transform component slots implicit default slot 1`] = `
"const { resolveComponent, createVNode } = Vue
"const { createVNode, resolveComponent } = Vue
return function render() {
const _ctx = this
@ -52,7 +52,7 @@ return function render() {
`;
exports[`compiler: transform component slots named slots 1`] = `
"const { resolveComponent, createVNode, toString } = Vue
"const { toString, resolveComponent, createVNode } = Vue
return function render() {
const _ctx = this
@ -72,12 +72,12 @@ return function render() {
`;
exports[`compiler: transform component slots nested slots scoping 1`] = `
"const { resolveComponent, createVNode, toString } = Vue
"const { toString, resolveComponent, createVNode } = Vue
return function render() {
const _ctx = this
const _component_Comp = resolveComponent(\\"Comp\\")
const _component_Inner = resolveComponent(\\"Inner\\")
const _component_Comp = resolveComponent(\\"Comp\\")
return createVNode(_component_Comp, null, {
default: ({ foo }) => [

17
packages/compiler-core/__tests__/transforms/transformElement.spec.ts
View File

@ -26,6 +26,7 @@ import { transformStyle } from '../../src/transforms/transformStyle'
import { transformBind } from '../../src/transforms/vBind'
import { PatchFlags } from '@vue/shared'
import { createObjectMatcher } from '../testUtils'
import { optimizeText } from '../../src/transforms/optimizeText'
function parseWithElementTransform(
template: string,
@ -36,7 +37,7 @@ function parseWithElementTransform(
} {
const ast = parse(template, options)
transform(ast, {
nodeTransforms: [transformElement],
nodeTransforms: [optimizeText, transformElement],
...options
})
const codegenNode = (ast.children[0] as ElementNode)
@ -562,6 +563,20 @@ describe('compiler: element transform', () => {
})
}
test('TEXT', () => {
const { node } = parseWithBind(`<div>foo</div>`)
expect(node.arguments.length).toBe(3)
const { node: node2 } = parseWithBind(`<div>{{ foo }}</div>`)
expect(node2.arguments.length).toBe(4)
expect(node2.arguments[3]).toBe(`${PatchFlags.TEXT} /* TEXT */`)
// multiple nodes, merged with optimze text
const { node: node3 } = parseWithBind(`<div>foo {{ bar }} baz</div>`)
expect(node3.arguments.length).toBe(4)
expect(node3.arguments[3]).toBe(`${PatchFlags.TEXT} /* TEXT */`)
})
test('CLASS', () => {
const { node } = parseWithBind(`<div :class="foo" />`)
expect(node.arguments.length).toBe(4)

25
packages/compiler-core/__tests__/transforms/vSlot.spec.ts
View File

@ -123,9 +123,8 @@ describe('compiler: transform component slots', () => {
one: {
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ foo }`,
isStatic: false
type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `foo` }, ` }`]
},
returns: [
{
@ -145,9 +144,8 @@ describe('compiler: transform component slots', () => {
two: {
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ bar }`,
isStatic: false
type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `bar` }, ` }`]
},
returns: [
{
@ -186,9 +184,8 @@ describe('compiler: transform component slots', () => {
'[_ctx.one]': {
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ foo }`,
isStatic: false
type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `foo` }, ` }`]
},
returns: [
{
@ -208,9 +205,8 @@ describe('compiler: transform component slots', () => {
'[_ctx.two]': {
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ bar }`,
isStatic: false
type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `bar` }, ` }`]
},
returns: [
{
@ -249,9 +245,8 @@ describe('compiler: transform component slots', () => {
default: {
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ foo }`,
isStatic: false
type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `foo` }, ` }`]
},
returns: [
{

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

@ -38,6 +38,9 @@ export const transformElement: NodeTransform = (node, context) => {
node.tagType === ElementTypes.ELEMENT ||
node.tagType === ElementTypes.COMPONENT
) {
// perform the work on exit, after all child expressions have been
// processed and merged.
return () => {
const isComponent = node.tagType === ElementTypes.COMPONENT
let hasProps = node.props.length > 0
const hasChildren = node.children.length > 0
@ -86,17 +89,21 @@ export const transformElement: NodeTransform = (node, context) => {
if (hasDynamicSlotName) {
patchFlag |= PatchFlags.DYNAMIC_SLOTS
}
} else {
if (node.children.length === 1) {
} else if (node.children.length === 1) {
const child = node.children[0]
const type = child.type
const hasDynamicTextChild =
type === NodeTypes.INTERPOLATION ||
type === NodeTypes.COMPOUND_EXPRESSION
if (hasDynamicTextChild) {
patchFlag |= PatchFlags.TEXT
}
// pass directly if the only child is one of:
// - text (plain / interpolation / expression)
// - <slot> outlet (already an array)
if (
type === NodeTypes.TEXT ||
type === NodeTypes.INTERPOLATION ||
type === NodeTypes.COMPOUND_EXPRESSION ||
hasDynamicTextChild ||
(type === NodeTypes.ELEMENT &&
(child as ElementNode).tagType === ElementTypes.SLOT)
) {
@ -108,7 +115,6 @@ export const transformElement: NodeTransform = (node, context) => {
args.push(node.children)
}
}
}
// patchFlag & dynamicPropNames
if (patchFlag !== 0) {
if (!hasChildren) {
@ -160,6 +166,7 @@ export const transformElement: NodeTransform = (node, context) => {
}
}
}
}
type PropsExpression = ObjectExpression | CallExpression | ExpressionNode