Syntax and language configuration fixes and improvements (#286)

withastro · May 20, 2022 · fec2817 · fec2817
1 parent 7c0d09f
commit fec2817
Show file tree

Hide file tree

Showing 51 changed files with 869 additions and 49 deletions.
diff --git a/.changeset/selfish-icons-breathe.md b/.changeset/selfish-icons-breathe.md
@@ -0,0 +1,5 @@
+---
+'astro-vscode': patch
+---
+
+Improved syntax highlighting, auto-indentation and auto-closing
diff --git a/packages/vscode/languages/astro-language-configuration.json b/packages/vscode/languages/astro-language-configuration.json
@@ -3,11 +3,9 @@
     "blockComment": ["<!--", "-->"]
   },
   "brackets": [
-    ["---", "---"],
     ["<!--", "-->"],
     ["<", ">"],
-    ["{", "}"],
-    ["(", ")"]
+    ["{", "}"]
   ],
   "autoClosingPairs": [
     { "open": "{", "close": "}" },
@@ -16,13 +14,15 @@
     { "open": "'", "close": "'" },
     { "open": "\"", "close": "\"" },
     { "open": "`", "close": "`" },
-    { "open": "<!--", "close": "-->", "notIn": ["comment", "string"] },
+    { "open": "{/*", "close": " */}", "notIn": ["comment", "string"] },
+    { "open": "<!--", "close": " -->", "notIn": ["comment", "string"] },
     { "open": "/**", "close": " */", "notIn": ["string"] }
   ],
   "autoCloseBefore": ";:.,=}])>` \n\t",
   "surroundingPairs": [
     { "open": "'", "close": "'" },
     { "open": "\"", "close": "\"" },
+    { "open": "`", "close": "`" },
     { "open": "{", "close": "}" },
     { "open": "[", "close": "]" },
     { "open": "(", "close": ")" },
@@ -33,5 +33,36 @@
       "start": "^\\s*<!--\\s*#region\\b.*-->",
       "end": "^\\s*<!--\\s*#endregion\\b.*-->"
     }
+  },
+  "wordPattern": {
+    "pattern": "([^\\-\\s]+-[^\\-\\s]+)|(-?\\d*\\.\\d\\w*)|([^\\`\\~\\-\\!\\@\\$\\^\\&\\*\\(\\)\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:'\"\\,\\.\\<\\>\\/\\s]+)"
+  },
+  "onEnterRules": [
+    {
+      "beforeText": {
+        "pattern": "<(?!(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr))([_:\\w][_:\\w\\-.\\d]*)([^/>]*(?!/)>)[^<]*$",
+        "flags": "i"
+      },
+      "afterText": {
+        "pattern": "^<\\/([_:\\w][_:\\w-.\\d]*)\\s*>$",
+        "flags": "i"
+      },
+      "action": {
+        "indent": "indentOutdent"
+      }
+    },
+    {
+      "beforeText": {
+        "pattern": "<(?!(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr))([_:\\w][_:\\w\\-.\\d]*)([^/>]*(?!/)>)[^<]*$",
+        "flags": "i"
+      },
+      "action": {
+        "indent": "indent"
+      }
+    }
+  ],
+  "indentationRules": {
+    "increaseIndentPattern": "<(?!\\?|(?:area|base|br|col|frame|hr|html|img|input|keygen|link|menuitem|meta|param|source|track|wbr)\\b|[^>]*\\/>)([-_\\.A-Za-z0-9]+)(?=\\s|>)\\b[^>]*>(?!.*<\\/\\1>)|<!--(?!.*-->)|\\{[^}\"']*$",
+    "decreaseIndentPattern": "^\\s*(<\\/(?!html)[-_\\.A-Za-z0-9]+\\b[^>]*>|-->|\\})"
   }
 }
diff --git a/packages/vscode/package.json b/packages/vscode/package.json
@@ -16,7 +16,10 @@
     "vscode:prepublish": "yarn build",
     "build": "astro-scripts build \"src/**/*.ts\" && tsc -p tsconfig.json",
     "dev": "astro-scripts dev \"src/**/*.ts\"",
