🐛 BUG: Can't toggle comments in braces

[cdtut]

Describe the Bug

When there is code like this and you toggle comment on the middle line it shows like the 2nd example instead of 3rd. This is not valid so have to manually add and remove comments on both sides which is slow and terrible experience or delete the lines which you can forget to add again.

{array.map(each => <>
  <div>{each}</div>
</>)}

{array.map(each => <>
  // <div>{each}</div>
</>)}

{array.map(each => <>
  {/* <div>{each}</div> */}
</>)}

Steps to Reproduce

Toggle comment on middle line.

[Princesseuh]

Unfortunately, we don't control how the comment toggling works inside expression because we use VS Code's TSX syntax configuration there, which controls the commenting behavior.

I think it is possible to fix it somehow, but it's quite challenging.

[cdtut]

Maybe can allow // to be a comment?

Or if it can be fixed because it's happening many times a day. Very frustrating development experience to lose something so basic and common like automatic commenting shortcut. Something we should be able take for granted.

Many issues with extension are because of JSX syntax. Desperate need for alternative syntax that does not rely on strange JSX issues maybe use html as basis for syntax. You think is good idea too?

[Princesseuh]

Maybe can allow // to be a comment?

Or if it can be fixed because it's happening many times a day. Very frustrating development experience to lose something so basic and common like automatic commenting shortcut. Something we should be able take for granted.

Many issues with extension are because of JSX syntax. Desperate need for alternative syntax that does not rely on strange JSX issues maybe use html as basis for syntax. You think is good idea too?

There would be just twice as many problems, especially in the type checking behavior with another syntax. Syntax files are just very complicated and fairly rigid.

[cdtut]

If alternative syntax is too complicated and so is this one then I don't know. Easy commenting and syntax highlighting and completion are core to development experience. Syntax complication means it's not easy to use plain text editor it's better to use extension but building something so complicated seem like it's not realistic to have smooth development experience with astro.

[khanakia]

any update on this it's quite furstrating

[Princesseuh]

any update on this it's quite furstrating

I would share updates if they were any. If you are interested in contributing, I would be happy to guide you through what's needed.

[khanakia]

I would be happy to help but I have no idea how to fix this.

Also, there is another issue here when I comment within HTML tags using CMD + c

Wrong comment

<Layout
  title="About Me"
  <!-- pubDate={new Date("August 08 2021")} -->
>
  <DataTable data={tasks} columns={columns} />
</Layout>

Correct Comment

<Layout
  title="About Me"
 {/*  pubDate={new Date("August 08 2021")}*/}
>
  <DataTable data={tasks} columns={columns} />
</Layout>
```

[Princesseuh]

Essentially, VS Code does not allow a dynamic syntax for comments, it only allows setting two (completely static) syntax for each language: an inline comment, and a block comment. Which one is outputted depending solely on if the user used "toggle line comment" or "toggle block comment".

The way to work around this is to actually use multiple languages in one file, even in parts where it does not seem obvious to do so. For instance, JSX uses javascriptreact everywhere part from inside tags, where it switches to jsx-tags in order to switch the language rules, such as, well, the comment syntax, but also a few other things regarding indentation rules etc.

Fixing this means doing the same thing, which is easy enough for the issue in your last comment (just uses a different language inside tags opening), but for JSX expressions might be a bit more complicated because we don't control the syntax as much there.

An effort was started on us owning the expressions grammar completely, but it unfortunately proved that it's not possible to cleanly inject from / to the JSX syntax, as such we might need to own it completely (probably forking JSX's grammar file), unless another way is figured out.

TL;DR would be:

• Creating a new language configuration to be used inside tags starts, with proper rules for comments on attributes
• Figuring out if there's a way we can set jsx-tags inside tags inside JSX expressions like JavaScript does, or if we need to own the JSX syntax completely or not.

If you're unfamiliar with grammar files, don't worry the format is quite old and barely documented, so none of us really are, in fact, familiar with it, ha 😆

[khanakia]

Thanks for the explanation now it makes sense. 🙏

I wish there were a single frontend programming langauge that could do everything. The whole front end is a spider's web now.

[Princesseuh]

I fixed the problem here: #858

It doesn't fix the issue in your previous comment with comments inside attributes because that one require a larger effort, but at least it fixes the problem inside expressions. Or at least, it makes it use a comment that always work, for people who want HTML comments it's unfortunately not really possible to make the shortcut do it (or well, we can, but then it doesn't do the JSX comment that some people want, ah)