Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix #1868 v-slots now work inside a div #1877

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

Fix #1868 v-slots now work inside a div #1877

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1adadd0
Fix #1868, slots now work inside a div
Jul 13, 2021
aa2422f
Update create-component-stubs.js
Jul 13, 2021
1babde0
fixing lint errors, still have flow error locally.
Jul 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 3 additions & 10 deletions packages/create-instance/create-component-stubs.js
View file
Open in desktop
Expand Up @@ -77,15 +77,8 @@ function getScopedSlotRenderFunctions(ctx: any): Array<string> {
// 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<string> = ctx.$options.parent._vnode.data.scopedSlots
if (ctx && ctx.$vnode && ctx.$vnode.data && ctx.$vnode.data.scopedSlots) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, sorry for the delay on this... so basically ctx.$options.parent._vnode.data.scopedSlots references the same thing as ctx.$vnode.data.scopedSlots? Do you see any potential risk/regression here?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really sorry I am only getting to this now. They main difference is we are not going to the parent for reference of the current vnode. I am unsure if there was a specific reason we were doing this?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have no idea, this part of the code base is incredibly complex.

I wonder if we can do this in a way that changes less code to reduce risk. A lot of code bases depend on shallowMount and stubs working how they currently do (which is what this code is relate dto) and I don't want to accidental break anything.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess this code change is address the fact that parent might actually be a normal DOM node and therefore not have a _vnode property. This is the case with the original bug report. Instead we are using the $vnode on the context to get access to the scopedSlots rather than relying on a parent

const slotKeys: Array<string> = ctx.$vnode.data.scopedSlots
return keys(slotKeys).filter(
x => x !== '_normalized' && x !== '$stable' && x !== '$key'
)
Expand Down Expand Up @@ -131,7 +124,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]({})
)
)
}
Expand Down
19 changes: 19 additions & 0 deletions test/resources/components/component-with-v-slot-syntax-nested.vue
View file
Open in desktop
@@ -0,0 +1,19 @@
<template>
<div>
<ComponentWithVSlot>
<template v-slot:newSyntax>
<p class="new-example">new slot syntax</p>
</template>
</ComponentWithVSlot>
</div>
</template>

<script>
import ComponentWithVSlot from './component-with-v-slot.vue'

export default {
name: 'ComponentWithVSlotSyntaxNested',

components: { ComponentWithVSlot }
}
</script>
15 changes: 15 additions & 0 deletions test/specs/shallow-mount.spec.js
View file
Open in desktop
Expand Up @@ -9,6 +9,7 @@ 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 RecursiveComponent from '~resources/components/recursive-component.vue'
import { vueVersion } from '~resources/utils'
Expand Down Expand Up @@ -128,6 +129,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(
'<div>\n' +
' <componentwithvslot-stub>\n' +
' <p class="new-example">new slot syntax</p>\n' +
' </componentwithvslot-stub>\n' +
'</div>'
)
})

it('renders SFC with named slots with v-slot syntax', () => {
const wrapper = shallowMount(ComponentWithVSlotSyntax)

Expand Down