Cannot use `<!--` for comments with xdm, but Prettier cannot use `{/**/}` for comments

kentcdodds commented 3 years ago

Initial checklist

[x] I read the support docs
[x] I read the contributing guide
[x] I agree to follow the code of conduct
[x] I searched issues and couldn’t find anything (or linked relevant results below)

This one is close, but not quite the same: https://github.com/wooorm/xdm/issues/44

Affected packages and versions: Latest

Steps to reproduce

Here's a reproduction: https://codesandbox.io/s/xdm-create-react-app-starter-forked-fxd07

It's clear that this is expected (designed?) behavior. However, if my MDX is in a file that I format with prettier, prettier will convert that {/* comment */} into {/_ comment _/} which ... is not what I want 😅

Expected behavior

I expect to be able to use code comments without prettier changing it. Is this a prettier or xdm bug?

Actual behavior

The only code comment option at my disposal is not allowed by prettier.

My use case

I need to be able to have comments for prettier-ignore. In particular, one of my blog posts is trying to demonstrate that prettier can help you find bugs so I need that code block to not be formatted by prettier to illustrate my point. As of right now, my workaround is to put the comment within the code block, but that makes it visible to the reader which is distracting from the point.

ChristianMurphy commented 3 years ago

also related and relevant https://github.com/prettier/prettier/issues/10706

wooorm commented 3 years ago

Thanks for the thoughtful repro and info!

Well, it’s not really a bug, but also definitely not nice. Neither mdx-js/mdx@next nor xdm support HTML comments anymore. While it could work, it is intentional to not support HTML (including comments), and support more of JS, for a clearer divide that hopefully helps users in the end.

/cc @fisker and @thorn0 from Prettier who recently worked on MDX there: would it be possible next to HTML-like comments in MDX, to also support JS-like comments (/{\s*\/\*([^*]|\*(?!=\/))*?\*\/\s*}/)? (And also support the behavior of prettier-ignore comments for them).

Note: I was typing this as I forgot the prettier issue; we can also continue discussing there!

kentcdodds commented 3 years ago

for a clearer divide that hopefully helps users in the end.

Oh, this is actually nice 👍

Yeah, seems like the solution to this use case is in prettier supporting JSX-style comments in MDX.

ericclemmons commented 3 years ago

For those on Google that run into this same issue (as I did), I found a trick: use `{/ ... /}` 🙏

kentcdodds commented 3 years ago

Nice! Thank you @ericclemmons!

fisker commented 3 years ago

would it be possible next to HTML-like comments in MDX, to also support JS-like comments (/{\s\/*([^]|*(?!=\/))?*\/\s}/)?

I'm sorry, I'm not familiar with that part, if you think that works, PR welcome.

kentcdodds commented 3 years ago

Note: while the {/** ... **/} workaround from @ericclemmons does work for adding comments, it does not seem to work with prettier-ignore so my original use case still won't work :(

wooorm commented 3 years ago

I’ve opened a PR with prettier: https://github.com/prettier/prettier/pull/11563. If anyone is familiar with the Prettier codebase that can help me and others move this along, that’d be appreciated!

pomber commented 3 years ago

This now works (Prettier v2.5.0):

{/* prettier-ignore */}
```js
console.log("no" 
    + " " 
    + "touching")
```

Prettier Playground

Thanks @wooorm !

wooorm commented 3 years ago

Yay! release notes 🎉

wooorm / xdm