vscode: Syntax highlighting for inline method components

[alehechka]

Overview

@Ra0k had opened #561 asking about support for inline method components which has been added in the main branch but not released. I wanted to try this out myself and noticed that the VSCode extension does not support syntax highlighting for this type of expression. I can take a look at this and get a PR opened for it.

Example from #56

package main

type Data struct {
	message string
}

templ (d Data) Method() {
	<div>{ d.message }</div>
}

templ Hello() {
	@Data{
		message: "You can implement methods on a type.",
	}.Method()
}

[alehechka]

PR opened: templ-go/templ-vscode#38

[joerdav]

@alehechka thanks for the PR. I'm not sure if this is a regression but it looks like now non-function components are not rendered properly:

templ higherOrderTemplate(a, b templ.Component) {
	<div class="left">
		@a
	</div>
	<div class="right">
		@b
	</div>
}

[alehechka]

@joerdav checking this on v0.0.21, it appears to have the same lack of syntax highlighting. So I don't believe this to be a regression. The syntax regex for import-expressions currently relies on @functionName( to begin capture. This PR basically just makes @structName{ also a valid begin capture.

If you want, I can add syntax highlighting support for non-function components to this PR or open a new one for just that addition?

[joerdav]

If you want, I can add syntax highlighting support for non-function components to this PR or open a new one for just that addition?

Let's do a separate PR, don't want to block your good work any longer!

[alehechka]

Let's do a separate PR, don't want to block your good work any longer!

Sounds good to me. I'll have time after work to take a look at it.

[alehechka]

@joerdav, I opened a PR for this: templ-go/templ-vscode#39. It has one open question about the syntax highlighting.