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.

[ignatiusmb]

This can probably be done in src/hooks with a couple of modifications

[frederikhors]

This can probably be done in src/hooks with a couple of modifications

Can you explain how? This is EXTREMELY IMPORTANT.

[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.

[FaustTobias]

This feature would be greatly appreciated!

At my company, we are currently using sapper's client.js to preload all components that are required to display the current page before actually hydrating it on the client-side. This is due the fact that we had to start code-splitting content components because the output bundle became too large.

The data for every page comes from a headless cms. We collect every required component on the server-side using the component's preload function and return the result as an array of strings (e.g. component ids). On the client-side we read this array from the preloaded sapper data (sapper stores its preloaded data in a global variable) and load all required components into a client side component cache. This needs to happen before sapper starts, since the components have to be fully loaded at hydration time.

I haven't found a way to do something similar with sveltekit yet.

[svenjacobs]

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.

@frederikhors Have you found a solution? I have the exact same use case. I want to initialize urql only once, at a central place.

[Hai-San]

Today I'm having the same problem to apply a .scss file globally to reset the css. It would be very important to have a way to apply styles and scripts globally.