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

fix(compiler-core): handle template root and template v-if as stable fragments

Browse Source
This commit is contained in:
Evan You
2019-12-12 20:46:20 -05:00
parent f77ae132e5
commit 8ffd79c754
18 changed files with 106 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,7 @@ return function render() {
return (_openBlock(), _createBlock(\\"div\\", null, [
_createVNode(\\"span\\", null, _toString(value + index), 1 /* TEXT */)
]))
}), 128 /* UNKEYED_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */))
}
}"
@@ -42,7 +42,7 @@ return function render() {
return (openBlock(), createBlock(\\"div\\", null, [
createVNode(\\"span\\", null, toString(value + index), 1 /* TEXT */)
]))
}), 128 /* UNKEYED_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */))
}"
`;
@@ -64,7 +64,7 @@ export default function render() {
return (openBlock(), createBlock(\\"div\\", null, [
createVNode(\\"span\\", null, toString(value + index), 1 /* TEXT */)
]))
}), 128 /* UNKEYED_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */))
}"
`;

5
packages/compiler-core/__tests__/transform.spec.ts
View File

@@ -21,6 +21,8 @@ import { transformFor } from '../src/transforms/vFor'
import { transformElement } from '../src/transforms/transformElement'
import { transformSlotOutlet } from '../src/transforms/transformSlotOutlet'
import { transformText } from '../src/transforms/transformText'
import { genFlagText } from './testUtils'
import { PatchFlags } from '@vue/shared'
describe('compiler: transform', () => {
test('context state', () => {
@@ -352,7 +354,8 @@ describe('compiler: transform', () => {
[
{ type: NodeTypes.ELEMENT, tag: `div` },
{ type: NodeTypes.ELEMENT, tag: `div` }
]
],
genFlagText(PatchFlags.STABLE_FRAGMENT)
])
)
})

6
packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
View File

@@ -235,7 +235,7 @@ return function render() {
return (_openBlock(), _createBlock(\\"p\\", null, [
_createVNode(\\"span\\", null, _toString(o + 'foo'), 1 /* TEXT */)
]))
}), 128 /* UNKEYED_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
]))
}
}"
@@ -270,7 +270,7 @@ return function render() {
return (_openBlock(), _createBlock(\\"p\\", null, [
_createVNode(\\"span\\", null, _toString(o), 1 /* TEXT */)
]))
}), 128 /* UNKEYED_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
]))
}
}"
@@ -362,7 +362,7 @@ return function render() {
return (_openBlock(), _createBlock(\\"div\\", _hoisted_1, [
_hoisted_2
]))
}), 128 /* UNKEYED_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
]))
}
}"

6
packages/compiler-core/__tests__/transforms/__snapshots__/transformText.spec.ts.snap
View File

@@ -23,7 +23,7 @@ return function render() {
_createVNode(\\"div\\"),
_createTextVNode(_toString(foo) + \\" bar \\" + _toString(baz), 1 /* TEXT */),
_createVNode(\\"div\\")
]))
], 64 /* STABLE_FRAGMENT */))
}
}"
`;
@@ -41,7 +41,7 @@ return function render() {
_createVNode(\\"div\\"),
_createTextVNode(\\"hello\\"),
_createVNode(\\"div\\")
]))
], 64 /* STABLE_FRAGMENT */))
}
}"
`;
@@ -69,7 +69,7 @@ return function render() {
_createVNode(\\"div\\"),
_createTextVNode(\\"hello\\"),
_createVNode(\\"div\\")
]))
], 64 /* STABLE_FRAGMENT */))
}
}"
`;

28
packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
View File

@@ -9,7 +9,7 @@ return function render() {
return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(\\"span\\"))
}), 128 /* UNKEYED_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
`;
@@ -25,8 +25,8 @@ return function render() {
return (_openBlock(), _createBlock(_Fragment, { key: item }, [
\\"hello\\",
_createVNode(\\"span\\")
]))
}), 64 /* KEYED_FRAGMENT */))
], 64 /* STABLE_FRAGMENT */))
}), 128 /* KEYED_FRAGMENT */))
}
}"
`;
@@ -40,7 +40,7 @@ return function render() {
return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(\\"span\\", { key: item }))
}), 64 /* KEYED_FRAGMENT */))
}), 128 /* KEYED_FRAGMENT */))
}
}"
`;
@@ -54,7 +54,7 @@ return function render() {
return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (item, __, index) => {
return (_openBlock(), _createBlock(\\"span\\"))
}), 128 /* UNKEYED_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
`;
@@ -68,7 +68,7 @@ return function render() {
return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (_, __, index) => {
return (_openBlock(), _createBlock(\\"span\\"))
}), 128 /* UNKEYED_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
`;
@@ -82,7 +82,7 @@ return function render() {
return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (_, key, index) => {
return (_openBlock(), _createBlock(\\"span\\"))
}), 128 /* UNKEYED_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
`;
@@ -98,8 +98,8 @@ return function render() {
return (_openBlock(), _createBlock(_Fragment, null, [
\\"hello\\",
_createVNode(\\"span\\")
]))
}), 128 /* UNKEYED_FRAGMENT */))
], 64 /* STABLE_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
`;
@@ -113,7 +113,7 @@ return function render() {
return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (item) => {
return _renderSlot($slots, \\"default\\")
}), 128 /* UNKEYED_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
`;
@@ -127,7 +127,7 @@ return function render() {
return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (item) => {
return _renderSlot($slots, \\"default\\")
}), 128 /* UNKEYED_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
`;
@@ -145,7 +145,7 @@ return function render() {
return (_openBlock(), _withDirectives(_createBlock(\\"div\\", null, null, 32 /* NEED_PATCH */), [
[_directive_foo]
]))
}), 128 /* UNKEYED_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
`;
@@ -160,7 +160,7 @@ return function render() {
return (_openBlock(), ok
? _createBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
return (_openBlock(), _createBlock(\\"div\\"))
}), 128 /* UNKEYED_FRAGMENT */)
}), 256 /* UNKEYED_FRAGMENT */)
: _createCommentVNode(\\"v-if\\", true))
}
}"
@@ -175,7 +175,7 @@ return function render() {
return (_openBlock(false), _createBlock(_Fragment, null, _renderList(items, (item, key, index) => {
return (_openBlock(), _createBlock(\\"span\\"))
}), 128 /* UNKEYED_FRAGMENT */))
}), 256 /* UNKEYED_FRAGMENT */))
}
}"
`;

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

@@ -11,7 +11,7 @@ return function render() {
[_ctx.one]: ({ foo }) => [toString(foo), toString(_ctx.bar)],
[_ctx.two]: ({ bar }) => [toString(_ctx.foo), toString(bar)],
_compiled: true
}, 256 /* DYNAMIC_SLOTS */))
}, 512 /* DYNAMIC_SLOTS */))
}"
`;
@@ -59,7 +59,7 @@ return function render() {
fn: () => [toString(name)]
}
})
]), 256 /* DYNAMIC_SLOTS */))
]), 512 /* DYNAMIC_SLOTS */))
}"
`;
@@ -77,7 +77,7 @@ return function render() {
fn: (props) => [toString(props)]
}
: undefined
]), 256 /* DYNAMIC_SLOTS */))
]), 512 /* DYNAMIC_SLOTS */))
}"
`;
@@ -105,7 +105,7 @@ return function render() {
name: \\"one\\",
fn: () => [\\"baz\\"]
}
]), 256 /* DYNAMIC_SLOTS */))
]), 512 /* DYNAMIC_SLOTS */))
}
}"
`;
@@ -126,7 +126,7 @@ return function render() {
fn: () => [\\"hello\\"]
}
: undefined
]), 256 /* DYNAMIC_SLOTS */))
]), 512 /* DYNAMIC_SLOTS */))
}
}"
`;
@@ -159,7 +159,7 @@ return function render() {
createVNode(_component_Inner, null, {
default: ({ bar }) => [toString(foo), toString(bar), toString(_ctx.baz)],
_compiled: true
}, 256 /* DYNAMIC_SLOTS */),
}, 512 /* DYNAMIC_SLOTS */),
\\" \\",
toString(foo),
toString(_ctx.bar),

