feat(vue): integrate html-validate

packages/stack-vue/.eslintrc.js

@@ -1,5 +1,5 @@
-const eslintConfig = require("@factorial/stack-javascript").eslint
-const deepMerge = require("deepmerge")
+const eslintConfig = require("@factorial/stack-javascript").eslint;
+const deepMerge = require("deepmerge");
 
 module.exports = deepMerge(eslintConfig, {
   extends: ["plugin:vue/essential"],
@@ -9,4 +9,4 @@ module.exports = deepMerge(eslintConfig, {
   env: {
     node: true,
   },
-})
+});

packages/stack-vue/.htmlvalidate.js

@@ -0,0 +1,25 @@
+const deepMerge = require("deepmerge");
+
+const defaultConfig = require("@factorial/stack-html").htmlValidate;
+
+module.exports = deepMerge(defaultConfig, {
+  plugins: ["html-validate-vue"],
+  extends: ["html-validate-vue:recommended"],
+  transform: {
+    "^.*\\.vue$": "html-validate-vue",
+  },
+  rules: {
+    "element-name": [
+      1,
+      {
+        pattern: "^([a-z]+((-[a-z]+)?)|([A-Z][a-z]+)+)$",
+      },
+    ],
+    "element-case": [
+      2,
+      {
+        style: ["lowercase", "pascalcase"],
+      },
+    ],
+  },
+});

packages/stack-vue/__tests__/index.spec.js

@@ -5,6 +5,9 @@ describe("vue/index", () => {
     jest.mock(path.join(__dirname, "../.eslintrc"), () => {
       return "eslint";
     });
+    jest.mock(path.join(__dirname, "../.htmlvalidate"), () => {
+      return "htmlvalidate";
+    });
 
     const vue = require("..");
     const lint = require("../lib/lint");
@@ -16,10 +19,18 @@ describe("vue/index", () => {
           content: `const eslintConfig = require("@factorial/stack-vue").eslint;
 
 module.exports = eslintConfig;
+`,
+        },
+        {
+          name: ".htmlvalidate.js",
+          content: `const htmlValidateConfig = require("@factorial/stack-vue").htmlValidate;
+
+module.exports = htmlValidateConfig;
 `,
         },
       ],
       eslint: "eslint",
+      htmlValidate: "htmlvalidate",
       type: "vue",
       extensions: ["vue", "js", "mjs", "cjs"],
       tasks: {

packages/stack-vue/index.js

@@ -3,6 +3,7 @@ const path = require("path");
 const lint = require("./lib/lint");
 
 const eslintConfig = require(path.join(__dirname, ".eslintrc")); // eslint-disable-line
+const htmlValidateConfig = require(path.join(__dirname, ".htmlvalidate")); // eslint-disable-line
 
 module.exports = {
   configFiles: [
@@ -11,12 +12,20 @@ module.exports = {
       content: `const eslintConfig = require("@factorial/stack-vue").eslint;
 
 module.exports = eslintConfig;
+`,
+    },
+    {
+      name: ".htmlvalidate.js",
+      content: `const htmlValidateConfig = require("@factorial/stack-vue").htmlValidate;
+
+module.exports = htmlValidateConfig;
 `,
     },
   ],
   type: "vue",
   extensions: ["vue", "js", "mjs", "cjs"],
   eslint: eslintConfig,
+  htmlValidate: htmlValidateConfig,
   tasks: {
     lint,
   },

packages/stack-vue/package.json

@@ -15,7 +15,9 @@
     "release": "standard-version -t vue/v"
   },
   "dependencies": {
-    "@factorial/stack-javascript": "^0.6.3",
-    "eslint-plugin-vue": "^8.4.1"
+    "@factorial/stack-html": "^0.1.7",
+    "@factorial/stack-javascript": "^0.6.6",
+    "eslint-plugin-vue": "^8.5.0",
+    "html-validate-vue": "^4.2.0"
   }
 }