From 1adadd0f3f9cbffe547f41447390030fe78d7f80 Mon Sep 17 00:00:00 2001 From: Richard Browning Date: Tue, 13 Jul 2021 11:41:33 -0400 Subject: [PATCH 1/3] Fix #1868, slots now work inside a div --- .../create-instance/create-component-stubs.js | 12 +++--------- .../component-with-v-slot-syntax-nested.vue | 19 +++++++++++++++++++ test/specs/shallow-mount.spec.js | 16 ++++++++++++++++ 3 files changed, 38 insertions(+), 9 deletions(-) create mode 100644 test/resources/components/component-with-v-slot-syntax-nested.vue diff --git a/packages/create-instance/create-component-stubs.js b/packages/create-instance/create-component-stubs.js index 7185ab648..490b8d38b 100644 --- a/packages/create-instance/create-component-stubs.js +++ b/packages/create-instance/create-component-stubs.js @@ -77,15 +77,8 @@ function getScopedSlotRenderFunctions(ctx: any): Array { // In Vue 2.6+ a new v-slot syntax was introduced // scopedSlots are now saved in parent._vnode.data.scopedSlots // We filter out _normalized, $stable and $key keys - if ( - ctx && - ctx.$options && - ctx.$options.parent && - ctx.$options.parent._vnode && - ctx.$options.parent._vnode.data && - ctx.$options.parent._vnode.data.scopedSlots - ) { - const slotKeys: Array = ctx.$options.parent._vnode.data.scopedSlots + if (ctx && ctx.$vnode && ctx.$vnode.data && ctx.$vnode.data.scopedSlots) { + const slotKeys: Array = ctx.$vnode.data.scopedSlots return keys(slotKeys).filter( x => x !== '_normalized' && x !== '$stable' && x !== '$key' ) @@ -94,6 +87,7 @@ function getScopedSlotRenderFunctions(ctx: any): Array { return [] } + export function createStubFromComponent( originalComponent: Component, name: string, diff --git a/test/resources/components/component-with-v-slot-syntax-nested.vue b/test/resources/components/component-with-v-slot-syntax-nested.vue new file mode 100644 index 000000000..a6f22a1bd --- /dev/null +++ b/test/resources/components/component-with-v-slot-syntax-nested.vue @@ -0,0 +1,19 @@ + + + diff --git a/test/specs/shallow-mount.spec.js b/test/specs/shallow-mount.spec.js index 4e5ce3ffe..1b00ebe7d 100644 --- a/test/specs/shallow-mount.spec.js +++ b/test/specs/shallow-mount.spec.js @@ -9,6 +9,8 @@ import ComponentWithLifecycleHooks from '~resources/components/component-with-li import ComponentWithoutName from '~resources/components/component-without-name.vue' import ComponentAsAClassWithChild from '~resources/components/component-as-a-class-with-child.vue' import ComponentWithVSlotSyntax from '~resources/components/component-with-v-slot-syntax.vue' +import ComponentWithVSlotSyntaxNested from '~resources/components/component-with-v-slot-syntax-nested.vue' +import ComponentWithVSlot from '~resources/components/component-with-v-slot.vue' import ComponentWithVSlot from '~resources/components/component-with-v-slot.vue' import RecursiveComponent from '~resources/components/recursive-component.vue' import { vueVersion } from '~resources/utils' @@ -128,6 +130,20 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { ) }) + it('renders SFC with named slots with v-slot syntax nested in a div', () => { + const wrapper = shallowMount(ComponentWithVSlotSyntaxNested) + + expect(wrapper.find(ComponentWithVSlot).exists()).toEqual(true) + expect(wrapper.find('.new-example').exists()).toEqual(true) + expect(wrapper.html()).toEqual( + '
\n' + + ' \n' + + '

new slot syntax

\n' + + ' \n' + + '
' + ) + }) + it('renders SFC with named slots with v-slot syntax', () => { const wrapper = shallowMount(ComponentWithVSlotSyntax) From aa2422f1ba3ef010ba1229703051db77e33e2df6 Mon Sep 17 00:00:00 2001 From: Richard Browning Date: Tue, 13 Jul 2021 11:44:32 -0400 Subject: [PATCH 2/3] Update create-component-stubs.js --- packages/create-instance/create-component-stubs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-instance/create-component-stubs.js b/packages/create-instance/create-component-stubs.js index 490b8d38b..5a4fac1f1 100644 --- a/packages/create-instance/create-component-stubs.js +++ b/packages/create-instance/create-component-stubs.js @@ -125,7 +125,7 @@ export function createStubFromComponent( ? context.children : this.$options._renderChildren || getScopedSlotRenderFunctions(this).map(x => - this.$options.parent._vnode.data.scopedSlots[x]({}) + this.$vnode.data.scopedSlots[x]({}) ) ) } From 1babde048413498369458963491a0b96a46ab10b Mon Sep 17 00:00:00 2001 From: Richard Browning Date: Wed, 28 Jul 2021 09:53:23 -0400 Subject: [PATCH 3/3] fixing lint errors, still have flow error locally. --- packages/create-instance/create-component-stubs.js | 1 - test/specs/shallow-mount.spec.js | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/create-instance/create-component-stubs.js b/packages/create-instance/create-component-stubs.js index 5a4fac1f1..f2153ff3d 100644 --- a/packages/create-instance/create-component-stubs.js +++ b/packages/create-instance/create-component-stubs.js @@ -87,7 +87,6 @@ function getScopedSlotRenderFunctions(ctx: any): Array { return [] } - export function createStubFromComponent( originalComponent: Component, name: string, diff --git a/test/specs/shallow-mount.spec.js b/test/specs/shallow-mount.spec.js index 1b00ebe7d..63b7a3f00 100644 --- a/test/specs/shallow-mount.spec.js +++ b/test/specs/shallow-mount.spec.js @@ -11,7 +11,6 @@ import ComponentAsAClassWithChild from '~resources/components/component-as-a-cla import ComponentWithVSlotSyntax from '~resources/components/component-with-v-slot-syntax.vue' import ComponentWithVSlotSyntaxNested from '~resources/components/component-with-v-slot-syntax-nested.vue' import ComponentWithVSlot from '~resources/components/component-with-v-slot.vue' -import ComponentWithVSlot from '~resources/components/component-with-v-slot.vue' import RecursiveComponent from '~resources/components/recursive-component.vue' import { vueVersion } from '~resources/utils' import { describeRunIf, itDoNotRunIf } from 'conditional-specs'