sveltejs / svelte

web development for the rest of us
https://svelte.dev
MIT License
80.13k stars 4.26k forks source link

Named slot interop with snippet prop + @render #13784

Open brunnerh opened 1 month ago

brunnerh commented 1 month ago

Describe the bug

There were some interop limitations between slots & snippets which by now have been addressed for the most part, so this probably should be fixed as well, if possible.

Would obsolete #13063 since everything would be fully compatible as far as I can tell.

Reproduction

<h2>WithSnippet - Fragments</h2>
<WithSnippet>
    <svelte:fragment>
        Fragment content
    </svelte:fragment>
    <svelte:fragment slot="stuff">
        Fragment content
    </svelte:fragment>
</WithSnippet>

<h2>WithSnippet - Elements</h2>
<WithSnippet>
    <span>Element content</span>
    <span slot="stuff">
        Element content
    </span>
</WithSnippet>
<!-- WithSnippet.svelte -->
<script>
    const { stuff, children } = $props();
</script>

{#if children}
    <p>Default: {@render children()}</p>
{:else}
    <p style:color=red>Default slot snippet is undefined</p>
{/if}

{#if stuff}
    <p>Named: {@render stuff()}</p>
{:else}
    <p style:color=red>Named slot snippet is undefined</p>
{/if}

REPL

Logs

No response

System Info

REPL

Severity

blocking an upgrade

adiguba commented 1 month ago

That something I have reported here : https://github.com/sveltejs/svelte/issues/13434

But there a catch : on Svelte 4 slots use a different name-space than props, so there may be conflicts.

Example : https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo1Qy2oDMQz8FaNLLiG-b5xAST8ht7qHZFdLDX5ha0PDsv9eyw7Z0lLoydZoZiTNDKOxmKF7m8FfHEIHLzHCFugeucg3tISlzmFKPSMq98lEOmqvybgYEolTcFGMKTix2Ukudk222ReSV3JVeFW5ZMjiQcOZ36aMKcSsodqegif0xFKmN-FHkqtDpamryDZQ8al-GkSmu8WuDzakgiYcHoaavk1iTZXL6x_TyrkuDGY0OEBHacJl-0yHKf-NBz9rPBapXSwOQsMrjpfJkji3nfc_A-L1BA9b7zrO9bMUYmkWmhrMrUXAAOeiJEO_F39fvgDkSfn24gEAAA==

paoloricciuti commented 1 month ago

That something I have reported here : #13434

But there a catch : on Svelte 4 slots use a different name-space than props, so there may be conflicts.

Example : https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo1Qy2oDMQz8FaNLLiG-b5xAST8ht7qHZFdLDX5ha0PDsv9eyw7Z0lLoydZoZiTNDKOxmKF7m8FfHEIHLzHCFugeucg3tISlzmFKPSMq98lEOmqvybgYEolTcFGMKTix2Ukudk222ReSV3JVeFW5ZMjiQcOZ36aMKcSsodqegif0xFKmN-FHkqtDpamryDZQ8al-GkSmu8WuDzakgiYcHoaavk1iTZXL6x_TyrkuDGY0OEBHacJl-0yHKf-NBz9rPBapXSwOQsMrjpfJkji3nfc_A-L1BA9b7zrO9bMUYmkWmhrMrUXAAOeiJEO_F39fvgDkSfn24gEAAA==

We already bail out in the migration script if that's the case

adiguba commented 1 month ago

We already bail out in the migration script if that's the case

Yes but conflits are possible if the component was not migrated.