eslint-config-typed 2.3.2 → 3.1.0

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

@@ -0,0 +1,93 @@
+import { AST_NODE_TYPES, type TSESLint } from '@typescript-eslint/utils';
+import { isReactCallExpression } from './shared.mjs';
+
+type ComponentNameOption = Readonly<{
+  maxLength?: number;
+  pattern?: RegExp;
+}>;
+
+type Options = readonly [ComponentNameOption] | readonly [];
+
+type MessageIds = 'componentNameTooLong' | 'componentNameDoesNotMatch';
+
+// NOTE:
+// `const Name = React.memo<Props>((props) => {`
+// が1行に収まるようにするためのルール。1行に収まらないとインデントが増えてコンポーネント実装の可読性が下がりやすくなるため。
+// component props の型名や引数名の制約と併せて、 prettier のデフォルト print-width = 80 で export を省いた場合の最大長としてデフォルト値 42 を設定している。
+// 抵触する場合、以下のように書き換える。
+//
+// const Component = React.memo<Props>((props) => {
+//   ...
+// });
+//
+// export { Component as SomeComponent };
+
+export const componentNameRule: TSESLint.RuleModule<MessageIds, Options> = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Enforces naming conventions for variables assigned to React.memo(...) components.',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          maxLength: {
+            type: 'integer',
+            minimum: 1,
+          },
+          pattern: {
+            type: 'object',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      componentNameTooLong:
+        'The component name length should be less than {{ maxLength }}. Consider rewrite as `const Component = React.memo<Props>((props) => { }); export { Component as SomeComponent };`.',
+      componentNameDoesNotMatch:
+        'The component name should match {{ pattern }}.',
+    },
+  },
+  create: (context) => {
+    const option = context.options[0];
+    const maxLength = option?.maxLength ?? 42;
+    const pattern = option?.pattern;
+
+    return {
+      VariableDeclarator: (node) => {
+        if (
+          node.id.type !== AST_NODE_TYPES.Identifier ||
+          node.init?.type !== AST_NODE_TYPES.CallExpression ||
+          !isReactCallExpression(node.init, 'memo')
+        ) {
+          return;
+        }
+
+        if (node.id.name.length >= maxLength) {
+          context.report({
+            node: node.id,
+            messageId: 'componentNameTooLong',
+            data: {
+              maxLength: String(maxLength),
+            },
+          });
+          return;
+        }
+
+        if (pattern !== undefined && !pattern.test(node.id.name)) {
+          context.report({
+            node: node.id,
+            messageId: 'componentNameDoesNotMatch',
+            data: {
+              pattern: String(pattern),
+            },
+          });
+        }
+      },
+    };
+  },
+  defaultOptions: [],
+};

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

@@ -0,0 +1,72 @@
+import parser from '@typescript-eslint/parser';
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import dedent from 'dedent';
+import { componentNameRule } from './component-name.mjs';
+
+const ruleName = 'component-name';
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser,
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+    },
+  },
+});
+
+tester.run(ruleName, componentNameRule, {
+  valid: [
+    {
+      code: dedent`
+        const Component = React.memo<Props>((props) => {
+          return React.createElement('div', props);
+        });
+      `,
+      options: [
+        {
+          maxLength: 20,
+          pattern: /^Component$/u,
+        },
+      ],
+    },
+  ],
+  invalid: [
+    {
+      name: 'Name too long',
+      code: dedent`
+        const VeryLongComponentName = React.memo<Props>((props) => {
+          return React.createElement('div', props);
+        });
+      `,
+      options: [
+        {
+          maxLength: 10,
+        },
+      ],
+      errors: [
+        {
+          messageId: 'componentNameTooLong',
+        },
+      ],
+    },
+    {
+      name: 'Name does not match pattern',
+      code: dedent`
+        const component = React.memo<Props>((props) => {
+          return React.createElement('div', props);
+        });
+      `,
+      options: [
+        {
+          pattern: /^Component$/u,
+        },
+      ],
+      errors: [
+        {
+          messageId: 'componentNameDoesNotMatch',
+        },
+      ],
+    },
+  ],
+});

package/src/plugins/react-coding-style/rules/component-var-type-annotation.mts

