Enable more eslint rules (#725)

* More rules

* More rules

* More!

* More!

.eslintrc

@@ -7,30 +7,45 @@
     "plugin:jest/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:unicorn/all",
-    "prettier"
+    "prettier",
   ],
   "settings": {
     "import/resolver": {
       "node": true,
-      "typescript": true
-    }
+      "typescript": true,
+    },
   },
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 2020
+    "ecmaVersion": 2020,
+    "project": "./tsconfig.json",
   },
   "plugins": ["@typescript-eslint"],
   "env": {
     "browser": true,
     "es6": true,
-    "jest": true
+    "jest": true,
   },
   "rules": {
     "prefer-arrow-callback": "error",
     "prefer-const": "error",
     "prefer-template": "error",
     "no-var": "error",
+    "eqeqeq": "error",
+    "no-eval": "error",
+    "no-console": "error",
+    "no-unused-vars": "error",
     "unicorn/template-indent": "off",
-    "unicorn/prefer-string-replace-all": "off"
-  }
+    "unicorn/prefer-string-replace-all": "off",
+    "@typescript-eslint/explicit-member-accessibility": "error",
+    "@typescript-eslint/explicit-function-return-type": "error",
+    "@typescript-eslint/no-non-null-assertion": "error",
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-inferrable-types": "error",
+    "@typescript-eslint/no-empty-function": "error",
+    "@typescript-eslint/no-unsafe-call": "error",
+    "@typescript-eslint/no-unsafe-return": "error",
+    "@typescript-eslint/no-floating-promises": "error",
+  },
 }

components/clear-button.ts

