diff --git a/README.md b/README.md index 2b5103e..6ed6ccb 100644 --- a/README.md +++ b/README.md @@ -106,7 +106,7 @@ If you want to pin a minor version, use a tilde in your `package.json`. ```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" ``` diff --git a/docs/event-handlers.md b/docs/event-handlers.md index 7c977d0..c1644a5 100644 --- a/docs/event-handlers.md +++ b/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. +## Rule Options +``` + "event-handlers": ["error", { "": "" }] +``` + +Key | Type | Description +:--- | :---: | :--- +ignoreCase | `boolean` | if true, don't warn on ambiguously named event handlers like `onclick` or `onchange` @@ -67,5 +75,11 @@ let el =
{}} />; let el = ; +/* eslint solid/event-handlers: ["error", { "ignoreCase": true }] */ +let el =
; + +/* eslint solid/event-handlers: ["error", { "ignoreCase": true }] */ +let el =
; + ``` diff --git a/src/rules/event-handlers.ts b/src/rules/event-handlers.ts index 4cd2182..3116563 100644 --- a/src/rules/event-handlers.ts +++ b/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. diff --git a/test/fixture/valid/stores/create-store/main.tsx b/test/fixture/valid/stores/create-store/main.tsx index 673242c..184f5f9 100644 --- a/test/fixture/valid/stores/create-store/main.tsx +++ b/test/fixture/valid/stores/create-store/main.tsx @@ -39,7 +39,7 @@ const App = () => { console.log(`Creating ${text}`); return (
- + {text} diff --git a/test/fixture/valid/stores/immutable-stores/main.tsx b/test/fixture/valid/stores/immutable-stores/main.tsx index 699020a..3124124 100644 --- a/test/fixture/valid/stores/immutable-stores/main.tsx +++ b/test/fixture/valid/stores/immutable-stores/main.tsx @@ -29,7 +29,7 @@ const App = () => { console.log("Create", text); return (
- + {text} diff --git a/test/fixture/valid/stores/mutation/main.tsx b/test/fixture/valid/stores/mutation/main.tsx index db0d58e..8c2dfa4 100644 --- a/test/fixture/valid/stores/mutation/main.tsx +++ b/test/fixture/valid/stores/mutation/main.tsx @@ -42,7 +42,7 @@ const App = () => { console.log(`Creating ${text}`); return (
- + {text} diff --git a/test/fixture/valid/stores/nested-reactivity/main.tsx b/test/fixture/valid/stores/nested-reactivity/main.tsx index 3e14998..9aea50f 100644 --- a/test/fixture/valid/stores/nested-reactivity/main.tsx +++ b/test/fixture/valid/stores/nested-reactivity/main.tsx @@ -37,7 +37,7 @@ const App = () => { console.log(`Creating ${text}`); return (
- + {text} diff --git a/test/rules/event-handlers.test.ts b/test/rules/event-handlers.test.ts index 737c287..3c6a0c3 100644 --- a/test/rules/event-handlers.test.ts +++ b/test/rules/event-handlers.test.ts @@ -18,6 +18,8 @@ export const cases = run("event-handlers", rule, { `let el =
{}} />;`, `let el =
{}} />;`, `let el = ;`, + { code: `let el =
`, options: [{ ignoreCase: true }] }, + { code: `let el =
`, options: [{ ignoreCase: true }] }, ], invalid: [ {