Merge pull request #69 from solidjs-community/fix/fn-in-jsx

Treat inline functions as JSX children as tracked functions.

Author: joshwilsonvu

docs/reactivity.md

@@ -569,6 +569,17 @@ const m = createMemo(() => 5)!;
 
 const m = createMemo(() => 5)! as Accessor<number>;
 
+function Component(props) {
+  return (
+    <div>
+      {() => {
+        console.log("hello");
+        return props.greeting;
+      }}
+    </div>
+  );
+}
+
 ```
 <!-- AUTO-GENERATED-CONTENT:END -->
 

src/rules/reactivity.ts

@@ -840,6 +840,8 @@ const rule: TSESLint.RuleModule<MessageIds, []> = {
           // to the DOM. This is semantically a "called function", so it's fine to read reactive
           // variables here.
           pushTrackedScope(node.expression, "called-function");
+        } else if (node.parent?.type === "JSXElement" && isFunctionNode(node.expression)) {
+          pushTrackedScope(node.expression, "function"); // functions inline in JSX containers will be tracked
         } else {
           pushTrackedScope(node.expression, "expression");
         }

test/rules/reactivity.test.ts

@@ -264,6 +264,15 @@ export const cases = run("reactivity", rule, {
       code: `const m = createMemo(() => 5)! as Accessor<number>;`,
       ...tsOnlyTest,
     },
+    // functions in JSXExpressionContainers
+    `function Component(props) {
+      return (
+        <div>{() => {
+          console.log('hello');
+          return props.greeting;
+        }}</div>
+      );
+    }`,
   ],
   invalid: [
     // Untracked signals