eslint-plugin-crisp 1.7.13 → 1.7.14

package/README.md

@@ -228,6 +228,7 @@ Each item has emojis denoting:
 | [crisp/vue-define-component](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-define-component.js) | Enforces mixins and components to use the `defineComponent` wrapper |  | 🟢 |
 | [crisp/vue-emits-order](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-emits-order.js) | Ensures emits properties are alphabetically ordered |  | 🟢 |
 | [crisp/vue-event-listener-jsdoc](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-event-listener-jsdoc.js) | Requires event listener method JSDoc descriptions to start with `Triggers on` |  | 🟢 |
+| [crisp/vue-event-listener-section](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-event-listener-section.js) | Requires methods named `on` followed by an uppercase letter to be in the event listeners section |  | 🟢 |
 | [crisp/vue-header-check](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-header-check.js) | Ensures `script`, `template` and `style` tags start with corresponding comment block |  | 🟢 |
 | [crisp/vue-html-indent](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-html-indent.js) | Enforces consistent indentation in `template` (supports for Pug) |  | 🟢 |
 | [crisp/vue-html-quotes](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-html-quotes.js) | Enforces HTML attributes to be enclosed with double quotes |  | 🟢 |

package/index.js

@@ -51,6 +51,7 @@ import ruleVueDataComment from "./rules/vue-data-comment.js";
 import ruleVueDefineComponent from "./rules/vue-define-component.js";
 import ruleVueEmitsOrder from "./rules/vue-emits-order.js";
 import ruleVueEventListenerJsdoc from "./rules/vue-event-listener-jsdoc.js";
+import ruleVueEventListenerSection from "./rules/vue-event-listener-section.js";
 import ruleVueHeaderCheck from "./rules/vue-header-check.js";
 import ruleVueHtmlIndent from "./rules/vue-html-indent.js";
 import ruleVueHtmlQuotes from "./rules/vue-html-quotes.js";
@@ -131,6 +132,7 @@ const plugin = {
     "vue-define-component": ruleVueDefineComponent,
     "vue-emits-order": ruleVueEmitsOrder,
     "vue-event-listener-jsdoc": ruleVueEventListenerJsdoc,
+    "vue-event-listener-section": ruleVueEventListenerSection,
     "vue-header-check": ruleVueHeaderCheck,
     "vue-html-indent": ruleVueHtmlIndent,
     "vue-html-quotes": ruleVueHtmlQuotes,

package/package.json

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

package/recommended-vue.js

@@ -386,6 +386,7 @@ export default function configRecommendedVue(pluginCrisp) {
         "crisp/vue-define-component": "error",
         "crisp/vue-emits-order": "error",
         "crisp/vue-event-listener-jsdoc": "error",
+        "crisp/vue-event-listener-section": "error",
         "crisp/vue-header-check": "error",
         "crisp/vue-html-indent": "error",
         "crisp/vue-html-quotes": "error",

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

@@ -0,0 +1,87 @@
+const EVENT_LISTENERS_SEPARATOR = "--> EVENT LISTENERS <--";
+const EVENT_LISTENER_NAME_PATTERN = /^on[A-Z]/;
+
+export default {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description:
+        "require on-prefixed Vue methods to be in the event listeners section",
+      category: "Stylistic Issues",
+      recommended: false
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      wrongSection:
+        "Method '{{name}}' must be declared in the EVENT LISTENERS section."
+    }
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode;
+
+    function getPropertyName(property) {
+      if (property.type !== "Property" || property.computed) {
+        return null;
+      }
+
+      if (property.key.type === "Identifier") {
+        return property.key.name;
+      }
+
+      if (
+        property.key.type === "Literal" &&
+        typeof property.key.value === "string"
+      ) {
+        return property.key.value;
+      }
+
+      return null;
+    }
+
+    function checkMethods(node) {
+      const properties = node.value.properties;
+
+      if (!properties) {
+        return;
+      }
+
+      let eventListenersStarted = false;
+
+      properties.forEach((property) => {
+        const comments = sourceCode.getCommentsBefore(property);
+
+        if (!eventListenersStarted) {
+          eventListenersStarted = comments.some((comment) => {
+            return (
+              comment.type === "Line" &&
+              comment.value.trim() === EVENT_LISTENERS_SEPARATOR
+            );
+          });
+        }
+
+        if (eventListenersStarted) {
+          return;
+        }
+
+        const name = getPropertyName(property);
+
+        if (name && EVENT_LISTENER_NAME_PATTERN.test(name)) {
+          context.report({
+            node: property.key,
+            messageId: "wrongSection",
+            data: { name }
+          });
+        }
+      });
+    }
+
+    return {
+      'ExportDefaultDeclaration > ObjectExpression > Property[key.name="methods"]':
+        checkMethods,
+      'ExportDefaultDeclaration > CallExpression[callee.name="defineComponent"] > ObjectExpression > Property[key.name="methods"]':
+        checkMethods
+    };
+  }
+};

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

