eslint-config-typed 4.0.6 → 4.0.8

package/src/plugins/react-coding-style/rules/display-name.mts

@@ -3,16 +3,16 @@ import {
   type TSESLint,
   type TSESTree,
 } from '@typescript-eslint/utils';
-import { expectType } from 'ts-data-forge';
+import { castDeepMutable } from 'ts-data-forge';
 import { isReactApiCall } from './shared.mjs';
 
 type Options = readonly [
   Readonly<{
-    ignoreTranspilerName?: boolean;
+    ignoreName?: string | readonly string[];
   }>?,
 ];
 
-type MessageIds = 'missingDisplayName';
+type MessageIds = 'missingDisplayName' | 'mismatchedDisplayName';
 
 /**
  * Rule to require displayName property for React components
@@ -23,16 +23,23 @@ export const displayNameRule: TSESLint.RuleModule<MessageIds, Options> = {
     type: 'suggestion',
     docs: {
       description:
-        'Require displayName property for React components created with React.memo',
+        'Require React.memo components to define displayName matching the component name',
     },
     schema: [
       {
         type: 'object',
         properties: {
-          ignoreTranspilerName: {
-            type: 'boolean',
+          ignoreName: {
             description:
-              'When true, ignores components that get displayName from variable name',
+              'Component names allowed to have displayName different from the variable name.',
+            oneOf: [
+              { type: 'string' },
+              {
+                type: 'array',
+                items: { type: 'string' },
+                minItems: 0,
+              },
+            ],
           },
         },
         additionalProperties: false,
@@ -41,12 +48,17 @@ export const displayNameRule: TSESLint.RuleModule<MessageIds, Options> = {
     messages: {
       missingDisplayName:
         'Component should have a displayName property for better debugging',
+      mismatchedDisplayName:
+        'displayName should match the component name "{{componentName}}"',
     },
   },
   create: (context) => {
     const options = context.options[0] ?? {};
 
-    const ignoreTranspilerName = options.ignoreTranspilerName ?? false;
+    const ignoreNameSet = normalizeNames(options.ignoreName);
+
+    const shouldIgnoreMismatch = (componentName: string): boolean =>
+      ignoreNameSet.has(componentName);
 
     const checkComponent = (
       node: DeepReadonly<TSESTree.VariableDeclarator>,
@@ -65,48 +77,47 @@ export const displayNameRule: TSESLint.RuleModule<MessageIds, Options> = {
 
       const componentName = node.id.name;
 
-      if (ignoreTranspilerName) {
-        return;
-      }
+      const assignment = getDisplayNameAssignment(node);
 
-      const parent = node.parent;
+      if (assignment === undefined) {
+        context.report({
+          node: castDeepMutable(node),
+          messageId: 'missingDisplayName',
+        });
 
-      expectType<typeof parent.type, AST_NODE_TYPES.VariableDeclaration>('=');
+        return;
+      }
 
-      const grandParent = parent.parent;
+      if (!isComponentDisplayNameAssignment(assignment, componentName)) {
+        context.report({
+          node: castDeepMutable(node),
+          messageId: 'missingDisplayName',
+        });
 
-      if (grandParent.type !== AST_NODE_TYPES.Program) {
         return;
       }
 
-      const program = grandParent;
+      const displayName = extractDisplayName(assignment.right);
 
-      const componentIndex = program.body.indexOf(parent);
+      if (displayName === undefined) {
+        context.report({
+          node: assignment.right,
+          messageId: 'mismatchedDisplayName',
+          data: { componentName },
+        });
+
+        return;
+      }
 
-      if (componentIndex === -1) {
+      if (shouldIgnoreMismatch(componentName)) {
         return;
       }
 
-      const nextStatement = program.body[componentIndex + 1];
-
-      const hasDisplayName =
-        nextStatement !== undefined &&
-        nextStatement.type === AST_NODE_TYPES.ExpressionStatement &&
-        nextStatement.expression.type === AST_NODE_TYPES.AssignmentExpression &&
-        nextStatement.expression.left.type ===
-          AST_NODE_TYPES.MemberExpression &&
-        nextStatement.expression.left.object.type ===
-          AST_NODE_TYPES.Identifier &&
-        nextStatement.expression.left.object.name === componentName &&
-        nextStatement.expression.left.property.type ===
-          AST_NODE_TYPES.Identifier &&
-        nextStatement.expression.left.property.name === 'displayName';
-
-      if (!hasDisplayName) {
+      if (displayName !== componentName) {
         context.report({
-          // eslint-disable-next-line total-functions/no-unsafe-type-assertion
-          node: node.id as never,
-          messageId: 'missingDisplayName',
+          node: assignment.right,
+          messageId: 'mismatchedDisplayName',
+          data: { componentName },
         });
       }
     };
@@ -115,5 +126,116 @@ export const displayNameRule: TSESLint.RuleModule<MessageIds, Options> = {
       VariableDeclarator: checkComponent,
     };
   },
-  defaultOptions: [{ ignoreTranspilerName: false }],
+  defaultOptions: [{ ignoreName: [] }],
+};
+
+const normalizeNames = (
+  names: string | readonly string[] | undefined,
+): ReadonlySet<string> => {
+  if (names === undefined) {
+    return new Set();
+  }
+
+  if (typeof names === 'string') {
+    return new Set([names]);
+  }
+
+  return new Set(names);
+};
+
+const getDisplayNameAssignment = (
+  node: DeepReadonly<TSESTree.VariableDeclarator>,
+): DeepReadonly<TSESTree.AssignmentExpression> | undefined => {
+  let mut_current = node.parent as DeepReadonly<TSESTree.Node> | undefined;
+
+  let mut_statement: DeepReadonly<TSESTree.Statement> | undefined = undefined;
+
+  while (mut_current !== undefined) {
+    if (
+      mut_current.type === AST_NODE_TYPES.VariableDeclaration ||
+      mut_current.type === AST_NODE_TYPES.ExportNamedDeclaration
+    ) {
+      mut_statement = mut_current as DeepReadonly<TSESTree.Statement>;
+    }
+
+    if (mut_current.type === AST_NODE_TYPES.Program) {
+      break;
+    }
+
+    mut_current = mut_current.parent;
+  }
+
+  if (mut_current === undefined || mut_statement === undefined) {
+    return undefined;
+  }
+
+  const program = mut_current;
+
+  const componentIndex = program.body.indexOf(
+    // eslint-disable-next-line total-functions/no-unsafe-type-assertion
+    mut_statement as TSESTree.Statement,
+  );
+
+  if (componentIndex === -1) {
+    return undefined;
+  }
+
+  const nextStatement = program.body[componentIndex + 1];
+
+  if (nextStatement === undefined) {
+    return undefined;
+  }
+
+  if (nextStatement.type !== AST_NODE_TYPES.ExpressionStatement) {
+    return undefined;
+  }
+
+  if (nextStatement.expression.type !== AST_NODE_TYPES.AssignmentExpression) {
+    return undefined;
+  }
+
+  return nextStatement.expression;
+};
+
+const isComponentDisplayNameAssignment = (
+  assignment: DeepReadonly<TSESTree.AssignmentExpression>,
+  componentName: string,
+): assignment is TSESTree.AssignmentExpression => {
+  if (assignment.left.type !== AST_NODE_TYPES.MemberExpression) {
+    return false;
+  }
+
+  if (assignment.left.object.type !== AST_NODE_TYPES.Identifier) {
+    return false;
+  }
+
+  if (assignment.left.object.name !== componentName) {
+    return false;
+  }
+
+  return (
+    assignment.left.property.type === AST_NODE_TYPES.Identifier &&
+    assignment.left.property.name === 'displayName'
+  );
+};
+
+const extractDisplayName = (
+  expression: DeepReadonly<TSESTree.Expression>,
+): string | undefined => {
+  if (
+    expression.type === AST_NODE_TYPES.Literal &&
+    typeof expression.value === 'string'
+  ) {
+    return expression.value;
+  }
+
+  if (
+    expression.type === AST_NODE_TYPES.TemplateLiteral &&
+    expression.expressions.length === 0 &&
+    expression.quasis.length === 1
+  ) {
+    return expression.quasis[0]?.value.cooked ?? undefined;
+  }
+
+  return undefined;
 };

package/src/plugins/react-coding-style/rules/display-name.test.mts

@@ -41,6 +41,13 @@ describe('display-name', () => {
             const notAComponent = someFunction();
           `,
         },
+        {
+          name: 'Exported component with displayName',
+          code: dedent`
+            export const MyComponent = React.memo(() => <div>Hello</div>);
+            MyComponent.displayName = 'MyComponent';
+          `,
+        },
       ],
       invalid: [
         {
@@ -50,6 +57,26 @@ describe('display-name', () => {
           `,
           errors: [{ messageId: 'missingDisplayName' }],
         },
+        {
+          name: 'Exported component without displayName',
+          code: dedent`
+            export const MyComponent = React.memo(() => <div>Hello</div>);
+          `,
+          errors: [{ messageId: 'missingDisplayName' }],
+        },
+        {
+          name: 'Component with mismatched displayName',
+          code: dedent`
+            const MyComponent = React.memo(() => <div>Hello</div>);
+            MyComponent.displayName = 'Other';
+          `,
+          errors: [
+            {
+              messageId: 'mismatchedDisplayName',
+              data: { componentName: 'MyComponent' },
+            },
+          ],
+        },
         {
           name: 'Named import without displayName',
           code: dedent`
@@ -58,19 +85,47 @@ describe('display-name', () => {
           `,
           errors: [{ messageId: 'missingDisplayName' }],
         },
+        {
+          name: 'Named import with mismatched displayName',
+          code: dedent`
+            import { memo } from 'react';
+            const MyComponent = memo(() => <div>Hello</div>);
+            MyComponent.displayName = 'Component';
+          `,
+          errors: [
+            {
+              messageId: 'mismatchedDisplayName',
+              data: { componentName: 'MyComponent' },
+            },
+          ],
+        },
+        {
+          name: 'Exported component with mismatched displayName',
+          code: dedent`
+            export const MyComponent = React.memo(() => <div>Hello</div>);
+            MyComponent.displayName = 'Component';
+          `,
+          errors: [
+            {
+              messageId: 'mismatchedDisplayName',
+              data: { componentName: 'MyComponent' },
+            },
+          ],
+        },
       ],
     });
   });
 
-  describe('ignoreTranspilerName option', () => {
-    tester.run('display-name with ignoreTranspilerName', displayNameRule, {
+  describe('ignoreName option', () => {
+    tester.run('display-name with ignoreName', displayNameRule, {
       valid: [
         {
-          name: 'Component without displayName (ignored)',
+          name: 'Component with mismatched displayName (ignored)',
           code: dedent`
             const MyComponent = React.memo(() => <div>Hello</div>);
+            MyComponent.displayName = 'Other';
           `,
-          options: [{ ignoreTranspilerName: true }],
+          options: [{ ignoreName: 'MyComponent' }],
         },
         {
           name: 'Component with displayName',
@@ -78,10 +133,19 @@ describe('display-name', () => {
             const MyComponent = React.memo(() => <div>Hello</div>);
             MyComponent.displayName = 'MyComponent';
           `,
-          options: [{ ignoreTranspilerName: true }],
+          options: [{ ignoreName: ['MyComponent'] }],
+        },
+      ],
+      invalid: [
+        {
+          name: 'Component without displayName is still reported',
+          code: dedent`
+            const MyComponent = React.memo(() => <div>Hello</div>);
+          `,
+          options: [{ ignoreName: ['MyComponent'] }],
+          errors: [{ messageId: 'missingDisplayName' }],
         },
       ],
-      invalid: [],
     });
   });
 });

package/src/plugins/react-coding-style/rules/shared.test.mts

@@ -0,0 +1,148 @@
+import parser from '@typescript-eslint/parser';
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import { type TSESLint } from '@typescript-eslint/utils';
+import { getReactMemoArrowFunction, isReactApiCall } from './shared.mjs';
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser,
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      ecmaFeatures: { jsx: true },
+    },
+  },
+});
+
+const reactApiRule: TSESLint.RuleModule<'reactApiDetected', readonly []> = {
+  meta: {
+    type: 'problem',
+    docs: { description: 'test helper isReactApiCall' },
+    schema: [],
+    messages: {
+      reactApiDetected: 'React API call detected',
+    },
+  },
+  defaultOptions: [],
+  create: (context) => ({
+    CallExpression: (node) => {
+      if (isReactApiCall(context, node, 'memo')) {
+        context.report({ node, messageId: 'reactApiDetected' });
+      }
+    },
+  }),
+};
+
+const reactMemoArrowRule: TSESLint.RuleModule<'arrowDetected', readonly []> = {
+  meta: {
+    type: 'problem',
+    docs: { description: 'test helper getReactMemoArrowFunction' },
+    schema: [],
+    messages: {
+      arrowDetected: 'React.memo received arrow function',
+    },
+  },
+  defaultOptions: [],
+  create: (context) => ({
+    CallExpression: (node) => {
+      if (!isReactApiCall(context, node, 'memo')) {
+        return;
+      }
+
+      const arrow = getReactMemoArrowFunction(node);
+
+      if (arrow !== undefined) {
+        assert.strictEqual(arrow.type, 'ArrowFunctionExpression');
+
+        context.report({ node, messageId: 'arrowDetected' });
+      }
+    },
+  }),
+};
+
+describe('shared helpers', () => {
+  tester.run('isReactApiCall', reactApiRule, {
+    valid: [
+      {
+        name: 'non React call',
+        code: 'const x = fn();',
+      },
+      {
+        name: 'memo imported from non-react',
+        code: `
+          import { memo } from 'not-react';
+          const Component = memo(() => null);
+        `,
+      },
+      {
+        name: 'React member but different method',
+        code: `
+          import * as React from 'react';
+          const Component = React.useMemo(() => null, []);
+        `,
+      },
+    ],
+    invalid: [
+      {
+        name: 'named memo import from react',
+        code: `
+          import { memo } from 'react';
+          const Component = memo(() => null);
+        `,
+        errors: [{ messageId: 'reactApiDetected' }],
+      },
+      {
+        name: 'namespace React memo call',
+        code: `
+          import * as React from 'react';
+          const Component = React.memo(() => null);
+        `,
+        errors: [{ messageId: 'reactApiDetected' }],
+      },
+      {
+        name: 'global React memo call without import',
+        code: `
+          const Component = React.memo(() => null);
+        `,
+        errors: [{ messageId: 'reactApiDetected' }],
+      },
+    ],
+  });
+
+  tester.run('getReactMemoArrowFunction', reactMemoArrowRule, {
+    valid: [
+      {
+        name: 'memo with non-arrow first argument',
+        code: `
+          import { memo } from 'react';
+          function Component() { return null; }
+          const Wrapped = memo(Component);
+        `,
+      },
+      {
+        name: 'non React call with arrow argument',
+        code: `
+          const Wrapped = wrap(() => null);
+        `,
+      },
+    ],
+    invalid: [
+      {
+        name: 'memo with arrow function argument',
+        code: `
+          import { memo } from 'react';
+          const Wrapped = memo(() => null);
+        `,
+        errors: [{ messageId: 'arrowDetected' }],
+      },
+      {
+        name: 'React namespace memo with arrow function argument',
+        code: `
+          import * as React from 'react';
+          const Wrapped = React.memo(() => null);
+        `,
+        errors: [{ messageId: 'arrowDetected' }],
+      },
+    ],
+  });
+});

package/src/plugins/react-coding-style/rules/use-memo-hooks-style-named.test.mts

@@ -28,12 +28,14 @@ describe('use-memo-hooks-style', () => {
             import { memo, useMemo } from 'react';
 
             type Props = Readonly<{
-              readonly value: number;
+              value: number;
             }>;
 
             const Component = memo<Props>((props) => {
               const memoized = useMemo<number>(() => props.value, [props.value]);
+
               const typed: number = useMemo(() => props.value, [props.value]);
+
               return <div />;
             });
           `,
@@ -54,6 +56,40 @@ describe('use-memo-hooks-style', () => {
             const value = useMemo(() => 42) as number;
           `,
         },
+        {
+          name: 'Allow satisfies expression',
+          code: dedent`
+            import { memo, useMemo } from 'react';
+
+            type Props = Readonly<{
+              value: number;
+            }>;
+
+            const Component = memo<Props>((props) => {
+              const value = useMemo(() => props.value, [props.value]) satisfies number;
+
+              const inner = useMemo(() => props.value satisfies number, [props.value]);
+
+              return inner + value;
+            });
+          `,
+        },
+        {
+          name: 'Allow const assertion',
+          code: dedent`
+            import { memo, useMemo } from 'react';
+
+            type Props = Readonly<{
+              value: number;
+            }>;
+
+            const Component = memo<Props>((props) => {
+              const value = useMemo(() => ({ v: props.value }) as const, [props.value]);
+
+              return value;
+            });
+          `,
+        },
       ],
       invalid: [
         {
@@ -62,7 +98,7 @@ describe('use-memo-hooks-style', () => {
             import { memo, useMemo } from 'react';
 
             type Props = Readonly<{
-              readonly value: number;
+              value: number;
             }>;
 
             const Component = memo<Props>((props) => {
@@ -82,7 +118,7 @@ describe('use-memo-hooks-style', () => {
             import { memo, useMemo } from 'react';
 
             type Props = Readonly<{
-              readonly value: number;
+              value: number;
             }>;
 
             const Component = memo<Props>((props) => {
@@ -102,11 +138,11 @@ describe('use-memo-hooks-style', () => {
             import { memo, useMemo } from 'react';
 
             type Props = Readonly<{
-              readonly value: number;
+              value: number;
             }>;
 
             const Component = memo<Props>((props) => {
-              const value = useMemo(() => props.value as number, [props.value]) ;
+              const value = useMemo(() => props.value as number, [props.value]);
               return value;
             });
           `,
@@ -117,16 +153,16 @@ describe('use-memo-hooks-style', () => {
           ],
         },
         {
-          name: 'Disallow satisfies expression',
+          name: 'Disallow return type annotation even with satisfies',
           code: dedent`
             import { memo, useMemo } from 'react';
 
             type Props = Readonly<{
-              readonly value: number;
+              value: number;
             }>;
 
             const Component = memo<Props>((props) => {
-              const value = useMemo(() => props.value, [props.value]) satisfies number;
+              const value = useMemo((): number => props.value, [props.value]) satisfies number;
               return value;
             });
           `,
@@ -137,16 +173,16 @@ describe('use-memo-hooks-style', () => {
           ],
         },
         {
-          name: 'Disallow satisfies expression (inner)',
+          name: 'Disallow return type annotation even with const assertion',
           code: dedent`
             import { memo, useMemo } from 'react';
 
             type Props = Readonly<{
-              readonly value: number;
+              value: number;
             }>;
 
             const Component = memo<Props>((props) => {
-              const value = useMemo(() => props.value satisfies number, [props.value]);
+              const value = useMemo((): number => props.value, [props.value]) as const;
               return value;
             });
           `,