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

Allow custom components in jsx-no-target-blank #2116

Merged

Conversation

gbakernet
Copy link
Contributor

What is this?

The following PR allows for customising additional components used jsx-no-target-blank.
Closes #1075

Why do this

It's reasonable common for projects to implement <Link> or <Hyperlink> components and use them literally instead of <a> elements.

How does it work

From the docs

components

An array specifying the names of additional components that should also be validated.
Each array element can either be a string with the component name or object specifying the name and url attribute:

When using an object like so:

{
  "name": "Link",
  "linkAttribute": "to"
}

The following patterns are considered errors:

var Hello = <Link target='_blank' to="http://example.com/"></Link>
var Hello = <Link target='_blank' to={ dynamicLink }></Link>

The following patterns are not considered errors:

var Hello = <Link target='_blank' rel='noopener noreferrer' to="http://example.com"></Link>
var Hello = <Link target='_blank' to="relative/path/in/the/host"></Link>
var Hello = <Link target='_blank' to="/absolute/path/in/the/host"></Link>
var Hello = <Link />

When you use a string such as 'Link', it's equivalent to:

{
  "name": "Link",
  "linkAttribute": "href"
}

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.

This seems good, but maybe we should add something to the overall settings so that all rules that care about links can use the same list. https://github.com/yannickcr/eslint-plugin-react#configuration

docs/rules/jsx-no-target-blank.md Outdated Show resolved Hide resolved
@gbakernet
Copy link
Contributor Author

@ljharb I'm not too familiar with all the specific rules. A quick search for 'a' only yielded this rule, so I'm not sure what settings might look like given the additionally complexity of the href link attribute option.

@ljharb
Copy link
Member

ljharb commented Jan 4, 2019

I think the current schema for the components array would work fine as a plugin-level setting; we can enhance it in the future as needed.

@gbakernet
Copy link
Contributor Author

gbakernet commented Jan 6, 2019

I've updated the settings as I think you intend. Please let me know if you need any further changes.

@gbakernet
Copy link
Contributor Author

Is there anything else I can do to this PR?

@ljharb ljharb force-pushed the allow_custom_components_in_jsx_no_blank branch from 1bc4d66 to da8c6b2 Compare January 22, 2019 07:08
Copy link
Collaborator

@EvHaus EvHaus left a comment

Choose a reason for hiding this comment

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

Nice new feature! I just recommended a few documentation changes below.

docs/rules/jsx-no-target-blank.md Show resolved Hide resolved
docs/rules/jsx-no-target-blank.md Outdated Show resolved Hide resolved
docs/rules/jsx-no-target-blank.md Outdated Show resolved Hide resolved
Copy link
Collaborator

@EvHaus EvHaus left a comment

Choose a reason for hiding this comment

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

LGTM

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

Successfully merging this pull request may close these issues.

None yet

4 participants