@html-eslint/eslint-plugin 0.28.0-alpha.0 → 0.28.0

package/lib/rules/no-restricted-attr-values.js

@@ -8,6 +8,7 @@
  */
 
 const { RULE_CATEGORY } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   RESTRICTED: "restricted",
@@ -64,54 +65,57 @@ module.exports = {
      */
     const options = context.options;
     const checkers = options.map((option) => new PatternChecker(option));
-
-    return {
-      /**
-       * @param {TagNode | StyleTagNode | ScriptTagNode} node
-       */
-      [["Tag", "StyleTag", "ScriptTag"].join(",")](node) {
-        node.attributes.forEach((attr) => {
-          if (
-            !attr.key ||
-            !attr.key.value ||
-            !attr.value ||
-            typeof attr.value.value !== "string"
-          ) {
-            return;
-          }
-
-          const matched = checkers.find(
-            (checker) =>
-              attr.value && checker.test(attr.key.value, attr.value.value)
-          );
-
-          if (!matched) {
-            return;
-          }
-
-          /**
-           * @type {{node: AttributeNode, message: string, messageId?: string}}
-           */
-          const result = {
-            node: attr,
-            message: "",
-          };
-
-          const customMessage = matched.getMessage();
-
-          if (customMessage) {
-            result.message = customMessage;
-          } else {
-            result.messageId = MESSAGE_IDS.RESTRICTED;
-          }
-
-          context.report({
-            ...result,
-            data: { attrValuePatterns: attr.value.value },
-          });
+    /**
+     * @param {TagNode | StyleTagNode | ScriptTagNode} node
+     */
+    function check(node) {
+      node.attributes.forEach((attr) => {
+        if (
+          !attr.key ||
+          !attr.key.value ||
+          !attr.value ||
+          typeof attr.value.value !== "string"
+        ) {
+          return;
+        }
+
+        const matched = checkers.find(
+          (checker) =>
+            attr.value && checker.test(attr.key.value, attr.value.value)
+        );
+
+        if (!matched) {
+          return;
+        }
+
+        /**
+         * @type {{node: AttributeNode, message: string, messageId?: string}}
+         */
+        const result = {
+          node: attr,
+          message: "",
+        };
+
+        const customMessage = matched.getMessage();
+
+        if (customMessage) {
+          result.message = customMessage;
+        } else {
+          result.messageId = MESSAGE_IDS.RESTRICTED;
+        }
+
+        context.report({
+          ...result,
+          data: { attrValuePatterns: attr.value.value },
         });
-      },
-    };
+      });
+    }
+
+    return createVisitors(context, {
+      Tag: check,
+      StyleTag: check,
+      ScriptTag: check,
+    });
   },
 };
 

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

@@ -9,6 +9,7 @@
 
 const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   RESTRICTED: "restricted",
@@ -65,52 +66,56 @@ module.exports = {
     const options = context.options;
     const checkers = options.map((option) => new PatternChecker(option));
 
-    return {
-      /**
-       * @param {TagNode | StyleTagNode | ScriptTagNode} node
-       */
-      [["Tag", "StyleTag", "ScriptTag"].join(",")](node) {
-        const tagName =
-          node.type === NODE_TYPES.Tag
-            ? node.name
-            : node.type === NODE_TYPES.ScriptTag
-            ? "script"
-            : "style";
-        node.attributes.forEach((attr) => {
-          if (!attr.key || !attr.key.value) {
-            return;
-          }
-          const matched = checkers.find((checker) =>
-            checker.test(tagName, attr.key.value)
-          );
-
-          if (!matched) {
-            return;
-          }
-
-          /**
-           * @type {{node: AttributeNode, message: string, messageId?: string}}
-           */
-          const result = {
-            node: attr,
-            message: "",
-          };
-
-          const customMessage = matched.getMessage();
-
-          if (customMessage) {
-            result.message = customMessage;
-          } else {
-            result.messageId = MESSAGE_IDS.RESTRICTED;
-          }
-
-          context.report({
-            ...result,
-            data: { attr: attr.key.value },
-          });
+    /**
+     * @param {TagNode | StyleTagNode | ScriptTagNode} node
+     */
+    function check(node) {
+      const tagName =
+        node.type === NODE_TYPES.Tag
+          ? node.name
+          : node.type === NODE_TYPES.ScriptTag
+          ? "script"
+          : "style";
+      node.attributes.forEach((attr) => {
+        if (!attr.key || !attr.key.value) {
+          return;
+        }
+        const matched = checkers.find((checker) =>
+          checker.test(tagName, attr.key.value)
+        );
+
+        if (!matched) {
+          return;
+        }
+
+        /**
+         * @type {{node: AttributeNode, message: string, messageId?: string}}
+         */
+        const result = {
+          node: attr,
+          message: "",
+        };
+
+        const customMessage = matched.getMessage();
+
+        if (customMessage) {
+          result.message = customMessage;
+        } else {
+          result.messageId = MESSAGE_IDS.RESTRICTED;
+        }
+
+        context.report({
+          ...result,
+          data: { attr: attr.key.value },
         });
-      },
-    };
+      });
+    }
+
+    return createVisitors(context, {
+      Tag: check,
+      StyleTag: check,
+      ScriptTag: check,
+    });
   },
 };
 

package/lib/rules/no-script-style-type.js

@@ -7,6 +7,7 @@
 
 const { RULE_CATEGORY } = require("../constants");
 const { findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   UNNECESSARY: "unnecessary",
@@ -56,7 +57,7 @@ module.exports = {
         });
       }
     }
