@html-eslint/eslint-plugin 0.10.0 → 0.13.0

package/lib/rules/no-positive-tabindex.js

@@ -1,3 +1,7 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
 const { RULE_CATEGORY } = require("../constants");
 const { NodeUtils } = require("./utils");
 
@@ -5,6 +9,9 @@ const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",

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

@@ -0,0 +1,140 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ * @typedef {import("../types").AnyNode} AnyNode
+ * @typedef {{tagPatterns: string[], attrPatterns: string[], message?: string}[]} Options
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+
+const MESSAGE_IDS = {
+  RESTRICTED: "restricted",
+};
+
+/**
+ * @type {Rule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Disallow specified attributes",
+      category: RULE_CATEGORY.BEST_PRACTICE,
+      recommended: false,
+    },
+
+    fixable: null,
+    schema: {
+      type: "array",
+
+      items: {
+        type: "object",
+        required: ["tagPatterns", "attrPatterns"],
+        properties: {
+          tagPatterns: {
+            type: "array",
+            items: {
+              type: "string",
+            },
+          },
+          attrPatterns: {
+            type: "array",
+            items: {
+              type: "string",
+            },
+          },
+          message: {
+            type: "string",
+          },
+        },
+      },
+    },
+    messages: {
+      [MESSAGE_IDS.RESTRICTED]: "'{{attr}}' is restricted from being used.",
+    },
+  },
+
+  create(context) {
+    /**
+     * @type {Options}
+     */
+    const options = context.options;
+    const checkers = options.map((option) => new PatternChecker(option));
+
+    return {
+      "*"(node) {
+        const tagName = node.tagName;
+        const startTag = node.startTag;
+        if (!tagName || !startTag) return;
+        if (!node.attrs.length) return;
+
+        node.attrs.forEach((attr) => {
+          if (!attr.name) return;
+
+          const matched = checkers.find((checker) =>
+            checker.test(node.tagName, attr.name)
+          );
+
+          if (!matched) return;
+
+          /**
+           * @type {{node: AnyNode, message: string, messageId?: string}}
+           */
+
+          const result = {
+            node: startTag,
+            message: "",
+          };
+
+          const customMessage = matched.getMessage();
+
+          if (customMessage) {
+            result.message = customMessage;
+          } else {
+            result.messageId = MESSAGE_IDS.RESTRICTED;
+          }
+
+          context.report({
+            ...result,
+            data: { attr: attr.name },
+          });
+        });
+      },
+    };
+  },
+};
+
+class PatternChecker {
+  /**
+   * @param {Options[number]} option
+   */
+  constructor(option) {
+    this.option = option;
+    this.tagRegExps = option.tagPatterns.map(
+      (pattern) => new RegExp(pattern, "u")
+    );
+    this.attrRegExps = option.attrPatterns.map(
+      (pattern) => new RegExp(pattern, "u")
+    );
+    this.message = option.message;
+  }
+
+  /**
+   * @param {string} tagName
+   * @param {string} attrName
+   * @returns {boolean}
+   */
+  test(tagName, attrName) {
+    const result =
+      this.tagRegExps.some((exp) => exp.test(tagName)) &&
+      this.attrRegExps.some((exp) => exp.test(attrName));
+    return result;
+  }
+
+  /**
+   * @returns {string}
+   */
+  getMessage() {
+    return this.message || "";
+  }
+}

package/lib/rules/no-skip-heading-levels.js

@@ -1,9 +1,16 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
 const { RULE_CATEGORY } = require("../constants");
 
 const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",

package/lib/rules/no-target-blank.js

@@ -1,3 +1,7 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
 const { RULE_CATEGORY } = require("../constants");
 const { NodeUtils } = require("./utils");
 
