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"
  }
  ]
  },