withActions: CustomEvent detail missing

Is your feature request related to a problem? Please describe. I had originally filed this as a bug report, but belatedly decided that it’s technically a feature request.

Basically, though, when I am building a WebComponent which generates a CustomEvent, I want to be sure that the CustomEvent is being generated properly.

Describe the solution you’d like withActions (from @storybook/addon-actions) should include in the log the detail property of an event it receives if the event is a CustomEvent (or there should be some other documented way for stories to listen for a CustomEvent and see its detail property in the log).

Describe alternatives you’ve considered (using html from lit element and render from lit html), I render: <button type="button" @click="${this.publishtest}">publish</button>

And, I add a publish method on that class:

publishtest() {
  this.dispatchEvent(new CustomEvent('pubexample', {detail: {a: 1, b: 2}, bubbles: true}));
}

And, in my stories I include: .addDecorator(withActions('pubexample'))

I click the button, and something representing my example event shows up in the console log, but the detail property appears to be missing (or at least is not accessible from the console.log in chrome).

Are you able to assist bring the feature to reality? I don’t know - I’ll try implementing this tomorrow and submit a pull request if I can make this work.

Additional context Possibly relevant is that the logged message has a data property which has an args property which is an array of one element which is seems to be my CustomEvent but the only visible property of that item is {isTrusted: false}. Meanwhile, if I save that CustomEvent globally, and display it in the log, I see something completely different (with about 16 properties, but Object.keys() on that object only gets me isTrusted and _constructor-name_ – so a part of the issue here is simply that chrome doesn’t let me see inherited properties in the context of the logged message, perhaps because the CustomEvent is deeply nested in the message).

[AGrabovajFitA]

Here is a solution to this problem: https://stackoverflow.com/questions/13333683/javascript-customevent-detail-not-getting-passed

[dutscher]

@shilman an update for telesync is necessary https://github.com/storybookjs/telejson/blob/master/src/index.ts#L209 in this line we need

const constructorName = value.constructor.name;
Object.assign(value, {
  '_constructor-name_': constructorName,
  ...(constructorName.toLowerCase().includes('event') ? {
    eventData: JSON.parse(JSON.stringify(value, Object.keys(value.constructor.prototype))),
    details: value.detail,
  } : {}),
});

then we get the result as my snapshots above shown.

cheers