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

React/declarations for function components #2414

Open

Conversation

@Stefanwullems
Copy link

commented Sep 18, 2019

This is just draft of how I would like it to work. Any feedback would be much appreciated.

This pull request was inspired by #690

Tasks:

  • warn when component is not defined in the preferred way
  • Autofix component to preferred component
  • able to configure preference both named and unnamed components and autofix both accordingly
  • support autofix for typescript
    • handle components with type arguments
    • ignore function expressions and arrow functions of which the variable declaration is explicitly typed
  • docs
…pe for function components

Fixes ##690.
Copy link
Collaborator

left a comment

Thanks, this is a great start!

It'd be really nice if this could be autofixable. Things to watch out for in the fixers include:

  • any usage of this directly inside the component, or inside an arrow function (ie, not wrapped by another normal function), should prevent the autofix
  • if the component is an arrow function, and has an inferred name, that should be the name of the function expression. if it doesn't, then it should become an anonymous function expression
  • if the component is a function declaration, it should not be autofixed into an arrow expression
  • if the component is a function expression, the explicit name should match whatever the inferred name of the arrow function will eventually be - or else it should not run an autofix.
index.js Outdated Show resolved Hide resolved
lib/rules/declarations-for-function-components.js Outdated Show resolved Hide resolved
lib/rules/declarations-for-function-components.js Outdated Show resolved Hide resolved
@Stefanwullems

This comment has been minimized.

Copy link
Author

commented Sep 19, 2019

Does autofix take typescript into account at all? I imagine autofixing a functional component that is defined like so:

const Component: React.FC<Props> = (props) => {
   return null
} 

would lead to unintentional side effects. Should eslint-plugin-react care about this? @ljharb

@ljharb

This comment has been minimized.

Copy link
Collaborator

commented Sep 20, 2019

That’s a fair point; if the types can be fixed, great, if not, best to skip auto fixing entirely when there’s type annotations.

@Stefanwullems Stefanwullems requested a review from ljharb Sep 27, 2019
@Stefanwullems Stefanwullems marked this pull request as ready for review Sep 28, 2019
@Stefanwullems

This comment has been minimized.

Copy link
Author

commented Sep 30, 2019

I will start writing the documentation once I have some certainty that it now works the way you are okay with @ljharb

Copy link
Collaborator

left a comment

Thanks, this looks great. Let's get that documentation written.

lib/rules/function-component-definition.js Outdated Show resolved Hide resolved
@ljharb ljharb added the new rule label Oct 1, 2019
@Stefanwullems Stefanwullems requested a review from ljharb Oct 7, 2019
@Stefanwullems Stefanwullems requested a review from ljharb Oct 9, 2019
@ljharb

This comment has been minimized.

Copy link
Collaborator

commented Oct 12, 2019

@Stefanwullems tests are failing.

@ljharb ljharb force-pushed the Stefanwullems:react/declarations-for-function-components branch from 50ed041 to 6f07af0 Oct 12, 2019
docs/rules/function-component-definition.md Outdated Show resolved Hide resolved
docs/rules/function-component-definition.md Outdated Show resolved Hide resolved
docs/rules/function-component-definition.md Outdated Show resolved Hide resolved
docs/rules/function-component-definition.md Outdated Show resolved Hide resolved
lib/rules/function-component-definition.js Outdated Show resolved Hide resolved
Stefanwullems and others added 6 commits Oct 13, 2019
Co-Authored-By: Jordan Harband <ljharb@gmail.com>
Co-Authored-By: Jordan Harband <ljharb@gmail.com>
Co-Authored-By: Jordan Harband <ljharb@gmail.com>
Co-Authored-By: Jordan Harband <ljharb@gmail.com>
@Stefanwullems Stefanwullems requested a review from ljharb Oct 13, 2019
options: [{unnamedComponents: 'function-expression'}],
parser: parsers.TYPESCRIPT_ESLINT
}
]

This comment has been minimized.

Copy link
@golopot

golopot Oct 13, 2019

Contributor

Some missing test cases:

export function Foo() {...};
export default function Foo() {...};
export default { Foo() {...} };
exports.Foo = function Foo() {...};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.