eslint-plugin-crisp 1.4.18 → 1.4.20

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,10 +221,12 @@ 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) |  | 🟢 |
 | [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 |  | 🟢 |
+| [crisp/vue-no-name-option](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-no-name-option.js) | Disallows explicit component names in Vue single-file components |  | 🟢 |
 | [crisp/vue-no-regex-data](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-no-regex-data.js) | Disallows regular expressions to be declared in Vue data object |  | 🟢 |
 | [crisp/vue-props-declaration-line-break](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-props-declaration-line-break.js) | Enforces line break between type and default function in prop definition |  | 🟢 |
 | [crisp/vue-props-declaration-multiline](https://github.com/crisp-oss/eslint-plugin-crisp/blob/master/rules/vue-props-declaration-multiline.js) | Enforces props declarations to be multiline |  | 🟢 |

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,12 +45,14 @@ 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";
 import ruleVueHtmlQuotes from "./rules/vue-html-quotes.js";
 import ruleVueMethodsSeparator from "./rules/vue-methods-separator.js";
 import ruleVueNameProp from "./rules/vue-name-prop.js";
+import ruleVueNoNameOption from "./rules/vue-no-name-option.js";
 import ruleVueNoRegexData from "./rules/vue-no-regex-data.js";
 import ruleVuePropsDeclarationLineBreak from "./rules/vue-props-declaration-line-break.js";
 import ruleVuePropsDeclarationMultiline from "./rules/vue-props-declaration-multiline.js";
@@ -74,6 +77,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,12 +116,14 @@ 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,
     "vue-html-quotes": ruleVueHtmlQuotes,
     "vue-methods-separator": ruleVueMethodsSeparator,
     "vue-name-prop": ruleVueNameProp,
+    "vue-no-name-option": ruleVueNoNameOption,
     "vue-no-regex-data": ruleVueNoRegexData,
     "vue-props-declaration-line-break": ruleVuePropsDeclarationLineBreak,
     "vue-props-declaration-multiline": ruleVuePropsDeclarationMultiline,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-crisp",
-  "version": "1.4.18",
+  "version": "1.4.20",
   "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,6 +167,7 @@ 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",
@@ -383,12 +384,14 @@ 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",
         "crisp/vue-html-quotes": "error",
         "crisp/vue-methods-separator": "error",
         "crisp/vue-name-prop": "error",
+        "crisp/vue-no-name-option": "error",
         "crisp/vue-no-regex-data": "error",
         "crisp/vue-props-declaration-line-break": "error",
         "crisp/vue-props-declaration-multiline": "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/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"
+  );
+}

package/rules/vue-no-name-option.js

@@ -0,0 +1,108 @@
+export default {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "disallow explicit names in Vue single-file components",
+      category: "Best Practices",
+      recommended: false
+    },
+    fixable: "code",
+    schema: []
+  },
+
+  create(context) {
+    const fileName = (context.filename || context.getFilename()).replace(/\\/g, "/");
+
+    if (!fileName.endsWith(".vue")) {
+      return {};
+    }
+
+    return {
+      ExportDefaultDeclaration(node) {
+        const componentOptions = getComponentOptions(node.declaration);
+
+        if (!componentOptions) {
+          return;
+        }
+
+        componentOptions.properties.forEach((property) => {
+          if (!isNameProperty(property)) {
+            return;
+          }
+
+          context.report({
+            node: property,
+            message: "Vue single-file components must rely on their inferred filename.",
+
+            fix(fixer) {
+              return removeProperty(fixer, context, componentOptions, property);
+            }
+          });
+        });
+      }
+    };
+  }
+};
+
+// Returns the component options passed to defineComponent()
+function getComponentOptions(node) {
+  if (!isDefineComponentCall(node)) {
+    return null;
+  }
+
+  const options = node.arguments[0];
+
+  return options?.type === "ObjectExpression" ? options : null;
+}
+
+// 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"
+  );
+}
+
+// Returns whether the property is the component name option
+function isNameProperty(property) {
+  if (property.type !== "Property") {
+    return false;
+  }
+
+  if (property.key.type === "Identifier") {
+    return property.key.name === "name";
+  }
+
+  return property.key.type === "Literal" && property.key.value === "name";
+}
+
+// Removes a property and its adjacent comma
+function removeProperty(fixer, context, options, property) {
+  const sourceCode = context.sourceCode || context.getSourceCode();
+  const nextToken = sourceCode.getTokenAfter(property);
+
+  if (nextToken?.value === ",") {
+    return fixer.removeRange([property.range[0], nextToken.range[1]]);
+  }
+
+  const propertyIndex = options.properties.indexOf(property);
+
+  if (propertyIndex > 0) {
+    const previousToken = sourceCode.getTokenBefore(property);
+
+    if (previousToken?.value === ",") {
+      return fixer.removeRange([previousToken.range[0], property.range[1]]);
+    }
+  }
+
+  return fixer.remove(property);
+}