eslint-plugin-crisp 1.7.14 → 1.7.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-crisp",
-  "version": "1.7.14",
+  "version": "1.7.16",
   "description": "Custom ESLint Rules for Crisp",
   "author": "Crisp IM SAS",
   "main": "index.js",

package/rules/vue-event-listener-section.js

@@ -1,5 +1,6 @@
 const EVENT_LISTENERS_SEPARATOR = "--> EVENT LISTENERS <--";
 const EVENT_LISTENER_NAME_PATTERN = /^on[A-Z]/;
+const SEPARATOR_LIKE_PATTERN = /^--> .+ <--$/;
 
 export default {
   meta: {
@@ -10,7 +11,7 @@ export default {
       category: "Stylistic Issues",
       recommended: false
     },
-    fixable: null,
+    fixable: "code",
     schema: [],
     messages: {
       wrongSection:
@@ -21,6 +22,13 @@ export default {
   create(context) {
     const sourceCode = context.sourceCode;
 
+    function getLineStart(node) {
+      return sourceCode.getIndexFromLoc({
+        line: node.loc.start.line,
+        column: 0
+      });
+    }
+
     function getPropertyName(property) {
       if (property.type !== "Property" || property.computed) {
         return null;
@@ -40,6 +48,188 @@ export default {
       return null;
     }
 
+    function getTopLevelComments(node, properties) {
+      return sourceCode.getCommentsInside(node.value).filter((comment) => {
+        return !properties.some((property) => {
+          return (
+            comment.range[0] >= property.range[0] &&
+            comment.range[1] <= property.range[1]
+          );
+        });
+      });
+    }
+
+    function getMethodBlock(node, property) {
+      const comments = sourceCode.getCommentsBefore(property);
+      const lastSeparatorIndex = comments.findLastIndex((comment) => {
+        return (
+          comment.type === "Line" &&
+          SEPARATOR_LIKE_PATTERN.test(comment.value.trim())
+        );
+      });
+      const ownedComments = comments.slice(lastSeparatorIndex + 1);
+      const firstNode = ownedComments[0] || property;
+      const start = getLineStart(firstNode);
+      const linePrefix = sourceCode.text.slice(start, firstNode.range[0]);
+
+      if (linePrefix.trim() !== "") {
+        return null;
+      }
+
+      const tokenAfter = sourceCode.getTokenAfter(property);
+      const comma = (
+        tokenAfter?.value === "," &&
+        tokenAfter.range[0] < node.value.range[1]
+      )
+        ? tokenAfter
+        : null;
+      const propertyEnd = comma?.range[1] || property.range[1];
+      const remainingText = sourceCode.text.slice(
+        propertyEnd,
+        node.value.range[1] - 1
+      );
+      const nextContentMatch = remainingText.match(/\S/);
+      let removalEnd = propertyEnd;
+
+      if (nextContentMatch) {
+        const nextContent = propertyEnd + nextContentMatch.index;
+        const nextContentLocation = sourceCode.getLocFromIndex(nextContent);
+
+        if (nextContentLocation.line > property.loc.end.line) {
+          removalEnd = sourceCode.getIndexFromLoc({
+            line: nextContentLocation.line,
+            column: 0
+          });
+        }
+      }
+
+      return {
+        start,
+        end: removalEnd,
+        text: sourceCode.text.slice(start, property.range[1]).trimEnd()
+      };
+    }
+
+    function createMoveFix(node, properties, violations) {
+      const topLevelComments = getTopLevelComments(node, properties);
+      const eventSeparators = topLevelComments.filter((comment) => {
+        return (
+          comment.type === "Line" &&
+          comment.value.trim() === EVENT_LISTENERS_SEPARATOR
+        );
+      });
+
+      if (eventSeparators.length > 1) {
+        return null;
+      }
+
+      const eventSeparator = eventSeparators[0] || null;
+      const hasSectionAfterEvent = eventSeparator && topLevelComments.some(
+        (comment) => {
+          return (
+            comment.range[0] > eventSeparator.range[1] &&
+            comment.type === "Line" &&
+            SEPARATOR_LIKE_PATTERN.test(comment.value.trim())
+          );
+        }
+      );
+
+      if (hasSectionAfterEvent) {
+        return null;
+      }
+
+      const lastProperty = properties.at(-1);
+      const trailingComments = topLevelComments.filter((comment) => {
+        return comment.range[0] > lastProperty.range[1];
+      });
+      const hasUnsafeTrailingComment = trailingComments.some((comment) => {
+        return comment !== eventSeparator;
+      });
+
+      if (hasUnsafeTrailingComment) {
+        return null;
+      }
+
+      const methodBlocks = violations.map(({ property }) => {
+        return getMethodBlock(node, property);
+      });
+
+      if (methodBlocks.some((block) => block === null)) {
+        return null;
+      }
+
+      const movedProperties = new Set(
+        violations.map(({ property }) => property)
+      );
+      const remainingProperties = properties.filter((property) => {
+        return !movedProperties.has(property);
+      });
+      const interiorStart = node.value.range[0] + 1;
+      const interiorEnd = node.value.range[1] - 1;
+      const interiorText = sourceCode.text.slice(interiorStart, interiorEnd);
+      const suffixMatch = interiorText.match(/\s*$/);
+      const suffix = suffixMatch?.[0] || "";
+      const edits = methodBlocks.map((block) => {
+        return {
+          start: block.start - interiorStart,
+          end: block.end - interiorStart,
+          text: ""
+        };
+      });
+
+      if (remainingProperties.length > 0) {
+        const lastRemainingProperty = remainingProperties.at(-1);
+        const tokenAfter = sourceCode.getTokenAfter(lastRemainingProperty);
+        const hasComma = (
+          tokenAfter?.value === "," &&
+          tokenAfter.range[0] < interiorEnd
+        );
+
+        if (!hasComma) {
+          const propertyEnd = lastRemainingProperty.range[1] - interiorStart;
+
+          edits.push({
+            start: propertyEnd,
+            end: propertyEnd,
+            text: ","
+          });
+        }
+      }
+
+      const transformedText = [...edits]
+        .sort((first, second) => {
+          return second.start - first.start || second.end - first.end;
+        })
+        .reduce((text, edit) => {
+          return (
+            text.slice(0, edit.start) +
+            edit.text +
+            text.slice(edit.end)
+          );
+        }, interiorText)
+        .trimEnd();
+      const movedText = methodBlocks
+        .map((block) => block.text)
+        .join(",\n\n");
+      const methodIndent = movedText.match(/^[\t ]*/)?.[0] || "";
+      const sectionText = eventSeparator
+        ? movedText
+        : (
+          `${methodIndent}// ${EVENT_LISTENERS_SEPARATOR}\n\n` +
+          movedText
+        );
+      const fixedInterior = transformedText === ""
+        ? `\n${sectionText}${suffix}`
+        : `${transformedText}\n\n${sectionText}${suffix}`;
+
+      return (fixer) => {
+        return fixer.replaceTextRange(
+          [interiorStart, interiorEnd],
+          fixedInterior
+        );
+      };
+    }
+
     function checkMethods(node) {
       const properties = node.value.properties;
 
@@ -48,6 +238,7 @@ export default {
       }
 
       let eventListenersStarted = false;
+      const violations = [];
 
       properties.forEach((property) => {
         const comments = sourceCode.getCommentsBefore(property);
@@ -68,13 +259,25 @@ export default {
         const name = getPropertyName(property);
 
         if (name && EVENT_LISTENER_NAME_PATTERN.test(name)) {
-          context.report({
-            node: property.key,
-            messageId: "wrongSection",
-            data: { name }
+          violations.push({
+            property,
+            name
           });
         }
       });
+
+      const moveFix = violations.length > 0
+        ? createMoveFix(node, properties, violations)
+        : null;
+
+      violations.forEach(({ property, name }, index) => {
+        context.report({
+          node: property.key,
+          messageId: "wrongSection",
+          data: { name },
+          ...(index === 0 && moveFix ? { fix: moveFix } : {})
+        });
+      });
     }
 
     return {

package/rules/vue-methods-separator.js

@@ -30,6 +30,8 @@ export default {
         "Methods block must contain at least one separator comment: " +
         "'// --> ACTIONS <--', '// --> HELPERS <--', " +
         "or '// --> EVENT LISTENERS <--'.",
+      missingSeparatorSpacing:
+        "Methods separator comments must be followed by a blank line.",
       unorderedSeparator:
         "Methods separator comments must be ordered: '// --> ACTIONS <--', " +
         "then '// --> HELPERS <--', then '// --> EVENT LISTENERS <--'."
@@ -147,6 +149,75 @@ export default {
       };
     }
 
+    function checkSeparatorSpacing(comment, comments, properties) {
+      const nextSeparator = comments.find((candidate) => {
+        return (
+          candidate.range[0] > comment.range[1] &&
+          candidate.type === "Line" &&
+          SEPARATOR_LIKE_PATTERN.test(candidate.value.trim())
+        );
+      });
+      const firstProperty = properties.find((property) => {
+        return (
+          property.range[0] > comment.range[1] &&
+          (!nextSeparator || property.range[0] < nextSeparator.range[0])
+        );
+      });
+
+      if (!firstProperty) {
+        return;
+      }
+
+      const firstLeadingComment = sourceCode
+        .getCommentsBefore(firstProperty)
+        .find((candidate) => {
+          return (
+            candidate.range[0] > comment.range[1] &&
+            (!nextSeparator || candidate.range[0] < nextSeparator.range[0])
+          );
+        });
+      const firstNode = firstLeadingComment || firstProperty;
+
+      if (firstNode.loc.start.line > comment.loc.end.line + 1) {
+        return;
+      }
+
+      const spacingFix = (fixer) => {
+        const lineStart = sourceCode.getIndexFromLoc({
+          line: firstNode.loc.start.line,
+          column: 0
+        });
+        const indentation = sourceCode.text.slice(
+          lineStart,
+          firstNode.range[0]
+        );
+        const currentSpacing = sourceCode.text.slice(
+          comment.range[1],
+          firstNode.range[0]
+        );
+
+        if (
+          indentation.trim() !== "" ||
+          currentSpacing.trim() !== ""
+        ) {
+          return null;
+        }
+
+        const linebreak = currentSpacing.includes("\r\n") ? "\r\n" : "\n";
+
+        return fixer.replaceTextRange(
+          [comment.range[1], firstNode.range[0]],
+          `${linebreak}${linebreak}${indentation}`
+        );
+      };
+
+      context.report({
+        node: comment,
+        messageId: "missingSeparatorSpacing",
+        fix: spacingFix
+      });
+    }
+
     function checkMethods(node) {
       const properties = node.value.properties;
 
@@ -171,11 +242,21 @@ export default {
       let hasInvalidSeparator = false;
 
       comments.forEach((comment) => {
+        const separator = comment.value.trim();
+
         if (comment.type !== "Line") {
+          if (SEPARATOR_LIKE_PATTERN.test(separator)) {
+            hasInvalidSeparator = true;
+
+            context.report({
+              node: comment,
+              messageId: "invalidSeparator"
+            });
+          }
+
           return;
         }
 
-        const separator = comment.value.trim();
         const separatorOrder = SEPARATOR_ORDER.get(separator);
 
         if (separatorOrder === undefined) {
@@ -212,6 +293,17 @@ export default {
         });
       });
 
+      comments
+        .filter((comment) => {
+          return (
+            comment.type === "Line" &&
+            SEPARATOR_ORDER.has(comment.value.trim())
+          );
+        })
+        .forEach((comment) => {
+          checkSeparatorSpacing(comment, comments, properties);
+        });
+
       let lastSeparatorOrder = -1;
       const unorderedEntries = separatorEntries.filter((entry) => {
         if (entry.order < lastSeparatorOrder) {

package/tests/rules/vue-event-listener-section.test.js

@@ -72,6 +72,34 @@ ruleTester.run("vue-event-listener-section", rule, {
         export default {
           methods: {
             // --> ACTIONS <--
+
+            /**
+             * Saves content
+             */
+            save() {},
+
+            /**
+             * Triggers on save
+             */
+            onSave() {}
+          }
+        };
+      `,
+      output: `
+        export default {
+          methods: {
+            // --> ACTIONS <--
+
+            /**
+             * Saves content
+             */
+            save() {},
+
+            // --> EVENT LISTENERS <--
+
+            /**
+             * Triggers on save
+             */
             onSave() {}
           }
         };
@@ -88,6 +116,22 @@ ruleTester.run("vue-event-listener-section", rule, {
         export default {
           methods: {
             // --> HELPERS <--
+
+            format() {},
+
+            onLoadMore() {}
+          }
+        };
+      `,
+      output: `
+        export default {
+          methods: {
+            // --> HELPERS <--
+
+            format() {},
+
+            // --> EVENT LISTENERS <--
+
             onLoadMore() {}
           }
         };
@@ -107,6 +151,15 @@ ruleTester.run("vue-event-listener-section", rule, {
           }
         };
       `,
+      output: `
+        export default {
+          methods: {
+            // --> EVENT LISTENERS <--
+
+            "onClose": function() {}
+          }
+        };
+      `,
       errors: [
         {
           messageId: "wrongSection",
@@ -121,15 +174,45 @@ ruleTester.run("vue-event-listener-section", rule, {
         export default defineComponent({
           methods: {
             // --> ACTIONS <--
+
+            save() {},
+
             onSave() {},
             // --> HELPERS <--
+
+            format() {},
+
             onFormatComplete() {},
             // --> EVENT LISTENERS <--
+
             onClose() {}
           }
         });
         </script>
       `,
+      output: `
+        <script>
+        export default defineComponent({
+          methods: {
+            // --> ACTIONS <--
+
+            save() {},
+
+            // --> HELPERS <--
+
+            format() {},
+
+            // --> EVENT LISTENERS <--
+
+            onClose() {},
+
+            onSave() {},
+
+            onFormatComplete() {}
+          }
+        });
+        </script>
+      `,
       errors: [
         {
           messageId: "wrongSection",

package/tests/rules/vue-methods-separator.test.js

@@ -13,6 +13,7 @@ ruleTester.run("vue-methods-separator", rule, {
         export default {
           methods: {
             // --> ACTIONS <--
+
             save() {}
           }
         };
@@ -23,6 +24,7 @@ ruleTester.run("vue-methods-separator", rule, {
         export default {
           methods: {
             // --> HELPERS <--
+
             format() {}
           }
         };
@@ -33,6 +35,7 @@ ruleTester.run("vue-methods-separator", rule, {
         export default {
           methods: {
             // --> EVENT LISTENERS <--
+
             onSave() {}
           }
         };
@@ -43,8 +46,10 @@ ruleTester.run("vue-methods-separator", rule, {
         export default {
           methods: {
             // --> ACTIONS <--
+
             save() {},
             // --> EVENT LISTENERS <--
+
             onSave() {}
           }
         };
@@ -55,10 +60,13 @@ ruleTester.run("vue-methods-separator", rule, {
         export default defineComponent({
           methods: {
             // --> ACTIONS <--
+
             save() {},
             // --> HELPERS <--
+
             format() {},
             // --> EVENT LISTENERS <--
+
             onSave() {}
           }
         });
@@ -80,6 +88,7 @@ ruleTester.run("vue-methods-separator", rule, {
         export default {
           methods: {
             // --> ACTIONS <--
+
             save() {
               // --> EVENT LISTENERS <--
               const status = "saved";
@@ -87,6 +96,7 @@ ruleTester.run("vue-methods-separator", rule, {
               return status;
             },
             // --> HELPERS <--
+
             format() {}
           }
         };
@@ -100,10 +110,13 @@ ruleTester.run("vue-methods-separator", rule, {
         export default defineComponent({
           methods: {
             // --> ACTIONS <--
+
             save() {},
             // --> HELPERS <--
+
             format() {},
             // --> EVENT LISTENERS <--
+
             onSave() {}
           }
         });
@@ -121,11 +134,42 @@ ruleTester.run("vue-methods-separator", rule, {
         }
       ]
     },
+    {
+      code: `
+        export default {
+          methods: {
+            // --> ACTIONS <--
+            /**
+             * Saves content
+             */
+            save() {}
+          }
+        };
+      `,
+      output: `
+        export default {
+          methods: {
+            // --> ACTIONS <--
+
+            /**
+             * Saves content
+             */
+            save() {}
+          }
+        };
+      `,
+      errors: [
+        {
+          messageId: "missingSeparatorSpacing"
+        }
+      ]
+    },
     {
       code: `
         export default {
           methods: {
             // --> HELPERS <--
+
             help() {},
             // --> OTHER <--
             run() {}
@@ -138,13 +182,33 @@ ruleTester.run("vue-methods-separator", rule, {
         }
       ]
     },
+    {
+      code: `
+        export default {
+          methods: {
+            // --> ACTIONS <--
+
+            save() {},
+            /* --> OTHER <-- */
+            run() {}
+          }
+        };
+      `,
+      errors: [
+        {
+          messageId: "invalidSeparator"
+        }
+      ]
+    },
     {
       code: `
         export default {
           methods: {
             // --> HELPERS <--
+
             format() {},
             // --> ACTIONS <--
+
             save() {}
           }
         };
@@ -153,8 +217,10 @@ ruleTester.run("vue-methods-separator", rule, {
         export default {
           methods: {
             // --> ACTIONS <--
+
             save() {},
             // --> HELPERS <--
+
             format() {}
           }
         };
@@ -242,8 +308,10 @@ ruleTester.run("vue-methods-separator", rule, {
         export default {
           methods: {
             // --> ACTIONS <--
+
             save() {},
             // --> ACTIONS <--
+
             publish() {}
           }
         };
@@ -260,8 +328,10 @@ ruleTester.run("vue-methods-separator", rule, {
         export default defineComponent({
           methods: {
             // --> EVENT LISTENERS <--
+
             onSave() {},
             // --> HELPERS <--
+
             format() {}
           }
         });
@@ -270,8 +340,10 @@ ruleTester.run("vue-methods-separator", rule, {
         export default defineComponent({
           methods: {
             // --> HELPERS <--
+
             format() {},
             // --> EVENT LISTENERS <--
+
             onSave() {}
           }
         });
@@ -305,8 +377,10 @@ ruleTester.run("vue-methods-separator", rule, {
         export default defineComponent({
           methods: {
             // --> EVENT LISTENERS <--
+
             onSave() {},
             // --> ACTIONS <--
+
             save() {}
           }
         });
@@ -317,8 +391,10 @@ ruleTester.run("vue-methods-separator", rule, {
         export default defineComponent({
           methods: {
             // --> ACTIONS <--
+
             save() {},
             // --> EVENT LISTENERS <--
+
             onSave() {}
           }
         });