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

README.md

@@ -26,6 +26,7 @@
 
 | パッケージ名                                                               | 内容                                                                                                                                                                                                            |
 | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`@d-zero/eslint-plugin`](./packages/%40d-zero/eslint-plugin/)             | [`@d-zero/eslint-config`](./packages/%40d-zero/eslint-config/)に設定されているディーゼロ独自のESLintルール                                                                                                      |
 | [`@d-zero/stylelint-rules`](./packages/%40d-zero/stylelint-rules/)         | [`@d-zero/stylelint-config`](./packages/%40d-zero/stylelint-config/)に設定されているディーゼロ独自のStylelintルール                                                                                             |
 | [`@d-zero/csstree-scss-syntax`](./packages/%40d-zero/csstree-scss-syntax/) | [`@d-zero/stylelint-rules`](./packages/%40d-zero/stylelint-rules/)内で使用されている[CSSTree](https://github.com/csstree/csstree)用の[SCSS](https://sass-lang.com/documentation/syntax/#scss)パーサープラグイン |
 

cspell.json

@@ -6,7 +6,11 @@
 		"unspaced",
 
 		//
-		"splide"
+		"splide",
+
+		// ESLint plugin
+		"dzero",
+		"TSES"
 	],
 	"overrides": [
 		{

packages/@d-zero/eslint-config/base.js

@@ -1,3 +1,4 @@
+import dzeroPlugin from '@d-zero/eslint-plugin';
 import js from '@eslint/js';
 import comments from 'eslint-plugin-eslint-comments';
 import { flatConfigs as importX } from 'eslint-plugin-import-x';
@@ -249,4 +250,12 @@ export const base = [
 			},
 		},
 	},
+	{
+		plugins: {
+			'@d-zero': dzeroPlugin,
+		},
+		rules: {
+			'@d-zero/no-click-event': 'warn',
+		},
+	},
 ];

packages/@d-zero/eslint-config/package.json

