Style fixes for fixture test cases, add ignoreCase option to event-handlers

Author: joshwilsonvu

README.md

@@ -106,7 +106,7 @@ If you want to pin a minor version, use a tilde in your `package.json`.
 
 <!-- AUTO-GENERATED-CONTENT:START (TILDE) -->
 ```diff
-- "eslint-plugin-solid": "^0.4.7"
-+ "eslint-plugin-solid": "~0.4.7"
+- "eslint-plugin-solid": "^0.5.0"
++ "eslint-plugin-solid": "~0.5.0"
 ```
 <!-- AUTO-GENERATED-CONTENT:END -->

docs/event-handlers.md

@@ -10,7 +10,15 @@ This rule is **a warning** by default.
 See [this issue](https://github.com/joshwilsonvu/eslint-plugin-solid/issues/23) for rationale.
 
 <!-- AUTO-GENERATED-CONTENT:START (OPTIONS) -->
+## Rule Options
 
+```
+  "event-handlers": ["error", { "<key>": "<value>" }]
+```
+
+Key | Type | Description
+:--- | :---: | :---
+ignoreCase | `boolean` | if true, don't warn on ambiguously named event handlers like `onclick` or `onchange` 
 <!-- AUTO-GENERATED-CONTENT:END -->
 
 <!-- AUTO-GENERATED-CONTENT:START (CASES) -->
@@ -67,5 +75,11 @@ let el = <div on:ly={() => {}} />;
 
 let el = <foo.bar only="true" />;
 
+/* eslint solid/event-handlers: ["error", { "ignoreCase": true }] */
+let el = <div onclick={onclick} />;
+
+/* eslint solid/event-handlers: ["error", { "ignoreCase": true }] */
+let el = <div only={only} />;
+
 ```
 <!-- AUTO-GENERATED-CONTENT:END -->

src/rules/event-handlers.ts

@@ -75,7 +75,7 @@ const getCommoneEventHandlerName = (lowercaseEventName: string) => {
 
 const rule: TSESLint.RuleModule<
   "naming" | "capitalization" | "make-handler" | "make-attr" | "detected-attr" | "spread-handler",
-  []
+  [{ ignoreCase?: boolean }?]
 > = {
   meta: {
     type: "problem",
@@ -87,7 +87,19 @@ const rule: TSESLint.RuleModule<
     },
     fixable: "code",
     hasSuggestions: true,
-    schema: [],
+    schema: [
+      {
+        type: "object",
+        properties: {
+          ignoreCase: {
+            description:
+              "if true, don't warn on ambiguously named event handlers like `onclick` or `onchange`",
+            type: "boolean",
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
     messages: {
       "detected-attr":
         'The {{name}} prop is named as an event handler (starts with "on"), but Solid knows its value ({{staticValue}}) is a string or number, so it will be treated as an attribute. If this is intentional, name this prop attr:{{name}}.',
@@ -161,7 +173,7 @@ const rule: TSESLint.RuleModule<
               staticValue: node.value !== null ? node.value.value : true,
             },
           });
-        } else if (name[2] === name[2].toLowerCase()) {
+        } else if (name[2] === name[2].toLowerCase() && !context.options[0]?.ignoreCase) {
           const lowercaseEventName = match[1].toLowerCase();
           if (isCommonEventName(lowercaseEventName)) {
             // For common DOM event names, we know the user intended the prop to be an event handler.

test/fixture/valid/stores/create-store/main.tsx

@@ -39,7 +39,7 @@ const App = () => {
           console.log(`Creating ${text}`);
           return (
             <div>
-              <input type="checkbox" checked={todo.completed} onchange={[toggleTodo, id]} />
+              <input type="checkbox" checked={todo.completed} onChange={[toggleTodo, id]} />
               <span style={{ "text-decoration": todo.completed ? "line-through" : "none" }}>
                 {text}
               </span>

test/fixture/valid/stores/immutable-stores/main.tsx

@@ -29,7 +29,7 @@ const App = () => {
           console.log("Create", text);
           return (
             <div>
-              <input type="checkbox" checked={todo.completed} onchange={[toggleTodo, id]} />
+              <input type="checkbox" checked={todo.completed} onChange={[toggleTodo, id]} />
               <span style={{ "text-decoration": todo.completed ? "line-through" : "none" }}>
                 {text}
               </span>

test/fixture/valid/stores/mutation/main.tsx

@@ -42,7 +42,7 @@ const App = () => {
           console.log(`Creating ${text}`);
           return (
             <div>
-              <input type="checkbox" checked={todo.completed} onchange={[toggleTodo, id]} />
+              <input type="checkbox" checked={todo.completed} onChange={[toggleTodo, id]} />
               <span style={{ "text-decoration": todo.completed ? "line-through" : "none" }}>
                 {text}
               </span>

test/fixture/valid/stores/nested-reactivity/main.tsx

@@ -37,7 +37,7 @@ const App = () => {
           console.log(`Creating ${text}`);
           return (
             <div>
-              <input type="checkbox" checked={todo.completed()} onchange={[toggleTodo, id]} />
+              <input type="checkbox" checked={todo.completed()} onChange={[toggleTodo, id]} />
               <span style={{ "text-decoration": todo.completed() ? "line-through" : "none" }}>
                 {text}
               </span>

test/rules/event-handlers.test.ts

@@ -18,6 +18,8 @@ export const cases = run("event-handlers", rule, {
     `let el = <div onLy={() => {}} />;`,
     `let el = <div on:ly={() => {}} />;`,
     `let el = <foo.bar only="true" />;`,
+    { code: `let el = <div onclick={onclick} />`, options: [{ ignoreCase: true }] },
+    { code: `let el = <div only={only} />`, options: [{ ignoreCase: true }] },
   ],
   invalid: [
     {