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

fix(slots): differentiate dynamic/static compiled slots

Browse Source 
fix #1557
This commit is contained in:
Evan You
2020-07-13 12:36:41 -04:00
parent ba3b3cdda9
commit 65beba98fe
7 changed files with 143 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
View File

@@ -41,7 +41,7 @@ const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
export const render = /*#__PURE__*/_withId(function render(_ctx, _cache) {
const _component_Child = _resolveComponent(\\"Child\\")
return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 1 }, [
return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 2 }, [
(_ctx.ok)
? {
name: \\"foo\\",

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

@@ -9,7 +9,7 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_component_Comp, null, {
[_ctx.one]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
[_ctx.two]: _withCtx(({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)]),
_: 1
_: 2
}, 1024 /* DYNAMIC_SLOTS */))
}"
`;
@@ -35,7 +35,7 @@ exports[`compiler: transform component slots named slot with v-for w/ prefixIden
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 1 }, [
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 }, [
_renderList(_ctx.list, (name) => {
return {
name: name,
@@ -52,7 +52,7 @@ exports[`compiler: transform component slots named slot with v-if + prefixIdenti
return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 1 }, [
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 }, [
(_ctx.ok)
? {
name: \\"one\\",
@@ -72,7 +72,7 @@ return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 1 }, [
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 }, [
ok
? {
name: \\"one\\",
@@ -101,7 +101,7 @@ return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 1 }, [
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 }, [
ok
? {
name: \\"one\\",
@@ -145,7 +145,7 @@ return function render(_ctx, _cache) {
default: _withCtx(({ foo }) => [
_createVNode(_component_Inner, null, {
default: _withCtx(({ bar }) => [_toDisplayString(foo), _toDisplayString(bar), _toDisplayString(_ctx.baz)]),
_: 1
_: 2
}, 1024 /* DYNAMIC_SLOTS */),
\\" \\",
_toDisplayString(foo),
@@ -165,8 +165,8 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createBlock(_component_Comp, null, {
[_ctx.named]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
_: 1
}))
_: 2
}, 1024 /* DYNAMIC_SLOTS */))
}"
`;

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

@@ -53,7 +53,7 @@ function parseWithSlots(template: string, options: CompilerOptions = {}) {
}
}
function createSlotMatcher(obj: Record<string, any>) {
function createSlotMatcher(obj: Record<string, any>, isDynamic = false) {
return {
type: NodeTypes.JS_OBJECT_EXPRESSION,
properties: Object.keys(obj)
@@ -70,7 +70,7 @@ function createSlotMatcher(obj: Record<string, any>) {
})
.concat({
key: { content: `_` },
value: { content: `1`, isStatic: false }
value: { content: isDynamic ? `2` : `1`, isStatic: false }
})
}
}
@@ -230,29 +230,32 @@ describe('compiler: transform component slots', () => {
{ prefixIdentifiers: true }
)
expect(slots).toMatchObject(
createSlotMatcher({
'[_ctx.named]': {
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `foo` }, ` }`]
},
returns: [
{
type: NodeTypes.INTERPOLATION,
content: {
content: `foo`
}
createSlotMatcher(
{
'[_ctx.named]': {
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `foo` }, ` }`]
},
{
type: NodeTypes.INTERPOLATION,
content: {
content: `_ctx.bar`
returns: [
{
type: NodeTypes.INTERPOLATION,
content: {
content: `foo`
}
},
{
type: NodeTypes.INTERPOLATION,
content: {
content: `_ctx.bar`
}
}
}
]
}
})
]
}
},
true
)
)
expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
})
@@ -307,50 +310,53 @@ describe('compiler: transform component slots', () => {
{ prefixIdentifiers: true }
)
expect(slots).toMatchObject(
createSlotMatcher({
'[_ctx.one]': {
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `foo` }, ` }`]
},
returns: [
{
type: NodeTypes.INTERPOLATION,
content: {
content: `foo`
}
createSlotMatcher(
{
'[_ctx.one]': {
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `foo` }, ` }`]
},
{
type: NodeTypes.INTERPOLATION,
content: {
content: `_ctx.bar`
returns: [
{
type: NodeTypes.INTERPOLATION,
content: {
content: `foo`
}
},
{
type: NodeTypes.INTERPOLATION,
content: {
content: `_ctx.bar`
}
}
}
]
]
},
'[_ctx.two]': {
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `bar` }, ` }`]
},
returns: [
{
type: NodeTypes.INTERPOLATION,
content: {
content: `_ctx.foo`
}
},
{
type: NodeTypes.INTERPOLATION,
content: {
content: `bar`
}
}
]
}
},
'[_ctx.two]': {
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `bar` }, ` }`]
},
returns: [
{
type: NodeTypes.INTERPOLATION,
content: {
content: `_ctx.foo`
}
},
{
type: NodeTypes.INTERPOLATION,
content: {
content: `bar`
}
}
]
}
})
true
)
)
expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot()
})
@@ -382,35 +388,38 @@ describe('compiler: transform component slots', () => {
type: NodeTypes.VNODE_CALL,
tag: `_component_Inner`,
props: undefined,
children: createSlotMatcher({
default: {
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `bar` }, ` }`]
},
returns: [
{
type: NodeTypes.INTERPOLATION,
content: {
content: `foo`
}
children: createSlotMatcher(
{
default: {
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `bar` }, ` }`]
},
{
type: NodeTypes.INTERPOLATION,
content: {
content: `bar`
returns: [
{
type: NodeTypes.INTERPOLATION,
content: {
content: `foo`
}
},
{
type: NodeTypes.INTERPOLATION,
content: {
content: `bar`
}
},
{
type: NodeTypes.INTERPOLATION,
content: {
content: `_ctx.baz`
}
}
},
{
type: NodeTypes.INTERPOLATION,
content: {
content: `_ctx.baz`
}
}
]
}
}),
]
}
},
true
),
// nested slot should be forced dynamic, since scope variables
// are not tracked as dependencies of the slot.
patchFlag: genFlagText(PatchFlags.DYNAMIC_SLOTS)
@@ -522,7 +531,7 @@ describe('compiler: transform component slots', () => {
callee: CREATE_SLOTS,
arguments: [
createObjectMatcher({
_: `[1]`
_: `[2]`
}),
{
type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -564,7 +573,7 @@ describe('compiler: transform component slots', () => {
callee: CREATE_SLOTS,
arguments: [
createObjectMatcher({
_: `[1]`
_: `[2]`
}),
{
type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -613,7 +622,7 @@ describe('compiler: transform component slots', () => {
callee: CREATE_SLOTS,
arguments: [
createObjectMatcher({
_: `[1]`
_: `[2]`
}),
{
type: NodeTypes.JS_ARRAY_EXPRESSION,
@@ -672,7 +681,7 @@ describe('compiler: transform component slots', () => {
callee: CREATE_SLOTS,
arguments: [
createObjectMatcher({
_: `[1]`
_: `[2]`
}),
{
type: NodeTypes.JS_ARRAY_EXPRESSION,