[Feature] Svelte

[hej-julian]

Nice Project!

Make it compatible with Svelte for the future?

[alexgipi]

This would be wonderful! If supporting Svelte is in your plans and you need help, I could take care of it @hiaaryan!
Great work, by the way! 👏👏
Cheers!

[HorizonCode]

until a proper Svelte port exists, you can use react and react-dom as a workaround. This approach already works in Svelte:

Create a SileoToast.svelte component and paste the following:

<script lang="ts">
	import { createElement } from 'react'
	import { createRoot } from 'react-dom/client'
	import type { SileoOptions } from 'sileo'

	let props: SileoOptions = $props()
	let rootEl: HTMLElement

	$effect(() => {
		const root = createRoot(rootEl)

		import('sileo').then(({ Toaster }) => {
			const sileo = createElement(Toaster, { ...props })
			root.render(sileo)
		})

		return () => root.unmount()
	})
</script>

<div bind:this={rootEl}></div>

Hopefully this helps until an official Svelte version becomes available :)

[hej-julian]

until a proper Svelte port exists, you can use react and react-dom as a workaround. This approach already works in Svelte:

Create a SileoToast.svelte component and paste the following:

<script lang="ts"> import { createElement } from 'react' import { createRoot } from 'react-dom/client' import type { SileoOptions } from 'sileo' let props: SileoOptions = $props() let rootEl: HTMLElement $effect(() => { const root = createRoot(rootEl) import('sileo').then(({ Toaster }) => { const sileo = createElement(Toaster, { ...props }) root.render(sileo) }) return () => root.unmount() }) </script>

Hopefully this helps until an official Svelte version becomes available :)

Great solution @HorizonCode, but I'm waiting for full support.