eslint-plugin-smarthr 1.5.1 → 1.6.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.6.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.5.1...eslint-plugin-smarthr-v1.6.0) (2025-05-20)
+
+
+### Features
+
+* best-practice-for-async-current-targetルールを追加 ([#625](https://github.com/kufu/tamatebako/issues/625)) ([8cc72b4](https://github.com/kufu/tamatebako/commit/8cc72b4d4d552ed1efa9cfe7fbec04de0fcc369e))
+
 ## [1.5.1](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.5.0...eslint-plugin-smarthr-v1.5.1) (2025-05-12)
 
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
   "main": "index.js",
   "engines": {
-    "node": ">=22.15.0"
+    "node": ">=22.15.1"
   },
   "scripts": {
     "test": "jest"
@@ -26,7 +26,7 @@
     "json5": "^2.2.3"
   },
   "devDependencies": {
-    "typescript-eslint": "^8.32.0"
+    "typescript-eslint": "^8.32.1"
   },
   "peerDependencies": {
     "eslint": "^9"
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "e74469a80bae406252eea39f939efa557857bc88"
+  "gitHead": "92e589c6bfc8e311b4c873f7e4c65b29eed61304"
 }

package/rules/best-practice-for-async-current-target/README.md

@@ -0,0 +1,77 @@
+# smarthr/best-practice-for-async-current-target
+
+- jsのイベントのcurrentTargetの参照するタイミングをチェックするルールです
+- currentTarget属性はイベントの実行中のみ参照可能な値であり、それ以外のタイミングで参照するとエラーになる可能性があります
+  - https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget
+- イベントハンドラーの先頭でcurrentTarget関連の参照を変数に格納することを推奨します
+
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/best-practice-for-async-current-target': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+// async-awaitにより、イベント処理中ではなくなっているため、currentTargetがnullの可能性がある
+const onChange = async (e) => {
+  await anyAction()
+
+  const value = e.currentTarget.value
+  ...
+}
+```
+
+```jsx
+// setItemはReactのuseStateのset関数
+// useStateのset関数は非同期のためcurrentTargetがnullの可能性がある
+const onSelect = (e) => {
+  setItem((item) => ({ ...item, value : e.currentTarget.value }))
+}
+```
+
+```jsx
+// 処理が非同期の可能性はあるため、イベントハンドラ用関数のスコープ直下以外から参照する場合はエラーになります
+const onInput = (e) => {
+  anyAction(() => {
+    const currentTarget = e.currentTarget
+    ...
+  })
+}
+```
+
+## ✅ Correct
+
+```jsx
+const onChange = async (e) => {
+  const value = e.currentTarget.value
+
+  await anyAction()
+  ...
+}
+```
+
+```jsx
+const onSelect = (e) => {
+  const value = e.currentTarget.value
+
+  setItem((item) => ({ ...item, value }))
+}
+```
+
+```jsx
+const onInput = (e) => {
+  const currentTarget = e.currentTarget
+
+  anyAction(() => {
+    const value = currentTarget.value
+    ...
+  })
+}
+```

package/rules/best-practice-for-async-current-target/index.js

@@ -0,0 +1,88 @@
+const SCHEMA = []
+
+const FUNCTION_EXPRESSION_REGEX = /FunctionExpression$/
+const CURRENT_TARGET_AFTER_AWAIT_REGEX = /(\s|\(|;|^)await\s.+\.currentTarget(\.|;|\?|\s|\)|$)/
+const NL_REGEX = /\n/g
+
+const checkFunctionTopVariable = (node, eventObjectName, getSourceCodeText) => {
+  if (FUNCTION_EXPRESSION_REGEX.test(node.type)) {
+    if (node.params.find((p) => p.name === eventObjectName)) {
+      // HINT: currentTargetの参照より前にawait宣言がある場合はエラー
+      return CURRENT_TARGET_AFTER_AWAIT_REGEX.test(getSourceCodeText(node.body).replace(NL_REGEX, ';')) ? 1 : 0
+    }
+
+    return 2
+  }
+
+  const nextNode = node.parent
+
+  // HINT: 0の場合はrootまで検索して見つからない場合となる
+  // パターンとしてはe.currentTargetがイベントハンドラ外で定義されている場合があり得る
+  return nextNode ? checkFunctionTopVariable(nextNode, eventObjectName, getSourceCodeText) : 0
+}
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    const getSourceCodeText = (node) => context.sourceCode.getText(node)
+
+    return {
+      MemberExpression: (node) => {
+        if (node.property && node.property.name === 'currentTarget') {
+          const eventObjectName = node.object.name
+
+          if (eventObjectName) {
+            switch (checkFunctionTopVariable(node.parent, eventObjectName, getSourceCodeText)) {
+              case 1:
+                context.report({
+                  node,
+                  message: `currentTargetはイベント処理中以外に参照するとnullになる場合があります。awaitの宣言より前にcurrentTarget、もしくはcurrentTarget以下の属性を含む値を変数として宣言してください
+ - 参考: https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget
+ - NG例:
+    const onChange = async (e) => {
+      await hoge()
+      fuga(e.currentTarget.value)
+    }
+ - 修正例:
+    const onChange = async (e) => {
+      const value = e.currentTarget.value
+      await hoge()
+      fuga(value)
+    }`,
+                })
+
+                break
+              case 2:
+                context.report({
+                  node,
+                  message: `currentTargetはイベント処理中以外に参照するとnullになる場合があります。イベントハンドラ用関数のスコープ直下でcurrentTarget、もしくはcurrentTarget以下の属性を含む値を変数として宣言してください
+ - 参考: https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget
+ - React/useStateのsetterは第一引数に関数を渡すと非同期処理になるためこの問題が起きる可能性があります
+ - イベントハンドラ内で関数を定義すると参照タイミングがずれる可能性があるため、イベントハンドラ直下のスコープ内にcurrentTarget関連の参照を変数に残すことをオススメします
+ - NG例:
+    const onSelect = (e) => {
+      setItem((current) => ({ ...current, value: e.currentTarget.value }))
+    }
+ - 修正例:
+    const onSelect = (e) => {
+      const value = e.currentTarget.value
+      setItem((current) => ({ ...current, value }))
+    }`,
+                })
+
+                break
+            }
+          }
+
+        }
+      },
+    }
+  },
+}
+module.exports.schema = SCHEMA

package/test/best-practice-for-async-current-target.js

@@ -0,0 +1,55 @@
+const rule = require('../rules/best-practice-for-async-current-target')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+const ERRORMESSAGE_NORMAL = `currentTargetはイベント処理中以外に参照するとnullになる場合があります。イベントハンドラ用関数のスコープ直下でcurrentTarget、もしくはcurrentTarget以下の属性を含む値を変数として宣言してください
+ - 参考: https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget
+ - React/useStateのsetterは第一引数に関数を渡すと非同期処理になるためこの問題が起きる可能性があります
+ - イベントハンドラ内で関数を定義すると参照タイミングがずれる可能性があるため、イベントハンドラ直下のスコープ内にcurrentTarget関連の参照を変数に残すことをオススメします
+ - NG例:
+    const onSelect = (e) => {
+      setItem((current) => ({ ...current, value: e.currentTarget.value }))
+    }
+ - 修正例:
+    const onSelect = (e) => {
+      const value = e.currentTarget.value
+      setItem((current) => ({ ...current, value }))
+    }`
+const ERRORMESSAGE_AWAIT = `currentTargetはイベント処理中以外に参照するとnullになる場合があります。awaitの宣言より前にcurrentTarget、もしくはcurrentTarget以下の属性を含む値を変数として宣言してください
+ - 参考: https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget
+ - NG例:
+    const onChange = async (e) => {
+      await hoge()
+      fuga(e.currentTarget.value)
+    }
+ - 修正例:
+    const onChange = async (e) => {
+      const value = e.currentTarget.value
+      await hoge()
+      fuga(value)
+    }`
+
+ruleTester.run('best-practice-for-async-current-target', rule, {
+  valid: [
+    { code: `(e) => { setValue(e.currentTarget) }` },
+    { code: `const action = function(e) { setValue(e.currentTarget) }` },
+    { code: `async (e) => { const value = e.currentTarget.value; await any(); action(value) }` },
+    { code: `const action = async function(e) { const value = e.currentTarget.value; await any(); action(value) }` },
+  ],
+  invalid: [
+    { code: `(e) => { setItem(() => { e.currentTarget }) }`, errors: [ { message: ERRORMESSAGE_NORMAL } ] },
+    { code: `(function(e) { setItem(() => { e.currentTarget }) })`, errors: [ { message: ERRORMESSAGE_NORMAL } ] },
+    { code: `async (e) => { await any();const value = e.currentTarget.value; action(value) }`, errors: [ { message: ERRORMESSAGE_AWAIT } ] },
+    { code: `const action = async function(e) { await any();const value = e.currentTarget.value;action(value) }`, errors: [ { message: ERRORMESSAGE_AWAIT } ] },
+    { code: `async (e) => { await any(e.currentTarget.value); }`, errors: [ { message: ERRORMESSAGE_AWAIT } ] },
+  ]
+})