Allow import resources during the load() function

[Tal500]

Describe the problem

When the user want to load 3rd party or local resource in the HTML, outside of the Svelte auto-generated eco-system, he must use some hack. (hacks will be described in the alternative section)

When I say "resources" here I mean:

• stylesheets
• modules
• module-preload
• script
• script-preload
• ... and every thing else that can be described in <link> or <script> in the meaning of "resource" that can be "loaded" in some sense (i.e. meta tags aren't included, since they aren't loaded, so they can be just injected in <svelte:head>).

A great example for the dynamic resource loading is translation (I know, it's planned to be implemented by kit anyways, but this is only an example). There is a resource for every locale, and during the load() function the right locale should be chosen and be loaded.

In general, the problem starts when you know you should preload some resource, but you can't tell what it is at the build time, and it's related to some dynamic parameters.

Describe the proposed solution

In a similar way to the use depends() function in the load(), I'd be happy to see a function like resource(), that accepts:

• the type, i.e. script/module-preload/stylesheet/...
• the file to be loaded

In SSR:
This will inject the script/link tag in the head/before-body-end, and also add the HTTP Link header to the response.

On client navigation:
Load the resource in someway(injecting an HTML tag or calling import(), depends on the type), and await for the loading promise of the resource to be resolved, before rendering the "next page".

Additional idea: The resource() function can return some promise that will be resolved when the resource were loaded (Only in the client? Or allow the resource to be optionally loaded also in SSR, in the case of ESModule).

Alternatives considered

The alternative is to manually inject the code somehow in SSR, and dynamically do the same on the client navigation, with a slightly advanced code handling (sharing code between the load function and the component initialization).

The harder issue is to detect which HTTP LINK header we need to add manually in the handle() function.

I can tell that svelte-i18n way to handle the issue of loading translation, and probably also other systems, is to call the loading of the generated translation scripts during the JS evaluation of the start script, meaning we lost the chance to load the translation scripts earlier, before JS evaluation.

Importance

nice to have

Additional Information

No response