@html-eslint/eslint-plugin 0.27.0 → 0.28.0-alpha.3

package/lib/rules/attrs-newline.js

@@ -2,6 +2,7 @@
  * @typedef { import("../types").RuleFixer } RuleFixer
  * @typedef { import("../types").RuleModule } RuleModule
  * @typedef { import("../types").TagNode } TagNode
+ * @typedef {import("../types").RuleListener}
  * @typedef {Object} MessageId
  * @property {"closeStyleWrong"} CLOSE_STYLE_WRONG
  * @property {"newlineMissing"} NEWLINE_MISSING
@@ -9,6 +10,7 @@
  */
 
 const { RULE_CATEGORY } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
 
 /**
  * @type {MessageId}
@@ -63,10 +65,7 @@ module.exports = {
       : options.ifAttrsMoreThan;
     const closeStyle = options.closeStyle || "newline";
 
-    return {
-      /**
-       * @param {TagNode} node
-       */
+    return createVisitors(context, {
       Tag(node) {
         const shouldBeMultiline = node.attributes.length > attrMin;
 
@@ -158,6 +157,6 @@ module.exports = {
           }
         }
       },
-    };
+    });
   },
 };

package/lib/rules/element-newline.js

@@ -1,6 +1,5 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").ProgramNode } ProgramNode
  * @typedef { import("../types").TagNode } TagNode
  * @typedef { import("../types").BaseNode } BaseNode
  * @typedef { import("../types").CommentNode } CommentNode
@@ -17,7 +16,8 @@
  */
 
 const { RULE_CATEGORY } = require("../constants");
