Custom svelte event dispatch double-wraps data in event.detail.detail rather than event.detail

[bloombar]

Using svelte's standard dispatch seems to wrap the detail field within another detail.

Inner.svelte:

 import { createEventDispatcher } from 'svelte'
 const dispatch = createEventDispatcher();

// at some point, dispatch a custom event
dispatch('customEvent', { 'foo': bar })

Outer.svelte:

import Inner from './Inner.svelte'

const doSomething = e => {
   console.log(JSON.stringify(e, null, 2)
}
// ...

<Inner on:customEvent={doSomething} />

Actual output

The event object, e, looks something like:

{
    "eventName":"customEvent",
    "type":"customEvent",
    "detail": {
        "detail": {
            "foo": "bar"
        },
      "bubbles":false,
      "cancelable":false
    }
}

So accessing the payload requires e.detail.detail.foo instead of e.detail.foo... note the recursive detail.

Expected output

Would expect the event object, e, to look something like:

{
    "eventName":"customEvent",
    "type":"customEvent",
    "detail": {
        "foo": "bar"
    }
   "bubbles":false,
   "cancelable":false
}