Merge pull request #49 from solidjs-community/fix/component-event-listeners

Allow forwarding event handlers without wrapper function in Components

Author: joshwilsonvu

docs/reactivity.md

@@ -448,6 +448,10 @@ function Component() {
   return <div on:click={() => console.log(signal())} />;
 }
 
+const Parent = (props) => {
+  return <Child onClick={props.onClick} />;
+};
+
 const Component = (props) => {
   const [signal] = createSignal();
   return (

src/rules/reactivity.ts

@@ -238,7 +238,7 @@ const rule: TSESLint.RuleModule<MessageIds, []> = {
       untrackedReactive:
         "The reactive variable '{{name}}' should be used within JSX, a tracked scope (like createEffect), or inside an event handler function.",
       expectedFunctionGotExpression:
-        "The reactive variable '{{name}}' should be wrapped in a function for reactivity. This includes event handler bindings, which are not reactive like other JSX props.",
+        "The reactive variable '{{name}}' should be wrapped in a function for reactivity. This includes event handler bindings on native elements, which are not reactive like other JSX props.",
       badSignal:
         "The reactive variable '{{name}}' should be called as a function when used in {{where}}.",
       badUnnamedDerivedSignal:
@@ -755,7 +755,10 @@ const rule: TSESLint.RuleModule<MessageIds, []> = {
       if (node.type === "JSXExpressionContainer") {
         if (
           node.parent?.type === "JSXAttribute" &&
-          /^on[:A-Z]/.test(sourceCode.getText(node.parent.name))
+          /^on[:A-Z]/.test(sourceCode.getText(node.parent.name)) &&
+          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:
           // Events are never rebound and the bindings are not reactive, as it is expensive to

test/rules/reactivity.test.ts

@@ -165,6 +165,10 @@ export const cases = run("reactivity", rule, {
       const [signal, setSignal] = createSignal(1);
       return <div on:click={() => console.log(signal())} />;
     }`,
+    // event listeners are reactive on components
+    `const Parent = props => {
+      return <Child onClick={props.onClick} />;
+    }`,
     // Pass reactive variables as-is into provider value prop
     `const Component = props => {
       const [signal] = createSignal();
@@ -554,7 +558,7 @@ export const cases = run("reactivity", rule, {
         },
       ],
     },
-    // event listeners not rebound
+    // event listeners are not rebound on native elements
     {
       code: `
       const Component = props => {