Merge pull request #94 from solidjs-community/fix/comp-on-handler

Fixes regression where functions could not be passed inline to component event handlers

Author: joshwilsonvu

docs/reactivity.md

@@ -620,10 +620,18 @@ function Component() {
   return <div on:click={() => console.log(signal())} />;
 }
 
+function Component(props) {
+  return <div onClick={(e) => props.onClick(e)} />;
+}
+
 const Parent = (props) => {
   return <Child onClick={props.onClick} />;
 };
 
+const Parent = (props) => {
+  return <Child onClick={(e) => props.onClick(e)} />;
+};
+
 const Component = (props) => {
   const [signal] = createSignal();
   return (
@@ -742,6 +750,9 @@ function Component(props) {
   );
 }
 
+const [signal, setSignal] = createSignal();
+let el = <Child foo={() => signal()}></Child>;
+
 function Component(props) {
   const value = props.staticValue;
 }

src/rules/reactivity.ts

@@ -568,16 +568,14 @@ export default createRule({
       }
 
       // If there are any unnamed derived signals, they must match a tracked
-      // scope exactly. Usually anonymous arrow function args to createEffect,
+      // scope. Usually anonymous arrow function args to createEffect,
       // createMemo, etc.
       const { unnamedDerivedSignals } = currentScope();
       if (unnamedDerivedSignals) {
         for (const node of unnamedDerivedSignals) {
           if (
-            !currentScope().trackedScopes.find(
-              (trackedScope) =>
-                trackedScope.node === node &&
-                (trackedScope.expect === "function" || trackedScope.expect === "called-function")
+            !currentScope().trackedScopes.find((trackedScope) =>
+              matchTrackedScope(trackedScope, node)
             )
           ) {
             context.report({

test/rules/reactivity.test.ts

@@ -177,10 +177,16 @@ export const cases = run("reactivity", rule, {
       const [signal, setSignal] = createSignal(1);
       return <div on:click={() => console.log(signal())} />;
     }`,
+    `function Component(props) {
+      return <div onClick={e => props.onClick(e)} />;
+    }`,
     // event listeners are reactive on components
     `const Parent = props => {
       return <Child onClick={props.onClick} />;
     }`,
+    `const Parent = props => {
+      return <Child onClick={e => props.onClick(e)} />;
+    }`,
     // Pass reactive variables as-is into provider value prop
     `const Component = props => {
       const [signal] = createSignal();
@@ -289,6 +295,9 @@ export const cases = run("reactivity", rule, {
         }}</div>
       );
     }`,
+    // passing function instead of signal
+    `const [signal, setSignal] = createSignal();
+    let el = <Child foo={() => signal()}></Child>`,
     // static* prefix for props
     `function Component(props) {
       const value = props.staticValue;