Fix sort-prop-types trailing comments

Author: raisulchowdhury

lib/util/propTypesSort.js

@@ -150,15 +150,19 @@ function fixPropTypesSort(
   function sortInSource(allNodes, source) {
     const originalSource = source;
     const sourceCode = getSourceCode(context);
+    const trailingCommentRanges = new Set();
+
     for (let i = 0; i < allNodes.length; i++) {
       const node = allNodes[i];
       let commentAfter = [];
       let commentBefore = [];
       let newStart = 0;
       let newEnd = 0;
       try {
-        commentBefore = sourceCode.getCommentsBefore(node);
+        commentBefore = sourceCode.getCommentsBefore(node)
+          .filter((comment) => !trailingCommentRanges.has(comment.range.join(':')));
         commentAfter = sourceCode.getCommentsAfter(node);
+        commentAfter.forEach((comment) => trailingCommentRanges.add(comment.range.join(':')));
       } catch (e) { /**/ }
 
       if (commentAfter.length === 0 || commentBefore.length === 0) {
@@ -197,10 +201,7 @@ function fixPropTypesSort(
         const sortedAttr = sortedAttributes[index];
         const commentNode = commentnodeMap.get(sortedAttr);
         let sortedAttrText = sourceCodeText.slice(commentNode.start, commentNode.end);
-        const sortedAttrTextLastChar = sortedAttrText[sortedAttrText.length - 1];
-        if (!separator && [';', ','].some((allowedSep) => sortedAttrTextLastChar === allowedSep)) {
-          separator = sortedAttrTextLastChar;
-        }
+        let sortedAttrTextStart = commentNode.start;
         if (sortShapeProp && isShapeProp(sortedAttr.value)) {
           const shape = getShapeProperties(sortedAttr.value);
           if (shape) {
@@ -209,9 +210,20 @@ function fixPropTypesSort(
               originalSource
             );
             sortedAttrText = attrSource.slice(sortedAttr.range[0], sortedAttr.range[1]);
+            sortedAttrTextStart = sortedAttr.range[0];
           }
         }
-        const sortedAttrTextVal = checkTypes && !sortedAttrText.endsWith(separator) ? `${sortedAttrText}${separator}` : sortedAttrText;
+        const trailingComment = sourceCode.getCommentsAfter(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)) {
+          separator = sortedAttrTextLastChar;
+        }
+        const hasSeparator = sortedAttrText.slice(0, separatorIndex).trim().endsWith(separator);
+        const needsSeparator = checkTypes && separator && !hasSeparator;
+        const sortedAttrTextVal = needsSeparator
+          ? `${sortedAttrText.slice(0, separatorIndex)}${separator}${sortedAttrText.slice(separatorIndex)}`
+          : sortedAttrText;
         return `${acc.slice(0, commentnodeMap.get(attr).start)}${sortedAttrTextVal}${acc.slice(commentnodeMap.get(attr).end)}`;
       }, source);
     });

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

@@ -2313,6 +2313,84 @@ ruleTester.run('sort-prop-types', rule, {
         },
       ],
     },
+    {
+      code: `
+        type Props = {
+          onClose: () => void; // closes the dialog
+          onSave?: () => void; // saves the dialog
+          id: string; // identifies the dialog
+        };
+        function Dialog(props: Props) {
+          return <div />;
+        }
+      `,
+      output: `
+        type Props = {
+          id: string; // identifies the dialog
+          onClose: () => void; // closes the dialog
+          onSave?: () => void; // saves 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;
+          onSave?: () => void;
+          initialContractInfo?: ContractInfo; // used to pre-populate the form just for our tests
+          contractVersionTraceId?: TraceId; // used when editing an existing contract
+          contractContainerId: TraceId;
+          wizardStartIndex?: number;
+          contractStatus?: BackendContractStatus;
+          contractVersion?: BackendContractVersion;
+        };
+        function ContractVersionWizard(props: Props) {
+          return <div />;
+        }
+      `,
+      output: `
+        type Props = {
+          initialContractInfo?: ContractInfo; // used to pre-populate the form just for our tests
+          contractVersionTraceId?: TraceId; // used when editing an existing contract
+          contractContainerId: TraceId;
+          wizardStartIndex?: number;
+          contractStatus?: BackendContractStatus;
+          contractVersion?: BackendContractVersion;
+          onClose: () => void;
+          onSave?: () => void;
+        };
+        function ContractVersionWizard(props: Props) {
+          return <div />;
+        }
+      `,
+      parser: parsers.TYPESCRIPT_ESLINT,
+      options: [{
+        callbacksLast: true,
+        requiredFirst: true,
+        sortShapeProp: true,
+        noSortAlphabetically: true,
+        checkTypes: true,
+      }],
+      errors: [
+        {
+          messageId: 'callbackPropsLast',
+        },
+      ],
+    },
     {
       code: `
         type Props = {