Followup Work for Iterable Support

[gaearon]

@cmmcleod sent an amazing PR for supporting iterables (including Immutable.js) in #459.

There’s a few remaining things which would be nice to investigate:

• We should provide a way to “load more” if there are too many items in the iterable. The arbitrary 100 item limit is a bit confusing.
• It shouldn’t be possible to edit things inside key-value pairs. Currently editing a fake “array” of key and value throws.
• Perhaps we can format key-value pairs differently? I know we bikeshedded on this in Support Iterators/Iterables, Immutable, other inspector improvements #459 but I wonder if all that’s necessary is to replace an array-like display with a dedicated “Key:” and “Value:” labels, and maybe change “Array” in this case to “Iterable” or something like that.

[gaearon]

The last one sounds like something we'd want for arrays too.

[gaearon]

In particular I think we should respect "two level dehydration" rule for both iterables and arrays according to how they're displayed in the UI. Arrays are already grouped into buckets of 100 items (if I'm not mistaken). Like in chrome. So we should make this work on dehydration side: send a list of those buckets instead of actual array if it's so large, and then load more as requested. This could dramatically improve startup performance too.

[gaearon]

Friendly ping to @cmmcleod, do you still intend to work on this?

[shriah]

Arrays are already grouped into buckets of 100 items (if I'm not mistaken). Like in chrome.

I just tested this and arrays are not grouped into buckets.

[gaearon]

Thanks for checking. Then we need to implement this for both. Would solve #599 too!

[shriah]

I also found a small bug here

react-devtools/agent/dehydrate.js

Line 38 in 90b8b25

if (data[Symbol.iterator] === 'function') {

It should be

if ( typeof data[Symbol.iterator] === 'function') {

because of which it was possible to edit the iterable objects. I have created PR #657 to fix this

[shriah]

I also think we should refactor Bridge.js and move this code to dehydrate.js

react-devtools/agent/Bridge.js

Lines 410 to 422 in 90b8b25

	if (val && typeof val[Symbol.iterator] === 'function') {
	var iterVal = Object.create({}); // flow throws "object literal incompatible with object type"
	var count = 0;
	for (const entry of val) {
	if (count > 100) {
	// TODO: replace this if block with better logic to handle large iterables
	break;
	}
	iterVal[count] = entry;
	count++;
	}
	val = iterVal;
	}

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools