eslint-config-typed 4.0.6 → 4.0.8

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

@@ -28,12 +28,14 @@ describe('use-memo-hooks-style', () => {
             import * as React from 'react';
 
             type Props = Readonly<{
-              readonly value: number;
+              value: number;
             }>;
 
             const Component = React.memo<Props>((props) => {
               const memoized = React.useMemo<number>(() => props.value, [props.value]);
+
               const typed: number = React.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 * as React from 'react';
+
+            type Props = Readonly<{
+              value: number;
+            }>;
+
+            const Component = React.memo<Props>((props) => {
+              const value = React.useMemo(() => props.value, [props.value]) satisfies number;
+
+              const inner = React.useMemo(() => props.value satisfies number, [props.value]);
+
+              return inner + value;
+            });
+          `,
+        },
+        {
+          name: 'Allow const assertion',
+          code: dedent`
+            import * as React from 'react';
+
+            type Props = Readonly<{
+              value: number;
+            }>;
+
+            const Component = React.memo<Props>((props) => {
+              const value = React.useMemo(() => ({ v: props.value }) as const, [props.value]);
+
+              return value;
+            });
+          `,
+        },
       ],
       invalid: [
         {
@@ -62,7 +98,7 @@ describe('use-memo-hooks-style', () => {
             import * as React from 'react';
 
             type Props = Readonly<{
-              readonly value: number;
+              value: number;
             }>;
 
             const Component = React.memo<Props>((props) => {
@@ -82,7 +118,7 @@ describe('use-memo-hooks-style', () => {
             import * as React from 'react';
 
             type Props = Readonly<{
-              readonly value: number;
+              value: number;
             }>;
 
             const Component = React.memo<Props>((props) => {
@@ -102,11 +138,11 @@ describe('use-memo-hooks-style', () => {
             import * as React from 'react';
 
             type Props = Readonly<{
-              readonly value: number;
+              value: number;
             }>;
 
             const Component = React.memo<Props>((props) => {
-              const value = React.useMemo(() => props.value as number, [props.value]) ;
+              const value = React.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 * as React from 'react';
 
             type Props = Readonly<{
-              readonly value: number;
+              value: number;
             }>;
 
             const Component = React.memo<Props>((props) => {
-              const value = React.useMemo(() => props.value, [props.value]) satisfies number;
+              const value = React.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 * as React from 'react';
 
             type Props = Readonly<{
-              readonly value: number;
+              value: number;
             }>;
 
             const Component = React.memo<Props>((props) => {
-              const value = React.useMemo(() => props.value satisfies number, [props.value]);
+              const value = React.useMemo((): number => props.value, [props.value]) as const;
               return value;
             });
           `,

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

@@ -30,9 +30,9 @@ export const useMemoHooksStyleRule: TSESLint.RuleModule<MessageIds> = {
       const parent = node.parent;
 
       if (
-        parent.type === AST_NODE_TYPES.TSAsExpression ||
-        parent.type === AST_NODE_TYPES.TSTypeAssertion ||
-        parent.type === AST_NODE_TYPES.TSSatisfiesExpression
+        (parent.type === AST_NODE_TYPES.TSAsExpression ||
+          parent.type === AST_NODE_TYPES.TSTypeAssertion) &&
+        !isConstAssertion(parent.typeAnnotation)
       ) {
         context.report({
           node: castDeepMutable(parent),
@@ -72,13 +72,14 @@ const checkNodeForTypeAnnotations = (
 ): void => {
   if (
     node.type === AST_NODE_TYPES.TSAsExpression ||
-    node.type === AST_NODE_TYPES.TSTypeAssertion ||
-    node.type === AST_NODE_TYPES.TSSatisfiesExpression
+    node.type === AST_NODE_TYPES.TSTypeAssertion
   ) {
-    context.report({
-      node: castDeepMutable(node),
-      messageId: 'disallowUseMemoTypeAnnotation',
-    });
+    if (!isConstAssertion(node.typeAnnotation)) {
+      context.report({
+        node: castDeepMutable(node),
+        messageId: 'disallowUseMemoTypeAnnotation',
+      });
+    }
 
     return;
   }
@@ -116,3 +117,17 @@ const checkNodeForTypeAnnotations = (
     );
   }
 };
+
+const isConstAssertion = (
+  node: DeepReadonly<TSESTree.Node> | undefined,
+): node is TSESTree.TSTypeReference => {
+  if (node === undefined) {
+    return false;
+  }
+
+  return (
+    node.type === AST_NODE_TYPES.TSTypeReference &&
+    node.typeName.type === AST_NODE_TYPES.Identifier &&
+    node.typeName.name === 'const'
+  );
+};

package/src/rules/eslint-react-coding-style-rules.mts

@@ -11,5 +11,5 @@ export const eslintReactCodingStyleRules = {
   'react-coding-style/react-memo-type-parameter': 'error',
   'react-coding-style/ban-use-imperative-handle-hook': 'error',
   'react-coding-style/use-memo-hook-style': 'error',
-  'react-coding-style/display-name': ['error', { ignoreTranspilerName: false }],
+  'react-coding-style/display-name': ['error', {}],
 } as const satisfies EslintReactCodingStyleRules;

package/src/rules/eslint-react-rules.mts

@@ -29,7 +29,7 @@ export const eslintReactRules = {
   /** Enforce consistent usage of props destructuring. */
   'react/destructuring-assignment': withDefaultOption('error'),
 
-  'react/display-name': withDefaultOption('error'),
+  'react/display-name': 'off', // Covered by react-coding-style/display-name
   'react/forbid-component-props': ['error', { forbid: ['className'] }],
   'react/forbid-dom-props': withDefaultOption('error'),
   'react/forbid-elements': withDefaultOption('error'),

package/src/types/rules/eslint-react-coding-style-rules.mts

@@ -184,7 +184,8 @@ namespace BanUseImperativeHandleHook {
 }
 
 /**
- * Require displayName property for React components created with React.memo
+ * Require React.memo components to define displayName matching the component
+ * name
  *
  * ```md
  * | key        | value      |
@@ -202,9 +203,20 @@ namespace DisplayName {
    *   {
    *     "type": "object",
    *     "properties": {
-   *       "ignoreTranspilerName": {
-   *         "type": "boolean",
-   *         "description": "When true, ignores components that get displayName from variable name"
+   *       "ignoreName": {
+   *         "description": "Component names allowed to have displayName different from the variable name.",
+   *         "oneOf": [
+   *           {
+   *             "type": "string"
+   *           },
+   *           {
+   *             "type": "array",
+   *             "items": {
+   *               "type": "string"
+   *             },
+   *             "minItems": 0
+   *           }
+   *         ]
    *       }
    *     },
    *     "additionalProperties": false
@@ -213,8 +225,11 @@ namespace DisplayName {
    * ```
    */
   export type Options = Readonly<{
-    /** When true, ignores components that get displayName from variable name */
-    ignoreTranspilerName?: boolean;
+    /**
+     * Component names allowed to have displayName different from the variable
+     * name.
+     */
+    ignoreName?: string | readonly string[];
   }>;
 
   export type RuleEntry =