Usage with Skeleton `Toast` component

[ohmree]

In the readme you explain why using the {@html} syntax when displaying messages from this library is a bad idea but skeleton seems to make heavy use of it, including in the view layer for its global toast system.

Is there a recommended way to make sveltekit-flash-message and skeleton's Toast work together nicely in a superforms app or should I just pick one and stick with it? If I do have to ditch one or the other here are the ideas I was thinking of:

• Wrap skeleton's toastStore in an interface that conforms to superforms' flashMessage.module interface, assuming superforms itself doesn't do anything that would be risky with skeleton's use of {@html} when calling the flash message implementation.
• Ditch skeleton's toast system completely, use this library and just conditionally display an element like in the readme but style it like a skeleton toast.

In both approaches I have to learn how something works (a flashMessage.module conformant implementation vs the styling in skeleton's Toast) so neither one is ideal.

[ciscoheat]

Hi, would it work to subscribe to the flash store, triggering the toastStore on updates? In the update function you can verify and clean up the message. Maybe you can even do it like this:

$: if($flash) {
  const message = cleanHtml($flash)
  toastStore.trigger(message)
}

[ohmree]

The approach you suggest did seem to work at first but then I noticed that flash subscribers seem to be notified twice with the same message data, using the snippet from your comment or doing something like this (in my top-level +layout.svelte):

const unsubscribe = flash.subscribe(messageData => {
  if (messageData != null) {
    const message = purifier.sanitize(messageData.message);
    toastStore.trigger({
      message,
      background: backgrounds[messageData.type],
    });
  }
});
onDestroy(unsubscribe);

I'd like to try reproducing this in isolation, do you happen to have a minimal repo I could use for that or should I just manually follow the docs for setting superforms and flash-message up on a fresh starter?

[anatoliy-t7]

In these examples, I am getting notified twice. Do you have any idea how to fix it?

[ciscoheat]

The double notification problem should be fixed now in 1.0.0-rc.2, just released. Now it should be possible to use the flash store as an event handler:

flash.subscribe($flash => {
  if($flash) sendToast($flash)
})

[vladislav-yemelyanov]

@ciscoheat I tested this on my personal project, now it's fixed for me, thanks!