@html-eslint/eslint-plugin 0.28.0-alpha.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/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,
+};

package/lib/types.d.ts

@@ -19,12 +19,6 @@ export interface BaseNode {
   };
 }
 
-export interface ProgramNode
-  extends Omit<ESHtml.DocumentNode, "type" | "children"> {
-  type: "Program";
-  body: ESHtml.DocumentNode["children"];
-}
-
 interface AttributeKeyNode extends ESHtml.AttributeKeyNode {
   parent: AttributeNode;
 }
@@ -35,7 +29,7 @@ interface TextNode extends ESHtml.TextNode {
 
 export interface TagNode extends ESHtml.TagNode {
   attributes: AttributeNode[];
-  parent: TagNode | ProgramNode;
+  parent: TagNode | HTMLNode;
   openStart: OpenTagStartNode;
   openEnd: OpenTagEndNode;
   close: CloseTagNode;
@@ -78,7 +72,7 @@ interface AttributeValueWrapperStartNode
 
 export interface ScriptTagNode extends ESHtml.ScriptTagNode {
   attributes: AttributeNode[];
-  parent: ProgramNode | TagNode;
+  parent: HTMLNode | TagNode;
   openStart: OpenScriptTagStartNode;
   openEnd: OpenScriptTagEndNode;
 }
@@ -101,7 +95,7 @@ interface ScriptTagContentNode extends ESHtml.ScriptTagContentNode {
 
 export interface StyleTagNode extends ESHtml.StyleTagNode {
   attributes: AttributeNode[];
-  parent: TagNode | ProgramNode;
+  parent: TagNode | HTMLNode;
   openStart: OpenStyleTagStartNode;
   openEnd: OpenStyleTagEndNode;
 }
@@ -123,7 +117,7 @@ interface CloseStyleTagNode extends ESHtml.CloseStyleTagNode {
 }
 
 interface CommentNode extends ESHtml.CommentNode {
-  parent: ProgramNode | TagNode;
+  parent: HTMLNode | TagNode;
 }
 
 interface CommentOpenNode extends ESHtml.CommentOpenNode {
@@ -139,7 +133,7 @@ interface CommentContentNode extends ESHtml.CommentContentNode {
 }
 
 interface DoctypeNode extends ESHtml.DoctypeNode {
-  parent: ProgramNode;
+  parent: HTMLNode;
 }
 
 interface DoctypeOpenNode extends ESHtml.DoctypeOpenNode {
@@ -171,10 +165,18 @@ interface DoctypeAttributeWrapperEnd
 interface LineNode extends BaseNode {
   type: "Line";
   value: string;
+  skipIndentCheck: boolean;
 }
 
-interface RuleListener {
-  Program?: (node: ProgramNode) => void;
+type PostFix<T, S extends string> = {
+  [K in keyof T as `${K & string}${S}`]: T[K];
+};
+
+export type RuleListener = BaseRuleListener &
+  PostFix<BaseRuleListener, ":exit">;
+
+interface BaseRuleListener {
+  Document?: (node: ESHtml.DocumentNode) => void;
   AttributeKey?: (node: AttributeKeyNode) => void;
   Text?: (node: TextNode) => void;
   Tag?: (node: TagNode) => void;
@@ -264,12 +266,6 @@ export interface Context extends Omit<ESLint.Rule.RuleContext, "report"> {
   report(descriptor: ReportDescriptor): void;
 }
 
-export type ChildType<T extends BaseNode> = T extends ProgramNode
-  ? T["body"][number]
-  : T extends TagNode
-  ? T["children"][number]
-  : never;
-
 export type ContentNode =
   | CommentNode
   | DoctypeNode