# Svelte Custom Element on Astro

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](https://svelte.dev/docs/svelte/custom-elements) at https://stackblitz.com/edit/svelte-ce-on-astro-demo?file=README.md.


## And here is the gist

- Svelte allow you to compile its component to a custom element (aka Web Component)
  - https://svelte.dev/docs/svelte/custom-elements
- Astro doesn't have a guide on how to do this but I figured out how to and thus the sharing
  - https://stackblitz.com/edit/svelte-ce-on-astro-demo?file=README.md

## Tour of the main code

### The component
```svelte
<!-- 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>
```

### Good old Astro client island from a Svelte component

```astro
---
// 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>
```

### Mixed usage that lets you think it just works

```astro
---
// 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>
```

### Standalone usage reveals the extra import required

```astro
---
// 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/._

#### But why client side `<script>` is required here?

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 `defer`ed.


### with AlpineJS

This usage is why I was interested in utilizing Svelte's custom element compiling in the first place.

```astro
---
// pages/with-alpine.astro

import Layout from '../layouts/Layout.astro';
---

<Layout>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/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>

```
### Svelte config (via astro.config.mjs)

```mjs
// 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.