search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.7k stars 8.33k forks source link

Suspense should support multi-root nodes #3795

Open jods4 opened 3 years ago

jods4 commented 3 years ago

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 commented 1 year ago

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 commented 11 months ago

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 commented 5 months ago

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 commented 3 months ago

@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

https://github.com/vuejs/core/blob/80ba50d74c10bd95799a9311d1f74a02b5d9fdfb/packages/runtime-core/src/components/Suspense.ts#L830-L864

jods4 commented 3 months ago

@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.