Add rule solid/no-array-handlers

Author: HatulaPro

README.md

@@ -128,6 +128,7 @@ const [editedValue, setEditedValue] = createSignal(props.value);
 | ✔ |  | [solid/jsx-no-script-url](docs/jsx-no-script-url.md) | Disallow javascript: URLs. |
 | ✔ | 🔧 | [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-array-handlers](docs/no-array-handlers.md) | Disallow usage of unsafe event handlers. |
 | ✔ | 🔧 | [solid/no-destructure](docs/no-destructure.md) | Disallow 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-proxy-apis](docs/no-proxy-apis.md) | Disallow usage of APIs that use ES6 Proxies, only to target environments that don't support them. |

docs/no-array-handlers.md

@@ -0,0 +1,82 @@
+<!-- AUTO-GENERATED-CONTENT:START (HEADER) -->
+# solid/no-array-handlers
+Disallow usage of unsafe event handlers.
+This rule is **off** by default.
+
+[View source](../src/rules/no-array-handlers.ts) · [View tests](../test/rules/no-array-handlers.test.ts)
+
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+<!-- AUTO-GENERATED-CONTENT:START (OPTIONS) -->
+ 
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+<!-- AUTO-GENERATED-CONTENT:START (CASES) -->
+## Tests
+
+### Invalid Examples
+
+These snippets cause lint errors.
+
+```js
+let el = <button onClick={[(n) => console.log(n), "str"]} />;
+ 
+let el = <button onClick={[(k: string) => k.toUpperCase(), "hello"]} />;
+ 
+let el = <div onMouseOver={[1, 2, 3]} />;
+ 
+let el = <div on:click={[handler, i()]} />;
+ 
+let el = <button type="button" onclick={[handler, i() + 2]} class="btn" />;
+ 
+let handler = [(x) => x * 2, 54];
+let el = <button style={{ background: "pink" }} onclick={handler} />;
+ 
+const thing = (props) => (
+  <div onclick={[props.callback, props.id]}>
+    <button type="button" onclick={handler} class="btn" />
+  </div>
+);
+ 
+function Component() {
+  const arr = [(n: number) => n * n, 2];
+  return <div onClick={arr} />;
+}
+ 
+```
+
+### Valid Examples
+
+These snippets don't cause lint errors.
+
+```js
+let el = <button style={{ background: "red" }} onClick={() => 9001} />;
+
+const handler = () => 1 + 1;
+let el = <button onClick={handler} />;
+
+let el = <button onclick={() => 9001} />;
+
+const handler = () => 1 + 1;
+let el = <button style={{ background: "pink" }} onclick={handler} />;
+
+let el = <button attr:click={[(x) => x, 9001]} />;
+
+let el = <button prop:onClick={[(x) => x, 9001]} />;
+
+let el = <button on:Click={() => 1 + 1} />;
+
+function Component(props) {
+  return <div onClick={props.onClick} />;
+}
+
+<button onClick={() => [handler, "abc"]} />;
+
+<button onClick={() => [handler, { data: true }]} />;
+
+function Component() {
+  return <div onClick={[(n: number) => n * n, 2] as SafeArray<number>} />;
+}
+
+```
+<!-- AUTO-GENERATED-CONTENT:END -->

src/index.ts

@@ -17,6 +17,7 @@ import preferShow from "./rules/prefer-show";
 import reactivity from "./rules/reactivity";
 import selfClosingComp from "./rules/self-closing-comp";
 import styleProp from "./rules/style-prop";
+import noArrayHandlers from "./rules/no-array-handlers";
 // import validateJsxNesting from "./rules/validate-jsx-nesting";
 
 const allRules = {
@@ -39,6 +40,7 @@ const allRules = {
   reactivity,
   "self-closing-comp": selfClosingComp,
   "style-prop": styleProp,
+  "no-array-handlers": noArrayHandlers,
   // "validate-jsx-nesting": validateJsxNesting
 };
 
@@ -81,6 +83,7 @@ const plugin = {
         "solid/no-react-deps": 1,
         "solid/no-react-specific-props": 1,
         "solid/self-closing-comp": 1,
+        "solid/no-array-handlers": 0,
         // handled by Solid compiler, opt-in style suggestion
         "solid/prefer-show": 0,
         // only necessary for resource-constrained environments
@@ -115,6 +118,7 @@ const plugin = {
         "solid/no-react-deps": 1,
         "solid/no-react-specific-props": 1,
         "solid/self-closing-comp": 1,
+        "solid/no-array-handlers": 0,
         // namespaces taken care of by TS
         "solid/no-unknown-namespaces": 0,
         // handled by Solid compiler, opt-in style suggestion

src/rules/no-array-handlers.ts

@@ -0,0 +1,70 @@
+import { TSESTree as T, TSESLint } from "@typescript-eslint/utils";
+import { isDOMElementName, trace } from "../utils";
+
+const rule: TSESLint.RuleModule<"noArrayHandlers", []> = {
+  meta: {
+    type: "problem",
+    docs: {
+      recommended: false,
+      description: "Disallow usage of unsafe event handlers.",
+      url: "https://github.com/solidjs-community/eslint-plugin-solid/blob/main/docs/no-array-handlers.md",
+    },
+    schema: [],
+    messages: { noArrayHandlers: "Passing an array as an event handler is potentially unsafe." },
+  },
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        const openingElement = node.parent as T.JSXOpeningElement;
+        if (
+          openingElement.name.type !== "JSXIdentifier" ||
+          !isDOMElementName(openingElement.name.name)
+        ) {
+          return; // bail if this is not a DOM/SVG element or web component
+        }
+
+        if (node.name.type === "JSXNamespacedName") {
+          if (
+            node.name.namespace.name === "on" &&
+            node.value?.type === "JSXExpressionContainer" &&
+            node.value.expression.type === "ArrayExpression"
+          ) {
+            // Handling events that start with "on:"
+            context.report({
+              node,
+              messageId: "noArrayHandlers",
+            });
+          }
+          return; // bali if it's not an event namespace
+        }
+
+        // string name of the name node
+        const { name } = node.name;
+
+        if (!/^on[a-zA-Z].*$/.test(name)) {
+          return; // bail if Solid doesn't consider the prop name an event handler
+        }
+
+        if (node.value?.type === "JSXExpressionContainer") {
+          if (node.value.expression.type === "ArrayExpression") {
+            // If passed an array
+            context.report({
+              node,
+              messageId: "noArrayHandlers",
+            });
+          } else if (node.value.expression.type === "Identifier") {
+            const traced = trace(node.value.expression, context.getScope());
+            if (traced.type === "ArrayExpression") {
+              context.report({
+                node,
+                messageId: "noArrayHandlers",
+              });
+            }
+          }
+        }
+      },
+    };
+  },
+};
+
+export default rule;

test/rules/no-array-handlers.test.ts

@@ -0,0 +1,67 @@
+import { tsOnlyTest, run } from "../ruleTester";
+import rule from "../../src/rules/no-array-handlers";
+
+export const cases = run("no-array-handlers", rule, {
+  valid: [
+    `let el = <button style={{background: 'red'}} onClick={() => 9001} />`,
+    `const handler = () => 1+1;
+    let el = <button onClick={handler} />`,
+    `let el = <button onclick={() => 9001} />`,
+    `const handler = () => 1+1;
+    let el = <button style={{background: 'pink'}} onclick={handler} />`,
+    `let el = <button attr:click={[(x) => x, 9001]} />`,
+    `let el = <button prop:onClick={[(x) => x, 9001]} />`,
+    `let el = <button on:Click={() => 1+1} />`,
+    `function Component(props) {
+      return <div onClick={props.onClick} />;
+    }`,
+    `<button onClick={() => [handler, "abc"]} />`,
+    `<button onClick={() => [handler, {data:true}]} /> `,
+    {
+      code: `function Component() {
+      return <div onClick={[(n: number) => n*n, 2] as SafeArray<number>} />;
+    }`,
+      ...tsOnlyTest,
+    },
+  ],
+  invalid: [
+    {
+      code: `let el = <button onClick={[(n) => console.log(n), 'str']} />`,
+      errors: [{ messageId: "noArrayHandlers" }],
+    },
+    {
+      code: `let el = <button onClick={[(k: string) => k.toUpperCase(), 'hello']} />`,
+      errors: [{ messageId: "noArrayHandlers" }],
+      ...tsOnlyTest,
+    },
+    {
+      code: `let el = <div onMouseOver={[1,2,3]} />`,
+      errors: [{ messageId: "noArrayHandlers" }],
+    },
+    {
+      code: `let el = <div on:click={[handler, i()]} />`,
+      errors: [{ messageId: "noArrayHandlers" }],
+    },
+    {
+      code: `let el = <button type="button" onclick={[handler, i() + 2]} class="btn" />`,
+      errors: [{ messageId: "noArrayHandlers" }],
+    },
+    {
+      code: `let handler = [(x) => x*2, 54];
+      let el = <button style={{background: 'pink'}} onclick={handler} />`,
+      errors: [{ messageId: "noArrayHandlers" }],
+    },
+    {
+      code: `const thing = (props) => <div onclick={[props.callback, props.id]}><button type="button" onclick={handler} class="btn" /></div>`,
+      errors: [{ messageId: "noArrayHandlers" }],
+    },
+    {
+      code: `function Component() {
+      const arr = [(n: number) => n*n, 2];
+      return <div onClick={arr} />;
+    }`,
+      errors: [{ messageId: "noArrayHandlers" }],
+      ...tsOnlyTest,
+    },
+  ],
+});