Passing data from layout to other pages failed using slot props

[RenovZ]

//+layout.svelte
<script>
let lazyData = async () => {
  return "Hello SvelteKit"
}
</script>

<main>
    {#await lazyData()}
      loading........
    {:then message}
      <slot {message} />
    {/await}
</main>

// src/routes/about/+page.svelte
<script>
export let message
</script>

<h1>{message}</h1> // this is undefined, why?

While in svelte, this code is ok, in sveltekit this is not ok. Could anyone help me figure out what sveltekit have did to the route as the docs seems so simple and need more cases. BTW, sveltekit seems have changed some features in the svelte, like this slot props?

https://replit.com/@cgxxv/sveltekit-demo#src/routes/+layout.svelte

[stephane-vanraes]

The slot in SvelteKit Pages is not the same as in regular Svelte and this simply doesn't work, I do think this should be documented better though.

If you want to pass dynamic data from the layout to the child pages you can use the contextApi

// +layout.svelte
import { setContext } from 'svelte';
import { writable } from 'svelte/store';

const messages = writable('');
setContext('message-context', messages);

//+page.svelte
<script>
import { getContext } from 'svelte';
const messages = getContext('message-context');
</script>
<h1>{$message}</h1> //notice it is a store now

Now whenever the store in layout changes it will change in the child as well (note that here the opposite is also true, this is a good way to also communicate upwards from child to layout).

You can do setContext('message-context', readonly(messages)) to pass a readonly version to the context instead