Multiple slots/snippets in the layout in svelte 5

[Gorbulev-Sergey]

Describe the problem

In svelte 4, it was not possible to use multiple slots in the layout.
Snippets have appeared in svelte 5, which should replace slots, and for myself I found such an option for several snippets in the layout. It works fine, maybe it will be useful to someone.
I wanted to ask, how valid is this?

My store file (store.ts):

import type { Snippet } from 'svelte';
import { writable, type Writable } from 'svelte/store';

export let Header: Writable<Snippet> = writable();
export let Footer: Writable<Snippet> = writable();

My +layout.svelte:

<script lang="ts">
	import { Footer, Header } from '$lib/scripts/store';
	let { children } = $props();
</script>
{@render $Header?.()}
{@render children?.()}
{@render $Footer?.()}

My +page.svelte

<script lang="ts">
	import { Header, Footer } from '$lib/scripts/store';
	$Header = header;
	$Footer = footer;
</script>

{#snippet header()}
	Header
{/snippet}

<div>Content</div>

{#snippet footer()}
	Footer
{/snippet}

Describe the proposed solution

I wanted to ask, how valid is this?

Importance

would make my life easier

[paoloricciuti]

This works but it doesn't SSR. I have a working solution to SSR them but it's a bit brittle and I need to explore possible edge case better.

[Gorbulev-Sergey]

Thanks, I got it, I'll keep it in mind.

[brunnerh]

I have an example using an SSR compatible approach over here (SvelteLab).

(CC. @paoloricciuti)

[paoloricciuti]

Yeah it's similar to my solution but this will force you to have the children as the first element...if you want to have a snippet before children it would not work unless you did the bit of a hack that I did in my solution (I will find the link later)

[brunnerh]

Not sure what you mean, don't see any such limitation.
If you mean the {@render children()} in the layout, then yes. This does not affect the output, though.
This is obviously more a workaround than a proper solution.

[paoloricciuti]

Yeah exactly....if you want something like

<nav>
    {@render snippets.links()}
</nav>
{@render children()};

I was actually kinda able to work around this with a decent API.

[brunnerh]

See the code in my example: The actual children are just another snippet, you are not limited at all.
(Well, you need one more #snippet wrapper but that's it.)

[paoloricciuti]

Oh gotcha...looks good...let me find my solution.

https://www.sveltelab.dev/etrrs32724bk8lv

Your solution is probably easier...I like it

[Leonidaz]

I created a couple of solutions that use the page store with runes instead of using getContext / setContext. The main +page.js sets $state on the returned data to override whatever +layout.js sets.

Otherwise, the first example is based on @brunnerh's great idea to use {@render children()} from props in +layout.svelte to call the +page.svelte and set the snippets there in the statified page store's property. This way you can also share other data between layout and page, I have an example of a counter in the page that can communicate with the layout.

Use the shared page store + layout render children

The second example uses an external component to load snippets and attach to the page store via the same mechanism as above. In this case there is no need to use the {@render children()} in the +layout.svelte, as all snippets are set from the imported component in the +page.js.

Share page store + imported snippets from component

[Leonidaz]

@Gorbulev-Sergey just adjusted the solutions to remove the export const prerender = true; on +layout.js, and +page.js's The template that I was using had these set. Otherwise, it was caching some of the stuff resulting in showing home page snippets on the about page. All good now.

[Gorbulev-Sergey]

And this option?

store.ts:

import type { Snippet } from 'svelte';

let Header: Snippet;
export let setHeader = (snippet: Snippet) => (Header = snippet);
export let getHeader = (): Snippet => Header;

let Footer: Snippet;
export let setFooter = (snippet: Snippet) => (Footer = snippet);
export let getFooter = (): Snippet => Footer;

+layout.svelte:

<script lang="ts">
	import { getHeader, getFooter } from '$lib/scripts/store';
	import { type Snippet } from 'svelte';

	let { children } = $props();
	let header: Snippet = $state() as Snippet;
	let footer: Snippet = $state() as Snippet;
	$effect(() => {
		header = getHeader();
		footer = getFooter();
	});
</script>

{@render header?.()}
{@render children?.()}
{@render footer?.()}

+page.svelte

<script lang="ts">
	import { setHeader, setFooter } from '$lib/scripts/store';
	setHeader(header);
	setFooter(footer);
</script>

{#snippet header()}
	Header
{/snippet}

<div>Content</div>

{#snippet footer()}
	Footer
{/snippet}

[brunnerh]

This has the usual SSR problems and only supports one layout level.

[Gorbulev-Sergey]

OK, I went to study ssr.

[Gorbulev-Sergey]

And if $effect is replaced with onMount in +layout.svelte?

[brunnerh]

Does not change anything, both only run on the client.

[coryvirok]

I was hoping to be able to simply:

+layout.svelte

<script lang="ts"
  import type { Snippet } from 'svelte'

  interface Props {
    children?: Snippet
    header?: Snippet
    footer?: Snippet
  }

  let {children, header, footer }: Props = $props()
</script>

 {@render header?.()}
 {@render children?.()}
 {@render footer?.()}

[tothambrus11]

Instead of relying on the layout, you can use an additional component and composition instead of "inheritance".

<script lang="ts">
  interface Props {
    header: import('svelte').Snippet;
    content: import('svelte').Snippet;
  }

  let { header, content }: Props = $props();
</script>

<div class="text-xl h-full flex flex-col">
  <div class="p-2 bg-blue-800">
    {@render header?.()}
  </div>
  <div class="bg-white flex-grow">
    {@render content?.()}
  </div>
</div>

Then you get full type-safety and the 'input snippets' of your layout are type-checked when authoring your pages:

<UiLayout>
  {#snippet header()} <!-- if this was missing, it would be an error -->
    My Header
  {/snippet}
  {#snippet content()}
    My Content
  {/snippet}
</UiLayout>

[tothambrus11]

It would be nice though if this was the behavior of layouts out of the box without having to define another component.

[qtnrtnd]

But with this solution, you can't have persistent components between pages in your layout, right ?