l10n with named templates

[floratmin]

I just found an easy way for creating a svelte kit app with localized routes. For example i want to have the following page structure:

index
de
about
de/ueber
about/latest-news
de/ueber/letzte-nachrichten

for this I create the following files:

__layout-sl.svelte Here I get the locale from the url and set it in my store
__layout-index@sl.svelte This sets up the translation store for the current locale and the content for the local root page
__layout-about@sl.svelte Same as __layout-index@sl.svelte but with translations and content for about page
__layout-about__latest_news@sl.svelte Same as __layout-index@sl.svelte but with translations and content for about/latest-news page

The non layout svelte files are all empty. So it is easy to create the files from a mapping of the file names of the layout files and the desired localized route:

const localRoutes = {
  index: {
    en: '',
    de: '',
  },
  about: {
    en: 'about',
    de: 'ueber',
  },
  'about__latest_news': {
    en: 'about/latest-news',
    de: 'ueber/letzte-nachrichten',
  },
};
const rootLocale = 'en';

Which will generate the following empty .svelte files:
index@index.svelte
de@index.svelte
about@about.svelte
de/ueber@about.svelte
about/latest-news@about__latest_news.svelte
de/ueber/letzte-nachrichten@about__latest_news.svelte

And voila I have localized routes which can be pre-rendered easily. This could be used as a starting point for integrating the localization of routes in svelte kit.