Merge pull request #83 from solidjs-community/feature/static-props

Allow using 'static*' props outside tracked scopes, but forbid passing reactive variables to them in the caller

Author: joshwilsonvu

docs/reactivity.md

@@ -387,6 +387,9 @@ const result = indexArray(array, (item) => {
   item();
 });
 
+const [signal] = createSignal();
+let el = <Component staticProp={signal()} />;
+ 
 ```
 
 ### Valid Examples
@@ -726,6 +729,15 @@ function Component(props) {
   );
 }
 
+function Component(props) {
+  const value = props.staticValue;
+}
+
+function Component() {
+  const staticValue = () => props.value;
+  const value = staticValue();
+}
+
 ```
 <!-- AUTO-GENERATED-CONTENT:END -->
 

src/rules/reactivity.ts

@@ -547,7 +547,7 @@ const rule: TSESLint.RuleModule<MessageIds, []> = {
             });
           } else if (
             parent.property.type === "Identifier" &&
-            /^(?:initial|default)[A-Z]/.test(parent.property.name)
+            /^(?:initial|default|static)[A-Z]/.test(parent.property.name)
           ) {
             // We're using a prop with a name that starts with `initial` or
             // `default`, like `props.initialCount`. We'll refrain from warning
@@ -832,6 +832,18 @@ const rule: TSESLint.RuleModule<MessageIds, []> = {
           // rule will warn later.
           // TODO: add some kind of "anti- tracked scope" that still warns but enhances the error
           // message if matched.
+        } else if (
+          node.parent?.type === "JSXAttribute" &&
+          node.parent.name?.type === "JSXIdentifier" &&
+          /^static[A-Z]/.test(node.parent.name.name) &&
+          node.parent.parent?.type === "JSXOpeningElement" &&
+          node.parent.parent.name.type === "JSXIdentifier" &&
+          !isDOMElementName(node.parent.parent.name.name)
+        ) {
+          // A caller is passing a value to a prop prefixed with `static` in a component, i.e.
+          // `<Box staticName={...} />`. Since we're considering these props as static in the component
+          // we shouldn't allow passing reactive values to them, as this isn't just ignoring reactivity
+          // like initial*/default*; this is disabling it altogether as a convention. Do nothing.
         } else if (
           node.parent?.type === "JSXAttribute" &&
           node.parent.name.name === "ref" &&

test/rules/reactivity.test.ts

@@ -279,6 +279,14 @@ export const cases = run("reactivity", rule, {
         }}</div>
       );
     }`,
+    // static* prefix for props
+    `function Component(props) {
+      const value = props.staticValue;
+    }`,
+    `function Component() {
+      const staticValue = () => props.value;
+      const value = staticValue();
+    }`,
   ],
   invalid: [
     // Untracked signals
@@ -746,5 +754,12 @@ export const cases = run("reactivity", rule, {
       });`,
       errors: [{ messageId: "untrackedReactive", line: 4 }],
     },
+    // static* prefix for props
+    {
+      code: `
+      const [signal] = createSignal();
+      let el = <Component staticProp={signal()} />;`,
+      errors: [{ messageId: "untrackedReactive" }],
+    },
   ],
 });