@@ -0,0 +1,54 @@
+import {
+  AST_NODE_TYPES,
+  type TSESLint,
+  type TSESTree,
+} from '@typescript-eslint/utils';
+import { castDeepMutable } from 'ts-data-forge';
+
+type MessageIds = 'disallowReactFunctionalComponentTypes';
+
+// NOTE: React.FC による型注釈があれば React.memo を使うように促すルール。
+// React.FC で型注釈されていない React.memo 化されていないコンポーネントは別途検出する必要がある。
+
+export const componentVarTypeAnnotationRule: TSESLint.RuleModule<MessageIds> = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Disallows using React.FC / React.FunctionComponent type annotations.',
+    },
+    schema: [],
+    messages: {
+      disallowReactFunctionalComponentTypes:
+        'Use React.memo<Props>((props) => { ... }) instead.',
+    },
+  },
+  create: (context) => ({
+    TSTypeReference: (node: DeepReadonly<TSESTree.TSTypeReference>) => {
+      if (isReactFunctionalComponentReference(node.typeName)) {
+        context.report({
+          node: castDeepMutable(node),
+          messageId: 'disallowReactFunctionalComponentTypes',
+        });
+      }
+    },
+  }),
+  defaultOptions: [],
+};
+
+const isReactFunctionalComponentReference = (
+  node: DeepReadonly<TSESTree.EntityName>,
+): boolean => {
+  if (node.type !== AST_NODE_TYPES.TSQualifiedName) {
+    return false;
+  }
+
+  const left = node.left;
+  const right = node.right;
+
+  return (
+    left.type === AST_NODE_TYPES.Identifier &&
+    left.name === 'React' &&
+    (right.name === 'FC' || right.name === 'FunctionComponent')
+  );
+};

package/src/plugins/react-coding-style/rules/component-var-type-annotation.test.mts

@@ -0,0 +1,62 @@
+import parser from '@typescript-eslint/parser';
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import dedent from 'dedent';
+import { componentVarTypeAnnotationRule } from './component-var-type-annotation.mjs';
+
+const ruleName = 'component-var-type-annotation';
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser,
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+    },
+  },
+});
+
+tester.run(ruleName, componentVarTypeAnnotationRule, {
+  valid: [
+    {
+      code: dedent`
+        type Props = Readonly<{
+          readonly value: number;
+        }>;
+
+        const Component = React.memo<Props>((props) => {
+          return React.createElement('div', props);
+        });
+      `,
+    },
+  ],
+  invalid: [
+    {
+      code: dedent`
+        type Props = Readonly<{
+          readonly value: number;
+        }>;
+
+        type Component = React.FC<Props>;
+      `,
+      errors: [
+        {
+          messageId: 'disallowReactFunctionalComponentTypes',
+        },
+      ],
+    },
+    {
+      code: dedent`
+        type Props = Readonly<{
+          readonly value: number;
+        }>;
+
+        type Component = React.FunctionComponent<Props>;
+      `,
+      errors: [
+        {
+          messageId: 'disallowReactFunctionalComponentTypes',
+        },
+      ],
+    },
+  ],
+});

package/src/plugins/react-coding-style/rules/import-style.mts

@@ -0,0 +1,53 @@
+import { AST_NODE_TYPES, type TSESLint } from '@typescript-eslint/utils';
+
+type MessageIds = 'namespaceImportRequired' | 'namespaceNameMustBeReact';
+
+// NOTE: React の import 方法を `import * as React from 'react'` と namespace import のみに限定するルール。
+// import を1回で済ませられて便利なのと、 React.* に対する以降のルールを書きやすくするため。
+// tree-shaking に悪影響は無い。
+
+export const importStyleRule: TSESLint.RuleModule<MessageIds> = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        "Enforces importing React with a single namespace import named 'React'.",
+    },
+    schema: [],
+    messages: {
+      namespaceImportRequired:
+        "React should be imported as `import * as React from 'react'`.",
+      namespaceNameMustBeReact:
+        "The namespace name imported from 'react' must be 'React'.",
+    },
+  },
+  create: (context) => ({
+    ImportDeclaration: (node) => {
+      if (node.source.value !== 'react') {
+        return;
+      }
+
+      const [firstSpecifier] = node.specifiers;
+
+      if (
+        firstSpecifier === undefined ||
+        firstSpecifier.type !== AST_NODE_TYPES.ImportNamespaceSpecifier ||
+        node.specifiers.length !== 1
+      ) {
+        context.report({
+          node,
+          messageId: 'namespaceImportRequired',
+        });
+        return;
+      }
+
+      if (firstSpecifier.local.name !== 'React') {
+        context.report({
+          node: firstSpecifier.local,
+          messageId: 'namespaceNameMustBeReact',
+        });
+      }
+    },
+  }),
+  defaultOptions: [],
+};

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

