fix: keep standalone comments with TypeScript props

Author: raisulchowdhury

lib/util/propTypesSort.js

@@ -122,6 +122,25 @@ function sorter(a, b, context, ignoreCase, requiredFirst, callbacksLast, noSortA
 
 const commentnodeMap = new WeakMap(); // all nodes reference WeakMap for start and end range
 
+/**
+ * Returns comments that belong to the preceding declaration rather than the
+ * next declaration.
+ *
+ * @param {SourceCode} sourceCode The source code object.
+ * @param {ASTNode} node The declaration node.
+ * @returns {Array} The trailing comments for the declaration.
+ */
+function getTrailingComments(sourceCode, node) {
+  const comments = sourceCode.getCommentsAfter(node);
+  const nextToken = sourceCode.getTokenAfter(node);
+
+  if (nextToken && [',', ';', '}'].includes(nextToken.value)) {
+    return comments.filter((comment) => comment.range[1] <= nextToken.range[0]);
+  }
+
+  return comments.filter((comment) => comment.loc.start.line === node.loc.end.line);
+}
+
 /**
  * Fixes sort order of prop types.
  *
@@ -161,7 +180,7 @@ function fixPropTypesSort(
       try {
         commentBefore = sourceCode.getCommentsBefore(node)
           .filter((comment) => !trailingCommentRanges.has(comment.range.join(':')));
-        commentAfter = sourceCode.getCommentsAfter(node);
+        commentAfter = getTrailingComments(sourceCode, node);
         commentAfter.forEach((comment) => trailingCommentRanges.add(comment.range.join(':')));
       } catch (e) { /**/ }
 
@@ -213,7 +232,7 @@ function fixPropTypesSort(
             sortedAttrTextStart = sortedAttr.range[0];
           }
         }
-        const trailingComment = sourceCode.getCommentsAfter(sortedAttr)[0];
+        const trailingComment = getTrailingComments(sourceCode, sortedAttr)[0];
         const separatorIndex = trailingComment ? trailingComment.range[0] - sortedAttrTextStart : sortedAttrText.length;
         const sortedAttrTextLastChar = sortedAttrText.slice(0, separatorIndex).trim().slice(-1);
         if (!separator && [';', ','].some((allowedSep) => sortedAttrTextLastChar === allowedSep)) {

tests/lib/rules/sort-prop-types.js

@@ -2346,6 +2346,105 @@ ruleTester.run('sort-prop-types', rule, {
         },
       ],
     },
+    {
+      code: `
+        type Props = {
+          onClose: () => void;
+          // identifies the dialog
+          id: string;
+        };
+        function Dialog(props: Props) {
+          return <div />;
+        }
+      `,
+      output: `
+        type Props = {
+          // identifies the dialog
+          id: string;
+          onClose: () => void;
+        };
+        function Dialog(props: Props) {
+          return <div />;
+        }
+      `,
+      parser: parsers.TYPESCRIPT_ESLINT,
+      options: [{
+        callbacksLast: true,
+        noSortAlphabetically: true,
+        checkTypes: true,
+      }],
+      errors: [
+        {
+          messageId: 'callbackPropsLast',
+        },
+      ],
+    },
+    {
+      code: `
+        type Props = {
+          onClose: () => void; // closes the dialog
+          // identifies the dialog
+          id: string;
+        };
+        function Dialog(props: Props) {
+          return <div />;
+        }
+      `,
+      output: `
+        type Props = {
+          // identifies the dialog
+          id: string;
+          onClose: () => void; // closes the dialog
+        };
+        function Dialog(props: Props) {
+          return <div />;
+        }
+      `,
+      parser: parsers.TYPESCRIPT_ESLINT,
+      options: [{
+        callbacksLast: true,
+        noSortAlphabetically: true,
+        checkTypes: true,
+      }],
+      errors: [
+        {
+          messageId: 'callbackPropsLast',
+        },
+      ],
+    },
+    {
+      code: `
+        type Props = {
+          onClose: () => void; /* closes the dialog */
+          /* identifies the dialog */
+          id: string;
+        };
+        function Dialog(props: Props) {
+          return <div />;
+        }
+      `,
+      output: `
+        type Props = {
+          /* identifies the dialog */
+          id: string;
+          onClose: () => void; /* closes the dialog */
+        };
+        function Dialog(props: Props) {
+          return <div />;
+        }
+      `,
+      parser: parsers.TYPESCRIPT_ESLINT,
+      options: [{
+        callbacksLast: true,
+        noSortAlphabetically: true,
+        checkTypes: true,
+      }],
+      errors: [
+        {
+          messageId: 'callbackPropsLast',
+        },
+      ],
+    },
     {
       code: `
         type Props = {