Add "props" to the toast options.

[nickgraffis]

Proposal to allow props to be passed into Toast Options and then passed into Renderable Svelte Component.

TLDR;

Custom toast component:

// CustomToast.svelte
<script lang="ts">
  export let icon;
  export let span;
</script>

<div style="display: flex; align-items: center;">
  <span>{icon}</span>
  <span>{span}</span>
</div>

Using this component:

toast(Toast, {
  duration: 5000,
  position: 'bottom-right',
  props: {
    icon: '🐒 ',
    span: 'Hello, World'
  }
});

This is currently possible actually, it would look like this:

<script lang="ts">
  export let toast = {}
</script>

<div style="display: flex; align-items: center;">
  <span>{toast.icon}</span>
  <span>{toast.span}</span>
</div>

The only problem is then when you call the toast you would need to do something like this:

toast(Toast, {
  duration: 5000,
  position: 'bottom-right',
  //@ts-ignore
  icon: '🐒 ',
  //@ts-ignore
  span: 'Hello, World'
});

I think a better solution is to add props to Toast Options, see example above.

Typescript

A note here that toast(Toast) now infers the props coming from the Toast component, and then your props: { } are type safe based on the props in the Toast component.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
svelte-french-toast	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 24, 2023 5:47pm

[nickgraffis]

Just noticed that it solves #33.

A good point was brought up there that it would be very cool and important to have the props be type safe, this 3rd commit should solve that.

[Der-Penz]

This would be incredibly useful! Hopefully, can this be merged soon. I need it in my project.

[kbrgl]

Thanks for this PR! Is it backwards compatible or is it a breaking change?

Two notes:

• I think you may need to rebase on top of master.
• I'd prefer if you removed the blanket ignore for no-explicit-any. I prefer having to ignore per-violation. Keeps me in check 😀

Happy to merge after these changes.

[nickgraffis]

Thanks for this PR! Is it backwards compatible or is it a breaking change?

Two notes:

• I think you may need to rebase on top of master.
• I'd prefer if you removed the blanket ignore for no-explicit-any. I prefer having to ignore per-violation. Keeps me in check 😀

Happy to merge after these changes.

Sounds good! I think good to go, let me know if there is anything else! Thanks - 🙏

[oscarhermoso]

@kbrgl - This is awesome, could you please publish this release?

[stepanorda]

@kbrgl Yeah, kind of confusing. It's in the docs because it's in master but you can't use it because there is no release :)

[gprieto]

@kbrgl thanks for the great work! Could you bumb the release version to 1.3.0 and build the dist so that we can use these last features ?