-    "test": "node ./test/runTest.js"
+    "test": "yarn run test:vscode && yarn run test:grammar",
+    "test:vscode": "node ./test/runTest.js",
+    "test:grammar": "node ./test/grammar/test.mjs",
+    "update-grammar-snapshots": "node ./test/grammar/test.mjs --updateSnapshot"
   },
   "engines": {
     "vscode": "^1.67.0"
@@ -28,7 +31,8 @@
   "dependencies": {
     "@astrojs/language-server": "0.19.0",
     "@astrojs/ts-plugin": "0.2.1",
-    "vscode-languageclient": "^8.0.1"
+    "vscode-languageclient": "^8.0.1",
+    "vscode-tmgrammar-test": "^0.1.1"
   },
   "devDependencies": {
     "@types/glob": "^7.2.0",
@@ -252,6 +256,7 @@
           "source.stylus": "stylus",
           "source.js": "javascript",
           "source.ts": "typescript",
+          "source.json": "json",
           "source.tsx": "typescriptreact"
         }
       },

diff --git a/packages/vscode/syntaxes/astro.tmLanguage.json b/packages/vscode/syntaxes/astro.tmLanguage.json
@@ -68,25 +68,64 @@
       ]
     },
     "astro:component": {
-      "name": "meta.tag.component.astro",
-      "begin": "(</?)([$A-Z_][^/?!\\s<>]*|[^/?!\\s<>.]+\\.[^/?!\\s<>]+)\\b",
-      "beginCaptures": {
-        "1": {
-          "name": "punctuation.definition.tag.begin.astro"
-        },
-        "2": {
-          "name": "entity.name.tag.astro support.class.component.astro"
-        }
-      },
-      "end": "(/?>)",
-      "endCaptures": {
-        "1": {
-          "name": "punctuation.definition.tag.end.astro"
-        }
-      },
       "patterns": [
         {
-          "include": "#astro:attribute"
+          "name": "meta.tag.component.astro astro.component.raw",
+          "begin": "(<)([$A-Z_][^/?!\\s<>]*|[^/?!\\s<>.]+\\.[^/?!\\s<>]+)(.+is:raw.*?)(>)",
+          "end": "(</)([$A-Z_][^/?!\\s<>]*|[^/?!\\s<>.]+\\.[^/?!\\s<>]+)(?=\\s|/?>)(>)",
+          "beginCaptures": {
+            "1": {
+              "name": "punctuation.definition.tag.begin.astro"
+            },
+            "2": {
+              "name": "entity.name.tag.astro support.class.component.astro"
+            },
+            "3": {
+              "patterns": [
+                {
+                  "include": "#astro:attribute"
+                }
+              ]
+            },
+            "4": {
+              "name": "punctuation.definition.tag.end.astro"
+            }
+          },
+          "endCaptures": {
+            "1": {
+              "name": "punctuation.definition.tag.begin.astro"
+            },
+            "2": {
+              "name": "entity.name.tag.astro support.class.component.astro"
+            },
+            "3": {
+              "name": "punctuation.definition.tag.end.astro"
+            }
+          },
+          "contentName": "source.unknown"
+        },
+        {
+          "name": "meta.tag.component.astro",
+          "begin": "(</?)([$A-Z_][^/?!\\s<>]*|[^/?!\\s<>.]+\\.[^/?!\\s<>]+)\\b",
+          "beginCaptures": {
+            "1": {
+              "name": "punctuation.definition.tag.begin.astro"
+            },
+            "2": {
+              "name": "entity.name.tag.astro support.class.component.astro"
+            }
+          },
+          "end": "(/?>)",
+          "endCaptures": {
+            "1": {
+              "name": "punctuation.definition.tag.end.astro"
+            }
+          },
+          "patterns": [
+            {
+              "include": "#astro:attribute"
+            }
+          ]
         }
       ]
     },
