eslint-config-typed 3.8.1 → 3.10.0

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

@@ -0,0 +1,162 @@
+import parser from '@typescript-eslint/parser';
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import dedent from 'dedent';
+import { useMemoHooksStyleRule } from './use-memo-hooks-style.mjs';
+
+const ruleName = 'use-memo-hook-style';
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser,
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      ecmaFeatures: {
+        jsx: true,
+      },
+      jsxPragma: null, // for @typescript/eslint-parser
+    },
+  },
+});
+
+describe('use-memo-hooks-style', () => {
+  describe('named import (useMemo)', () => {
+    tester.run(ruleName, useMemoHooksStyleRule, {
+      valid: [
+        {
+          code: dedent`
+            import { memo, useMemo } from 'react';
+
+            type Props = Readonly<{
+              readonly 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 />;
+            });
+          `,
+        },
+        {
+          name: 'Should not trigger for non-React useMemo (locally defined)',
+          code: dedent`
+            const useMemo = <T,>(fn: () => T): T => fn();
+
+            const value = useMemo(() => 42) as number;
+          `,
+        },
+        {
+          name: 'Should not trigger for non-React useMemo (imported from other-library)',
+          code: dedent`
+            import { useMemo } from 'other-library';
+
+            const value = useMemo(() => 42) as number;
+          `,
+        },
+      ],
+      invalid: [
+        {
+          name: 'Disallow return type annotation',
+          code: dedent`
+            import { memo, useMemo } from 'react';
+
+            type Props = Readonly<{
+              readonly value: number;
+            }>;
+
+            const Component = memo<Props>((props) => {
+              const value = useMemo((): number => props.value, [props.value]);
+              return value;
+            });
+          `,
+          errors: [
+            {
+              messageId: 'disallowUseMemoTypeAnnotation',
+            },
+          ],
+        },
+        {
+          name: 'Disallow type assertion',
+          code: dedent`
+            import { memo, useMemo } from 'react';
+
+            type Props = Readonly<{
+              readonly value: number;
+            }>;
+
+            const Component = memo<Props>((props) => {
+              const value = useMemo(() => props.value, [props.value]) as number;
+              return value;
+            });
+          `,
+          errors: [
+            {
+              messageId: 'disallowUseMemoTypeAnnotation',
+            },
+          ],
+        },
+        {
+          name: 'Disallow type assertion (inner)',
+          code: dedent`
+            import { memo, useMemo } from 'react';
+
+            type Props = Readonly<{
+              readonly value: number;
+            }>;
+
+            const Component = memo<Props>((props) => {
+              const value = useMemo(() => props.value as number, [props.value]) ;
+              return value;
+            });
+          `,
+          errors: [
+            {
+              messageId: 'disallowUseMemoTypeAnnotation',
+            },
+          ],
+        },
+        {
+          name: 'Disallow satisfies expression',
+          code: dedent`
+            import { memo, useMemo } from 'react';
+
+            type Props = Readonly<{
+              readonly value: number;
+            }>;
+
+            const Component = memo<Props>((props) => {
+              const value = useMemo(() => props.value, [props.value]) satisfies number;
+              return value;
+            });
+          `,
+          errors: [
+            {
+              messageId: 'disallowUseMemoTypeAnnotation',
+            },
+          ],
+        },
+        {
+          name: 'Disallow satisfies expression (inner)',
+          code: dedent`
+            import { memo, useMemo } from 'react';
+
+            type Props = Readonly<{
+              readonly value: number;
+            }>;
+
+            const Component = memo<Props>((props) => {
+              const value = useMemo(() => props.value satisfies number, [props.value]);
+              return value;
+            });
+          `,
+          errors: [
+            {
+              messageId: 'disallowUseMemoTypeAnnotation',
+            },
+          ],
+        },
+      ],
+    });
+  });
+});

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

@@ -0,0 +1,162 @@
+import parser from '@typescript-eslint/parser';
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import dedent from 'dedent';
+import { useMemoHooksStyleRule } from './use-memo-hooks-style.mjs';
+
+const ruleName = 'use-memo-hook-style';
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser,
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      ecmaFeatures: {
+        jsx: true,
+      },
+      jsxPragma: null, // for @typescript/eslint-parser
+    },
+  },
+});
+
+describe('use-memo-hooks-style', () => {
+  describe('namespace import (React.useMemo)', () => {
+    tester.run(ruleName, useMemoHooksStyleRule, {
+      valid: [
+        {
+          code: dedent`
+            import * as React from 'react';
+
+            type Props = Readonly<{
+              readonly 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 />;
+            });
+          `,
+        },
+        {
+          name: 'Should not trigger for non-React useMemo (locally defined)',
+          code: dedent`
+            const useMemo = <T,>(fn: () => T): T => fn();
+
+            const value = useMemo(() => 42) as number;
+          `,
+        },
+        {
+          name: 'Should not trigger for non-React useMemo (imported from other-library)',
+          code: dedent`
+            import { useMemo } from 'other-library';
+
+            const value = useMemo(() => 42) as number;
+          `,
+        },
+      ],
+      invalid: [
+        {
+          name: 'Disallow return type annotation',
+          code: dedent`
+            import * as React from 'react';
+
+            type Props = Readonly<{
+              readonly value: number;
+            }>;
+
+            const Component = React.memo<Props>((props) => {
+              const value = React.useMemo((): number => props.value, [props.value]);
+              return value;
+            });
+          `,
+          errors: [
+            {
+              messageId: 'disallowUseMemoTypeAnnotation',
+            },
+          ],
+        },
+        {
+          name: 'Disallow type assertion',
+          code: dedent`
+            import * as React from 'react';
+
+            type Props = Readonly<{
+              readonly value: number;
+            }>;
+
+            const Component = React.memo<Props>((props) => {
+              const value = React.useMemo(() => props.value, [props.value]) as number;
+              return value;
+            });
+          `,
+          errors: [
+            {
+              messageId: 'disallowUseMemoTypeAnnotation',
+            },
+          ],
+        },
+        {
+          name: 'Disallow type assertion (inner)',
+          code: dedent`
+            import * as React from 'react';
+
+            type Props = Readonly<{
+              readonly value: number;
+            }>;
+
+            const Component = React.memo<Props>((props) => {
+              const value = React.useMemo(() => props.value as number, [props.value]) ;
+              return value;
+            });
+          `,
+          errors: [
+            {
+              messageId: 'disallowUseMemoTypeAnnotation',
+            },
+          ],
+        },
+        {
+          name: 'Disallow satisfies expression',
+          code: dedent`
+            import * as React from 'react';
+
+            type Props = Readonly<{
+              readonly value: number;
+            }>;
+
+            const Component = React.memo<Props>((props) => {
+              const value = React.useMemo(() => props.value, [props.value]) satisfies number;
+              return value;
+            });
+          `,
+          errors: [
+            {
+              messageId: 'disallowUseMemoTypeAnnotation',
+            },
+          ],
+        },
+        {
+          name: 'Disallow satisfies expression (inner)',
+          code: dedent`
+            import * as React from 'react';
+
+            type Props = Readonly<{
+              readonly value: number;
+            }>;
+
+            const Component = React.memo<Props>((props) => {
+              const value = React.useMemo(() => props.value satisfies number, [props.value]);
+              return value;
+            });
+          `,
+          errors: [
+            {
+              messageId: 'disallowUseMemoTypeAnnotation',
+            },
+          ],
+        },
+      ],
+    });
+  });
+});

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

@@ -3,8 +3,8 @@ import {
   type TSESLint,
   type TSESTree,
 } from '@typescript-eslint/utils';
-import { castDeepMutable } from 'ts-data-forge';
-import { isReactCallExpression } from './shared.mjs';
+import { castDeepMutable, hasKey } from 'ts-data-forge';
+import { isReactApiCall } from './shared.mjs';
 
 type MessageIds = 'disallowUseMemoTypeAnnotation';
 
@@ -23,7 +23,7 @@ export const useMemoHooksStyleRule: TSESLint.RuleModule<MessageIds> = {
   },
   create: (context) => ({
     CallExpression: (node: DeepReadonly<TSESTree.CallExpression>) => {
-      if (!isReactCallExpression(node, 'useMemo')) {
+      if (!isReactApiCall(context, node, 'useMemo')) {
         return;
       }
 
@@ -46,7 +46,72 @@ export const useMemoHooksStyleRule: TSESLint.RuleModule<MessageIds> = {
           messageId: 'disallowUseMemoTypeAnnotation',
         });
       }
+
+      const [firstArg] = node.arguments;
+
+      if (firstArg?.type === AST_NODE_TYPES.ArrowFunctionExpression) {
+        const { returnType, body } = firstArg;
+
+        if (returnType !== undefined) {
+          context.report({
+            node: castDeepMutable(returnType),
+            messageId: 'disallowUseMemoTypeAnnotation',
+          });
+        }
+
+        checkNodeForTypeAnnotations(context, body);
+      }
     },
   }),
   defaultOptions: [],
 };
+
+const checkNodeForTypeAnnotations = (
+  context: DeepReadonly<TSESLint.RuleContext<MessageIds, readonly []>>,
+  node: DeepReadonly<TSESTree.Node>,
+): void => {
+  if (
+    node.type === AST_NODE_TYPES.TSAsExpression ||
+    node.type === AST_NODE_TYPES.TSTypeAssertion ||
+    node.type === AST_NODE_TYPES.TSSatisfiesExpression
+  ) {
+    context.report({
+      node: castDeepMutable(node),
+      messageId: 'disallowUseMemoTypeAnnotation',
+    });
+
+    return;
+  }
+
+  if (hasKey(node, 'body')) {
+    const nodeWithBody = node;
+
+    if (nodeWithBody.body !== undefined && nodeWithBody.body !== null) {
+      checkNodeForTypeAnnotations(
+        context,
+        // eslint-disable-next-line total-functions/no-unsafe-type-assertion
+        nodeWithBody.body as DeepReadonly<TSESTree.Node>,
+      );
+    }
+  }
+
+  if (hasKey(node, 'expression')) {
+    const nodeWithExpression = node;
+
+    checkNodeForTypeAnnotations(
+      context,
+      // eslint-disable-next-line total-functions/no-unsafe-type-assertion
+      nodeWithExpression.expression as DeepReadonly<TSESTree.Node>,
+    );
+  }
+
+  if (hasKey(node, 'argument')) {
+    const nodeWithArgument = node;
+
+    checkNodeForTypeAnnotations(
+      context,
+      // eslint-disable-next-line total-functions/no-unsafe-type-assertion
+      nodeWithArgument.argument as DeepReadonly<TSESTree.Node>,
+    );
+  }
+};

package/src/plugins/ts-restrictions/rules/check-destructuring-completeness.mts

@@ -16,64 +16,6 @@ type MessageIds = 'incompleteDestructuring';
 
 const DEFAULT_DIRECTIVE_KEYWORD = '@check-destructuring-completeness';
 
-// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-const getObjectTypeProperties = (type: ts.Type): readonly string[] => {
-  try {
-    const properties = type.getProperties();
-
-    // Limit to reasonable number of properties to avoid hangs
-    if (properties.length > 1000) {
-      return [];
-    }
-
-    return properties
-      .map((prop) => prop.name)
-      .filter(
-        (name) =>
-          // Filter out symbol properties and internal properties
-          !name.startsWith('__') &&
-          // Only include string property names
-          typeof name === 'string' &&
-          name.length > 0,
-      );
-  } catch {
-    // If there's any error getting properties, return empty array
-    return [];
-  }
-};
-
-const isReactComponentFunction = (
-  node: DeepReadonly<TSESTree.Node> | undefined | null,
-): boolean => {
-  if (node === undefined || node === null) return false;
-
-  // Arrow function component
-  if (node.type === AST_NODE_TYPES.ArrowFunctionExpression) {
-    const { body } = node;
-
-    if (body.type === AST_NODE_TYPES.BlockStatement) {
-      return body.body.some((statement) => {
-        if (statement.type !== AST_NODE_TYPES.ReturnStatement) return false;
-
-        const { argument } = statement;
-
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (argument === null || argument === undefined) return false;
-
-        const argType = (argument as { type?: string }).type;
-
-        return argType === 'JSXElement' || argType === 'JSXFragment';
-      });
-    }
-
-    const bodyType = (body as { type?: string }).type;
-
-    return bodyType === 'JSXElement' || bodyType === 'JSXFragment';
-  }
-
-  return false;
-};
-
 export const checkDestructuringCompleteness: TSESLint.RuleModule<
   MessageIds,
   Options
@@ -302,5 +244,63 @@ export const checkDestructuringCompleteness: TSESLint.RuleModule<
       },
     };
   },
-  defaultOptions: [],
+  defaultOptions: [{ alwaysCheckReactComponentProps: true }],
+};
+
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+const getObjectTypeProperties = (type: ts.Type): readonly string[] => {
+  try {
+    const properties = type.getProperties();
+
+    // Limit to reasonable number of properties to avoid hangs
+    if (properties.length > 1000) {
+      return [];
+    }
+
+    return properties
+      .map((prop) => prop.name)
+      .filter(
+        (name) =>
+          // Filter out symbol properties and internal properties
+          !name.startsWith('__') &&
+          // Only include string property names
+          typeof name === 'string' &&
+          name.length > 0,
+      );
+  } catch {
+    // If there's any error getting properties, return empty array
+    return [];
+  }
+};
+
+const isReactComponentFunction = (
+  node: DeepReadonly<TSESTree.Node> | undefined | null,
+): boolean => {
+  if (node === undefined || node === null) return false;
+
+  // Arrow function component
+  if (node.type === AST_NODE_TYPES.ArrowFunctionExpression) {
+    const { body } = node;
+
+    if (body.type === AST_NODE_TYPES.BlockStatement) {
+      return body.body.some((statement) => {
+        if (statement.type !== AST_NODE_TYPES.ReturnStatement) return false;
+
+        const { argument } = statement;
+
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (argument === null || argument === undefined) return false;
+
+        const argType = (argument as { type?: string }).type;
+
+        return argType === 'JSXElement' || argType === 'JSXFragment';
+      });
+    }
+
+    const bodyType = (body as { type?: string }).type;
+
+    return bodyType === 'JSXElement' || bodyType === 'JSXFragment';
+  }
+
+  return false;
 };

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

@@ -132,7 +132,10 @@ export const eslintImportsRules = {
   // 'import/enforce-node-protocol-usage': ['error', 'always'],
 
   'import-x/no-rename-default': withDefaultOption('error'),
-  'import-x/prefer-namespace-import': ['error', { patterns: ['react'] }],
+
+  // Covered by react-coding-style/import-style
+  'import-x/prefer-namespace-import': 'off',
+  // 'import-x/prefer-namespace-import': ['error', { patterns: ['react'] }],
 
   // deprecated rules
   'import-x/imports-first': 0,

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

@@ -1,8 +1,8 @@
 import { type EslintReactCodingStyleRules } from '../types/index.mjs';
 
 export const eslintReactCodingStyleRules = {
-  // Covered by import-x/prefer-namespace-import
-  'react-coding-style/import-style': 'off',
+  // import-x/prefer-namespace-import checks similar things, but this rule enforces more strict style.
+  'react-coding-style/import-style': ['error', { importStyle: 'namespace' }],
 
   'react-coding-style/component-name': ['error', { maxLength: 42 }],
   'react-coding-style/component-var-type-annotation': 'error',
@@ -11,4 +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 }],
 } as const satisfies EslintReactCodingStyleRules;

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

