Bug 1561148 - Improve detection of react libraries r=jlast

Differential Revision: https://phabricator.services.mozilla.com/D38236

--HG--
extra : moz-landing-system : lando

devtools/client/debugger/bin/module-manifest.json

@@ -15,7 +15,7 @@
         "byName": {},
         "byBlocks": {},
         "usedIds": {
-          "0": 0
+          "1": 1
         }
       }
     }
@@ -36,7 +36,7 @@
         "byName": {},
         "byBlocks": {},
         "usedIds": {
-          "0": 0
+          "1": 1
         }
       }
     }
@@ -57,7 +57,7 @@
         "byName": {},
         "byBlocks": {},
         "usedIds": {
-          "0": 0
+          "1": 1
         }
       }
     }
@@ -78,7 +78,7 @@
         "byName": {},
         "byBlocks": {},
         "usedIds": {
-          "0": 0
+          "1": 1
         }
       }
     }
@@ -99,7 +99,7 @@
         "byName": {},
         "byBlocks": {},
         "usedIds": {
-          "0": 0
+          "1": 1
         }
       }
     }
@@ -120,7 +120,7 @@
         "byName": {},
         "byBlocks": {},
         "usedIds": {
-          "0": 0
+          "1": 1
         }
       }
     }
@@ -141,7 +141,7 @@
         "byName": {},
         "byBlocks": {},
         "usedIds": {
-          "0": 0
+          "1": 1
         }
       }
     }

devtools/client/debugger/dist/parser-worker.js

