Custom Templates

Plugin provided templates

By default the plugin comes with two templates:

lazy.template

<svelte:options customElement={{ tag: '{{CUSTOM_ELEMENT_TAG}}', shadow: '{{SHADOW_MODE}}' }} />

<script>
    let { ...props } = $props();
    let Component = $state(null);
    $effect(async () => {
        try {
            Component = (await import('{{SVELTE_PATH}}')).default;
        } catch (e) {
            console.error(e);
        }
    });
</script>

<Component {...props} />

eager.template

<svelte:options customElement={{ tag: '{{CUSTOM_ELEMENT_TAG}}', shadow: '{{SHADOW_MODE}}' }} />

<script>
    let { ...props } = $props();
    import Component from '{{SVELTE_PATH}}';
</script>

<Component {...props} />

Creating your own Template

If you want to use your own template follow these steps:

Create folder

For this example we will use src/template

Define templatefolder in config

vite.config.ts

export default defineConfig({
    plugins: [
        svelteAnywhere({
            templatesDir: './src/template'
        }),
    ]
});

Add your template

Copy one of the templates and adjust to your needs

src/template/dance.template

<svelte:options customElement={{ tag: '{{CUSTOM_ELEMENT_TAG}}', shadow: '{{SHADOW_MODE}}' }} />

<script>
    let { ...props } = $props();
    import Component from '{{SVELTE_PATH}}';
    console.log('Let's dance!);
</script>

<Component {...props} />

The Plugin will replace , and according to your component and annotation used.

Use your template

/src/lib/MyComponent.svelte

<!-- @custom-element my-component template="dance" -->

You can use any of the templates, either your custom ones or still the provided ones.