diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap index e6d0e11d..2eb27e83 100644 --- a/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap +++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap @@ -113,20 +113,6 @@ return function render(_ctx, _cache) { }" `; -exports[`compiler: transform component slots named slots 1`] = ` -"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue - -return function render(_ctx, _cache) { - const _component_Comp = _resolveComponent(\\"Comp\\") - - return (_openBlock(), _createBlock(_component_Comp, null, { - one: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]), - two: _withCtx(({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)]), - _: 1 - })) -}" -`; - exports[`compiler: transform component slots named slots w/ implicit default slot 1`] = ` "const _Vue = Vue @@ -171,6 +157,32 @@ return function render(_ctx, _cache) { }" `; +exports[`compiler: transform component slots on component dynamically named slot 1`] = ` +"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue + +return function render(_ctx, _cache) { + const _component_Comp = _resolveComponent(\\"Comp\\") + + return (_openBlock(), _createBlock(_component_Comp, null, { + [_ctx.named]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]), + _: 1 + })) +}" +`; + +exports[`compiler: transform component slots on component named slot 1`] = ` +"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue + +return function render(_ctx, _cache) { + const _component_Comp = _resolveComponent(\\"Comp\\") + + return (_openBlock(), _createBlock(_component_Comp, null, { + named: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]), + _: 1 + })) +}" +`; + exports[`compiler: transform component slots on-component default slot 1`] = ` "const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue @@ -183,3 +195,17 @@ return function render(_ctx, _cache) { })) }" `; + +exports[`compiler: transform component slots template named slots 1`] = ` +"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue + +return function render(_ctx, _cache) { + const _component_Comp = _resolveComponent(\\"Comp\\") + + return (_openBlock(), _createBlock(_component_Comp, null, { + one: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]), + two: _withCtx(({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)]), + _: 1 + })) +}" +`; diff --git a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts index c6c9c832..c1cb651d 100644 --- a/packages/compiler-core/__tests__/transforms/vSlot.spec.ts +++ b/packages/compiler-core/__tests__/transforms/vSlot.spec.ts @@ -130,7 +130,40 @@ describe('compiler: transform component slots', () => { expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot() }) - test('named slots', () => { + test('on component named slot', () => { + const { root, slots } = parseWithSlots( + `{{ foo }}{{ bar }}`, + { prefixIdentifiers: true } + ) + expect(slots).toMatchObject( + createSlotMatcher({ + named: { + type: NodeTypes.JS_FUNCTION_EXPRESSION, + params: { + type: NodeTypes.COMPOUND_EXPRESSION, + children: [`{ `, { content: `foo` }, ` }`] + }, + returns: [ + { + type: NodeTypes.INTERPOLATION, + content: { + content: `foo` + } + }, + { + type: NodeTypes.INTERPOLATION, + content: { + content: `_ctx.bar` + } + } + ] + } + }) + ) + expect(generate(root, { prefixIdentifiers: true }).code).toMatchSnapshot() + }) + + test('template named slots', () => { const { root, slots } = parseWithSlots( `