Global state defined from a sub page load function

[mquandalle]

I have a layout that contain an optional header reading from a “global state”. It is currently implemented using a store:

<!-- routes/__layout.js -->
<script>
	import { localisation } from '$lib/stores';
</script>

{#if $localisation}<div>{$localisation}</div>{/if}

<slot />

This city is a “global state” of the app, but it can be provided from a URL slug of a subpage, like /city/paris.

<!-- routes/city/[slug].js -->
<script context="module">
	export async function load({ params }) {
		return { props: { city: params.slug } };
	}
</script>
<script>
	import { localisation } from '$lib/stores';
	export let city;

	localisation.set(city);
</script>

<h1>Content of the page inside the layout</h1>

It works on the client, but produces a flash since the SSR version doesn't contain the correct layout info.

Is it possible to have a global state that can be used in the layout and is defined from a sub page load function ?

As an alternative I also tried the context API but it didn't work either.

[mquandalle]

Just discovered that $page.stuff was recently added to the framework to solve this precise use case!

https://kit.svelte.dev/docs#loading-output-stuff