chore: custom ESLint rule to disable sorting for ref attribute to keep it as last property in JSX to ensure it is up-to-date

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

@@ -0,0 +1,52 @@
+import { Rule } from "eslint";
+import type { JSXAttribute, JSXSpreadAttribute, JSXOpeningElement } from "@babel/types";
+
+const rule: Rule.RuleModule = {
+  meta: {
+    docs: {
+      description: "Ensure that the ref attribute is placed as the last property in JSX elements to keep it up-to-date",
+      category: "Best Practices",
+      recommended: true,
+    },
+    fixable: "code",
+    schema: [],
+    type: "problem",
+  },
+
+  // https://unpkg.com/browse/@babel/[email protected]/lib/index.d.ts
+  // export interface JSXAttribute extends BaseNode {
+  //   type: "JSXAttribute";
+  //   name: JSXIdentifier | JSXNamespacedName;
+  //   value: JSXElement | JSXFragment | StringLiteral | JSXExpressionContainer | null;
+  // }
+
+  create(context): Rule.RuleListener {
+    return {
+      JSXIdentifier(node) {
+        const openingElement = node.parent as JSXOpeningElement;
+        if (openingElement.type === "JSXOpeningElement") {
+          const attributes: string[] = [];
+
+          openingElement.attributes.forEach((attr: JSXAttribute | JSXSpreadAttribute) => {
+            if (attr.type === "JSXAttribute" && attr.name?.type === "JSXIdentifier") {
+              attributes.push(attr.name.name);
+            }
+          });
+
+          const refAttribute = attributes.find((attr: string) => attr === "ref");
+
+          console.log("refAttribute", refAttribute);
+
+          if (refAttribute && attributes.indexOf(refAttribute) !== attributes.length - 1) {
+            context.report({
+              node,
+              message: `The "ref" attribute should be placed as the last property in JSX elements.`,
+            });
+          }
+        }
+      },
+    };
+  },
+};
+
+export default rule;

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

@@ -0,0 +1,22 @@
+// @ts-nocheck
+@Component({ tag: "sample-tag" })
+export class SampleTag {
+  render() {
+    return (
+      <Host>
+        <div
+          class="some-class"
+          id={`${guid}-element`}
+          onClick={() => {
+            /* click! */
+          }}
+          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

@@ -0,0 +1,29 @@
+import rule from "../../../../src/rules/enforce-ref-last-prop";
+import { ruleTester } from "stencil-eslint-core";
+import * as path from "path";
+import * as fs from "fs";
+
+const projectPath = path.resolve(__dirname, "../../../tsconfig.json");
+
+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"),
+  };
+  ruleTester(projectPath).run("enforce-ref-last-prop", rule, {
+    valid: [
+      {
+        code: fs.readFileSync(files.good, "utf8"),
+        filename: files.good,
+      },
+    ],
+
+    invalid: [
+      {
+        code: fs.readFileSync(files.wrong, "utf8"),
+        filename: files.wrong,
+        errors: 1,
+      },
+    ],
+  });
+});

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

@@ -0,0 +1,22 @@
+// @ts-nocheck
+@Component({ tag: "sample-tag" })
+export class SampleTag {
+  render() {
+    return (
+      <Host>
+        <div
+          ref={(el: HTMLDivElement): void => {
+            /* refEl */
+          }}
+          class="some-class"
+          id={`${guid}-element`}
+          onClick={() => {
+            /* click! */
+          }}
+        >
+          test
+        </div>
+      </Host>
+    );
+  }
+}