Skip to content

fix(slots): properly warn if slot invoked in setup #12195

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

Merged
merged 7 commits into from
May 2, 2025
Merged

fix(slots): properly warn if slot invoked in setup #12195

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e91eebe
fix: update
Oct 17, 2024
41e10dc
chore: add test case
Oct 17, 2024
d7704f8
Merge branch 'main' into fix/renderSlotWarn
yangxiuxiu1115 Oct 17, 2024
4b1b14e
test: add basic warn case
Oct 17, 2024
e8e3cdf
chore: add test case
Oct 18, 2024
af6d2f6
chore: minor tweaks
edison1105 Oct 18, 2024
1591ac6
Merge branch 'main' into fix/renderSlotWarn
edison1105 Apr 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions packages/runtime-core/__tests__/componentSlots.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,4 +324,32 @@ describe('component: slots', () => {
'Slot "default" invoked outside of the render function',
).not.toHaveBeenWarned()
})

test('should not warn when render in setup', () => {
const container = {
setup(_: any, { slots }: any) {
return function () {
return slots.default && slots.default()
}
},
}

const comp = h(container, null, {
default() {
return () => h('div')
},
})

const App = {
setup() {
render(h(comp), nodeOps.createElement('div'))
return () => null
},
}

createApp(App).mount(nodeOps.createElement('div'))
expect(
'Slot "default" invoked outside of the render function',
).not.toHaveBeenWarned()
})
})
9 changes: 5 additions & 4 deletions packages/runtime-core/src/componentSlots.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
ShapeFlags,
SlotFlags,
def,
hasOwn,
isArray,
isFunction,
} from '@vue/shared'
Expand Down Expand Up @@ -87,17 +88,18 @@ const normalizeSlotValue = (value: unknown): VNode[] =>
const normalizeSlot = (
key: string,
rawSlot: Function,
ctx: ComponentInternalInstance | null | undefined,
rawSlots: RawSlots,
): Slot => {
if ((rawSlot as any)._n) {
// already normalized - #5353
return rawSlot as Slot
}
const ctx = rawSlots._ctx
const normalized = withCtx((...args: any[]) => {
if (
__DEV__ &&
currentInstance &&
(!ctx || ctx.root === currentInstance.root)
(!hasOwn(rawSlots, '_ctx') || (ctx && ctx.root === currentInstance.root))
Copy link
Member

Choose a reason for hiding this comment

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

The condition will cause the following warning to never trigger. Removing the condition || (ctx && ctx.root === currentInstance.root) will also prevent the warning from triggering in

core/packages/runtime-core/__tests__/componentSlots.spec.ts

Line 324 in 41e10dc

'Slot "default" invoked outside of the render function',
. I think a test case needs to be added to verify the warning will trigger.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't see anything wrong with it .
added a basic warn case

Copy link
Member

Choose a reason for hiding this comment

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

core/packages/runtime-core/src/vnode.ts

Line 853 in cb34b28

children = { default: children, _ctx: currentRenderingInstance }

if the slot value is a function the rawSlots always has the _ctx key.

so all test cases pass using the following conditions

if (
  __DEV__ &&
  currentInstance &&
  (ctx && ctx.root === currentInstance.root)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've added a few test cases, are they correct?

Copy link
Member

@edison1105 edison1105 Oct 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

All test cases are correct.
the proper condition should be:

if (
  __DEV__ &&
  currentInstance &&
  !(ctx === null && currentRenderingInstance) &&
  !(ctx && ctx.root !== currentInstance.root)
)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

cool!!!

) {
warn(
`Slot "${key}" invoked outside of the render function: ` +
Expand All @@ -117,12 +119,11 @@ const normalizeObjectSlots = (
slots: InternalSlots,
instance: ComponentInternalInstance,
) => {
const ctx = rawSlots._ctx
for (const key in rawSlots) {
if (isInternalKey(key)) continue
const value = rawSlots[key]
if (isFunction(value)) {
slots[key] = normalizeSlot(key, value, ctx)
slots[key] = normalizeSlot(key, value, rawSlots)
} else if (value != null) {
if (
__DEV__ &&
Expand Down