@@ -6597,27 +6597,27 @@ module.exports = {
 /* 15 */
 /***/ (function(module, exports) {
 
-var g;
-
-// This works in non-strict mode
-g = (function() {
-	return this;
-})();
-
-try {
-	// This works if eval is allowed (see CSP)
-	g = g || Function("return this")() || (1,eval)("this");
-} catch(e) {
-	// This works if the window reference is available
-	if(typeof window === "object")
-		g = window;
-}
-
-// g can still be undefined, but nothing to do about it...
-// We return undefined, instead of nothing here, so it's
-// easier to handle this case. if(!global) { ...}
-
-module.exports = g;
+var g;
+
+// This works in non-strict mode
+g = (function() {
+	return this;
+})();
+
+try {
+	// This works if eval is allowed (see CSP)
+	g = g || Function("return this")() || (1,eval)("this");
+} catch(e) {
+	// This works if the window reference is available
+	if(typeof window === "object")
+		g = window;
+}
+
+// g can still be undefined, but nothing to do about it...
+// We return undefined, instead of nothing here, so it's
+// easier to handle this case. if(!global) { ...}
+
+module.exports = g;
 
 
 /***/ }),
@@ -7004,28 +7004,28 @@ module.exports = isObject;
 /* 22 */
 /***/ (function(module, exports) {
 
-module.exports = function(module) {
-	if(!module.webpackPolyfill) {
-		module.deprecate = function() {};
-		module.paths = [];
-		// module.parent = undefined by default
-		if(!module.children) module.children = [];
-		Object.defineProperty(module, "loaded", {
-			enumerable: true,
-			get: function() {
-				return module.l;
-			}
-		});
-		Object.defineProperty(module, "id", {
-			enumerable: true,
-			get: function() {
-				return module.i;
-			}
-		});
-		module.webpackPolyfill = 1;
-	}
-	return module;
-};
+module.exports = function(module) {
+	if(!module.webpackPolyfill) {
+		module.deprecate = function() {};
+		module.paths = [];
+		// module.parent = undefined by default
+		if(!module.children) module.children = [];
+		Object.defineProperty(module, "loaded", {
+			enumerable: true,
+			get: function() {
+				return module.l;
+			}
+		});
+		Object.defineProperty(module, "id", {
+			enumerable: true,
+			get: function() {
+				return module.i;
+			}
+		});
+		module.webpackPolyfill = 1;
+	}
+	return module;
+};
 
 
 /***/ }),
@@ -17425,8 +17425,8 @@ function getFramework(symbols) {
    * License, v. 2.0. If a copy of the MPL was not distributed with this
    * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
-function isReactComponent({ imports, classes, callExpressions }) {
-  return importsReact(imports) || requiresReact(callExpressions) || extendsReactComponent(classes);
+function isReactComponent({ imports, classes, callExpressions, identifiers }) {
+  return importsReact(imports) || requiresReact(callExpressions) || extendsReactComponent(classes) || isReact(identifiers) || isRedux(identifiers);
 }
 
 function importsReact(imports) {
@@ -17449,6 +17449,16 @@ function isVueComponent({ identifiers }) {
   return identifiers.some(identifier => identifier.name == "Vue");
 }
 
+/* This identifies the react lib file */
+function isReact(identifiers) {
+  return identifiers.some(identifier => identifier.name == "isReactComponent");
+}
+
+/* This identifies the redux lib file */
+function isRedux(identifiers) {
+  return identifiers.some(identifier => identifier.name == "Redux");
+}
+
 /***/ }),
 /* 160 */
 /***/ (function(module, exports, __webpack_require__) {

devtools/client/debugger/src/workers/parser/frameworks.js

@@ -20,11 +20,13 @@ export function getFramework(symbols: SymbolDeclarations): ?string {
   }
 }
 
-function isReactComponent({ imports, classes, callExpressions }) {
+function isReactComponent({ imports, classes, callExpressions, identifiers }) {
   return (
     importsReact(imports) ||
     requiresReact(callExpressions) ||
-    extendsReactComponent(classes)
+    extendsReactComponent(classes) ||
+    isReact(identifiers) ||
+    isRedux(identifiers)
   );
 }
 
@@ -65,3 +67,13 @@ function isAngularComponent({ memberExpressions }) {
 function isVueComponent({ identifiers }) {
   return identifiers.some(identifier => identifier.name == "Vue");
 }
+
+/* This identifies the react lib file */
+function isReact(identifiers) {
+  return identifiers.some(identifier => identifier.name == "isReactComponent");
+}
+
+/* This identifies the redux lib file */
+function isRedux(identifiers) {
+  return identifiers.some(identifier => identifier.name == "Redux");
+}

devtools/client/debugger/src/workers/parser/tests/fixtures/frameworks/reactLibrary.js

@@ -0,0 +1,19 @@
+/**
+ * Base class helpers for the updating state of a component.
+ */
+function Component(props, context, updater) {
+  this.props = props;
+  this.context = context;
+  // If a component has string refs, we will assign a different object later.
+  this.refs = emptyObject;
+  // We initialize the default updater but the real one gets injected by the
+  // renderer.
+  this.updater = updater || ReactNoopUpdateQueue;
+}
+
+Component.prototype.isReactComponent = {};
+Component.prototype.setState = function (partialState, callback) {
+  !(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)
+    ? invariant(false, 'setState(...): takes an object of state variables to update or a function which returns an object of state variables.') : void 0;
+  this.updater.enqueueSetState(this, partialState, callback, 'setState');
+};

devtools/client/debugger/src/workers/parser/tests/fixtures/frameworks/reduxLibrary.js

@@ -0,0 +1,39 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (factory((global.Redux = {})));
+  }(this, (function (exports) { 'use strict';
+  
+  function symbolObservablePonyfill(root) {
+    var result;
+    var Symbol = root.Symbol;
+  
+    if (typeof Symbol === 'function') {
+      if (Symbol.observable) {
+        result = Symbol.observable;
+      } else {
+        result = Symbol('observable');
+        Symbol.observable = result;
+      }
+    } else {
+      result = '@@observable';
+    }
+  
+    return result;
+  }
+  
+  /* global window */
+  
+  var root;
+  
+  if (typeof self !== 'undefined') {
+    root = self;
+  } else if (typeof window !== 'undefined') {
+    root = window;
+  } else if (typeof global !== 'undefined') {
+    root = global;
+  } else if (typeof module !== 'undefined') {
+    root = module;
+  } else {
+    root = Function('return this')();
+  }

devtools/client/debugger/src/workers/parser/tests/framework.spec.js

@@ -51,5 +51,15 @@ cases(
       file: "frameworks/vueFileComponent",
       value: "Vue",
     },
+    {
+      name: "recognizes the react library file",
+      file: "framework/reactLibrary",
+      value: "React",
+    },
+    {
+      name: "recognizes the redux library file",
+      file: "framework/reduxLibrary",
+      value: "React",
+    },
   ]
 );