Address #30, allow spreading reactive variables

Author: joshwilsonvu

src/rules/reactivity.ts

@@ -732,6 +732,7 @@ const rule: TSESLint.RuleModule<MessageIds, []> = {
     const checkForTrackedScopes = (
       node:
         | T.JSXExpressionContainer
+        | T.JSXSpreadAttribute
         | T.CallExpression
         | T.VariableDeclarator
         | T.AssignmentExpression
@@ -766,6 +767,9 @@ const rule: TSESLint.RuleModule<MessageIds, []> = {
             ? "called-function"
             : "expression";
         pushTrackedScope(node.expression, expect);
+      } else if (node.type === "JSXSpreadAttribute") {
+        // allow <div {...props.nestedProps} />; {...props} is already ignored
+        pushTrackedScope(node.argument, "expression");
       } else if (node.type === "CallExpression" && node.callee.type === "Identifier") {
         const {
           callee,
@@ -951,6 +955,9 @@ const rule: TSESLint.RuleModule<MessageIds, []> = {
       JSXExpressionContainer(node: T.JSXExpressionContainer) {
         checkForTrackedScopes(node);
       },
+      JSXSpreadAttribute(node: T.JSXSpreadAttribute) {
+        checkForTrackedScopes(node);
+      },
       CallExpression(node: T.CallExpression) {
         checkForTrackedScopes(node);
         checkForSyncCallbacks(node);

test/rules/reactivity.test.ts

@@ -68,6 +68,17 @@ export const cases = run("reactivity", rule, {
     on(value, () => console.log('hello'));`,
     `const [value, setValue] = createSignal();
     on([value], () => console.log('hello'));`,
+    // spreading props
+    `function Component(props) {
+      return <div {...props} />;
+    }`,
+    `function Component(props) {
+      return <div {...props.nestedProps} />;
+    }`,
+    `function Component() {
+      const [signal, setSignal] = createSignal({});
+      return <div {...signal()} />;
+    }`,
     // Derived signals
     `let c = () => {
       const [signal] = createSignal();