React: DevTools: Fully disable 0.14 support

[bvaughn]

It’s confusing that 0.14 or earlier is in half-working state where it displays a tree (but incorrectly). We should detect it and fully disable if it doesn’t work. Or fix it.

If we go the route of disabling support:

1. DevTools should show a warning message that clearly indicates the version of React isn't supported. (This is probably a good idea for v13 and older anyway.)
2. DevTools should not throw any errors.

---

Originally reported by @gaearon via https://github.com/bvaughn/react-devtools-experimental/issues/384

[danielhusar]

I can take a look if nobody started on this one yet :)

[bvaughn]

It's all yours @danielhusar. Please let me know if you decide not to work on it for any reason, and I'll remove the "taken" label 😄

[danielhusar]

@bvaughn Hey! Is there an easy way to get react version?
I'm looking into window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers but looks like version has been only added in recent react versions. Or perhaps perform some feature detection?

It's also possible I'm looking into a totally wrong place :)

[bvaughn]

I think you would have to feature detect it. Here's how the legacy extension did it:
https://github.com/facebook/react-devtools/blob/d839081f79f681617df7584a8ffd2f4163fa40b9/backend/attachRenderer.js#L24-L76

Based on this, I think checking for renderer.ComponentTree should be a sufficient way of differentiating between v15 and older. (But you'd want to double check me by testing it.)

[danielhusar]

@bvaughn I have very early PR https://github.com/facebook/react/pull/16720 , would you be able to check if I'm remotely going in right direction?

It's my first time in codebase and I'm bit struggling. I think I have the check for the extension there, but I have hardcoded values for standalone | frontend, as I haven't tracked down where to put those checks yet.

I was looking into adding some logic also inside onBridgeOperations in the store, but operations argument is just array of numbers, which I'm not sure have all the info for this.

[bvaughn]

I was looking into adding some logic also inside onBridgeOperations in the store, but operations argument is just array of numbers, which I'm not sure have all the info for this.

I've written some documentation about how the operations array works here, if it's helpful:
https://github.com/facebook/react/blob/master/packages/react-devtools/OVERVIEW.md#serializing-the-tree

I left a few comments on the PR.

[bvaughn]

Hi @danielhusar! It's been a couple of weeks since the PR has been updated, so I'm going to remove the "taken" label for now. Let me know if you pick this back up though!

[danielhusar]

Sorry, been pretty busy with deadlines lately :(

[bvaughn]

It's fine :) Just wanted to free it up for someone else (maybe even me) to take a look.

[bvaughn]

This fix has just been published to NPM and posted to Chrome/Firefox as v4.1.1