@@ -0,0 +1,63 @@
+import parser from '@typescript-eslint/parser';
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import { importStyleRule } from './import-style.mjs';
+
+const ruleName = 'import-style';
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser,
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+    },
+  },
+});
+
+tester.run(ruleName, importStyleRule, {
+  valid: [
+    {
+      code: "import * as React from 'react';",
+    },
+    {
+      code: "import type * as React from 'react';",
+    },
+    {
+      code: "import { useMemo } from 'react-use';",
+    },
+  ],
+  invalid: [
+    {
+      code: "import React from 'react';",
+      errors: [
+        {
+          messageId: 'namespaceImportRequired',
+        },
+      ],
+    },
+    {
+      code: "import { useState } from 'react';",
+      errors: [
+        {
+          messageId: 'namespaceImportRequired',
+        },
+      ],
+    },
+    {
+      code: "import * as R from 'react';",
+      errors: [
+        {
+          messageId: 'namespaceNameMustBeReact',
+        },
+      ],
+    },
+    {
+      code: "import React, * as R from 'react';",
+      errors: [
+        {
+          messageId: 'namespaceImportRequired',
+        },
+      ],
+    },
+  ],
+});

package/src/plugins/react-coding-style/rules/index.mts

@@ -0,0 +1 @@
+export * from './rules.mjs';

package/src/plugins/react-coding-style/rules/props-type-annotation-style.mts

@@ -0,0 +1,59 @@
+import {
+  AST_NODE_TYPES,
+  type TSESLint,
+  type TSESTree,
+} from '@typescript-eslint/utils';
+import { castDeepMutable } from 'ts-data-forge';
+import { getReactMemoArrowFunction, isReactCallExpression } from './shared.mjs';
+
+type MessageIds = 'disallowPropsTypeAnnotation';
+
+// 前提： Arrow function の使用が強制されていること。
+
+export const propsTypeAnnotationStyleRule: TSESLint.RuleModule<MessageIds> = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Forbids annotating props directly in the arrow function passed to React.memo.',
+    },
+    schema: [],
+    messages: {
+      disallowPropsTypeAnnotation:
+        'Replace `React.memo((props: Props) => { ... })` with `React.memo<Props>((props) => { ... })`.',
+    },
+  },
+  create: (context) => ({
+    CallExpression: (node: DeepReadonly<TSESTree.CallExpression>) => {
+      if (!isReactCallExpression(node, 'memo')) {
+        return;
+      }
+
+      const arrowFunction = getReactMemoArrowFunction(node);
+
+      if (
+        arrowFunction === undefined ||
+        arrowFunction.body.type !== AST_NODE_TYPES.BlockStatement
+      ) {
+        return;
+      }
+
+      const [firstParam] = arrowFunction.params;
+
+      if (
+        firstParam === undefined ||
+        firstParam.type !== AST_NODE_TYPES.Identifier
+      ) {
+        return;
+      }
+
+      if (firstParam.typeAnnotation !== undefined) {
+        context.report({
+          node: castDeepMutable(firstParam.typeAnnotation),
+          messageId: 'disallowPropsTypeAnnotation',
+        });
+      }
+    },
+  }),
+  defaultOptions: [],
+};

package/src/plugins/react-coding-style/rules/props-type-annotation-style.test.mts

@@ -0,0 +1,71 @@
+import parser from '@typescript-eslint/parser';
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import dedent from 'dedent';
+import { propsTypeAnnotationStyleRule } from './props-type-annotation-style.mjs';
+
+const ruleName = 'props-type-annotation-style';
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser,
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+    },
+  },
+});
+
+tester.run(ruleName, propsTypeAnnotationStyleRule, {
+  valid: [
+    {
+      code: dedent`
+        type Props = Readonly<{
+          readonly value: number;
+        }>;
+
+        const Component = React.memo<Props>((props) => {
+          return React.createElement('div', props);
+        });
+      `,
+    },
+    {
+      code: dedent`
+        const NonComponent = someFunction((props: Props) => props.value);
+      `,
+    },
+  ],
+  invalid: [
+    {
+      code: dedent`
+        type Props = Readonly<{
+          readonly value: number;
+        }>;
+
+        const Component = React.memo((props: Props) => {
+          return React.createElement('div', props);
+        });
+      `,
+      errors: [
+        {
+          messageId: 'disallowPropsTypeAnnotation',
+        },
+      ],
+    },
+    {
+      code: dedent`
+        type Props = Readonly<{
+          readonly value: number;
+        }>;
+
+        const Component = React.memo<Props>((props: Props) => {
+          return React.createElement('div', props);
+        });
+      `,
+      errors: [
+        {
+          messageId: 'disallowPropsTypeAnnotation',
+        },
+      ],
+    },
+  ],
+});

