AstroJSX syntax [WIP]

packages/vscode/package.json

@@ -162,8 +162,7 @@
           "source.stylus": "stylus",
           "source.js": "javascript",
           "source.ts": "typescript",
-          "source.json": "json",
-          "source.tsx": "typescriptreact"
+          "source.json": "json"
         },
         "unbalancedBracketScopes": [
           "keyword.operator.relational",
@@ -176,19 +175,24 @@
       {
         "scopeName": "text.html.markdown.astro",
         "path": "./syntaxes/markdown.astro.tmLanguage.json",
-        "injectTo": ["text.html.markdown", "source.astro"],
+        "injectTo": ["text.html.markdown"],
         "embeddedLanguages": {
           "meta.embedded.block.astro": "astro",
           "meta.embedded.block.astro.frontmatter": "typescriptreact"
         }
+      },
+      {
+        "scopeName": "source.astroJSX",
+        "path": "./syntaxes/astroJSX.tmLanguage.json",
+        "injectTo": ["source.astro"]
       }
     ]
   },
   "scripts": {
     "prebuild": "cd ../ts-plugin && pnpm build",
     "build": "pnpm prebuild && node scripts/build.mjs -- --minify",
     "dev": "node scripts/build.mjs -- --watch",
-    "build:grammar": "npx js-yaml syntaxes/astro.tmLanguage.src.yaml > syntaxes/astro.tmLanguage.json",
+    "build:grammar": "npx js-yaml syntaxes/astro.tmLanguage.src.yaml > syntaxes/astro.tmLanguage.json && npx js-yaml syntaxes/astroJSX.tmLanguage.src.yaml > syntaxes/astroJSX.tmLanguage.json",
     "test": "pnpm test:vscode && pnpm test:grammar",
     "test:vscode": "node ./test/runTest.js",
     "test:grammar": "pnpm build:grammar && node ./test/grammar/test.mjs",

packages/vscode/syntaxes/astro.tmLanguage.json

@@ -248,7 +248,7 @@
               "name": "punctuation.section.embedded.end.astro"
             }
           },
-          "contentName": "meta.embedded.expression.astro source.tsx",
+          "contentName": "meta.embedded.expression.astro source.astroJSX",
           "patterns": [
             {
               "begin": "\\G\\s*(?={)",
@@ -260,7 +260,7 @@
               ]
             },
             {
-              "include": "source.tsx"
+              "include": "source.astroJSX"
             }
           ]
         }

packages/vscode/syntaxes/astro.tmLanguage.src.yaml

@@ -222,13 +222,13 @@ repository:
         end: \}
         beginCaptures: { 0: { name: punctuation.section.embedded.begin.astro } }
         endCaptures: { 0: { name: punctuation.section.embedded.end.astro } }
-        contentName: meta.embedded.expression.astro source.tsx
+        contentName: meta.embedded.expression.astro source.astroJSX
         patterns:
           # Object literals - usually used within attributes.
           - begin: \G\s*(?={)
             end: (?<=})
             patterns: [include: source.tsx#object-literal]
-          - include: source.tsx
+          - include: source.astroJSX
 
   # Entities
   # Adapted from https://github.com/microsoft/vscode/blob/12605e53052114df3ac512c59936e69c331f0337/extensions/html/syntaxes/html.tmLanguage.json#L532

packages/vscode/syntaxes/astroJSX.tmLanguage.json

@@ -0,0 +1,37 @@
+{
+  "name": "AstroJSX",
+  "scopeName": "source.astroJSX",
+  "patterns": [
+    {
+      "include": "#comments"
+    },
+    {
+      "include": "#jsx"
+    }
+  ],
+  "repository": {
+    "comments": {
+      "begin": "<!--",
+      "end": "-->",
+      "captures": {
+        "0": {
+          "name": "punctuation.definition.comment.astroJSX"
+        }
+      },
+      "name": "comment.block.astroJSX",
+      "patterns": [
+        {
+          "match": "\\G-?>|<!--(?!>)|<!-(?=-->)|--!>",
+          "name": "invalid.illegal.characters-not-allowed-here.astroJSX"
+        }
+      ]
+    },
+    "jsx": {
+      "patterns": [
+        {
+          "include": "source.js.jsx"
+        }
+      ]
+    }
+  }
+}

packages/vscode/syntaxes/astroJSX.tmLanguage.src.yaml

@@ -0,0 +1,36 @@
+---
+# Let's take down Microsoft! 🦜🏴‍☠️
+# Astro expression syntax is really similar to JSX, but it's not JSX.
+# So, we need to create a new syntax for it, where we include the JSX syntax as a base,
+# and add some Astro specific patterns over it.
+name: AstroJSX
+scopeName: source.astroJSX
+
+patterns:
+  - include: '#comments'
+  - include: '#jsx'
+
+repository:
+  # ----------
+  # HTML PATTERNS
+
+  # Basic HTML comments - not supported by JSX in expressions, but Astro does.
+  comments:
+    begin: <!--
+    end: -->
+    captures:
+      0: { name: punctuation.definition.comment.astroJSX }
+    name: comment.block.astroJSX
+    patterns:
+      # Validations
+      - {
+          match: '\G-?>|<!--(?!>)|<!-(?=-->)|--!>',
+          name: invalid.illegal.characters-not-allowed-here.astroJSX,
+        }
+
+  # ----------
+  # JSX PATTERNS
+  # The foundation for AstroJSX.
+  jsx:
+    patterns:
+      - include: 'source.js.jsx'

packages/vscode/syntaxes/markdown.astro.tmLanguage.json

@@ -49,7 +49,7 @@
               "contentName": "meta.embedded.block.astro.frontmatter",
               "patterns": [
                 {
-                  "include": "source.tsx"
+                  "include": "source.ts"
                 }
               ]
             },