Extra spaces and backslashes in MDX v2+ JSDoc comments

[karlhorky]

Prettier 3.3.2
Playground link

--parser mdx

Input:

{/**
  * @typedef Props
  * @property {string} name
  *   Who to greet.
  */}

{/** @typedef Props @property {string} name2 Who to greet. */}

# Hello {props.name} and {props.name2}

Output:

{/\*\*

- @typedef Props
- @property {string} name
- Who to greet.
  \*/}

{/* * @typedef Props @property {string} name2 Who to greet. */}

# Hello {props.name} and {props.name2}

Expected output:

{/**
  * @typedef Props
  * @property {string} name
  *   Who to greet.
  */}

{/** @typedef Props @property {string} name2 Who to greet. */}

# Hello {props.name} and {props.name2}

(no formatting change from Input)

Why?

JSDoc has meaning and functionality in MDX documents (see the Props section of MDX Analyzer docs), which is broken by the extra spaces and backslashes added above.

As an extension to the MDX v2 comments feature by @wooorm, it would be great to support:

1. JSDoc in MDX v2+ multi-line comments
2. JSDoc in MDX v2+ single-line comments

Related

• MDX Comments don't seem to work #10706

[kachkaev]

👋 @karlhorky! I believe that this particular issue is a part of this one:

• MDX 3 #12209

Not sure we can do much until we upgrade the parser, and when it’s done, the problem will probably self-resolve. If that’s not the case here, let me know and I’ll re-open the issue.

[karlhorky]

Yeah, I thought so at first too. But since MDX v2/v3 comments support was already implemented by @wooorm before that issue was opened, I thought JSDoc support may be able to be a natural extension of that:

• Add support for MDX 2 comments #11563

(especially the single-line comment variant, number 2 in the PR description above)

[karlhorky]

Workaround

Ignore any JSDoc comments until MDX v2+ comments w. JSDoc support added:

{/* prettier-ignore-start */}

{/**
  * @typedef Props
  * @property {string} name
  *   Who to greet.
  */}

{/* prettier-ignore-end */}

# Hello {props.name}

Also added an MDX Analyzer PR here:

• Add prettier-ignore-start + prettier-ignore-end workaround mdx-js/mdx-analyzer#455