Add component interface rule

Author: owjs3901

.changeset/thick-days-knock.md

@@ -0,0 +1,5 @@
+---
+"@devup/eslint-plugin": patch
+---
+
+Add component-interface rule

package.json

@@ -26,31 +26,32 @@
   "author": "devfive",
   "license": "ISC",
   "dependencies": {
-    "@eslint/js": "^9.17",
+    "@eslint/js": "^9.20",
     "@tanstack/eslint-plugin-query": "^5",
-    "eslint": "^9.17",
-    "eslint-config-prettier": "^9",
+    "eslint": "^9.20",
+    "eslint-config-prettier": "^10",
     "eslint-plugin-prettier": "^5",
     "eslint-plugin-react": "^7",
     "eslint-plugin-react-hooks": "^5",
     "eslint-plugin-simple-import-sort": "^12",
     "eslint-plugin-unused-imports": "^4",
     "prettier": "^3",
-    "typescript-eslint": "^8.18"
+    "typescript-eslint": "^8.24"
   },
   "peerDependencies": {
     "eslint": "*"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.28.0",
     "@types/eslint": "^9.6",
     "@types/eslint__js": "^8.42",
-    "@typescript-eslint/rule-tester": "^8.18",
-    "@vitest/coverage-v8": "2.1.8",
+    "@typescript-eslint/rule-tester": "^8.24",
+    "@typescript-eslint/utils": "^8.24.1",
+    "@vitest/coverage-v8": "3.0.5",
     "eslint-plugin-eslint-plugin": "^6.4.0",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.5",
-    "vite-plugin-dts": "^4.4.0",
-    "vitest": "^2.1.8",
-    "@changesets/cli": "^2.27.11"
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^3.0.5"
   }
 }

pnpm-lock.yaml

@@ -9,7 +9,7 @@ import simpleImportSort from 'eslint-plugin-simple-import-sort'
 import unusedImports from 'eslint-plugin-unused-imports'
 import tseslint from 'typescript-eslint'
 