-    return {
+    return createVisitors(context, {
       ScriptTag(node) {
         check(node, "text/javascript");
       },
@@ -71,6 +72,6 @@ module.exports = {
           }
         }
       },
-    };
+    });
   },
 };

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

@@ -46,7 +46,7 @@ module.exports = {
           level: parseInt(node.name.replace("h", ""), 10),
         });
       },
-      "Program:exit"() {
+      "Document:exit"() {
         if (headings.length <= 1) {
           return;
         }

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

@@ -4,6 +4,7 @@
 
 const { RULE_CATEGORY } = require("../constants");
 const { findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
@@ -38,7 +39,7 @@ module.exports = {
     function isExternalLink(link) {
       return /^(?:\w+:|\/\/)/.test(link);
     }
-    return {
+    return createVisitors(context, {
       Tag(node) {
         if (node.name !== "a") {
           return;
@@ -49,6 +50,10 @@ module.exports = {
           const href = findAttr(node, "href");
           if (href && href.value && isExternalLink(href.value.value)) {
             const rel = findAttr(node, "rel");
+            if (rel && rel.value && rel.value.templates.length) {
+              return;
+            }
+
             if (!rel || !rel.value || !rel.value.value.includes("noreferrer")) {
               context.report({
                 node: target,
@@ -58,6 +63,6 @@ module.exports = {
           }
         }
       },
-    };
+    });
   },
 };

package/lib/rules/no-trailing-spaces.js

@@ -1,8 +1,21 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
+ * @typedef { import("es-html-parser").CommentContentNode } CommentContentNode
+ * @typedef { import("es-html-parser").TextNode } TextNode
  */
 
+const { parse } = require("@html-eslint/template-parser");
 const { RULE_CATEGORY } = require("../constants");
+const {
+  getTemplateTokens,
+  codeToLines,
+  isRangesOverlap,
+} = require("./utils/node");
+const {
+  shouldCheckTaggedTemplateExpression,
+  shouldCheckTemplateLiteral,
+} = require("./utils/settings");
+const { getSourceCode } = require("./utils/source-code");
 
 const MESSAGE_IDS = {
   TRAILING_SPACE: "trailingSpace",
@@ -27,48 +40,91 @@ module.exports = {
   },
 
   create(context) {
-    const sourceCode = context.getSourceCode();
-    const lineBreaks = sourceCode.getText().match(/\r\n|[\r\n\u2028\u2029]/gu);
+    const sourceCode = getSourceCode(context);
+    /**
+     * @param {string} source
+     * @param {string[]} lines
+     * @param {number} rangeOffset
+     * @param {((CommentContentNode | TextNode)['templates'][number])[]} tokens
+     */
+    function check(source, lines, rangeOffset, tokens) {
+      let rangeIndex = rangeOffset;
+      const lineBreaks = source.match(/\r\n|[\r\n\u2028\u2029]/gu);
+      lines.forEach((line, index) => {
+        const lineNumber = index + 1;
+        const match = line.match(/[ \t\u00a0\u2000-\u200b\u3000]+$/);
+        const lineBreakLength =
+          lineBreaks && lineBreaks[index] ? lineBreaks[index].length : 1;
+        const lineLength = line.length + lineBreakLength;
 
-    return {
-      Program() {
-        const lines = sourceCode.lines;
-        let rangeIndex = 0;
-
-        lines.forEach((line, index) => {
-          const lineNumber = index + 1;
-          const match = line.match(/[ \t\u00a0\u2000-\u200b\u3000]+$/);
-          const lineBreakLength =
-            lineBreaks && lineBreaks[index] ? lineBreaks[index].length : 1;
-          const lineLength = line.length + lineBreakLength;
-
-          if (match) {
-            if (typeof match.index === "number" && match.index > 0) {
-              const loc = {
-                start: {
-                  line: lineNumber,
-                  column: match.index,
-                },
-                end: {
-                  line: lineNumber,
-                  column: lineLength - lineBreakLength,
-                },
-              };
-
-              context.report({
-                messageId: MESSAGE_IDS.TRAILING_SPACE,
-                loc,
-                fix(fixer) {
-                  return fixer.removeRange([
-                    rangeIndex + loc.start.column,
-                    rangeIndex + loc.end.column,
-                  ]);
-                },
-              });
+        if (match) {
+          if (typeof match.index === "number" && match.index > 0) {
+            const loc = {
+              start: {
+                line: lineNumber,
+                column: match.index,
+              },
+              end: {
+                line: lineNumber,
+                column: lineLength - lineBreakLength,
+              },
+            };
+            const start = sourceCode.getIndexFromLoc(loc.start);
+            const end = sourceCode.getIndexFromLoc(loc.end);
+            if (
+              tokens.some((token) => isRangesOverlap(token.range, [start, end]))
+            ) {
+              return;
             }
+            context.report({
+              messageId: MESSAGE_IDS.TRAILING_SPACE,
+              loc,
+              fix(fixer) {
+                return fixer.removeRange([
+                  rangeIndex + loc.start.column,
+                  rangeIndex + loc.end.column,
+                ]);
+              },
+            });
           }
-          rangeIndex += lineLength;
-        });
+        }
+        rangeIndex += lineLength;
+      });
+    }
+
+    return {
+      Document() {
+        check(sourceCode.getText(), sourceCode.getLines(), 0, []);
+      },
+      TaggedTemplateExpression(node) {
+        if (shouldCheckTaggedTemplateExpression(node, context)) {
+          const { html, tokens } = parse(
+            node.quasi,
+            getSourceCode(context),
+            {}
+          );
+          const lines = codeToLines(html);
+          check(
+            html,
+            lines,
+            // @ts-ignore
+            node.quasi.range[0] + 1,
+            getTemplateTokens(tokens)
+          );
+        }
+      },
+      TemplateLiteral(node) {
+        if (shouldCheckTemplateLiteral(node, context)) {
+          const { html, tokens } = parse(node, getSourceCode(context), {});
+          const lines = codeToLines(html);
+          check(
+            html,
+            lines,
+            // @ts-ignore
+            node.range[0] + 1,
+            getTemplateTokens(tokens)
+          );
+        }
       },
     };
   },

package/lib/rules/quotes.js

@@ -8,6 +8,7 @@
  */
 
 const { RULE_CATEGORY } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
@@ -131,14 +132,17 @@ module.exports = {
         });
       }
     }
+    /**
+     * @param {TagNode | ScriptTagNode | StyleTagNode} node
+     */
+    function check(node) {
+      node.attributes.forEach((attr) => checkQuotes(attr));
+    }
 
-    return {
-      /**
-       * @param {TagNode | ScriptTagNode | StyleTagNode} node
-       */
-      [["Tag", "ScriptTag", "StyleTag"].join(",")](node) {
-        node.attributes.forEach((attr) => checkQuotes(attr));
-      },
-    };
+    return createVisitors(context, {
+      Tag: check,
+      ScriptTag: check,
+      StyleTag: check,
+    });
   },
 };

package/lib/rules/require-attrs.js

@@ -7,6 +7,7 @@
 
 const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
@@ -103,25 +104,32 @@ module.exports = {
       });
     }
 
-    return {
-      /**
-       * @param {StyleTagNode | ScriptTagNode} node
-       * @returns
-       */
-      [["StyleTag", "ScriptTag"].join(",")](node) {
-        const tagName = node.type === NODE_TYPES.StyleTag ? "style" : "script";
-        if (!tagOptionsMap.has(tagName)) {
-          return;
-        }
-        check(node, tagName);
-      },
-      Tag(node) {
-        const tagName = node.name.toLowerCase();
-        if (!tagOptionsMap.has(tagName)) {
-          return;
-        }
-        check(node, tagName);
-      },
-    };
+    /**
+     * @param {StyleTagNode | ScriptTagNode} node
+     */
+    function checkStyleOrScript(node) {
+      const tagName = node.type === NODE_TYPES.StyleTag ? "style" : "script";
+      if (!tagOptionsMap.has(tagName)) {
+        return;
+      }
+      check(node, tagName);
+    }
+
+    /**
+     * @param {TagNode} node
+     */
+    function checkTag(node) {
+      const tagName = node.name.toLowerCase();
+      if (!tagOptionsMap.has(tagName)) {
+        return;
+      }
+      check(node, tagName);
+    }
+
+    return createVisitors(context, {
+      StyleTag: checkStyleOrScript,
+      ScriptTag: checkStyleOrScript,
+      Tag: checkTag,
+    });
   },
 };

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

@@ -4,6 +4,7 @@
 
 const { RULE_CATEGORY } = require("../constants");
 const { findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
@@ -35,7 +36,7 @@ module.exports = {
   },
 
   create(context) {
-    return {
+    return createVisitors(context, {
       Tag(node) {
         if (node.name !== "button") {
           return;
@@ -46,7 +47,10 @@ module.exports = {
             node: node.openStart,
             messageId: MESSAGE_IDS.MISSING,
           });
-        } else if (!VALID_BUTTON_TYPES_SET.has(typeAttr.value.value)) {
+        } else if (
+          !VALID_BUTTON_TYPES_SET.has(typeAttr.value.value) &&
+          !typeAttr.value.templates.length
+        ) {
           context.report({
             node: typeAttr,
             messageId: MESSAGE_IDS.INVALID,
@@ -56,6 +60,6 @@ module.exports = {
           });
         }
       },
-    };
+    });
   },
 };

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

@@ -4,6 +4,7 @@
  */
 
 const { RULE_CATEGORY, VOID_ELEMENTS } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
 
 const VOID_ELEMENTS_SET = new Set(VOID_ELEMENTS);
 
@@ -125,7 +126,7 @@ module.exports = {
       }
     }
 
-    return {
+    return createVisitors(context, {
       Tag(node) {
         const isVoidElement = VOID_ELEMENTS_SET.has(node.name);
         const isSelfClosingCustomElement = !!selfClosingCustomPatterns.some(
@@ -156,6 +157,6 @@ module.exports = {
           foreignContext.pop();
         }
       },
-    };
+    });
   },
 };

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

@@ -4,6 +4,7 @@
 
 const { RULE_CATEGORY } = require("../constants");
 const { findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
@@ -32,7 +33,7 @@ module.exports = {
   },
 
   create(context) {
-    return {
+    return createVisitors(context, {
       Tag(node) {
         if (node.name !== "frame" && node.name !== "iframe") {
           return;
@@ -51,6 +52,6 @@ module.exports = {
           });
         }
       },
-    };
+    });
   },
 };

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

@@ -4,6 +4,7 @@
  */
 
 const { RULE_CATEGORY } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   MISSING_ALT: "missingAlt",
@@ -48,7 +49,7 @@ module.exports = {
         context.options[0].substitute) ||
       [];
 
-    return {
+    return createVisitors(context, {
       Tag(node) {
         if (node.name !== "img") {
           return;
@@ -66,7 +67,7 @@ module.exports = {
           });
         }
       },
-    };
+    });
   },
 };
 

package/lib/rules/require-lang.js

@@ -4,6 +4,7 @@
 
 const { RULE_CATEGORY } = require("../constants");
 const { findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
@@ -32,7 +33,7 @@ module.exports = {
   },
 
   create(context) {
-    return {
+    return createVisitors(context, {
       Tag(node) {
         if (node.name !== "html") {
           return;
@@ -56,6 +57,6 @@ module.exports = {
           });
         }
       },
-    };
+    });
   },
 };