Preserving event listeners when rendering with svelte/server

[Lippiece]

Hi. I'm trying to get raw HTML from a Svelte component to use with Elysia to return HTML from routes.

I see two ways:

• Define as a custom element
• Render with svelte/server

The first option works with event listeners. However, I don't understand how to pass props to the components this way.

<svelte:options
  customElement={{
    props: {
      options: { attribute: "options", reflect: true, type: "Object" },
    },
    shadow: "none",
    tag   : "props-element",
  }}
/>

<script lang="ts">
  const { options }: { options: Array<Record<"value", number>> } = $props()
</script>

<div class="flex flex-col gap-2">
  {#each options as option}
    <p>{option.value * 2}</p>
  {/each}
</div>

 `<props-element options="[{value:2},{value:5}]"></props-element>`

Uncaught SyntaxError: Expected property name or '}' in JSON at position 2 (line 1 column 3)

The second option has props attribute in the config:

const options = ["1","2"]
render(Parent, {props: {options}}).body

But doesn't preserve event listeners. It seems to completely remove on... attributes.

Update: It seems I wasn't complying with JSON.parse:

 `<props-element options='[{"value":2},{"value":5}]'></props-element>`

Seems strange to use these stringify shenanigans though.

[webJose]

JSON demands that property names be enclosed in quotation marks. There's nothing strange about it. It's in the definition of JSON itself.

[Lippiece]

Yeah, I figured that out. Strange is this roundabout conversion. Not exactly idiomatic.

[Lippiece]

With some consideration, I think there actually shouldn't be any listeners. It's XSS-prone. If you send a custom component tag from the server, you have to explicitly register it in the frontend, which seems reasonable.