Compile each .svelte component file into separate webcomponent .js file

Question

How can I compile each .svelte component into separate webcomponent .js file? for example DatePicker.svelte -> DatePicker.js FileUploadArea.svelte -> FileUploadArea.js

Thank you!

Answer 1

You can create the a new vite.split.config.js & use that in the build process & in the input array of rollupOptions you can define the svelte components paths you want to export. Then build with -c vite.split.config.js flag.

import {defineConfig} from 'vite';
import {svelte} from '@svelte.js/vite-plugin-svelte';

export default defineConfig({
   build: {
      rollupOptions: {
        input: ['./src/lib/Button.svelte'],
      }
   },
   plugins: [
    svelte({
        compilerOptions: {
            customElement: true,
        },
     })
  ]
});

You can find more details on the Log Rocket Blog