How to use `props` with a custom component in typescript?

[Ennoriel]

Writing the following gives me an error on props:

toast(CustomToast, { props: { someProp: "⭐" } })

error:

Object literal may only specify known properties, and 'props' does not exist in type
'Partial<Pick<Toast, "id" | "icon" | "duration" | "ariaProps" | "className" | "style" | "position" | "iconTheme">>'.

I tried to extend the Toast type but it's a dead end because of the Pick modifier.

I might be missing something. 🤔

[Ennoriel]

It seems that the feature got fixed 7 months ago but wasn't released. Is it possible to have a new release?

[LeoDog896]

Till the new package is published, I've published 1.3.1 at @leodog896/svelte-french-toast.

[LeoDog896]

I also make a small change (https://github.com/LeoDog896/svelte-french-toast/commit/b68c8675b7562522509e95e55559ef9afd96ae9a) to fix style and className propagation.

[LuckyChimp]

For those of you who have the same problem as me, here is a temporary solution that I am using. The interface in CustomToast.svelte extends the Toast type with the own custom properties.

custom toast component:

<!-- CustomToast.svelte -->

<script lang="ts">
    import toast_, { type Toast as Toast_ } from 'svelte-french-toast';
    
    interface Toast extends Toast_ {
        text: string;
    }

    export let toast: Toast;
</script>

<button on:click={() => toast_.dismiss(toast.id)}>{toast.text}</button>

use custom toast:

toast(CustomToast, {
    // @ts-ignore
    text: 'This is some text'
});

@Ennoriel