Export a component from a larger SvelteKit project

[micschwarz]

Describe the problem

It should be possible to export a single Component as a .js file with inlined CSS. This is super useful for building micro-frontends. With sveltes new capability to attach to a shadow-dom, single components can be exported and be used in another app by ether calling new Component(...) or by using svelte:fragment.

Currently this can only be achieved by using a separate rollup config.

Describe the proposed solution

Just another key in the config to describe which files should be exported and in which format.
Example svelte.config.js:

...
const config = {
    ...
    external: [
       {
            input: 'lib/Example.svelte',
            output: 'external/Example.js',
           format: 'iife'
       }
    ]
    ...
}
...

Alternatives considered

Use vites library mode. Currently this leads to the error "UMD and IIFE output formats are not supported for code-splitting builds."

Importance

would make my life easier

Additional Information

No response

[benmccann]

Is this related to svelte-kit package?

[micschwarz]

Probably yes. This could be integrated into svelte-kit package

[micschwarz]

But it is not the same. It's more like a separate bundle for just one single component, that could be loaded from anywhere.
In Rollup you would create a second config that just bundles one Component with inlined css. The cool thing is, that the bundle can be used in a Svelte app or in any other type of app (vanilla, vue, ....)

[Kapsonfire-DE]

This is not for svelte-kit, but for svelte. and you can do this using module output

[micschwarz]

I know you can do it with svelte. But the idea is to share component from one app with another, so it would be nice to have this capability in apps built with svelte kit

[Kapsonfire-DE]

but thats not the job for svelte kit....
svelte kit INCLUDES svelte and gives routing/server/backend and so on....

you want a svelte project with module output and include it in other apps

[micschwarz]

I want to build microfrontends. I want svelte kits routing, server and so on, with some of the components of that app shareable as a module. Thats the idea

[Kapsonfire-DE]

And still... do the components in svelte, export it as module and import it into svelte kit project or everything else you need.

SvelteKit is not for components...

[micschwarz]

These components may use some apis provided by the kit app. It would make sense to have these components in the same app in my opinion. And with this argument svelte-kit package doesnt make sense as well

[Kapsonfire-DE]

Why'd you want it to export it from you svelte kit app when it only works with your svelte kit project?

You can still call your api from svelte kit if its not made inside your svelte kit project

export variables like apiURL

[micschwarz]

The idea is to have seperate apps (gray) and seperate frontends (green). These frontends can share there own components (blue) with other frontends

[micschwarz]

These individual frontends are written with svelte kit. And the components can be updated without the need to redeploy any other app. It would be unnecessary to have another project just for those shared components

[anthonylegoas]

@micschwarz have you found a solution to do this ? I have exactly the same needs.

[micschwarz]

@anthonylegoas I did not find a solution, sorry :/
But you might want to use rollup in addition to vite, they can even share some plugins