Implement a main.ts / init.ts file for global initialization

[Gin-Quin]

Describe the problem

I am writing a library that must be initialized with some js / ts and I find out the SvelteKit architecture offers no place to properly set up initialization.

The initialization code is isomorphic and must be executed both on server and client. I tried to put the initialization in those files :

• __layout.svelte at top-level of routes,
• hooks.ts at top-level of project,

but both have their caveats.

__layout.svelte seems great but is not intended for the purpose of a global initialization. First, it can be reseted with a __layout.reset.svelte, and second it forces to use a <slot /> tag that might be unnecessary. Furthermore, any code in hooks.ts will run uninitialized because the hooks code will run independently of the layout.

hooks.ts looks like a great place but is actually not. The code will only run server-side so the client part will remain unitialized.

Describe the proposed solution

Add the possibility to create a main.ts / initialize.ts / init.ts file at the top-level of SvelteKit architecture.

The user can put whatever initialization code he needs.

Notably he can do import { browser } from '$app/env'; to adjust the code to run depending on the environment.

This initialization script should run before the hooks.ts.

Alternatives considered

The only available alternative is not really an alternative, it consists of importing the same initialization code twice : in hooks.ts and in the root __layout.svelte (and also in every nested __layout.reset.svelte).

Importance

would make my life easier

Additional Information

No response

[ignatiusmb]

Thanks for the issue, we're aware of this request and are tracking them in #1538, also related #1530 and #2169.

[Borderliner]

How does this work now? Any documentations?