@@ -5,6 +9,9 @@ const MESSAGE_IDS = {
   MISSING: "missing",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",

package/lib/rules/quotes.js

@@ -1,3 +1,9 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ * @typedef {import("../types").Range} Range
+ * @typedef {import("../types").AttrNode} AttrNode
+ */
+
 const { RULE_CATEGORY } = require("../constants");
 
 const MESSAGE_IDS = {
@@ -12,6 +18,9 @@ const QUOTES_STYLES = {
 
 const QUOTES_CODES = [`"`, `'`];
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -45,16 +54,28 @@ module.exports = {
 
     const sourceCode = context.getSourceCode();
 
+    /**
+     * @param {Range} range
+     * @returns {string}
+     */
     function getCodeIn(range) {
       return sourceCode.text.slice(range[0], range[1]);
     }
 
+    /**
+     * @param {AttrNode} attr
+     * @returns {Range}
+     */
     function getValueRange(attr) {
       const attrCode = getCodeIn(attr.range);
       const [matched = ""] = attrCode.match(/\S*?\s*=\s*/) || [];
       return [attr.range[0] + matched.length, attr.range[1]];
     }
 
+    /**
+     * @param {AttrNode} attr
+     * @returns {[string, string]}
+     */
     function getQuotes(attr) {
       const [valueStart, valueEnd] = getValueRange(attr);
       const opening = getCodeIn([valueStart, valueStart + 1]);
@@ -62,11 +83,18 @@ module.exports = {
       return [opening, closing];
     }
 
+    /**
+     * @param {AttrNode} attr
+     * @returns {boolean}
+     */
     function hasEqualSign(attr) {
       const keyEnd = attr.range[0] + attr.name.length;
       return getCodeIn([keyEnd, attr.range[1]]).trimStart().startsWith("=");
     }
 
+    /**
+     * @param {AttrNode} attr
+     */
     function checkQuotes(attr) {
       const [opening, closing] = getQuotes(attr);
       if (QUOTES_CODES.includes(opening)) {

package/lib/rules/require-button-type.js

@@ -1,3 +1,7 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
 const { RULE_CATEGORY } = require("../constants");
 const { NodeUtils } = require("./utils");
 
@@ -8,6 +12,9 @@ const MESSAGE_IDS = {
 
 const VALID_BUTTON_TYPES_SET = new Set(["submit", "button", "reset"]);
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",

package/lib/rules/require-closing-tags.js

@@ -1,3 +1,7 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
 const { RULE_CATEGORY, VOID_ELEMENTS } = require("../constants");
 
 const VOID_ELEMENTS_SET = new Set(VOID_ELEMENTS);
@@ -8,6 +12,9 @@ const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -50,6 +57,16 @@ module.exports = {
 
     function checkClosingTag(node) {
       if (node.startTag && !node.endTag) {
+        if (
+          node.namespaceURI === "http://www.w3.org/2000/svg" ||
+          node.namespaceURI === "http://www.w3.org/1998/Math/MathML"
+        ) {
+          const code = getCodeIn(node.startTag.range);
+          const hasSelfClose = code.endsWith("/>");
+          if (hasSelfClose) {
+            return;
+          }
+        }
         context.report({
           node: node.startTag,
           data: {
@@ -60,7 +77,7 @@ module.exports = {
       }
     }
 
-    function checkSelfClosing(node) {
+    function checkVoidElement(node) {
       const startTag = node.startTag;
       const code = getCodeIn(startTag.range);
       const hasSelfClose = code.endsWith("/>");
@@ -101,7 +118,7 @@ module.exports = {
       "*"(node) {
         if (node.startTag) {
           if (VOID_ELEMENTS_SET.has(node.tagName)) {
-            checkSelfClosing(node);
+            checkVoidElement(node);
           } else {
             checkClosingTag(node);
           }

package/lib/rules/require-doctype.js

@@ -1,9 +1,16 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
 const { RULE_CATEGORY } = require("../constants");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",

package/lib/rules/require-frame-title.js

@@ -1,3 +1,7 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
 const { RULE_CATEGORY } = require("../constants");
 const { NodeUtils } = require("./utils");
 
@@ -6,6 +10,9 @@ const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",

package/lib/rules/require-img-alt.js

@@ -1,9 +1,17 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ * @typedef {import("../types").ElementNode} ElementNode
+ */
+
 const { RULE_CATEGORY } = require("../constants");
 
 const MESSAGE_IDS = {
   MISSING_ALT: "missingAlt",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -35,8 +43,13 @@ module.exports = {
   },
 };
 
+/**
+ * Checks whether a node has `alt` attribute value or not.
+ * @param {ElementNode} node a node to check.
+ * @returns {boolean} `true` if a node has `alt` attribute value.
+ */
 function hasAltAttrAndValue(node) {
   return (node.attrs || []).some((attr) => {
-    return attr.name === "alt" && attr.value.trim().length > 0;
+    return attr.name === "alt" && typeof attr.value === "string";
   });
 }

package/lib/rules/require-lang.js

@@ -1,4 +1,7 @@
-// @ts-check
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
 const { RULE_CATEGORY } = require("../constants");
 const { NodeUtils } = require("./utils");
 
@@ -7,6 +10,9 @@ const MESSAGE_IDS = {
   EMPTY: "empty",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",

package/lib/rules/require-li-container.js

@@ -1,3 +1,7 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
 const { RULE_CATEGORY, NODE_TYPES } = require("../constants");
 
 const MESSAGE_IDS = {
@@ -6,6 +10,9 @@ const MESSAGE_IDS = {
 
 const VALID_CONTAINERS = [NODE_TYPES.UL, NODE_TYPES.OL, NODE_TYPES.MENU];
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -27,7 +34,12 @@ module.exports = {
   create(context) {
     return {
       Li(node) {
-        if (!node.parent || !VALID_CONTAINERS.includes(node.parent.type)) {
+        if (!node.parent) {
+          context.report({
+            node,
+            messageId: MESSAGE_IDS.INVALID,
+          });
+        } else if (!VALID_CONTAINERS.includes(node.parent.type || "")) {
           context.report({
             node,
             messageId: MESSAGE_IDS.INVALID,

package/lib/rules/require-meta-charset.js

@@ -1,3 +1,8 @@
+/**
+ * @typedef {import("../types").ElementNode} ElementNode
+ * @typedef {import("../types").Context} Context
+ */
+
 const { RULE_CATEGORY, NODE_TYPES } = require("../constants");
 const { NodeUtils } = require("./utils");
 
@@ -24,8 +29,14 @@ module.exports = {
     },
   },
 
+  /**
+   * @param {Context} context
+   */
   create(context) {
     return {
+      /**
+       * @param {ElementNode} node
+       */
       Head(node) {
         const metaCharset = (node.childNodes || []).find((child) => {
           return (
@@ -41,7 +52,7 @@ module.exports = {
           return;
         }
         const charsetAttr = NodeUtils.findAttr(metaCharset, "charset");
-        if (!charsetAttr || !charsetAttr.value.length) {
+        if (charsetAttr && !charsetAttr.value.length) {
           context.report({
             node: charsetAttr,
             messageId: MESSAGE_IDS.EMPTY,

package/lib/rules/require-meta-description.js

@@ -1,3 +1,8 @@
+/**
+ * @typedef {import("../types").ElementNode} ElementNode
+ * @typedef {import("../types").Context} Context
+ */
+
 const { RULE_CATEGORY, NODE_TYPES } = require("../constants");
 const { NodeUtils } = require("./utils");
 
@@ -25,8 +30,14 @@ module.exports = {
     },
   },
 
+  /**
+   * @param {Context} context
+   */
   create(context) {
     return {
+      /**
+       * @param {ElementNode} node
+       */
       Head(node) {
         const metaTags = (node.childNodes || []).filter(
           (child) => child.type === NODE_TYPES.META

package/lib/rules/require-meta-viewport.js

@@ -1,7 +1,6 @@
-// @ts-check
 /**
- * @typedef {import("../types").HTMLNode} HTMLNode
- * @typedef {import("../types").AttrNode} AttrNode
+ * @typedef {import("../types").ElementNode} ElementNode
+ * @typedef {import("../types").Rule} Rule
  */
 
 const { RULE_CATEGORY, NODE_TYPES } = require("../constants");
@@ -12,6 +11,9 @@ const MESSAGE_IDS = {
   EMPTY: "empty",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -33,7 +35,7 @@ module.exports = {
 
   create(context) {
     /**
-     * @param {HTMLNode} node
+     * @param {ElementNode} node
      * @returns {boolean}
      */
     function isMetaViewport(node) {
@@ -44,9 +46,6 @@ module.exports = {
       return false;
     }
     return {
-      /**
-       * @param {HTMLNode} node
-       */
       Head(node) {
         const metaViewport = (node.childNodes || []).find(isMetaViewport);
         if (!metaViewport) {
@@ -57,7 +56,12 @@ module.exports = {
           return;
         }
         const contentAttr = NodeUtils.findAttr(metaViewport, "content");
-        if (!contentAttr || !contentAttr.value.length) {
+        if (!contentAttr) {
+          context.report({
+            node: metaViewport,
+            messageId: MESSAGE_IDS.EMPTY,
+          });
+        } else if (!contentAttr.value.length) {
           context.report({
             node: contentAttr,
             messageId: MESSAGE_IDS.EMPTY,

package/lib/rules/require-title.js

@@ -1,10 +1,18 @@
+/**
+ * @typedef {import("../types").Rule} Rule
+ */
+
 const { RULE_CATEGORY, NODE_TYPES } = require("../constants");
+const { NodeUtils } = require("./utils");
 
 const MESSAGE_IDS = {
   MISSING_TITLE: "missing",
   EMPTY_TITLE: "empty",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -23,7 +31,6 @@ module.exports = {
       [MESSAGE_IDS.EMPTY_TITLE]: "Unexpected empty text in `<title><title/>`",
     },
   },
-
   create(context) {
     return {
       Head(node) {
@@ -38,8 +45,7 @@ module.exports = {
           });
         } else if (
           !(titleTag.childNodes || []).some(
-            (node) =>
-              node.type === NODE_TYPES.TEXT && node.value.trim().length > 0
+            (node) => NodeUtils.isTextNode(node) && node.value.trim().length > 0
           )
         ) {
           context.report({

package/lib/rules/utils/node-utils.js

@@ -1,13 +1,17 @@
-// @ts-check
 /**
- * @typedef {import("../../types").HTMLNode} HTMLNode
+ * @typedef {import("../../types").ElementNode} ElementNode
  * @typedef {import("../../types").AttrNode} AttrNode
+ * @typedef {import("../../types").AnyNode} AnyNode
+ * @typedef {import("../../types").TextNode} TextNode
+ * @typedef {import("../../types").BaseNode} BaseNode
+ * @typedef {import("../../types").TextLineNode} TextLineNode
+ * @typedef {import("../../types").CommentNode} CommentNode
  */
 
 module.exports = {
   /**
    * Find attribute by name in the given node
-   * @param {HTMLNode} node node
+   * @param {ElementNode} node node
    * @param {string} name attribute name
    * @return {AttrNode | void}
    */
@@ -20,7 +24,7 @@ module.exports = {
   },
   /**
    * Checks a node has attribute with the given name or not.
-   * @param {HTMLNode} node node
+   * @param {ElementNode} node node
    * @param {string} name attribute name
    * @return {boolean} `true` if the node has a attribute, otherwise `false`.
    */
@@ -29,10 +33,28 @@ module.exports = {
   },
   /**
    * Checks whether a node's all tokens are on the same line or not.
-   * @param {HTMLNode} node A node to check
+   * @param {ElementNode} node A node to check
    * @returns {boolean} `true` if a node's tokens are on the same line, otherwise `false`.
    */
   isNodeTokensOnSameLine(node) {
     return node.loc.start.line === node.loc.end.line;
   },
+
+  /**
+   * Checks whether a node is a TextNode or not.
+   * @param {Object} node A node to check
+   * @returns {node is TextNode} `true` if a node is `TextNode`, otherwise `false`.
+   */
+  isTextNode(node) {
+    return !!(node && node.type === "text" && typeof node.value === "string");
+  },
+
+  /**
+   * Checks whether a node is a CommentNode or not.
+   * @param {Object} node A node to check
+   * @returns {node is CommentNode} `true` if a node is `CommentNode`, otherwise `false`.
+   */
+  isCommentNode(node) {
+    return !!(node && node.type === "comment");
+  },
 };