@html-eslint/eslint-plugin 0.27.0 → 0.28.0-alpha.3

package/lib/rules/require-li-container.js

@@ -38,7 +38,7 @@ module.exports = {
         if (node.name !== "li") {
           return;
         }
-        if (!node.parent || node.parent.type === NODE_TYPES.Program) {
+        if (!node.parent || node.parent.type === NODE_TYPES.Document) {
           context.report({
             node,
             messageId: MESSAGE_IDS.INVALID,

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

@@ -1,12 +1,12 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
+ * @typedef { import("es-html-parser").TagNode } TagNode
+ * @typedef { import("es-html-parser").AnyNode } AnyNode
  */
 
-const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
 const { find } = require("./utils/array");
-const { findAttr } = require("./utils/node");
+const { findAttr, isTag } = require("./utils/node");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
@@ -14,15 +14,11 @@ const MESSAGE_IDS = {
 };
 
 /**
- * @param { import("../types").ChildType<TagNode>} node
+ * @param {AnyNode} node
  * @returns {node is TagNode}
  */
 function isMetaCharset(node) {
-  return (
-    node.type === NODE_TYPES.Tag &&
-    node.name === "meta" &&
-    !!findAttr(node, "charset")
-  );
+  return isTag(node) && node.name === "meta" && !!findAttr(node, "charset");
 }
 
 /**

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

@@ -1,11 +1,11 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
+ * @typedef { import("es-html-parser").TagNode } TagNode
+ * @typedef { import("es-html-parser").AnyNode } AnyNode
  */
-const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
 const { filter } = require("./utils/array");
-const { findAttr } = require("./utils/node");
+const { findAttr, isTag } = require("./utils/node");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
@@ -13,11 +13,11 @@ const MESSAGE_IDS = {
 };
 
 /**
- * @param {import("../types").ChildType<TagNode>} node
+ * @param {AnyNode} node
  * @returns {node is TagNode}
  */
 function isMetaTagNode(node) {
-  return node.type === NODE_TYPES.Tag && node.name === "meta";
+  return isTag(node) && node.name === "meta";
 }
 
 /**

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

@@ -1,12 +1,12 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
+ * @typedef { import("es-html-parser").TagNode } TagNode
+ * @typedef { import("es-html-parser").AnyNode } AnyNode
  */
 
-const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
 const { find } = require("./utils/array");
-const { findAttr } = require("./utils/node");
+const { findAttr, isTag } = require("./utils/node");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
@@ -14,11 +14,11 @@ const MESSAGE_IDS = {
 };
 
 /**
- * @param {import("../types").ChildType<TagNode>} node
+ * @param {AnyNode} node
  * @returns {node is TagNode}
  */
 function isMetaViewport(node) {
-  if (node.type === NODE_TYPES.Tag && node.name === "meta") {
+  if (isTag(node) && node.name === "meta") {
     const nameAttribute = findAttr(node, "name");
     return !!(
       nameAttribute &&

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

@@ -1,12 +1,12 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
+ * @typedef { import("es-html-parser").TagNode } TagNode
+ *  @typedef { import("es-html-parser").AnyNode } AnyNode
  */
 
-const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
 const { filter } = require("./utils/array");
-const { findAttr } = require("./utils/node");
+const { findAttr, isTag } = require("./utils/node");
 
 const MESSAGE_IDS = {
   MISSING: "missing",
@@ -70,11 +70,11 @@ module.exports = {
     );
 
     /**
-     * @param {import("../types").ChildType<TagNode>} node
+     * @param {AnyNode} node
      * @returns {node is TagNode}
      */
     function isOgpMeta(node) {
-      const isMeta = node.type === NODE_TYPES.Tag && node.name === "meta";
+      const isMeta = isTag(node) && node.name === "meta";
       const property = isMeta ? findAttr(node, "property") : undefined;
       const hasOgProperty =
         !!property &&

package/lib/rules/require-title.js

@@ -1,12 +1,13 @@
 /**
  * @typedef { import("../types").RuleModule } RuleModule
- * @typedef { import("../types").TagNode } TagNode
- * @typedef { import("../types").TextNode } TextNode
+ * @typedef { import("es-html-parser").TagNode } TagNode
+ * @typedef { import("es-html-parser").TextNode } TextNode
+ * @typedef { import("es-html-parser").AnyNode } AnyNode
  */
 
-const { NODE_TYPES } = require("@html-eslint/parser");
 const { RULE_CATEGORY } = require("../constants");
 const { find } = require("./utils/array");
+const { isText, isTag } = require("./utils/node");
 
 const MESSAGE_IDS = {
   MISSING_TITLE: "missing",
@@ -14,19 +15,19 @@ const MESSAGE_IDS = {
 };
 
 /**
- * @param {import("../types").ChildType<TagNode>} node
+ * @param {AnyNode} node
  * @returns {node is TagNode}
  */
 function isTitle(node) {
-  return node.type === NODE_TYPES.Tag && node.name === "title";
+  return isTag(node) && node.name === "title";
 }
 
 /**
- * @param {import("../types").ChildType<TagNode>} node
+ * @param {AnyNode} node
  * @returns {node is TextNode}
  */
 function isNonEmptyText(node) {
-  return node.type === NODE_TYPES.Text && node.value.trim().length > 0;
+  return isText(node) && node.value.trim().length > 0;
 }
 
 /**

package/lib/rules/sort-attrs.js

@@ -6,6 +6,8 @@
  */
 
 const { RULE_CATEGORY } = require("../constants");
+const { getSourceCode } = require("./utils/source-code");
+const { createVisitors } = require("./utils/visitors");
 
 const MESSAGE_IDS = {
   UNSORTED: "unsorted",
@@ -43,7 +45,7 @@ module.exports = {
     },
   },
   create(context) {
-    const sourceCode = context.getSourceCode();
+    const sourceCode = getSourceCode(context);
     const option = context.options[0] || {
       priority: ["id", "type", "class", "style"],
     };
@@ -150,7 +152,7 @@ module.exports = {
       });
     }
 
-    return {
+    return createVisitors(context, {
       ScriptTag(node) {
         checkSorting(node.attributes);
       },
@@ -160,6 +162,6 @@ module.exports = {
       StyleTag(node) {
         checkSorting(node.attributes);
       },
-    };
+    });
   },
 };

package/lib/rules/utils/node.js

@@ -1,83 +1,241 @@
 /**
- * @typedef { import("../../types").TagNode } TagNode
- * @typedef { import("../../types").ScriptTagNode } ScriptTagNode
- * @typedef { import("../../types").StyleTagNode } StyleTagNode
- * @typedef { import("../../types").AttributeNode } AttributeNode
- * @typedef { import("../../types").AnyNode } AnyNode
- * @typedef { import("../../types").TextNode } TextNode
- * @typedef { import("../../types").CommentContentNode } CommentContentNode
+ * @typedef { import("es-html-parser").TagNode } TagNode
+ * @typedef { import("es-html-parser").ScriptTagNode } ScriptTagNode
+ * @typedef { import("es-html-parser").StyleTagNode } StyleTagNode
+ * @typedef { import("es-html-parser").AttributeNode } AttributeNode
+ * @typedef { import("es-html-parser").AttributeValueNode } AttributeValueNode
+ * @typedef { import("es-html-parser").AnyNode } AnyNode
+ * @typedef { import("es-html-parser").TextNode } TextNode
+ * @typedef { import("es-html-parser").CommentContentNode } CommentContentNode
+ * @typedef { import("es-html-parser").CommentNode } CommentNode
+ * @typedef { import("es-html-parser").AnyToken} AnyToken
  * @typedef { import("../../types").LineNode } LineNode
  * @typedef { import("../../types").BaseNode } BaseNode
  * @typedef { import("../../types").Location } Location
+ * @typedef { import("../../types").Range } Range
  */
 
-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()
-    );
-  },
+const { NODE_TYPES } = require("@html-eslint/parser");
+
+/**
+ * @param {TagNode | ScriptTagNode | StyleTagNode} node
+ * @param {string} key
+ * @returns {AttributeNode | undefined}
+ */
+function findAttr(node, key) {
+  return node.attributes.find(
+    (attr) => attr.key && attr.key.value.toLowerCase() === key.toLowerCase()
+  );
+}
+
+/**
+ * Checks whether a node's attributes is empty or not.
+ * @param {TagNode | ScriptTagNode | StyleTagNode} node
+ * @returns {boolean}
+ */
+function isAttributesEmpty(node) {
+  return !node.attributes || node.attributes.length <= 0;
+}
+
+/**
+ * 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`.
+ */
+function isNodeTokensOnSameLine(node) {
+  return node.loc.start.line === node.loc.end.line;
+}
+
+/**
+ *
+ * @param {Range} rangeA
+ * @param {Range} rangeB
+ * @returns {boolean}
+ */
+function isRangesOverlap(rangeA, rangeB) {
+  return rangeA[0] < rangeB[1] && rangeB[0] < rangeB[1];
+}
 
+/**
+ * @param {(TextNode | CommentContentNode)['templates']} templates
+ * @param {Range} range
+ * @returns {boolean}
+ */
+function isOverlapWithTemplates(templates, range) {
+  return templates
+    .filter((template) => template.isTemplate)
+    .some((template) => isRangesOverlap(template.range, range));
+}
+
+/**
+ *
+ * @param {TextNode | CommentContentNode} node
+ * @returns {LineNode[]}
+ */
+function splitToLineNodes(node) {
+  let start = node.range[0];
+  let line = node.loc.start.line;
+  const startCol = node.loc.start.column;
   /**
-   * 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`.
+   * @type {LineNode[]}
    */
-  isNodeTokensOnSameLine(node) {
-    return node.loc.start.line === node.loc.end.line;
-  },
-
+  const lineNodes = [];
+  const templates = node.templates || [];
   /**
    *
-   * @param {TextNode | CommentContentNode} node
-   * @returns {LineNode[]}
+   * @param {import("../../types").Range} range
    */
-  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;
+  function shouldSkipIndentCheck(range) {
+    const overlappedTemplates = templates.filter(
+      (template) =>
+        template.isTemplate && isRangesOverlap(template.range, range)
+    );
+
+    const isLineInTemplate = overlappedTemplates.some((template) => {
+      return template.range[0] <= range[0] && template.range[1] >= range[1];
     });
-  },
-  /**
-   * 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,
+    if (isLineInTemplate) {
+      return true;
+    }
+    const isLineBeforeTemplate = overlappedTemplates.some((template) => {
+      return template.range[0] <= range[0] && template.range[1] <= range[1];
+    });
+    if (isLineBeforeTemplate) {
+      return true;
+    }
+    const isLineAfterTemplate = overlappedTemplates.some((template) => {
+      return template.range[1] <= range[0];
+    });
+    if (isLineAfterTemplate) {
+      return true;
+    }
+    return false;
+  }
+
+  node.value.split("\n").forEach((value, index) => {
+    const columnStart = index === 0 ? startCol : 0;
+    /**
+     * @type {import("../../types").Range}
+     */
+    const range = [start, start + value.length];
+    const loc = {
+      start: {
+        line,
+        column: columnStart,
+      },
+      end: {
+        line,
+        column: columnStart + value.length,
+      },
+    };
+    /**
+     * @type {LineNode}
+     */
+    const lineNode = {
+      type: "Line",
+      value,
+      range,
+      loc,
+      skipIndentCheck: shouldSkipIndentCheck(range),
     };
-  },
+
+    start += value.length + 1;
+    line += 1;
+
+    lineNodes.push(lineNode);
+  });
+
+  return lineNodes;
+}
+
+/**
+ * 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.
+ */
+function getLocBetween(before, after) {
+  return {
+    start: before.loc.end,
+    end: after.loc.start,
+  };
+}
+
+/**
+ * @param {AttributeValueNode} node
+ * @return {boolean}
+ */
+function isExpressionInTemplate(node) {
+  if (node.type === NODE_TYPES.AttributeValue) {
+    return node.value.indexOf("${") === 0;
+  }
+  return false;
+}
+
+/**
+ * @param {AnyNode} node
+ * @returns {node is TagNode}
+ */
+function isTag(node) {
+  return node.type === NODE_TYPES.Tag;
+}
+
+/**
+ * @param {AnyNode} node
+ * @returns {node is CommentNode}
+ */
+function isComment(node) {
+  return node.type === NODE_TYPES.Comment;
+}
+
+/**
+ * @param {AnyNode} node
+ * @returns {node is TextNode}
+ */
+function isText(node) {
+  return node.type === NODE_TYPES.Text;
+}
+
+const lineBreakPattern = /\r\n|[\r\n\u2028\u2029]/u;
+const lineEndingPattern = new RegExp(lineBreakPattern.source, "gu");
+/**
+ * @param {string} source
+ * @returns {string[]}
+ */
+function codeToLines(source) {
+  return source.split(lineEndingPattern);
+}
+
+/**
+ *
+ * @param {AnyToken[]} tokens
+ * @returns {((CommentContentNode | TextNode)['templates'][number])[]}
+ */
+function getTemplateTokens(tokens) {
+  return (
+    []
+      .concat(
+        ...tokens
+          // @ts-ignore
+          .map((token) => token["templates"] || [])
+      )
+      // @ts-ignore
+      .filter((token) => token.isTemplate)
+  );
+}
+
+module.exports = {
+  findAttr,
+  isAttributesEmpty,
+  isNodeTokensOnSameLine,
+  splitToLineNodes,
+  getLocBetween,
+  isExpressionInTemplate,
+  isTag,
+  isComment,
+  isText,
+  isOverlapWithTemplates,
+  codeToLines,
+  isRangesOverlap,
+  getTemplateTokens,
 };

package/lib/rules/utils/settings.js

@@ -0,0 +1,88 @@
+/**
+ * @typedef {import("../../types").MaybeHTMLSettings} MaybeHTMLSettings
+ * @typedef {import("../../types").HTMLSettings} HTMLSettings
+ * @typedef {import("../../types").Context} Context
+ * @typedef {import("estree").TaggedTemplateExpression} TaggedTemplateExpression
+ * @typedef {import("estree").TemplateLiteral} TemplateLiteral
+ */
+
+const { getSourceCode } = require("../utils/source-code");
+
+const DEFAULT_SETTINGS = {
+  templateLiterals: {
+    tags: ["^html$"],
+    comments: ["^\\s*html\\s*$"],
+  },
+};
+
+/**
+ * @type {HTMLSettings | null}
+ */
+let cachedSettings = null;
+
+/**
+ * @param {{ html?: MaybeHTMLSettings }} settings
+ * @returns {HTMLSettings}
+ */
+function getSettings(settings) {
+  const tags =
+    (settings &&
+      settings.html &&
+      settings.html.templateLiterals &&
+      settings.html.templateLiterals.tags) ||
+    DEFAULT_SETTINGS.templateLiterals.tags;
+
+  const comments =
+    (settings &&
+      settings.html &&
+      settings.html.templateLiterals &&
+      settings.html.templateLiterals.comments) ||
+    DEFAULT_SETTINGS.templateLiterals.comments;
+
+  if (cachedSettings) {
+    return cachedSettings;
+  }
+  cachedSettings = {
+    templateLiterals: {
+      tags: tags.map((tag) => new RegExp(tag, "u")),
+      comments: comments.map((comment) => new RegExp(comment, "u")),
+    },
+  };
+  return cachedSettings;
+}
+
+/**
+ * @param {TaggedTemplateExpression} node
+ * @param {Context} context
+ * @returns {boolean}
+ */
+function shouldCheckTaggedTemplateExpression(node, context) {
+  const { templateLiterals } = getSettings(context.settings);
+  const tags = templateLiterals.tags;
+  const tagNode = node.tag;
+  return !!(
+    tagNode.type === "Identifier" && tags.some((tag) => tag.test(tagNode.name))
+  );
+}
+
+/**
+ *
+ * @param {TemplateLiteral} node
+ * @param {Context} context
+ * @returns {boolean}
+ */
+function shouldCheckTemplateLiteral(node, context) {
+  const sourceCode = getSourceCode(context);
+  const { templateLiterals } = getSettings(context.settings);
+  const comments = sourceCode.getCommentsBefore(node);
+  const last = comments[comments.length - 1];
+  return !!(
+    last &&
+    templateLiterals.comments.some((comment) => comment.test(last.value))
+  );
+}
+
+module.exports = {
+  shouldCheckTemplateLiteral,
+  shouldCheckTaggedTemplateExpression,
+};

package/lib/rules/utils/source-code.js

@@ -0,0 +1,14 @@
+/**
+ * @typedef {import("../../types").Context} Context
+ */
+
+/**
+ * @param {Context} context
+ */
+function getSourceCode(context) {
+  return context.sourceCode || context.getSourceCode();
+}
+
+module.exports = {
+  getSourceCode,
+};

package/lib/rules/utils/visitors.js

@@ -0,0 +1,52 @@
+/**
+ * @typedef { import("../../types").RuleListener } RuleListener
+ * @typedef { import("../../types").Context } Context
+ */
+
+const {
+  shouldCheckTaggedTemplateExpression,
+  shouldCheckTemplateLiteral,
+} = require("./settings");
+const { parse } = require("@html-eslint/template-parser");
+const { getSourceCode } = require("./source-code");
+
+/**
+ * @param {Context} context
+ * @param {any} visitors
+ * @returns {RuleListener}
+ */
+function createTemplateVisitors(context, visitors) {
+  return {
+    TaggedTemplateExpression(node) {
+      if (shouldCheckTaggedTemplateExpression(node, context)) {
+        parse(node.quasi, getSourceCode(context), visitors);
+      }
+    },
+    TemplateLiteral(node) {
+      if (shouldCheckTemplateLiteral(node, context)) {
+        parse(node, getSourceCode(context), visitors);
+      }
+    },
+  };
+}
+
+/**
+ * @param {Context} context
+ * @param {RuleListener} visitors
+ * @param {any} [templateVisitors]
+ * @returns {RuleListener}
+ */
+function createVisitors(context, visitors, templateVisitors) {
+  const tmplVisitors = createTemplateVisitors(
+    context,
+    templateVisitors || visitors
+  );
+  return {
+    ...visitors,
+    ...tmplVisitors,
+  };
+}
+
+module.exports = {
+  createVisitors,
+};