Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle DOM Events #63

Merged
merged 3 commits into from
May 10, 2021
Merged

Handle DOM Events #63

merged 3 commits into from
May 10, 2021

Conversation

gaetanmaisse
Copy link
Member

@gaetanmaisse gaetanmaisse commented May 7, 2021

Description

Dom Event (and all its subclasses) is built in a way its internal properties are accessible when querying them directly but "hidden" when iterating its keys.

With a code example it means: Object.keys(new Event('click')) = ["isTrusted"]

So to be able to stringify/parse more than just isTrusted info we need to create a new object and set the properties by hand. As there is no way to iterate the properties we rely on a list of hardcoded properties.

--

I also had to split the test suite to be able to have node and browser specific tests. We now have the following structure:
image

And the related NPM scripts:

    "test": "yarn test-node && yarn test-browser",
    "test-browser": "TZ=UTC jest --env=jsdom ./common ./browser",
    "test-node": "TZ=UTC jest --env=node ./common ./node"

--

Related to storybookjs/storybook#8544

…cture is hiding its properties

Dom Event (and all it sub classes) is built in a way it's internal properties are accessible when querying them directly but "hidden" when iterating its keys.

With a code example it means: `Object.keys(new Event('click')) = ["isTrusted"]`

So to be able to stringify/parse more than just `isTrusted` info we need to create a new object and set the properties by hand. As there is no way to iterate the properties we rely on a list of hardcoded properties.
@gaetanmaisse gaetanmaisse marked this pull request as ready for review May 7, 2021 16:10
@gaetanmaisse gaetanmaisse requested a review from ndelangen May 7, 2021 16:10
@gaetanmaisse
Copy link
Member Author

gaetanmaisse commented May 7, 2021

~Sadly it is not fixing the issue with Addon Actions, I think it's because telejson run both in Browser and Node (and Event aren't handled on Node side). To investigate...

It looks like for (let key in event) {} iterate the hidden keys 🙃 https://stackoverflow.com/questions/11547672/how-to-stringify-event-object/58416333#58416333~

Edit: And no it wasn't that, it was just that the Event was nested in another object, see 177b649

@gaetanmaisse gaetanmaisse force-pushed the fix-event-serialization branch from 868284c to 46c1cb8 Compare May 7, 2021 19:24
@gaetanmaisse gaetanmaisse force-pushed the fix-event-serialization branch from 46c1cb8 to 177b649 Compare May 7, 2021 19:28
@gaetanmaisse
Copy link
Member Author

And finally, it's working 🎉

image

@ndelangen ndelangen merged commit 8377d6e into master May 10, 2021
@ndelangen ndelangen deleted the fix-event-serialization branch May 10, 2021 10:49
@ndelangen
Copy link
Member

Released in 5.2.0

gaetanmaisse added a commit to storybookjs/storybook that referenced this pull request May 10, 2021
A workaround has been found in `telejson` to keep interesting data when serializing DOM Event/CustomEvent. For details, see storybookjs/telejson#63
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants