separate JSX queries from javascript (#1921)

It looks like a24fb17b2a978d3165bd6304e9edd69bddb6dd82 (and
855e438f55cb278de8203ac4911561c4c7ad656c) broke the typescript
highlights because typescript

    ; inherits: javascript

but it doesn't have those named nodes in its grammar.

So instead we can separate out JSX into its own language and copy
over everything from javascript and supplement it with the new
JSX highlights. Luckily there isn't too much duplication, just the
language configuration parts - we can re-use the parser with the
languages.toml `grammar` key and most of the queries with `inherits`.

7 files changed, 42 insertions, 30 deletions

diff --git a/book/src/generated/lang-support.md b/book/src/generated/lang-support.md
index 34e65e46..8c1a78c8 100644
--- a/book/src/generated/lang-support.md
+++ b/book/src/generated/lang-support.md
@@ -28,6 +28,7 @@
 | java | ✓ |  |  |  |
 | javascript | ✓ |  | ✓ | `typescript-language-server` |
 | json | ✓ |  | ✓ |  |
+| jsx | ✓ |  | ✓ | `typescript-language-server` |
 | julia | ✓ |  |  | `julia` |
 | kotlin | ✓ |  |  | `kotlin-language-server` |
 | latex | ✓ |  |  |  |
diff --git a/languages.toml b/languages.toml
index ff8e7dfb..d12093a4 100644
--- a/languages.toml
+++ b/languages.toml
@@ -291,6 +291,17 @@ name = "javascript"
 source = { git = "https://github.com/tree-sitter/tree-sitter-javascript", rev = "4a95461c4761c624f2263725aca79eeaefd36cad" }
 
 [[language]]
+name = "jsx"
+scope = "source.jsx"
+injection-regex = "jsx"
+file-types = ["jsx"]
+roots = []
+comment-token = "//"
+language-server = { command = "typescript-language-server", args = ["--stdio"], language-id = "javascript" }
+indent = { tab-width = 2, unit = "  " }
+grammar = "javascript"
+
+[[language]]
 name = "typescript"
 scope = "source.ts"
 injection-regex = "^(ts|typescript)$"
diff --git a/runtime/queries/javascript/highlights.scm b/runtime/queries/javascript/highlights.scm
index ccc58a9e..6163b680 100644
--- a/runtime/queries/javascript/highlights.scm
+++ b/runtime/queries/javascript/highlights.scm
@@ -1,33 +1,3 @@
-; JSX
-;----
-
-; Highlight component names differently
-
-(jsx_opening_element ((identifier) @constructor
- (#match? @constructor "^[A-Z]")))
-
-; Handle the dot operator effectively - <My.Component>
-(jsx_opening_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
-
-(jsx_closing_element ((identifier) @constructor
- (#match? @constructor "^[A-Z]")))
-
-; Handle the dot operator effectively - </My.Component>
-(jsx_closing_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
-
-(jsx_self_closing_element ((identifier) @constructor
- (#match? @constructor "^[A-Z]")))
-
-; Handle the dot operator effectively - <My.Component />
-(jsx_self_closing_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
-
-; TODO: also tag @punctuation.delimiter?
-
-(jsx_opening_element (identifier) @tag)
-(jsx_closing_element (identifier) @tag)
-(jsx_self_closing_element (identifier) @tag)
-(jsx_attribute (property_identifier) @variable.other.member)
-
 ; Special identifiers
 ;--------------------
 
diff --git a/runtime/queries/jsx/highlights.scm b/runtime/queries/jsx/highlights.scm
new file mode 100644
index 00000000..9be5f517
--- /dev/null
+++ b/runtime/queries/jsx/highlights.scm
@@ -0,0 +1,27 @@
+; inherits: javascript
+
+; Highlight component names differently
+(jsx_opening_element ((identifier) @constructor
+ (#match? @constructor "^[A-Z]")))
+
+; Handle the dot operator effectively - <My.Component>
+(jsx_opening_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
+
+(jsx_closing_element ((identifier) @constructor
+ (#match? @constructor "^[A-Z]")))
+
+; Handle the dot operator effectively - </My.Component>
+(jsx_closing_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
+
+(jsx_self_closing_element ((identifier) @constructor
+ (#match? @constructor "^[A-Z]")))
+
+; Handle the dot operator effectively - <My.Component />
+(jsx_self_closing_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
+
+; TODO: also tag @punctuation.delimiter?
+
+(jsx_opening_element (identifier) @tag)
+(jsx_closing_element (identifier) @tag)
+(jsx_self_closing_element (identifier) @tag)
+(jsx_attribute (property_identifier) @variable.other.member)
diff --git a/runtime/queries/jsx/indents.scm b/runtime/queries/jsx/indents.scm
new file mode 100644
index 00000000..ff0ddfac
--- /dev/null
+++ b/runtime/queries/jsx/indents.scm
@@ -0,0 +1 @@
+; inherits: javascript
diff --git a/runtime/queries/jsx/injections.scm b/runtime/queries/jsx/injections.scm
new file mode 100644
index 00000000..ff0ddfac
--- /dev/null
+++ b/runtime/queries/jsx/injections.scm
@@ -0,0 +1 @@
+; inherits: javascript
diff --git a/runtime/queries/jsx/locals.scm b/runtime/queries/jsx/locals.scm
new file mode 100644
index 00000000..ff0ddfac
--- /dev/null
+++ b/runtime/queries/jsx/locals.scm
@@ -0,0 +1 @@
+; inherits: javascript