@@ -0,0 +1,145 @@
+import rule from "../../rules/vue-event-listener-section.js";
+import { createVueRuleTester } from "../rule-tester.js";
+
+const ruleTester = createVueRuleTester();
+
+ruleTester.run("vue-event-listener-section", rule, {
+  valid: [
+    {
+      code: "export default { methods: {} };"
+    },
+    {
+      code: `
+        export default {
+          methods: {
+            // --> ACTIONS <--
+            save() {},
+            // --> HELPERS <--
+            onlyOnce() {},
+            onload() {},
+            on_save() {},
+            on2Factor() {}
+          }
+        };
+      `
+    },
+    {
+      code: `
+        export default defineComponent({
+          methods: {
+            // --> EVENT LISTENERS <--
+            onSave() {},
+            onURLChange() {},
+            "onClose"() {}
+          }
+        });
+      `
+    },
+    {
+      code: `
+        export default {
+          methods: {
+            // --> HELPERS <--
+            createHandlers() {
+              return {
+                onSave() {}
+              };
+            }
+          }
+        };
+      `
+    },
+    {
+      filename: "Component.vue",
+      code: `
+        <script>
+        export default defineComponent({
+          methods: {
+            // --> ACTIONS <--
+            save() {},
+            // --> EVENT LISTENERS <--
+            onLoadMore() {}
+          }
+        });
+        </script>
+      `
+    }
+  ],
+
+  invalid: [
+    {
+      code: `
+        export default {
+          methods: {
+            // --> ACTIONS <--
+            onSave() {}
+          }
+        };
+      `,
+      errors: [
+        {
+          messageId: "wrongSection",
+          data: { name: "onSave" }
+        }
+      ]
+    },
+    {
+      code: `
+        export default {
+          methods: {
+            // --> HELPERS <--
+            onLoadMore() {}
+          }
+        };
+      `,
+      errors: [
+        {
+          messageId: "wrongSection",
+          data: { name: "onLoadMore" }
+        }
+      ]
+    },
+    {
+      code: `
+        export default {
+          methods: {
+            "onClose": function() {}
+          }
+        };
+      `,
+      errors: [
+        {
+          messageId: "wrongSection",
+          data: { name: "onClose" }
+        }
+      ]
+    },
+    {
+      filename: "Component.vue",
+      code: `
+        <script>
+        export default defineComponent({
+          methods: {
+            // --> ACTIONS <--
+            onSave() {},
+            // --> HELPERS <--
+            onFormatComplete() {},
+            // --> EVENT LISTENERS <--
+            onClose() {}
+          }
+        });
+        </script>
+      `,
+      errors: [
+        {
+          messageId: "wrongSection",
+          data: { name: "onSave" }
+        },
+        {
+          messageId: "wrongSection",
+          data: { name: "onFormatComplete" }
+        }
+      ]
+    }
+  ]
+});