Update Dependencies (#412)

* Update Dependencies * fix format * Convert from TypeScript to work-around svelte-check * Quiet warnings * Try to update eslint plugin for svelte
sillsdev · Nov 2, 2023 · 1d67885 · 1d67885
1 parent cb1dd93
commit 1d67885
Show file tree

Hide file tree

Showing 14 changed files with 6,554 additions and 12,401 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -6,7 +6,7 @@ module.exports = {
         extraFileExtensions: ['*.svelte']
     },
     extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-    plugins: ['svelte3', '@typescript-eslint', 'prettier'],
+    plugins: ['svelte', '@typescript-eslint', 'prettier'],
     ignorePatterns: ['*.cjs', '*.js'],
     overrides: [
         {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,28 +29,28 @@
         "@tailwindcss/typography": "^0.5.2",
         "@types/jsdom": "^21",
         "@types/node": "^20",
-        "@typescript-eslint/eslint-plugin": "^5.10.1",
-        "@typescript-eslint/parser": "^5.10.1",
+        "@typescript-eslint/eslint-plugin": "^6",
+        "@typescript-eslint/parser": "^6",
         "autoprefixer": "^10.4.7",
         "concurrently": "^8",
         "daisyui": "^3",
         "eslint": "^8.44.0",
-        "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-prettier": "^4.0.0",
-        "eslint-plugin-svelte3": "^4.0.0",
+        "eslint-config-prettier": "^9",
+        "eslint-plugin-prettier": "^5",
+        "eslint-plugin-svelte": "^2",
         "fflate": "^0.8",
         "idb": "^7.1.1",
-        "jsdom": "^21",
+        "jsdom": "^22",
         "postcss": "^8.4.14",
-        "prettier": "^2.5.1",
-        "prettier-plugin-svelte": "^2.5.0",
-        "proskomma-core": "0.9.14",
-        "proskomma-json-tools": "^0.7.1",
+        "prettier": "^3",
+        "prettier-plugin-svelte": "^3",
+        "proskomma-core": "0.10.4",
+        "proskomma-json-tools": "^0.7.3",
         "proskomma-tools": "^0.0.5",
         "rimraf": "^5",
-        "svelte": "^3",
+        "svelte": "^4",
         "svelte-check": "^3",
-        "svelte-eslint-parser": "^0.30",
+        "svelte-eslint-parser": "^0.33",
         "svelte-french-toast": "^1.0.3",
         "svelte-gestures": "^1.4.1",
         "svelte-preprocess": "^5",
@@ -60,6 +60,6 @@
         "vite": "^4"
     },
     "volta": {
-        "node": "16.17.0"
+        "node": "20.9.0"
     }
 }
diff --git a/src/app.html b/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />

diff --git a/src/lib/components/AudioBar.svelte b/src/lib/components/AudioBar.svelte
@@ -109,6 +109,7 @@ TODO:
         </div>
         {#if $audioPlayer.loaded}
             <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
             <progress
                 id="progress-bar"
                 class="dy-progress audio-progress"

diff --git a/src/lib/components/CollectionList.svelte b/src/lib/components/CollectionList.svelte
@@ -24,12 +24,14 @@ Custom list of collections for the LayoutOptions menu
         <!-- svelte-ignore a11y-missing-attribute -->
         <li>
             <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-interactive-supports-focus -->
             <a
                 on:click={() => handleClick(d)}
                 style:background-color={selectedLayouts.id === d.id
                     ? $themeColors['LayoutItemSelectedBackgroundColor']
                     : ''}
                 class="flex justify-between"
+                role="button"
             >
                 <div style={$s['ui.layouts.selector']}>
                     <div style={convertStyle($s['ui.layouts.title'])}>

diff --git a/src/lib/components/FontList.svelte b/src/lib/components/FontList.svelte
@@ -25,13 +25,15 @@ Font list component.
         <!-- svelte-ignore a11y-missing-attribute -->
         <li style:font-family={font} style:font-size="large">
             <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-interactive-supports-focus -->
             <a
                 on:click={() => handleClick(font)}
                 style:background-color={font === selectedFont
                     ? $themeColors['ButtonSelectedColor']
                     : ''}
                 style:color={$monoIconColor}
                 style:font-famly={font}
+                role="button"
             >
                 {config.fonts.find((x) => x.family === font).name}
             </a>

diff --git a/src/lib/components/SelectGrid.svelte b/src/lib/components/SelectGrid.svelte
@@ -75,6 +75,7 @@ A component to display menu options in a grid.
         <div class="mx-2" style={headerStyle}>{group.header}</div>
     {/if}
     <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+    <!-- svelte-ignore a11y-interactive-supports-focus -->
     <div
         on:touchstart={handleHover}
         on:touchmove={handleTouchMove}
@@ -84,10 +85,12 @@ A component to display menu options in a grid.
         class="grid grid-cols-{cols} gap-1 m-2"
         class:grid-cols-5={cols == 5}
         class:grid-cols-6={cols == 6}
+        role="menu"
     >
         {#if group.rows}
             {#each group.rows as row}
                 <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <!-- svelte-ignore a11y-interactive-supports-focus -->
                 <span
                     on:click={() => handleClick(row.id)}
                     id={row.id}
@@ -98,13 +101,15 @@ A component to display menu options in a grid.
                     style:background-color={hovered === row.id
                         ? hoverColor
                         : bookCollectionColor(row.id, 'ui.button.chapter-intro')}
+                    role="button"
                 >
                     {row.label}
                 </span>
             {/each}
         {/if}
         {#each group.cells as cell}
             <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
             <span
                 on:click={() => handleClick(cell.id)}
                 id={cell.id}

diff --git a/src/lib/components/SelectList.svelte b/src/lib/components/SelectList.svelte
@@ -29,10 +29,12 @@ A component to display menu options in a list.
                     {#if ri * group.cells.length + ci < group.cells.length}
                         <tr>
                             <!-- svelte-ignore a11y-click-events-have-key-events -->
+                            <!-- svelte-ignore a11y-interactive-supports-focus -->
                             <span
                                 on:click={() =>
                                     handleClick(group.cells[ri * group.cells.length + ci].id)}
                                 class="menu p-0 cursor-pointer hover:bg-base-100 min-w-[16rem]"
+                                role="button"
                             >
                                 {group.cells[ri * group.cells.length + ci].label}
                             </span></tr

diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
@@ -76,7 +76,8 @@ The sidebar/drawer.
         <!-- Page content here -->
         <slot />
     </div>
-    <div class="dy-drawer-side" on:click={closeDrawer} on:keydown={closeDrawer}>
+    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+    <div class="dy-drawer-side" on:click={closeDrawer} on:keydown={closeDrawer} role="navigation">
         <div class="dy-drawer-overlay" />
         <ul
             class="dy-menu p-1 w-3/4 sm:w-80 text-base-content"

diff --git a/src/lib/components/TabsMenu.svelte b/src/lib/components/TabsMenu.svelte
@@ -36,13 +36,15 @@ A component to display tabbed menus.
             {#if options[opt].visible}
                 <!-- svelte-ignore a11y-missing-attribute -->
                 <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <!-- svelte-ignore a11y-interactive-supports-focus -->
                 <a
                     on:click|preventDefault={() => setActive(opt)}
                     style:border-color={active === opt ? '#FFFFFF' : ''}
                     class="dy-tab dy-tab-bordered text-white normal-case {active === opt
                         ? 'dy-tab-active'
                         : ''}"
                     style:background="none"
+                    role="button"
                 >
                     {#if options[opt].tab}
                         <svelte:component

diff --git a/src/lib/components/TextSelectionToolbar.svelte b/src/lib/components/TextSelectionToolbar.svelte
@@ -144,46 +144,58 @@ TODO:
             {#if showHightlightPens}
                 <div class="pen-grid grid grid-rows-1 gap-2 my-2">
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <!-- svelte-ignore a11y-interactive-supports-focus -->
                     <div
                         class="dy-btn-sm"
                         style:background-color={$themeColors['HighlighterPenYellow']}
                         style:border={buttonBorder}
                         on:click={() => modifyHighlight(1)}
+                        role="button"
                     />
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <!-- svelte-ignore a11y-interactive-supports-focus -->
                     <div
                         class="dy-btn-sm"
                         style:background-color={$themeColors['HighlighterPenGreen']}
                         style:border={buttonBorder}
                         on:click={() => modifyHighlight(2)}
+                        role="button"
                     />
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <!-- svelte-ignore a11y-interactive-supports-focus -->
                     <div
                         class="dy-btn-sm"
                         style:background-color={$themeColors['HighlighterPenBlue']}
                         style:border={buttonBorder}
                         on:click={() => modifyHighlight(3)}
+                        role="button"
                     />
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <!-- svelte-ignore a11y-interactive-supports-focus -->
                     <div
                         class="dy-btn-sm"
                         style:background-color={$themeColors['HighlighterPenOrange']}
                         style:border={buttonBorder}
                         on:click={() => modifyHighlight(4)}
+                        role="button"
                     />
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <!-- svelte-ignore a11y-interactive-supports-focus -->
                     <div
                         class="dy-btn-sm"
                         style:background-color={$themeColors['HighlighterPenPink']}
                         style:border={buttonBorder}
                         on:click={() => modifyHighlight(5)}
+                        role="button"
                     />
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <!-- svelte-ignore a11y-interactive-supports-focus -->
                     <div
                         class="dy-btn-sm"
                         style:background-color={'white'}
                         style:border={buttonBorder}
                         on:click={() => modifyHighlight(6)}
+                        role="button"
                     />
                 </div>
             {:else}

diff --git a/src/lib/data/stores/setting.ts b/src/lib/data/stores/setting.ts
@@ -162,8 +162,8 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
     }
 
     const hasAudioSourceWitbDownload =
-        Object.keys(config.audio?.sources || []).filter((key) =>
-            config.audio.sources[key].accessMethods?.includes('download')
+        Object.keys(config.audio?.sources || []).filter(
+            (key) => config.audio.sources[key].accessMethods?.includes('download')
         ).length > 0;
     if (config.mainFeatures['settings-audio-download-mode'] && hasAudioSourceWitbDownload) {
         settings.push({

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
     import AudioBar from '$lib/components/AudioBar.svelte';
     import BookSelector from '$lib/components/BookSelector.svelte';
     import ChapterSelector from '$lib/components/ChapterSelector.svelte';
@@ -13,8 +13,6 @@
         currentFont,
         direction,
         firstLaunch,
-        footnotes,
-        fontChoices,
         highlights,
         mainScroll,
         audioHighlightElements,
@@ -54,15 +52,10 @@
     import { page } from '$app/stores';
     import { onDestroy, onMount } from 'svelte';
 
-    function doSwipe(
-        event: CustomEvent<{
-            direction: 'left' | 'top' | 'right' | 'bottom';
-            target: EventTarget;
-        }>
-    ) {
+    function doSwipe(event){
         console.log('SWIPE', event.detail.direction);
         const prev = $refs;
-        (refs as any).skip(event.detail.direction === 'right' ? -1 : 1);
+        (refs).skip(event.detail.direction === 'right' ? -1 : 1);
         if (prev !== $refs) {
             addHistory({
                 collection: $refs.collection,
@@ -73,15 +66,15 @@
     }
 
     function prevChapter() {
-        (refs as any).skip(-1);
+        (refs).skip(-1);
         addHistory({
             collection: $refs.collection,
             book: $refs.book,
             chapter: $refs.chapter
         });
     }
     function nextChapter() {
-        (refs as any).skip(1);
+        (refs).skip(1);
         addHistory({
             collection: $refs.collection,
             book: $refs.book,
@@ -95,15 +88,7 @@
     const minFontSize = config.mainFeatures['text-size-min'];
     const maxFontSize = config.mainFeatures['text-size-max'];
     let lastPinch = 1.0;
-    function doPinch(
-        event: CustomEvent<{
-            scale: number;
-            center: {
-                x: number;
-                y: number;
-            };
-        }>
-    ) {
+    function doPinch() {
         const currPinch = event.detail.scale;
         bodyFontSize.update((fontSize) => {
             if (Math.abs(currPinch - lastPinch) > 0.1) {
@@ -165,16 +150,16 @@
     const key = {};
 
     let group = 'default';
-    let scrollId: string;
-    let scrollMod: any;
+    let scrollId;
+    let scrollMod;
     const unSub = scrolls.subscribe((val, mod) => {
         scrollId = val;
         scrollMod = mod;
     }, group);
     onDestroy(unSub);
 
     /**scrolls element with id into view*/
-    const scrollTo = (id: string) => {
+    const scrollTo = (id) => {
         if (scrollMod === key) return;
         if (!id) return;
         document
@@ -187,7 +172,7 @@
 
     let lastVerseInView = '';
     const handleScroll = (() => {
-        let scrollTimer: NodeJS.Timeout;
+        let scrollTimer;
         return (trigger) => {
             clearTimeout(scrollTimer);
             scrollTimer = setTimeout(() => {
@@ -216,7 +201,7 @@
 
     $: highlightColor = $themeColors['TextHighlightColor'];
     /**updates highlight*/
-    const updateHighlight = (elementIds, color: string) => {
+    const updateHighlight = (elementIds, color) => {
         let container = document.getElementsByClassName('container')[0];
         // Remove highlighting for currently highlighted verses
         const elements = container?.getElementsByClassName('highlighting');
@@ -268,6 +253,7 @@
                 <ChapterSelector />
             </div>
             <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div
                 slot="right-buttons"
                 class="flex flex-nowrap"
@@ -295,6 +281,7 @@
                     <!-- An overflow menu containing the other right-buttons. On mobile it expands when overflowMenuButton is clicked and collpases when handleMenuClick() is called, on larger screens these buttons are always visible. -->
 
                     <!-- Text Appearance Selector Button -->
+                    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
                     <label
                         for="textAppearanceSelector"
                         class="dy-btn dy-btn-ghost p-0.5 dy-no-animation"
@@ -311,6 +298,7 @@
 
                     <!-- Collection Selector Button -->
                     {#if showCollectionNavbar && enoughCollections}
+                        <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
                         <label
                             for="collectionSelector"
                             class="dy-btn dy-btn-ghost p-0.5 dy-no-animation"
@@ -341,6 +329,7 @@
     </div>
     {#if showCollectionViewer && enoughCollections}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div
             class="absolute dy-badge dy-badge-outline dy-badge-md rounded-sm p-1 end-3 m-1 cursor-pointer"
             style:top={navBarHeight}