-import { appPage, component, cssTs, layout, rscApi } from '../rules'
+import { appPage, component, componentInterface, rscApi } from '../rules'
 
 export default [
   {
@@ -47,11 +47,10 @@ export default [
         'simple-import-sort': simpleImportSort,
         '@devup': {
           rules: {
-            layout,
             component,
             'rsc-api': rscApi,
             'app-page': appPage,
-            'css-ts': cssTs,
+            'component-interface': componentInterface,
           },
         },
       },

src/configs/__tests__/__snapshots__/recommended.test.ts.snap

@@ -2,11 +2,10 @@ import * as index from '../index'
 describe('export index', () => {
   it('export', () => {
     expect({ ...index }).toEqual({
-      layout: expect.any(Object),
       component: expect.any(Object),
+      componentInterface: expect.any(Object),
       rscApi: expect.any(Object),
       appPage: expect.any(Object),
-      cssTs: expect.any(Object),
     })
   })
 })

src/configs/recommended.ts

@@ -0,0 +1,23 @@
+# component interface
+
+## Description
+
+컴포넌트의 props 가 빈 object 일 때 interface 를 추가합니다.
+
+
+## Example
+
+```tsx
+export function Hello({}) {
+  return <div>...</div>;
+}
+```
+
+```tsx
+interface HelloProps {}
+export function Hello({}: HelloProps) {
+  return <div>...</div>;
+}
+```
+
+```

src/rules/__tests__/index.test.ts

@@ -0,0 +1,62 @@
+import { RuleTester } from '@typescript-eslint/rule-tester'
+
+import { componentInterface } from '../index'
+
+describe('component rule', () => {
+  const ruleTester = new RuleTester({
+    languageOptions: {
+      ecmaVersion: 'latest',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+  })
+  ruleTester.run('component rule', componentInterface, {
+    valid: [
+      {
+        code: 'interface HelloProps{}\ninterface Hello1Props{}\nexport function Hello({}:HelloProps){return <></>}',
+        filename: 'src/components/hello.tsx',
+      },
+    ],
+    invalid: [
+      {
+        code: 'function Hello({}){return <></>}',
+        output:
+          'interface HelloProps{}\nfunction Hello({}:HelloProps){return <></>}',
+        filename: 'src/components/hello.tsx',
+        errors: [
+          {
+            messageId:
+              'componentPropsShouldHaveTypeAnnotationWhenEmptyObjectPattern',
+          },
+        ],
+      },
+      {
+        code: 'export function Hello({}){return <></>}',
+        output:
+          'interface HelloProps{}\nexport function Hello({}:HelloProps){return <></>}',
+        filename: 'src/components/hello.tsx',
+        errors: [
+          {
+            messageId:
+              'componentPropsShouldHaveTypeAnnotationWhenEmptyObjectPattern',
+          },
+        ],
+      },
+      {
+        code: 'export default function Hello({}){return <></>}',
+        output:
+          'interface HelloProps{}\nexport default function Hello({}:HelloProps){return <></>}',
+        filename: 'src/components/hello.tsx',
+        errors: [
+          {
+            messageId:
+              'componentPropsShouldHaveTypeAnnotationWhenEmptyObjectPattern',
+          },
+        ],
+      },
+    ],
+  })
+})

src/rules/component-interface/README.md

@@ -0,0 +1,63 @@
+import { ESLintUtils } from '@typescript-eslint/utils'
+
+const createRule = ESLintUtils.RuleCreator(
+  (name) =>
+    `https://github.com/dev-five-git/devup/tree/main/packages/eslint-plugin/src/rules/${name}`,
+)
+
+export const componentInterface = createRule({
+  name: 'component-interface',
+  defaultOptions: [],
+  meta: {
+    schema: [],
+    messages: {
+      componentPropsShouldHaveTypeAnnotationWhenEmptyObjectPattern:
+        '컴포넌트의 `props`가 비어있고 타입이 없을 경우 반드시 타입을 명시해야 합니다.',
+    },
+    type: 'problem',
+    fixable: 'code',
+    docs: {
+      description:
+        'required type annotation for component props when empty object pattern',
+    },
+  },
+  create(context) {
+    const filename = context.physicalFilename
+
+    if (!filename.endsWith('.tsx')) return {}
+
+    return {
+      FunctionDeclaration(node) {
+        const funcName = node.id?.name
+
+        if (
+          funcName &&
+          node.params.length === 1 &&
+          node.params[0].type === 'ObjectPattern' &&
+          !node.params[0].typeAnnotation &&
+          node.params[0].properties.length === 0 &&
+          (node.parent.type === 'Program' ||
+            node.parent.type === 'ExportNamedDeclaration' ||
+            node.parent.type === 'ExportDefaultDeclaration') &&
+          /^[A-Z]/.test(funcName)
+        ) {
+          context.report({
+            node,
+            messageId:
+              'componentPropsShouldHaveTypeAnnotationWhenEmptyObjectPattern',
+            fix(fixer) {
+              return [
+                fixer.insertTextAfter(node.params[0], `:${funcName}Props`),
+                // 1줄 전
+                fixer.insertTextBefore(
+                  node.parent ?? node,
+                  `interface ${funcName}Props{}\n`,
+                ),
+              ]
+            },
+          })
+        }
+      },
+    }
+  },
+})

src/rules/component-interface/__tests__/index.test.ts

@@ -214,18 +214,6 @@ describe('component rule', () => {
           },
         ],
       },
-      {
-        code: 'export function Hello({}){return <></>}',
-        output:
-          'interface HelloProps{}\nexport function Hello({}:HelloProps){return <></>}',
-        filename: 'src/components/hello.tsx',
-        errors: [
-          {
-            messageId:
-              'componentPropsShouldHaveTypeAnnotationWhenEmptyObjectPattern',
-          },
-        ],
-      },
     ],
   })
 })