Exporting Separate Custom Elements from Svelte Components

Question

I'm trying to find out if it's possible to export each Svelte component as a separate Custom Element (with Shadow DOM) in its own js file (with imports for any child elements - i.e. dependencies aren't included in the same file). Is it even possible?

Thanks

Answer 1

I'm assuming you're using rollup and rollup-plugin-svelte

the way to do it is to use code splitting. You can define the inputs separately and that will create individual outputs. Instead of using a file name output, you would use an output dir.

example:

import svelte from 'rollup-plugin-svelte';

export default [
    {
        input: ['src/main-a.js', 'src/main-b.js'],
        output: {
            dir: 'public/module',
            format: 'es',
            sourcemap: true
        },
        plugins: [svelte()],
        experimentalCodeSplitting: true,
        experimentalDynamicImport: true
    },
];

source/reference/example: https://github.com/Rich-Harris/rollup-svelte-code-splitting