Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

There are serious issues when used with the react/self-closing-comp / react/jsx-sort-props rules. #488

Closed
4 tasks done
u3u opened this issue Dec 9, 2023 · 6 comments · Fixed by #493 or #495
Closed
4 tasks done
Assignees
Labels
🐛 type/bug This is a problem 🙆 yes/confirmed This is confirmed and ready to be worked on

Comments

@u3u
Copy link

u3u commented Dec 9, 2023

Initial checklist

Affected packages and versions

2.2.0

Link to runnable example

No response

Steps to reproduce

❌ Empty components are self-closing eslint(react/self-closing-comp)
<span>test</span>

💡 Fix this react/jsx-sort-props problem
<Image alt="alt" src="src" width="315" height="100" format="svg" />
↓↓↓↓↓
<Image alt="alt" format="src" height="315" src="100" width="svg" />

Clone this repository u3u/eslint-config, and input the above content in any mdx file to reproduce.

Expected behavior

Keep consistent with mdx/code-blocks.

Actual behavior

  1. <span>test</span> Regarded as an empty tag self-closing, it will be fixed to <span />, directly losing the content.
  2. After automatic sorting of JSX attributes, the content and attributes no longer correspond.

Runtime

Node v20

Package manager

pnpm

OS

macOS

Build and bundle tools

esbuild

@JounQin
Copy link
Member

JounQin commented Dec 9, 2023

OK, the react/self-closing-comp part is just as same as #437.

After automatic sorting of JSX attributes, the content and attributes no longer correspond.

Just for confirming, react/jsx-sort-props itself runs correctly for normal .jsx files or mdx code blocks, right?

@u3u
Copy link
Author

u3u commented Dec 9, 2023

@JounQin Yes, they have no issues in the code block.

JounQin added a commit that referenced this issue Dec 10, 2023
JounQin added a commit that referenced this issue Dec 10, 2023
@JounQin
Copy link
Member

JounQin commented Dec 10, 2023

@u3u Please help to test:

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

@u3u
Copy link
Author

u3u commented Dec 11, 2023

🥳 Perfect!

Screen.Recording.2023-12-11.at.11.36.47.mov

JounQin added a commit that referenced this issue Dec 11, 2023
JounQin added a commit that referenced this issue Dec 11, 2023
@JounQin JounQin self-assigned this Dec 11, 2023
@JounQin JounQin added 🐛 type/bug This is a problem 🙆 yes/confirmed This is confirmed and ready to be worked on labels Dec 11, 2023
JounQin added a commit that referenced this issue Dec 12, 2023
JounQin added a commit that referenced this issue Dec 20, 2023
JounQin added a commit that referenced this issue Dec 21, 2023
@JounQin
Copy link
Member

JounQin commented Dec 21, 2023

v2.2.1 has already been released.

@u3u
Copy link
Author

u3u commented Dec 23, 2023

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 type/bug This is a problem 🙆 yes/confirmed This is confirmed and ready to be worked on
2 participants