Syntax and language configuration fixes and improvements #286

Princesseuh · 2022-05-16T17:42:23Z

Changes

This fixes a few issues with our syntax file and our language configuration file and also adds some missing features:

Added support for is:raw on script tags, style tags, components and other elements
Added support for JSON script tags using application/ld+json (I think this makes us one of the rare ones to support this, I thought it was neat and fairly easy so, why not)
Added support for script tags with unknown types (treated as unknown content)
Added template literals as surrounding pair for autoclose support
Added support for auto closing {/* */}
Added support for automatically indenting certain patterns (HTML, brackets etc)
Added better support for identifying words in the file (the frontmatter dashes are no longer included, yay!)
Fixed expressions brackets not using JSX's coloring
Fixed leaving the frontmatter into the template making an indent

Fix #7
Fix #112 however, auto indent is super hard to get right and very flaky. Even in HTML and TSX files it doesn't always works very nicely. I ended up mostly copying the TSX's auto indent rules with a few tweaks from the HTML ones
Fix #274 - It doesn't really fix it but making this PR made me realize that it's not a really possible thing to do the way I thought we could do it when I wrote that issue and that things worked differently than I thought, so it's no longer relevant

Half of #285

I tried to do #271, but I couldn't figure it out. Including the html:comment pattern inside expressions worked in some cases but didn't in others and I don't really get why. I then tried to inject HTML comments inside the JSX grammar and ended up with nothing more than an headache. If someone has a solution, I'll gladly take it ha!

Testing

Added a test suite powered by vscode-tmgrammar-test with instructions on how to use and when to update the snapshots

Docs

No docs needed?

changeset-bot · 2022-05-16T17:42:25Z

🦋 Changeset detected

Latest commit: 1154e1e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
astro-vscode	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Princesseuh · 2022-05-17T00:05:03Z

packages/vscode/languages/astro-language-configuration.json

@@ -3,7 +3,6 @@
    "blockComment": ["<!--", "-->"]
  },
  "brackets": [
-    ["---", "---"],


Removed the frontmatter bracket because it causes an indent bump into the template (since the entry and the exit of the bracket are the same characters). If we want to provide an indent into the frontmatter, we should use entry rules

…h different types

Princesseuh · 2022-05-20T00:30:57Z

packages/vscode/languages/astro-language-configuration.json

@@ -5,8 +5,7 @@
  "brackets": [
    ["<!--", "-->"],
    ["<", ">"],
-    ["{", "}"],
-    ["(", ")"]


There's no cases where you want parenthesizes to count as brackets in the source.astro scope, in contexts where they do matter (ex: source.ts, source.js, source.tsx) the languages used there will add them as brackets

natemoo-re

Looks fantastic! None of these comments are blocking, just curious to hear your thoughts.

natemoo-re · 2022-05-20T18:22:06Z

packages/vscode/languages/astro-language-configuration.json

+    { "open": "{/*", "close": " */}", "notIn": ["comment", "string"] },
+    { "open": "<!--", "close": " -->", "notIn": ["comment", "string"] },


Is it intentional that the close has a leading space?

Yes! For comments it makes for a nicer experience since people usually add a space at the end. This is actually a consistency fix, we already had the space for JS comments but not HTML ones

natemoo-re · 2022-05-20T18:22:39Z

packages/vscode/languages/astro-language-configuration.json

+  "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[^>]*>|-->|\\})"
  }


Wow, this will be great! Nice job ☺️

natemoo-re · 2022-05-20T18:24:05Z

packages/vscode/syntaxes/astro.tmLanguage.json

+        },
+        {
+          "name": "meta.tag.component.astro",
+          "begin": "(</?)([$A-Z_][^/?!\\s<>]*|[^/?!\\s<>.]+\\.[^/?!\\s<>]+)\\b",


This looks unchanged, but just want to confirm that namespace.component is properly highlighted as a component?

Yep, what gives it the special highlighting is actually the support.class.component.astro scope. Since it makes it highlighted like a class (in TSX files, it's support.class.component.tsx)

natemoo-re · 2022-05-20T18:24:32Z

packages/vscode/syntaxes/astro.tmLanguage.json

+          "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": "(?=</|/>)",


Love to see it!

natemoo-re · 2022-05-20T18:26:19Z

packages/vscode/syntaxes/astro.tmLanguage.json

+          ]
+        },
+        {
+          "comment": "Treat script tag with is:raw as plain text",


Curious about the highlighting here... I don't think is:raw has any effect on script or style (braces are already ignored), so do we really want highlighting to change to plaintext? I think everything will still be parsed and bundled.

Ah, I might have misunderstood what is:raw does on those tags then!

I thought it would act like a more intense is:inline basically. Especially for script tags, I felt like having a weird type + is:raw could be a "common" case

Decided to remove is:raw as plaintext for style tags and script tags after confirming that it doesn't do anything in Astro

natemoo-re · 2022-05-20T18:28:30Z

packages/vscode/test/grammar/test.mjs

+	}
+}
+
+snapShotTest();


