linting fixes + cleanups (mv2)

.eslintrc.js

@@ -17,6 +17,12 @@ module.exports = {
     '@typescript-eslint'
   ],
   overrides: [
+    {
+      files: ['*.js', 'utils/*.js'],
+      rules: {
+        '@typescript-eslint/no-var-requires': 'off',
+      }
+    },
     {
       files: ['*.svelte'],
       processor: 'svelte3/svelte3',
@@ -31,12 +37,20 @@ module.exports = {
         '@typescript-eslint/prefer-nullish-coalescing': 'off',
         // Causes false positives with reactive and auto subscriptions
         '@typescript-eslint/strict-boolean-expressions': 'off',
+        '@typescript-eslint/no-unsafe-argument': 'off',
         'no-sequences': 'off',
         'no-unused-expressions': 'off',
       }
     }
   ],
   rules: {
+    // TODO: probably want to enable some of these
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-confusing-void-expression': 'off',
+    '@typescript-eslint/no-floating-promises': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unused-expressions': 'off',
+
     'linebreak-style': [
       'error',
       'unix'
@@ -91,7 +105,14 @@ module.exports = {
     ],
   },
   settings: {
-    'svelte3/typescript': () => require('typescript')
+    'svelte3/typescript': () => require('typescript'),
+    'svelte3/ignore-warnings': (warning) => {
+      if (warning.code === 'a11y-click-events-have-key-events') {
+        return true;
+      }
+
+      return false;
+    },
   },
   globals: {
     Ytc: 'readonly',

src/components/ChatSummary.svelte

@@ -15,7 +15,7 @@
   const classes = 'rounded inline-flex flex-col overflow-visible ' +
    'bg-secondary-900 p-2 w-full text-white z-10 shadow';
 
-  const onShorten = () => { 
+  const onShorten = () => {
     shorten = !shorten;
     if (autoHideTimeout) {
       clearTimeout(autoHideTimeout);

src/components/Hyperchat.svelte

@@ -60,7 +60,7 @@
 
   const CHAT_HISTORY_SIZE = 150;
   const TRUNCATE_SIZE = 20;
-  let messageActions: (Chat.MessageAction | Welcome)[] = [];
+  let messageActions: Array<Chat.MessageAction | Welcome> = [];
   const messageKeys = new Set<string>();
   let poll: Ytc.ParsedPoll | null;
   let pinned: Ytc.ParsedPinned | null;
@@ -408,7 +408,7 @@
 
   $: updateTheme($theme, $ytDark);
   // Scroll to bottom when any of these settings change
-  $: ((..._a: any[]) => scrollToBottom())(
+  $: ((..._a: any[]) => { scrollToBottom(); })(
     $showProfileIcons, $showUsernames, $showTimestamps, $showUserBadges
   );
 
@@ -474,10 +474,10 @@
           class:flex = {!isWelcome(action)}
           class:mention = {$enableHighlightedMentions && isMessage(action) && isMention(action.message)}
           class:mention-light = {!$smelteDark}
-          on:mouseover={() => setHover(action)}
-          on:focus={() => setHover(action)}
-          on:mouseout={() => setHover(null)}
-          on:blur={() => setHover(null)}
+          on:mouseover={() => { setHover(action); }}
+          on:focus={() => { setHover(action); }}
+          on:mouseout={() => { setHover(null); }}
+          on:blur={() => { setHover(null); }}
         >
           {#if isWelcome(action)}
             <WelcomeMessage />

src/components/HyperchatButton.svelte

@@ -74,14 +74,6 @@
     cursor: pointer;
     transition: box-shadow 0.2s;
   }
-  .toggleButton .floating-icon {
-    position: absolute;
-    bottom: 5px;
-    right: 3px;
-    width: 15px;
-    height: 15px;
-  }
-
   .toggleButton.disabled {
     color: var(--yt-live-chat-secondary-text-color);
   }

src/components/Message.svelte

@@ -80,7 +80,7 @@
     icon: d.icon,
     text: d.text,
     value: d.value.toString(),
-    onClick: () => useBanHammer(message, d.value, $port)
+    onClick: () => { useBanHammer(message, d.value, $port); }
   }));
 
   const openReplyTargetSuperchat = () => {
@@ -157,7 +157,7 @@
       <span
         class="inline-flex items-center justify-center align-middle cursor-pointer rounded"
         style={
-          `width: 1.6em; height: 1.6em;` +
+          'width: 1.6em; height: 1.6em;' +
           (message.replyToSuperchat.bgColor ? ` background-color: #${message.replyToSuperchat.bgColor};` : '') +
           (message.replyToSuperchat.fgColor ? ` color: #${message.replyToSuperchat.fgColor};` : ' color: inherit;')
         }

src/components/PinnedMessage.svelte

@@ -14,7 +14,7 @@
   const classes = 'rounded inline-flex flex-col overflow-visible ' +
    'bg-secondary-900 p-2 w-full text-white z-10 shadow';
 
-  const onShorten = () => { 
+  const onShorten = () => {
     shorten = !shorten;
     if (autoHideTimeout) {
       clearTimeout(autoHideTimeout);

src/components/RedirectBanner.svelte

@@ -16,7 +16,7 @@
   const classes = 'rounded inline-flex flex-col overflow-visible ' +
    'bg-secondary-900 p-2 w-full text-white z-10 shadow';
 
-  const onShorten = () => { 
+  const onShorten = () => {
     shorten = !shorten;
     if (autoHideTimeout) {
       clearTimeout(autoHideTimeout);

src/components/ReportBanDialog.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-  import {
-    ChatReportUserOptions,
-    chatReportUserOptions
-  } from '../ts/chat-constants';
+  import { chatReportUserOptions } from '../ts/chat-constants';
+  import type { ChatReportUserOptions } from '../ts/chat-constants';
   import {
     reportDialog,
     alertDialog

src/components/SettingsButton.svelte

@@ -2,7 +2,7 @@
   import { createPopup } from '../ts/chat-utils';
   import { isLiveTL } from '../ts/chat-constants';
   import outline from '../assets/outline.svg?raw';
-  import { onDestroy, onMount } from "svelte";
+  import { onDestroy, onMount } from 'svelte';
 
   const openSettings = () => {
     createPopup(chrome.runtime.getURL(`${isLiveTL ? 'hyperchat/' : ''}options.html${document.documentElement.getAttribute('dark') === '' ? '?dark' : ''}`));
@@ -65,4 +65,4 @@
     justify-content: center;
     fill: var(--yt-spec-text-primary);
   }
-</style>
+</style>

src/components/WelcomeMessage.svelte

@@ -14,10 +14,10 @@
   const classes = 'p-2 rounded inline-flex flex-col overflow-hidden ' +
    'bg-secondary-50 dark:bg-secondary-600 w-full';
 
-  const badges: {
+  const badges: Array<{
     name: string;
     href: string;
-  }[] = [
+  }> = [
     {
       name: 'Review',
       href: reviewLink

src/components/common/Checkbox.svelte

@@ -18,7 +18,7 @@
   export let wrapperClass = '';
 
   $: if (value != null) {
-    checked = group.indexOf(value) >= 0;
+    checked = group.includes(value);
   }
 
   function groupUpdate() {

src/components/common/Menu.svelte

@@ -11,12 +11,12 @@
   import Menu from 'smelte/src/components/Menu';
   import List from 'smelte/src/components/List';
   import Icon from './Icon.svelte';
-  type MenuItem = {
+  interface MenuItem {
     icon: string;
     value: string;
     text: string;
     onClick?: () => void;
-  };
+  }
   export let items: MenuItem[];
   export let visible = true;
   const id = genId();
@@ -29,7 +29,7 @@
   let offsetYStyle = '';
   const onItemClick = (item: MenuItem): void => {
     open = false;
-    if (!item || !item.onClick) return;
+    if (!item?.onClick) return;
     item.onClick();
   };
   const onOpenChange = async (open: boolean) => {
@@ -95,7 +95,7 @@
               {#each items as item}
                 <li
                   class={listItemClasses}
-                  on:click={() => onItemClick(item)}
+                  on:click={() => { onItemClick(item); }}
                   style="padding: 0.5em 1em"
                 >
                   <Icon class="pr-6">

src/components/common/RadioGroupStore.svelte

@@ -2,7 +2,7 @@
   import type { Writable } from 'svelte/store';
   import { RadioButtonGroup, RadioButton } from 'smelte/src/components/RadioButton';
 
-  type RadioItem = { value: string | boolean, label: string };
+  interface RadioItem { value: string | boolean, label: string }
 
   /** Writable store for value updates. */
   export let store: Writable<string | boolean>;

src/components/settings/MessageTranslationSettings.svelte

@@ -15,7 +15,7 @@
   onMount(() => {
     const unsub = translateTargetLanguage.subscribe(value => {
       $enabled = Boolean(value);
-      setTimeout(() => unsub(), 0);
+      setTimeout(() => { unsub(); }, 0);
     });
   });
   const priority: AvailableLanguageCodes[] = [