@html-eslint/eslint-plugin 0.31.1 → 0.33.0

package/lib/rules/attrs-newline.js

@@ -1,9 +1,8 @@
 /**
- * @typedef { import("../types").RuleFixer } RuleFixer
+ * @typedef { import("eslint").Rule.RuleFixer } RuleFixer
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
- * @typedef {import("../types").RuleListener}
- * @typedef {Object} MessageId
+ *
+ * @typedef {Object } MessageId
  * @property {"closeStyleWrong"} CLOSE_STYLE_WRONG
  * @property {"newlineMissing"} NEWLINE_MISSING
  * @property {"newlineUnexpected"} NEWLINE_UNEXPECTED
@@ -15,7 +14,6 @@ const { createVisitors } = require("./utils/visitors");
 /**
  * @type {MessageId}
  */
-
 const MESSAGE_ID = {
   CLOSE_STYLE_WRONG: "closeStyleWrong",
   NEWLINE_MISSING: "newlineMissing",

package/lib/rules/element-newline.js

@@ -1,13 +1,12 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").BaseNode } BaseNode
- * @typedef { import("../types").CommentNode } CommentNode
- * @typedef { import("../types").DoctypeNode } DoctypeNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
- * @typedef { import("../types").StyleTagNode } StyleTagNode
- * @typedef { import("../types").TextNode } TextNode
- * @typedef { CommentNode | DoctypeNode | ScriptTagNode | StyleTagNode | TagNode | TextNode } NewlineNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").Comment } Comment
+ * @typedef { import("../types").Doctype } Doctype
+ * @typedef { import("../types").ScriptTag } ScriptTag
+ * @typedef { import("../types").StyleTag } StyleTag
+ * @typedef { import("../types").Text } Text
+ * @typedef { Tag | Doctype | ScriptTag | StyleTag | Text } NewlineNode
  * @typedef {{
  *   childFirst: NewlineNode | null;
  *   childLast: NewlineNode | null;
@@ -188,7 +187,10 @@ module.exports = {
               }
             }
 
-            if (nodeMeta.childLast.loc.end.line === node.close.loc.start.line) {
+            if (
+              node.close &&
+              nodeMeta.childLast.loc.end.line === node.close.loc.start.line
+            ) {
               if (isNotNewlineEnd(nodeMeta.childLast)) {
                 context.report({
                   node: node,

package/lib/rules/id-naming-convention.js

@@ -1,8 +1,8 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
- * @typedef { import("../types").StyleTagNode } StyleTagNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").ScriptTag } ScriptTag
+ * @typedef { import("../types").StyleTag } StyleTag
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -87,7 +87,7 @@ module.exports = {
         : CONVENTION_CHECKERS[convention];
 
     /**
-     * @param {TagNode | ScriptTagNode | StyleTagNode} node
+     * @param {Tag | ScriptTag | StyleTag} node
      */
     function check(node) {
       if (isAttributesEmpty(node)) {
@@ -107,7 +107,7 @@ module.exports = {
     }
 
     /**
-     * @param {TagNode | ScriptTagNode | StyleTagNode} node
+     * @param {Tag | ScriptTag | StyleTag} node
      */
     function checkInTemplate(node) {
       if (isAttributesEmpty(node)) {

package/lib/rules/indent/indent.js

@@ -1,23 +1,31 @@
 /**
  * @typedef { import("../../types").RuleModule } RuleModule
  * @typedef { import("../../types").AnyNode } AnyNode
- * @typedef { import("../../types").LineNode } LineNode
- * @typedef { import("../../types").BaseNode } BaseNode
- * @typedef { import("../../types").TagNode } TagNode
+ * @typedef { import("../../types").Line } Line
+ * @typedef { import("../../types").Tag } Tag
  * @typedef { import("../../types").RuleListener } RuleListener
+ * @typedef { import("../../types").Context } Context
  * @typedef { import("eslint").AST.Token } Token
  * @typedef { import("eslint").SourceCode } SourceCode
- * @typedef { import("estree").TemplateLiteral } TemplateLiteral
+ * @typedef { import("eslint").AST.Range } Range
+ * @typedef { import("eslint").AST.SourceLocation } SourceLocation
+ * @typedef { import("../../types").TemplateLiteral } TemplateLiteral
+ *
+ *
  * @typedef {Object} IndentType
  * @property {"tab"} TAB
  * @property {"space"} SPACE
  * @typedef {Object} MessageId
  * @property {"wrongIndent"} WRONG_INDENT
+ * @typedef {Object} IndentOptionInfo
+ * @property {IndentType["TAB"] | IndentType["SPACE"]} indentType
+ * @property {number} indentSize
+ * @property {string} indentChar
  */
 
 const { parse } = require("@html-eslint/template-parser");
 const { RULE_CATEGORY } = require("../../constants");
-const { splitToLineNodes } = require("../utils/node");
+const { splitToLineNodes, isLine, isTag } = require("../utils/node");
 const {
   shouldCheckTaggedTemplateExpression,
   shouldCheckTemplateLiteral,
@@ -72,6 +80,17 @@ module.exports = {
             minimum: 1,
             default: 1,
           },
+          tagChildrenIndent: {
+            default: {},
+            type: "object",
+            patternProperties: {
+              "^[a-z]+$": {
+                type: "integer",
+                minimum: 0,
+              },
+            },
+            additionalProperties: false,
+          },
         },
       },
     ],
@@ -84,39 +103,44 @@ module.exports = {
     const sourceCode = getSourceCode(context);
     const indentLevelOptions = (context.options && context.options[1]) || {};
     const lines = sourceCode.getLines();
-    const { indentType, indentSize, indentChar } = (function () {
-      const options = context.options;
-      /**
-       * @type {IndentType['SPACE'] | IndentType['TAB']}
-       */
-      let indentType = INDENT_TYPES.SPACE;
-      let indentSize = 4;
-      if (options.length) {
-        if (options[0] === INDENT_TYPES.TAB) {
-          indentType = INDENT_TYPES.TAB;
-        } else {
-          indentSize = options[0];
-        }
-      }
-      const indentChar =
-        indentType === INDENT_TYPES.SPACE ? " ".repeat(indentSize) : "\t";
-      return { indentType, indentSize, indentChar };
-    })();
+    const { indentType, indentSize, indentChar } = getIndentOptionInfo(context);
 
     /**
-     * @param {string} str
-     * @returns {number}
+     * @param {Tag} node
+     * @return {number}
      */
-    function countLeftPadding(str) {
-      return str.length - str.replace(/^[\s\t]+/, "").length;
+    function getTagIncreasingLevel(node) {
+      if (
+        node.parent &&
+        isTag(node.parent) &&
+        indentLevelOptions &&
+        typeof indentLevelOptions.tagChildrenIndent === "object" &&
+        indentLevelOptions.tagChildrenIndent
+      ) {
+        const option =
+          indentLevelOptions.tagChildrenIndent[node.parent.name.toLowerCase()];
+        if (typeof option === "number") {
+          return option;
+        }
+      }
+
+      return 1;
     }
 
     /**
      * @param {AnyNode} node
-     * @returns {node is LineNode}
+     * @return {number}
      */
-    function isLineNode(node) {
-      return node.type === "Line";
+    function getIncreasingLevel(node) {
+      if (isLine(node)) {
+        return 1;
+      }
+      if (isTag(node)) {
+        return getTagIncreasingLevel(node);
+      }
+      return typeof indentLevelOptions[node.type] === "number"
+        ? indentLevelOptions[node.type]
+        : 1;
     }
 
     /**
@@ -142,18 +166,14 @@ module.exports = {
      */
     function createIndentVisitor(baseLevel) {
       const indentLevel = new IndentLevel({
-        getIncreasingLevel(node) {
-          return typeof indentLevelOptions[node.type] === "number"
-            ? indentLevelOptions[node.type]
-            : 1;
-        },
+        getIncreasingLevel,
       });
       indentLevel.setBase(baseLevel);
 
       let parentIgnoringChildCount = 0;
 
       /**
-       * @param {AnyNode} node
+       * @param {AnyNode | Line} node
        * @returns {string}
        */
       function getActualIndent(node) {
@@ -161,7 +181,7 @@ module.exports = {
         const line = lines[node.loc.start.line - 1];
         let column = node.loc.start.column;
 
-        if (isLineNode(node)) {
+        if (isLine(node)) {
           column += countLeftPadding(node.value);
         }
 
@@ -175,33 +195,6 @@ module.exports = {
         return indentChar.repeat(indentLevel.value());
       }
 
-      /**
-       * @param {AnyNode} node
-       * @param {string} actualIndent
-       * @return {BaseNode}
-       */
-      function getIndentNodeToReport(node, actualIndent) {
-        let rangeStart = node.range[0];
-
-        if (node.type !== "Line") {
-          rangeStart -= actualIndent.length;
-        }
-
-        return {
-          range: [rangeStart, rangeStart + actualIndent.length],
-          loc: {
-            start: {
-              column: 0,
-              line: node.loc.start.line,
-            },
-            end: {
-              column: actualIndent.length,
-              line: node.loc.start.line,
-            },
-          },
-        };
-      }
-
       /**
        * @param {string} actualIndent
        * @param {number} expectedIndentSize
@@ -235,7 +228,7 @@ module.exports = {
       }
 
       /**
-       * @param {AnyNode} node
+       * @param {AnyNode | Line} node
        */
       function checkIndent(node) {
         if (parentIgnoringChildCount > 0) {
@@ -278,6 +271,7 @@ module.exports = {
         },
         OpenScriptTagStart: checkIndent,
         OpenScriptTagEnd: checkIndent,
+        CloseScriptTag: checkIndent,
         StyleTag(node) {
           indentLevel.indent(node);
         },
@@ -286,8 +280,11 @@ module.exports = {
         },
         OpenStyleTagStart: checkIndent,
         OpenStyleTagEnd: checkIndent,
+        CloseStyleTag: checkIndent,
         OpenTagStart: checkIndent,
-        OpenTagEnd: checkIndent,
+        OpenTagEnd(node) {
+          checkIndent(node);
+        },
         CloseTag: checkIndent,
         "Tag:exit"(node) {
           if (IGNORING_NODES.includes(node.name)) {
@@ -296,7 +293,6 @@ module.exports = {
           indentLevel.dedent(node);
         },
 
-        // Attribute
         Attribute(node) {
           indentLevel.indent(node);
         },
@@ -305,8 +301,6 @@ module.exports = {
         "Attribute:exit"(node) {
           indentLevel.dedent(node);
         },
-
-        // Text
         Text(node) {
           indentLevel.indent(node);
           const lineNodes = splitToLineNodes(node);
@@ -367,3 +361,61 @@ module.exports = {
     };
   },
 };
+
+/**
+ * @param {AnyNode | Line} node
+ * @param {string} actualIndent
+ * @return {{range: Range; loc: SourceLocation}}
+ */
+function getIndentNodeToReport(node, actualIndent) {
+  let rangeStart = node.range[0];
+
+  if (!isLine(node)) {
+    rangeStart -= actualIndent.length;
+  }
+
+  return {
+    range: [rangeStart, rangeStart + actualIndent.length],
+    loc: {
+      start: {
+        column: 0,
+        line: node.loc.start.line,
+      },
+      end: {
+        column: actualIndent.length,
+        line: node.loc.start.line,
+      },
+    },
+  };
+}
+
+/**
+ * @param {string} str
+ * @returns {number}
+ */
+function countLeftPadding(str) {
+  return str.length - str.replace(/^[\s\t]+/, "").length;
+}
+
+/**
+ * @param {Context} context
+ * @return {IndentOptionInfo}
+ */
+function getIndentOptionInfo(context) {
+  const options = context.options;
+  /**
+   * @type {IndentType['SPACE'] | IndentType['TAB']}
+   */
+  let indentType = INDENT_TYPES.SPACE;
+  let indentSize = 4;
+  if (options.length) {
+    if (options[0] === INDENT_TYPES.TAB) {
+      indentType = INDENT_TYPES.TAB;
+    } else {
+      indentSize = options[0];
+    }
+  }
+  const indentChar =
+    indentType === INDENT_TYPES.SPACE ? " ".repeat(indentSize) : "\t";
+  return { indentType, indentSize, indentChar };
+}

package/lib/rules/index.js

@@ -37,6 +37,16 @@ const noScriptStyleType = require("./no-script-style-type");
 const lowercase = require("./lowercase");
 const requireOpenGraphProtocol = require("./require-open-graph-protocol");
 const sortAttrs = require("./sort-attrs");
+const preferHttps = require("./prefer-https");
+const requireInputLabel = require("./require-input-label");
+const requireFormMethod = require("./require-form-method");
+const noHeadingInsideButton = require("./no-heading-inside-button");
+const noInvalidRole = require("./no-invalid-role");
+const noNestedInteractive = require("./no-nested-interactive");
+const maxElementDepth = require("./max-element-depth");
+const requireExplicitSize = require("./require-explicit-size");
+// import new rule here ↑
+// DO NOT REMOVE THIS COMMENT
 
 module.exports = {
   "require-lang": requireLang,
@@ -75,7 +85,17 @@ module.exports = {
   "no-trailing-spaces": noTrailingSpaces,
   "no-restricted-attr-values": noRestrictedAttrValues,
   "no-script-style-type": noScriptStyleType,
+  "no-heading-inside-button": noHeadingInsideButton,
+  "no-invalid-role": noInvalidRole,
+  "no-nested-interactive": noNestedInteractive,
   lowercase: lowercase,
   "require-open-graph-protocol": requireOpenGraphProtocol,
+  "require-form-method": requireFormMethod,
   "sort-attrs": sortAttrs,
+  "prefer-https": preferHttps,
+  "require-input-label": requireInputLabel,
+  "max-element-depth": maxElementDepth,
+  "require-explicit-size": requireExplicitSize,
+  // export new rule here ↑
+  // DO NOT REMOVE THIS COMMENT
 };

package/lib/rules/lowercase.js

@@ -1,9 +1,8 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").StyleTagNode } StyleTagNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
- * @typedef { import("../types").RuleListener } RuleListener
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").StyleTag } StyleTag
+ * @typedef { import("../types").ScriptTag } ScriptTag
  */
 
 const { NODE_TYPES } = require("@html-eslint/parser");
@@ -38,12 +37,12 @@ module.exports = {
   create(context) {
     const allowedAttrKeySet = new Set(SVG_CAMEL_CASE_ATTRIBUTES);
     /**
-     * @type {TagNode[]}
+     * @type {Tag[]}
      */
     const svgStack = [];
 
     /**
-     * @param {TagNode} node
+     * @param {Tag} node
      */
     function enterSvg(node) {
       svgStack.push(node);
@@ -62,7 +61,7 @@ module.exports = {
     }
 
     /**
-     * @param {TagNode | StyleTagNode | ScriptTagNode} node
+     * @param {Tag | StyleTag | ScriptTag} node
      */
     function nameOf(node) {
       if (node.type === NODE_TYPES.ScriptTag) return "script";
@@ -71,7 +70,7 @@ module.exports = {
     }
 
     /**
-     * @param {TagNode | StyleTagNode | ScriptTagNode} node
+     * @param {Tag | StyleTag | ScriptTag} node
      */
     function check(node) {
       const raw = node.openStart.value.slice(1);

package/lib/rules/max-element-depth.js

@@ -0,0 +1,96 @@
+/**
+ * @typedef { import("../types").RuleModule } RuleModule
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").StyleTag } StyleTag
+ * @typedef { import("../types").ScriptTag } ScriptTag
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
+
+const MESSAGE_IDS = {
+  MAX_DEPTH_EXCEEDED: "maxDepthExceeded",
+};
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Enforce element maximum depth",
+      category: RULE_CATEGORY.STYLE,
+      recommended: false,
+    },
+
+    fixable: null,
+    schema: [
+      {
+        type: "object",
+        properties: {
+          max: {
+            type: "integer",
+            minimum: 1,
+            default: 32,
+          },
+        },
+        required: ["max"],
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      [MESSAGE_IDS.MAX_DEPTH_EXCEEDED]:
+        "Expected the depth of nested elements to be <= {{needed}}, but found {{found}}",
+    },
+  },
+
+  create(context) {
+    const maxDepth =
+      context.options &&
+      context.options[0] &&
+      typeof context.options[0].max === "number"
+        ? context.options[0].max
+        : 32;
+
+    let depth = 0;
+
+    function resetDepth() {
+      depth = 0;
+    }
+
+    /**
+     *
+     * @param {Tag | ScriptTag | StyleTag} node
+     */
+    function increaseDepth(node) {
+      depth++;
+      if (depth > maxDepth) {
+        context.report({
+          node,
+          messageId: MESSAGE_IDS.MAX_DEPTH_EXCEEDED,
+          data: {
+            needed: maxDepth,
+            found: String(depth),
+          },
+        });
+      }
+    }
+
+    function decreaseDepth() {
+      depth--;
+    }
+
+    return createVisitors(context, {
+      Document: resetDepth,
+      "Document:exit": resetDepth,
+      Tag: increaseDepth,
+      "Tag:exit": decreaseDepth,
+      ScriptTag: increaseDepth,
+      "ScriptTag:exit": decreaseDepth,
+      StyleTag: increaseDepth,
+      "StyleTag:exit": decreaseDepth,
+    });
+  },
+};

package/lib/rules/no-abstract-roles.js

@@ -1,8 +1,8 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").StyleTagNode } StyleTagNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").StyleTag } StyleTag
+ * @typedef { import("../types").ScriptTag } ScriptTag
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -50,7 +50,7 @@ module.exports = {
 
   create(context) {
     /**
-     * @param {TagNode | ScriptTagNode | StyleTagNode} node
+     * @param {Tag | ScriptTag | StyleTag} node
      */
     function check(node) {
       const roleAttr = findAttr(node, "role");

package/lib/rules/no-accesskey-attrs.js

@@ -1,8 +1,8 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").StyleTagNode } StyleTagNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").StyleTag } StyleTag
+ * @typedef { import("../types").ScriptTag } ScriptTag
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -35,7 +35,7 @@ module.exports = {
 
   create(context) {
     /**
-     * @param {TagNode | ScriptTagNode | StyleTagNode} node
+     * @param {Tag | ScriptTag | StyleTag} node
      */
     function check(node) {
       const accessKeyAttr = findAttr(node, "accesskey");

package/lib/rules/no-duplicate-attrs.js

@@ -1,8 +1,8 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").StyleTagNode } StyleTagNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").StyleTag } StyleTag
+ * @typedef { import("../types").ScriptTag } ScriptTag
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -35,7 +35,7 @@ module.exports = {
 
   create(context) {
     /**
-     * @param {TagNode | StyleTagNode | ScriptTagNode} node
+     * @param {Tag | StyleTag | ScriptTag} node
      */
     function check(node) {
       if (Array.isArray(node.attributes)) {

package/lib/rules/no-duplicate-id.js

@@ -1,9 +1,9 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").StyleTagNode } StyleTagNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
- * @typedef { import("es-html-parser").AttributeValueNode } AttributeValueNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").StyleTag } StyleTag
+ * @typedef { import("../types").ScriptTag } ScriptTag
+ * @typedef { import("../types").AttributeValue } AttributeValue
  */
 
 const { parse } = require("@html-eslint/template-parser");
@@ -42,11 +42,11 @@ module.exports = {
   create(context) {
     const htmlIdAttrsMap = new Map();
     /**
-     * @param {Map<string, AttributeValueNode[]>} map
+     * @param {Map<string, AttributeValue[]>} map
      */
     function createTagVisitor(map) {
       /**
-       * @param {TagNode} node
+       * @param {Tag} node
        */
       return function (node) {
         if (!node.attributes || node.attributes.length <= 0) {
@@ -67,7 +67,7 @@ module.exports = {
 
     /**
      *
-     * @param {Map<string, AttributeValueNode[]>} map
+     * @param {Map<string, AttributeValue[]>} map
      */
     function report(map) {
       map.forEach((attrs) => {