From 67a991bf896f95b35ad625130c487cb69069a176 Mon Sep 17 00:00:00 2001
From: YeonJuan <yeonjuan93@naver.com>
Date: Sun, 1 Dec 2024 01:43:27 +0900
Subject: [PATCH] require-attrs

---
 .../eslint-plugin/lib/rules/require-attrs.js  | 48 +++++++++++--------
 .../tests/rules/require-attrs.test.js         | 44 +++++++++++++++++
 2 files changed, 72 insertions(+), 20 deletions(-)

diff --git a/packages/eslint-plugin/lib/rules/require-attrs.js b/packages/eslint-plugin/lib/rules/require-attrs.js
index 5b6e7c2c..771a2d18 100644
--- a/packages/eslint-plugin/lib/rules/require-attrs.js
+++ b/packages/eslint-plugin/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,
+    });
   },
 };
diff --git a/packages/eslint-plugin/tests/rules/require-attrs.test.js b/packages/eslint-plugin/tests/rules/require-attrs.test.js
index 0c6f905a..a9afcda0 100644
--- a/packages/eslint-plugin/tests/rules/require-attrs.test.js
+++ b/packages/eslint-plugin/tests/rules/require-attrs.test.js
@@ -2,6 +2,7 @@ const createRuleTester = require("../rule-tester");
 const rule = require("../../lib/rules/require-attrs");
 
 const ruleTester = createRuleTester();
+const templateRuleTester = createRuleTester("espree");
 
 ruleTester.run("require-attrs", rule, {
   valid: [
@@ -250,3 +251,46 @@ ruleTester.run("require-attrs", rule, {
     },
   ],
 });
+
+templateRuleTester.run("[template] require-attrs", rule, {
+  valid: [
+    {
+      code: "html`<svg viewBox></svg>`",
+      options: [
+        {
+          tag: "svg",
+          attr: "viewBox",
+        },
+      ],
+    },
+  ],
+  invalid: [
+    {
+      code: 'html`<img class="image"/>`',
+      options: [
+        {
+          tag: "img",
+          attr: "alt",
+        },
+        {
+          tag: "img",
+          attr: "class",
+          value: "img",
+        },
+      ],
+      errors: [
+        {
+          line: 1,
+          column: 6,
+          message: "Missing 'alt' attributes for 'img' tag",
+        },
+        {
+          line: 1,
+          column: 11,
+          endColumn: 24,
+          message: "Unexpected 'class' attributes value. 'img' is expected",
+        },
+      ],
+    },
+  ],
+});