Show more info for Date objects.

[frederikcreemers]

I'm trying to debug a component that stores Date objects in its state, but with the current react dev tools, there's no information about them, other than that it's a Date.

[gaperton]

PR #469 contains the fix for the Date type. It's shown like this:

Is it good enough?

[laurentvd]

I think this is exactly what we need!

[gaearon]

Since we didn't go with #469, happy to accept a PR fixing just this specific case.
@laurentvd @bigblind Would you like to contribute?

[tarang9211]

@gaearon Is this still open? If no one's taking it, I would like to contribute.

[laurentvd]

I'd love to contribute, but I'm a little short on time at the moment. If @tarang9211 would like to take this, that would be great!

[zalmoxisus]

@gaearon we are using jsan for Redux DevTools Extension. It supports unserializable by JSON.stringify data types like date, regex, symbol, undefined, error, and function. Also we'll add support for global Symbols and ES6 Map and Set in the next release.

I guess, you'll just have to replace JSON.stringify(data)/JSON.parse(data) with jsan.stringify(data, null, null, true)/jsan.parse(data).

@kolodny did a great job on making it rather performant. Of course, it is less performant than JSON.stringify, but if we'll traverse data to check for Date objects it wouldn't be as performant either.

To add support for ImmutableJS, BackboneJS..., we just need to provide a way to specify a JSON replacer / reviver, so it would work as @gaperton intended (but from outside the extension). Here's how we support ImmutableJS.

[tarang9211]

I'd love to pick this up! I'm completely new to this so any tips for starting off?

[tarang9211]

So I get the dev environment all set up. Could anyone let me know how to produce this specific use case? Currently I got it working by using the instructions listed here: https://github.com/facebook/react-devtools/tree/master/shells/plain

[gaearon]

You can probably change test/examples/target.js to pass something={new Date()} as a prop to the root component and rebuild it by running ../../node_modules/.bin/webpack --watch. Then refresh the page. Then feel free to document this for the next person 😛