[docs] Snippet docs doesn't mention `direct/explicit` method #14020

sacrosanctic · 2024-10-29T17:44:29Z

TLDR

https://svelte.dev/docs/svelte/snippet#Passing-snippets-to-components

Would like to add a section to explain the direct/explicit method

let { foo } = $props();

{@render foo()}

Explanation

As far as i can tell there are 3 ways, and the second one direct/explicit doesn't seem to be mentioned at all.

Currently is unclear what the various snippet options are in comparison to its counterpart {#if...} and {#each...}

direct/implcicit

// Parent.svelte
<Child>
  <h1>Title!</h1>
</Child>

// Child.svelte
<script>
  let { children } = $props();
</script>

{@render children()}

direct/explicit

// Parent.svelte
<Child>
  {#snippet foo()}
    <h1>Title!</h1>
  {/snippet}
</Child>

// Child.svelte
<script>
  let { foo } = $props();
</script>

{@render foo()}

indirect/explicit

// Parent.svelte
{#snippet foo()}
  <h1>Title!</h1>
{/snippet}

<Child {foo} />

// Child.svelte
<script>
  let { foo } = $props();
</script>

{@render foo()}

Reference

https://discord.com/channels/457912077277855764/1300850418728960000

Severity

annoyance

The text was updated successfully, but these errors were encountered:

brunnerh · 2024-10-29T17:54:36Z

As far as I can tell all of that is there.

Within the template, snippets are values just like any other. As such, they can be passed to components as props

As an authoring convenience, snippets declared directly inside a component implicitly become props on the component

Any content inside the component tags that is not a snippet declaration implicitly becomes part of the children snippet

sacrosanctic · 2024-10-29T17:57:35Z

Then I'm specifically asking about a code block example.

Secondary goal, I would like the various options to be more obvious, siting prior art like {#if...}

or export from mdn https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

benmccann added the documentation label Oct 30, 2024

sacrosanctic linked a pull request Feb 1, 2025 that will close this issue

[docs] add templating to {#snippets} #15172

Open

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Snippet docs doesn't mention `direct/explicit` method #14020

[docs] Snippet docs doesn't mention `direct/explicit` method #14020

sacrosanctic commented Oct 29, 2024 •

edited

Loading

brunnerh commented Oct 29, 2024

sacrosanctic commented Oct 29, 2024 •

edited

Loading

[docs] Snippet docs doesn't mention direct/explicit method #14020

[docs] Snippet docs doesn't mention direct/explicit method #14020

Comments

sacrosanctic commented Oct 29, 2024 • edited Loading

TLDR

Explanation

Reference

Severity

brunnerh commented Oct 29, 2024

sacrosanctic commented Oct 29, 2024 • edited Loading

[docs] Snippet docs doesn't mention `direct/explicit` method #14020

[docs] Snippet docs doesn't mention `direct/explicit` method #14020

sacrosanctic commented Oct 29, 2024 •

edited

Loading

sacrosanctic commented Oct 29, 2024 •

edited

Loading