git.iko.soy/helix
on master help sign in
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`.

commitffdc2f179334de82383670faed68acfc54317f55 authorMichael Davis <mcarsondavis@gmail.com> dateFri 1 Apr 2022, 20:07 (5 years ago) parentdeb7ee6
7 files changed+42−30
compare with master
unifiedsplit
book/src/generated/lang-support.md+1 languages.toml+11 runtime/queries/javascript/highlights.scm−30 runtime/queries/jsx/highlights.scm+27 runtime/queries/jsx/indents.scm+1 runtime/queries/jsx/injections.scm+1 runtime/queries/jsx/locals.scm+1
book/src/generated/lang-support.md+1
@@ -28,6 +28,7 @@
2828| java | ✓ | | | |
2929| javascript | ✓ | | ✓ | `typescript-language-server` |
3030| json | ✓ | | ✓ | |
31+| jsx | ✓ | | ✓ | `typescript-language-server` |
3132| julia | ✓ | | | `julia` |
3233| kotlin | ✓ | | | `kotlin-language-server` |
3334| latex | ✓ | | | |
languages.toml+11
@@ -290,6 +290,17 @@ args = { program = "{0}" }
290290name = "javascript"
291291source = { git = "https://github.com/tree-sitter/tree-sitter-javascript", rev = "4a95461c4761c624f2263725aca79eeaefd36cad" }
292292
293+[[language]]
294+name = "jsx"
295+scope = "source.jsx"
296+injection-regex = "jsx"
297+file-types = ["jsx"]
298+roots = []
299+comment-token = "//"
300+language-server = { command = "typescript-language-server", args = ["--stdio"], language-id = "javascript" }
301+indent = { tab-width = 2, unit = " " }
302+grammar = "javascript"
303+
293304[[language]]
294305name = "typescript"
295306scope = "source.ts"
runtime/queries/javascript/highlights.scm−30
@@ -1,33 +1,3 @@
1−; JSX
2−;----
3−
4−; Highlight component names differently
5−
6−(jsx_opening_element ((identifier) @constructor
7− (#match? @constructor "^[A-Z]")))
8−
9−; Handle the dot operator effectively - <My.Component>
10−(jsx_opening_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
11−
12−(jsx_closing_element ((identifier) @constructor
13− (#match? @constructor "^[A-Z]")))
14−
15−; Handle the dot operator effectively - </My.Component>
16−(jsx_closing_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
17−
18−(jsx_self_closing_element ((identifier) @constructor
19− (#match? @constructor "^[A-Z]")))
20−
21−; Handle the dot operator effectively - <My.Component />
22−(jsx_self_closing_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
23−
24−; TODO: also tag @punctuation.delimiter?
25−
26−(jsx_opening_element (identifier) @tag)
27−(jsx_closing_element (identifier) @tag)
28−(jsx_self_closing_element (identifier) @tag)
29−(jsx_attribute (property_identifier) @variable.other.member)
30−
311; Special identifiers
322;--------------------
333
runtime/queries/jsx/highlights.scmnew file+27
@@ -0,0 +1,27 @@
1+; inherits: javascript
2+
3+; Highlight component names differently
4+(jsx_opening_element ((identifier) @constructor
5+ (#match? @constructor "^[A-Z]")))
6+
7+; Handle the dot operator effectively - <My.Component>
8+(jsx_opening_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
9+
10+(jsx_closing_element ((identifier) @constructor
11+ (#match? @constructor "^[A-Z]")))
12+
13+; Handle the dot operator effectively - </My.Component>
14+(jsx_closing_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
15+
16+(jsx_self_closing_element ((identifier) @constructor
17+ (#match? @constructor "^[A-Z]")))
18+
19+; Handle the dot operator effectively - <My.Component />
20+(jsx_self_closing_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
21+
22+; TODO: also tag @punctuation.delimiter?
23+
24+(jsx_opening_element (identifier) @tag)
25+(jsx_closing_element (identifier) @tag)
26+(jsx_self_closing_element (identifier) @tag)
27+(jsx_attribute (property_identifier) @variable.other.member)
runtime/queries/jsx/indents.scmnew file+1
@@ -0,0 +1 @@
1+; inherits: javascript
runtime/queries/jsx/injections.scmnew file+1
@@ -0,0 +1 @@
1+; inherits: javascript
runtime/queries/jsx/locals.scmnew file+1
@@ -0,0 +1 @@
1+; inherits: javascript