search

storybookjs / telejson

🛰 JSON parse & stringify with support for cyclic objects, functions, dates, regex, infinity, undefined, null, NaN, Classes, Instances
MIT License
169 stars 29 forks source link

Handle DOM Events #63

Closed gaetanmaisse closed 3 years ago

gaetanmaisse commented 3 years ago

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 https://github.com/storybookjs/storybook/issues/8544

gaetanmaisse commented 3 years ago

~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 https://github.com/storybookjs/telejson/pull/63/commits/177b6495b730b9e950622f683d1778c83947a147

gaetanmaisse commented 3 years ago

And finally, it's working 🎉

image

ndelangen commented 3 years ago

Released in 5.2.0