🐛 BUG: Using HTML comments inside `array.map()` fails with unexpected token

[ArmandPhilippot]

Describe the Bug

Prettier throws an error when using HTML comments inside an array map method.
I encountered this while trying to suppress unwanted spaces because of the auto-formatting and the inline nature of some elements.

Using the following fails:

  {
    items.map((item) => (
      <>
      <dt><!-- --><span>{item.label}</span><!-- --></dt>
      {item.values.map((value) => <dd>{value}</dd>)}
      </>
    ))
  }

As well as many similar combinations (I removed the dd for the minimal reproduction):

  {
    items.map((item) => {
      return (
        <dt><!-- --><span>{item.label}</span><!-- --></dt>
      )
    })
  }

The rendering in the dev server works just fine. Only Prettier struggles with that...

This could be related to #438 I'm not sure because of the broken formatting in that issue... And because I don't see how this was used. If that the case, the issue is not related to React.

I also tried using a Prettier comment ({/* prettier-ignore */}) but as noted in #308 (comment) the comment was auto-formatted and so it was useless (for the real use case, I guess this could work in the minimal repro).

In the meantime, as workaround, I think creating a component for dt and using Astro.render.slots("default") with set:html (with probably some manual trimming) should work!

Steps to Reproduce

1. npm create astro@latest -- --template minimal
2. npm install --save-dev prettier prettier-plugin-astro
3. nano prettier.config.js with the following content:

export default {
  plugins: ["prettier-plugin-astro"],
  overrides: [
    {
      files: "*.astro",
      options: { parser: "astro" },
    },
  ],
};

4. Create a component using the array map method with HTML comments inside:

---
type Item = {
  label: string;
  values: string[];
};

type Props = {
  items: Item[];
};

const { items } = Astro.props;
---

<dl>
  {
    items.map((item) => (
      <dt><!-- --><span>{item.label}</span><!-- --></dt>
    ))
  }
</dl>

5. Run prettier . --check
6. Error!

> prettier . --check

Checking formatting...
src/components/dl-list.astro
[error] src/components/dl-list.astro: SyntaxError: Unexpected token (3:12)
[error]   1 |
[error]   2 |     items.map((item) => (
[error] > 3 |       <dt><!-- --><span>{item.label}</span><!-- --></dt>
[error]     |            ^
[error]   4 |     ))
[error]   5 |   
Error occurred when checking code style in the above file.
 ELIFECYCLE  Command failed with exit code 2.

Here's a minimal repro: https://stackblitz.com/edit/astro-prettier-plugin-html-comments?file=prettier.config.js,package.json,src%2Fpages%2Findex.astro,src%2Fcomponents%2Fdl-list.astro
After exiting the dev preview, you can run npm run lint to see the issue.