Parsing extremely slow in specific case.

[andrewplummer]

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)

Affected packages and versions

eslint-plugin-mdx:1.17.0

Link to runnable example

No response

Steps to reproduce

The following specific code seems to cause mdx parsing to become extremely slow:

# Test Case

<div style={{ display: 'flex', justifyContent: 'center' }}>
  <div
    style={{
      display: 'grid',
      gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
      maxWidth: '400px',
      margin: '0 auto',
      gap: '5px',
    }}>
    <div />
    <Popup
      position="top left"
      trigger={<Box width={26} height={26} rounded />}
      content={LOREM}
    />
    <Popup
      position="top center"
      trigger={<Box width={26} height={26} rounded />}
      content={LOREM}
    />
    <Popup
      position="top right"
      trigger={<Box width={26} height={26} rounded />}
      content={LOREM}
    />
    <div />
    <Popup
      position="left top"
      trigger={<Box width={26} height={26} rounded />}
      content={LOREM}
    />
    <div />
    <div />
    <div />
    <Popup
      position="right top"
      trigger={<Box width={26} height={26} rounded />}
      content={LOREM}
    />
    <Popup
      position="left center"
      trigger={<Box width={26} height={26} rounded />}
      content={LOREM}
    />
    <div />
    <div />
    <div />
    <Popup
      position="right center"
      trigger={<Box width={26} height={26} rounded />}
      content={LOREM}
    />
    <Popup
      position="left bottom"
      trigger={<Box width={26} height={26} rounded />}
      content={LOREM}
    />
    <div />
    <div />
    <div />
    <Popup
      position="right bottom"
      trigger={<Box width={26} height={26} rounded />}
      content={LOREM}
    />
    <div />
    <Popup
      position="bottom left"
      trigger={<Box width={26} height={26} rounded />}
      content={LOREM}
    />
    <Popup
      position="bottom center"
      trigger={<Box width={26} height={26} rounded />}
      content={LOREM}
    />
    <Popup
      position="bottom right"
      trigger={<Box width={26} height={26} rounded />}
      content={LOREM}
    />
    <div />
  </div>
</div>

It seems to be explosive, ie adding and removing <Popup ... /> elements affects the time exponentially.

What is interesting is wrapping everything in a surround <div> makes the issue go away, it becomes fast again.

Expected behavior

Should be fast.

Actual behavior

Is exceptionally slow in one case only.

Runtime

Node v16

Package manager

yarn v1

OS

macOS

Build and bundle tools

No response

[JounQin]

# yarn 1
yarn add https://pkg.csb.dev/mdx-js/eslint-mdx/commit/2c6fb0e5/eslint-mdx https://pkg.csb.dev/mdx-js/eslint-mdx/commit/2c6fb0e5/eslint-plugin-mdx
# yarn 2, 3
yarn add eslint-mdx@https://pkg.csb.dev/mdx-js/eslint-mdx/commit/2c6fb0e5/eslint-mdx/_pkg.tgz eslint-plugin-mdx@https://pkg.csb.dev/mdx-js/eslint-mdx/commit/2c6fb0e5/eslint-plugin-mdx/_pkg.tgz
# npm
npm i https://pkg.csb.dev/mdx-js/eslint-mdx/commit/2c6fb0e5/eslint-mdx https://pkg.csb.dev/mdx-js/eslint-mdx/commit/2c6fb0e5/eslint-plugin-mdx

Please help us to test the fresh new version.

[JounQin]

@andrewplummer Have you tried the next major version above?

[andrewplummer]

Just tried it out, I'm seeing various other errors like xxx is defined but never used and interop with imports plugin but ignoring that as it might require extra config.

The performance issue seems to be fixed though! 👍

[JounQin]

Thanks for clarify.