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();
</script>

{#await import('{{SVELTE_PATH}}') then { default: Component }}
	<Component {...props}/>
{/await}

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.