add tree-sitter-heex

HEEx is a templating engine on top of Elixir's EEx templating
language specific to HTML that is included in Phoenix.LiveView
(though I think the plan is to eventually include it in base
Phoenix). It's a superset of EEx with some additional features
like components and slots.

The injections don't work perfectly because the Elixir grammar is
newline sensitive (the _terminator rule). See
https://github.com/elixir-lang/tree-sitter-elixir/issues/24
for more information.

2 files changed, 79 insertions, 0 deletions

diff --git a/runtime/queries/heex/highlights.scm b/runtime/queries/heex/highlights.scm
new file mode 100644
index 00000000..301f57c8
--- /dev/null
+++ b/runtime/queries/heex/highlights.scm
@@ -0,0 +1,58 @@
+; https://github.com/connorlay/tree-sitter-heex/blob/592e22292a367312c35e13de7fdb888f029981d6/queries/highlights.scm
+; HEEx delimiters
+[
+  "<!"
+  "<!--"
+  "<"
+  "<%!--"
+  "<%#"
+  ">"
+  "</"
+  "--%>"
+  "-->"
+  "/>"
+  "{"
+  "}"
+  ; These could be `@keyword`s but the closing `>` wouldn't be highlighted
+  ; as `@keyword`
+  "<:"
+  "</:"
+] @punctuation.bracket
+
+; Non-comment or tag delimiters
+[
+  "<%"
+  "<%="
+  "<%%="
+  "%>"
+] @keyword
+
+; HEEx operators are highlighted as such
+"=" @operator
+
+; HEEx inherits the DOCTYPE tag from HTML
+(doctype) @constant
+
+; HEEx comments are highlighted as such
+(comment) @comment
+
+; HEEx tags are highlighted as HTML
+(tag_name) @tag
+
+; HEEx slots are highlighted as atoms (symbols)
+(slot_name) @string.special.symbol
+
+; HEEx attributes are highlighted as HTML attributes
+(attribute_name) @attribute
+[
+  (attribute_value)
+  (quoted_attribute_value)
+] @string
+
+; HEEx components are highlighted as Elixir modules and functions
+(component_name
+  [
+    (module) @module
+    (function) @function
+    "." @punctuation.delimiter
+  ])
diff --git a/runtime/queries/heex/injections.scm b/runtime/queries/heex/injections.scm
new file mode 100644
index 00000000..ad4e4faa
--- /dev/null
+++ b/runtime/queries/heex/injections.scm
@@ -0,0 +1,21 @@
+; https://github.com/connorlay/tree-sitter-heex/blob/592e22292a367312c35e13de7fdb888f029981d6/queries/injections.scm
+; directives are standalone tags like '<%= @x %>'
+;
+; partial_expression_values are elixir code that is part of an expression that
+; spans multiple directive nodes, so they must be combined. For example:
+;     <%= if true do %>
+;       <p>hello, tree-sitter!</p>
+;     <% end %>
+((directive (partial_expression_value) @injection.content)
+ (#set! injection.language "elixir")
+ (#set! injection.include-children)
+ (#set! injection.combined))
+
+; Regular expression_values do not need to be combined
+((directive (expression_value) @injection.content)
+ (#set! injection.language "elixir"))
+
+; expressions live within HTML tags, and do not need to be combined
+;     <link href={ Routes.static_path(..) } />
+((expression (expression_value) @injection.content)
+ (#set! injection.language "elixir"))