Integrate eslint react-fc-component-definition

Author: Jon-edge

eslint.config.mjs

@@ -40,6 +40,7 @@ export default [
       'react-native/sort-styles': 'off',
 
       // Add our own rules:
+      'edge/react-fc-component-definition': 'warn',
       'edge/useAbortable-abort-check-param': 'error',
       'edge/useAbortable-abort-check-usage': 'error',
 

scripts/eslint-plugin-edge/index.mjs

@@ -1,3 +1,4 @@
+import reactFcComponentDefinition from './react-fc-component-definition.mjs'
 import abortCheckParam from './useAbortable-abort-check-param.mjs'
 import abortCheckUsage from './useAbortable-abort-check-usage.mjs'
 
@@ -8,6 +9,7 @@ export default {
     namespace: 'edge'
   },
   rules: {
+    'react-fc-component-definition': reactFcComponentDefinition,
     'useAbortable-abort-check-param': abortCheckParam,
     'useAbortable-abort-check-usage': abortCheckUsage
   }

scripts/eslint-plugin-edge/react-fc-component-definition.mjs

@@ -0,0 +1,111 @@
+/**
+ * ESLint rule to enforce React.FC<Props> for component definitions.
+ *
+ * Wrong:
+ *   export const Component = (props: Props): React.ReactElement | null => { ... }
+ *
+ * Correct:
+ *   export const Component: React.FC<Props> = props => { ... }
+ *
+ * This rule only targets PascalCase-named arrow functions to distinguish
+ * components from render helper functions (which should use explicit return types).
+ */
+
+const JSX_RETURN_TYPES = [
+  'ReactElement',
+  'ReactNode',
+  'Element', // JSX.Element
+  'JSXElement'
+]
+
+function isPascalCase(name) {
+  return /^[A-Z][a-zA-Z0-9]*$/.test(name)
+}
+
+function isJsxReturnType(typeAnnotation) {
+  if (!typeAnnotation) return false
+
+  const { typeAnnotation: innerType } = typeAnnotation
+
+  // Handle union types like `React.ReactElement | null`
+  if (innerType.type === 'TSUnionType') {
+    return innerType.types.some(t => isJsxType(t))
+  }
+
+  return isJsxType(innerType)
+}
+
+function isJsxType(node) {
+  if (!node) return false
+
+  // Handle `React.ReactElement`, `React.JSX.Element`, etc.
+  if (node.type === 'TSTypeReference') {
+    const typeName = getTypeName(node.typeName)
+    return JSX_RETURN_TYPES.some(t => typeName.endsWith(t))
+  }
+
+  return false
+}
+
+function getTypeName(typeName) {
+  if (typeName.type === 'Identifier') {
+    return typeName.name
+  }
+  // Handle qualified names like `React.ReactElement` or `React.JSX.Element`
+  // We only need the rightmost name since we use `.endsWith()` checks
+  if (typeName.type === 'TSQualifiedName') {
+    return typeName.right.name
+  }
+  return ''
+}
+
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Enforce React.FC<Props> for component definitions instead of explicit return types',
+      category: 'Stylistic Issues',
+      recommended: false
+    },
+    schema: []
+  },
+  create(context) {
+    return {
+      VariableDeclarator(node) {
+        // Check if this is an arrow function
+        if (node.init?.type !== 'ArrowFunctionExpression') return
+
+        // Check if the variable name is PascalCase (component convention)
+        const variableName = node.id?.name
+        if (!variableName || !isPascalCase(variableName)) return
+
+        // Check if the arrow function has an explicit return type
+        const arrowFunction = node.init
+        if (!arrowFunction.returnType) return
+
+        // Check if the return type is a JSX-related type
+        if (!isJsxReturnType(arrowFunction.returnType)) return
+
+        // Check if the variable already has a React.FC type annotation
+        const variableType = node.id.typeAnnotation
+        if (variableType) {
+          const typeName = getTypeName(
+            variableType.typeAnnotation?.typeName || {}
+          )
+          if (
+            typeName.endsWith('FC') ||
+            typeName.endsWith('FunctionComponent')
+          ) {
+            return // Already using React.FC
+          }
+        }
+
+        context.report({
+          node: arrowFunction.returnType,
+          message: `Component '${variableName}' should use React.FC<Props> instead of an explicit return type. Use: const ${variableName}: React.FC<Props> = props => { ... }`
+        })
+      }
+    }
+  }
+}