JS: Model mobx-react{-lite} as higher-order component builders

Author: asgerf

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

@@ -802,6 +802,8 @@ private DataFlow::SourceNode higherOrderComponentBuilder() {
   or
   result = DataFlow::moduleMember("recompose", _).getACall()
   or
+  result = DataFlow::moduleMember(["mobx-react", "mobx-react-lite"], "observer")
+  or
   result = reactRouterDom().getAPropertyRead("withRouter")
   or
   exists(FunctionCompositionCall compose |

javascript/ql/test/library-tests/frameworks/ReactJS/tests.expected

@@ -10,6 +10,8 @@ getACandidatePropsValue
 | props.js:30:46:30:67 | "propFr ... tProps" |
 | props.js:32:22:32:34 | "propFromJSX" |
 | props.js:34:33:34:53 | "propFr ... ructor" |
+| useHigherOrderComponent.jsx:5:33:5:37 | "red" |
+| useHigherOrderComponent.jsx:11:39:11:44 | "lazy" |
 | useHigherOrderComponent.jsx:17:40:17:46 | "lazy2" |
 getACandidateStateSource
 | es6.js:14:1:20:1 | class H ...     }\\n} | es6.js:18:22:18:31 | { baz: 42} |

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

@@ -2,13 +2,13 @@ import SomeComponent from './higherOrderComponent';
 import { lazy } from 'react';
 
 function foo() {
-    return <SomeComponent color="red"/> // $ MISSING: getACandidatePropsValue
+    return <SomeComponent color="red"/> // $ getACandidatePropsValue
 }
 
 const LazyLoadedComponent = lazy(() => import('./higherOrderComponent'));
 
 function bar() {
-    return <LazyLoadedComponent color="lazy"/> // $ MISSING: getACandidatePropsValue
+    return <LazyLoadedComponent color="lazy"/> // $ getACandidatePropsValue
 }
 
 const LazyLoadedComponent2 = lazy(() => import('./exportedComponent').then(m => m.MyComponent));