[eslint-mdx] focus on next version of mdx

[JounQin]

@wooorm Any advise on how should I start?

All I can find is #1382 (comment)

But I try to run that codes again, there are errors:

/Users/JounQin/Workspaces/GitHub/eslint-mdx/node_modules/micromark-extension-mdx-jsx/lib/factory-tag.js:701
    throw new VMessage(
    ^
[5:6: Unexpected character `/` (U+002F) after self-closing slash, expected `>` to end the tag (note: JS comments in JSX tags are not supported in MDX)] {
  reason: 'Unexpected character `/` (U+002F) after self-closing slash, expected `>` to end the tag (note: JS comments in JSX tags are not supported in MDX)',
  line: 5,
  column: 6,
  location: {
    start: { line: 5, column: 6, offset: 42, _index: 7, _bufferIndex: 5 },
    end: { line: null, column: null }
  },
  source: 'micromark-extension-mdx-jsx',
  ruleId: 'unexpected-character'
}

I hope to have an easy-to-use API to get estree AST with comments.

[JounQin]

Additional, remark-mdx's codes are not synced to npm.

I tried to copy it locally and use it with:

const unified = require('unified')
const parse = require('remark-parse')

const mdx = require('./remark-mdx')

const doc = `
<>
  {/* MDX is awesome! */}
  <div
    // MDX is awesome!
    style={{ color: "white", backgroundColor: "black", padding: "24px 32px" }}
  ></div>
</>;
`

const processor = unified().use(parse).use(mdx).freeze()

const root = processor.parse(doc)

console.log(root)

The error is the same as above:

/Users/JounQin/Workspaces/GitHub/eslint-mdx/node_modules/micromark-extension-mdx-jsx/lib/factory-tag.js:701
    throw new VMessage(
    ^
[5:6: Unexpected character `/` (U+002F) after self-closing slash, expected `>` to end the tag (note: JS comments in JSX tags are not supported in MDX)] {
  reason: 'Unexpected character `/` (U+002F) after self-closing slash, expected `>` to end the tag (note: JS comments in JSX tags are not supported in MDX)',
  line: 5,
  column: 6,
  location: {
    start: { line: 5, column: 6, offset: 42, _index: 7, _bufferIndex: 5 },
    end: { line: null, column: null }
  },
  source: 'micromark-extension-mdx-jsx',
  ruleId: 'unexpected-character'
}

[JounQin]

That is a different example?

How about this one

[wooorm]

First off: the semicolon shouldn‘t be there. It doesn’t make sense. MDX !== JS. You can’t put a console.log in there either. So what’s the point of this discussion?

For why it works this way, and differently now than in MDX 1, see: https://github.com/micromark/mdx-state-machine#74-common-mdx-gotchas and the surrounding sections!

[JounQin]

I thought that you meant we should treat ; as text at mdx-js/eslint-mdx#183 (comment) 😂

[wooorm]

ah, there it was! OK, that sounds a bit different!

My reasoning there was: it should not be part of JSX. Because MDX does not have semicolons. If you put it in MDX, it’s going to “show up”, not be hidden.

What I am arguing here is a bit different. In markdown, you have blocks, right? And inline.

```js
// This is a code block.
```

This is `inline`.

Blocks can be blocks, inline is inline, but they can’t mix:

```js
// this next semicolon doesn’t work in markdown! The code isn’t closed by these ticks + semicolon
```;

So we start with markdown, and then we add JSX to get MDX. We also want to allow blocks and inline. But how to differentiate between them?

So, when parsing your example:

<Basic>
# abc
</Basic>;

The parser first sees <Basic> on its own line: well, that’s a “block”, right? Makes sense to me.
But </Basic>; can’t be a block. Similar to whatever here </Basic> and other stuff here. That looks like “inline”?

So we have a problem: one is “block”, the other is “inline”. And that crashes.

Don’t put the semicolon there!

[JounQin]

I'm fine with this limitation, would be great to document this at https://github.com/micromark/mdx-state-machine#74-common-mdx-gotchas.