fix: various fixes for JSX

tree-sitter · Jul 11, 2023 · bb1f97b · bb1f97b
1 parent 5720b24
commit bb1f97b
Show file tree

Hide file tree

Showing 7 changed files with 40,556 additions and 41,420 deletions.
diff --git a/grammar.js b/grammar.js
@@ -457,7 +457,6 @@ module.exports = grammar({
       $.primary_expression,
       $.glimmer_template,
       $._jsx_element,
-      $.jsx_fragment,
       $.assignment_expression,
       $.augmented_assignment_expression,
       $.await_expression,
@@ -589,9 +588,11 @@ module.exports = grammar({
       field('close_tag', $.jsx_closing_element)
     ),
 
-    jsx_fragment: $ => seq('<', '>', repeat($._jsx_child), '<', '/', '>'),
-
-    jsx_text: $ => /[^{}<>]+/,
+    // Should not contain new lines and should not start or end with a space
+    jsx_text: $ => choice(
+      /[^{}<>\n ]([^{}<>\n]*[^{}<>\n ])?/,
+      /\/\/[^\n]*/,
+    ),
 
     jsx_expression: $ => seq(
       '{',
@@ -606,14 +607,15 @@ module.exports = grammar({
     _jsx_child: $ => choice(
       $.jsx_text,
       $._jsx_element,
-      $.jsx_fragment,
       $.jsx_expression
     ),
 
     jsx_opening_element: $ => prec.dynamic(-1, seq(
       '<',
-      field('name', $._jsx_element_name),
-      repeat(field('attribute', $._jsx_attribute)),
+      optional(seq(
+        field('name', $._jsx_element_name),
+        repeat(field('attribute', $._jsx_attribute)),
+      )),
       '>'
     )),
 
@@ -625,32 +627,30 @@ module.exports = grammar({
     ),
 
     nested_identifier: $ => prec('member', seq(
-      choice($.identifier, $.nested_identifier),
+      choice($.identifier, alias($.nested_identifier, $.member_expression)),
       '.',
-      $.identifier
+      alias($.identifier, $.property_identifier),
     )),
 
     jsx_namespace_name: $ => seq($._jsx_identifier, ':', $._jsx_identifier),
 
     _jsx_element_name: $ => choice(
       $._jsx_identifier,
-      $.nested_identifier,
+      alias($.nested_identifier, $.member_expression),
       $.jsx_namespace_name,
     ),
 
     jsx_closing_element: $ => seq(
-      '<',
-      '/',
-      field('name', $._jsx_element_name),
+      '</',
+      optional(field('name', $._jsx_element_name)),
       '>'
     ),
 
     jsx_self_closing_element: $ => seq(
       '<',
       field('name', $._jsx_element_name),
       repeat(field('attribute', $._jsx_attribute)),
-      '/',
-      '>'
+      '/>'
     ),
 
     _jsx_attribute: $ => choice($.jsx_attribute, $.jsx_expression),
@@ -669,7 +669,6 @@ module.exports = grammar({
       $.string,
       $.jsx_expression,
       $._jsx_element,
-      $.jsx_fragment
     ),
 
     class: $ => prec('literal', seq(

diff --git a/queries/highlights-jsx.scm b/queries/highlights-jsx.scm
@@ -1,4 +1,8 @@
-(jsx_opening_element (identifier) @tag)
-(jsx_closing_element (identifier) @tag)
-(jsx_self_closing_element (identifier) @tag)
+(jsx_opening_element (identifier) @tag (#match? @tag "^[a-z][^.]*$"))
+(jsx_closing_element (identifier) @tag (#match? @tag "^[a-z][^.]*$"))
+(jsx_self_closing_element (identifier) @tag (#match? @tag "^[a-z][^.]*$"))
+
 (jsx_attribute (property_identifier) @attribute)
+(jsx_opening_element (["<" ">"]) @punctuation.bracket)
+(jsx_closing_element (["</" ">"]) @punctuation.bracket)
+(jsx_self_closing_element (["<" "/>"]) @punctuation.bracket)
diff --git a/src/grammar.json b/src/grammar.json
@@ -1648,10 +1648,6 @@
           "type": "SYMBOL",
           "name": "_jsx_element"
         },
-        {
-          "type": "SYMBOL",
-          "name": "jsx_fragment"
-        },
         {
           "type": "SYMBOL",
           "name": "assignment_expression"
@@ -2445,42 +2441,19 @@
         }
       ]
     },
-    "jsx_fragment": {
-      "type": "SEQ",
+    "jsx_text": {
+      "type": "CHOICE",
       "members": [
         {
-          "type": "STRING",
-          "value": "<"
-        },
-        {
-          "type": "STRING",
-          "value": ">"
-        },
-        {
-          "type": "REPEAT",
-          "content": {
-            "type": "SYMBOL",
-            "name": "_jsx_child"
-          }
-        },
-        {
-          "type": "STRING",
-          "value": "<"
-        },
-        {
-          "type": "STRING",
-          "value": "/"
+          "type": "PATTERN",
+          "value": "[^{}<>\\n ]([^{}<>\\n]*[^{}<>\\n ])?"
         },
         {
-          "type": "STRING",
-          "value": ">"
+          "type": "PATTERN",
+          "value": "\\/\\/[^\\n]*"
         }
       ]
     },
-    "jsx_text": {
-      "type": "PATTERN",
-      "value": "[^{}<>]+"
-    },
     "jsx_expression": {
       "type": "SEQ",
       "members": [
@@ -2530,10 +2503,6 @@
           "type": "SYMBOL",
           "name": "_jsx_element"
         },
-        {
-          "type": "SYMBOL",
-          "name": "jsx_fragment"
-        },
         {
           "type": "SYMBOL",
           "name": "jsx_expression"
@@ -2551,23 +2520,36 @@
             "value": "<"
           },
           {
-            "type": "FIELD",
-            "name": "name",
-            "content": {
-              "type": "SYMBOL",
-              "name": "_jsx_element_name"
-            }
-          },
-          {
-            "type": "REPEAT",
-            "content": {
-              "type": "FIELD",
-              "name": "attribute",
-              "content": {
-                "type": "SYMBOL",
-                "name": "_jsx_attribute"
+            "type": "CHOICE",
+            "members": [
+              {
+                "type": "SEQ",
+                "members": [
+                  {
+                    "type": "FIELD",
+                    "name": "name",
+                    "content": {
+                      "type": "SYMBOL",
+                      "name": "_jsx_element_name"
+                    }
+                  },
+                  {
+                    "type": "REPEAT",
+                    "content": {
+                      "type": "FIELD",
+                      "name": "attribute",
+                      "content": {
+                        "type": "SYMBOL",
+                        "name": "_jsx_attribute"
+                      }
+                    }
+                  }
+                ]
+              },
+              {
+                "type": "BLANK"
               }
-            }
+            ]
           },
           {
             "type": "STRING",
@@ -2612,8 +2594,13 @@
                 "name": "identifier"
               },
               {
-                "type": "SYMBOL",
-                "name": "nested_identifier"
+                "type": "ALIAS",
+                "content": {
+                  "type": "SYMBOL",
+                  "name": "nested_identifier"
+                },
+                "named": true,
+                "value": "member_expression"
               }
             ]
           },
@@ -2622,8 +2609,13 @@
             "value": "."
           },
           {
-            "type": "SYMBOL",
-            "name": "identifier"
+            "type": "ALIAS",
+            "content": {
+              "type": "SYMBOL",
+              "name": "identifier"
+            },
+            "named": true,
+            "value": "property_identifier"
           }
         ]
       }
@@ -2653,8 +2645,13 @@
           "name": "_jsx_identifier"
         },
         {
-          "type": "SYMBOL",
-          "name": "nested_identifier"
+          "type": "ALIAS",
+          "content": {
+            "type": "SYMBOL",
+            "name": "nested_identifier"
+          },
+          "named": true,
+          "value": "member_expression"
         },
         {
           "type": "SYMBOL",
@@ -2667,19 +2664,23 @@
       "members": [
         {
           "type": "STRING",
-          "value": "<"
-        },
-        {
-          "type": "STRING",
-          "value": "/"
+          "value": "</"
         },
         {
-          "type": "FIELD",
-          "name": "name",
-          "content": {
-            "type": "SYMBOL",
-            "name": "_jsx_element_name"
-          }
+          "type": "CHOICE",
+          "members": [
+            {
+              "type": "FIELD",
+              "name": "name",
+              "content": {
+                "type": "SYMBOL",
+                "name": "_jsx_element_name"
+              }
+            },
+            {
+              "type": "BLANK"
+            }
+          ]
         },
         {
           "type": "STRING",
@@ -2715,11 +2716,7 @@
         },
         {
           "type": "STRING",
-          "value": "/"
-        },
-        {
-          "type": "STRING",
-          "value": ">"
+          "value": "/>"
         }
       ]
     },
@@ -2798,10 +2795,6 @@
         {
           "type": "SYMBOL",
           "name": "_jsx_element"
-        },
-        {
-          "type": "SYMBOL",
-          "name": "jsx_fragment"
         }
       ]
     },