Feature request: specify layout per route through module export

Is your feature request related to a problem? Please describe. My progressive web app requires the following routes:

- index.svelte
- sign-up.svelte
- reset-password.svelte
- reset-email.svelte
- dashboard.svelte
- settings.svelte
- logout.svelte

This generates the following URLs that I am sadly not allowed to change due to annoying customers not wanting to clear their search history:

- /index
- /sign-up
- /reset-password
- /reset-email
- /dashboard
- /settings
- /logout

The index, sign-up, reset-password and reset-email routes share the same layout (layoutOne). The dashboard and settings routes share a completely different layout (layoutTwo) And last but not least: the logout should have no layout set at all

Describe the solution you’d like I want to override what layout a route should use by doing something like:

export const layout = 'layoutName' // Or directly pass the component.

This would do the same as having a $layout.reset.svelte file in the same folder, but only for that specific route.

Describe alternatives you’ve considered

1. Wrapping my routes in layout components. This would however lead to unnecessary re-mounts.
2. Using a single $layout component and try using the $page store and some if/else statements to change the layout based on the current path.

Option 1 works but makes page transitions and smooth animations almost impossible Option 2 is difficult due to the amount of pages I have. Writing 20+ regexes and maintaining the massive if/else statements in one layout component is not something I’m looking forward to do.

How important is this feature to you? This feature missing makes migrating to Svelte Kit impossible for my team and me.

Additional context I swear I heard Rich Harris talk about this or someone from the svelte team showing some pseudo code that looks like what I am proposing here. I couldn’t find anything in both the Sapper repository and in discord so if I missed something consider this issue never submitted.

[stephane-vanraes]

An alternative route, partially based on @acoyfellow’s approach is to leverage the ContextAPI for this:

<-- $layout.svelte -->
<script>
  import { setContext } from 'svelte';
  import { writable } from 'svelte/store';
  const layout = writable('layout1');
  setContext('setLayout', layout.set);
</script>

{#if $layout === 'layout1}....{/if}

<!-- dashboard.svelte -->
<script>
  import { getContext } from 'svelte';
  getContext('setLayout')('layout2');
</script>

The disadvantage of this is of course that you need to add some extra code to each page to set the layout, but you would have to do so anyway.

[rmunn]

Note that if the SSR works the way I think it will, when users go to /dashboard you’ll be serving up a page that shows layout 1 first, then changes itself to layout 2 once dashboard.svelte’s Javascript has been loaded. If you want to be safe, you might want to consider making layout 1 totally empty, and the other layouts contain actual HTML. That way you avoid having layout 1 flash on the page for a split second (kind of like a weird alternative version of a FOUC) before layout 2 shows up.