From fee4331997555679ea12ff0c9d7dbdf6f92a5329 Mon Sep 17 00:00:00 2001
From: Xavier Le Cunff <31244713+JohnBerd@users.noreply.github.com>
Date: Sun, 20 Mar 2022 16:15:51 +0100
Subject: [PATCH] [FIX] `function-component-definition`: replace `var` by
 `const`

---
 docs/rules/function-component-definition.md | 56 ++++++---------------
 lib/rules/function-component-definition.js  |  4 +-
 2 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/docs/rules/function-component-definition.md b/docs/rules/function-component-definition.md
index b869373d20..850e3bc953 100644
--- a/docs/rules/function-component-definition.md
+++ b/docs/rules/function-component-definition.md
@@ -12,12 +12,12 @@ Examples of **incorrect** code for this rule:
 
 ```jsx
 // function expression for named component
-var Component = function (props) {
+const Component = function (props) {
   return <div>{props.content}</div>;
 };
 
 // arrow function for named component
-var Component = (props) => {
+const Component = (props) => {
   return <div>{props.content}</div>;
 };
 
@@ -49,11 +49,11 @@ Examples of **incorrect** code for this rule:
 ```jsx
 // only function declarations for named components
 // [2, { "namedComponents": "function-declaration" }]
-var Component = function (props) {
+const Component = function (props) {
   return <div />;
 };
 
-var Component = (props) => {
+const Component = (props) => {
   return <div />;
 };
 
@@ -63,7 +63,7 @@ function Component (props) {
   return <div />;
 };
 
-var Component = (props) => {
+const Component = (props) => {
   return <div />;
 };
 
@@ -73,7 +73,7 @@ function Component (props) {
   return <div />;
 };
 
-var Component = function (props) {
+const Component = function (props) {
   return <div />;
 };
 
@@ -107,13 +107,13 @@ function Component (props) {
 
 // only function expressions for named components
 // [2, { "namedComponents": "function-expression" }]
-var Component = function (props) {
+const Component = function (props) {
   return <div />;
 };
 
 // only arrow functions for named components
 // [2, { "namedComponents": "arrow-function" }]
-var Component = (props) => {
+const Component = (props) => {
   return <div />;
 };
 
@@ -135,32 +135,6 @@ function getComponent () {
 
 ```
 
-## Unfixable patterns
-
-There is one unfixable pattern in JavaScript.
-
-It has to do with the fact that this is valid syntax:
-
-```js
-export default function getComponent () {
-  return <div />;
-}
-```
-
-While these are not:
-
-```js
-export default var getComponent = () => {
-  return <div />;
-}
-
-export default var getComponent = function () {
-  return <div />;
-}
-```
-
-These patterns have to be manually fixed.
-
 ## Heads up, TypeScript users
 
 Note that the autofixer is somewhat constrained for TypeScript users.
@@ -170,11 +144,11 @@ The following patterns can **not** be autofixed in TypeScript:
 ```tsx
 // function expressions and arrow functions that have type annotations cannot be autofixed to function declarations
 // [2, { "namedComponents": "function-declaration" }]
-var Component: React.FC<Props> = function (props) {
+const Component: React.FC<Props> = function (props) {
   return <div />;
 };
 
-var Component: React.FC<Props> = (props) => {
+const Component: React.FC<Props> = (props) => {
   return <div />;
 };
 
@@ -184,7 +158,7 @@ function Component<T>(props: Props<T>) {
   return <div />;
 };
 
-var Component = function <T>(props: Props<T>) {
+const Component = function <T>(props: Props<T>) {
   return <div />;
 };
 
@@ -203,13 +177,13 @@ The following patterns can be autofixed in TypeScript:
 ```tsx
 // autofix to function expression with type annotation
 // [2, { "namedComponents": "function-expression" }]
-var Component: React.FC<Props> = (props) => {
+const Component: React.FC<Props> = (props) => {
   return <div />;
 };
 
 // autofix to arrow function with type annotation
 // [2, { "namedComponents": "function-expression" }]
-var Component: React.FC<Props> = function (props) {
+const Component: React.FC<Props> = function (props) {
   return <div />;
 };
 
@@ -219,7 +193,7 @@ function Component<T extends {}>(props: Props<T>) {
   return <div />;
 }
 
-var Component = function <T extends {}>(props: Props<T>) {
+const Component = function <T extends {}>(props: Props<T>) {
   return <div />;
 };
 
@@ -229,7 +203,7 @@ function Component<T1, T2>(props: Props<T1, T2>) {
   return <div />;
 }
 
-var Component = function <T1, T2>(props: Props<T2>) {
+const Component = function <T1, T2>(props: Props<T2>) {
   return <div />;
 };
 
diff --git a/lib/rules/function-component-definition.js b/lib/rules/function-component-definition.js
index 8f20e63366..f5dd96e16e 100644
--- a/lib/rules/function-component-definition.js
+++ b/lib/rules/function-component-definition.js
@@ -21,8 +21,8 @@ function buildFunction(template, parts) {
 
 const NAMED_FUNCTION_TEMPLATES = {
   'function-declaration': 'function {name}{typeParams}({params}){returnType} {body}',
-  'arrow-function': 'var {name}{typeAnnotation} = {typeParams}({params}){returnType} => {body}',
-  'function-expression': 'var {name}{typeAnnotation} = function{typeParams}({params}){returnType} {body}',
+  'arrow-function': 'const {name}{typeAnnotation} = {typeParams}({params}){returnType} => {body}',
+  'function-expression': 'const {name}{typeAnnotation} = function{typeParams}({params}){returnType} {body}',
 };
 
 const UNNAMED_FUNCTION_TEMPLATES = {