Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'
import typescript from '@rollup/plugin-typescript'
import svelte from 'rollup-plugin-svelte'
import { terser } from 'rollup-plugin-terser'
import sveltePreprocess from 'svelte-preprocess'
const production = !process.env.ROLLUP_WATCH
export default {
// The file we created with our web component wrapper.
input: 'web-components.ts',
output: {
sourcemap: !production,
format: 'iife',
name: 'app',
// We output it to public. This way, our svelte kit
// app will also host the web components.
file: 'public/web-components.js',
// Normal rollup svelte configuration. Nothing fancy
// happening here.
plugins: [
preprocess: sveltePreprocess({
sourceMap: !production,
postcss: true,
// We just make sure that no global CSS is injeced
// into the page that imports this script.
emitCss: false,
compilerOptions: {
dev: !production,
// customElement: true,
// Minify the production build (npm run build)
production && terser(),
Copy link

vish01 commented Apr 16, 2022

Do you have a repo where I can see how the entire folder structure looks like for using svelte components as web components? Where does this rollup.config.js file goes and how is it being used? There needs to be some setup in svelte.config that says "use this rollup as well", no?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment