Sapper: Sending props from route to layout

Created on 18 Jul 2019 · 15Comments · Source: sveltejs/sapper

It would be great if I could send props to the _layout.svelte.
Scenario:
I have different pages with different headers, configurable from the backend. Those headers need to be in the _layout.svelte file because they have a transition animation. The page info is loaded inside the [slug].svelte but I need a way to communicatie the header to the layout file. I now have a workaround where I load the page in the _layout & on the page and using a store to communicate to the layout, but this is a very hacky solution (maybe someone has a better solution?).

Maybe something like this would be possible to send props to the layout file, like svelte:head (or something different):

<svelte:props name={value} />

Source

stijnvanderlaan

👍2

All 15 comments

This is more of a support question and should be asked in Discord or over at Stack Overflow.

But the recommended way to communicate with layouts from components would be using the Context API

pngwn on 18 Jul 2019

He did ask on Discord already, please don't flood everywhere with your question until you get an answer puresoul. This can be safely closed.

antony on 18 Jul 2019

😕1

I did not ask this before, sorry for the inconvenience, I will ask on Discord from now on.

stijnvanderlaan on 18 Jul 2019

The Context API is not a solution to this problem, I always get null from getContext in the _layout, because the setContext in the page is called to late & it's not being rendered when setContext is called.

stijnvanderlaan on 18 Jul 2019

Adding a bind inside the @sapper/internal/App.svelte fixes this issue, and also work with ssr, so maybe adding a layoutProp export, which gets bind to the layout, would be an idea?

But I got another idea. It would be great if you could implement your own App.svelte, like so:

import * as sapper from '@sapper/app';
import App from './App.svelte'

sapper.start({
    target: document.querySelector('#sapper'),
    app: App
});

The functionality would be the same as it is. But when you specify a app component, it will be rendered, and you are responsible to implement the layout yourself. It would fix another problem for me and gives the developer a lot of flexibility.

I hope this is something which is in line with the road sapper is heading, because it's something I will be encounter more often, if I am going to use sapper, in feature projects. I'm really pleased with sapper/svelte and I hope I'm able to use it more often in the feature. Maybe I can implement it myself and send a merge request? But I would like to know your thoughts.