eslint-plugin-crisp 1.4.17 → 1.4.19

package/README.md

@@ -120,6 +120,7 @@ Each item has emojis denoting:
 | [crisp/align-consecutive-class-assignements](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/align-consecutive-class-assignements.js) | Enforces alignment of consecutive assignment statements in a class constructor | 🟠 |
 | [crisp/align-one-var](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/align-one-var.js) | Enforces alignment of variables in 'one-var' statements | 🟠 |
 | [crisp/align-requires](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/align-requires.js) | Enforces alignment of require statements | 🟠 |
+| [crisp/arrow-block-newline](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/arrow-block-newline.js) | Requires a newline after `{` in arrow function blocks | 🟠 | 🟢 | 🟣 |
 | [crisp/const](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/const.js) | Enforces that `const` variables start with `__` or are all uppercase | 🟠 |
 | [crisp/constructor-variables](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/constructor-variables.js) | Ensures all class properties in the constructor start with `_` | 🟠 |
 | [crisp/enforce-optional](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/enforce-optional.js) | Enforces use of optional chaining | 🟠 | 🟢 | 🟣 |
@@ -220,6 +221,7 @@ Each item has emojis denoting:
 | [crisp/vue-attribute-comma](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-attribute-comma.js) | Disallows trailing comma after attribute |  | 🟢 |
 | [crisp/vue-attribute-linebreak](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-attribute-linebreak.js) | Enforces linebreak before first attribute and after last attribute |  | 🟢 |
 | [crisp/vue-computed-order](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-computed-order.js) | Ensures computed properties are alphabetically ordered |  | 🟢 |
+| [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-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) |  | 🟢 |

package/index.js

@@ -6,6 +6,7 @@ import ruleAlignComments from "./rules/align-comments.js";
 import ruleAlignConsecutiveClassAssignements from "./rules/align-consecutive-class-assignements.js";
 import ruleAlignOneVar from "./rules/align-one-var.js";
 import ruleAlignRequires from "./rules/align-requires.js";
+import ruleArrowBlockNewline from "./rules/arrow-block-newline.js";
 import ruleConsecutiveLineComments from "./rules/consecutive-line-comments.js";
 import ruleConst from "./rules/const.js";
 import ruleConstructorVariables from "./rules/constructor-variables.js";
@@ -44,6 +45,7 @@ import ruleVueAttributeComma from "./rules/vue-attribute-comma.js";
 import ruleVueAttributeLinebreak from "./rules/vue-attribute-linebreak.js";
 import ruleVueComputedOrder from "./rules/vue-computed-order.js";
 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 ruleVueHeaderCheck from "./rules/vue-header-check.js";
 import ruleVueHtmlIndent from "./rules/vue-html-indent.js";
