CaptainCodeman
commented
2 years ago 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
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.