How can I pass $state-ful values through layout components retaining reactivity and without ownership_invalid_mutation warnings?

[kran6a]

<script lang="ts" context="module">
    //Tabbed.ts - A generic tabbed layout, not a +layout.svelte file
    //Event listeners have been omitted
    import type {Component} from "svelte";
    import type {Snippet} from "svelte";
</script>
<script lang="ts" generics="T extends {}">
    type Props = {
        tabs: {name: string, component: Component<T>}[],
        active_tab?: number,
        props: T,
        children?: Snippet<[T | undefined]>
    };
    let {tabs, active_tab: initial_active_tab = 0, props = $bindable(), children}: Props = $props();
    let active_tab = $state(initial_active_tab);
    const Component = $derived(tabs[active_tab]!.component);
</script>

<section>
    <nav>
        <ul>
            {#each tabs as tab, i}
                <li>{tab.name}</li>
            {/each}
        </ul>
    </nav>
    <footer>
        <Component {...props} {active_tab}/>
        {#if children}
            {@render children(props)}
        {/if}
    </footer>
</section>

<script lang="ts">
    //+layout.svelte or +page.svelte
    //Event listeners have been omitted
    import Tabbed from "#components/layouts/Tabbed.svelte";
    import Button from "#components/forms/Button.svelte";
    import BasicSettings from "./BasicSettings.svelte";
    import AdvancedSettings from "./AdvancedSettings.svelte";
    import PrivacySettings from "./PrivacySettings.svelte";
    import type {LayoutData} from './$types.js';
    const {data}: {data: LayoutData} = $props();
    let config = $state(data.current_config);
    const tabs = [
        {name: 'Basic Settings', component: BasicSettings},
        {name: 'Advanced Settings', component: AdvancedSettings},
        {name: 'Privacy Settings', component: AdvancedSettings},
        //...
    ];
</script>
<!--
    We use the Tabbed layout to to show the user one settings component at a time
    but we want to track all config changes in the "config" variable
    and use the same "Save Settings" button below all the settings component

    Due to the amount of loc, inlining all the settings components within this file as snippets is not an option
-->
<Tabbed {tabs} props={{data, config}}>
    <Button>Save Settings</Button> <!-- The same button is used for both tags -->
</Tabbed>

[7nik]

There are only two ways to overcome ownership_invalid_mutation:

1. Use bind: — add a contract that Component must have a bindable prop, which you always pass and bind separately.
2. Use context, but it can be inconvenient in many cases.

I'd use a completely other API shape that uses the first approach.

[edd-1701]

Reference for component binding, if anyone's like me just running into this while learning svelte and looking for a doc reference: https://svelte.dev/tutorial/svelte/component-bindings