separate JSX queries from javascript (#1921)

It looks like a24fb17b2a (and
855e438f55) 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`.

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 | ✓ |  |  |  |

languages.toml

@@ -290,6 +290,17 @@ args = { program = "{0}" }
 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"

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
 ;--------------------
 

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)

runtime/queries/jsx/indents.scm

@@ -0,0 +1 @@
+; inherits: javascript

runtime/queries/jsx/injections.scm

@@ -0,0 +1 @@
+; inherits: javascript

runtime/queries/jsx/locals.scm

@@ -0,0 +1 @@
+; inherits: javascript