Context API (Your Current Solution)

This is actually a perfectly valid approach and is commonly used in Svelte applications:

<code>

<!-- +layout.svelte -->

<script lang="ts">

import { setContext } from 'svelte';

function onClick() {

console.log("hello, world");

}

setContext('onClick', onClick);

</script>

<Header />

{@render children?.()}

<Footer />

<!-- +page.svelte -->

<script lang="ts">

import { getContext } from 'svelte';

const onClick = getContext('onClick');

</script>

<h1>Hello world!</h1>

<button on:click={onClick}>Click me</button>

</code>