Show reactivity warning on reactive variables in context provider value prop.

Author: joshwilsonvu

src/rules/reactivity.ts

@@ -753,22 +753,40 @@ const rule: TSESLint.RuleModule<MessageIds, []> = {
         }
       };
       if (node.type === "JSXExpressionContainer") {
-        // 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 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
-        // if desired.
-        // What this means here is we actually do consider an event handler a
-        // tracked scope expecting a function, i.e. it's okay to use changing
-        // props/signals in the body of the function, even though the changes
-        // don't affect when the handler will run.
-        const expect =
+        if (
           node.parent?.type === "JSXAttribute" &&
           /^on[:A-Z]/.test(sourceCode.getText(node.parent.name))
-            ? "called-function"
-            : "expression";
-        pushTrackedScope(node.expression, expect);
+        ) {
+          // 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 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
+          // if desired.
+          // What this means here is we actually do consider an event handler a
+          // tracked scope expecting a function, i.e. it's okay to use changing
+          // props/signals in the body of the function, even though the changes
+          // don't affect when the handler will run.
+          pushTrackedScope(node.expression, "called-function");
+        } else if (
+          node.parent?.type === "JSXAttribute" &&
+          node.parent.name.name === "value" &&
+          node.parent.parent?.type === "JSXOpeningElement" &&
+          ((node.parent.parent.name.type === "JSXIdentifier" &&
+            node.parent.parent.name.name.endsWith("Provider")) ||
+            (node.parent.parent.name.type === "JSXMemberExpression" &&
+              node.parent.parent.name.property.name === "Provider"))
+        ) {
+          // From the docs: "The value passed to provider is passed to useContext as is. That means
+          // wrapping as a reactive expression will not work. You should pass in Signals and Stores
+          // directly instead of accessing them in the JSX."
+          // For `<SomeContext.Provider value={}>` or `<SomeProvider value={}>`, do nothing, the
+          // rule will warn later.
+          // TODO: add some kind of "anti- tracked scope" that still warns but enhances the error
+          // message if matched.
+        } else {
+          pushTrackedScope(node.expression, "expression");
+        }
       } else if (node.type === "JSXSpreadAttribute") {
         // allow <div {...props.nestedProps} />; {...props} is already ignored
         pushTrackedScope(node.argument, "expression");

test/rules/reactivity.test.ts

@@ -181,11 +181,20 @@ export const cases = run("reactivity", rule, {
       const [signal, setSignal] = createSignal(1);
       return <div on:click={() => console.log(signal())} />;
     }`,
-    // Don't warn on using props.initial* for initialization
+    // Pass reactive variables as-is into provider value prop
+    `const Component = props => {
+      const [signal] = createSignal();
+      return <SomeContext.Provider value={signal}>{props.children}</SomeContext.Provider>;
+    }`,
+    // Don't warn on using props.initial* or props.default* for initialization
     `function Component(props) {
       const [count, setCount] = useSignal(props.initialCount);
       return <div>{count()}</div>;
     }`,
+    `function Component(props) {
+      const [count, setCount] = useSignal(props.defaultCount);
+      return <div>{count()}</div>;
+    }`,
     // Store getters
     `const [state, setState] = createStore({
       firstName: 'Will',
@@ -557,6 +566,29 @@ export const cases = run("reactivity", rule, {
         },
       ],
     },
+    // provider value passed as-is
+    {
+      code: `
+      const Component = props => {
+        return <SomeContext.Provider value={props.value}>{props.children}</SomeContext.Provider>;
+      }`,
+      errors: [{ messageId: "untrackedReactive", data: { name: "props.value" } }],
+    },
+    {
+      code: `
+      const Component = props => {
+        return <SomeProvider value={props.value}>{props.children}</SomeProvider>;
+      }`,
+      errors: [{ messageId: "untrackedReactive", data: { name: "props.value" } }],
+    },
+    {
+      code: `
+      const Component = props => {
+        const [signal] = createSignal();
+        return <SomeContext.Provider value={signal()} someOtherProp={props.foo}>{props.children}</SomeContext.Provider>;
+      }`,
+      errors: [{ messageId: "untrackedReactive", data: { name: "signal" } }],
+    },
     // getOwner/runWithOwner
     {
       code: `