JS: introduce Vue Template Element

Author: Esben Sparre Andreasen

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

@@ -94,6 +94,11 @@ module Vue {
       )
     }
 
+    /**
+     * Gets the template element used by this instance, if any.
+     */
+    abstract Template::Element getTemplateElement();
+
     /**
      * Gets the node for the `data` option object of this instance.
      */
@@ -245,6 +250,8 @@ module Vue {
     }
 
     override DataFlow::Node getOwnOption(string name) { result = def.getOptionArgument(0, name) }
+
+    override Template::Element getTemplateElement() { none() }
   }
 
   /**
@@ -264,6 +271,8 @@ module Vue {
     }
 
     override DataFlow::Node getOwnOption(string name) { result = extend.getOptionArgument(0, name) }
+
+    override Template::Element getTemplateElement() { none() }
   }
 
   /**
@@ -291,6 +300,8 @@ module Vue {
       or
       result = MkExtendedVue(extend).(ExtendedVue).getOption(name)
     }
+
+    override Template::Element getTemplateElement() { none() }
   }
 
   /**
@@ -310,6 +321,8 @@ module Vue {
     }
 
     override DataFlow::Node getOwnOption(string name) { result = def.getOptionArgument(1, name) }
+
+    override Template::Element getTemplateElement() { none() }
   }
 
   /**
@@ -320,6 +333,14 @@ module Vue {
 
     SingleFileComponent() { this = MkSingleFileComponent(file) }
 
+    override Template::Element getTemplateElement() {
+      exists(HTML::Element e | result.(Template::HtmlElement).getElement() = e |
+        e.getFile() = file and
+        e.getName() = "template" and
+        e.isTopLevel()
+      )
+    }
+
     override predicate hasLocationInfo(
       string filepath, int startline, int startcolumn, int endline, int endcolumn
     ) {
@@ -386,6 +407,62 @@ module Vue {
     override predicate step(DataFlow::Node pred, DataFlow::Node succ) {
       pred = src and succ = this
     }
+
+  }
+
+  /*
+   * Provides classes for working with Vue templates.
+   */
+  module Template {
+    // Currently only supports HTML elements, but it may be possible to parse simple string templates later
+    private newtype TElement =
+      MkHtmlElement(HTML::Element e) { exists(VueFile f | e.getFile() = f) }
+
+    /**
+     * An element of a template.
+     */
+    abstract class Element extends TElement {
+      /** Gets a textual representation of this element. */
+      string toString() { result = "<" + getName() + ">...</>" }
+
+      /**
+       * Holds if this element is at the specified location.
+       * The location spans column `startcolumn` of line `startline` to
+       * column `endcolumn` of line `endline` in file `filepath`.
+       * For more information, see
+       * [LGTM locations](https://lgtm.com/help/ql/locations).
+       */
+      predicate hasLocationInfo(
+        string filepath, int startline, int startcolumn, int endline, int endcolumn
+      ) {
+        filepath = "" and
+        startline = 0 and
+        startcolumn = 0 and
+        endline = 0 and
+        endcolumn = 0
+      }
+
+      abstract string getName();
+    }
+
+    /**
+     * An HTML element as a template element.
+     */
+    class HtmlElement extends Element, MkHtmlElement {
+      HTML::Element elem;
+
+      HtmlElement() { this = MkHtmlElement(elem) }
+
+      override predicate hasLocationInfo(
+        string filepath, int startline, int startcolumn, int endline, int endcolumn
+      ) {
+        elem.getLocation().hasLocationInfo(filepath, startline, startcolumn, endline, endcolumn)
+      }
+
+      override string getName() { result = elem.getName() }
+
+      HTML::Element getElement() { result = elem }
+    }
   }
 
 }

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

@@ -0,0 +1,12 @@
+| single-component-file-1.vue:1:1:3:11 | <template>...</> |
+| single-component-file-1.vue:2:5:10:8 | <p>...</> |
+| single-component-file-1.vue:4:1:8:9 | <script>...</> |
+| single-component-file-1.vue:9:1:10:8 | <style>...</> |
+| single-file-component-2.vue:1:1:3:11 | <template>...</> |
+| single-file-component-2.vue:2:5:11:8 | <p>...</> |
+| single-file-component-2.vue:4:1:9:9 | <script>...</> |
+| single-file-component-2.vue:10:1:11:8 | <style>...</> |
+| single-file-component-3.vue:1:1:3:11 | <template>...</> |
+| single-file-component-3.vue:2:5:7:8 | <p>...</> |
+| single-file-component-3.vue:4:1:5:9 | <script>...</> |
+| single-file-component-3.vue:6:1:7:8 | <style>...</> |

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

@@ -0,0 +1,3 @@
+import javascript
+
+select any(Vue::Template::Element e)