Skip to content

feat(eslint-plugin): add no-click-event rule to discourage click handlers#801

Merged
arktds merged 8 commits intodevfrom
feat/eslint-plugin/no-click-event
Mar 3, 2026
Merged

feat(eslint-plugin): add no-click-event rule to discourage click handlers#801
arktds merged 8 commits intodevfrom
feat/eslint-plugin/no-click-event

Conversation

@YusukeHirao
Copy link
Copy Markdown
Member

Summary

  • Add new @d-zero/eslint-plugin package with no-click-event rule
  • Integrate the rule into @d-zero/eslint-config at warn level
  • Add comprehensive tests for all detection patterns

Changes

New Package: @d-zero/eslint-plugin

Created a new ESLint plugin package following monorepo conventions:

  • Rule: no-click-event - Discourages click event handlers in favor of Invoker Commands API
  • Detection patterns:
    • addEventListener('click', ...)
    • element.onclick = ...
    • jQuery .on('click', ...) and .click()
    • React onClick={...}
    • Vue @click and v-on:click

Integration

  • Added @d-zero/eslint-plugin dependency to @d-zero/eslint-config
  • Configured rule in base.js with warn level
  • Applied to all configs: standard, base, node, frontend

Testing

  • Added test fixture: test/fixtures/eslint/no-click-event.ts
  • Added CLI test case verifying 4 warnings
  • All 127 tests passing

Documentation

  • Updated root README.md with new package
  • Added dzero, TSES to cspell dictionary
  • Package README with usage examples

Test Plan

  • Unit tests: 18 test cases in index.spec.ts
  • Integration test: CLI test verifies 4 warnings
  • Build: All packages compile successfully
  • Lint: CSpell, ESLint, TypeScript all pass
  • Total: 127 tests passing

Notes

The Invoker Commands API is a new web standard (Chrome/Edge 135+, Safari TP) that provides a declarative way to handle interactions without JavaScript, improving accessibility and performance.

🤖 Generated with Claude Code

YusukeHirao and others added 4 commits January 20, 2026 14:45
Add @d-zero/eslint-plugin package that provides custom ESLint rules.

Implement no-click-event rule to discourage click event handlers in favor of Invoker Commands API.

Detected patterns:

- addEventListener("click", ...)

- element.onclick = ...

- jQuery .on("click", ...) and .click()

- React onClick={...}

- Vue @click and v-on:click

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add @d-zero/eslint-plugin dependency and configure no-click-event rule in base config.

The rule is enabled at warn level across all configs (standard, base, node, frontend).

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add test fixture and CLI test case to verify no-click-event rule detects all patterns.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Update root README to include new eslint-plugin package in custom rules section.

Add dzero and TSES to cspell dictionary.

Update yarn.lock with new dependencies.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@YusukeHirao YusukeHirao requested a review from arktds January 20, 2026 05:52
});
},

// Pattern 3: jQuery .on('click', ...) and .click()
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

document.body.click(); など jQuery オブジェクト以外の click() メソッド(クリック実行)も誤検知されているようなので、jQuery オブジェクトの click() メソッド(イベントリスナーの登録メソッド)だけ検知されるようにしたほうが良さそうです!

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

修正しました! jQuery オブジェクト($element.click()$(...).click()jQuery(...).click())のみ検知するようにし、document.body.click() などネイティブの .click() は検知対象外にしています。

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

一貫性とルールの責務のために、jQuery オブジェクトの引数なし click()(クリック実行)は JavaScript と同様に許可するのはどうでしょうか?

言語 コード 意味 リント
JavaScript click() クリック実行 許可
jQuery click() クリック実行 許可
jQuery click(handler) イベントハンドラの追加 不許可

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@arktds click()引数なしは許可に変更しました!

@@ -0,0 +1,3 @@
export const NAMESPACE = '@d-zero';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NAMESPACE は未使用なので、削除すべきです。

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

修正しました! 未使用の NAMESPACE を削除しています。

YusukeHirao and others added 2 commits February 24, 2026 19:51
- Remove unused NAMESPACE export from const.ts
- Only detect jQuery .click() ($element.click(), $(...).click(), jQuery(...).click())
- Allow native .click() calls like document.body.click()
- Add test cases for non-jQuery .click() as valid

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@YusukeHirao YusukeHirao requested a review from arktds February 24, 2026 10:55
…mmatic click execution

Only report jQuery .click(handler) with arguments (event handler
registration). Allow .click() without arguments as it triggers a
click rather than adding an event listener, consistent with native
element.click() behavior.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@arktds
Copy link
Copy Markdown
Contributor

arktds commented Mar 2, 2026

@YusukeHirao
click() の許可問題なさそうです!
package.json と yarn.lock にコンフリクトが起きているので、解消をお願いしたいです!

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@arktds arktds merged commit a8c2f04 into dev Mar 3, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants