Update dependencies and fix linting issues.

package.json

@@ -23,25 +23,25 @@
     "htm": "^3.0.4",
     "modern-normalize": "^1.0.0",
     "platform": "^1.3.6",
-    "preact": "^10.5.3",
+    "preact": "^10.5.7",
-    "webextension-polyfill-ts": "^0.20.0"
+    "webextension-polyfill-ts": "^0.22.0"
   },
   "devDependencies": {
     "@types/debounce": "^1.2.0",
     "@types/platform": "^1.3.3",
-    "eslint-config-xo-typescript": "^0.33.0",
+    "eslint-config-xo-typescript": "^0.37.0",
-    "husky": "^4.3.0",
+    "husky": "^4.3.6",
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-web-extension": "^1.6.1",
-    "sass": "^1.26.11",
+    "sass": "^1.30.0",
-    "stylelint": "^13.7.2",
+    "stylelint": "^13.8.0",
-    "stylelint-config-xo-scss": "^0.13.0",
+    "stylelint-config-xo-scss": "^0.14.0",
-    "stylelint-config-xo-space": "^0.14.0",
+    "stylelint-config-xo-space": "^0.15.1",
-    "trash-cli": "^3.1.0",
+    "trash-cli": "^4.0.0",
-    "typescript": "^4.0.3",
+    "typescript": "^4.1.3",
-    "web-ext": "^5.1.0",
+    "web-ext": "^5.4.1",
     "web-ext-types": "^3.2.1",
-    "xo": "^0.33.1"
+    "xo": "^0.36.1"
   },
   "stylelint": {
     "extends": [

source/manifest.json

@@ -3,7 +3,7 @@
   "manifest_version": 2,
   "name": "Tildes ReExtended",
   "description": "An updated and reimagined recreation of Tildes Extended to enhance and improve the experience of Tildes.net.",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "permissions": [
     "downloads",
     "storage",

source/scripts/autocomplete.ts

@@ -73,9 +73,9 @@ export class AutocompleteFeature extends Component<Props, State> {
 
       if (event.key === prefix && !activeElement.getAttribute(dataAttribute)) {
         activeElement.setAttribute(dataAttribute, 'true');
-        activeElement.addEventListener('keyup', (event) =>
+        activeElement.addEventListener('keyup', (event) => {
-          this.textareaInputHandler(event, prefix, target, values)
+          this.textareaInputHandler(event, prefix, target, values);
-        );
+        });
 
         this.textareaInputHandler(event, prefix, target, values);
       }

source/scripts/user-labels.ts

@@ -100,8 +100,9 @@ export class UserLabelsFeature extends Component<Props, State> {
       const addLabel = html`
         <span
           class="trx-user-label-add"
-          onClick=${(event: MouseEvent) =>
+          onClick=${(event: MouseEvent) => {
-            this.addLabelHandler(event, username)}
+            this.addLabelHandler(event, username);
+          }}
         >
           [+]
         </span>
@@ -139,9 +140,9 @@ export class UserLabelsFeature extends Component<Props, State> {
           ${userLabel.text}
         </span>`);
 
-        label.addEventListener('click', (event: MouseEvent) =>
+        label.addEventListener('click', (event: MouseEvent) => {
-          this.editLabelHandler(event, userLabel.id)
+          this.editLabelHandler(event, userLabel.id);
-        );
+        });
 
         element.after(label);
         label.setAttribute('style', `background-color: ${userLabel.color};`);
@@ -312,9 +313,9 @@ export class UserLabelsFeature extends Component<Props, State> {
       return;
     }
 
-    querySelectorAll(`[data-trx-label-id="${id}"]`).map((value) =>
+    querySelectorAll(`[data-trx-label-id="${id}"]`).forEach((value) => {
-      value.remove()
+      value.remove();
-    );
+    });
 
     settings.data.userLabels.splice(index, 1);
     void setSettings(settings);

source/settings-page.ts

@@ -93,7 +93,9 @@ function App(props: Props) {
         key=${key}
         class="${activeFeature === key ? 'active' : ''}
       ${enabledFeatures.has(key) ? 'enabled' : ''}"
-        onClick="${() => setActiveFeature(key)}"
+        onClick="${() => {
+          setActiveFeature(key);
+        }}"
       >
         ${value}
       </li>`

source/settings/components/about.ts

@@ -17,7 +17,7 @@ async function logSettings() {
 
 export function AboutSetting(props: SettingProps): TRXComponent {
   const importSettings = () => {
-    (document.querySelector('#import-settings') as HTMLInputElement).click();
+    document.querySelector<HTMLElement>('#import-settings')!.click();
   };
 
   const communityLink = html`

source/settings/components/hide-votes.ts

@@ -35,7 +35,9 @@ export function HideVotesSetting(props: SettingProps): TRXComponent {
             <input
               type="checkbox"
               checked=${checked[target]}
-              onClick=${() => toggle(target)}
+              onClick=${() => {
+                toggle(target);
+              }}
             />
             ${label}
           </label>

source/settings/components/index.ts

@@ -20,7 +20,13 @@ function Header(props: SettingProps): TRXComponent {
 
   return html`<header>
     <h2>${props.title}</h2>
-    <button onClick="${() => toggleFeature(props.feature)}">${enabled}</button>
+    <button
+      onClick="${() => {
+        toggleFeature(props.feature);
+      }}"
+    >
+      ${enabled}
+    </button>
   </header>`;
 }
 

source/settings/export.ts

@@ -23,6 +23,8 @@ export async function exportSettings(event: MouseEvent): Promise<void> {
     // According to MDN, when creating an object URL we should also revoke it
     // when "it's safe to do so" to prevent excessive memory/storage use.
     // 60 seconds should probably be enough time to download the settings.
-    setTimeout(() => URL.revokeObjectURL(objectURL), 60 * 1000);
+    setTimeout(() => {
+      URL.revokeObjectURL(objectURL);
+    }, 60 * 1000);
   }
 }