Parsing error when a component is used within a markdown list about eslint-mdx HOT 10 CLOSED

@LeBenLeBen Temporary workaround:

<!-- prettier-ignore -->
- <div kind="docs-packages-vuetify-preset" story="page">
    Vuetify preset
</div>
  : some extra text describing the preset

Sorry, I can't fix it easily due to remark-mdx itself. Let's wait for @wooorm's response.

from eslint-mdx.

Please provide a minimal runnable reproduction.

from eslint-mdx.

Here you go: https://github.com/LeBenLeBen/eslint-mdx-repro-279

npm install
npm run validate

from eslint-mdx.

@wooorm I tried to parse the following:

- <div kind="docs-packages-vuetify-preset" story="page">
    Vuetify preset
  </div>
  : some extra text describing the preset

And logged console.log(jsxNodes[0], this.combineLeftJsxNodes(jsxNodes)) at https://github.com/mdx-js/eslint-mdx/blob/master/packages/eslint-mdx/src/traverse.ts#L117

And the log is following:

{
  type: 'jsx',
  data: undefined,
  value: '<div kind="docs-packages-vuetify-preset" story="page">\n' +
    '  Vuetify preset\n' +
    '</div>',
  position: {
    start: { line: 1, column: 0, offset: 2 },
    end: { line: 3, column: 3, offset: 80 }
  }
}

{
  type: 'jsx',
  data: undefined,
  value: '<div kind="docs-packages-vuetify-preset" story="page">\n' +
    '    Vuetify preset\n' +
    '  </',
  position: {
    start: { line: 1, column: 0, offset: 2 },
    end: { line: 3, column: 3, offset: 80 }
  }
}

/Users/JounQin/Workspaces/GitHub/eslint-mdx/test/fixtures/jsx-text.mdx
  3:4  error  Parsing error: /Users/JounQin/Workspaces/GitHub/eslint-mdx/test/fixtures/jsx-text.mdx: Unexpected token (3:4)

  1 | <$><div kind="docs-packages-vuetify-preset" story="page">
  2 |     Vuetify preset
> 3 |   </</$>
    |     ^

✖ 1 problem (1 error, 0 warnings)

So it seems to be an issue of remark-mdx which produces incorrect offset.

from eslint-mdx.

@wooorm I have to do something like following, I don't know if it is as expected:

combineLeftJsxNodes(jsxNodes: Node[], parent?: Parent): Node {
  const start = jsxNodes[0].position.start
  const end = { ...last(jsxNodes).position.end }
  // fix #279
  if (parent.type === 'listItem') {
    end.offset += parent.position.indent.reduce(
      (acc, indent, index) => acc + (index ? indent + 1 : 0),
      0,
    )
  }
  return {
    type: 'jsx',
    data: jsxNodes[0].data,
    value: this.code.slice(start.offset, end.offset),
    position: {
      start,
      end,
    },
  }
}

from eslint-mdx.

Parsing it at least works on main, and maybe on the last v2 beta.

@JounQin posiiton.indent went away in the last remark btw.
Might it be time to investigate the new AST that’s on main already?

from eslint-mdx.

@wooorm I'm fine to start working on next version, but I'd like to fix this error on current stable version too. I want to confirm if my fix will always work, or, can you patch a fix on remark-mdx@1 for the incorrect position info.

from eslint-mdx.

I do not know if your fix will always work, maybe?
And I'm personally not interested in patching v1. I rewrote the parsing in april and in november, solving tons of issues. I'm not interested in again fixing things I already fixed

from eslint-mdx.

@LeBenLeBen Please try v1.9.1

from eslint-mdx.

Perfect, it works now. Thank you for looking into this so quickly 💯

from eslint-mdx.