Named layouts thingy

[rChaoz]

Describe the problem

This has been discussed a lot in the past (for example #627), but now with Svelte 5 released, I think we can take a look at this from a different angle, considering all the new Svelte 5 toys.

Describe the proposed solution

Let's consider a rather simple usecase - header that changes based on page. Most pages would want to use the same (default) header, while some can customize it. This could be achieved with snippets or with additional +page-<name>.svelte files, for example +page-appbar.svelte.

With snippets (demo)

Allow pages to export snippets:

<script>
  export const snippets = { appbar }
</script>

{#snippet appbar()} ... {/snippet}

that can then be used in layouts:

<script>
  const { children, appbar } = $props()
</script>

<aside> {@render appbar?.()} </aside>
<main> {@render children()} </main>

Pros: Code sharing between app bar and page, easy to use
Cons: Not SSR-friendly. The page needs to first render before the snippet is created, which then needs to be sent to the layout for re-rendering.

With additional files (demo)

Allow placing additional +page files that can be used in layouts:

• +page.svelte
• +page-appbar.svelte

<script>
	const { children, appbar } = $props()
</script>

<aside> {@render appbar()} </aside>
<main> {@render children()} </main>

Pros: SSR-friendly, intuitive (+page goes to children, +page-x goes to x)
Cons: Need a communication mechanism to synchronize the page and named slots, as they don't share code.

Both of these method can sort-of be achieved in user land, but neither of them is great.

With magic (not demo)

Syntactically I think this is great, but it would need a bit (more) help from the Svelte compiler to work.

<!-- +page.svelte -->
<script>
	const { data, Header, Footer } = $props()
</script>

<Header> This is a header </Header>
Main content
<Footer> This is a footer </Footer>


<!-- +layout.svelte -->
<script>
	const { children, header, footer } = $props()
</script>

<header> {@render header()} </header>
<main> {@render children()} </main>
<footer> {@render footer()} </footer>

For this to work, a div with display: contents would need to be created that would hold the header/footer content, which is rendered inside the snippet, and a virtual component with this div as its target would be passed to the page:

<script>
  import Layout from "./+layout.svelte"
  import Page from "./+page.svelte"

  const headerDiv = createDivDisplayContents()
  const footerDiv = createDivDisplayContents()
  const Header = createComponent({ target: headerDiv })
  const Footer = createComponent({ target: footerDiv })
</script>

<Layout>
  {#snippet header()}
    {@insert headerDiv}
  {/snipper}
  {#snippet footer()}
    {@insert footerDiv}
  {/snipper}
  <Page {Header} {Footer} />
</Layout>

Conclusions

This is pretty unhinged, but would it be doable?

[brunnerh]

This would be something you can do already:

// $lib/layout-slots.svelte.js
import { getContext, setContext } from 'svelte';

const key = Symbol('layout-slots');

export function initSlots() {
	const slots = $state({});
	return setContext(key, slots);
}

export function setSlots(slots) {
	const context = getContext(key);
	Object.assign(context, slots);
}

<!-- +layout.svelte -->
<script>
	import { initSlots } from '$lib/layout-slots.svelte.js';

	let { children } = $props();

	const slots = initSlots();
</script>

<!--
	run page logic first to get slot snippets,
	the page should have no output.
-->
{@render children()}

<h1>{@render slots.heading()}</h1>

{@render slots.children()}

<!-- +page.svelte -->
<script>
	import { setSlots } from '$lib/layout-slots.svelte.js';

	setSlots({ heading, children });
</script>

{#snippet heading()}
	Hello there
{/snippet}

{#snippet children()}
	Main slot content
{/snippet}

SvelteLab

[shvargon]

I liked @brunnerh idea, but I needed to modify it to make the element appear and disappear depending on the page.

Here’s an example of how I did it:

$lib/head.svelte.ts

import { getContext, setContext, type Snippet } from 'svelte';

const key = Symbol('headmenu-slot');

interface SlotContext {
  head: Snippet | undefined;
}

export function initHeadMenu() {
  const slots: SlotContext = $state({ head: undefined });
  return setContext(key, slots);
}

export function setHeadMenu(head: Snippet) {
  const context = getContext<SlotContext>(key);
  Object.assign(context, { head });
}

export function cleanHeadMenu() {
  const context = getContext<SlotContext>(key);
  Object.assign(context, { head: undefined });
}

+layout.svelte

<script>
  /** @type {{children?: import('svelte').Snippet}} */
  let { children } = $props();

  import { initHeadMenu } from "$lib/head.svelte";

  const slots = initHeadMenu();
</script>

<ul>
  <li>
    <a href="/">Home</a>
  </li>
  {#if slots.head}
      {@render slots.head()}
  {/if}
</ul>
{@render children?.()}

+page.svelte

<script lang="ts">
  import {setHeadMenu, cleanHeadMenu} from "$lib/head.svelte"
  setHeadMenu(head);

  $effect(()=>{
    return cleanHeadMenu
  })
</script>

{#snippet head()}
  <li>
    <a href="/about">Dynamic element</a>
  </li>
{/snippet}

You can check it out here: SvelteLab

[pirciualex]

I have a similar setup, but I don't use context, just class with state properties (I find it easier this way). But since I have updated from svelte 5.20.0 to 5.20.2, the snippet declared on the page is typed as () => ReturnType<import("svelte").Snippet> which causes a typescript error

[VsevolodGolovanov]

After going through the tutorial and reading some documentation, I wanted to customize my layout header in a subroute page and expected this to work the way OP shows in the "With snippets" example, but without even exporting in the page file. I was really surprised to find out that it doesn't. I mean, it's a layout - first and foremost it defines the way things, plural, are laid out. It should allow defining/customizing things.
I even registered the linter issue, believing it to be in error: sveltejs/eslint-plugin-svelte#1199

[VsevolodGolovanov]

@brunnerh's workaround results in ReferenceError: Cannot access 'layoutHeaderCenter' before initialization if the snippet uses a prop:

<script lang="ts">
	setSlots({ layoutHeaderCenter });
</script>

{#snippet layoutHeaderCenter()}
	User: {data.username}#{data.userId}
{/snippet}

data here is asynchronously loaded by the +page.server.ts.
It works if you hot update it into a previously open page, but press F5 and you'll get the error. Even though my logs show that the page's load finished executing before the error.

[paoloricciuti]

This bug was fixed in the latest version of svelte

[VsevolodGolovanov]

@paoloricciuti, the ReferenceError? I'm getting it with @sveltejs/kit@2.20.7 and svelte@5.27.2.

[paoloricciuti]

@paoloricciuti, the ReferenceError? I'm getting it with @sveltejs/kit@2.20.7 and svelte@5.27.2.

Correct, update svelte to fix it