@html-eslint/eslint-plugin 0.31.1 → 0.32.0

package/lib/rules/prefer-https.js

@@ -0,0 +1,106 @@
+/**
+ * @typedef { import("../types").RuleModule } RuleModule
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").ScriptTag } ScriptTag
+ * @typedef { import("../types").Attribute } Attribute
+ * @typedef { import("../types").AttributeValue } AttributeValue
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { findAttr, isScript } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
+
+const MESSAGE_IDS = {
+  UNEXPECTED: "unexpected",
+};
+
+/**
+ * @param {string} url
+ */
+function getProtocol(url) {
+  try {
+    return new URL(url).protocol;
+  } catch (e) {
+    return null;
+  }
+}
+
+/**
+ * @param {Tag | ScriptTag} node
+ * @returns {AttributeValue | undefined}
+ */
+function getResourceAttributeValue(node) {
+  /**
+   * @type {Attribute | undefined}
+   */
+  let attribute;
+  if (isScript(node)) {
+    attribute = findAttr(node, "src");
+  } else {
+    switch (node.name.toLowerCase()) {
+      case "img":
+      case "iframe":
+      case "audio":
+      case "video":
+      case "source":
+      case "embed": {
+        attribute = findAttr(node, "src");
+        break;
+      }
+      case "link": {
+        attribute = findAttr(node, "href");
+        break;
+      }
+      case "object": {
+        attribute = findAttr(node, "data");
+        break;
+      }
+    }
+  }
+  if (attribute) {
+    return attribute.value;
+  }
+  return undefined;
+}
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+    docs: {
+      description: "Prefer to use HTTPS for embedded resources",
+      recommended: false,
+      category: RULE_CATEGORY.BEST_PRACTICE,
+    },
+    fixable: false,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.UNEXPECTED]: "Unexpected use 'HTTP' protocol.",
+    },
+  },
+
+  create(context) {
+    /**
+     * @param {Tag | ScriptTag} node
+     */
+    function check(node) {
+      const attributeValue = getResourceAttributeValue(node);
+      if (attributeValue && !attributeValue.templates.length) {
+        const protocol = getProtocol(attributeValue.value);
+        if (protocol === "http:") {
+          context.report({
+            node: attributeValue,
+            messageId: MESSAGE_IDS.UNEXPECTED,
+          });
+        }
+      }
+    }
+
+    return createVisitors(context, {
+      ScriptTag: check,
+      Tag: check,
+    });
+  },
+};

package/lib/rules/quotes.js

