Method for preventing accidental shadowing of certain data in load functions

[dimfeld]

As we know, SvelteKit allows child routes to return data that will overwrite the values in that were returned by a parent layout load function. This is often useful, but sometimes can lead to certain footguns.

As a simple example:

// src/routes/+layout.server.ts
export async function load() {
  return {
    user: await getCurrentUser()
   }
}

// src/routes/users/[userId]/+page.server.ts
export async function load({ params }) {
  return {
     user: await getUserDetails(params.userId)
   }
}

Then anywhere that references page.data.user when under the users/[userId] route will be unexpectedly looking at the wrong data.

This is a simple, contrived example, but as apps grow this class of bug becomes more likely.

I'm about to write an ESLint plugin for my own project which will prevent returning certain keys from non-root layout load functions, which should be sufficient to catch the majority of these cases. But I was wondering if anyone thinks this might be a good feature to build into SvelteKit itself.

Something like this. (Don't think about the actual name of configuration key too much. I just picked something quickly to illustrate the idea)

// svelte.config.ts 
export default {
  kit: {
    protectedLoadKeys: ['user', 'organization', 'permissions']
  }
}

[brunnerh]

It might be possible to do something with the autogenerated types, but since they are generated per-page, they probably cannot easily be targeted automatically without extra tooling.

This should become less of an issue once remote functions are stable and supersede load functions.