poc: add use-standard-html

Author: yeonjuan

package.json

@@ -48,5 +48,8 @@
   "packageManager": "yarn@4.0.2",
   "workspaces": [
     "packages/**"
-  ]
+  ],
+  "dependencies": {
+    "html-standard": "^0.0.2"
+  }
 }

packages/eslint-plugin/lib/rules/index.js

@@ -46,6 +46,7 @@ const noNestedInteractive = require("./no-nested-interactive");
 const maxElementDepth = require("./max-element-depth");
 const requireExplicitSize = require("./require-explicit-size");
 const useBaseLine = require("./use-baseline");
+const useStandardHtml = require("./use-standard-html");
 // import new rule here ↑
 // DO NOT REMOVE THIS COMMENT
 
@@ -98,6 +99,7 @@ module.exports = {
   "max-element-depth": maxElementDepth,
   "require-explicit-size": requireExplicitSize,
   "use-baseline": useBaseLine,
+  "use-standard-html": useStandardHtml,
   // export new rule here ↑
   // DO NOT REMOVE THIS COMMENT
 };

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

@@ -0,0 +1,57 @@
+/**
+ * @typedef { import("../types").RuleFixer } RuleFixer
+ * @typedef { import("@html-eslint/types").Attribute } Attribute
+ * @typedef { import("@html-eslint/types").Text } Text
+ *
+ * @typedef {Object} Option
+ * @property {string[]} [Option.priority]
+ * @typedef { import("../types").RuleModule<[Option]> } RuleModule
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { getElementSpec } = require("html-standard");
+
+const MESSAGE_IDS = {
+  UNSORTED: "unsorted",
+};
+
+/**
+ * @type {RuleModule}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "TBD",
+      category: RULE_CATEGORY.BEST_PRACTICE,
+      recommended: false,
+    },
+    fixable: "code",
+    schema: [
+      {
+        type: "object",
+        properties: {
+          priority: {
+            type: "array",
+            items: {
+              type: "string",
+              uniqueItems: true,
+            },
+          },
+        },
+      },
+    ],
+    messages: {
+      [MESSAGE_IDS.UNSORTED]: "TBD",
+    },
+  },
+  create(context) {
+    return {
+      Tag(node) {
+        const spec = getElementSpec(node.name);
+        console.log(spec);
+      },
+    };
+  },
+};

packages/eslint-plugin/package.json

@@ -38,7 +38,8 @@
   ],
   "dependencies": {
     "@html-eslint/template-parser": "^0.38.0",
-    "@html-eslint/template-syntax-parser": "^0.38.0"
+    "@html-eslint/template-syntax-parser": "^0.38.0",
+    "html-standard": "^0.0.3"
   },
   "devDependencies": {
     "@html-eslint/parser": "^0.38.0",

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

@@ -0,0 +1,13 @@
+const createRuleTester = require("../rule-tester");
+const rule = require("../../lib/rules/use-standard-html");
+
+const ruleTester = createRuleTester();
+
+ruleTester.run("use-standard-html", rule, {
+  valid: [
+    {
+      code: `<slot></slot>`,
+    },
+  ],
+  invalid: [],
+});

yarn.lock

@@ -1284,6 +1284,7 @@ __metadata:
     es-html-parser: "npm:0.1.1"
     eslint: "npm:^9.21.0"
     espree: "npm:^10.3.0"
+    html-standard: "npm:^0.0.3"
     typescript: "npm:^5.7.2"
   languageName: unknown
   linkType: soft
@@ -1299,6 +1300,7 @@ __metadata:
     eslint: "npm:^9.19.0"
     eslint-plugin-jest: "npm:^28.11.0"
     eslint-plugin-n: "npm:^17.15.1"
+    html-standard: "npm:^0.0.2"
     husky: "npm:^9.1.4"
     jest: "npm:^29.7.0"
     lerna: "npm:^8.1.9"
@@ -8797,6 +8799,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-standard@npm:^0.0.2":
+  version: 0.0.2
+  resolution: "html-standard@npm:0.0.2"
+  checksum: 73823c8f664ac499e6415fa15b7f8771f92465ca2d5e98ae006ff79619f9ba4b7a69685ca212d82635c83cd9322811641f986073b7ca0b27ff0ab92484bb4247
+  languageName: node
+  linkType: hard
+
+"html-standard@npm:^0.0.3":
+  version: 0.0.3
+  resolution: "html-standard@npm:0.0.3"
+  checksum: 782dcd5161cb044c18c9239f332cbcae73072c96bcf2336b0dad4f3162f45d47076aaccd679f69276108e3172171bf45a0f5374c876976793ac165e85d62923f
+  languageName: node
+  linkType: hard
+
 "htmlnano@npm:^2.0.0":
   version: 2.1.1
   resolution: "htmlnano@npm:2.1.1"