How to use customElement: true compiler option only on a subset of components #4312
AllNamesRTaken
started this conversation in
General
Replies: 2 comments 1 reply
-
Recently SvelteKit made the vite config avaialbe in SvelteKit projects. The linked instructions for Rollup should apply to Vite with |
Beta Was this translation helpful? Give feedback.
0 replies
-
You can use dynamicCompileOptions of vite-plugin-svelte svelte.config.js function isWebComponentSvelte(code) {
const svelteOptionsIdx = code.indexOf('<svelte:options ')
if(svelteOptionsIdx < 0) {
return false
}
const tagOptionIdx = code.indexOf('tag=', svelteOptionsIdx)
const svelteOptionsEndIdx = code.indexOf('>',svelteOptionsIdx);
return tagOptionIdx > svelteOptionsIdx && tagOptionIdx < svelteOptionsEndIdx
}
export default {
vitePlugin:{
experimental: {
dynamicCompileOptions({code}) {
if(isWebComponentSvelte(code)) {
return {
customElement: true
}
}
}
}
}
} |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I am aware of the customElement: true compiler option and <svelte:options tag="my-tagname" /> tag.
The problem is that all other components start complaining that they are missing the svelte.options tag.
To workaround this people have used the tactics described here where they basically svelte compile two subsets. I would be fine with a similar approach for sveltekit but can't find any docs on how that should be configured for sveltekit and vite.
Any suggestions or insights into how to mix and match svelte web components and normal svelte components in the same project would be greatly appreciated.
//J
Beta Was this translation helpful? Give feedback.
All reactions