-
+const { isTag, isComment, isText } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
 const MESSAGE_IDS = {
   EXPECT_NEW_LINE_AFTER: "expectAfter",
   EXPECT_NEW_LINE_AFTER_OPEN: "expectAfterOpen",
@@ -159,7 +159,7 @@ module.exports = {
 
         const nodeShouldBeNewline = shouldBeNewline(node);
 
-        if (node.type === `Tag` && skipTags.includes(node.name) === false) {
+        if (isTag(node) && skipTags.includes(node.name) === false) {
           const nodeMeta = checkSiblings(node.children);
           const nodeChildShouldBeNewline = nodeMeta.shouldBeNewline;
 
@@ -260,16 +260,13 @@ module.exports = {
      */
     function label(node, options = {}) {
       const isClose = options.isClose || false;
-
-      switch (node.type) {
-        case `Tag`:
-          if (isClose) {
-            return `</${node.name}>`;
-          }
-          return `<${node.name}>`;
-        default:
-          return `<${node.type}>`;
+      if (isTag(node)) {
+        if (isClose) {
+          return `</${node.name}>`;
+        }
+        return `<${node.name}>`;
       }
+      return `<${node.type}>`;
     }
 
     /**
@@ -292,23 +289,23 @@ module.exports = {
      * @param {NewlineNode} node
      */
     function shouldBeNewline(node) {
-      switch (node.type) {
-        case `Comment`:
-          return /[\n\r]+/.test(node.value.value.trim());
-        case `Tag`:
-          return inlineTags.includes(node.name.toLowerCase()) === false;
-        case `Text`:
-          return /[\n\r]+/.test(node.value.trim());
-        default:
-          return true;
+      if (isComment(node)) {
+        return /[\n\r]+/.test(node.value.value.trim());
+      }
+      if (isTag(node)) {
+        return inlineTags.includes(node.name.toLowerCase()) === false;
+      }
+      if (isText(node)) {
+        return /[\n\r]+/.test(node.value.trim());
       }
+      return true;
     }
 
-    return {
-      Program(node) {
+    return createVisitors(context, {
+      Document(node) {
         // @ts-ignore
-        checkSiblings(node.body);
+        checkSiblings(node.children);
       },
-    };
+    });
   },
 };

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

@@ -12,7 +12,12 @@ const {
   isPascalCase,
   isKebabCase,
 } = require("./utils/naming");
-const { findAttr } = require("./utils/node");
+const {
+  findAttr,
+  isAttributesEmpty,
+  isExpressionInTemplate,
+} = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   WRONG: "wrong",
@@ -81,27 +86,63 @@ module.exports = {
             ).test(name)
         : CONVENTION_CHECKERS[convention];
 
-    return {
-      /**
-       * @param {TagNode | ScriptTagNode | StyleTagNode} node
-       * @returns
-       */
-      [["Tag", "ScriptTag", "StyleTag"].join(",")](node) {
-        if (!node.attributes || node.attributes.length <= 0) {
-          return;
-        }
-        const idAttr = findAttr(node, "id");
-        if (idAttr && idAttr.value && !checkNaming(idAttr.value.value)) {
-          context.report({
-            node: idAttr,
-            data: {
-              actual: idAttr.value.value,
-              convention,
-            },
-            messageId: MESSAGE_IDS.WRONG,
-          });
-        }
+    /**
+     * @param {TagNode | ScriptTagNode | StyleTagNode} node
+     */
+    function check(node) {
+      if (isAttributesEmpty(node)) {
+        return;
+      }
+      const idAttr = findAttr(node, "id");
+      if (idAttr && idAttr.value && !checkNaming(idAttr.value.value)) {
+        context.report({
+          node: idAttr,
+          data: {
+            actual: idAttr.value.value,
+            convention,
+          },
+          messageId: MESSAGE_IDS.WRONG,
+        });
+      }
+    }
+
+    /**
+     * @param {TagNode | ScriptTagNode | StyleTagNode} node
+     */
+    function checkInTemplate(node) {
+      if (isAttributesEmpty(node)) {
+        return;
+      }
+      const idAttr = findAttr(node, "id");
+      if (
+        idAttr &&
+        idAttr.value &&
+        !isExpressionInTemplate(idAttr.value) &&
+        !checkNaming(idAttr.value.value)
+      ) {
+        context.report({
+          node: idAttr,
+          data: {
+            actual: idAttr.value.value,
+            convention,
+          },
+          messageId: MESSAGE_IDS.WRONG,
+        });
+      }
+    }
+
+    return createVisitors(
+      context,
+      {
+        Tag: check,
+        ScriptTag: check,
+        StyleTag: check,
       },
-    };
+      {
+        Tag: checkInTemplate,
+        ScriptTag: checkInTemplate,
+        StyleTag: checkInTemplate,
+      }
+    );
   },
 };

package/lib/rules/indent.js

@@ -13,6 +13,8 @@
 
 const { RULE_CATEGORY } = require("../constants");
 const { splitToLineNodes } = require("./utils/node");
+const { getSourceCode } = require("./utils/source-code");
+const { createVisitors } = require("./utils/visitors");
 
 /** @type {MessageId} */
 const MESSAGE_ID = {
@@ -60,7 +62,7 @@ module.exports = {
     },
   },
   create(context) {
-    const sourceCode = context.getSourceCode();
+    const sourceCode = getSourceCode(context);
     let indentLevel = -1;
     let parentIgnoringChildCount = 0;
 
@@ -213,8 +215,7 @@ module.exports = {
       }
     }
 
-    return {
-      // Tag
+    return createVisitors(context, {
       Tag(node) {
         if (IGNORING_NODES.includes(node.name)) {
           parentIgnoringChildCount++;
@@ -253,6 +254,9 @@ module.exports = {
         indent();
         const lineNodes = splitToLineNodes(node);
         lineNodes.forEach((lineNode) => {
+          if (lineNode.skipIndentCheck) {
+            return;
+          }
           if (lineNode.value.trim().length) {
             checkIndent(lineNode);
           }
@@ -267,6 +271,9 @@ module.exports = {
         indent();
         const lineNodes = splitToLineNodes(node);
         lineNodes.forEach((lineNode) => {
+          if (lineNode.skipIndentCheck) {
+            return;
+          }
           if (lineNode.value.trim().length) {
             checkIndent(lineNode);
           }
@@ -275,6 +282,6 @@ module.exports = {
       CommentClose: checkIndent,
       "Comment:exit": unindent,
       "CommentContent:exit": unindent,
-    };
+    });
   },
 };

package/lib/rules/lowercase.js

@@ -3,11 +3,13 @@
  * @typedef { import("../types").TagNode } TagNode
  * @typedef { import("../types").StyleTagNode } StyleTagNode
  * @typedef { import("../types").ScriptTagNode } ScriptTagNode
+ * @typedef { import("../types").RuleListener } RuleListener
  */
 
 const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
 const SVG_CAMEL_CASE_ATTRIBUTES = require("../constants/svg-camel-case-attributes");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
@@ -120,16 +122,13 @@ module.exports = {
       }
     }
 
-    return {
+    return createVisitors(context, {
       Tag(node) {
         if (node.name.toLocaleLowerCase() === "svg") {
           enterSvg(node);
         }
         check(node);
       },
-      /**
-       * @param {TagNode} node
-       */
       "Tag:exit"(node) {
         if (node.name.toLocaleLowerCase() === "svg") {
           exitSvg();
@@ -137,6 +136,6 @@ module.exports = {
       },
       StyleTag: check,
       ScriptTag: check,
-    };
+    });
   },
 };

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

@@ -7,6 +7,7 @@
 
 const { RULE_CATEGORY } = require("../constants");
 const { findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
@@ -48,24 +49,27 @@ module.exports = {
   },
 
   create(context) {
-    return {
-      /**
-       *
-       * @param {TagNode | ScriptTagNode | StyleTagNode} node
-       */
-      [["Tag", "ScriptTag", "StyleTag"].join(",")](node) {
-        const roleAttr = findAttr(node, "role");
-        if (
-          roleAttr &&
-          roleAttr.value &&
-          ABSTRACT_ROLE_SET.has(roleAttr.value.value)
-        ) {
-          context.report({
-            messageId: MESSAGE_IDS.UNEXPECTED,
-            node: roleAttr,
-          });
-        }
-      },
-    };
+    /**
+     * @param {TagNode | ScriptTagNode | StyleTagNode} node
+     */
+    function check(node) {
+      const roleAttr = findAttr(node, "role");
+      if (
+        roleAttr &&
+        roleAttr.value &&
+        ABSTRACT_ROLE_SET.has(roleAttr.value.value)
+      ) {
+        context.report({
+          messageId: MESSAGE_IDS.UNEXPECTED,
+          node: roleAttr,
+        });
+      }
+    }
+
+    return createVisitors(context, {
+      Tag: check,
+      ScriptTag: check,
+      StyleTag: check,
+    });
   },
 };

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

@@ -7,6 +7,7 @@
 
 const { RULE_CATEGORY } = require("../constants");
 const { findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
@@ -33,19 +34,22 @@ module.exports = {
   },
 
   create(context) {
-    return {
-      /**
-       * @param {TagNode | ScriptTagNode | StyleTagNode} node
-       */
-      [["Tag", "ScriptTag", "StyleTag"].join(",")](node) {
-        const accessKeyAttr = findAttr(node, "accesskey");
-        if (accessKeyAttr) {
-          context.report({
-            node: accessKeyAttr,
-            messageId: MESSAGE_IDS.UNEXPECTED,
-          });
-        }
-      },
-    };
+    /**
+     * @param {TagNode | ScriptTagNode | StyleTagNode} node
+     */
+    function check(node) {
+      const accessKeyAttr = findAttr(node, "accesskey");
+      if (accessKeyAttr) {
+        context.report({
+          node: accessKeyAttr,
+          messageId: MESSAGE_IDS.UNEXPECTED,
+        });
+      }
+    }
+    return createVisitors(context, {
+      Tag: check,
+      ScriptTag: check,
+      StyleTag: check,
+    });
   },
 };

package/lib/rules/no-aria-hidden-body.js

@@ -4,6 +4,7 @@
 
 const { RULE_CATEGORY } = require("../constants");
 const { findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
@@ -31,24 +32,29 @@ module.exports = {
   },
 
   create(context) {
-    return {
+    return createVisitors(context, {
       Tag(node) {
         if (node.name !== "body") {
           return;
         }
         const ariaHiddenAttr = findAttr(node, "aria-hidden");
-        if (ariaHiddenAttr) {
-          if (
-            (ariaHiddenAttr.value && ariaHiddenAttr.value.value !== "false") ||
-            !ariaHiddenAttr.value
-          ) {
-            context.report({
-              node: ariaHiddenAttr,
-              messageId: MESSAGE_IDS.UNEXPECTED,
-            });
-          }
+        if (!ariaHiddenAttr) {
+          return;
+        }
+        if (ariaHiddenAttr.value && ariaHiddenAttr.value.templates.length) {
+          return;
+        }
+
+        if (
+          (ariaHiddenAttr.value && ariaHiddenAttr.value.value !== "false") ||
+          !ariaHiddenAttr.value
+        ) {
+          context.report({
+            node: ariaHiddenAttr,
+            messageId: MESSAGE_IDS.UNEXPECTED,
+          });
         }
       },
-    };
+    });
   },
 };

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

@@ -6,6 +6,7 @@
  */
 
 const { RULE_CATEGORY } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   DUPLICATE_ATTRS: "duplicateAttrs",
@@ -33,28 +34,31 @@ module.exports = {
   },
 
   create(context) {
-    return {
-      /**
-       * @param {TagNode | StyleTagNode | ScriptTagNode} node
-       */
-      [["Tag", "StyleTag", "ScriptTag"].join(",")](node) {
-        if (Array.isArray(node.attributes)) {
-          const attrsSet = new Set();
-          node.attributes.forEach((attr) => {
-            if (attr.key && attrsSet.has(attr.key.value)) {
-              context.report({
-                node: attr,
-                data: {
-                  attrName: attr.key.value,
-                },
-                messageId: MESSAGE_IDS.DUPLICATE_ATTRS,
-              });
-            } else {
-              attrsSet.add(attr.key.value);
-            }
-          });
-        }
-      },
-    };
+    /**
+     * @param {TagNode | StyleTagNode | ScriptTagNode} node
+     */
+    function check(node) {
+      if (Array.isArray(node.attributes)) {
+        const attrsSet = new Set();
+        node.attributes.forEach((attr) => {
+          if (attr.key && attrsSet.has(attr.key.value)) {
+            context.report({
+              node: attr,
+              data: {
+                attrName: attr.key.value,
+              },
+              messageId: MESSAGE_IDS.DUPLICATE_ATTRS,
+            });
+          } else {
+            attrsSet.add(attr.key.value);
+          }
+        });
+      }
+    }
+    return createVisitors(context, {
+      Tag: check,
+      StyleTag: check,
+      ScriptTag: check,
+    });
   },
 };

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

@@ -3,10 +3,17 @@
  * @typedef { import("../types").TagNode } TagNode
  * @typedef { import("../types").StyleTagNode } StyleTagNode
  * @typedef { import("../types").ScriptTagNode } ScriptTagNode
+ * @typedef { import("es-html-parser").AttributeValueNode } AttributeValueNode
  */
 
+const { parse } = require("@html-eslint/template-parser");
 const { RULE_CATEGORY } = require("../constants");
 const { findAttr } = require("./utils/node");
+const {
+  shouldCheckTaggedTemplateExpression,
+  shouldCheckTemplateLiteral,
+} = require("./utils/settings");
+const { getSourceCode } = require("./utils/source-code");
 
 const MESSAGE_IDS = {
   DUPLICATE_ID: "duplicateId",
@@ -33,37 +40,71 @@ module.exports = {
   },
 
   create(context) {
-    const IdAttrsMap = new Map();
-    return {
+    const htmlIdAttrsMap = new Map();
+    /**
+     * @param {Map<string, AttributeValueNode[]>} map
+     */
+    function createTagVisitor(map) {
       /**
-       * @param {TagNode | ScriptTagNode | StyleTagNode} node
-       * @returns
+       * @param {TagNode} node
        */
-      Tag(node) {
+      return function (node) {
         if (!node.attributes || node.attributes.length <= 0) {
           return;
         }
         const idAttr = findAttr(node, "id");
         if (idAttr && idAttr.value) {
-          if (!IdAttrsMap.has(idAttr.value.value)) {
-            IdAttrsMap.set(idAttr.value.value, []);
+          if (!map.has(idAttr.value.value)) {
+            map.set(idAttr.value.value, []);
+          }
+          const nodes = map.get(idAttr.value.value);
+          if (nodes) {
+            nodes.push(idAttr.value);
           }
-          const nodes = IdAttrsMap.get(idAttr.value.value);
-          nodes.push(idAttr.value);
         }
-      },
-      "Program:exit"() {
-        IdAttrsMap.forEach((attrs) => {
-          if (Array.isArray(attrs) && attrs.length > 1) {
-            attrs.forEach((attr) => {
-              context.report({
-                node: attr,
-                data: { id: attr.value },
-                messageId: MESSAGE_IDS.DUPLICATE_ID,
-              });
+      };
+    }
+
+    /**
+     *
+     * @param {Map<string, AttributeValueNode[]>} map
+     */
+    function report(map) {
+      map.forEach((attrs) => {
+        if (Array.isArray(attrs) && attrs.length > 1) {
+          attrs.forEach((attr) => {
+            context.report({
+              node: attr,
+              data: { id: attr.value },
+              messageId: MESSAGE_IDS.DUPLICATE_ID,
             });
-          }
-        });
+          });
+        }
+      });
+    }
+
+    return {
+      Tag: createTagVisitor(htmlIdAttrsMap),
+      "Document:exit"() {
+        report(htmlIdAttrsMap);
+      },
+      TaggedTemplateExpression(node) {
+        const idAttrsMap = new Map();
+        if (shouldCheckTaggedTemplateExpression(node, context)) {
+          parse(node.quasi, getSourceCode(context), {
+            Tag: createTagVisitor(idAttrsMap),
+          });
+        }
+        report(idAttrsMap);
+      },
+      TemplateLiteral(node) {
+        const idAttrsMap = new Map();
+        if (shouldCheckTemplateLiteral(node, context)) {
+          parse(node, getSourceCode(context), {
+            Tag: createTagVisitor(idAttrsMap),
+          });
+        }
+        report(idAttrsMap);
       },
     };
   },