Merge pull request #64 from solidjs-community/fix/destructure-type

Keep type annotations when autofixing destructured props

Author: joshwilsonvu

docs/no-destructure.md

@@ -199,6 +199,10 @@ let Component = (_props) => {
   return <div a={props["a" + ""]} b={rest.b} />;
 };
 
+let Component = ({ prop1, prop2 }: Props) => <div p1={prop1} p2={prop2} />;
+// after eslint --fix:
+let Component = (props: Props) => <div p1={props.prop1} p2={props.prop2} />;
+ 
 ```
 
 ### Valid Examples
@@ -251,5 +255,7 @@ let Component = (props) => {
 
 let element = <div />;
 
+let Component = (props: Props) => <div />;
+
 ```
 <!-- AUTO-GENERATED-CONTENT:END -->

src/rules/no-destructure.ts

@@ -126,7 +126,13 @@ const rule: TSESLint.RuleModule<"noDestructure", []> = {
 
       // Replace destructured props with a `props` identifier (`_props` in case of rest params/defaults)
       const origProps = !(hasDefaults || rest) ? propsName : "_" + propsName;
-      fixes.push(fixer.replaceText(props, origProps));
+      if (props.typeAnnotation) {
+        // in `{ prop1, prop2 }: Props`, leave `: Props` alone
+        const range = [props.range[0], props.typeAnnotation.range[0]] as const;
+        fixes.push(fixer.replaceTextRange(range, origProps));
+      } else {
+        fixes.push(fixer.replaceText(props, origProps));
+      }
 
       const sourceCode = context.getSourceCode();
 

test/ruleTester.ts

@@ -20,8 +20,8 @@ const jsxTester = new RuleTester({
   },
 });
 
-// TypeScript's ESLint parser
-const tsTester = new RuleTester({
+// spread ...tsOnlyTest into a test case to enforce it always runs with the TS parser
+export const tsOnlyTest: Pick<TSESLint.RuleTesterConfig, "parser" | "parserOptions"> = {
   parser: require.resolve("@typescript-eslint/parser"),
   parserOptions: {
     ecmaVersion: 2018,
@@ -30,7 +30,11 @@ const tsTester = new RuleTester({
       jsx: true,
     },
   },
-});
+};
+
+// TypeScript's ESLint parser
+const tsTester = new RuleTester(tsOnlyTest);
+
 // Babel's ESLint parser
 const babelTester = new RuleTester({
   parser: require.resolve("@babel/eslint-parser"),

test/rules/imports.test.ts

@@ -1,4 +1,4 @@
-import { run } from "../ruleTester";
+import { run, tsOnlyTest } from "../ruleTester";
 import rule from "../../src/rules/imports";
 
 export const cases = run("imports", rule, {
@@ -15,7 +15,7 @@ export const cases = run("imports", rule, {
     {
       code: `import type { Component, JSX } from "solid-js";
 import type { Store } from "solid-js/store";`,
-      parser: require.resolve("@typescript-eslint/parser"),
+      ...tsOnlyTest,
     },
   ],
   invalid: [
@@ -56,7 +56,7 @@ console.log('hi');`,
       output: `
 import { createSignal, Component } from "solid-js";
 console.log('hi');`,
-      parser: require.resolve("@typescript-eslint/parser"),
+      ...tsOnlyTest,
     },
     {
       code: `import { createSignal } from "solid-js/web";

test/rules/no-destructure.test.ts

@@ -1,4 +1,4 @@
-import { run } from "../ruleTester";
+import { run, tsOnlyTest } from "../ruleTester";
 import rule from "../../src/rules/no-destructure";
 
 export const cases = run("no-destructure", rule, {
@@ -35,6 +35,10 @@ export const cases = run("no-destructure", rule, {
       return <div a={a} />;
     }`,
     `let element = <div />`, // parse top level JSX
+    {
+      code: `let Component = (props: Props) => <div />;`,
+      ...tsOnlyTest,
+    },
   ],
   invalid: [
     {
@@ -240,5 +244,11 @@ various();
   const [props, rest] = splitProps(mergeProps({ ['a' + '']: 5 }, _props), ['a' + '']);  return (<div a={props['a' + '']} b={rest.b} />);
 }`,
     },
+    {
+      code: `let Component = ({ prop1, prop2 }: Props) => <div p1={prop1} p2={prop2} />;`,
+      errors: [{ messageId: "noDestructure" }],
+      output: `let Component = (props: Props) => <div p1={props.prop1} p2={props.prop2} />;`,
+      ...tsOnlyTest,
+    },
   ],
 });