I am making a web ponent in Vanilla JS that use a hidden select in the background and a div and ul>li in front. It became a bit plex with fetching data from an api, ect, so I transitioned to Svelte to simplify it and make it more readable.

Now I've tried for 2 days to export the ponent as an IIFE. I just can't seem to figure out how. I might be mistaken, but I thought that was one of the main features of Svelte - to make reusable ponents that can be used anywhere. Making it was the easy part, but now I want to load it and use it directly in the browser (with <script src=""></script>). I thought that should be easy?

I use Svelte 3 (3.57.0) with Vite 4 (4.2.1), and I have tried both npm create svelte to create a library project with SvelteKit and npm init vite with svelte as framework.

I've read quite a lot of the documentation for Vite and Svelte, but it feels overwhelming and I can't seem to find a configuration that works.

Does anyone know how to pile ponents to IIFEs in Svelte?

I am making a web ponent in Vanilla JS that use a hidden select in the background and a div and ul>li in front. It became a bit plex with fetching data from an api, ect, so I transitioned to Svelte to simplify it and make it more readable.

Now I've tried for 2 days to export the ponent as an IIFE. I just can't seem to figure out how. I might be mistaken, but I thought that was one of the main features of Svelte - to make reusable ponents that can be used anywhere. Making it was the easy part, but now I want to load it and use it directly in the browser (with <script src=""></script>). I thought that should be easy?

I use Svelte 3 (3.57.0) with Vite 4 (4.2.1), and I have tried both npm create svelte to create a library project with SvelteKit and npm init vite with svelte as framework.

I've read quite a lot of the documentation for Vite and Svelte, but it feels overwhelming and I can't seem to find a configuration that works.

Does anyone know how to pile ponents to IIFEs in Svelte?

• javascript
• svelte
• web-ponent
• svelte-3
• iife

• Why would you try to do that? Why not pile it as a regular module instead of polluting global scope? – brunnerh Commented Mar 24, 2023 at 12:17
• 1 I'm not super up to date on 'regular modules'. I'm primarily looking for a way to drop in / use a svelte ponent in a regular HTML document. To make the question more specific I went with IIFE's as that is what I know. Do you know about any resources for piling them into such a module? – pekaaw Commented Mar 24, 2023 at 13:31

1 Answer 1

By default, SvelteKit in library mode only pre-processes ponents so they can be used by any Svelte project. The Svelte files are then only piled to plain JS in the projects that use the ponent library.

You could add a separate Vite config to fully pile the ponents to JS files, e.g.

// vite.js.config.js
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
    build: {
        lib: {
            entry: resolve(__dirname, 'dist/index.js'),
            name: 'Components',
            fileName: 'ponents',
        },
        outDir: 'dist-js',
    },
    plugins: [
        svelte(),
    ],
});

This build operates on the output of SvelteKit which is written to dist and creates a separate JS output in dist-js.

To run Vite with a specific config you can use the -c argument:

vite -c vite.js.config.js build

This could e.g. be added as a script in package.json.

Vite in library mode automatically outputs an ES module file that requires an import and a UMD file which, when no other loaders are in scope, will define the ponents globally on an object with the name given in build.lib.name.

So in the above example, if you export Component from the index.js file, you could construct it via new Components.Component({ ... }) with the client-side API. (The API is different in Svelte 5.)