implement

Author: yeonjuan

packages/eslint-plugin/lib/rules/use-standard-html/check-content-model.js

@@ -15,6 +15,8 @@
  * @property {AnyHTMLNode[]} children
  */
 
+const { getElementSpec } = require("html-standard");
+const { isTag } = require("../utils/node");
 const { shouldIgnoreChild, getNodeName } = require("./helpers");
 
 const EXIT = false;
@@ -47,10 +49,23 @@ function getContentModel(state) {
 /**
  * @param {Context} context
  * @param {ElementSpec} spec
- * @param {AnyHTMLNode} node
+ * @param {Tag} node
  * @param {AnyHTMLNode[]} children
+ * @param {boolean} allowUnknownChildren
  */
-function checkContentModel(context, spec, node, children) {
+function checkContentModel(
+  context,
+  spec,
+  node,
+  children,
+  allowUnknownChildren
+) {
+  if (
+    allowUnknownChildren &&
+    children.some((child) => isTag(child) && !getElementSpec(child.name))
+  ) {
+    return;
+  }
   /**
    * @type {State}
    */
@@ -66,6 +81,7 @@ function checkContentModel(context, spec, node, children) {
     if (!contentModel) {
       return;
     }
+
     switch (contentModel.type) {
       case "required": {
         result = required(contentModel, context, state, node);
@@ -91,7 +107,12 @@ function checkContentModel(context, spec, node, children) {
       }
     }
   }
-  const remain = getChild(state);
+  let remain = getChild(state);
+  while (remain && shouldIgnoreChild(remain)) {
+    state.childIndex++;
+    remain = getChild(state);
+  }
+
   const contentModel = getContentModel(state);
   if (remain && !contentModel) {
     context.report({
@@ -105,29 +126,32 @@ function checkContentModel(context, spec, node, children) {
  * @param {ContentModel & {type: "required"}} model
  * @param {Context} context
  * @param {State} state
- * @param {AnyHTMLNode} node
+ * @param {Tag} node
  * @returns {boolean}
  */
+
 function required(model, context, state, node) {
   let child = getChild(state);
+  while (child && shouldIgnoreChild(child)) {
+    state.childIndex++;
+    child = getChild(state);
+  }
   if (!child) {
     context.report({
-      node,
+      node: node.openStart,
       messageId: MESSAGE_IDS.REQUIRED,
     });
     return EXIT;
   }
-  if (shouldIgnoreChild(child)) {
-    state.childIndex++;
-  }
+
   const name = getNodeName(child);
   if (model.contents.has(name)) {
     state.childIndex++;
     state.contentModelIndex++;
     return CONTINUE;
   }
   context.report({
-    node,
+    node: node.openStart,
     messageId: MESSAGE_IDS.NOT_ALLOWED,
   });
   return EXIT;
@@ -166,7 +190,7 @@ function zeroOrMore(model, state) {
  * @param {ContentModel & {type: "oneOrMore"}} model
  * @param {Context} context
  * @param {State} state
- * @param {AnyHTMLNode} node
+ * @param {Tag} node
  * @returns {boolean}
  */
 function oneOrMore(model, context, state, node) {
@@ -193,7 +217,7 @@ function oneOrMore(model, context, state, node) {
 
   if (count <= 0 && !model.contents.has("#text")) {
     context.report({
-      node,
+      node: node.openStart,
       messageId: MESSAGE_IDS.REQUIRED,
     });
     return EXIT;

packages/eslint-plugin/lib/rules/use-standard-html/use-standard-html.js

@@ -7,7 +7,7 @@
  * @typedef {import("../../types").Context<[Option]> } Context
  *
  * @typedef {Object} Option
- * @property {string[]} [Option.priority]
+ * @property {boolean} [Option.allowUnknownChildren]
  * @typedef { import("../../types").RuleModule<[Option]> } RuleModule
  */
 
@@ -33,22 +33,28 @@ module.exports = {
       {
         type: "object",
         properties: {
-          priority: {
-            type: "array",
-            items: {
-              type: "string",
-              uniqueItems: true,
-            },
+          allowUnknownChildren: {
+            type: "boolean",
           },
         },
       },
     ],
     messages: {
-      [MESSAGE_IDS.REQUIRED]: "TBD",
-      [MESSAGE_IDS.NOT_ALLOWED]: "TBD",
+      [MESSAGE_IDS.REQUIRED]: "required",
+      [MESSAGE_IDS.NOT_ALLOWED]: "not allowed",
     },
   },
   create(context) {
+    /**
+     * @type {Option}
+     */
+    const options =
+      context.options && context.options[0]
+        ? context.options[0]
+        : {
+            allowUnknownChildren: true,
+          };
+    const allowUnknownChildren = options.allowUnknownChildren;
     return {
       Tag(node) {
         const name = node.name.toLowerCase();
@@ -67,7 +73,13 @@ module.exports = {
           return;
         }
 
-        checkContentModel(context, spec, node, node.children);
+        checkContentModel(
+          context,
+          spec,
+          node,
+          node.children,
+          allowUnknownChildren === true
+        );
       },
     };
   },

packages/eslint-plugin/tests/rules/use-standard-html.test.js

@@ -5,6 +5,18 @@ const ruleTester = createRuleTester();
 
 ruleTester.run("use-standard-html", rule, {
   valid: [
+    {
+      code: `<html>
+      <head><title>TITLE</title></head>
+      <body></body>
+      </html>`,
+    },
+    {
+      code: "<title>TITLE</title>",
+    },
+    {
+      code: "<span>TITLE</span>",
+    },
     {
       code: `<slot></slot>`,
     },
@@ -143,6 +155,14 @@ ruleTester.run("use-standard-html", rule, {
         },
       ],
     },
+    {
+      code: `<div><style> .foo { } </style></div>`,
+      errors: [
+        {
+          messageId: "notAllowed",
+        },
+      ],
+    },
     {
       code: `<fieldset><base></base></fieldset>`,
       errors: [

packages/website/src/components/header/header.html

@@ -41,15 +41,15 @@
     class="menuInput peer sr-only hidden"
     aria-hidden="true"
   >
-  <label
+  <span
     for="menu"
     aria-label="menu button"
     class="burger flex flex-col justify-between ml-auto h-[21px] w-[21px] px-[1px] py-[3px] [&>div]:h-[2px] [&>div]:w-[18px] [&>div]:bg-black-900 md:hidden hover:cursor-pointer"
   >
     <div></div>
     <div></div>
     <div></div>
-  </label>
+  </span>
   <module href="/components/header/nav.html"></module>
 </header>