@html-eslint/eslint-plugin 0.25.0 → 0.27.0

package/lib/configs/recommended.js

@@ -7,7 +7,12 @@ module.exports = {
     "@html-eslint/no-multiple-h1": "error",
     "@html-eslint/no-extra-spacing-attrs": "error",
     "@html-eslint/attrs-newline": "error",
-    "@html-eslint/element-newline": "error",
+    "@html-eslint/element-newline": [
+      "error",
+      {
+        inline: [`$inline`],
+      },
+    ],
     "@html-eslint/no-duplicate-id": "error",
     "@html-eslint/indent": "error",
     "@html-eslint/require-li-container": "error",

package/lib/rules/element-newline.js

@@ -3,13 +3,66 @@
  * @typedef { import("../types").ProgramNode } ProgramNode
  * @typedef { import("../types").TagNode } TagNode
  * @typedef { import("../types").BaseNode } BaseNode
+ * @typedef { import("../types").CommentNode } CommentNode
+ * @typedef { import("../types").DoctypeNode } DoctypeNode
+ * @typedef { import("../types").ScriptTagNode } ScriptTagNode
+ * @typedef { import("../types").StyleTagNode } StyleTagNode
+ * @typedef { import("../types").TextNode } TextNode
+ * @typedef { CommentNode | DoctypeNode | ScriptTagNode | StyleTagNode | TagNode | TextNode } NewlineNode
+ * @typedef {{
+ *   childFirst: NewlineNode | null;
+ *   childLast: NewlineNode | null;
+ *   shouldBeNewline: boolean;
+ * }} NodeMeta
  */
 
 const { RULE_CATEGORY } = require("../constants");
 
 const MESSAGE_IDS = {
   EXPECT_NEW_LINE_AFTER: "expectAfter",
+  EXPECT_NEW_LINE_AFTER_OPEN: "expectAfterOpen",
   EXPECT_NEW_LINE_BEFORE: "expectBefore",
+  EXPECT_NEW_LINE_BEFORE_CLOSE: "expectBeforeClose",
+};
+
+/**
+ * @type {Object.<string, Array<string>>}
+ */
+const PRESETS = {
+  // From https://developer.mozilla.org/en-US/docs/Web/HTML/Element#inline_text_semantics
+  $inline: `
+a
+abbr
+b
+bdi
+bdo
+br
+cite
+code
+data
+dfn
+em
+i
+kbd
+mark
+q
+rp
+rt
+ruby
+s
+samp
+small
+span
+strong
+sub
+sup
+time
+u
+var
+wbr
+  `
+    .trim()
+    .split(`\n`),
 };
 
 /**
@@ -30,6 +83,13 @@ module.exports = {
       {
         type: "object",
         properties: {
+          inline: {
+            type: "array",
+            items: {
+              type: "string",
+            },
+          },
+
           skip: {
             type: "array",
             items: {
@@ -41,111 +101,214 @@ module.exports = {
     ],
     messages: {
       [MESSAGE_IDS.EXPECT_NEW_LINE_AFTER]:
-        "There should be a linebreak after {{tag}}.",
+        "There should be a linebreak after {{tag}} element.",
+      [MESSAGE_IDS.EXPECT_NEW_LINE_AFTER_OPEN]:
+        "There should be a linebreak after {{tag}} open.",
       [MESSAGE_IDS.EXPECT_NEW_LINE_BEFORE]:
-        "There should be a linebreak before {{tag}}.",
+        "There should be a linebreak before {{tag}} element.",
+      [MESSAGE_IDS.EXPECT_NEW_LINE_BEFORE_CLOSE]:
+        "There should be a linebreak before {{tag}} close.",
     },
   },
 
   create(context) {
-    const option = context.options[0] || { skip: [] };
-    const skipTags = option.skip;
-    let skipTagCount = 0;
+    const option = context.options[0] || {};
+    const skipTags = option.skip || [];
+    const inlineTags = optionsOrPresets(option.inline || []);
+
     /**
-     * @param {import("../types").ChildType<TagNode | ProgramNode>[]} siblings
+     * @param {Array<NewlineNode>} siblings
+     * @returns {NodeMeta} meta
      */
     function checkSiblings(siblings) {
-      siblings
-        .filter((node) => node.type !== "Text")
-        .forEach((current, index, arr) => {
-          const after = arr[index + 1];
-          if (after) {
-            if (isOnTheSameLine(current, after)) {
+      /**
+       * @type {NodeMeta}
+       */
+      const meta = {
+        childFirst: null,
+        childLast: null,
+        shouldBeNewline: false,
+      };
+
+      const nodesWithContent = [];
+      for (
+        let length = siblings.length, index = 0;
+        index < length;
+        index += 1
+      ) {
+        const node = siblings[index];
+
+        if (isEmptyText(node) === false) {
+          nodesWithContent.push(node);
+        }
+      }
+
+      for (
+        let length = nodesWithContent.length, index = 0;
+        index < length;
+        index += 1
+      ) {
+        const node = nodesWithContent[index];
+        const nodeNext = nodesWithContent[index + 1];
+
+        if (meta.childFirst === null) {
+          meta.childFirst = node;
+        }
+
+        meta.childLast = node;
+
+        const nodeShouldBeNewline = shouldBeNewline(node);
+
+        if (node.type === `Tag` && skipTags.includes(node.name) === false) {
+          const nodeMeta = checkSiblings(node.children);
+          const nodeChildShouldBeNewline = nodeMeta.shouldBeNewline;
+
+          if (nodeShouldBeNewline || nodeChildShouldBeNewline) {
+            meta.shouldBeNewline = true;
+          }
+
+          if (
+            nodeShouldBeNewline &&
+            nodeChildShouldBeNewline &&
+            nodeMeta.childFirst &&
+            nodeMeta.childLast
+          ) {
+            if (
+              node.openEnd.loc.end.line === nodeMeta.childFirst.loc.start.line
+            ) {
+              if (isNotNewlineStart(nodeMeta.childFirst)) {
+                context.report({
+                  node: node,
+                  messageId: MESSAGE_IDS.EXPECT_NEW_LINE_AFTER_OPEN,
+                  data: { tag: label(node) },
+                  fix(fixer) {
+                    return fixer.insertTextAfter(node.openEnd, `\n`);
+                  },
+                });
+              }
+            }
+
+            if (nodeMeta.childLast.loc.end.line === node.close.loc.start.line) {
+              if (isNotNewlineEnd(nodeMeta.childLast)) {
+                context.report({
+                  node: node,
+                  messageId: MESSAGE_IDS.EXPECT_NEW_LINE_BEFORE_CLOSE,
+                  data: { tag: label(node, { isClose: true }) },
+                  fix(fixer) {
+                    return fixer.insertTextBefore(node.close, `\n`);
+                  },
+                });
+              }
+            }
+          }
+        }
+
+        if (nodeNext && node.loc.end.line === nodeNext.loc.start.line) {
+          if (nodeShouldBeNewline) {
+            if (isNotNewlineStart(nodeNext)) {
               context.report({
-                node: current,
+                node: nodeNext,
                 messageId: MESSAGE_IDS.EXPECT_NEW_LINE_AFTER,
-                // @ts-ignore
-                data: { tag: `<${current.name}>` },
+                data: { tag: label(node) },
                 fix(fixer) {
-                  return fixer.insertTextAfter(current, "\n");
+                  return fixer.insertTextAfter(node, `\n`);
                 },
               });
             }
+          } else if (shouldBeNewline(nodeNext)) {
+            if (isNotNewlineEnd(node)) {
+              context.report({
+                node: nodeNext,
+                messageId: MESSAGE_IDS.EXPECT_NEW_LINE_BEFORE,
+                data: { tag: label(nodeNext) },
+                fix(fixer) {
+                  return fixer.insertTextBefore(nodeNext, `\n`);
+                },
+              });
+            }
+          }
+        }
+      }
+
+      return meta;
+    }
+
+    /**
+     * @param {NewlineNode} node
+     */
+    function isEmptyText(node) {
+      return node.type === `Text` && node.value.trim().length === 0;
+    }
+
+    /**
+     * @param {NewlineNode} node
+     */
+    function isNotNewlineEnd(node) {
+      return node.type !== `Text` || /\n\s*$/.test(node.value) === false;
+    }
+
+    /**
+     * @param {NewlineNode} node
+     */
+    function isNotNewlineStart(node) {
+      return node.type !== `Text` || /^\n/.test(node.value) === false;
+    }
+
+    /**
+     * @param {NewlineNode} node
+     * @param {{ isClose?: boolean }} options
+     */
+    function label(node, options = {}) {
+      const isClose = options.isClose || false;
+
+      switch (node.type) {
+        case `Tag`:
+          if (isClose) {
+            return `</${node.name}>`;
           }
-        });
+          return `<${node.name}>`;
+        default:
+          return `<${node.type}>`;
+      }
     }
 
     /**
-     * @param {TagNode} node
-     * @param {import("../types").ChildType<TagNode>[]} children
+     * @param {Array<string>} options
      */
-    function checkChild(node, children) {
-      const targetChildren = children.filter((n) => n.type !== "Text");
-      const first = targetChildren[0];
-      const last = targetChildren[targetChildren.length - 1];
-      if (first) {
-        if (isOnTheSameLine(node.openEnd, first)) {
-          context.report({
-            node: node.openEnd,
-            messageId: MESSAGE_IDS.EXPECT_NEW_LINE_AFTER,
-            data: { tag: `<${node.name}>` },
-            fix(fixer) {
-              return fixer.insertTextAfter(node.openEnd, "\n");
-            },
-          });
+    function optionsOrPresets(options) {
+      const result = [];
+      for (const option of options) {
+        if (option in PRESETS) {
+          const preset = PRESETS[option];
+          result.push(...preset);
+        } else {
+          result.push(option);
         }
       }
+      return result;
+    }
 
-      if (last) {
-        if (node.close && isOnTheSameLine(node.close, last)) {
-          context.report({
-            node: node.close,
-            messageId: MESSAGE_IDS.EXPECT_NEW_LINE_BEFORE,
-            data: { tag: `</${node.name}>` },
-            fix(fixer) {
-              return fixer.insertTextBefore(node.close, "\n");
-            },
-          });
-        }
+    /**
+     * @param {NewlineNode} node
+     */
+    function shouldBeNewline(node) {
+      switch (node.type) {
+        case `Comment`:
+          return /[\n\r]+/.test(node.value.value.trim());
+        case `Tag`:
+          return inlineTags.includes(node.name.toLowerCase()) === false;
+        case `Text`:
+          return /[\n\r]+/.test(node.value.trim());
+        default:
+          return true;
       }
     }
+
     return {
       Program(node) {
+        // @ts-ignore
         checkSiblings(node.body);
       },
-      Tag(node) {
-        if (skipTagCount > 0) {
-          return;
-        }
-        if (skipTags.includes(node.name)) {
-          skipTagCount++;
-          return;
-        }
-        checkSiblings(node.children);
-        checkChild(node, node.children);
-      },
-      /**
-       * @param {TagNode} node
-       * @returns
-       */
-      "Tag:exit"(node) {
-        if (skipTags.includes(node.name)) {
-          skipTagCount--;
-          return;
-        }
-      },
     };
   },
 };
-
-/**
- * @param {BaseNode} nodeBefore
- * @param {BaseNode} nodeAfter
- * @returns
- */
-function isOnTheSameLine(nodeBefore, nodeAfter) {
-  if (nodeBefore && nodeAfter) {
-    return nodeBefore.loc.end.line === nodeAfter.loc.start.line;
-  }
-  return false;
-}

package/lib/rules/index.js

@@ -6,6 +6,7 @@ const noDuplicateId = require("./no-duplicate-id");
 const noInlineStyles = require("./no-inline-styles");
 const noMultipleH1 = require("./no-multiple-h1");
 const noExtraSpacingAttrs = require("./no-extra-spacing-attrs");
+const noExtraSpacingText = require("./no-extra-spacing-text");
 const attrsNewline = require("./attrs-newline");
 const elementNewLine = require("./element-newline");
 const noSkipHeadingLevels = require("./no-skip-heading-levels");
@@ -46,6 +47,7 @@ module.exports = {
   "no-inline-styles": noInlineStyles,
   "no-multiple-h1": noMultipleH1,
   "no-extra-spacing-attrs": noExtraSpacingAttrs,
+  "no-extra-spacing-text": noExtraSpacingText,
   "attrs-newline": attrsNewline,
   "element-newline": elementNewLine,
   "no-skip-heading-levels": noSkipHeadingLevels,