Tested and finished no-destructure rule! Now part of recommended config.

Author: joshwilsonvu

README.md

@@ -73,6 +73,7 @@ would like to use.
 | :---: | :---: | :--- | :--- |
 | ✔ | 🔧 | [solid/jsx-no-undef](docs/jsx-no-undef.md) | Disallow references to undefined variables in JSX. Handles custom directives. |
 | ✔ |  | [solid/jsx-uses-vars](docs/jsx-uses-vars.md) | Prevent variables used in JSX from being marked as unused. |
+| ✔ | 🔧 | [solid/no-destructure](docs/no-destructure.md) | Prevent destructuring props. In Solid, props must be used with property accesses (`props.foo`) to preserve reactivity. This rule only tracks destructuring in the parameter list. |
 | ✔ | 🔧 | [solid/no-innerhtml](docs/no-innerhtml.md) | Disallow usage of the innerHTML attribute, which can often lead to security vulnerabilities. |
 | ✔ | 🔧 | [solid/no-react-specific-props](docs/no-react-specific-props.md) | Disallow usage of React-specific `className`/`htmlFor` props (though they are supported for compatibility). |
 | ✔ |  | [solid/no-unknown-namespaces](docs/no-unknown-namespaces.md) | Enforce using only Solid-specific namespaced attribute names (i.e. `'on:'` in `<div on:click={...} />`). |

docs/no-destructure.md

@@ -1,4 +1,9 @@
 <!-- AUTO-GENERATED-CONTENT:START (HEADER) -->
+# solid/no-destructure
+Prevent destructuring props. In Solid, props must be used with property accesses (`props.foo`) to preserve reactivity. This rule only tracks destructuring in the parameter list.
+This rule is **an error** by default.
+
+[View source](../src/rules/no-destructure.ts) · [View tests](../test/rules/no-destructure.test.ts)
 
 <!-- AUTO-GENERATED-CONTENT:END -->
 
@@ -26,12 +31,150 @@ let Component = (props) => <div a={props.a} />;
 
 let Component = ({ a: A }) => <div a={A} />;
 // after eslint --fix:
-let Component = (props) => <div a={props.a} />;
+let Component = (props) => <div a={props["a"]} />;
 
 let Component = ({ ["a" + ""]: a }) => <div a={a} />;
 // after eslint --fix:
 let Component = (props) => <div a={props["a" + ""]} />;
 
+let Component = ({ ["a" + ""]: a, b }) => <div a={a} b={b} />;
+// after eslint --fix:
+let Component = (props) => <div a={props["a" + ""]} b={props.b} />;
+ 
+let Component = ({ a = 5 }) => <div a={a} />;
+// after eslint --fix:
+let Component = (props) => {
+  props = mergeProps({ a: 5 }, props);
+  return <div a={props.a} />;
+};
+ 
+let Component = ({ a: A = 5 }) => <div a={A} />;
+// after eslint --fix:
+let Component = (props) => {
+  props = mergeProps({ a: 5 }, props);
+  return <div a={props.a} />;
+};
+ 
+let Component = ({ a: A = 5 }) => <div a={A} />;
+// after eslint --fix:
+let Component = (props) => {
+  props = mergeProps({ a: 5 }, props);
+  return <div a={props["a"]} />;
+};
+ 
+let Component = ({ ["a" + ""]: a = 5 }) => <div a={a} />;
+// after eslint --fix:
+let Component = (props) => {
+  props = mergeProps({ ["a" + ""]: 5 }, props);
+  return <div a={props["a" + ""]} />;
+};
+ 
+let Component = ({ ["a" + ""]: a = 5, b = 10, c }) => <div a={a} b={b} c={c} />;
+// after eslint --fix:
+let Component = (props) => {
+  props = mergeProps({ ["a" + ""]: 5, b: 10 }, props);
+  return <div a={props["a" + ""]} b={props.b} c={props.c} />;
+};
+ 
+let Component = ({ a = 5 }) => {
+  return <div a={a} />;
+};
+// after eslint --fix:
+let Component = (props) => {
+  props = mergeProps({ a: 5 }, props);
+
+  return <div a={props.a} />;
+};
+ 
+let Component = ({ a = 5 }) => {
+  various();
+  statements();
+  return <div a={a} />;
+};
+// after eslint --fix:
+let Component = (props) => {
+  props = mergeProps({ a: 5 }, props);
+
+  various();
+  statements();
+  return <div a={props.a} />;
+};
+ 
+let Component = ({ ...rest }) => <div a={rest.a} />;
+// after eslint --fix:
+let Component = (_props) => {
+  const [props, rest] = splitProps(_props, []);
+  return <div a={rest.a} />;
+};
+ 
+let Component = ({ a, ...rest }) => <div a={a} />;
+// after eslint --fix:
+let Component = (_props) => {
+  const [props, rest] = splitProps(_props, ["a"]);
+  return <div a={props.a} />;
+};
+ 
+let Component = ({ a, ...other }) => <div a={a} />;
+// after eslint --fix:
+let Component = (_props) => {
+  const [props, other] = splitProps(_props, ["a"]);
+  return <div a={props.a} />;
+};
+ 
+let Component = ({ a, ...rest }) => <div a={a} b={rest.b} />;
+// after eslint --fix:
+let Component = (_props) => {
+  const [props, rest] = splitProps(_props, ["a"]);
+  return <div a={props.a} b={rest.b} />;
+};
+ 
+let Component = ({ a: A, ...rest }) => <div a={A} />;
+// after eslint --fix:
+let Component = (_props) => {
+  const [props, rest] = splitProps(_props, ["a"]);
+  return <div a={props.a} />;
+};
+ 
+let Component = ({ a: A, ...rest }) => <div a={A} />;
+// after eslint --fix:
+let Component = (_props) => {
+  const [props, rest] = splitProps(_props, ["a"]);
+  return <div a={props["a"]} />;
+};
+ 
+let Component = ({ ["a" + ""]: A, ...rest }) => <div a={A} />;
+// after eslint --fix:
+let Component = (_props) => {
+  const [props, rest] = splitProps(_props, ["a" + ""]);
+  return <div a={props["a" + ""]} />;
+};
+ 
+let Component = ({ ["a" + ""]: A, ...rest }) => <div a={A} b={rest.b} />;
+// after eslint --fix:
+let Component = (_props) => {
+  const [props, rest] = splitProps(_props, ["a" + ""]);
+  return <div a={props["a" + ""]} b={rest.b} />;
+};
+ 
+let Component = ({ a = 5, ...rest }) => {
+  return <div a={a} b={rest.b} />;
+};
+// after eslint --fix:
+let Component = (_props) => {
+  _props = mergeProps({ a: 5 }, _props);
+  const [props, rest] = splitProps(_props, ["a"]);
+
+  return <div a={props.a} b={rest.b} />;
+};
+ 
+let Component = ({ ["a" + ""]: A = 5, ...rest }) => <div a={A} b={rest.b} />;
+// after eslint --fix:
+let Component = (_props) => {
+  _props = mergeProps({ ["a" + ""]: 5 }, _props);
+  const [props, rest] = splitProps(_props, ["a" + ""]);
+  return <div a={props["a" + ""]} b={rest.b} />;
+};
+ 
 ```
 
 ### Valid Examples
@@ -43,6 +186,10 @@ let Component = (props) => <div />;
 
 let Component = (props) => <div />;
 
+let Component = (props) => {
+  return <div />;
+};
+
 let Component = (props) => null;
 
 let Component = (props) => <div a={props.a} />;
@@ -57,7 +204,24 @@ let Component = (props) => {
   return <div a={a} />;
 };
 
-let Component = ({ a }, more, params) => <div a={a} />;
+let NotAComponent = ({ a }, more, params) => <div a={a} />;
+
+let Component = (props) => {
+  let inner = ({ a, ...rest }) => a;
+  let a = inner({ a: 5 });
+  return <div a={a} />;
+};
+
+// This one might be surprising, since we're clearly destructuring props!
+// But this will be caught as a reactive expression use outside of
+// a tracked scope, in the "solid/reactivity" rule. There's really
+// nothing wrong with destructuring props in tracked scopes when done
+// correctly, but catching it in the params covers the most common
+// cases with good DX.
+let Component = (props) => {
+  let { a } = props;
+  return <div a={a} />;
+};
 
 ```
 <!-- AUTO-GENERATED-CONTENT:END -->

src/index.ts

@@ -1,6 +1,6 @@
 import jsxNoUndef from "./rules/jsx-no-undef";
 import jsxUsesVars from "./rules/jsx-uses-vars";
-// import noDestructure from './rules/no-destructure';
+import noDestructure from "./rules/no-destructure";
 import noInnerHTML from "./rules/no-innerhtml";
 import noReactSpecificProps from "./rules/no-react-specific-props";
 import noUnknownNamespaces from "./rules/no-unknown-namespaces";
@@ -13,7 +13,7 @@ import styleProp from "./rules/style-prop";
 const allRules = {
   "jsx-no-undef": jsxNoUndef,
   "jsx-uses-vars": jsxUsesVars,
-  // 'no-destructure': noDestructure,
+  "no-destructure": noDestructure,
   "no-innerhtml": noInnerHTML,
   "no-react-specific-props": noReactSpecificProps,
   "no-unknown-namespaces": noUnknownNamespaces,
@@ -50,6 +50,8 @@ module.exports = {
         "solid/no-innerhtml": [2, { allowStatic: true }],
         "solid/prefer-for": 2,
         "solid/style-prop": 2,
+        // reactivity
+        "solid/no-destructure": 2,
         // these rules are mostly style suggestions
         "solid/no-react-specific-props": 1,
         "solid/prefer-classlist": 1,