Add detection for ES6 via import/export and some other test cases.

Author: SimeonC

lib/rules/function-component-definition.js

@@ -217,7 +217,7 @@ module.exports = {
  // --------------------------------------------------------------------------
  const validatePairs = [];
  let hasEs6OrJsx = false;
- return {
+ const astHandlers = {
  FunctionDeclaration(node) {
  validatePairs.push([node, 'function-declaration']);
  },
@@ -230,13 +230,27 @@ module.exports = {
  VariableDeclaration(node) {
  hasEs6OrJsx = hasEs6OrJsx || node.kind === 'const' || node.kind === 'let';
  },
- JSXElement() {
- hasEs6OrJsx = true;
- },
  'Program:exit'() {
  if (hasEs6OrJsx) fileVarType = 'const';
  validatePairs.forEach((pair) => validate(pair[0], pair[1]));
  },
  };
+ // if any of the following are detected, assume es6
+ [
+ 'ImportDeclaration',
+ 'ExportNamedDeclaration',
+ 'ExportDefaultDeclaration',
+ 'ExportAllDeclaration',
+ 'ExportSpecifier',
+ 'ExportDefaultSpecifier',
+ 'JSXElement',
+ 'TSExportAssignment',
+ 'TSImportEqualsDeclaration',
+ ].forEach((es6Flag) => {
+ astHandlers[es6Flag] = () => {
+ hasEs6OrJsx = true;
+ };
+ });
+ return astHandlers;
  }),
 };

tests/lib/rules/function-component-definition.js

@@ -479,6 +479,56 @@ ruleTester.run('function-component-definition', rule, {
  options: [{ namedComponents: 'function-expression' }],
  errors: [{ messageId: 'function-expression' }],
  },
+ {
+ code: `
+ let Hello = (props) => {
+ return <div/>;
+ }
+ `,
+ output: `
+ let Hello = function(props) {
+ return <div/>;
+ }
+ `,
+ options: [{ namedComponents: 'function-expression' }],
+ errors: [{ messageId: 'function-expression' }],
+ },
+ {
+ code: `
+ let Hello;
+ Hello = (props) => {
+ return <div/>;
+ }
+ `,
+ output: `
+ let Hello;
+ Hello = function(props) {
+ return <div/>;
+ }
+ `,
+ options: [{ namedComponents: 'function-expression' }],
+ errors: [{ messageId: 'function-expression' }],
+ },
+ {
+ code: `
+ let Hello = (props) => {
+ return <div/>;
+ }
+ Hello = function(props) {
+ return <span/>;
+ }
+ `,
+ output: `
+ let Hello = function(props) {
+ return <div/>;
+ }
+ Hello = function(props) {
+ return <span/>;
+ }
+ `,
+ options: [{ namedComponents: 'function-expression' }],
+ errors: [{ messageId: 'function-expression' }],
+ },
  {
  code: `
  function Hello(props) {
@@ -619,6 +669,54 @@ ruleTester.run('function-component-definition', rule, {
  errors: [{ messageId: 'function-expression' }],
  features: ['types'],
  },
+ {
+ code: `
+ import * as React from 'react';
+ function Hello(props: Test) {
+ return React.createElement('div');
+ }
+ `,
+ output: `
+ import * as React from 'react';
+ const Hello = function(props: Test) {
+ return React.createElement('div');
+ }
+ `,
+ options: [{ namedComponents: 'function-expression' }],
+ errors: [{ messageId: 'function-expression' }],
+ features: ['types'],
+ },
+ {
+ code: `
+ export function Hello(props: Test) {
+ return React.createElement('div');
+ }
+ `,
+ output: `
+ export const Hello = function(props: Test) {
+ return React.createElement('div');
+ }
+ `,
+ options: [{ namedComponents: 'function-expression' }],
+ errors: [{ messageId: 'function-expression' }],
+ features: ['types'],
+ },
+ {
+ code: `
+ function Hello(props) {
+ return React.createElement('div');
+ }
+ export default Hello;
+ `,
+ output: `
+ const Hello = function(props) {
+ return React.createElement('div');
+ }
+ export default Hello;
+ `,
+ options: [{ namedComponents: 'function-expression' }],
+ errors: [{ messageId: 'function-expression' }],
+ },
  {
  code: `
  var Hello = (props: Test) => {