chore: set up eslint & husky (#38)

.eslintignore

@@ -0,0 +1,5 @@
+dist
+node-modules
+.output
+
+public

.eslintrc.cjs

@@ -0,0 +1,29 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ["eslint:recommended"],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
+      },
+    },
+    {
+      files: ["./site/**/*js"],
+      rules: {
+        "no-undef": "off",
+        "no-unused-vars": "off",
+      },
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+};

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint
+npm run pretty

.vscode/settings.json

@@ -1,4 +1,3 @@
 {
-  "js/ts.implicitProjectConfig.checkJs": true,
-  "editor.formatOnSave": true
+  "js/ts.implicitProjectConfig.checkJs": true
 }

examples/templating/with-lit.js

@@ -42,7 +42,7 @@ export class LitCounter extends WebComponent {
       <ul>
         ${links.map(
           (link) =>
-            html`<li><a href=${link.url} target="_blank">${link.text}</a></li>`
+            html`<li><a href=${link.url} target="_blank">${link.text}</a></li>`,
         )}
       </ul>
     `;

package.json

@@ -35,7 +35,9 @@
     "pub:patch": "npm version patch && npm run pub",
     "pub:minor": "npm version minor && npm run pub",
     "check:size": "npm run build && size-limit ./dist/WebComponent.js",
-    "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\""
+    "pretty": "prettier --write \"./**/*.{js,mjs,json}\"",
+    "lint": "eslint --fix \"./**/*.{js,mjs}\"",
+    "prepare": "husky install"
   },
   "repository": "https://github.com/ayoayco/web-component-base",
   "homepage": "https://WebComponent.io",
@@ -53,8 +55,10 @@
   "devDependencies": {
     "@size-limit/preset-small-lib": "^11.0.0",
     "esbuild": "^0.19.9",
+    "eslint": "^8.56.0",
     "prettier": "^3.1.1",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "husky": "^8.0.0"
   },
   "workspaces": [
     "site"

site/.eslintignore

@@ -1,3 +1,5 @@
 dist
 node-modules
 .output
+
+public

site/src/components/feature-set.js

@@ -53,7 +53,7 @@ class FeatureSet extends WebComponent {
       boxShadow: "5px 25px 10px -25px rgba(34, 34, 34, 0.15)",
     };
     Object.keys(articleStyles).forEach((rule) =>
-      this.articleEl.forEach((el) => (el.style[rule] = articleStyles[rule]))
+      this.articleEl.forEach((el) => (el.style[rule] = articleStyles[rule])),
     );
 
     /**
@@ -67,7 +67,7 @@ class FeatureSet extends WebComponent {
     };
     const featureWrapper = this.querySelector(".feature-wrapper");
     Object.keys(ftrStyles).forEach(
-      (rule) => (featureWrapper.style[rule] = ftrStyles[rule])
+      (rule) => (featureWrapper.style[rule] = ftrStyles[rule]),
     );
   }
 
@@ -84,7 +84,7 @@ class FeatureSet extends WebComponent {
                 ${feature.description}
               </p>
             </article>
-          `
+          `,
         )}
       </div>
     `;

src/WebComponent.js

@@ -77,6 +77,7 @@ export class WebComponent extends HTMLElement {
    * }} Changes
    * @param {Changes} changes
    */
+  // eslint-disable-next-line no-unused-vars
   onChanges(changes) {}
 
   constructor() {
@@ -145,7 +146,7 @@ export class WebComponent extends HTMLElement {
           throw TypeError(
             `Cannot assign ${typeof value} to ${
               typeMap[prop]
-            } property (setting '${prop}' of ${meta.constructor.name})`
+            } property (setting '${prop}' of ${meta.constructor.name})`,
           );
         } else if (oldValue !== value) {
           obj[prop] = value;
@@ -177,7 +178,7 @@ export class WebComponent extends HTMLElement {
     if (!this.#props) {
       this.#props = new Proxy(
         initialProps,
-        this.#handler((key, value) => this.setAttribute(key, value), this)
+        this.#handler((key, value) => this.setAttribute(key, value), this),
       );
     }
   }