Add support for HAML syntax highlighting in Heredoc sections

[joevandyk]

Motivation

We have support for C++, JS, SQL, HTML, etc syntax highlighting in Heredoc, would be good to have it for HAML as well. Main use case for me is embedding HAML templates inline in ViewComponents.

Implementation

Copy/Pasted the HTML section.

Automated Tests

None, the other Heredoc syntax highlighting don't seem to have any.

Manual Tests

[paracycle]

I am not sure if we should keep adding highlighting for other languages inside Heredocs, since VS Code already does proper syntax highlighting for heredocs, provided a separate extension is installed for syntax highlighting the target language.

For example, compare the following two screenshots from VS Code:

Since I had the GraphQL syntax highlighting extension installed in my system, VS Code was able to highlight embedded GraphQL query in a heredoc properly, provided the heredoc label is GRAPHQL

[joevandyk]

Doesn’t that only work because there’s an entry for heredoc graphql here?

vscode-ruby-lsp/grammars/ruby.cson.json

Lines 1679 to 1715 in 1847681

	"begin": "(?=(?><<[-~]([\"'`]?)((?:[_\\w]+_|)GRAPHQL)\\b\\1))",
	"comment": "Heredoc with embedded GraphQL",
	"end": "(?!\\G)",
	"name": "meta.embedded.block.graphql",
	"patterns": [
	{
	"begin": "(?><<[-~]([\"'`]?)((?:[_\\w]+_|)GRAPHQL)\\b\\1)",
	"beginCaptures": {
	"0": {
	"name": "punctuation.definition.string.begin.ruby"
	}
	},
	"contentName": "source.graphql",
	"end": "^\\s*\\2$\\n?",
	"endCaptures": {
	"0": {
	"name": "punctuation.definition.string.end.ruby"
	}
	},
	"name": "string.unquoted.heredoc.ruby",
	"patterns": [
	{
	"include": "#heredoc"
	},
	{
	"include": "#interpolated_ruby"
	},
	{
	"include": "source.graphql"
	},
	{
	"include": "#escaped_char"
	}
	]
	}
	]
	},

[davidstosik]

Doesn’t that only work because there’s an entry for heredoc graphql here?

Yes, I think so.

(Prefacing what follows with this: this is only my own understanding on this, for having looked at it from afar, only today. I might be wrong. 😅)

In a virgin VSCode with only the GraphQL extension, I'm not getting GraphQL syntax highlighting:

But I get SQL syntax highlighting, because VSCode's out-of-the-box Ruby syntax/grammar declares a "Heredoc with embedded sql":

https://github.com/microsoft/vscode/blob/0c36b92c82064882a228487040187cfc13669c0f/extensions/ruby/syntaxes/ruby.tmLanguage.json#L666-L703

By default, VSCode's Ruby syntax has html, xml, sql, css, c++, c, javascript, "jquery javascript", shell, lua and ruby.
Ruby LSP adds GraphQL and Slim to that list.

[sambostock]

#842 is relevant to this PR. If it's merged first, we'll want to update the test config it adds to add HAML (see #843 for YAML example).

[vinistock]

@joevandyk let's move forward with this. Can you add a test for HAML using the mechanism introduced in #842? That'll help ensure that it's doing what is expected.

I think just adding HAML to the list is sufficient.

[joevandyk]

@vinistock added test!

Anyone know how I can point my local VS Code to use this version of the code, so I can see the HAML syntax highlighting work? Do I build the gem and install it? Or is there a better process?

[vinistock]

These changes are only in the extension, so you can follow the instructions here. Basically, you need to

• Make sure dependencies are installed (yarn install)
• Click F5. This opens a new VS Code window where your local version of the extension is running
• In the window that just opened, open/create a Ruby file and write a heredoc for HAML to see if its being highlighted

[vinistock]

Please let us know if it's working as you expected and then we can merge.

[github-actions]

This pull request is being marked as stale because there was no activity in the last 2 months

[joevandyk]

it looks good!

[andyw8]

Most of the team are off for the holidays, but we can hopefully ship this in early January.

One small suggestion: It would useful to add a small mention of this feature to the README.

[vinistock]

Thank you for the contribution!