Semantic highlighting: show brackets in jsx like TypeScript does.

This is done in two places:
The textmate grammar handles the cases that can be figured out locally:
- "<" in "<div ..."
- "</"
- "/>"
- "<>"
- "</>"

Semantic highlighting handles the cases that cannot be figured out locally:
- ">" in "<div __props__>"
- ">" in "</div>"

These cases can't be figures out locally as on the lhs of ">" there could be pretty much anything.

Author: cristianoc

analysis/src/SemanticTokens.ml

@@ -99,8 +99,8 @@ let emitFromLoc ~loc ~type_ emitter =
   emitter |> emitFromPos posStart posEnd ~type_
 
 let emitLongident ?(backwards = false) ?(jsx = false)
-    ?(lowerCaseToken = if jsx then Token.JsxTag else Variable)
-    ?(upperCaseToken = Token.Namespace) ~pos ~lid ~debug emitter =
+    ?(lowerCaseToken = Token.Variable) ?(upperCaseToken = Token.Namespace) ~pos
+    ~lid ~debug emitter =
   let rec flatten acc lid =
     match lid with
     | Longident.Lident txt -> txt :: acc
@@ -148,6 +148,10 @@ let emitJsxOpen ~lid ~debug ~loc emitter =
 let emitJsxClose ~lid ~debug ~pos emitter =
   emitter |> emitLongident ~backwards:true ~pos ~lid ~jsx:true ~debug
 
+let emitJsxTag ~debug ~pos emitter =
+  if debug then Printf.printf "JsxTag >: %s\n" (posToString pos);
+  emitter |> emitFromPos pos (fst pos, snd pos + 1) ~type_:Token.JsxTag
+
 let emitType ~id ~debug ~loc emitter =
   if debug then Printf.printf "Type: %s %s\n" id (locToString loc);
   emitter |> emitFromLoc ~loc ~type_:Token.Type
@@ -227,10 +231,25 @@ let parser ~debug ~emitter ~path =
        let lineEnd, colEnd = Utils.tupleOfLexing pexp_loc.loc_end in
        let length = if lineStart = lineEnd then colEnd - colStart else 0 in
        let lineEndWhole, colEndWhole = Utils.tupleOfLexing e.pexp_loc.loc_end in
-       if length > 0 && colEndWhole > length then
+       if length > 0 && colEndWhole > length then (
          emitter
          |> emitJsxClose ~debug ~lid:lident.txt
-              ~pos:(lineEndWhole, colEndWhole - 1));
+              ~pos:(lineEndWhole, colEndWhole - 1);
+
+         let rec emitGreatherthanAfterProps args =
+           match args with
+           | (Asttypes.Labelled "children", {Parsetree.pexp_loc = {loc_start}})
+             :: _ ->
+             emitter |> emitJsxTag ~debug ~pos:(Utils.tupleOfLexing loc_start)
+           | _ :: args -> emitGreatherthanAfterProps args
+           | [] -> ()
+         in
+         emitGreatherthanAfterProps args (* <foo ...props > <-- *);
+         emitter (* <foo> ... </foo> <-- *)
+         |> emitJsxTag ~debug
+              ~pos:
+                (let pos = Utils.tupleOfLexing e.pexp_loc.loc_end in
+                 (fst pos, snd pos - 1))));
       (* only process again arguments, not the jsx label *)
       let _ = args |> List.map (fun (_lbl, arg) -> mapper.expr mapper arg) in
       e

analysis/tests/src/expected/Parser.res.txt

@@ -8,14 +8,18 @@ Variable: _c (4,4)->(4,6)
 Ldot: M (6,11) Namespace
 Lident: C (6,13) Namespace
 Variable: _mc (6,4)->(6,7)
-Lident: div (8,10) JsxTag
+Lident: div (8,10) Variable
 Variable: _d (8,4)->(8,6)
-Lident: div (11,3) JsxTag
-Lident: div (16,4) JsxTag
+Lident: div (11,3) Variable
+Lident: div (16,4) Variable
+JsxTag >: (11,6)
+JsxTag >: (16,7)
 Ldot: React (12,5) Namespace
 Lident: string (12,11) Variable
-Lident: div (13,5) JsxTag
-Lident: div (13,34) JsxTag
+Lident: div (13,5) Variable
+Lident: div (13,34) Variable
+JsxTag >: (13,8)
+JsxTag >: (13,37)
 Ldot: React (13,11) Namespace
 Lident: string (13,17) Variable
 Ldot: React (14,5) Namespace
@@ -75,7 +79,9 @@ Variable: world (69,24)->(69,30)
 Variable: x (69,21)->(69,22)
 Variable: add (69,4)->(69,7)
 Lident: add (71,8) Variable
-Lident: div (73,9) JsxTag
-Lident: div (73,36) JsxTag
-Lident: div (73,27) JsxTag
+Lident: div (73,9) Variable
+Lident: div (73,36) Variable
+JsxTag >: (73,24)
+JsxTag >: (73,39)
+Lident: div (73,27) Variable
 

grammars/rescript.tmLanguage.json

@@ -344,22 +344,48 @@
     "jsx": {
       "patterns": [
         {
-          "match": "<>|</>|/>"
+          "match": "<>|</>|/>",
+          "name": "punctuation.definition.tag"
         },
         {
           "match": "</([A-Z_][0-9a-zA-Z_]*)",
           "captures": {
+            "0": {
+              "name": "punctuation.definition.tag"
+            },
             "1": {
               "name": "entity.name.namespace"
             }
           }
         },
         {
-          "match": "</([a-z_][0-9a-zA-Z_]*)"
+          "match": "</([a-z_][0-9a-zA-Z_]*)",
+          "captures": {
+            "0": {
+              "name": "punctuation.definition.tag"
+            },
+            "1": {
+              "name": "variable"
+            }
+          }
+        },
+        {
+          "match": "<([a-z_][0-9a-zA-Z_]*)",
+          "captures": {
+            "0": {
+              "name": "punctuation.definition.tag"
+            },
+            "1": {
+              "name": "variable"
+            }
+          }
         },
         {
           "match": "<([A-Z_][0-9a-zA-Z_]*)",
           "captures": {
+            "0": {
+              "name": "punctuation.definition.tag"
+            },
             "1": {
               "name": "entity.name.namespace"
             }

package.json

@@ -31,7 +31,7 @@
 		"semanticTokenScopes": [
 			{
 				"scopes": {
-					"jsx-tag": ["entity.name.tag"]
+					"jsx-tag": ["punctuation.definition.tag"]
 				}
 			}
 		],