@@ -1,10 +1,10 @@
 /**
+ * @typedef { import("eslint").AST.Range } Range
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").Range } Range
- * @typedef { import("../types").AttributeNode } AttributeNode
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
- * @typedef { import("../types").StyleTagNode } StyleTagNode
+ * @typedef { import("../types").Attribute } Attribute
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").ScriptTag } ScriptTag
+ * @typedef { import("../types").StyleTag } StyleTag
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -68,7 +68,7 @@ module.exports = {
 
     /**
      *
-     * @param {AttributeNode} attr
+     * @param {Attribute} attr
      * @returns {[string, string]}
      */
     function getQuotes(attr) {
@@ -77,7 +77,7 @@ module.exports = {
     }
 
     /**
-     * @param {AttributeNode} attr
+     * @param {Attribute} attr
      * @returns {void}
      */
     function checkQuotes(attr) {
@@ -133,7 +133,7 @@ module.exports = {
       }
     }
     /**
-     * @param {TagNode | ScriptTagNode | StyleTagNode} node
+     * @param {Tag | ScriptTag | StyleTag} node
      */
     function check(node) {
       node.attributes.forEach((attr) => checkQuotes(attr));

package/lib/rules/require-attrs.js

@@ -1,8 +1,13 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").ScriptTagNode } ScriptTagNode
- * @typedef { import("../types").StyleTagNode } StyleTagNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").ScriptTag } ScriptTag
+ * @typedef { import("../types").StyleTag } StyleTag
+ *
+ * @typedef {Object} Option
+ * @property {string} tag
+ * @property {string} attr
+ * @property {string | undefined} value
  */
 
 const { NODE_TYPES } = require("@html-eslint/parser");
@@ -48,6 +53,9 @@ module.exports = {
   },
 
   create(context) {
+    /**
+     * @type {Option[]}
+     */
     const options = context.options || [];
     /**
      * @type {Map<string, { tag: string, attr: string, value?: string}[]>}
@@ -67,7 +75,7 @@ module.exports = {
     });
 
     /**
-     * @param {StyleTagNode | ScriptTagNode | TagNode} node
+     * @param {StyleTag | ScriptTag | Tag} node
      * @param {string} tagName
      */
     function check(node, tagName) {
@@ -105,7 +113,7 @@ module.exports = {
     }
 
     /**
-     * @param {StyleTagNode | ScriptTagNode} node
+     * @param {StyleTag | ScriptTag} node
      */
     function checkStyleOrScript(node) {
       const tagName = node.type === NODE_TYPES.StyleTag ? "style" : "script";
@@ -116,7 +124,7 @@ module.exports = {
     }
 
     /**
-     * @param {TagNode} node
+     * @param {Tag} node
      */
     function checkTag(node) {
       const tagName = node.name.toLowerCase();

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

@@ -1,6 +1,6 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
+ * @typedef { import("../types").Tag } Tag
  */
 
 const { RULE_CATEGORY, VOID_ELEMENTS } = require("../constants");
@@ -70,7 +70,7 @@ module.exports = {
     );
 
     /**
-     * @param {TagNode} node
+     * @param {Tag} node
      */
     function checkClosingTag(node) {
       if (!node.close) {
@@ -85,7 +85,7 @@ module.exports = {
     }
 
     /**
-     * @param {TagNode} node
+     * @param {Tag} node
      * @param {boolean} shouldSelfClose
      * @param {boolean} fixable
      */
@@ -150,7 +150,7 @@ module.exports = {
         if (["svg", "math"].includes(node.name)) foreignContext.push(node.name);
       },
       /**
-       * @param {TagNode} node
+       * @param {Tag} node
        */
       "Tag:exit"(node) {
         if (node.name === foreignContext[foreignContext.length - 1]) {

package/lib/rules/require-form-method.js

@@ -0,0 +1,81 @@
+/**
+ * @typedef { import("../types").RuleModule } RuleModule
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { findAttr } = require("./utils/node");
+const { createVisitors } = require("./utils/visitors");
+
+const MESSAGE_IDS = {
+  MISSING: "missing",
+  MISSING_VALUE: "missingValue",
+  UNEXPECTED: "unexpected",
+};
+
+const ALLOWED_METHODS = new Set(["GET", "POST", "DIALOG"]);
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Require `method` attribute in `<form>`",
+      category: RULE_CATEGORY.ACCESSIBILITY,
+      recommended: false,
+    },
+
+    fixable: false,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.MISSING]: "The 'method' attribute is missing on the <form>.",
+      [MESSAGE_IDS.MISSING_VALUE]:
+        "The 'method' attribute value is missing on the <form>",
+      [MESSAGE_IDS.UNEXPECTED]:
+        "The 'method' attribute has an invalid value on the <form>.",
+    },
+  },
+
+  create(context) {
+    return createVisitors(context, {
+      Tag(node) {
+        if (node.name.toLowerCase() !== "form") {
+          return;
+        }
+        const method = findAttr(node, "method");
+
+        if (!method) {
+          context.report({
+            node: node.openStart,
+            messageId: MESSAGE_IDS.MISSING,
+          });
+          return;
+        }
+
+        if (!method.value) {
+          context.report({
+            node: node.openStart,
+            messageId: MESSAGE_IDS.MISSING_VALUE,
+          });
+          return;
+        }
+
+        if (
+          method.value.templates &&
+          method.value.templates.some((template) => template.isTemplate)
+        ) {
+          return;
+        }
+
+        if (!ALLOWED_METHODS.has(method.value.value.toUpperCase())) {
+          context.report({
+            node: node.openStart,
+            messageId: MESSAGE_IDS.UNEXPECTED,
+          });
+        }
+      },
+    });
+  },
+};

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

@@ -1,6 +1,6 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
+ * @typedef { import("../types").Tag } Tag
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -72,8 +72,7 @@ module.exports = {
 };
 
 /**
- *
- * @param {TagNode} node
+ * @param {Tag} node
  * @param {string[]} substitute
  * @returns
  */

package/lib/rules/require-input-label.js

@@ -0,0 +1,77 @@
+/**
+ * @typedef { import("../types").RuleModule } RuleModule
+ * @typedef { import("../types").Tag } Tag
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
+const { findParent, isTag } = require("./utils/node");
+
+const MESSAGE_IDS = {
+  MISSING: "missingLabel",
+};
+
+const INPUT_TAGS = new Set(["input", "textarea", "select"]);
+
+const LABEL_ATTRIBUTES = new Set(["id", "aria-labelledby", "aria-label"]);
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description:
+        "Enforces use of label for form elements(`input`, `textarea`, `select`)",
+      category: RULE_CATEGORY.ACCESSIBILITY,
+      recommended: false,
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      [MESSAGE_IDS.MISSING]: "Missing an associated label",
+    },
+  },
+  create(context) {
+    return createVisitors(context, {
+      Tag(node) {
+        if (!INPUT_TAGS.has(node.name.toLowerCase())) {
+          return;
+        }
+
+        for (const attr of node.attributes) {
+          if (
+            LABEL_ATTRIBUTES.has(attr.key.value.toLowerCase()) &&
+            attr.value &&
+            attr.value.value
+          ) {
+            return;
+          }
+
+          if (
+            attr.key.value.toLowerCase() === "type" &&
+            attr.value &&
+            attr.value.value === "hidden"
+          ) {
+            return;
+          }
+        }
+
+        const label = findParent(node, (parent) => {
+          return isTag(parent) && parent.name.toLowerCase() === "label";
+        });
+
+        if (label) {
+          return;
+        }
+
+        context.report({
+          node,
+          messageId: "missingLabel",
+        });
+      },
+    });
+  },
+};

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

@@ -1,7 +1,7 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("es-html-parser").TagNode } TagNode
- * @typedef { import("es-html-parser").AnyNode } AnyNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").AnyNode } AnyNode
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -15,7 +15,7 @@ const MESSAGE_IDS = {
 
 /**
  * @param {AnyNode} node
- * @returns {node is TagNode}
+ * @returns {node is Tag}
  */
 function isMetaCharset(node) {
   return isTag(node) && node.name === "meta" && !!findAttr(node, "charset");

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

@@ -1,7 +1,7 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("es-html-parser").TagNode } TagNode
- * @typedef { import("es-html-parser").AnyNode } AnyNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").AnyNode } AnyNode
  */
 const { RULE_CATEGORY } = require("../constants");
 const { filter } = require("./utils/array");
@@ -14,7 +14,7 @@ const MESSAGE_IDS = {
 
 /**
  * @param {AnyNode} node
- * @returns {node is TagNode}
+ * @returns {node is Tag}
  */
 function isMetaTagNode(node) {
   return isTag(node) && node.name === "meta";

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

@@ -1,7 +1,7 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("es-html-parser").TagNode } TagNode
- * @typedef { import("es-html-parser").AnyNode } AnyNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").AnyNode } AnyNode
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -15,7 +15,7 @@ const MESSAGE_IDS = {
 
 /**
  * @param {AnyNode} node
- * @returns {node is TagNode}
+ * @returns {node is Tag}
  */
 function isMetaViewport(node) {
   if (isTag(node) && node.name === "meta") {

package/lib/rules/require-open-graph-protocol.js

@@ -1,7 +1,7 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("es-html-parser").TagNode } TagNode
- *  @typedef { import("es-html-parser").AnyNode } AnyNode
+ * @typedef { import("../types").Tag } Tag
+ *  @typedef { import("../types").AnyNode } AnyNode
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -71,7 +71,7 @@ module.exports = {
 
     /**
      * @param {AnyNode} node
-     * @returns {node is TagNode}
+     * @returns {node is Tag}
      */
     function isOgpMeta(node) {
       const isMeta = isTag(node) && node.name === "meta";

package/lib/rules/require-title.js

@@ -1,8 +1,8 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("es-html-parser").TagNode } TagNode
- * @typedef { import("es-html-parser").TextNode } TextNode
- * @typedef { import("es-html-parser").AnyNode } AnyNode
+ * @typedef { import("../types").Tag } Tag
+ * @typedef { import("../types").Text } Text
+ * @typedef { import("../types").AnyNode } AnyNode
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -16,7 +16,7 @@ const MESSAGE_IDS = {
 
 /**
  * @param {AnyNode} node
- * @returns {node is TagNode}
+ * @returns {node is Tag}
  */
 function isTitle(node) {
   return isTag(node) && node.name === "title";
@@ -24,7 +24,7 @@ function isTitle(node) {
 
 /**
  * @param {AnyNode} node
- * @returns {node is TextNode}
+ * @returns {node is Text}
  */
 function isNonEmptyText(node) {
   return isText(node) && node.value.trim().length > 0;

package/lib/rules/sort-attrs.js

@@ -1,8 +1,8 @@
 /**
+ * @typedef { import("eslint").Rule.RuleFixer } RuleFixer
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").AttributeNode } AttributeNode
- * @typedef { import("../types").TextNode } TextNode
- * @typedef { import("../types").RuleFixer } RuleFixer
+ * @typedef { import("../types").Attribute } Attribute
+ * @typedef { import("../types").Text } Text
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -55,8 +55,8 @@ module.exports = {
     const priority = option.priority;
 
     /**
-     * @param {AttributeNode} attrA
-     * @param {AttributeNode} attrB
+     * @param {Attribute} attrA
+     * @param {Attribute} attrB
      * @return {number}
      */
     function compare(attrA, attrB) {
@@ -76,8 +76,8 @@ module.exports = {
 
     /**
      * @param {string} source
-     * @param {AttributeNode[]} unsorted
-     * @param {AttributeNode[]} sorted
+     * @param {Attribute[]} unsorted
+     * @param {Attribute[]} sorted
      * @returns {string}
      */
     function getSortedCode(source, unsorted, sorted) {
@@ -99,8 +99,8 @@ module.exports = {
 
     /**
      * @param {RuleFixer} fixer
-     * @param {AttributeNode[]} unsorted
-     * @param {AttributeNode[]} sorted
+     * @param {Attribute[]} unsorted
+     * @param {Attribute[]} sorted
      */
     function fix(fixer, unsorted, sorted) {
       const source = sourceCode.getText();
@@ -111,8 +111,8 @@ module.exports = {
     }
 
     /**
-     * @param {AttributeNode[]} before
-     * @param {AttributeNode[]} after
+     * @param {Attribute[]} before
+     * @param {Attribute[]} after
      * @returns {boolean}
      */
     function isChanged(before, after) {
@@ -123,7 +123,7 @@ module.exports = {
     }
 
     /**
-     * @param {AttributeNode[]} unsorted
+     * @param {Attribute[]} unsorted
      */
     function checkSorting(unsorted) {
       if (unsorted.length <= 1) {