@html-eslint/eslint-plugin 0.19.1 → 0.21.0

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

@@ -1,10 +1,7 @@
-/**
- * @typedef {import("../types").Rule} Rule
- * @typedef {import("es-html-parser").TagNode} TagNode
- */
-
+const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
-const { NodeUtils } = require("./utils");
+const { filter } = require("./utils/array");
+const { findAttr } = require("./utils/node");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
@@ -12,11 +9,11 @@ const MESSAGE_IDS = {
 };
 
 /**
- * @param {TagNode['children'][number]} node
- * @returns {boolean}
+ * @param {ChildType<TagNode>} node
+ * @returns {node is TagNode}
  */
 function isMetaTagNode(node) {
-  return node.type === "Tag" && node.name === "meta";
+  return node.type === NODE_TYPES.Tag && node.name === "meta";
 }
 
 /**
@@ -46,10 +43,10 @@ module.exports = {
         if (node.name !== "head") {
           return;
         }
-        const metaTags = node.children.filter(isMetaTagNode);
+        const metaTags = filter(node.children, isMetaTagNode);
 
         const descriptionMetaTags = metaTags.filter((meta) => {
-          const nameAttr = NodeUtils.findAttr(meta, "name");
+          const nameAttr = findAttr(meta, "name");
           return (
             !!nameAttr &&
             nameAttr.value &&
@@ -64,7 +61,7 @@ module.exports = {
           });
         } else {
           descriptionMetaTags.forEach((meta) => {
-            const content = NodeUtils.findAttr(meta, "content");
+            const content = findAttr(meta, "content");
             if (
               !content ||
               !content.value ||

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

@@ -1,10 +1,7 @@
-/**
- * @typedef {import("../types").Rule} Rule
- * @typedef {import("es-html-parser").TagNode} TagNode
- */
-
+const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
-const { NodeUtils } = require("./utils");
+const { find } = require("./utils/array");
+const { findAttr } = require("./utils/node");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
@@ -12,14 +9,13 @@ const MESSAGE_IDS = {
 };
 
 /**
- * Checks whether a given node is a meta tag with viewport attribute or not.
- * @param {TagNode['children'][number]} node A node to check
- * @returns {node is TagNode} Return true if the given node is a meta tag with viewport attribute, otherwise false.
+ * @param {ChildType<TagNode>} node
+ * @returns {node is TagNode}
  */
 function isMetaViewport(node) {
-  if (node.type === "Tag" && node.name === "meta") {
-    const nameAttribute = NodeUtils.findAttr(node, "name");
-    return (
+  if (node.type === NODE_TYPES.Tag && node.name === "meta") {
+    const nameAttribute = findAttr(node, "name");
+    return !!(
       nameAttribute &&
       nameAttribute.value &&
       nameAttribute.value.value.toLowerCase() === "viewport"
@@ -57,7 +53,7 @@ module.exports = {
           return;
         }
 
-        const metaViewport = node.children.find(isMetaViewport);
+        const metaViewport = find(node.children, isMetaViewport);
 
         if (!metaViewport) {
           context.report({
@@ -67,14 +63,17 @@ module.exports = {
           return;
         }
 
-        const contentAttribute = NodeUtils.findAttr(metaViewport, "content");
-        const isValueEmpty =
-          !contentAttribute.value || !contentAttribute.value.value.length;
+        const contentAttribute = findAttr(metaViewport, "content");
+        const isAttributeEmpty =
+          !contentAttribute ||
+          !contentAttribute.value ||
+          !contentAttribute.value.value.length;
 
-        if (isValueEmpty) {
-          const reportTarget = !contentAttribute.value
-            ? metaViewport
-            : contentAttribute;
+        if (isAttributeEmpty) {
+          const reportTarget =
+            !contentAttribute || !contentAttribute.value
+              ? metaViewport
+              : contentAttribute;
           context.report({
             node: reportTarget,
             messageId: MESSAGE_IDS.EMPTY,

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

@@ -0,0 +1,135 @@
+const { NODE_TYPES } = require("@html-eslint/parser");
+const { RULE_CATEGORY } = require("../constants");
+const { filter } = require("./utils/array");
+const { findAttr } = require("./utils/node");
+
+const MESSAGE_IDS = {
+  MISSING: "missing",
+  EMPTY: "empty",
+};
+
+const DEFAULT_REQUIRED_PROPERTIES = [
+  "og:title",
+  "og:type",
+  "og:url",
+  "og:image",
+];
+
+/**
+ * @param {string[]} properties
+ * @returns {string[]}
+ */
+function normalize(properties) {
+  return properties.map((prop) => {
+    if (prop.indexOf("og:") === 0) return prop;
+    return `og:${prop}`;
+  });
+}
+
+/**
+ * @type {Rule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: 'Enforce to use `<meta name="viewport">` in `<head>`',
+      category: RULE_CATEGORY.SEO,
+      recommended: false,
+    },
+
+    fixable: null,
+    schema: [
+      {
+        type: "array",
+        items: {
+          type: "string",
+        },
+        uniqueItems: true,
+      },
+    ],
+    messages: {
+      [MESSAGE_IDS.MISSING]:
+        "Require use of meta tags for OGP. ({{properties}})",
+      [MESSAGE_IDS.EMPTY]: "Unexpected empty 'content' attribute",
+    },
+  },
+
+  create(context) {
+    /**
+     * @type {string[]}
+     */
+    const requiredProperties = normalize(
+      (context.options && context.options[0]) || DEFAULT_REQUIRED_PROPERTIES
+    );
+
+    /**
+     * @param {ChildType<TagNode>} node
+     * @returns {node is TagNode}
+     */
+    function isOgpMeta(node) {
+      const isMeta = node.type === NODE_TYPES.Tag && node.name === "meta";
+      const property = isMeta ? findAttr(node, "property") : undefined;
+      const hasOgProperty =
+        !!property &&
+        !!property.value &&
+        property.value.value.indexOf("og:") === 0;
+      return hasOgProperty;
+    }
+
+    return {
+      Tag(node) {
+        if (node.name !== "head") {
+          return;
+        }
+        const children = node.children;
+
+        const metaTags = filter(children, isOgpMeta);
+
+        const missingProperties = requiredProperties.filter((required) => {
+          return !metaTags.some((meta) => {
+            const property = findAttr(meta, "property");
+            if (property && property.value) {
+              return property.value.value === required;
+            }
+            return false;
+          });
+        });
+
+        const emptyContentMetaTags = metaTags.filter((meta) => {
+          const property = findAttr(meta, "property");
+          if (
+            property &&
+            property.value &&
+            requiredProperties.includes(property.value.value)
+          ) {
+            const content = findAttr(meta, "content");
+            return !content || !content.value || !content.value.value;
+          }
+          return false;
+        });
+
+        if (missingProperties.length) {
+          context.report({
+            node,
+            data: {
+              properties: missingProperties.join(", "),
+            },
+            messageId: MESSAGE_IDS.MISSING,
+          });
+        }
+
+        if (emptyContentMetaTags.length) {
+          emptyContentMetaTags.forEach((meta) => {
+            const content = findAttr(meta, "content");
+            context.report({
+              node: content || meta,
+              messageId: MESSAGE_IDS.EMPTY,
+            });
+          });
+        }
+      },
+    };
+  },
+};

package/lib/rules/require-title.js

@@ -1,9 +1,6 @@
-/**
- * @typedef {import("../types").Rule} Rule
- * @typedef {import("es-html-parser").TagNode} TagNode
- * @typedef {import("es-html-parser").TextNode} TextNode
- */
+const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
+const { find } = require("./utils/array");
 
 const MESSAGE_IDS = {
   MISSING_TITLE: "missing",
@@ -11,21 +8,19 @@ const MESSAGE_IDS = {
 };
 
 /**
- * Checks whether the node is a title TagNode.
- * @param {TagNode['children'][number]} node A node to check
- * @returns {node is TagNode} Returns true if the given node is a title TagNode, otherwise false
+ * @param {ChildType<TagNode>} node
+ * @returns {node is TagNode}
  */
-function isTitleTagNode(node) {
-  return node.type === "Tag" && node.name === "title";
+function isTitle(node) {
+  return node.type === NODE_TYPES.Tag && node.name === "title";
 }
 
 /**
- * Checks whether the node is a TextNode that has value.
- * @param {TagNode['children'][number]} node A node to check
- * @returns {node is TextNode} Returns true if the given node is a TextNode with non-empty value, otherwise false
+ * @param {ChildType<TagNode>} node
+ * @returns {node is TextNode}
  */
-function isNonEmptyTextNode(node) {
-  return node.type === "Text" && node.value.trim().length > 0;
+function isNonEmptyText(node) {
+  return node.type === NODE_TYPES.Text && node.value.trim().length > 0;
 }
 
 /**
@@ -55,9 +50,10 @@ module.exports = {
         if (node.name !== "head") {
           return;
         }
-        const titleTag = node.children.find(isTitleTagNode);
 
-        if (!titleTag) {
+        const title = find(node.children, isTitle);
+
+        if (!title) {
           context.report({
             node,
             messageId: MESSAGE_IDS.MISSING_TITLE,
@@ -65,15 +61,13 @@ module.exports = {
           return;
         }
 
-        if (isTitleTagNode(titleTag)) {
-          const titleContentText = titleTag.children.find(isNonEmptyTextNode);
+        const content = find(title.children, isNonEmptyText);
 
-          if (!titleContentText) {
-            context.report({
-              node: titleTag,
-              messageId: MESSAGE_IDS.EMPTY_TITLE,
-            });
-          }
+        if (!content) {
+          context.report({
+            node: title,
+            messageId: MESSAGE_IDS.EMPTY_TITLE,
+          });
         }
       },
     };

package/lib/rules/sort-attrs.js

@@ -0,0 +1,158 @@
+const { RULE_CATEGORY } = require("../constants");
+
+const MESSAGE_IDS = {
+  UNSORTED: "unsorted",
+};
+
+/**
+ * @type {Rule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Enforce attributes alphabetical sorting",
+      category: RULE_CATEGORY.STYLE,
+      recommended: false,
+    },
+    fixable: "code",
+    schema: [
+      {
+        type: "object",
+        properties: {
+          priority: {
+            type: "array",
+            items: {
+              type: "string",
+              uniqueItems: true,
+            },
+          },
+        },
+      },
+    ],
+    messages: {
+      [MESSAGE_IDS.UNSORTED]: "Attributes should be sorted alphabetically",
+    },
+  },
+  create(context) {
+    const sourceCode = context.getSourceCode();
+    const option = context.options[0] || {
+      priority: ["id", "type", "class", "style"],
+    };
+    /**
+     * @type {string[]}
+     */
+    const priority = option.priority;
+
+    /**
+     * @param {AttributeNode} attrA
+     * @param {AttributeNode} attrB
+     * @return {number}
+     */
+    function compare(attrA, attrB) {
+      const keyA = attrA.key.value;
+      const keyB = attrB.key.value;
+      const keyAReservedValue = priority.indexOf(keyA);
+      const keyBReservedValue = priority.indexOf(keyB);
+      if (keyAReservedValue >= 0 && keyBReservedValue >= 0) {
+        return keyAReservedValue - keyBReservedValue;
+      } else if (keyAReservedValue >= 0) {
+        return -1;
+      } else if (keyBReservedValue >= 0) {
+        return 1;
+      }
+      return keyA.localeCompare(keyB);
+    }
+
+    /**
+     * @param {string} source
+     * @param {AttributeNode[]} unsorted
+     * @param {AttributeNode[]} sorted
+     * @returns {string}
+     */
+    function getSortedCode(source, unsorted, sorted) {
+      let result = "";
+      unsorted.forEach((unsortedAttr, index) => {
+        const sortedAttr = sorted[index];
+        result += source.slice(sortedAttr.range[0], sortedAttr.range[1]);
+
+        const nextUnsortedAttr = unsorted[index + 1];
+        if (nextUnsortedAttr) {
+          result += source.slice(
+            unsortedAttr.range[1],
+            nextUnsortedAttr.range[0]
+          );
+        }
+      });
+      return result;
+    }
+
+    /**
+     * @param {RuleFixer} fixer
+     * @param {AttributeNode[]} unsorted
+     * @param {AttributeNode[]} sorted
+     */
+    function fix(fixer, unsorted, sorted) {
+      const source = sourceCode.getText();
+      return fixer.replaceTextRange(
+        [unsorted[0].range[0], unsorted[unsorted.length - 1].range[1]],
+        getSortedCode(source, unsorted, sorted)
+      );
+    }
+
+    /**
+     * @param {AttributeNode[]} before
+     * @param {AttributeNode[]} after
+     * @returns {boolean}
+     */
+    function isChanged(before, after) {
+      for (let i = 0; i < before.length; i++) {
+        if (before[i] !== after[i]) return true;
+      }
+      return false;
+    }
+
+    /**
+     * @param {AttributeNode[]} unsorted
+     */
+    function checkSorting(unsorted) {
+      if (unsorted.length <= 1) {
+        return;
+      }
+
+      const sorted = [...unsorted].sort(compare);
+
+      if (!isChanged(unsorted, sorted)) {
+        return;
+      }
+      const first = unsorted[0];
+      const last = unsorted[unsorted.length - 1];
+      context.report({
+        node: {
+          range: [first.range[0], last.range[1]],
+          loc: {
+            start: first.loc.start,
+            end: last.loc.end,
+          },
+        },
+        messageId: MESSAGE_IDS.UNSORTED,
+        fix(fixer) {
+          return fix(fixer, unsorted, sorted);
+        },
+      });
+    }
+
+    return {
+      ScriptTag(node) {
+        checkSorting(node.attributes);
+      },
+      Tag(node) {
+        checkSorting(node.attributes);
+      },
+      StyleTag(node) {
+        checkSorting(node.attributes);
+      },
+    };
+  },
+};

package/lib/rules/utils/array.js

@@ -0,0 +1,26 @@
+/**
+ * @template T
+ * @template {T} S
+ * @param {T[]} items
+ * @param {(node: T) => node is S} predicate
+ * @returns {S | undefined}
+ */
+function find(items, predicate) {
+  return items.find(predicate);
+}
+
+/**
+ * @template T
+ * @template {T} S
+ * @param {T[]} items
+ * @param {(node: T) => node is S} predicate
+ * @returns {S[]}
+ */
+function filter(items, predicate) {
+  return items.filter(predicate);
+}
+
+module.exports = {
+  find,
+  filter,
+};

package/lib/rules/utils/node.js

@@ -0,0 +1,70 @@
+module.exports = {
+  /**
+   * @param {TagNode | ScriptTagNode | StyleTagNode} node
+   * @param {string} key
+   * @returns {AttributeNode | undefined}
+   */
+  findAttr(node, key) {
+    return node.attributes.find(
+      (attr) => attr.key && attr.key.value.toLowerCase() === key.toLowerCase()
+    );
+  },
+
+  /**
+   * Checks whether a node's all tokens are on the same line or not.
+   * @param {AnyNode} node A node to check
+   * @returns {boolean} `true` if a node's tokens are on the same line, otherwise `false`.
+   */
+  isNodeTokensOnSameLine(node) {
+    return node.loc.start.line === node.loc.end.line;
+  },
+
+  /**
+   *
+   * @param {TextNode | CommentContentNode} node
+   * @returns {LineNode[]}
+   */
+  splitToLineNodes(node) {
+    let start = node.range[0];
+    let line = node.loc.start.line;
+    const startCol = node.loc.start.column;
+
+    return node.value.split("\n").map((value, index) => {
+      const columnStart = index === 0 ? startCol : 0;
+      /**
+       * @type {LineNode}
+       */
+      const lineNode = {
+        type: "Line",
+        value,
+        range: [start, start + value.length],
+        loc: {
+          start: {
+            line,
+            column: columnStart,
+          },
+          end: {
+            line,
+            column: columnStart + value.length,
+          },
+        },
+      };
+
+      start += value.length + 1;
+      line += 1;
+      return lineNode;
+    });
+  },
+  /**
+   * Get location between two nodes.
+   * @param {BaseNode} before A node placed in before
+   * @param {BaseNode} after A node placed in after
+   * @returns {Location} location between two nodes.
+   */
+  getLocBetween(before, after) {
+    return {
+      start: before.loc.end,
+      end: after.loc.start,
+    };
+  },
+};