@html-eslint/eslint-plugin 0.50.0 → 0.52.0

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

@@ -1,8 +1,16 @@
 /**
- * @import {StyleTag, Attribute, Tag, ScriptTag} from "@html-eslint/types";
- * @import {RuleModule} from "../types";
- * @typedef {{tagPatterns: string[], attrPatterns: string[], message?: string}[]} Options
- *
+ * @import {
+ *   Attribute,
+ *   ScriptTag,
+ *   StyleTag,
+ *   Tag
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
+ * @typedef {{
+ *   tagPatterns: string[];
+ *   attrPatterns: string[];
+ *   message?: string;
+ * }[]} Options
  */
 
 const { NODE_TYPES } = require("@html-eslint/parser");
@@ -14,9 +22,7 @@ const MESSAGE_IDS = {
   RESTRICTED: "restricted",
 };
 
-/**
- * @type {RuleModule<Options>}
- */
+/** @type {RuleModule<Options>} */
 module.exports = {
   meta: {
     type: "code",
@@ -61,15 +67,11 @@ module.exports = {
   },
 
   create(context) {
-    /**
-     * @type {Options}
-     */
+    /** @type {Options} */
     const options = context.options;
     const checkers = options.map((option) => new PatternChecker(option));
 
-    /**
-     * @param {Tag | StyleTag | ScriptTag} node
-     */
+    /** @param {Tag | StyleTag | ScriptTag} node */
     function check(node) {
       const tagName =
         node.type === NODE_TYPES.Tag
@@ -89,9 +91,7 @@ module.exports = {
           return;
         }
 
-        /**
-         * @type {{node: Attribute, message: string, messageId?: string}}
-         */
+        /** @type {{ node: Attribute; message: string; messageId?: string }} */
         const result = {
           node: attr,
           message: "",
@@ -121,9 +121,7 @@ module.exports = {
 };
 
 class PatternChecker {
-  /**
-   * @param {Options[number]} option
-   */
+  /** @param {Options[number]} option */
   constructor(option) {
     this.option = option;
     this.tagRegExps = option.tagPatterns.map(
@@ -147,9 +145,7 @@ class PatternChecker {
     return result;
   }
 
-  /**
-   * @returns {string}
-   */
+  /** @returns {string} */
   getMessage() {
     return this.message || "";
   }

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

@@ -1,8 +1,11 @@
 /**
- * @import {StyleTag, Tag, ScriptTag} from "@html-eslint/types";
- * @import {RuleModule} from "../types";
- * @typedef {{tagPatterns: string[], message?: string}[]} Options
- *
+ * @import {
+ *   ScriptTag,
+ *   StyleTag,
+ *   Tag
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
+ * @typedef {{ tagPatterns: string[]; message?: string }[]} Options
  */
 
 const { NODE_TYPES } = require("@html-eslint/parser");
@@ -14,9 +17,7 @@ const MESSAGE_IDS = {
   RESTRICTED: "restricted",
 };
 
-/**
- * @type {RuleModule<Options>}
- */
+/** @type {RuleModule<Options>} */
 module.exports = {
   meta: {
     type: "code",
@@ -55,15 +56,11 @@ module.exports = {
   },
 
   create(context) {
-    /**
-     * @type {Options}
-     */
+    /** @type {Options} */
     const options = context.options;
     const checkers = options.map((option) => new PatternChecker(option));
 
-    /**
-     * @param {Tag | StyleTag | ScriptTag} node
-     */
+    /** @param {Tag | StyleTag | ScriptTag} node */
     function check(node) {
       const tagName =
         node.type === NODE_TYPES.Tag
@@ -79,7 +76,11 @@ module.exports = {
       }
 
       /**
-       * @type {{node: Tag | StyleTag | ScriptTag, message: string, messageId?: string}}
+       * @type {{
+       *   node: Tag | StyleTag | ScriptTag;
+       *   message: string;
+       *   messageId?: string;
+       * }}
        */
       const result = {
         node: node,
@@ -109,9 +110,7 @@ module.exports = {
 };
 
 class PatternChecker {
-  /**
-   * @param {Options[number]} option
-   */
+  /** @param {Options[number]} option */
   constructor(option) {
     this.option = option;
     this.tagRegExps = option.tagPatterns.map(
@@ -129,9 +128,7 @@ class PatternChecker {
     return result;
   }
 
-  /**
-   * @returns {string}
-   */
+  /** @returns {string} */
   getMessage() {
     return this.message || "";
   }

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

@@ -1,6 +1,10 @@
 /**
- * @import {RuleModule} from "../types";
- * @import {StyleTag, Tag, ScriptTag} from "@html-eslint/types";
+ * @import {
+ *   ScriptTag,
+ *   StyleTag,
+ *   Tag
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -12,9 +16,7 @@ const MESSAGE_IDS = {
   UNNECESSARY: "unnecessary",
 };
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -36,7 +38,6 @@ module.exports = {
 
   create(context) {
     /**
-     *
      * @param {ScriptTag | Tag | StyleTag} node
      * @param {string} unnecessaryValue
      */

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

@@ -1,6 +1,6 @@
 /**
- * @import {RuleModule} from "../types";
- * @import {Tag} from "@html-eslint/types";
+ * @import {Tag} from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -10,9 +10,7 @@ const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
 };
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -33,9 +31,7 @@ module.exports = {
   },
 
   create(context) {
-    /**
-     * @type {{node: Tag; level: number}[]}
-     */
+    /** @type {{ node: Tag; level: number }[]} */
     const headings = [];
 
     return {

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

@@ -1,6 +1,4 @@
-/**
- * @import {RuleModule} from "../types";
- */
+/** @import {RuleModule} from "../types" */
 
 const { RULE_CATEGORY } = require("../constants");
 const { findAttr } = require("./utils/node");
@@ -11,9 +9,7 @@ const MESSAGE_IDS = {
   MISSING: "missing",
 };
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -35,6 +31,7 @@ module.exports = {
   create(context) {
     /**
      * Checks whether a link is an external link or not.
+     *
      * @param {string} link A link to check
      * @returns {boolean}
      */

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

@@ -1,6 +1,9 @@
 /**
- * @import {RuleModule} from "../types";
- * @import {CommentContent, Text} from "@html-eslint/types";
+ * @import {
+ *   CommentContent,
+ *   Text
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
  */
 
 const { parseTemplateLiteral } = require("./utils/template-literal");
@@ -21,9 +24,7 @@ const MESSAGE_IDS = {
   TRAILING_SPACE: "trailingSpace",
 };
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "layout",
@@ -49,7 +50,7 @@ module.exports = {
      * @param {number} offset.range
      * @param {number} offset.line
      * @param {number} offset.column
-     * @param {((CommentContent | Text)['parts'][number])[]} tokens
+     * @param {(CommentContent | Text)["parts"][number][]} tokens
      */
     function check(source, lines, offset, tokens) {
       const lineBreaks = source.match(/\r\n|[\r\n\u2028\u2029]/gu);

package/lib/rules/no-whitespace-only-children.js

@@ -0,0 +1,113 @@
+/**
+ * @import {
+ *   Tag,
+ *   Text
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { isText, isComment, getLocBetween } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
+const { getRuleUrl } = require("./utils/rule");
+
+const MESSAGE_IDS = {
+  WHITESPACE_ONLY_CHILDREN: "whitespaceOnlyChildren",
+};
+
+/** @param {Tag} node */
+function hasOnlyWhitespaceChildren(node) {
+  if (!node.children || node.children.length === 0) {
+    return false;
+  }
+
+  if (node.children.every((child) => isComment(child))) {
+    return false;
+  }
+
+  for (const child of node.children) {
+    if (isComment(child)) {
+      continue;
+    }
+    if (isText(child)) {
+      // Check if text contains any non-whitespace characters
+      if (child.value && child.value.trim().length > 0) {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/** @type {RuleModule<[{ tagPatterns?: string[] }]>} */
+module.exports = {
+  meta: {
+    type: "code",
+    docs: {
+      description: "Disallow tags with only whitespace children.",
+      recommended: false,
+      category: RULE_CATEGORY.BEST_PRACTICE,
+      url: getRuleUrl("no-whitespace-only-children"),
+    },
+    fixable: "whitespace",
+    schema: [
+      {
+        type: "object",
+        properties: {
+          tagPatterns: {
+            type: "array",
+            items: {
+              type: "string",
+            },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      [MESSAGE_IDS.WHITESPACE_ONLY_CHILDREN]:
+        "Tag should not have only whitespace children.",
+    },
+  },
+  create(context) {
+    const options = context.options[0] || {};
+    const tagPatterns = (options.tagPatterns || []).map(
+      (pattern) => new RegExp(pattern, "u")
+    );
+
+    return createVisitors(context, {
+      Tag(node) {
+        if (!node.close) {
+          return;
+        }
+        if (tagPatterns.length <= 0) {
+          return;
+        }
+
+        const tagName = node.name.toLowerCase();
+
+        // If tagPatterns is specified, check if tag name matches any pattern
+        const matches = tagPatterns.some((pattern) => pattern.test(tagName));
+        if (!matches) {
+          return;
+        }
+
+        if (hasOnlyWhitespaceChildren(node)) {
+          const loc = getLocBetween(node.openEnd, node.close);
+          context.report({
+            loc,
+            messageId: MESSAGE_IDS.WHITESPACE_ONLY_CHILDREN,
+            fix(fixer) {
+              return node.children
+                .filter((child) => isText(child))
+                .map((child) => fixer.removeRange(child.range));
+            },
+          });
+        }
+      },
+    });
+  },
+};

package/lib/rules/prefer-https.js

@@ -1,6 +1,11 @@
 /**
- * @import {Tag, ScriptTag, Attribute, AttributeValue} from "@html-eslint/types";
- * @import {RuleModule} from "../types";
+ * @import {
+ *   Attribute,
+ *   AttributeValue,
+ *   ScriptTag,
+ *   Tag
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -12,9 +17,7 @@ const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
 };
 
-/**
- * @param {string} url
- */
+/** @param {string} url */
 function getProtocol(url) {
   try {
     return new URL(url).protocol;
@@ -29,9 +32,7 @@ function getProtocol(url) {
  * @returns {AttributeValue | undefined}
  */
 function getResourceAttributeValue(node) {
-  /**
-   * @type {Attribute | undefined}
-   */
+  /** @type {Attribute | undefined} */
   let attribute;
   if (isScript(node)) {
     attribute = findAttr(node, "src");
@@ -62,9 +63,7 @@ function getResourceAttributeValue(node) {
   return undefined;
 }
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -82,9 +81,7 @@ module.exports = {
   },
 
   create(context) {
-    /**
-     * @param {Tag | ScriptTag} node
-     */
+    /** @param {Tag | ScriptTag} node */
     function check(node) {
       const attributeValue = getResourceAttributeValue(node);
       if (attributeValue && !attributeValue.parts.length) {

package/lib/rules/quotes.js

@@ -1,10 +1,15 @@
 /**
- * @import {AST} from "eslint";
- * @import {Attribute, Tag, ScriptTag, StyleTag} from "@html-eslint/types";
- * @import {RuleModule} from "../types";
- *
+ * @import {
+ *   Attribute,
+ *   ScriptTag,
+ *   StyleTag,
+ *   Tag
+ * } from "@html-eslint/types"
+ * @import {AST} from "eslint"
+ * @import {RuleModule} from "../types"
  * @typedef {"single" | "double"} SingleOrQuoteOption
- * @typedef {{enforceTemplatedAttrValue: boolean}} ObjectOption
+ *
+ * @typedef {{ enforceTemplatedAttrValue: boolean }} ObjectOption
  */
 
 const { NODE_TYPES } = require("@html-eslint/parser");
@@ -25,9 +30,7 @@ const QUOTES_STYLES = {
 
 const QUOTES_CODES = [`"`, `'`];
 
-/**
- * @type {RuleModule<[SingleOrQuoteOption, ObjectOption]>}
- */
+/** @type {RuleModule<[SingleOrQuoteOption, ObjectOption]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -85,7 +88,6 @@ module.exports = {
     }
 
     /**
-     *
      * @param {Attribute} attr
      * @returns {[string, string]}
      */
@@ -102,10 +104,7 @@ module.exports = {
       if (!attr.value || attr.value.value.includes(expectedQuote)) {
         return;
       }
-      /**
-       * Allow template expression.
-       * ex: html`<div foo=${foo}></div>`
-       */
+      /** Allow template expression. ex: html`<div foo=${foo}></div>` */
       if (
         !enforceTemplatedAttrValue &&
         attr.value.parts.some((part) => part.type === NODE_TYPES.Template)
@@ -160,9 +159,7 @@ module.exports = {
         });
       }
     }
-    /**
-     * @param {Tag | ScriptTag | StyleTag} node
-     */
+    /** @param {Tag | ScriptTag | StyleTag} node */
     function check(node) {
       node.attributes.forEach((attr) => checkQuotes(attr));
     }

package/lib/rules/require-attrs.js

@@ -1,13 +1,19 @@
 /**
- * @import {Tag, ScriptTag, StyleTag, Attribute} from "@html-eslint/types";
- * @import {RuleModule, ReportFixFunction} from "../types";
- *
+ * @import {
+ *   Attribute,
+ *   ScriptTag,
+ *   StyleTag,
+ *   Tag
+ * } from "@html-eslint/types"
+ * @import {
+ *   ReportFixFunction,
+ *   RuleModule
+ * } from "../types"
  * @typedef {Object} Option
  * @property {string} tag
  * @property {string} attr
  * @property {string} [value]
  * @property {string} [message]
- *
  */
 
 const { NODE_TYPES } = require("@html-eslint/parser");
@@ -20,9 +26,7 @@ const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
 };
 
-/**
- * @type {RuleModule<Option[]>}
- */
+/** @type {RuleModule<Option[]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -56,12 +60,13 @@ module.exports = {
   },
 
   create(context) {
-    /**
-     * @type {Option[]}
-     */
+    /** @type {Option[]} */
     const options = context.options || [];
     /**
-     * @type {Map<string, { tag: string, attr: string, value?: string, message?: string}[]>}
+     * @type {Map<
+     *   string,
+     *   { tag: string; attr: string; value?: string; message?: string }[]
+     * >}
      */
     const tagOptionsMap = new Map();
 
@@ -137,9 +142,7 @@ module.exports = {
       });
     }
 
-    /**
-     * @param {StyleTag | ScriptTag} node
-     */
+    /** @param {StyleTag | ScriptTag} node */
     function checkStyleOrScript(node) {
       const tagName = node.type === NODE_TYPES.StyleTag ? "style" : "script";
       if (!tagOptionsMap.has(tagName)) {
@@ -148,9 +151,7 @@ module.exports = {
       check(node, tagName);
     }
 
-    /**
-     * @param {Tag} node
-     */
+    /** @param {Tag} node */
     function checkTag(node) {
       const tagName = node.name.toLowerCase();
       if (!tagOptionsMap.has(tagName)) {

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

@@ -1,6 +1,9 @@
 /**
- * @import {RuleModule, SuggestionReportDescriptor} from "../types";
- * @import {AttributeValue} from "@html-eslint/types";
+ * @import {AttributeValue} from "@html-eslint/types"
+ * @import {
+ *   RuleModule,
+ *   SuggestionReportDescriptor
+ * } from "../types"
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -18,9 +21,7 @@ const MESSAGE_IDS = {
 
 const VALID_BUTTON_TYPES_SET = new Set(["submit", "button", "reset"]);
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",

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

@@ -1,7 +1,10 @@
 /**
- * @import {ScriptTag, StyleTag, Tag} from "@html-eslint/types";
- * @import {RuleModule} from "../types";
- *
+ * @import {
+ *   ScriptTag,
+ *   StyleTag,
+ *   Tag
+ * } from "@html-eslint/types"
+ * @import {RuleModule} from "../types"
  * @typedef {Object} Option
  * @property {"always" | "never"} [Option.selfClosing]
  * @property {string[]} [Option.selfClosingCustomPatterns]
@@ -20,9 +23,7 @@ const MESSAGE_IDS = {
   UNEXPECTED: "unexpected",
 };
 
-/**
- * @type {RuleModule<[Option]>}
- */
+/** @type {RuleModule<[Option]>} */
 module.exports = {
   meta: {
     type: "code",
@@ -76,9 +77,7 @@ module.exports = {
       (i) => new RegExp(i)
     );
 
-    /**
-     * @param {Tag | ScriptTag | StyleTag} node
-     */
+    /** @param {Tag | ScriptTag | StyleTag} node */
     function checkClosing(node) {
       const name = getNameOf(node);
       if (!node.close) {
@@ -157,9 +156,7 @@ module.exports = {
         }
         if (["svg", "math"].includes(node.name)) foreignContext.push(node.name);
       },
-      /**
-       * @param {Tag} node
-       */
+      /** @param {Tag} node */
       "Tag:exit"(node) {
         if (node.name === foreignContext[foreignContext.length - 1]) {
           foreignContext.pop();

package/lib/rules/require-doctype.js

@@ -1,6 +1,4 @@
-/**
- * @import {RuleModule} from "../types";
- */
+/** @import {RuleModule} from "../types" */
 
 const { RULE_CATEGORY } = require("../constants");
 const { getRuleUrl } = require("./utils/rule");
@@ -9,9 +7,7 @@ const MESSAGE_IDS = {
   MISSING: "missing",
 };
 
-/**
- * @type {RuleModule<[]>}
- */
+/** @type {RuleModule<[]>} */
 module.exports = {
   meta: {
     type: "code",

package/lib/rules/require-explicit-size.js

@@ -1,6 +1,5 @@
 /**
- * @import {RuleModule} from "../types";
- *
+ * @import {RuleModule} from "../types"
  * @typedef {Object} Option
  * @property {string[]} [Option.allowClass]
  * @property {string[]} [Option.allowId]
@@ -18,9 +17,7 @@ const MESSAGE_IDS = {
 
 const TARGET_ELEMENTS = ["img", "iframe"];
 
-/**
- * @type {RuleModule<[Option]>}
- */
+/** @type {RuleModule<[Option]>} */
 module.exports = {
   meta: {
     type: "code",