@@ -1,13 +1,13 @@
 import customEvent from "./custom-event";
 
 class ClearButton extends HTMLButtonElement {
-  constructor() {
+  public constructor() {
     super();
     this.addEventListener("click", this.onClick);
     this.classList.add("clear-button");
   }
 
-  onClick() {
+  private onClick(): void {
     this.dispatchEvent(
       customEvent("clear-filter", {
         value: this.value,

components/filter-checkbox.ts

@@ -1,7 +1,7 @@
 import customEvent from "./custom-event";
 
 class FilterCheckbox extends HTMLInputElement {
-  constructor() {
+  public constructor() {
     super();
     this.addEventListener("change", this.onChange);
     this.handleInitialValue();
@@ -13,7 +13,7 @@ class FilterCheckbox extends HTMLInputElement {
     });
   }
 
-  onChange() {
+  private onChange(): void {
     this.dispatchEvent(
       customEvent("handle-filter", {
         value: this.checked,
@@ -23,7 +23,7 @@ class FilterCheckbox extends HTMLInputElement {
     this.setUrlParam();
   }
 
-  setUrlParam() {
+  private setUrlParam(): void {
     const urlParameters = new URLSearchParams(window.location.search);
     // only set variable if it's true
     if (this.checked === false) {
@@ -38,7 +38,7 @@ class FilterCheckbox extends HTMLInputElement {
     );
   }
 
-  handleInitialValue() {
+  private handleInitialValue(): void {
     const urlParameters = new URLSearchParams(window.location.search);
     const initialValue = urlParameters.get("variable");
     if (initialValue === "true") {

components/filter-select.ts

@@ -1,7 +1,7 @@
 import customEvent from "./custom-event";
 
 class FilterSelect extends HTMLSelectElement {
-  constructor() {
+  public constructor() {
     super();
     this.addEventListener("change", this.onChange);
     this.handleInitialValue();
@@ -22,7 +22,7 @@ class FilterSelect extends HTMLSelectElement {
     });
   }
 
-  onChange() {
+  private onChange(): void {
     const { id, value } = this;
     this.dispatchEvent(
       customEvent(
@@ -37,7 +37,7 @@ class FilterSelect extends HTMLSelectElement {
     this.setUrlParam();
   }
 
-  setUrlParam() {
+  private setUrlParam(): void {
     const { param } = this.dataset;
     const urlParameters = new URLSearchParams(window.location.search);
     if (this.value) {
@@ -52,7 +52,7 @@ class FilterSelect extends HTMLSelectElement {
     );
   }
 
-  handleInitialValue() {
+  private handleInitialValue(): string {
     const urlParameters = new URLSearchParams(window.location.search);
     const initialValue = urlParameters.get(this.dataset.param);
     if (initialValue) {

components/font-call.ts

@@ -62,7 +62,7 @@ export function familyStyle({
   selectedVariant: string;
   previewName: string;
   subset: string;
-}) {
+}): string {
   let style = `font-family: '${family}';`;
   if (rtlSubsets.includes(subset) && family !== previewName) {
     style += "direction: rtl;";

components/font-item.ts

@@ -7,25 +7,21 @@ type SampleSubsets = typeof sampleSubsets;
 type Swaps = typeof swaps;
 
 class FontItem extends HTMLLIElement {
-  subset: string;
+  private subset: string;
 
-  constructor() {
-    super();
+  public get font(): GeneratedData[number] {
+    return JSON.parse(this.getAttribute("font")) as GeneratedData[number];
   }
 
-  get font(): GeneratedData[number] {
-    return JSON.parse(this.getAttribute("font"));
-  }
-
-  get selectedSubset(): string {
+  public get selectedSubset(): string {
     return this.getAttribute("selected-subset") || "";
   }
 
-  get selectedVariant(): string {
+  public get selectedVariant(): string {
     return this.getAttribute("selected-variant") || "";
   }
 
-  get previewName(): string {
+  public get previewName(): string {
     const { family, subsets } = this.font;
     if (this.selectedSubset && this.selectedSubset in sampleSubsets) {
       return sampleSubsets[this.selectedSubset as keyof SampleSubsets];
@@ -45,15 +41,15 @@ class FontItem extends HTMLLIElement {
     return family;
   }
 
-  get id(): string {
+  public get id(): string {
     return this.font.family.toLowerCase().replace(/ /g, "-");
   }
 
-  get slug(): string {
+  public get slug(): string {
     return this.font.family.replace(/ /g, "+");
   }
 
-  get familyStyle(): string {
+  public get familyStyle(): string {
     const { font, selectedVariant, previewName, subset } = this;
     return familyStyle({
       family: font.family,
@@ -63,7 +59,7 @@ class FontItem extends HTMLLIElement {
     });
   }
 
-  connectedCallback() {
+  public connectedCallback(): void {
     const { family, category, variants, subsets, lineNumber, tags, variable } =
       this.font;
     this.subset = this.selectedSubset;
@@ -83,7 +79,7 @@ class FontItem extends HTMLLIElement {
       </div>
       <div class="family-meta-container">
         <span class="family-title-small">${
-          this.previewName == family ? "" : family
+          this.previewName === family ? "" : family
         }</span>
         <div class="family-meta">
           <ul>
@@ -117,7 +113,7 @@ class FontItem extends HTMLLIElement {
     </div>`;
   }
 
-  addFontToHead(): void {
+  public addFontToHead(): void {
     const { slug, selectedVariant, previewName, font } = this;
     const { family, variants } = font;
 
@@ -133,7 +129,7 @@ class FontItem extends HTMLLIElement {
     document.head.append(linkElement);
   }
 
-  disconnectedCallback() {
+  public disconnectedCallback(): void {
     const linkElement = document.querySelector(
       `link[data-family="${this.font.family}"]`,
     );

components/font-list.ts

@@ -1,23 +1,23 @@
 import { setAttributes } from "./set-attributes";
 
 class FontList extends HTMLUListElement {
-  constructor() {
+  public constructor() {
     super();
   }
 
-  get selectedVariant() {
+  public get selectedVariant(): string {
     return this.getAttribute("selected-variant");
   }
 
-  get selectedSubset() {
+  public get selectedSubset(): string {
     return this.getAttribute("selected-subset");
   }
 
-  get fonts() {
-    return JSON.parse(this.getAttribute("fonts"));
+  public get fonts(): string[] {
+    return JSON.parse(this.getAttribute("fonts")) as string[];
   }
 
-  connectedCallback() {
+  public connectedCallback(): void {
     if (!this.fonts) return;
     const items = [];
     for (const font of this.fonts) {
@@ -33,12 +33,16 @@ class FontList extends HTMLUListElement {
     this.innerHTML = items.join("\n");
   }
 
-  attributeChangedCallback(name: string, oldValue: string, nextValue: string) {
+  public attributeChangedCallback(
+    name: string,
+    oldValue: string,
+    nextValue: string,
+  ): void {
     if (oldValue === nextValue) return;
     this.connectedCallback();
   }
 
-  static get observedAttributes() {
+  public static get observedAttributes(): string[] {
     return ["selected-variant", "selected-subset", "fonts"];
   }
 }