Detect DEV version of React (#667)

* Detect DEV version of React * Outdated popup * Check for outdated versions * Filter out bad toString results * Detect DEV for Fiber (works with master) * Tweak the wording so the link looks nicer

Author: gaearon

backend/installGlobalHook.js

@@ -20,20 +20,94 @@ function installGlobalHook(window: Object) {
  if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
  return;
  }
+ function detectReactBuildType(renderer) {
+ try {
+ var toString = Function.prototype.toString;
+ if (typeof renderer.version === 'string') {
+ // React DOM Fiber (16+)
+ if (renderer.bundleType > 0) {
+ // This is not a production build.
+ // We are currently only using 0 (PROD) and 1 (DEV)
+ // but might add 2 (PROFILE) in the future.
+ return 'development';
+ }
+ // The above should cover envification, but we should still make sure
+ // that the bundle code has been uglified.
+ var findFiberCode = toString.call(renderer.findFiberByHostInstance);
+ // Filter out bad results (if that is even possible):
+ if (findFiberCode.indexOf('function') !== 0) {
+ // Hope for the best if we're not sure.
+ return 'production';
+ }
+ // By now we know that it's envified--but what if it's not minified?
+ // This can be bad too, as it means DEV code is still there.
+ // Let's check the first argument. It should be a single letter.
+ if (!(/function[\s\w]*\(\w[,\)]/.test(findFiberCode))) {
+ return 'development';
+ }
+ // We're good.
+ return 'production';
+ }
+ if (renderer.Mount && renderer.Mount._renderNewRootComponent) {
+ // React DOM Stack
+ var renderRootCode = toString.call(renderer.Mount._renderNewRootComponent);
+ // Filter out bad results (if that is even possible):
+ if (renderRootCode.indexOf('function') !== 0) {
+ // Hope for the best if we're not sure.
+ return 'production';
+ }
+ // React DOM Stack < 15.1.0
+ // If it contains "storedMeasure" call, it's wrapped in ReactPerf (DEV only).
+ // This would be true even if it's minified, as method name still matches.
+ if (renderRootCode.indexOf('storedMeasure') !== -1) {
+ return 'development';
+ }
+ // React DOM Stack >= 15.1.0, < 16
+ // If it contains a warning message, it's a DEV build.
+ // This would be true even if it's minified, as the message would stay.
+ if (renderRootCode.indexOf('should be a pure function') !== -1) {
+ return 'development';
+ }
+ // By now we know that it's envified--but what if it's not minified?
+ // This can be bad too, as it means DEV code is still there.
+ // Let's check the first argument. It should be a single letter.
+ // We know this function gets more than one argument in all supported
+ // versions, and if it doesn't have arguments, it's wrapped in ReactPerf
+ // (which also indicates a DEV build, although we should've filtered
+ // that out earlier).
+ if (!(/function\s*\(\w\,/.test(renderRootCode))) {
+ return 'development';
+ }
+ // Seems like we're using the production version.
+ // Now let's check if we're still on 0.14 or lower:
+ if (renderRootCode.indexOf('._registerComponent') !== -1) {
+ // TODO: we can remove the condition above once 16
+ // is older than a year. Since this branch only runs
+ // for Stack, we can flip it completely when Stack
+ // is old enough. The branch for Fiber is above,
+ // and it can check renderer.version directly.
+ return 'outdated';
+ }
+ // We're all good.
+ return 'production';
+ }
+ } catch (err) {
+ // Weird environments may exist.
+ // This code needs a higher fault tolerance
+ // because it runs even with closed DevTools.
+ // TODO: should we catch errors in all injected code, and not just this part?
+ }
+ return 'production';
+ }
  const hook = ({
  // Shared between Stack and Fiber:
  _renderers: {},
  helpers: {},
  inject: function(renderer) {
- if (typeof renderer.version === 'number' && renderer.version > 1) {
- // This Fiber version is too new and not supported yet.
- // The version field is declared in ReactFiberDevToolsHook.
- // Only Fiber releases have the version field.
- return null;
- }
  var id = Math.random().toString(16).slice(2);
  hook._renderers[id] = renderer;
- hook.emit('renderer', {id, renderer});
+ var reactBuildType = detectReactBuildType(renderer);
+ hook.emit('renderer', {id, renderer, reactBuildType});
  return id;
  },
  _listeners: {},

backend/types.js

@@ -43,10 +43,18 @@ type DOMNode = {};
 
 export type AnyFn = (...args: Array<any>) => any;
 
+type BundleType =
+ // PROD
+ | 0
+ // DEV
+ | 1;
+
 export type ReactRenderer = {
  // Fiber
  findHostInstanceByFiber: (fiber: Object) => ?NativeType,
  findFiberByHostInstance: (hostInstance: NativeType) => ?OpaqueNodeHandle,
+ version: string,
+ bundleType: BundleType,
 
  // Stack
  Reconciler: {

flow/chrome.js

@@ -66,6 +66,7 @@ declare var chrome: {
  sender: {
  tab: {
  id: number,
+ url: string,
  },
  },
  }) => void) => void,
@@ -74,6 +75,7 @@ declare var chrome: {
  addListener: (fn: (req: Object, sender: {
  tab: {
  id: number,
+ url: string,
  },
  }) => void) => void,
  },

shells/chrome/popups/development.html

@@ -0,0 +1,13 @@
+<script src="links.js"></script>
+<style>body { font-size: 14px; }</style>
+<p style="min-width: 450px">
+ <b>This page is using the development build of React. &#x1f6a7;</b>
+ <br />
+ Open the developer tools, and the React tab will appear to the right.
+</p>
+<hr />
+<p style="min-width: 450px">
+ Note that the development build is not suitable for production.
+ <br />
+ Make sure to <a href="https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build">use the production build</a> before deployment.
+</p>

shells/chrome/popups/outdated.html

@@ -0,0 +1,12 @@
+<script src="links.js"></script>
+<style>body { font-size: 14px; }</style>
+<p style="min-width: 450px">
+ <b>This page is using an outdated version of React. &#8987;</b>
+</p>
+<hr />
+<p style="min-width: 450px">
+ We recommend updating React to ensure that you receive important bugfixes and performance improvements.
+ <br />
+ <br />
+ You can find the upgrade instructions on the <a href="https://facebook.github.io/react/blog/">React blog</a>.
+</p>

shells/chrome/popups/detected.html renamed to shells/chrome/popups/production.html

@@ -1,7 +1,7 @@
 <script src="links.js"></script>
 <style>body { font-size: 14px; }</style>
 <p style="min-width: 450px">
- <b>This page is using React. &#x2705;</b>
+ <b>This page is using the production build of React. &#x2705;</b>
  <br />
  Open the developer tools, and the React tab will appear to the right.
 </p>

shells/chrome/src/GlobalHook.js

@@ -28,13 +28,17 @@ window.addEventListener('message', function(evt) {
  if (evt.source === window && evt.data && evt.data.source === 'react-devtools-detector') {
  chrome.runtime.sendMessage({
  hasDetectedReact: true,
+ reactBuildType: evt.data.reactBuildType,
  });
  }
 });
 
 var detectReact = `
-window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function() {
- window.postMessage({source: 'react-devtools-detector'}, '*');
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function(evt) {
+ window.postMessage({
+ source: 'react-devtools-detector',
+ reactBuildType: evt.reactBuildType,
+ }, '*');
 });
 `;
 var saveNativeValues = `

shells/chrome/src/background.js

@@ -75,18 +75,28 @@ chrome.runtime.onMessage.addListener((req, sender) => {
  // We use browserAction instead of pageAction because this lets us
  // display a custom default popup when React is *not* detected.
  // It is specified in the manifest.
+ var reactBuildType = req.reactBuildType;
+ if (sender.tab.url.indexOf('facebook.github.io/react') !== -1) {
+ // Cheat: We use the development version on the website because
+ // it is better for interactive examples. However we're going
+ // to get misguided bug reports if the extension highlights it
+ // as using the dev version. We're just going to special case
+ // our own documentation and cheat. It is acceptable to use dev
+ // version of React in React docs, but not in any other case.
+ reactBuildType = 'production';
+ }
  chrome.browserAction.setIcon({
  tabId: sender.tab.id,
  path: {
- '16': 'icons/16-production.png',
- '32': 'icons/32-production.png',
- '48': 'icons/48-production.png',
- '128': 'icons/128-production.png',
+ '16': 'icons/16-' + reactBuildType + '.png',
+ '32': 'icons/32-' + reactBuildType + '.png',
+ '48': 'icons/48-' + reactBuildType + '.png',
+ '128': 'icons/128-' + reactBuildType + '.png',
  },
  });
  chrome.browserAction.setPopup({
  tabId: sender.tab.id,
- popup: 'popups/detected.html',
+ popup: 'popups/' + reactBuildType + '.html',
  });
  }
 });