[New] add no-invalid-html-attribute rule

[Nokel81]

This rule (and fixer) checks the "rel" value to make sure that it correctly relates to the tag that the "rel" property is on.

[ljharb]

Plus all of @golopot's comments.

[ljharb]

Are there other HTML element attributes that this type of rule might work on?

It might be nicer to make this rule a generic no-invalid-html-attribute rule (one that also works on React.createElement, and thus isn't jsx-specific), with an option for a list of attributes to check (that would default to ['rel']). That way, we could add support for a new attribute in a semver-minor without needing to add an entirely new rule.

Thoughts?

[Nokel81]

@ljharb Good idea about making this a more generic rule, though I don't know if I want to make it working with React.createElement in this PR.

[Nokel81]

@ljharb I have changed the name of the rule and added the option as you said. While reworking the internals a bit (though I haven't tested the code with non-rel items)

[ljharb]

Thanks, this is looking much better

[Nokel81]

I know that there are some failing tests for some older versions of eslint. Will look at them soon.

[ljharb]

No rush, please mark as ready for review once tests are passing.

[ljharb]

Thanks, this looks great! (sorry for the review delay)

This rule isn't named "jsx-", but it doesn't check React.createElement. I think it probably should, though. Is that something you'd mind adding?

[Nokel81]

@ljharb I have added checking React.createElement.

[ljharb]

Are there other attributes besides "rel" we can add here?

[codecov-commenter]

Codecov Report

Merging #2863 (ce77747) into master (9f1d618) will decrease coverage by 0.06%.
The diff coverage is 93.10%.

@@            Coverage Diff             @@
##           master    #2863      +/-   ##
==========================================
- Coverage   97.22%   97.15%   -0.07%     
==========================================
  Files         110      111       +1     
  Lines        7312     7428     +116     
  Branches     2669     2701      +32     
==========================================
+ Hits         7109     7217     +108     
- Misses        203      211       +8     

Impacted Files	Coverage Δ
index.js	100.00% <ø> (ø)
lib/rules/no-invalid-html-attribute.js	93.10% <93.10%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9f1d618...ce77747. Read the comment docs.

[Nokel81]

Maybe https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete but I think that could easily be done in a separate PR.

[ljharb]

Rebased again; I tweaked the test. <Foo rel="" /> must always be valid - this rule should only be checking HTML elements, never custom elements.

A few tests are still failing. @Nokel81?

[Nokel81]

Well since you just changed the logic or tests (cannot tell). I was whitelisting elements whereas I think you want me to blacklist html elements that aren't on the list.

[ljharb]

All I did is move the two "Foo" tests from invalid to valid.

[ljharb]

I'm fine with an inclusion-list-based approach, but it should ignore custom elements entirely.

[Nokel81]

@ljharb Sorry it took so long, this PR has been updated to ignore non-HTML tags.

[ljharb]

@Nokel81 i enabled all the test cases and used the messageId pattern and rebased.