These tests look awesome!

…ing there

Princesseuh commented May 17, 2022

View reviewed changes

Princesseuh self-assigned this May 17, 2022

Princesseuh changed the title ~~[WIP] Syntax and language configuration fixes~~ [WIP] Syntax and language configuration fixes and improvements May 18, 2022

Princesseuh added 7 commits May 19, 2022 18:13

Fix expressions block not having TSX-like highlight on the brackets

b7c1629

Add template literal to surroundingPairs

6dcdef4

Add grammar test suite

fc51b20

Add README to test directory, add tests for style tags

cbe581b

Add support for is:raw, maybe?

3641423

Add is:raw for script and style tags, add support for script tags wit…

f2198d0

…h different types

Fix missing dummies, use source.unknown for is:raw

d94764b

Princesseuh force-pushed the syntax-fixes branch from 2985af8 to d94764b Compare May 19, 2022 22:14

Princesseuh added 2 commits May 19, 2022 20:24

Add auto indent support, add wordPattern regex

0e770dd

Add support for more JS-like types, inspired by compiler's TSX

f08c276

Princesseuh commented May 20, 2022

View reviewed changes

Princesseuh added 2 commits May 19, 2022 20:37

Add spaces in comment completions

ebe92b7

Add support for is:raw components

8fe025a

Princesseuh marked this pull request as ready for review May 20, 2022 14:49

Princesseuh requested a review from a team as a code owner May 20, 2022 14:49

Princesseuh changed the title ~~[WIP] Syntax and language configuration fixes and improvements~~ Syntax and language configuration fixes and improvements May 20, 2022

Add changeset

04d3d62

natemoo-re approved these changes May 20, 2022

View reviewed changes

Remove is:raw on script tags and style tags since it doesn't do anyth…

1154e1e

…ing there

Princesseuh merged commit fec2817 into main May 20, 2022

Princesseuh deleted the syntax-fixes branch May 20, 2022 21:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Syntax and language configuration fixes and improvements #286

Syntax and language configuration fixes and improvements #286

Princesseuh commented May 16, 2022 •

edited

changeset-bot bot commented May 16, 2022 •

edited

Princesseuh May 17, 2022

Princesseuh May 20, 2022 •

edited

natemoo-re left a comment

natemoo-re May 20, 2022

Princesseuh May 20, 2022

natemoo-re May 20, 2022

natemoo-re May 20, 2022

Princesseuh May 20, 2022

natemoo-re May 20, 2022

natemoo-re May 20, 2022

Princesseuh May 20, 2022

Princesseuh May 20, 2022

natemoo-re May 20, 2022

		{ "open": "{/", "close": " /}", "notIn": ["comment", "string"] },
		{ "open": "<!--", "close": " -->", "notIn": ["comment", "string"] },

Syntax and language configuration fixes and improvements #286

Syntax and language configuration fixes and improvements #286

Conversation

Princesseuh commented May 16, 2022 • edited

Changes

Testing

Docs

changeset-bot bot commented May 16, 2022 • edited

🦋 Changeset detected

Choose a reason for hiding this comment

Princesseuh May 20, 2022 • edited

Choose a reason for hiding this comment

natemoo-re left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Princesseuh commented May 16, 2022 •

edited

changeset-bot bot commented May 16, 2022 •

edited

Princesseuh May 20, 2022 •

edited