Deep `stuff` merge

Describe the problem

In the section about stuff returned by load in the docs, it is stated that:

This will be merged with any existing stuff and passed to the load functions of subsequent layout and page components.

This “merging” behavior means that if you, for example, do the following in routes/__layout.svelte:

export function load() {
    return {
        stuff: {
            prop1: 'foo',
            prop2: 'bar',
        }
    };
}

and this in route/someRoute.svelte:

export function load() {
    return {
        stuff: {
            prop2: 'something entirely different',
        }
    };
}

The resulting stuff would be:

{
    prop1: 'foo',
    prop2: 'something entirely different',
}

However, I noticed that SvelteKit only performs a “shallow” merge as opposed to a “deep” merge on stuff. This means that if your stuff has multiple levels of depth, the merging wouldn’t take place for the deeper objects. For example: routes/__layout.svelte:

export function load() {
    return {
        stuff: {
            footer: {
                show: true,
                layout: 'normal',
            }
        },
    };
}

route/someRoute.svelte:

export function load() {
    return {
        stuff: {
            footer: {
                layout: 'wide',
            }
        },
    };
}

The resulting stuff would be:

{
    footer: {
        layout: 'wide',
    }
}

What I expected was:

{
    footer: {
        show: true,
        layout: 'wide',
    }
}

Describe the proposed solution

Do a deep merge on stuff instead.

Alternatives considered

Currently, you have no choice but to keep the stuff object completely flat if you want to take advantage of the merging behavior.

Importance

would make my life easier

Additional Information

If you decide against this, I think it should at least be noted in the docs that the merging on stuff is shallow and is only performed on the first level of depth, so that users won’t assume otherwise.

[UltraCakeBakery]

Agree with @Conduitry — this absolutely belongs in userland, not in the framework:

export function load({ stuff }) {
    return {
        stuff: {
            footer: {
                ...stuff.footer,
                layout: 'wide',
            }
        },
    };
}

The people of User Land could also do delete stuff.footer before merging. We are talking about “stuff” which is added upon as it travels down the chain. To me it makes sense new stuff gets deep merged.

Besides that, svelte-kit could benefit from some more utilities. Making a deep merger function one of them isn’t such bad idea imo.

[aradalvand]

I’m +1 for documenting it, -1 for making it a deep merge.

Okay, could you elaborate a bit on why you’re against making it a deep merge? Would that be problematic? Thanks.