Tools should display an additional field for the 'native js' version of Immutable objects #52
Comments
Agreed, this would be really nice. Not sure if others agree, but I feel like in an ideal world, we could integrate application code into the React devtools (e.g. to make them understand arbitrary data structures) |
After reading this new post I really want this to be fixed |
+1! |
+1 |
1 similar comment
+1 |
"+1" comments do not help us. Please stop. |
Just asked myself the same question and found that with the new devtools extension, the
or even use right-click "Store as a global variable" on the immutable prop/state then:
This is a temporary solution! |
+500 |
Can we expect a support soon? We can handle it with "store as global variable", but should be great to have the "toJS" displayed directly in the panel. I can work on a PR if you want. |
It reminds of this thing https://github.com/binaryage/cljs-devtools ClojureScript is inventing it own Console panel to display its data nice and fine. |
@kristian-puccio that's great for console, but doesn't work on react-devtools |
Yeah I was wondering if some of the code is transferable On 6 March 2016 at 21:38, Nathaniel Tucker notifications@github.com wrote:
|
For those looking for this, PR #149 fixes it. I have an updated fork of this PR here : https://github.com/roblabla/react-devtools |
+1 |
@BinaryMuse Of course, I agree. Thus, it's done in PR #469 . That's how hooking into dev tools looks like on the example of Date class (which is actually implemented as a part of this PR to resolve #388 ). if (__REACT_DEVTOOLS_GLOBAL_HOOK__) {
const { addInnerStateInspector } = __REACT_DEVTOOLS_GLOBAL_HOOK__;
if (typeof addInnerStateInspector === 'function') {
addInnerStateInspector( Date, x => ({
local : `${ x.toDateString() } ${ x.toTimeString() }`,
iso : x.toISOString(),
timestamp : x.getTime(),
});
}
} Welcome to the ideal world :). If it will be accepted, I will implement support for ImmutableJS data structures. |
#459 should address this. Can anyone give it a try? |
Closing as fixed by #459. |
Immutable (or any iterable, really) support is implemented in the latest version. |
While working on a React/Flux project and having Immutables here and there, I've noticed that the dev tools become pretty silly when inspecting the state of an element that uses Immutable.
While first looking through the codebase, I noticed that the state of an object is being pulled and pushed to the sidebar here. With a bit of hacking around, I began to notice that there is no place where the actual values are read or passed around, but instead, only references to the values.
I'm not sure how possible this may be, but I feel that with the deep ties between React, Flux and Immutable, the dev tools should be able to detect an immutable and provide either an extra property on the state panel or a new panel altogether with the
.toJS()
'd version of the immutable to help developers work with these utilities.The text was updated successfully, but these errors were encountered: