feat(enforce-ref-last-prop): add fixer

packages/calcite-components/src/components/button/button.e2e.ts

@@ -648,8 +648,7 @@ describe("calcite-button", () => {
     t9n("calcite-button");
   });
 
-  describe('automatic tooltip', ()=>{
-
+  describe("automatic tooltip", () => {
     it("shows tooltip for buttons with truncated long text", async () => {
       const shortText = "Hi!";
       const longText =
@@ -685,7 +684,6 @@ describe("calcite-button", () => {
 
       expect(button).not.toHaveAttribute("title");
     });
-
   });
 
   it("should set aria-expanded attribute on shadowDOM element when used as trigger", async () => {

packages/eslint-plugin-calcite-components/src/rules/enforce-ref-last-prop.ts

@@ -17,20 +17,47 @@ const rule: Rule.RuleModule = {
       JSXIdentifier(node) {
         const openingElement = node.parent as JSXOpeningElement;
         if (openingElement.type === "JSXOpeningElement") {
-          const attributes: string[] = [];
+          const attributes: (JSXAttribute | JSXSpreadAttribute)[] = [];
 
           openingElement.attributes.forEach((attr: JSXAttribute | JSXSpreadAttribute) => {
             if (attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier") {
-              attributes.push(attr.name.name);
+              attributes.push(attr);
             }
           });
 
-          const refAttribute = attributes.find((attr: string) => attr === "ref");
+          const refAttribute = attributes.find(
+            (attr: JSXAttribute | JSXSpreadAttribute) =>
+              attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier" && attr.name.name === "ref",
+          );
 
           if (refAttribute && attributes.indexOf(refAttribute) !== attributes.length - 1) {
             context.report({
               node,
               message: `"ref" prop should be placed last in JSX to ensure the node attrs/props are in sync.`,
+              fix(fixer) {
+                const sourceCode = context.getSourceCode();
+                const eslintDisableComments = sourceCode
+                  .getCommentsBefore(refAttribute as typeof node)
+                  .filter((comment) => comment.value.includes("eslint-disable-next-line"));
+
+                const refAttrText = sourceCode.getText(refAttribute as typeof node);
+                const otherAttrs = attributes.filter((attr) => attr !== refAttribute);
+
+                const lastLine = sourceCode.lines[sourceCode.lines.length - 1];
+                const indentation = lastLine.match(/^(\s*)/)[0];
+
+                const fixerActions = [
+                  fixer.remove(refAttribute as typeof node),
+                  fixer.insertTextAfterRange(
+                    [otherAttrs[otherAttrs.length - 1].range[1], otherAttrs[otherAttrs.length - 1].range[1]],
+                    `\n${indentation}// eslint-disable-next-line react/jsx-sort-props -- auto-generated by enforce-ref-last-prop rule\n${refAttrText}`,
+                  ),
+                ];
+
+                return eslintDisableComments.length
+                  ? [...eslintDisableComments.map((comment) => fixer.remove(comment as typeof node)), ...fixerActions]
+                  : fixerActions;
+              },
             });
           }
         }

packages/eslint-plugin-calcite-components/tests/lib/rules/enforce-ref-last-prop/enforce-ref-last-prop.good.tsx

@@ -11,6 +11,7 @@ export class SampleTag {
             /* click! */
           }}
           tabIndex={0}
+          // eslint-disable-next-line react/jsx-sort-props -- ref node is placed last per enforce-ref-last-prop rule
           ref={(el: HTMLDivElement): void => {
             /* refEl */
           }}

packages/eslint-plugin-calcite-components/tests/lib/rules/enforce-ref-last-prop/enforce-ref-last-prop.output.tsx

@@ -0,0 +1,24 @@
+// @ts-nocheck
+@Component({ tag: "sample-tag" })
+export class SampleTag {
+  render() {
+    return (
+      <Host>
+        <div
+          class="some-class"
+          id={`${guid}-element`}
+          onClick={() => {
+            /* click! */
+          }}
+          tabIndex={0}
+          // eslint-disable-next-line react/jsx-sort-props -- ref node is placed last per enforce-ref-last-prop rule)
+          ref={(el: HTMLDivElement): void => {
+            /* refEl */
+          }}
+        >
+          test
+        </div>
+      </Host>
+    );
+  }
+}

packages/eslint-plugin-calcite-components/tests/lib/rules/enforce-ref-last-prop/enforce-ref-last-prop.spec.ts

@@ -9,6 +9,7 @@ describe("enforce-ref-last-prop rule", () => {
   const files = {
     good: path.resolve(__dirname, "enforce-ref-last-prop.good.tsx"),
     wrong: path.resolve(__dirname, "enforce-ref-last-prop.wrong.tsx"),
+    output: path.resolve(__dirname, "enforce-ref-last-prop.output.tsx"),
   };
   ruleTester(projectPath).run("enforce-ref-last-prop", rule, {
     valid: [
@@ -23,6 +24,7 @@ describe("enforce-ref-last-prop rule", () => {
         code: fs.readFileSync(files.wrong, "utf8"),
         filename: files.wrong,
         errors: 1,
+        output: fs.readFileSync(files.output, "utf8"),
       },
     ],
   });