Missing guidance for components library with both Svelte Component and Web Component output

[cge-taal]

Describe the problem

Unable to find good guidance for creating a component library of both "Svelte Components" (for use in Svelte apps) and "Svelte Components packaged as Web Components" (for general use, wrapped for React projects etc) - from the same code base.

Describe the proposed solution

Please provide better guidance on how to achieve it currently, or, if not possible yet, the intended approach and roadmap for supporting it.

Alternatives considered

stenciljs.com

Importance

i cannot use SvelteKit without it

Additional Information

First-class Web Component support would set Svelte apart from the competition even further, and for some check a necessary box for full adoption.

[CaptainCodeman]

If you're using SvelteKit's package functionality, that covers the native .svelte re-use.

To create a Web Component version, you just need another vite build with the necessary config. (target the config with a different build script in package.json):

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  build:{
    lib:{
      entry: './src/lib/index.ts',
      name: 'MyLib',
    },
  },
  plugins: [svelte({
    compilerOptions:{
      customElement: true,
    }
  })]
})

The entrypoint (./src/lib/index.ts) is just re-exporting the component:

export { default as MyComponent } from './MyComponent.svelte'

And the component itself just needs to define it's tag name:

<svelte:options tag="my-component" />

I've used that to re-use a component on a tool page for a blog.

[cge-taal]

Sweet, thanks a lot @CaptainCodeman ! :)

I've seen some guidance in places like:

• https://www.colorglare.com/svelte-components-as-web-components-b400d1253504
• https://medium.com/adeo-tech/adeo-design-system-building-a-web-component-library-with-svelte-and-rollup-72d65de50163

The 2nd build script and config you suggest take care of export nicely it seems (thanks), but as mentioned in the articles, there are more complications ahead.

For example, if you have some components referencing others, the moment you include such tags

<svelte:options tag="my-component" />

...you cannot reference them as normal Svelte components anymore - essentially you lock your component to Web Component mode at that point, if I understand correctly.

There are several additional pain points (in trying to align WC vs non-WC realities) that would be nice if taken care of by the framework / compiler (such as https://stenciljs.com/ does). Things like:

• consistent event model
• supporting prop types other than string
• whether prop value updates are reflected in the html
• ...

For a start, simply supporting seamless component references would be nice. Is there really no existing way to do that yet? Maybe someone wrote a pre-processor as workaround?

Any tips are much appreciated!

[CaptainCodeman]

you cannot reference them as normal Svelte components anymore

I do both - the .svelte component can be imported as normal into a route component for example (in the SvelteKit project) and acts as a Storybook-like example page. The tag option is just ignored without the corresponding compiler config. You can't reference them as normal svelte components if they have been compiled to web-components is probably the 'nuance'. You could of course omit it and do the component registration in the entry-point file.

At some point, for the other things you're talking about, you may be better moving as much logic as you can into externally re-usable modules and then having two different adapters / wrappers to support what you need.

[cge-taal]

The tag option is just ignored without the corresponding compiler config

ahh, I did not get that from the articles. Will get down to business and see what gives. I understand one can write some adapters for a few of the points mentioned, but just wanted to check here what exists / is planned before doing so.

Thanks again :)

[cge-taal]

Hi, thanks for taking this up in the milestones. In the meantime, if there is already a known example repo that demonstrates the setup, it would be appreciated to list it here.

[CaptainCodeman]

All you need is a build step which can either use vite (as I posted above) or a regular rollup build.

[cge-taal]

Hi, just checking if there is any official movement on this?

As a reminder, the goal is to have a SvelteKit component library project that exports all of

• Svelte Components
• Web Components
• Web Components with wrappers for React

Having those options would seem very suitable for building a flexible and future-proofed design system component library with.

Currently no mention of Web Components here: https://kit.svelte.dev/docs/packaging

Kudos for all advances already made!