@@ -131,6 +170,47 @@
         }
       },
       "patterns": [
+        {
+          "comment": "Treat script tag with application/ld+json as JSON. This needs to be higher than is:raw since it's a very possible situation to have is:raw on a JSON script tag",
+          "begin": "\\G(?=\\s*[^>]*?type\\s*=\\s*(['\"]|)(?i:application/ld\\+json)\\1)",
+          "end": "(?=</|/>)",
+          "patterns": [
+            {
+              "begin": "(?<=>)(?!</)",
+              "end": "(?=</)",
+              "contentName": "source.json",
+              "patterns": [{ "include": "source.json" }]
+            },
+            { "include": "#html:tag-attributes" }
+          ]
+        },
+        {
+          "comment": "Treat script tag with JS-compatible types as JS",
+          "begin": "\\G(?=\\s*[^>]*?type\\s*=\\s*(['\"]|)(?i:module|(?:text/javascript|text/partytown|application/node|application/javascript))\\1)",
+          "end": "(?=</|/>)",
+          "patterns": [
+            {
+              "begin": "(?<=>)(?!</)",
+              "end": "(?=</)",
+              "contentName": "source.js",
+              "patterns": [{ "include": "source.js" }]
+            },
+            { "include": "#html:tag-attributes" }
+          ]
+        },
+        {
+          "comment": "Treat anything with an unknown type as unknown",
+          "begin": "\\G(?=\\s*[^>]*?type\\s*=\\s*(['\"]|)\\1)",
+          "end": "(?=</|/>)",
+          "patterns": [
+            {
+              "begin": "(?<=>)(?!</)",
+              "end": "(?=</)",
+              "name": "source.unknown"
+            },
+            { "include": "#html:tag-attributes" }
+          ]
+        },
         {
           "begin": "\\G(?=\\s*[^>]*?lang\\s*=\\s*(['\"]|)(?i:jsx?|javascript)\\1)",
           "end": "(?=</|/>)",
@@ -367,6 +447,41 @@
     },
     "html:element": {
       "patterns": [
+        {
+          "name": "astro.element.raw",
+          "begin": "(<)([^/?!\\s<>]+)(.+is:raw.*?)(>)",
+          "end": "(</)([^/?!\\s<>]+)(?=\\s|/?>)(>)",
+          "beginCaptures": {
+            "1": {
+              "name": "punctuation.definition.tag.begin.html"
+            },
+            "2": {
+              "name": "entity.name.tag.html"
+            },
+            "3": {
+              "patterns": [
+                {
+                  "include": "#astro:attribute"
+                }
+              ]
+            },
+            "4": {
+              "name": "punctuation.definition.tag.end.html"
+            }
+          },
+          "endCaptures": {
+            "1": {
+              "name": "punctuation.definition.tag.begin.html"
+            },
+            "2": {
+              "name": "entity.name.tag.html"
+            },
+            "3": {
+              "name": "punctuation.definition.tag.end.html"
+            }
+          },
+          "contentName": "source.unknown"
+        },
         {
           "name": "meta.tag.any.$2.start.html",
           "begin": "(<)([^/?!\\s<>]+)(?=\\s|/?>)",
@@ -445,16 +560,16 @@
           "begin": "\\{",
           "beginCaptures": {
             "0": {
-              "name": "punctuation.definition.generic.begin.html"
+              "name": "punctuation.section.embedded.begin.tsx"
             }
           },
           "end": "\\}",
           "endCaptures": {
             "0": {
-              "name": "punctuation.definition.generic.end.html"
+              "name": "punctuation.section.embedded.end.tsx"
             }
           },
-          "name": "expression.embbeded.astro",
+          "name": "expression.embedded.astro",
           "contentName": "source.tsx",
           "patterns": [
             {
@@ -500,10 +615,11 @@
       ]
     },
     "frontmatter": {
+      "comment": "The frontmatter is treated as comments in order to get the \"faded\" look",
       "begin": "\\A(-{3})\\s*$",
       "beginCaptures": {
         "1": {
-          "name": "comment.block.html"
+          "name": "comment"
         }
       },
       "contentName": "source.ts",
@@ -515,7 +631,7 @@
       "end": "(^|\\G)(-{3})|\\.{3}\\s*$",
       "endCaptures": {
         "2": {
-          "name": "comment.block.html"
+          "name": "comment"
         }
       }
     },

diff --git a/packages/vscode/test/grammar/README.md b/packages/vscode/test/grammar/README.md
@@ -0,0 +1,5 @@
+# Testing syntax files
+
+This is a testing setup powered by [vscode-tmgrammar-test](https://github.com/PanAeon/vscode-tmgrammar-test) intended to test our `astro.tmLanguage.json` file to make sure it properly handle `.astro` files. To run it, simply run the `test:grammar` npm script from the repo
+
+[Snapshots](https://github.com/PanAeon/vscode-tmgrammar-test#snapshot-tests) can be updated using the `update-grammar-snapshots` npm script, however, unless your changes affect the currently present snapshots, you should always make sure to run the tests (`yarn run test:grammar`) before updating the snapshots, to make sure your changes do not introduce regressions
diff --git a/packages/vscode/test/grammar/dummy/css.tmLanguage-dummy.json b/packages/vscode/test/grammar/dummy/css.tmLanguage-dummy.json
@@ -0,0 +1,4 @@
+{
+  "comment": "Dummy CSS TextMate grammar for use in testing",
+  "scopeName": "source.css"
+}
diff --git a/packages/vscode/test/grammar/dummy/html.tmLanguage-dummy.json b/packages/vscode/test/grammar/dummy/html.tmLanguage-dummy.json
@@ -0,0 +1,4 @@
+{
+  "comment": "Dummy HTML TextMate grammar for use in testing",
+  "scopeName": "text.html"
+}
diff --git a/packages/vscode/test/grammar/dummy/js.tmLanguage-dummy.json b/packages/vscode/test/grammar/dummy/js.tmLanguage-dummy.json
@@ -0,0 +1,4 @@
+{
+  "comment": "Dummy JS TextMate grammar for use in testing",
+  "scopeName": "source.js"
+}
diff --git a/packages/vscode/test/grammar/dummy/json.tmLanguage-dummy.json b/packages/vscode/test/grammar/dummy/json.tmLanguage-dummy.json
@@ -0,0 +1,4 @@
+{
+  "comment": "Dummy JSON TextMate grammar for use in testing",
+  "scopeName": "source.json"
+}
diff --git a/packages/vscode/test/grammar/dummy/less.tsLanguage-dummy.json b/packages/vscode/test/grammar/dummy/less.tsLanguage-dummy.json
@@ -0,0 +1,4 @@
+{
+  "comment": "Dummy Less TextMate grammar for use in testing",
+  "scopeName": "source.css.less"
+}
diff --git a/packages/vscode/test/grammar/dummy/markdown.tmLanguage-dummy.json b/packages/vscode/test/grammar/dummy/markdown.tmLanguage-dummy.json
@@ -0,0 +1,4 @@
+{
+  "comment": "Dummy Markdown TextMate grammar for use in testing",
+  "scopeName": "text.html.markdown"
+}
diff --git a/packages/vscode/test/grammar/dummy/sass.tmLanguage-dummy.json b/packages/vscode/test/grammar/dummy/sass.tmLanguage-dummy.json
@@ -0,0 +1,4 @@
+{
+  "comment": "Dummy Sass TextMate grammar for use in testing",
+  "scopeName": "source.sass"
+}
diff --git a/packages/vscode/test/grammar/dummy/scss.tsLanguage-dummy.json b/packages/vscode/test/grammar/dummy/scss.tsLanguage-dummy.json
@@ -0,0 +1,4 @@
+{
+  "comment": "Dummy Scss TextMate grammar for use in testing",
+  "scopeName": "source.css.scss"
+}
diff --git a/packages/vscode/test/grammar/dummy/stylus.tmLanguage-dummy.json b/packages/vscode/test/grammar/dummy/stylus.tmLanguage-dummy.json
@@ -0,0 +1,4 @@
+{
+  "comment": "Dummy Stylus TextMate grammar for use in testing",
+  "scopeName": "source.stylus"
+}
diff --git a/packages/vscode/test/grammar/dummy/ts.tmLanguage-dummy.json b/packages/vscode/test/grammar/dummy/ts.tmLanguage-dummy.json
@@ -0,0 +1,4 @@
+{
+  "comment": "Dummy TS TextMate grammar for use in testing",
+  "scopeName": "source.ts"
+}
diff --git a/packages/vscode/test/grammar/dummy/tsx.tmLanguage-dummy.json b/packages/vscode/test/grammar/dummy/tsx.tmLanguage-dummy.json
@@ -0,0 +1,4 @@
+{
+  "comment": "Dummy TSX TextMate grammar for use in testing",
+  "scopeName": "source.tsx"
+}
diff --git a/packages/vscode/test/grammar/dummy/unknown.tmLanguage-dummy.json b/packages/vscode/test/grammar/dummy/unknown.tmLanguage-dummy.json
@@ -0,0 +1,4 @@
+{
+  "comment": "Dummy Unknown TextMate grammar for use in testing",
+  "scopeName": "source.unknown"
+}
diff --git a/packages/vscode/test/grammar/fixtures/components/component.astro b/packages/vscode/test/grammar/fixtures/components/component.astro
@@ -0,0 +1,3 @@
+<Component>
+	<div></div>
+</Component>