@@ -74,6 +76,7 @@ const plugin = {
     "align-consecutive-class-assignements": ruleAlignConsecutiveClassAssignements,
     "align-one-var": ruleAlignOneVar,
     "align-requires": ruleAlignRequires,
+    "arrow-block-newline": ruleArrowBlockNewline,
     "consecutive-line-comments": ruleConsecutiveLineComments,
     "const": ruleConst,
     "constructor-variables": ruleConstructorVariables,
@@ -112,6 +115,7 @@ const plugin = {
     "vue-attribute-linebreak": ruleVueAttributeLinebreak,
     "vue-computed-order": ruleVueComputedOrder,
     "vue-data-comment": ruleVueDataComment,
+    "vue-define-component": ruleVueDefineComponent,
     "vue-emits-order": ruleVueEmitsOrder,
     "vue-header-check": ruleVueHeaderCheck,
     "vue-html-indent": ruleVueHtmlIndent,

package/package.json

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

package/recommended-ts.js

@@ -151,6 +151,7 @@ export default function configRecommendedTS(pluginCrisp) {
 
         // Crisp JS rules
         "crisp/align-comments": "error",
+        "crisp/arrow-block-newline": "error",
         "crisp/consecutive-line-comments": "error",
         "crisp/enforce-optional": "error",
         "crisp/header-check": "error",

package/recommended-vue.js

@@ -167,7 +167,9 @@ export default function configRecommendedVue(pluginCrisp) {
 
         // Crisp JS rules
         "crisp/align-comments": "error",
+        "crisp/arrow-block-newline": "error",
         "crisp/consecutive-line-comments": "error",
+        "crisp/const": "error",
         "crisp/enforce-optional": "error",
         "crisp/header-check": "error",
         "crisp/header-comments-check": "error",
@@ -382,6 +384,7 @@ export default function configRecommendedVue(pluginCrisp) {
         "crisp/vue-attribute-linebreak": "error",
         "crisp/vue-computed-order": "error",
         "crisp/vue-data-comment": "error",
+        "crisp/vue-define-component": "error",
         "crisp/vue-emits-order": "error",
         "crisp/vue-header-check": "error",
         "crisp/vue-html-indent": "error",

package/recommended.js

@@ -160,6 +160,7 @@ export default function configRecommended(pluginCrisp) {
         "crisp/align-consecutive-class-assignements": "error",
         "crisp/align-one-var": "error",
         "crisp/align-requires": "error",
+        "crisp/arrow-block-newline": "error",
         "crisp/const": "error",
         "crisp/constructor-variables": "error",
         "crisp/enforce-optional": "error",

package/rules/arrow-block-newline.js

@@ -0,0 +1,47 @@
+export default {
+  meta: {
+    type: "layout",
+    docs: {
+      description:
+        "Require a newline after '{' in arrow function blocks.",
+      category: "Stylistic Issues",
+      recommended: false
+    },
+    schema: [],
+    messages: {
+      expectedNewline:
+        "Expected a newline after '{' in arrow function block."
+    }
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode || context.getSourceCode();
+
+    return {
+      ArrowFunctionExpression(node) {
+        if (node.body.type !== "BlockStatement") {
+          return;
+        }
+
+        const block = node.body;
+        const openBrace = sourceCode.getFirstToken(block);
+        const closeBrace = sourceCode.getLastToken(block);
+        const firstToken = sourceCode.getTokenAfter(openBrace);
+
+        // Empty blocks such as `() => {}` are allowed
+        if (!firstToken || firstToken === closeBrace) {
+          return;
+        }
+
+        if (firstToken.loc.start.line !== openBrace.loc.start.line) {
+          return;
+        }
+
+        context.report({
+          node: openBrace,
+          messageId: "expectedNewline"
+        });
+      }
+    };
+  }
+};

package/rules/const.js

@@ -1,27 +1,159 @@
+const isTopLevelDeclaration = (node) => {
+  let parent = node.parent;
+
+  if (parent?.type === "ExportNamedDeclaration") {
+    parent = parent.parent;
+  }
+
+  return parent?.type === "Program";
+};
+
+const isExportedDeclaration = (node) => {
+  return node.parent?.type === "ExportNamedDeclaration";
+};
+
+const isCallOrConstruction = (node) => {
+  return node?.type === "CallExpression" || node?.type === "NewExpression";
+};
+
+const isFunctionExpression = (node) => {
+  return (
+    node?.type === "ArrowFunctionExpression" ||
+    node?.type === "FunctionExpression"
+  );
+};
+
 export default {
   meta: {
     type: "suggestion",
     docs: {
-      description: "enforce that consts are uppercase or start with \"__\"",
+      description:
+        "Enforce top-level uppercase or double-underscore constant names.",
       category: "Stylistic Issues",
-      recommended: false,
+      recommended: false
     },
-    schema: [], // no options
+    fixable: "code",
+
+    schema: [{
+      type: "object",
+      properties: {
+        exceptions: {
+          type: "array",
+          items: { type: "string" },
+          uniqueItems: true
+        }
+      },
+      additionalProperties: false
+    }]
   },
+
   create(context) {
+    const options = context.options[0] || {};
+    const exceptions = options.exceptions || [];
+    const sourceCode = context.sourceCode || context.getSourceCode();
+
+    const isTopLevelCallArgument = (identifier) => {
+      let scope = sourceCode.getScope(identifier);
+      let variable;
+
+      while (scope && !variable) {
+        variable = scope.set.get(identifier.name);
+        scope = scope.upper;
+      }
+
+      return variable?.references.some((reference) => {
+        const parent = reference.identifier.parent;
+
+        return (
+          isCallOrConstruction(parent) &&
+          parent.arguments.includes(reference.identifier)
+        );
+      }) || false;
+    };
+
     return {
       VariableDeclaration(node) {
-        if (node.kind === "const") {
-          node.declarations.forEach((declaration) => {
-            if (declaration.id && declaration.id.name && (!declaration.id.name.startsWith("__") || declaration.id.name.toUpperCase() !== declaration.id.name)) {
-              context.report({
-                node: declaration,
-                message: "Consts should be uppercase and start with \"__\"",
-              });
+        if (node.kind !== "const") {
+          return;
+        }
+
+        const isTopLevel = isTopLevelDeclaration(node);
+        const isExported = isExportedDeclaration(node);
+        const hasOnlyDestructuring = node.declarations.every((declaration) => {
+          return declaration.id.type !== "Identifier";
+        });
+        const canReplaceWithLet = node.declarations.every((declaration) => {
+          if (declaration.id.type !== "Identifier") {
+            return true;
+          }
+
+          const name = declaration.id.name;
+          const isValidConst =
+            exceptions.includes(name) ||
+            (
+              name.startsWith("__") &&
+              name.toUpperCase() === name
+            );
+
+          return name.startsWith("_") && !isValidConst;
+        });
+
+        if (!isTopLevel && !isExported && canReplaceWithLet) {
+          context.report({
+            node,
+            message: hasOnlyDestructuring
+              ? "Local destructuring declarations should use \"let\"."
+              : "Local variables prefixed with \"_\" should use \"let\".",
+            fix(fixer) {
+              return fixer.replaceText(sourceCode.getFirstToken(node), "let");
             }
           });
+
+          return;
         }
-      },
+
+        node.declarations.forEach((declaration) => {
+          if (declaration.id.type !== "Identifier") {
+            if (isTopLevel || isExported) {
+              return;
+            }
+
+            context.report({
+              node: declaration,
+              message: "Local destructuring declarations should use \"let\"."
+            });
+
+            return;
+          }
+
+          const name = declaration.id.name;
+          const isUppercase = name.toUpperCase() === name;
+          const hasValidPlacement =
+            isTopLevel || name.startsWith("__");
+          const isTopLevelBuilder =
+            isTopLevel && isCallOrConstruction(declaration.init);
+          const isTopLevelBuilderArgument =
+            isTopLevel && isTopLevelCallArgument(declaration.id);
+          const isFunction = isFunctionExpression(declaration.init);
+
+          if (
+            isExported ||
+            isTopLevelBuilder ||
+            isTopLevelBuilderArgument ||
+            isFunction ||
+            exceptions.includes(name) ||
+            (isUppercase && hasValidPlacement)
+          ) {
+            return;
+          }
+
+          context.report({
+            node: declaration.id,
+            message:
+              "Consts should be uppercase and defined at the top level or be replaced with let _variable (Crisp convention)."
+          });
+        });
+      }
     };
-  },
+  }
 };

package/rules/variable-names.js

@@ -1,8 +1,26 @@
+const isLocalDeclaration = (node) => {
+  let parent = node.parent;
+
+  while (parent) {
+    if (
+      parent.type === "ArrowFunctionExpression" ||
+      parent.type === "FunctionDeclaration" ||
+      parent.type === "FunctionExpression"
+    ) {
+      return true;
+    }
+
+    parent = parent.parent;
+  }
+
+  return false;
+};
+
 export default {
   meta: {
     type: "suggestion",
     docs: {
-      description: "enforce that variables defined within a method start with '_', except for parameters",
+      description: "Enforce that local variable names follow internal conventions.",
       category: "Stylistic Issues",
       recommended: false
     },
@@ -24,110 +42,27 @@ export default {
     const options = context.options[0] || {};
     const variableExceptions = options.variableExceptions || [];
 
-    function checkDeclaration(node) {
-      if (!node) {
-        return;
-      }
-
-      switch(node.type) {
-        // In case of a variable declaration, it checks if the variable name \
-        //   starts with "_" or is an exception
-        case "VariableDeclaration": {
-          node.declarations.forEach((declaration) => {
-            if (declaration.id.name && !declaration.id.name.startsWith("_") && !variableExceptions.includes(declaration.id.name)) {
-              context.report({
-                node: declaration,
-                message: `Variables defined within a method should start with "_" ({${declaration.id.name}})`,
-              });
-            }
-          });
-
-          break;
-        }
-
-        // BlockStatement and Program nodes contain lists of statements \
-        //   (node.body), so we check each statement
-        case "BlockStatement":
-        case "Program": {
-          node.body.forEach(checkDeclaration);
-
-          break;
+    return {
+      VariableDeclaration(node) {
+        // Constant names are validated by the const rule.
+        if (node.kind === "const" || !isLocalDeclaration(node)) {
+          return;
         }
 
-        // IfStatement nodes have a consequent (then), and an \
-        //   optional alternate (else) to be checked
-        case "IfStatement": {
-          checkDeclaration(node.consequent);
-
-          if (node.alternate) {
-            checkDeclaration(node.alternate);
+        for (const declaration of node.declarations) {
+          if (declaration.id.type !== "Identifier") {
+            continue;
           }
 
-          break;
-        }
-
-        // Loops nodes contain a body with statements to be checked
-        case "ForStatement":
-        case "WhileStatement":
-        case "DoWhileStatement":
-        case "ForInStatement":
-        case "ForOfStatement": {
-          if (node.body) {
-            checkDeclaration(node.body);
+          if (
+            !declaration.id.name.startsWith("_") &&
+            !variableExceptions.includes(declaration.id.name)
+          ) {
+            context.report({
+              node: declaration.id,
+              message: `Local variables should start with "_" ({${declaration.id.name}})`
+            });
           }
-
-          // Check the loop condition itself
-          checkDeclaration(node.left);
-
-          break;
-        }
-
-        // SwitchStatement nodes contain an array of SwitchCase nodes that \
-        //   represent each case in the switch statement
-        case "SwitchStatement": {
-          node.cases.forEach(checkDeclaration);
-
-          break;
-        }
-
-        // SwitchCase nodes contain a consequent which is an array of \
-        //   Statements to be checked
-        case "SwitchCase": {
-          node.consequent.forEach(checkDeclaration);
-
-          break;
-        }
-
-        default: {
-          break;
-        }
-      }
-    }
-
-    return {
-      // For each property in an object, if it's a function / arrow function, \
-      //   check its body (usefull for Vue.js components, in which methods and \
-      //   computed are defined as properties of a parent object)
-      Property(node) {
-        if (node.value.type === "FunctionExpression" ||
-            node.value.type === "ArrowFunctionExpression") {
-          checkDeclaration(node);
-        }
-      },
-
-      MethodDefinition(node) {
-        checkDeclaration(node.value.body);
-      },
-
-      ArrowFunctionExpression(node) {
-        if (node.body.type === "BlockStatement") {
-          checkDeclaration(node.body);
-        }
-      },
-
-      FunctionExpression(node) {
-        if (node.body.type === "BlockStatement") {
-          checkDeclaration(node.body);
         }
       }
     };

package/rules/vue-define-component.js

@@ -0,0 +1,130 @@
+export default {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "enforce defineComponent wrapper for Vue mixins and components",
+      category: "Best Practices",
+      recommended: false
+    },
+    fixable: "code",
+    schema: []
+  },
+
+  create(context) {
+    const fileName = (context.filename || context.getFilename()).replace(/\\/g, "/");
+
+    if (fileName.endsWith("/index.js") || !isVueComponentOrMixin(fileName)) {
+      return {};
+    }
+
+    return {
+      ExportDefaultDeclaration(node) {
+        if (isDefineComponentCall(node.declaration)) {
+          return;
+        }
+
+        context.report({
+          node: node.declaration,
+          message: "Mixins and components must use the `defineComponent` wrapper.",
+
+          fix(fixer) {
+            return buildFixes(fixer, context, node);
+          }
+        });
+      }
+    };
+  }
+};
+
+// Returns whether the file is a Vue component or mixin
+function isVueComponentOrMixin(fileName) {
+  return (
+    fileName.endsWith(".vue") ||
+    /Mixin\.js$/i.test(fileName) ||
+    fileName.includes("/mixins/")
+  );
+}
+
+// Returns whether the node is a defineComponent() call
+function isDefineComponentCall(node) {
+  if (!node || node.type !== "CallExpression") {
+    return false;
+  }
+
+  if (node.callee.type === "Identifier") {
+    return node.callee.name === "defineComponent";
+  }
+
+  return (
+    node.callee.type === "MemberExpression" &&
+    node.callee.property.type === "Identifier" &&
+    node.callee.property.name === "defineComponent"
+  );
+}
+
+// Builds wrap + import fixes for a plain object default export
+function buildFixes(fixer, context, exportNode) {
+  if (exportNode.declaration.type !== "ObjectExpression") {
+    return null;
+  }
+
+  const sourceCode = context.sourceCode || context.getSourceCode();
+  const importFix = buildDefineComponentImportFix(fixer, sourceCode);
+
+  if (importFix === false) {
+    return null;
+  }
+
+  const declarationText = sourceCode.getText(exportNode.declaration);
+  const fixes = [
+    fixer.replaceText(
+      exportNode.declaration,
+      `defineComponent(${declarationText})`
+    )
+  ];
+
+  if (importFix) {
+    fixes.unshift(importFix);
+  }
+
+  return fixes;
+}
+
+// Extends an existing named import from "vue" when needed
+function buildDefineComponentImportFix(fixer, sourceCode) {
+  const body = sourceCode.ast.body;
+  const vueImport = body.find((node) => {
+    return node.type === "ImportDeclaration" && node.source.value === "vue";
+  });
+
+  if (!vueImport) {
+    return false;
+  }
+
+  const alreadyImported = vueImport.specifiers.some((specifier) => {
+    if (specifier.type !== "ImportSpecifier") {
+      return false;
+    }
+
+    const importedName = specifier.imported.name || specifier.imported.value;
+
+    return importedName === "defineComponent";
+  });
+
+  if (alreadyImported) {
+    return null;
+  }
+
+  const namedSpecifiers = vueImport.specifiers.filter((specifier) => {
+    return specifier.type === "ImportSpecifier";
+  });
+
+  if (namedSpecifiers.length === 0) {
+    return false;
+  }
+
+  return fixer.insertTextAfter(
+    namedSpecifiers[namedSpecifiers.length - 1],
+    ", defineComponent"
+  );
+}