[Livewire v3] Toaster not working via js

[jeffchown]

Thanks for the great package, @mabdullahsari .

Since updating my app to Livewire 3.0 and livewire-toaster 2.0, trying to open a toaster via js or console stopped working for me.

e.g. both of these worked w/ Livewire v2, Toaster 1.3.0 and do NOT work w/ Livewire v3, Toaster 2.0.0

In blade file: <div @click="Toaster.info('test')">TEST</div> via console: Toaster.info('test')

I downloaded your package and worked with it locally to see what was happening. I was able to get things working by editing hub.js and reverting:

init() {
  document.addEventListener('toaster:received', event => {
  ...

to:

init() {
  window.addEventListener('toaster:received', event => {
  ...

Unless there was a reason I'm not aware of for using document., I assume this change was made accidentally (maybe a search/replace) because of the needed change in index.js re: Alpine (https://livewire.laravel.com/docs/upgrading#accessing-the-alpine-global-via-a-script-tag):

document.addEventListener('alpine:init', () => {
    window.Alpine.plugin(Hub);
});

Hope this helps.

Thanks again for the great work!

[mabdullahsari]

Hi, could you please try the following snippet in your developer console:

const event = (message, type) => {
    document.dispatchEvent(new CustomEvent('toaster:received', { detail: { message, type }}));
};

event('bugfix', 'success');

[jeffchown]

That snippet worked, @mabdullahsari 👍

[mabdullahsari]

Please upgrade to 2.0.1

[jeffchown]

Done. Perfect. Thanks for the quick turnaround, @mabdullahsari !