Ability to have code included across multiple layouts

Is your feature request related to a problem? Please describe. Sometimes, a library or a small code snippet has to be injected globally so its available everywhere in the app. For example, here’s how PurgeIcons recommends to inject its generated code into a Vue app:

import { createApp } from 'vue'
import App from './App.vue'

import '@purge-icons/generated' // <-- This

createApp(App).mount('#app')

In Sapper, I could do something similar in the src/client.js file:

import * as sapper from '@sapper/app';

import '@purge-icons/generated'

sapper.start({
  target: document.querySelector('#app'),
 });

AFAIK, there’s no straight-forward way of doing this in SvelteKit currently.

Describe the solution you’d like Perhaps adding a file somewhere in src/ which would allow to inject global code could solve this problem.

Describe alternatives you’ve considered I believe it would also be possible to import the code in the __layout.svelte file, but this isn’t truly global, as the layout file can be overridden. Additionally, this approach feels convoluted because really, the layout file should be used for layout, not for importing global code.

How important is this feature to you? It’s pretty important to me because I’d like to start using SvelteKit with my favorite libraries and existing code snippets I have, but I can’t find a way to reliably write globally-scoped code.

[frederikhors]

Let’s say I’m using @urql/svelte and its initClient().

If I use that method both in

1. src/routes/__layout.svelte and in
2. src/routes/login/__layout.reset.svelte

it initializes my urql client two times!

Is there a workaround today?

I’m using it like this because in src/routes/__layout.svelte I redirect the user to /login if is not authenticated.

[benmccann]

I believe this was addressed by https://github.com/sveltejs/kit/pull/6174, since under the new system the root layout is always guaranteed to exist, so you can put your code there.