@@ -19,6 +19,7 @@
 		".": "./index.js"
 	},
 	"dependencies": {
+		"@d-zero/eslint-plugin": "5.0.0",
 		"@eslint/js": "9.39.2",
 		"eslint": "9.39.2",
 		"eslint-plugin-eslint-comments": "3.2.0",

packages/@d-zero/eslint-plugin/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [5.0.0] - TBD
+
+### Added
+
+- Initial release of @d-zero/eslint-plugin
+- Added `no-click-event` rule to discourage click event handlers in favor of Invoker Commands API
+  - Detects `addEventListener('click')`
+  - Detects `onclick` IDL property assignment
+  - Detects jQuery `.on('click')` and `.click()`
+  - Detects React `onClick` JSX attribute
+  - Detects Vue `@click` and `v-on:click`

packages/@d-zero/eslint-plugin/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 D-ZERO Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/@d-zero/eslint-plugin/README.md

@@ -0,0 +1,42 @@
+# `@d-zero/eslint-plugin`
+
+Custom ESLint rules for D-ZERO.
+
+## Installation
+
+```sh
+npm install @d-zero/eslint-plugin --save-dev
+```
+
+## Configuration
+
+Add the following to your `eslint.config.js`:
+
+```js
+import dzeroPlugin from '@d-zero/eslint-plugin';
+
+export default [
+	{
+		plugins: {
+			'@d-zero': dzeroPlugin,
+		},
+		rules: {
+			'@d-zero/no-click-event': 'warn',
+		},
+	},
+];
+```
+
+## Rules
+
+### `@d-zero/no-click-event`
+
+Disallows click event handlers in favor of the [Invoker Commands API](https://developer.mozilla.org/docs/Web/API/Invoker_Commands_API).
+
+**Detected patterns:**
+
+- `addEventListener('click', ...)`
+- `element.onclick = ...`
+- jQuery `.on('click', ...)` and `.click()`
+- React `onClick={...}`
+- Vue `@click` and `v-on:click`

packages/@d-zero/eslint-plugin/package.json

@@ -0,0 +1,36 @@
+{
+	"name": "@d-zero/eslint-plugin",
+	"version": "5.0.0",
+	"description": "Custom ESLint rules for D-ZERO",
+	"repository": "https://github.com/d-zero-dev/linters.git",
+	"author": "D-ZERO Co., Ltd.",
+	"license": "MIT",
+	"publishConfig": {
+		"access": "public"
+	},
+	"engines": {
+		"node": ">=22.0.0"
+	},
+	"type": "module",
+	"exports": {
+		".": "./dist/index.js"
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "tsc"
+	},
+	"peerDependencies": {
+		"eslint": ">=9.0.0"
+	},
+	"dependencies": {
+		"@typescript-eslint/utils": "8.53.1"
+	},
+	"devDependencies": {
+		"@typescript-eslint/parser": "8.53.1",
+		"@typescript-eslint/rule-tester": "8.53.1",
+		"eslint": "9.39.2",
+		"vue-eslint-parser": "9.4.3"
+	}
+}

packages/@d-zero/eslint-plugin/src/const.ts

@@ -0,0 +1,3 @@
+export const NAMESPACE = '@d-zero';
+export const REPOSITORY_URL =
+	'https://github.com/d-zero-dev/linters/tree/main/packages/%40d-zero/eslint-plugin/src/rules';

packages/@d-zero/eslint-plugin/src/index.ts

@@ -0,0 +1,13 @@
+import noClickEvent from './rules/no-click-event/index.js';
+
+const plugin = {
+	meta: {
+		name: '@d-zero/eslint-plugin',
+		version: '5.0.0',
+	},
+	rules: {
+		'no-click-event': noClickEvent,
+	},
+};
+
+export default plugin;

packages/@d-zero/eslint-plugin/src/rules/no-click-event/index.spec.ts

@@ -0,0 +1,87 @@
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import { afterAll, describe, it } from 'vitest';
+
+import rule from './index.js';
+
+RuleTester.afterAll = afterAll;
+RuleTester.describe = describe;
+RuleTester.it = it;
+
+const ruleTester = new RuleTester({
+	languageOptions: {
+		parserOptions: {
+			ecmaFeatures: {
+				jsx: true,
+			},
+			ecmaVersion: 2023,
+			sourceType: 'module',
+		},
+	},
+});
+
+ruleTester.run('no-click-event', rule, {
+	valid: [
+		// Valid: not using click events
+		'element.addEventListener("focus", handler)',
+		'element.onfocus = handler',
+		'$element.on("hover", handler)',
+		'$element.focus()',
+		'<button type="button">Click me</button>',
+		'<button onFocus={handler}>Focus me</button>',
+
+		// Valid: using Invoker Commands API (future-proof examples)
+		'button.commandfor = "target-id"',
+		'button.command = "show-modal"',
+	],
+	invalid: [
+		// Pattern 1: addEventListener('click')
+		{
+			code: 'element.addEventListener("click", handler)',
+			errors: [{ messageId: 'noClickEvent' }],
+		},
+		{
+			code: "element.addEventListener('click', () => {})",
+			errors: [{ messageId: 'noClickEvent' }],
+		},
+
+		// Pattern 2: onclick IDL property
+		{
+			code: 'element.onclick = handler',
+			errors: [{ messageId: 'noClickEvent' }],
+		},
+		{
+			code: 'document.getElementById("btn").onclick = () => {}',
+			errors: [{ messageId: 'noClickEvent' }],
+		},
+
+		// Pattern 3: jQuery .on('click')
+		{
+			code: '$element.on("click", handler)',
+			errors: [{ messageId: 'noClickEvent' }],
+		},
+		{
+			code: "jQuery('#btn').on('click', function() {})",
+			errors: [{ messageId: 'noClickEvent' }],
+		},
+
+		// Pattern 4: jQuery .click()
+		{
+			code: '$element.click(handler)',
+			errors: [{ messageId: 'noClickEvent' }],
+		},
+		{
+			code: '$(".button").click()',
+			errors: [{ messageId: 'noClickEvent' }],
+		},
+
+		// Pattern 5: React onClick
+		{
+			code: '<button onClick={handleClick}>Click me</button>',
+			errors: [{ messageId: 'noClickEvent' }],
+		},
+		{
+			code: '<div onClick={() => console.log("clicked")}>Click</div>',
+			errors: [{ messageId: 'noClickEvent' }],
+		},
+	],
+});

packages/@d-zero/eslint-plugin/src/rules/no-click-event/index.ts

@@ -0,0 +1,100 @@
+import type { TSESTree } from '@typescript-eslint/utils';
+
+import { createRule } from '../../utils/create-rule.js';
+
+export default createRule({
+	name: 'no-click-event',
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description: 'Disallow click event handlers in favor of Invoker Commands API',
+		},
+		messages: {
+			noClickEvent:
+				'Avoid using click events. Consider using the Invoker Commands API instead. See: https://developer.mozilla.org/docs/Web/API/Invoker_Commands_API',
+		},
+		schema: [], // No options
+	},
+	defaultOptions: [],
+	create(context) {
+		return {
+			// Pattern 1: addEventListener('click', ...)
+			'CallExpression[callee.property.name="addEventListener"]'(
+				node: TSESTree.CallExpression,
+			) {
+				const args = node.arguments;
+				const firstArg = args[0];
+				if (firstArg && firstArg.type === 'Literal' && firstArg.value === 'click') {
+					context.report({
+						node,
+						messageId: 'noClickEvent',
+					});
+				}
+			},
+
+			// Pattern 2: element.onclick = ...
+			'AssignmentExpression[left.type="MemberExpression"][left.property.name="onclick"]'(
+				node: TSESTree.AssignmentExpression,
+			) {
+				context.report({
+					node,
+					messageId: 'noClickEvent',
+				});
+			},
+
+			// Pattern 3: jQuery .on('click', ...) and .click()
+			'CallExpression[callee.type="MemberExpression"]'(node: TSESTree.CallExpression) {
+				const callee = node.callee as TSESTree.MemberExpression;
+
+				// .click()
+				if (callee.property.type === 'Identifier' && callee.property.name === 'click') {
+					context.report({
+						node,
+						messageId: 'noClickEvent',
+					});
+				}
+
+				// .on('click', ...)
+				const firstArg = node.arguments[0];
+				if (
+					callee.property.type === 'Identifier' &&
+					callee.property.name === 'on' &&
+					firstArg &&
+					firstArg.type === 'Literal' &&
+					firstArg.value === 'click'
+				) {
+					context.report({
+						node,
+						messageId: 'noClickEvent',
+					});
+				}
+			},
+
+			// Pattern 4: React onClick={...}
+			'JSXAttribute[name.name="onClick"]'(node: TSESTree.JSXAttribute) {
+				context.report({
+					node,
+					messageId: 'noClickEvent',
+				});
+			},
+
+			// Pattern 5: Vue @click or v-on:click
+			// Note: This requires vue-eslint-parser
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			'VAttribute[key.name.name="click"]'(node: any) {
+				context.report({
+					node,
+					messageId: 'noClickEvent',
+				});
+			},
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			'VAttribute[key.name="on"][key.argument.name="click"]'(node: any) {
+				context.report({
+					node,
+					messageId: 'noClickEvent',
+				});
+			},
+		};
+	},
+});

packages/@d-zero/eslint-plugin/src/utils/create-rule.ts

@@ -0,0 +1,8 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+
+import { REPOSITORY_URL } from '../const.js';
+
+/**
+ * Creates a rule with the D-ZERO namespace and documentation URL
+ */
+export const createRule = ESLintUtils.RuleCreator((name) => `${REPOSITORY_URL}/${name}`);

packages/@d-zero/eslint-plugin/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"extends": "../../../tsconfig.json",
+	"compilerOptions": {
+		"noEmit": false,
+		"outDir": "dist",
+		"rootDir": "src"
+	},
+	"include": ["src"],
+	"exclude": ["dist", "**/*.spec.ts"]
+}