JS: Use API graphs in getOption(s)

Author: asgerf

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

@@ -161,6 +161,23 @@ module Vue {
      */
     API::Node getOwnOptions() { none() } // overridden in subclass
 
+    /** Gets a component which is extended by this one. */
+    Component getABaseComponent() {
+      result.getComponentRef().getAUse() = getOwnOptions().getMember(["extends", "mixins"]).getARhs()
+    }
+
+    /**
+     * Gets an API node referring to the options passed to the Vue object or one
+     * of its base component.
+     */
+    API::Node getOptions() {
+      result = getOwnOptions()
+      or
+      result = getOwnOptions().getMember(["extends", "mixins"]).getAMember()
+      or
+      result = getABaseComponent().getOptions()
+    }
+
     /**
      * Gets the options passed to the Vue object, such as the object literal `{...}` in `new Vue{{...})`
      * or the default export of a single-file component.
@@ -188,23 +205,9 @@ module Vue {
      * extended objects and mixins.
      */
     DataFlow::Node getOption(string name) {
-      result = getOwnOption(name)
-      or
-      exists(DataFlow::SourceNode extendsVal | extendsVal.flowsTo(getOwnOption("extends")) |
-        result = extendsVal.(DataFlow::ObjectLiteralNode).getAPropertyWrite(name).getRhs()
-        or
-        exists(ExtendedVue extend |
-          MkExtendedVue(extendsVal) = extend and
-          result = extend.getOption(name)
-        )
-      )
-      or
-      exists(DataFlow::ArrayCreationNode mixins, DataFlow::ObjectLiteralNode mixin |
-        mixins.flowsTo(getOwnOption("mixins")) and
-        mixin.flowsTo(mixins.getAnElement()) and
-        result = mixin.getAPropertyWrite(name).getRhs()
-      )
+      result = getOptions().getMember(name).getARhs()
       or
+      // not ported to API graphs yet
       result = getAsClassComponent().getDecoratorOption(name)
     }
 

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

@@ -19,6 +19,7 @@ component_getAPropertyValue
 | tst.js:48:1:50:2 | new Ext ... 42 }\\n}) | fromSuper | tst.js:44:18:44:19 | 42 |
 | tst.js:51:17:57:2 | Vue.ext ... \\n  }\\n}) | fromSuper | tst.js:54:18:54:19 | 42 |
 | tst.js:58:1:61:2 | new Vue ... 42 }\\n}) | fromSub | tst.js:60:19:60:20 | 42 |
+| tst.js:58:1:61:2 | new Vue ... 42 }\\n}) | fromSuper | tst.js:54:18:54:19 | 42 |
 | tst.js:63:1:66:2 | new Vue ... 42 }\\n}) | fromMixin1 | tst.js:64:32:64:33 | 42 |
 | tst.js:63:1:66:2 | new Vue ... 42 }\\n}) | fromMixin2 | tst.js:64:61:64:62 | 42 |
 | tst.js:63:1:66:2 | new Vue ... 42 }\\n}) | fromSub | tst.js:65:19:65:20 | 42 |
@@ -44,6 +45,7 @@ component_getOption
 | tst.js:48:1:50:2 | new Ext ... 42 }\\n}) | data | tst.js:42:9:46:3 | functio ...  };\\n  } |
 | tst.js:48:1:50:2 | new Ext ... 42 }\\n}) | data | tst.js:49:8:49:22 | { fromSub: 42 } |
 | tst.js:51:17:57:2 | Vue.ext ... \\n  }\\n}) | data | tst.js:52:9:56:3 | functio ...  };\\n  } |
+| tst.js:58:1:61:2 | new Vue ... 42 }\\n}) | data | tst.js:52:9:56:3 | functio ...  };\\n  } |
 | tst.js:58:1:61:2 | new Vue ... 42 }\\n}) | data | tst.js:60:8:60:22 | { fromSub: 42 } |
 | tst.js:58:1:61:2 | new Vue ... 42 }\\n}) | mixins | tst.js:59:10:59:18 | Extended2 |
 | tst.js:63:1:66:2 | new Vue ... 42 }\\n}) | data | tst.js:64:18:64:35 | { fromMixin1: 42 } |