8
packages/compiler-core/__tests__/transforms/vFor.spec.ts
View File

@@ -25,7 +25,7 @@ import {
RENDER_SLOT,
WITH_DIRECTIVES
} from '../../src/runtimeHelpers'
import { PatchFlags } from '@vue/runtime-dom'
import { PatchFlags } from '@vue/shared'
import { createObjectMatcher, genFlagText } from '../testUtils'
function parseWithForTransform(
@@ -704,7 +704,8 @@ describe('compiler: v-for', () => {
[
{ type: NodeTypes.TEXT, content: `hello` },
{ type: NodeTypes.ELEMENT, tag: `span` }
]
],
genFlagText(PatchFlags.STABLE_FRAGMENT)
]
})
expect(generate(root).code).toMatchSnapshot()
@@ -784,7 +785,8 @@ describe('compiler: v-for', () => {
[
{ type: NodeTypes.TEXT, content: `hello` },
{ type: NodeTypes.ELEMENT, tag: `span` }
]
],
genFlagText(PatchFlags.STABLE_FRAGMENT)
]
})
expect(generate(root).code).toMatchSnapshot()

4
packages/compiler-core/src/transform.ts
View File

@@ -290,8 +290,8 @@ function finalizeRoot(root: RootNode, context: TransformContext) {
helper(FRAGMENT),
`null`,
root.children,
`${PatchFlags.UNKEYED_FRAGMENT} /* ${
PatchFlagNames[PatchFlags.UNKEYED_FRAGMENT]
`${PatchFlags.STABLE_FRAGMENT} /* ${
PatchFlagNames[PatchFlags.STABLE_FRAGMENT]
} */`
]),
context

5
packages/compiler-core/src/transforms/vFor.ts
View File

@@ -146,7 +146,10 @@ export const transformFor = createStructuralDirectiveTransform(
createCallExpression(helper(CREATE_BLOCK), [
helper(FRAGMENT),
keyProperty ? createObjectExpression([keyProperty]) : `null`,
node.children
node.children,
`${PatchFlags.STABLE_FRAGMENT} /* ${
PatchFlagNames[PatchFlags.STABLE_FRAGMENT]
} */`
]),
context
)