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

[Fix] no-unknown-property: properly recognise unknown HTML/DOM attributes #3377

Merged
merged 4 commits into from
Sep 1, 2022

Conversation

sjarva
Copy link
Contributor

@sjarva sjarva commented Aug 31, 2022

Closes #757 by...

  • renaming an old error message (unknownProp to unknownPropWithStandardName), since it reports an unknown property that is close (one lower/higher case letter) to an allowed (standard) name
  • adding a new error message (unknownProp) that is used when an unknown property (without a
  • listing all one word and multiple word valid HTML/DOM attributes, and aria-* attributes
  • adding a function that checks if attribute name is a valid data-* attribute
  • adding more unit test cases
  • moving one test that should have failed, from valid to invalid tests
  • updating rule documentation

What was not implemented in this PR:

  • mapping element specific tags to ATTRIBUTE_TAGS_MAP (e.g. attributes optimum, high and low should be used only on <meter> element)

While implementing these changes, I felt like I cannot be sure that this PR catches all valid HTML/DOM attributes. There are some listing on MDN and on React documentation, but I could still find attributes that weren't on these listing that I felt would be beneficial to be listed in this rule (for example, the Safari/Apple related autoCorrect and autoSave, and React related ref and defaultValue). So, I'm sure there will be cases that this PR has missed, and the community will find them if these changes are merged and published.

Feel free to tag some who knows HTML/DOM attributes well and can help with reviewing and possibly suggesting more new unit test cases.

…arate functions

 - checking case ignored attributes to a function of its own

Also move variable inside function definition to make JSDoc comment match correct block
Also update the link to Web components spec
…so one word properties

Also regroup the properties to global, element specific and React or Safari/Apple specific
…ibutes

Refactored going through different scenarios and error cases to be more clear.
Also add some new unit tests, and move one should-have-been invalid test case from valid to invalid.
@codecov
Copy link

codecov bot commented Aug 31, 2022

Codecov Report

Merging #3377 (1554a91) into master (d3aa050) will increase coverage by 0.00%.
The diff coverage is 97.36%.

❗ Current head 1554a91 differs from pull request most recent head f54b391. Consider uploading reports for the commit f54b391 to get more accurate results

@@           Coverage Diff           @@
##           master    #3377   +/-   ##
=======================================
  Coverage   97.57%   97.57%           
=======================================
  Files         123      123           
  Lines        8932     8954   +22     
  Branches     3260     3268    +8     
=======================================
+ Hits         8715     8737   +22     
  Misses        217      217           
Impacted Files Coverage Δ
lib/rules/no-unknown-property.js 97.56% <97.36%> (+0.89%) ⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

@ljharb ljharb changed the title [Fix] no-unknown-property not recognising unknown properties [Fix] no-unknown-property: properly recognise unknown HTML/DOM attributes Aug 31, 2022
@ljharb ljharb force-pushed the no-unknown-property-bug branch 2 times, most recently from 1554a91 to f54b391 Compare August 31, 2022 21:00
Copy link
Member

@ljharb ljharb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM pending one comment

tests/lib/rules/no-unknown-property.js Show resolved Hide resolved
@ljharb ljharb merged commit f54b391 into jsx-eslint:master Sep 1, 2022
@ljharb
Copy link
Member

ljharb commented Sep 1, 2022

Thanks!

@sjarva sjarva deleted the no-unknown-property-bug branch September 1, 2022 17:15
@sjarva
Copy link
Contributor Author

sjarva commented Sep 3, 2022

I'm commenting here, because I think this is the best place to do it. I'm aware of the issues and errors that these changes caused. When making this PR, I was sure that I have missed some common scenarios that the community would find, and I was wondering should I ask or comment that could you @ljharb as a maintainer run some additional checks (like the smoke test) before releasing this. Being still a new contributor, I was shy and didn't dare to ask. Looking back now, I should have asked, and I will so better in the future.

Also, I am on another timezone than you are, so I wasn't awake when you released this and tagged me to the first issue. I'm happy that someone else from the community provided a quick fix 🛠️ 🤗

ijjk pushed a commit to vercel/next.js that referenced this pull request Sep 8, 2022
~(PR jsx-eslint/eslint-plugin-react#3377)
introduced a change in `eslint-plugin-react@7.31.2` that will now show
an error when unknown properties appear on elements. We can opt out of
this by overriding the default.~

As discussed internally, we are turning `react/no-unknown-property` off,
as it might be confusing even if different props are being used, (eg.:
`css` for `emotion`).

It's easy to fix
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md#rule-options,
but it might not be clear at first glance that Next.js is using
`eslint-plugin-react` internally.

If the user wants to enforce this rule, they can still add it to their
own `rules` config.

Fixes #40321, ref: #40269,
#38333
@valscion
Copy link

Hi! I want to say huge thanks for writing this change — it spotted some cases in our codebase that we would've never gotten to find without the help of this linter!

I figured it's nice to also hear some encouraging words and not merely bug reports 😄 I for one am thankful for the work you've done here 💞

@sjarva
Copy link
Contributor Author

sjarva commented Oct 13, 2022

Hi! I want to say huge thanks for writing this change — it spotted some cases in our codebase that we would've never gotten to find without the help of this linter!

I figured it's nice to also hear some encouraging words and not merely bug reports 😄 I for one am thankful for the work you've done here 💞

Thank you so much @valscion! Yes, it is nice to hear that it helped find bugs 🐛 💕 And I really appreciate you taking the time to write this comment, it really made my day 🤗

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

no-unknown-property doesn't prevent use of unknown properties?
3 participants