vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.83k stars 6.96k forks source link

[Bug Report][3.3.17] Slots with only a comment do not render the default content #18308

Open simon-kolkmann opened 1 year ago

simon-kolkmann commented 1 year ago

Environment

Vuetify Version: 3.3.17 Vue Version: 3.3.4 Browsers: Firefox 117.0 OS: Linux

Steps to reproduce

Please see the reproduction link.

Expected Behavior

Adding a single comment between <v-data-table> tags should not prevent the headers and rows from rendering.

Actual Behavior

Header and rows don't render, only the footer shows up.

Reproduction Link

https://play.vuetifyjs.com/#...

KaelWD commented 1 year ago

Looks like vue already does this with template slots

https://github.com/vuejs/core/blob/ffef8228694b39638f07c0fe5bc30d826262b672/packages/runtime-core/src/helpers/renderSlot.ts#L88

https://play.vuejs.org/#eNp9Ustu2zAQ/BVal7RARAJ1gQKGaqQtcmiBJkGSIy+ytHYUiw+Qy8SBoH/PknIU2XmcJO7M7gx32GW/rOUPAbJFVvjKNRaZBwx2KXWjrHHI/j/9MfSnQSNbO6PYCReTWmw+kboQQzf10QFB2bZEiCcsJuxlMctzVhml4rg8XxbTWUQvxNibnWaDhVyVlt97o8lkJzVjcg94mS1YqsQaGYlnmd0hWr8QImi73XASE2eECRc0Ngry2qizOf/Gv/8QdeNxWufgVb5y5tGDI0WZnU6GCyo+gMsd6BocuE/FjrgHgkfYG9Go2Uvd0wKOFv1OSmwfU8eCh5vWoGf9PqchGakroz01JOznSPvy9ZPUGCsif7ku23ZVVlsixmMCVi59u47NZmkor2FdhhZZT64PA0RP4utmcxQfrck2LbhLiw2ZO4iRFM3jv1RDF2BMoLqDavtO/d7vhiSuHKTNTlLD0m0AB/j85gJ29D+CytSh3T+ZD8Br8KYN0eNA+x10TbYnvOT2b4qg0Ztbf75D0P7lUtFoSjPx0yuKeX509Ve7cz4fX0H/DM6KPsU=

I had an idea a while ago to force us to make the default rendering possible with slots: #15611

Looked something like this, plus an eslint rule enforcing no outside scope access in the fallback function.

slots.default({ foo, bar, baz }, slotProps => { ...fallback... })

This pattern would also allow comment checks everywhere without all those ugly extra function calls. It did require re-implementing the DefineComponent interface though so maybe a helper function would be better?

renderSlot(slots.default, { foo, bar, baz }, slotProps => { ...fallback... })

People have intentionally been using an empty slot to disable the default though (#17651), using Vue's ensureValidVNode would probably break that.