There is a demo shows you the minimal code and working example of how to set up a astro project to make use of Svelte compiles to Custom Element feature at https://stackblitz.com/edit/svelte-ce-on-astro-demo?file=README.md.
- Svelte allow you to compile its component to a custom element (aka Web Component)
- Astro doesn't have a guide on how to do this but I figured out how to and thus the sharing
<!-- SvelteCounter.svelte -->
<!-- this one file transforms into a regular svelte component and a custom element thanks to the line below -->
<svelte:options customElement={{ tag: "svelte-counter" }} />
<script>
let count = $state(0);
function handleClick() {
count += 1;
}
let { message = 'default message' } = $props();
</script>
<details open style="margin: 1rem;">
<summary>
{ message }:
</summary>
<button style="margin-left:1rem;" on:click={handleClick}>
clicks: {count}
</button>
</details>---
// pages/regular.astro
import Layout from '../layouts/Layout.astro';
import SvelteCounter from '../components/SvelteCounter.svelte';
---
<Layout>
<details open>
<!-- ... -->
<SvelteCounter client:load message="regular hydration" />
</details>
</Layout>---
// pages/mixed.astro
import Layout from '../layouts/Layout.astro';
import SvelteCounter from '../components/SvelteCounter.svelte';
---
<Layout>
<SvelteCounter client:load message="regular hydration" />
<details open>
<!-- ... -->
<svelte-counter message="as custom element" />
</details>
</Layout>---
// pages/as-web-comp.astro
import Layout from '../layouts/Layout.astro';
---
<Layout>
<script>
// unlike the case with ./mixed.astro, we will need to import this on the client side to register the custom element
import {} from '../components/SvelteCounter.svelte';
</script>
<details open>
<!-- ... -->
<svelte-counter message="as custom element">
<!-- You can also (pre) render something before the custom element is rendered like this ... -->
<span>initializing...</span>
</svelte-counter>
</details>
</Layout><span> above is not important but to demonstrate what I learned from https://blog.jim-nielsen.com/2023/html-web-components/.
Why not just import SvelteCounter from '../components/SvelteCounter.svelte'; at the top between --- and ---?
Anything in between --- and --- at the top of .astro files is processed in compiling time.
The code here will not be directly embeded into an html.
In the case of mixed.astro, it was a happy coincedence that astro processed the svelte renderer when a svelte client island is hydrated which happens to run the code of registering the custom element as well as hydraing.
If you simply import between --- and --- and not actually embed <SvelteCounter>, it is simply ignored.
Adding <script>import {} from '../components/SvelteCounter.svelte';</script> will basically do a similar thing without hydrating since there is none to hydrate but to register a CE. Also this code runs as type="module" by default as that's how Astro works which means it's automatically defered.
This usage is why I was interested in utilizing Svelte's custom element compiling in the first place.
---
// pages/with-alpine.astro
import Layout from '../layouts/Layout.astro';
---
<Layout>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script>
// unlike the case with ./mixed.astro, we will need to import this on the client side to register the custom element
import {} from '../components/SvelteCounter.svelte';
</script>
<script is:inline>
const animals = ["pig", "cow", "lion", "elephant"];
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
function randomAnimal() {
return animals[getRandomInt(animals.length)];
}
</script>
<details open>
<!-- ... -->
<div style="margin: 1rem;" x-data="{list:[randomAnimal()]}">
<button @click="list.push(randomAnimal())">click to add more</button>
<template x-for="(item, i) in list">
<svelte-counter x-bind:message="'' + (i+1) + '-' + item" />
</template>
</div>
</details>
</Layout>
// astro.config.mjs
// @ts-check
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';
// https://astro.build/config
export default defineConfig({
integrations: [
svelte({
compilerOptions: {
customElement: true, // this is the one that what should tell Svelte to compile components to CEs
},
}),
],
// this section is not necessary but could be helpful to see authored source code with the production build (it's already available at development build though)
vite: {
build: {
sourcemap: true,
},
},
});There are a bit more code you can take a look and also get to interact with the demo at https://stackblitz.com/edit/svelte-ce-on-astro-demo?file=README.md.
(not really) related links: