Suspense should support multi-root nodes

[jods4]

What problem does this feature solve?

Vue 3 allows components to have more than one root element.

Using such components in <Suspense> warns:

[Vue warn]: <Suspense> slots expect a single root node. 

This limits the usability of <Suspense> and makes async components feel more limited, "2nd-class citizens", in Vue 3.

This is particularly annoying when using <Suspense> at the root of <router-view>. Some CSS layouts don't work with intermediate <div> wrappers (e.g. grids, unless you know about display: contents).

Note that my app seems to work fine anyway, despite the warning? If it is obsolete then maybe the warning should just be removed.

What does the proposed API look like?

No new API surface.

[ivansieder]

As far as I can tell, by now it's already possible to have multiple root nodes without any warning, so this could be closed?

[mitar]

Documentation still mentions limit to one node:

Both slots only allow for one immediate child node.

And warning is still issued as of Vue v3.3.11.

Interestingly, to it also looks like everything works?

[jods4]

3 years later, I have deployed several large apps in production that wrap multi-root components with Suspense and never had any issue.
As of writing, Vue v.3.4.27 still emits this warning.
Could the warning be removed?

BTW Suspense was a key new feature of Vue 3.0, but it's still experimental today.
On which aspects can the community provide feedback so that it can be finalised and marked stable?
There are about 30 open issues related to Suspense, the oldest is mine about error-handling #1347 from 2020.

[edison1105]

@jods4

3 years later, I have deployed several large apps in production that wrap multi-root components with Suspense and never had any issue.

It seems not to be working. see playground

core/packages/runtime-core/src/components/Suspense.ts

Lines 830 to 864 in 80ba50d

	function normalizeSuspenseSlot(s: any) {
	let block: VNode[] | null | undefined
	if (isFunction(s)) {
	const trackBlock = isBlockTreeEnabled && s._c
	if (trackBlock) {
	// disableTracking: false
	// allow block tracking for compiled slots
	// (see ./componentRenderContext.ts)
	s._d = false
	openBlock()
	}
	s = s()
	if (trackBlock) {
	s._d = true
	block = currentBlock
	closeBlock()
	}
	}
	if (isArray(s)) {
	const singleChild = filterSingleRoot(s)
	if (
	__DEV__ &&
	!singleChild &&
	s.filter(child => child !== NULL_DYNAMIC_COMPONENT).length > 0
	) {
	warn(`<Suspense> slots expect a single root node.`)
	}
	s = singleChild
	}
	s = normalizeVNode(s)
	if (block && !s.dynamicChildren) {
	s.dynamicChildren = block.filter(c => c !== s)
	}
	return s
	}

[jods4]

@edison1105 That's weird. When I look at the source code that you quote, I don't see how it could work in my projects. When the warning is displayed then s = singleChild must be falsy and nothing should show up.

Yet I see the warning in console and everything still works fine in my cases. I must somehow be lucky because your example with two custom components side-by-side clearly doesn't work, indeed.

I'm gonna be travelling for a while but when I come back I'll try to look for a fix. I would love to see Suspense moving forward.