Built-in support for importing client-only components in Kit

[danawoodman]

Overview and Rationale

I'd like to propose that SvelteKit gain an idiomatic method for importing client-only Svelte code that would normally fail to SSR, thus requiring a dynamic import, <slot client> which would automatically import a +page.client.svelte file when onMount is fired:

In my own case, we have a few large Svelte applications that depend heavily on libraries that access global browser variables that fail when SSRing, but we would like to migrate these to SvelteKit. A lot of these dependencies would be very difficult for us to replace/modify to work with SSR.

Current Workarounds

As far as I am aware, the current recommended approach to import client-only code/components is to use a dynamic import with something like await, like this:

Now, this works well as a general solution, but I think there is a story for situations where client-only content may be more common in an application to warrant an official/idiomatic approach to importing components.

I've made a wrapper component that does this in a (slightly) cleaner way, but I'm no where near happy with it:

Proposal

I propose that a <slot client /> (or similar, I'm not tied to the syntax too much) be added that can be used in a +layout.svelte or +page.svelte file that would, if used, automatically import an adjacent +layout.client.svelte or +page.client.svelte component respectively.

If you wanted to show a loading indicator (that is SSRed) and you want to display an import error, you can use the expanded syntax:

In essence, if a <slot client /> was found, it would do the dynamic import of the client module onMount like the solutions above, but will give users a canonical, simple method to achieve this.

I think <slot client> may make sense because in reality you're asking to load a client component into this slot. A slot also gives you the ability to have a loading state and to let:bind the error value if the import fails for some reason.

It could even be extended to allow passing a source like this, which would be passed as an arugment to the dynamic import:

Now, using <slot client> is just my proposal, but if it was a special component like <svelte:client> or a template tag would be fine too.

Anyways, I'm curious what everyone things of adding something like this to Kit, thanks for reading!

[david-plugge]

I don't think a special tag would be any better than an await block. You wouldn't get path and type intellisense without modifying language server.
Furthermore the different states can be represented very easily with an await block. Binding to the error or loading or any state on the slot tag really doesn't feel very natural to me.

[danawoodman]

I'm assuming that Kit could possibly do away with the need to have an error state if the component is pre-bundled somehow (just a guess), in which case you could probably get away with just doing this anytime you want to import a client module:

<slot client />

Couple this with a convention of using +page.client.svelte you eliminate almost all boilerplate to support such scenarios. To me that is quite a lot more elegant than even the simplest current alternative which is:

{# await import('./Client.svelte') then component}
  <svelte:component this={component} />
{/await}

Since <slot>s naturally allow for a placeholder via:

<slot>  ...placeholder... </slot>

... it feels a natural solution to scenarios where you'd want an SSRed placeholder. That said, it's probably not needed in most cases tho, and you could get away with just doing <slot client>

To me, SvelteKit embracing apps that have client-heavy, non-SSRable dependencies would be a nice escape hatch compared to current solutions.

[danawoodman]

for those interested in this @paoloricciuti just released https://github.com/paoloricciuti/svelte-client-components which does this but even better than my proposed design, check it out