@@ -66,7 +66,7 @@ namespace ComponentVarTypeAnnotation {
 }
 
 /**
- * Enforces importing React with a single namespace import named 'React'.
+ * Enforces importing React with a specific style (namespace or named imports).
  *
  * ```md
  * | key        | value      |
@@ -76,7 +76,40 @@ namespace ComponentVarTypeAnnotation {
  * ```
  */
 namespace ImportStyle {
-  export type RuleEntry = Linter.StringSeverity;
+  /**
+   * ### schema
+   *
+   * ```json
+   * [
+   *   {
+   *     "type": "object",
+   *     "properties": {
+   *       "importStyle": {
+   *         "type": "string",
+   *         "enum": [
+   *           "namespace",
+   *           "named"
+   *         ],
+   *         "description": "Import style to enforce: \"namespace\" for `import * as React` or \"named\" for `import { ... }`"
+   *       }
+   *     },
+   *     "additionalProperties": false
+   *   }
+   * ]
+   * ```
+   */
+  export type Options = {
+    /**
+     * Import style to enforce: "namespace" for `import * as React` or "named"
+     * for `import { ... }`
+     */
+    readonly importStyle?: 'named' | 'namespace';
+  };
+
+  export type RuleEntry =
+    | Linter.Severity
+    | SpreadOptionsIfIsArray<readonly [Linter.StringSeverity, Options]>
+    | 'off';
 }
 
 /**
@@ -150,6 +183,46 @@ namespace BanUseImperativeHandleHook {
   export type RuleEntry = Linter.StringSeverity;
 }
 
+/**
+ * Require displayName property for React components created with React.memo
+ *
+ * ```md
+ * | key        | value      |
+ * | :--------- | :--------- |
+ * | type       | suggestion |
+ * | deprecated | false      |
+ * ```
+ */
+namespace DisplayName {
+  /**
+   * ### schema
+   *
+   * ```json
+   * [
+   *   {
+   *     "type": "object",
+   *     "properties": {
+   *       "ignoreTranspilerName": {
+   *         "type": "boolean",
+   *         "description": "When true, ignores components that get displayName from variable name"
+   *       }
+   *     },
+   *     "additionalProperties": false
+   *   }
+   * ]
+   * ```
+   */
+  export type Options = {
+    /** When true, ignores components that get displayName from variable name */
+    readonly ignoreTranspilerName?: boolean;
+  };
+
+  export type RuleEntry =
+    | Linter.Severity
+    | SpreadOptionsIfIsArray<readonly [Linter.StringSeverity, Options]>
+    | 'off';
+}
+
 export type EslintReactCodingStyleRules = {
   readonly 'react-coding-style/component-name': ComponentName.RuleEntry;
   readonly 'react-coding-style/component-var-type-annotation': ComponentVarTypeAnnotation.RuleEntry;
@@ -159,8 +232,11 @@ export type EslintReactCodingStyleRules = {
   readonly 'react-coding-style/react-memo-type-parameter': ReactMemoTypeParameter.RuleEntry;
   readonly 'react-coding-style/use-memo-hook-style': UseMemoHookStyle.RuleEntry;
   readonly 'react-coding-style/ban-use-imperative-handle-hook': BanUseImperativeHandleHook.RuleEntry;
+  readonly 'react-coding-style/display-name': DisplayName.RuleEntry;
 };
 
 export type EslintReactCodingStyleRulesOption = {
   readonly 'react-coding-style/component-name': ComponentName.Options;
+  readonly 'react-coding-style/import-style': ImportStyle.Options;
+  readonly 'react-coding-style/display-name': DisplayName.Options;
 };