@html-eslint/eslint-plugin 0.13.1 → 0.14.0

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

@@ -1,17 +1,9 @@
-/**
- * @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",
@@ -31,10 +23,19 @@ module.exports = {
 
   create(context) {
     return {
-      Img(node) {
+      Tag(node) {
+        if (node.name !== "img") {
+          return;
+        }
         if (!hasAltAttrAndValue(node)) {
           context.report({
-            node: node.startTag,
+            node: {
+              loc: {
+                start: node.openStart.loc.start,
+                end: node.openEnd.loc.end,
+              },
+              range: [node.openStart.range[0], node.openEnd.range[1]],
+            },
             messageId: MESSAGE_IDS.MISSING_ALT,
           });
         }
@@ -43,13 +44,10 @@ 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" && typeof attr.value === "string";
+  return node.attributes.some((attr) => {
+    if (attr.key && attr.value) {
+      return attr.key.value === "alt" && typeof attr.value.value === "string";
+    }
   });
 }

package/lib/rules/require-lang.js

@@ -10,9 +10,6 @@ const MESSAGE_IDS = {
   EMPTY: "empty",
 };
 
-/**
- * @type {Rule}
- */
 module.exports = {
   meta: {
     type: "code",
@@ -33,16 +30,25 @@ module.exports = {
 
   create(context) {
     return {
-      Html(node) {
+      Tag(node) {
+        if (node.name !== "html") {
+          return;
+        }
         const langAttr = NodeUtils.findAttr(node, "lang");
         if (!langAttr) {
           context.report({
-            node: node.startTag,
+            node: {
+              loc: {
+                start: node.openStart.loc.start,
+                end: node.openEnd.loc.end,
+              },
+              range: [node.openStart.range[0], node.openEnd.range[1]],
+            },
             messageId: MESSAGE_IDS.MISSING,
           });
-        } else if (langAttr.value.trim().length === 0) {
+        } else if (langAttr.value && langAttr.value.value.trim().length === 0) {
           context.report({
-            node: node.startTag,
+            node: node.openStart,
             messageId: MESSAGE_IDS.EMPTY,
           });
         }

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

@@ -1,18 +1,11 @@
-/**
- * @typedef {import("../types").Rule} Rule
- */
-
-const { RULE_CATEGORY, NODE_TYPES } = require("../constants");
+const { RULE_CATEGORY } = require("../constants");
 
 const MESSAGE_IDS = {
   INVALID: "invalid",
 };
 
-const VALID_CONTAINERS = [NODE_TYPES.UL, NODE_TYPES.OL, NODE_TYPES.MENU];
+const VALID_CONTAINERS = ["ul", "ol", "menu"];
 
-/**
- * @type {Rule}
- */
 module.exports = {
   meta: {
     type: "code",
@@ -33,13 +26,16 @@ module.exports = {
 
   create(context) {
     return {
-      Li(node) {
+      Tag(node) {
+        if (node.name !== "li") {
+          return;
+        }
         if (!node.parent) {
           context.report({
             node,
             messageId: MESSAGE_IDS.INVALID,
           });
-        } else if (!VALID_CONTAINERS.includes(node.parent.type || "")) {
+        } else if (!VALID_CONTAINERS.includes(node.parent.name || "")) {
           context.report({
             node,
             messageId: MESSAGE_IDS.INVALID,

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

@@ -1,9 +1,8 @@
 /**
- * @typedef {import("../types").ElementNode} ElementNode
- * @typedef {import("../types").Context} Context
+ * @typedef {import("../types").Rule} Rule
  */
 
-const { RULE_CATEGORY, NODE_TYPES } = require("../constants");
+const { RULE_CATEGORY } = require("../constants");
 const { NodeUtils } = require("./utils");
 
 const MESSAGE_IDS = {
@@ -11,12 +10,15 @@ const MESSAGE_IDS = {
   EMPTY: "empty",
 };
 
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
 
     docs: {
-      description: 'Enforce to use `<meta name="chartset">` in `<head>`',
+      description: 'Enforce to use `<meta charset="...">` in `<head>`',
       category: RULE_CATEGORY.BEST_PRACTICE,
       recommended: false,
     },
@@ -24,26 +26,26 @@ module.exports = {
     fixable: null,
     schema: [],
     messages: {
-      [MESSAGE_IDS.MISSING]: 'Missing `<meta name="description">`.',
+      [MESSAGE_IDS.MISSING]: 'Missing `<meta charset="...">`.',
       [MESSAGE_IDS.EMPTY]: "Unexpected empty charset.",
     },
   },
 
-  /**
-   * @param {Context} context
-   */
   create(context) {
     return {
-      /**
-       * @param {ElementNode} node
-       */
-      Head(node) {
-        const metaCharset = (node.childNodes || []).find((child) => {
+      Tag(node) {
+        if (node.name !== "head") {
+          return;
+        }
+
+        const metaCharset = node.children.find((child) => {
           return (
-            child.type === NODE_TYPES.META &&
+            child.type === "Tag" &&
+            child.name === "meta" &&
             !!NodeUtils.findAttr(child, "charset")
           );
         });
+
         if (!metaCharset) {
           context.report({
             node,
@@ -52,11 +54,13 @@ module.exports = {
           return;
         }
         const charsetAttr = NodeUtils.findAttr(metaCharset, "charset");
-        if (charsetAttr && !charsetAttr.value.length) {
-          context.report({
-            node: charsetAttr,
-            messageId: MESSAGE_IDS.EMPTY,
-          });
+        if (charsetAttr) {
+          if (!charsetAttr.value || !charsetAttr.value.value.length) {
+            context.report({
+              node: charsetAttr,
+              messageId: MESSAGE_IDS.EMPTY,
+            });
+          }
         }
       },
     };

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

@@ -1,9 +1,9 @@
 /**
- * @typedef {import("../types").ElementNode} ElementNode
- * @typedef {import("../types").Context} Context
+ * @typedef {import("../types").Rule} Rule
+ * @typedef {import("es-html-parser").TagNode} TagNode
  */
 
-const { RULE_CATEGORY, NODE_TYPES } = require("../constants");
+const { RULE_CATEGORY } = require("../constants");
 const { NodeUtils } = require("./utils");
 
 const MESSAGE_IDS = {
@@ -11,6 +11,17 @@ const MESSAGE_IDS = {
   EMPTY: "empty",
 };
 
+/**
+ * @param {TagNode['children'][number]} node
+ * @returns {boolean}
+ */
+function isMetaTagNode(node) {
+  return node.type === "Tag" && node.name === "meta";
+}
+
+/**
+ * @type {Rule}
+ */
 module.exports = {
   meta: {
     type: "code",
@@ -29,22 +40,21 @@ module.exports = {
         'Unexpected empty `content` in `<meta name="description">`',
     },
   },
-
-  /**
-   * @param {Context} context
-   */
   create(context) {
     return {
-      /**
-       * @param {ElementNode} node
-       */
-      Head(node) {
-        const metaTags = (node.childNodes || []).filter(
-          (child) => child.type === NODE_TYPES.META
-        );
+      Tag(node) {
+        if (node.name !== "head") {
+          return;
+        }
+        const metaTags = node.children.filter(isMetaTagNode);
+
         const descriptionMetaTags = metaTags.filter((meta) => {
           const nameAttr = NodeUtils.findAttr(meta, "name");
-          return !!nameAttr && nameAttr.value.toLowerCase() === "description";
+          return (
+            !!nameAttr &&
+            nameAttr.value &&
+            nameAttr.value.value.toLowerCase() === "description"
+          );
         });
 
         if (descriptionMetaTags.length === 0) {
@@ -55,7 +65,11 @@ module.exports = {
         } else {
           descriptionMetaTags.forEach((meta) => {
             const content = NodeUtils.findAttr(meta, "content");
-            if (!content || !content.value.trim().length) {
+            if (
+              !content ||
+              !content.value ||
+              !content.value.value.trim().length
+            ) {
               context.report({
                 node: content || meta,
                 messageId: MESSAGE_IDS.EMPTY,

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

@@ -1,9 +1,9 @@
 /**
- * @typedef {import("../types").ElementNode} ElementNode
  * @typedef {import("../types").Rule} Rule
+ * @typedef {import("es-html-parser").TagNode} TagNode
  */
 
-const { RULE_CATEGORY, NODE_TYPES } = require("../constants");
+const { RULE_CATEGORY } = require("../constants");
 const { NodeUtils } = require("./utils");
 
 const MESSAGE_IDS = {
@@ -11,6 +11,23 @@ const MESSAGE_IDS = {
   EMPTY: "empty",
 };
 
+/**
+ * Checks whether a given node is a meta tag with viewport attribute or not.
+ * @param {TagNode['children'][number]} node A node to check
+ * @returns {node is TagNode} Return true if the given node is a meta tag with viewport attribute, otherwise false.
+ */
+function isMetaViewport(node) {
+  if (node.type === "Tag" && node.name === "meta") {
+    const nameAttribute = NodeUtils.findAttr(node, "name");
+    return (
+      nameAttribute &&
+      nameAttribute.value &&
+      nameAttribute.value.value.toLowerCase() === "viewport"
+    );
+  }
+  return false;
+}
+
 /**
  * @type {Rule}
  */
@@ -34,20 +51,14 @@ module.exports = {
   },
 
   create(context) {
-    /**
-     * @param {ElementNode} node
-     * @returns {boolean}
-     */
-    function isMetaViewport(node) {
-      if (node.type === NODE_TYPES.META) {
-        const nameAttr = NodeUtils.findAttr(node, "name");
-        return !!nameAttr && nameAttr.value.toLowerCase() === "viewport";
-      }
-      return false;
-    }
     return {
-      Head(node) {
-        const metaViewport = (node.childNodes || []).find(isMetaViewport);
+      Tag(node) {
+        if (node.name !== "head") {
+          return;
+        }
+
+        const metaViewport = node.children.find(isMetaViewport);
+
         if (!metaViewport) {
           context.report({
             node,
@@ -55,15 +66,17 @@ module.exports = {
           });
           return;
         }
-        const contentAttr = NodeUtils.findAttr(metaViewport, "content");
-        if (!contentAttr) {
-          context.report({
-            node: metaViewport,
-            messageId: MESSAGE_IDS.EMPTY,
-          });
-        } else if (!contentAttr.value.length) {
+
+        const contentAttribute = NodeUtils.findAttr(metaViewport, "content");
+        const isValueEmpty =
+          !contentAttribute.value || !contentAttribute.value.value.length;
+
+        if (isValueEmpty) {
+          const reportTarget = !contentAttribute.value
+            ? metaViewport
+            : contentAttribute;
           context.report({
-            node: contentAttr,
+            node: reportTarget,
             messageId: MESSAGE_IDS.EMPTY,
           });
         }

package/lib/rules/require-title.js

@@ -1,15 +1,33 @@
 /**
  * @typedef {import("../types").Rule} Rule
+ * @typedef {import("es-html-parser").TagNode} TagNode
+ * @typedef {import("es-html-parser").TextNode} TextNode
  */
-
-const { RULE_CATEGORY, NODE_TYPES } = require("../constants");
-const { NodeUtils } = require("./utils");
+const { RULE_CATEGORY } = require("../constants");
 
 const MESSAGE_IDS = {
   MISSING_TITLE: "missing",
   EMPTY_TITLE: "empty",
 };
 
+/**
+ * Checks whether the node is a title TagNode.
+ * @param {TagNode['children'][number]} node A node to check
+ * @returns {node is TagNode} Returns true if the given node is a title TagNode, otherwise false
+ */
+function isTitleTagNode(node) {
+  return node.type === "Tag" && node.name === "title";
+}
+
+/**
+ * Checks whether the node is a TextNode that has value.
+ * @param {TagNode['children'][number]} node A node to check
+ * @returns {node is TextNode} Returns true if the given node is a TextNode with non-empty value, otherwise false
+ */
+function isNonEmptyTextNode(node) {
+  return node.type === "Text" && node.value.trim().length > 0;
+}
+
 /**
  * @type {Rule}
  */
@@ -33,25 +51,29 @@ module.exports = {
   },
   create(context) {
     return {
-      Head(node) {
-        const titleTag = (node.childNodes || []).find(
-          (node) => node.type === NODE_TYPES.TITLE
-        );
+      Tag(node) {
+        if (node.name !== "head") {
+          return;
+        }
+        const titleTag = node.children.find(isTitleTagNode);
 
         if (!titleTag) {
           context.report({
             node,
             messageId: MESSAGE_IDS.MISSING_TITLE,
           });
-        } else if (
-          !(titleTag.childNodes || []).some(
-            (node) => NodeUtils.isTextNode(node) && node.value.trim().length > 0
-          )
-        ) {
-          context.report({
-            node: titleTag,
-            messageId: MESSAGE_IDS.EMPTY_TITLE,
-          });
+          return;
+        }
+
+        if (isTitleTagNode(titleTag)) {
+          const titleContentText = titleTag.children.find(isNonEmptyTextNode);
+
+          if (!titleContentText) {
+            context.report({
+              node: titleTag,
+              messageId: MESSAGE_IDS.EMPTY_TITLE,
+            });
+          }
         }
       },
     };

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

@@ -1,39 +1,40 @@
 /**
- * @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
+ * @typedef {import("es-html-parser").TagNode} TagNode
+ * @typedef {import("es-html-parser").AnyNode} AnyNode
+ * @typedef {import("es-html-parser").TextNode} TextNode
+ * @typedef {import("es-html-parser").AttributeNode} AttributeNode
+ * @typedef {import("../../types").LineNode} LineNode
+ * @typedef {import("../../types").CommentContentNode} CommentContentNode
  */
 
 module.exports = {
-  /**
-   * Find attribute by name in the given node
-   * @param {ElementNode} node node
-   * @param {string} name attribute name
-   * @return {AttrNode | void}
+  /*
+   * @param {TagNode} node
+   * @param {string} name
+   * @returns {AttributeNode | undefined}
    */
   findAttr(node, name) {
-    return node
-      ? (node.attrs || []).find(
-          (attr) => attr.name.toLowerCase() === name.toLowerCase()
-        )
-      : undefined;
+    return node.attributes.find(
+      (attr) => attr.key && attr.key.value.toLowerCase() === name.toLowerCase()
+    );
   },
   /**
    * Checks a node has attribute with the given name or not.
-   * @param {ElementNode} node node
+   * @param {TagNode} node node
    * @param {string} name attribute name
    * @return {boolean} `true` if the node has a attribute, otherwise `false`.
    */
   hasAttr(node, name) {
-    return !!node && (node.attrs || []).some((attr) => attr.name === name);
+    return (
+      !!node &&
+      (node.attributes || []).some(
+        (attr) => attr.key && attr.key.value === name
+      )
+    );
   },
   /**
    * Checks whether a node's all tokens are on the same line or not.
-   * @param {ElementNode} node A node to check
+   * @param {AnyNode} node A node to check
    * @returns {boolean} `true` if a node's tokens are on the same line, otherwise `false`.
    */
   isNodeTokensOnSameLine(node) {
@@ -57,4 +58,41 @@ module.exports = {
   isCommentNode(node) {
     return !!(node && node.type === "comment");
   },
+
+  /**
+   *
+   * @param {TextNode | CommentContentNode} node
+   * @returns {LineNode[]}
+   */
+  splitToLineNodes(node) {
+    let start = node.range[0];
+    let line = node.loc.start.line;
+    const startCol = node.loc.start.column;
+
+    return node.value.split("\n").map((value, index) => {
+      const columnStart = index === 0 ? startCol : 0;
+      /**
+       * @type {LineNode}
+       */
+      const lineNode = {
+        type: "Line",
+        value,
+        range: [start, start + value.length],
+        loc: {
+          start: {
+            line,
+            column: columnStart,
+          },
+          end: {
+            line,
+            column: columnStart + value.length,
+          },
+        },
+      };
+
+      start += value.length + 1;
+      line += 1;
+      return lineNode;
+    });
+  },
 };