Less strict checking of event handler attribute names

Author: pedro00dk

packages/eslint-plugin-solid/src/rules/reactivity.ts

@@ -850,12 +850,14 @@ export default createRule<Options, MessageIds>({
       if (node.type === "JSXExpressionContainer") {
         if (
           node.parent?.type === "JSXAttribute" &&
-          /^on[:A-Z]/.test(sourceCode.getText(node.parent.name)) &&
+          sourceCode.getText(node.parent.name).startsWith("on") &&
           node.parent.parent?.type === "JSXOpeningElement" &&
           node.parent.parent.name.type === "JSXIdentifier" &&
           isDOMElementName(node.parent.parent.name.name)
         ) {
-          // Expect a function if the attribute is like onClick={} or on:click={}. From the docs:
+          // Expect a function if the attribute is like onClick={}, onclick={}, on:click={}, or
+          // custom events such as on-click={}.
+          // From the docs:
           // Events are never rebound and the bindings are not reactive, as it is expensive to
           // attach and detach listeners. Since event handlers are called like any other function
           // each time an event fires, there is no need for reactivity; simply shortcut your handler

test/valid/reactivity/on/main.tsx

@@ -5,6 +5,7 @@ import { createSignal, createEffect, on } from "solid-js";
 const App = () => {
   const [a, setA] = createSignal(1);
   const [b, setB] = createSignal(1);
+  const [c, setC] = createSignal(1);
 
   createEffect(
     on(
@@ -19,7 +20,11 @@ const App = () => {
   return (
     <>
       <button onClick={() => setA(a() + 1)}>Increment A</button>
-      <button onClick={() => setB(b() + 1)}>Increment B</button>
+      <button on:click={() => setB(b() + 1)}>Increment B</button>
+      <button on-click={() => setC(c() + 1)}>Increment C</button>
+      <button onClick={async () => setA(a() + 1)}>Async Increment A</button>
+      <button on:click={async () => setB(b() + 1)}>Async Increment B</button>
+      <button on-click={async () => setC(c() + 1)}>Async Increment C</button>
     </>
   );
 };