chore: udpate dev deps; initial migration to eslint flat config (#46)

* chore: update dev deps

* chore: pnpm update dev deps

* chore: update deps; initial migrate to eslint flat config

* chore: remove 'beta' from readme

* 2.1.0

.eslintignore

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

README.md

@@ -33,7 +33,7 @@ Links:
 1. [`template` vs `render()`](#template-vs-render)
 1. [Prop access](#prop-access)
     1. [Alternatives](#alternatives)
-1. [Styling](#styling-beta)
+1. [Styling](#styling)
 1. [Shadow DOM Opt-In](#shadow-dom-opt-in-beta)
 1. [Just the Templating](#just-the-templating)
 1. [Life-Cycle Hooks](#life-cycle-hooks)
@@ -252,9 +252,9 @@ The current alternatives are using what `HTMLElement` provides out-of-the-box, w
 1. `HTMLElement.dataset` for attributes prefixed with `data-*`. Read more about this [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset).
 1. Methods for reading/writing attribute values: `setAttribute(...)` and `getAttribute(...)`; note that managing the attribute names as strings can be difficult as the code grows.
 
-## Styling (beta)
+## Styling
 
-Upcoming on **v2.1.0**: When using the built-in `html` function for tagged templates, a style object of type `Partial<CSSStyleDeclaration>` can be passed to any element's `style` attribute. This allows for calculated and conditional styles. Read more on style objects [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration).
+When using the built-in `html` function for tagged templates, a style object of type `Partial<CSSStyleDeclaration>` can be passed to any element's `style` attribute. This allows for calculated and conditional styles. Read more on style objects [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration).
 
 Try it now with this [example on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/bGzXjwQ?editors=1010)
 ```js
@@ -294,7 +294,7 @@ class StyledElements extends WebComponent {
 customElements.define("styled-elements", StyledElements);
 ```
 
-## Shadow DOM Opt-In (beta)
+## Shadow DOM Opt-In
 Add a static property `shadowRootInit` with object value of type `ShadowRootInit` (see [options on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options)) to opt-in to using shadow dom for the whole component.
 
 Try it now [on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/VwRYVPv?editors=1010)

eslint.config.js

@@ -1,4 +1,27 @@
-module.exports = {
+export default [
+  // "eslint:recommended",
+  // {
+  //   rules: {
+  //     semi: ["warn", "always"]
+  //   }
+  // },
+  // {
+  //   files: ["./src/*.js"],
+  //   rules: {
+  //     "semi": "error",
+  //     "no-unused-vars": "error"
+  //   }
+  // },
+  // {
+  //   files: ["./site/***js"],
+  //   rules: {
+  //     "no-undef": "off",
+  //     "no-unused-vars": "off",
+  //   },
+  // }
+]
+/*
+ {
   env: {
     browser: true,
     es2021: true,
@@ -15,7 +38,7 @@ module.exports = {
       },
     },
     {
-      files: ["./site/**/*js"],
+      files: ["./site/***js"],
       rules: {
         "no-undef": "off",
         "no-unused-vars": "off",
@@ -27,3 +50,4 @@ module.exports = {
     sourceType: "module",
   },
 };
+*/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-base",
-  "version": "2.1.0-beta.3",
+  "version": "2.1.0",
   "description": "A zero-dependency & tiny JS base class for creating reactive custom elements easily",
   "type": "module",
   "exports": {
@@ -37,7 +37,7 @@
     "pub:patch": "npm version patch && pnpm run pub",
     "pub:minor": "npm version minor && pnpm run pub",
     "pretty": "prettier --write \"./**/*.{js,mjs,json}\"",
-    "lint": "eslint . --config .eslintrc.cjs --ext .js,.mjs",
+    "lint": "eslint . --config eslint.config.js",
     "prepare": "husky install"
   },
   "repository": "https://github.com/ayoayco/web-component-base",
@@ -54,13 +54,13 @@
     "url": "https://github.com/ayoayco/web-component-base/issues"
   },
   "devDependencies": {
-    "@size-limit/preset-small-lib": "^11.0.0",
-    "esbuild": "^0.19.9",
-    "eslint": "^8.56.0",
-    "husky": "^8.0.0",
-    "prettier": "^3.1.1",
-    "size-limit": "^11.0.2",
-    "typescript": "^5.2.2"
+    "@size-limit/preset-small-lib": "^11.1.4",
+    "esbuild": "^0.23.0",
+    "eslint": "^9.8.0",
+    "husky": "^9.1.3",
+    "prettier": "^3.3.3",
+    "size-limit": "^11.1.4",
+    "typescript": "^5.5.4"
   },
   "size-limit": [
     {
@@ -74,7 +74,8 @@
     {
       "path": "./dist/attach-effect.js",
       "limit": "0.1 KB"
-    }, {
+    },
+    {
       "path": "./dist/utils/create-element.js",
       "limit": "0.5 KB"
     },

src/WebComponent.js

@@ -63,17 +63,17 @@ export class WebComponent extends HTMLElement {
   /**
    * Triggered after view is initialized
    */
-  afterViewInit() {}
+  afterViewInit() { }
 
   /**
    * Triggered when the component is connected to the DOM
    */
-  onInit() {}
+  onInit() { }
 
   /**
    * Triggered when the component is disconnected from the DOM
    */
-  onDestroy() {}
+  onDestroy() { }
 
   /**
    * Triggered when an attribute value changes
@@ -84,8 +84,7 @@ export class WebComponent extends HTMLElement {
    * }} Changes
    * @param {Changes} changes
    */
-  // eslint-disable-next-line no-unused-vars
-  onChanges(changes) {}
+  onChanges(changes) { }
 
   constructor() {
     super();
@@ -149,8 +148,7 @@ export class WebComponent extends HTMLElement {
           effectsMap[prop].push(value.callback);
         } else if (typeMap[prop] !== typeof value) {
           throw TypeError(
-            `Cannot assign ${typeof value} to ${
-              typeMap[prop]
+            `Cannot assign ${typeof value} to ${typeMap[prop]
             } property (setting '${prop}' of ${meta.constructor.name})`
           );
         } else if (oldValue !== value) {