So I've dug into this a little more and found that this fix doesn't fully fix the issue.

The scenario

Currently if you call $this->dispatch('test', 'new'); from a method in a Livewire component, then it get's picked up correctly by listeners and the event.detail is already an array ['new'].

You can see below, we have 3 listeners (#[On] attribute, x-on:, and @script using $wire.on()) set up and they are all receiving ['new'] correctly.

But if we try to dispatch the event using wire:click="$dispatch('test', 'other')", then we can see the two browser based listeners receive the data, but it's like 'other' instead of ['other'] which is what is expected to match what happens above when dispatching from the backend. We can see the backend listener fails all together with an exception.

<?php

use Livewire\Attributes\On;
use Livewire\Volt\Component;

new class extends Component {
    public function doSomething()
    {
        $this->dispatch('test', 'new');
    }

    #[On('test')]
    public function random(...$details)
    {
        ray('method listener', $details);
    }
}; ?>

<div>
    <flux:button wire:click="doSomething">Fire from Livewire method</flux:button>
    <flux:button wire:click="$dispatch('test', 'other')">Fire from $dispatch</flux:button>
    <div x-on:test.window="console.log('x-on: listener', $event.detail)"></div>
</div>

@script
    <script>
        $wire.on('test', (detail) => {
            console.log('script listener', detail);
        });
    </script>
@endscript

The problem

The issue is that the front end $dispatch() is actually just using the params directly.

export function dispatch(component, name, params) {

Where as the backend $this->dispatch() is getting the params as an array because of the ...

public function dispatch($event, ...$params)

The solution

The solution proposed in this PR was to wrap the params in an array on the backend if they're not already an array.

The issue with that is that the results are inconsistent depending on whether the event if fired from the backend or the front end (top 2 below is backend and bottom 2 are front end).

So instead the fix is to add the check to the frontend, just before the frontend event is dispatched, check to see if the params are a string, and if they are wrap them in an array.

In theory we could update the frontend method signature to include ...params

export function dispatch(component, name, ...params) {

But when I tested this, I found it's actually a breaking change as it causes an extra layer of nesting due to objects being able to be passed into $dispatch() as the params.

Hence why the best solution is to only wrap params if it's a string. I've pushed these changes to the PR.

Now we can see no matter where the event is fired from, if there is only a single value in it, then it will be wrapped correctly.

thanks a bunch