package/src/plugins/react-coding-style/rules/react-memo-props-argument-name.mts

@@ -0,0 +1,70 @@
+import {
+  AST_NODE_TYPES,
+  type TSESLint,
+  type TSESTree,
+} from '@typescript-eslint/utils';
+import { castDeepMutable } from 'ts-data-forge';
+import { getReactMemoArrowFunction, isReactCallExpression } from './shared.mjs';
+
+type MessageIds = 'propsParamMustBeNamedProps' | 'propsParamMustBeIdentifier';
+
+// NOTE: component props を "props" という名前に限定する。
+// return 文を含む component の props を "props" という名前の変数に限定する。
+// 前提： component が React.memo でラップされていること。Arrow function の使用が強制されていること。
+
+export const reactMemoPropsArgumentNameRule: TSESLint.RuleModule<MessageIds> = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        "Enforces the arrow function passed to React.memo to use a single argument named 'props'.",
+    },
+    schema: [],
+    messages: {
+      propsParamMustBeNamedProps:
+        "The argument name of the arrow function passed to React.memo should be 'props'.",
+      propsParamMustBeIdentifier:
+        "The props of a component containing a return statement are limited to a variable named 'props'.",
+    },
+  },
+  create: (context) => ({
+    CallExpression: (node: DeepReadonly<TSESTree.CallExpression>) => {
+      if (!isReactCallExpression(node, 'memo')) {
+        return;
+      }
+
+      const arrowFunction = getReactMemoArrowFunction(node);
+
+      // Detect `React.memo<Props>(({ prop1, prop2 }) => { ... })`
+      if (
+        arrowFunction === undefined ||
+        arrowFunction.body.type !== AST_NODE_TYPES.BlockStatement
+      ) {
+        return;
+      }
+
+      const [firstParam] = arrowFunction.params;
+
+      if (firstParam === undefined) {
+        return;
+      }
+
+      if (firstParam.type === AST_NODE_TYPES.Identifier) {
+        // Restrict props argument name to be "props"
+        if (firstParam.name !== 'props') {
+          context.report({
+            node: castDeepMutable(firstParam),
+            messageId: 'propsParamMustBeNamedProps',
+          });
+        }
+        return;
+      }
+
+      context.report({
+        node: castDeepMutable(firstParam),
+        messageId: 'propsParamMustBeIdentifier',
+      });
+    },
+  }),
+  defaultOptions: [],
+};

package/src/plugins/react-coding-style/rules/react-memo-props-argument-name.test.mts

@@ -0,0 +1,56 @@
+import parser from '@typescript-eslint/parser';
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import dedent from 'dedent';
+import { reactMemoPropsArgumentNameRule } from './react-memo-props-argument-name.mjs';
+
+const ruleName = 'react-memo-props-argument-name';
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser,
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+    },
+  },
+});
+
+tester.run(ruleName, reactMemoPropsArgumentNameRule, {
+  valid: [
+    {
+      code: dedent`
+        const Component = React.memo<Props>((props) => {
+          return React.createElement('div', props);
+        });
+      `,
+    },
+  ],
+  invalid: [
+    {
+      name: 'Require identifier named props',
+      code: dedent`
+        const Component = React.memo<Props>((properties) => {
+          return React.createElement('div', properties);
+        });
+      `,
+      errors: [
+        {
+          messageId: 'propsParamMustBeNamedProps',
+        },
+      ],
+    },
+    {
+      name: 'Disallow destructuring',
+      code: dedent`
+        const Component = React.memo<Props>(({ value }) => {
+          return React.createElement('div', { value });
+        });
+      `,
+      errors: [
+        {
+          messageId: 'propsParamMustBeIdentifier',
+        },
+      ],
+    },
+  ],
+});