Adds a new rule htmlacademy/req-tags-presence (#108)

nikolai-shabalin · web-flow · commit 1b64d63e53a4 · 2024-05-21T15:01:00.000+03:00
* Adds a new rule htmlacademy/req-tags-presence

* Adds a description for the rule

* Adds a rule to the general list

* Update CHANGELOG.md

* Remove trash text
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.0.20
+Adds a `req-tags-presence` rule that requires the specified tags on the page.
+
+```json
+{
+  "htmlacademy/req-tags-presence": [ true, ["header", "nav", "main", "section", "h1", "footer"]]
+}
+```
+
 ## 1.0.19
 Adds a `tag-forbid-attr` rule that disallows the use of specified attributes on the specified tag.
 
@@ -84,11 +93,11 @@ Added a new rule [htmlacademy/req-stylesheet-link](rules/req-stylesheet-link/REA
 - Excludes the `<input type="submit">` check from the [input-req-label](rules/input-req-label/README.md) rule.
 - Adds `ignore` option for [tag-req-attr](rules/tag-req-attr/README.md)
 ```js
-'input': [
+"input": [
   {
-    name: 'name',
+    name: "name",
     ignore: {
-      'type': 'submit'
+      "type": "submit"
     }
   },
 ],
@@ -118,7 +127,7 @@ The following pattern is **not** considered a problem:
 Added [htmlacademy/space-between-comments](rules/space-between-comments/README.md)
 ```js
 rules: {
-  'htmlacademy/space-between-comments': [true, 'space' | 'no-space]
+  "htmlacademy/space-between-comments": [true, "space" | "no-space]
 }
 ```
 
@@ -159,7 +168,7 @@ Adds new rule `htmlacademy/attr-req-value`: the attribute cannot be empty, excep
 
 ```js
 {
-  'htmlacademy/attr-req-value': [true, { ignore: ['alt']}]
+  "htmlacademy/attr-req-value": [true, { ignore: ["alt"]}]
 }
 ```
 
diff --git a/docs/list-of-rules.md b/docs/list-of-rules.md
@@ -24,8 +24,9 @@
 | [htmlacademy/req-mailto](../rules/req-mailto/README.md)                             | Требует `mailto:` для ссылок c email-текстом                                                       |
 | [htmlacademy/req-meta-viewport](../rules/req-meta-viewport/README.md)               | Проверяет наличие `<meta name="viewport" content="width=device-width,initial-scale=1">` в `<head>` |
 | [htmlacademy/req-single-styles](../rules/req-single-styles/README.md)               | Разрешает не более одного `link rel="stylesheet"` в `<head>`                                       |
-| [htmlacademy/req-source-width-height](../rules/req-source-width-height/README.md)               | Требует `width` и `height` у `<source>` внутри `<picture>`                                          |
+| [htmlacademy/req-source-width-height](../rules/req-source-width-height/README.md)               | Требует `width` и `height` у `<source>` внутри `<picture>`                                         |
 | [htmlacademy/req-stylesheet-link](../rules/req-stylesheet-link/README.md)           | Проверяет наличие `<link rel="stylesheet" href="">` с непустым `href`                              |
+| [htmlacademy/req-tags-presence](../rules/req-tags-presence/README.md)           | Требует указанные теги на странице                                                                 |
 | [htmlacademy/section-has-heading](../rules/section-has-heading/README.md)           | Требует добавление заголовка любого уровня в `<section>`                                           |
 | [htmlacademy/space-between-comments](../rules/space-between-comments/README.md)     | Проверят пробелы у комментария `<!-- Это комментарий -->`                                          |
 | [htmlacademy/tag-forbid-attr](../rules/tag-forbid-attr/README.md)                   | Указанные атрибуты должны отсутствовать в указанном теге                                           |
diff --git a/rules/req-tags-presence/README.md b/rules/req-tags-presence/README.md
@@ -0,0 +1,46 @@
+# htmlacademy/req-tags-presence
+
+Если установлено, указанные теги должны находится на странице. Если теги отсутствуют, правило считается нарушенным. 
+
+## true
+
+В массив можно передать любые теги. Если хотя бы один из них отсутствует, правило считается нарушенным.
+
+
+```json
+{
+  "htmlacademy/req-tags-presence": [true, ["h1", "main"]]
+}
+```
+
+Нарушениями считаются следующие модели:
+
+Потому что без тега `<h1>` и `<main>`.
+
+```html
+<body>
+  <div></div>
+  <div></div>
+  <div></div>
+</body>
+```
+
+Потому что без тега `<h1>`.
+
+```html
+<body>
+  <header></header>
+  <main></main>
+  <footer></footer>
+</body>
+```
+
+Следующие детали **не** считаются нарушениями:
+
+```html
+<body>
+  <main>
+    <h1></h1>
+  </main>
+</body>
+```
diff --git a/rules/req-tags-presence/index.js b/rules/req-tags-presence/index.js
@@ -0,0 +1,37 @@
+'use strict';
+const { is_tag_node } = require('@linthtml/dom-utils');
+
+const traverseNode = (node, remainingTags) => {
+  if (is_tag_node(node)) {
+    remainingTags.delete(node.name);
+  }
+  if (node.children) {
+    for (const child of node.children) {
+      traverseNode(child, remainingTags);
+    }
+  }
+};
+
+const findMissingTags = (node, remainingTags) => {
+  traverseNode(node, remainingTags);
+  return remainingTags;
+};
+
+module.exports = {
+  name: 'htmlacademy/req-tags-presence',
+  // eslint-disable-next-line camelcase
+  lint(node, rule_config, { report }) {
+    if (is_tag_node(node) && node.name.toLowerCase() === 'html') {
+      const missingTags = findMissingTags(node, new Set(rule_config));
+      if (missingTags.size > 0) {
+        report({
+          position: {
+            start: { line: 1, column: 1 },
+            end: { line: 1, column: 1 },
+          },
+          message: `The page is missing the following tags: ${Array.from(missingTags).join(', ')}.`,
+        });
+      }
+    }
+  },
+};
