Skip to content

Commit

Permalink
separate JSX queries from javascript
Browse files Browse the repository at this point in the history
It looks like a24fb17 (and
855e438) 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`.
  • Loading branch information
the-mikedavis committed Apr 1, 2022
1 parent deb7ee6 commit 0482552
Show file tree
Hide file tree
Showing 6 changed files with 41 additions and 30 deletions.
11 changes: 11 additions & 0 deletions languages.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
30 changes: 0 additions & 30 deletions runtime/queries/javascript/highlights.scm
Original file line number Diff line number Diff line change
@@ -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
;--------------------

Expand Down
27 changes: 27 additions & 0 deletions runtime/queries/jsx/highlights.scm
Original file line number Diff line number Diff line change
@@ -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)
1 change: 1 addition & 0 deletions runtime/queries/jsx/indents.scm
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
; inherits: javascript
1 change: 1 addition & 0 deletions runtime/queries/jsx/injections.scm
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
; inherits: javascript
1 change: 1 addition & 0 deletions runtime/queries/jsx/locals.scm
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
; inherits: javascript

0 comments on commit 0482552

Please sign in to comment.