Merge pull request #6197 from asgerf/js/recompose

Approved by esbena

javascript/change-notes/2021-06-30-recompose.md

@@ -0,0 +1,3 @@
+lgtm,codescanning
+* Improved analysis of React components that has passed through a higher-order component
+  from the `recompose` library.

javascript/ql/src/semmle/javascript/frameworks/ComposedFunctions.qll

@@ -6,7 +6,7 @@ import javascript
 
 /**
  * A call to a function that constructs a function composition `f(g(h(...)))` from a
- * series functions `f, g, h, ...`.
+ * series of functions `f, g, h, ...`.
  */
 class FunctionCompositionCall extends DataFlow::CallNode {
   FunctionCompositionCall::Range range;
@@ -35,7 +35,7 @@ class FunctionCompositionCall extends DataFlow::CallNode {
   }
 
   /** Gets any of the functions being composed. */
-  final DataFlow::Node getAnOperandFunction() { result = getOperandFunction(_) }
+  final DataFlow::FunctionNode getAnOperandFunction() { result = getOperandFunction(_) }
 
   /** Gets the number of functions being composed. */
   int getNumOperand() { result = range.getNumOperand() }
@@ -88,7 +88,9 @@ module FunctionCompositionCall {
     RightToLeft() {
       this = DataFlow::moduleImport(["compose-function"]).getACall()
       or
-      this = DataFlow::moduleMember(["redux", "ramda", "@reduxjs/toolkit"], "compose").getACall()
+      this =
+        DataFlow::moduleMember(["redux", "ramda", "@reduxjs/toolkit", "recompose"], "compose")
+            .getACall()
       or
       this = LodashUnderscore::member("flowRight").getACall()
     }
@@ -96,7 +98,7 @@ module FunctionCompositionCall {
     override DataFlow::Node getOperandNode(int i) { result = getEffectiveArgument(i) }
   }
 
-  /** A call whose arguments are functions `f,g,h` which are composed into `f(g(h(...))` */
+  /** A call whose arguments are functions `f,g,h` which are composed into `h(g(f(...))` */
   private class LeftToRight extends WithArrayOverloading {
     LeftToRight() {
       this = DataFlow::moduleImport("just-compose").getACall()

javascript/ql/src/semmle/javascript/frameworks/React.qll

@@ -777,6 +777,8 @@ private DataFlow::SourceNode higherOrderComponentBuilder() {
   or
   result = DataFlow::moduleMember("redux-form", "reduxForm").getACall()
   or
+  result = DataFlow::moduleMember("recompose", _).getACall()
+  or
   result = reactRouterDom().getAPropertyRead("withRouter")
   or
   exists(FunctionCompositionCall compose |

javascript/ql/test/library-tests/frameworks/ReactJS/higherOrderComponent.jsx

@@ -4,6 +4,7 @@ import { compose } from 'redux';
 import styled from 'styled-components';
 import unknownFunction from 'somewhere';
 import { hot } from 'react-hot-loader';
+import { withState } from 'recompose';
 
 import { MyComponent } from './exportedComponent';
 
@@ -22,4 +23,6 @@ const withConnect = connect(mapStateToProps, mapDispatchToProps);
 
 const ConnectedComponent = compose(withConnect, unknownFunction)(StyledComponent);
 
-export default hot(module)(memo(ConnectedComponent));
+const ConnectedComponent2 = withState('counter', 'setCounter', 0)(ConnectedComponent);
+
+export default hot(module)(memo(ConnectedComponent2));