chore: fix TypeScript issues (WIP)

src/lib/components/JSONEditor.svelte

@@ -423,6 +423,8 @@
 
   $: {
     debug('mode changed to', mode)
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
     if (mode === 'code') {
       // check for 'code' is here for backward compatibility (deprecated since v0.4.0)
       console.warn(

src/lib/components/JSONEditor.test.ts

@@ -2,9 +2,10 @@ import { beforeEach, afterEach, test, describe, expect, vi } from 'vitest'
 import '@testing-library/jest-dom'
 import { render, screen } from '@testing-library/svelte'
 import JSONEditor from './JSONEditor.svelte'
+import { type Content, Mode } from '$lib/types.js'
 
 describe('JSONEditor', () => {
-  const content = {
+  const content: Content = {
     json: [{ id: 1 }, { id: 2, name: 'Joe' }, { id: 3 }]
   }
 
@@ -27,7 +28,7 @@ describe('JSONEditor', () => {
   test('render tree mode', () => {
     const { container } = render(JSONEditor, {
       props: {
-        mode: 'tree',
+        mode: Mode.tree,
         content
       }
     })
@@ -41,7 +42,7 @@ describe('JSONEditor', () => {
   test('render text mode', () => {
     const { container } = render(JSONEditor, {
       props: {
-        mode: 'text',
+        mode: Mode.text,
         content
       }
     })
@@ -55,7 +56,7 @@ describe('JSONEditor', () => {
   test('render table mode', () => {
     const { container } = render(JSONEditor, {
       props: {
-        mode: 'table',
+        mode: Mode.table,
         content
       }
     })

src/lib/components/controls/contextmenu/ContextMenu.svelte

@@ -40,19 +40,19 @@
     ArrowRight: 'Right'
   }
 
-  function handleKeyDown(event) {
+  function handleKeyDown(event: KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement }) {
     const combo = keyComboFromEvent(event)
     const direction: 'Up' | 'Down' | 'Left' | 'Right' | undefined = directionByCombo[combo]
 
-    if (direction && event.target) {
+    if (direction && event.currentTarget) {
       event.preventDefault()
 
       const buttons: HTMLButtonElement[] = Array.from(
         refContextMenu.querySelectorAll('button:not([disabled])')
       )
-      const nearest = findNearestElement({
+      const nearest = findNearestElement<HTMLButtonElement>({
         allElements: buttons,
-        currentElement: event.target,
+        currentElement: event.currentTarget as unknown as HTMLButtonElement,
         direction,
         hasPrio: (element: HTMLButtonElement) => {
           return element.getAttribute('data-type') !== 'jse-open-dropdown'
@@ -75,7 +75,7 @@
   tabindex="-1"
   class="jse-contextmenu"
   bind:this={refContextMenu}
-  on:keydown={handleKeyDown}
+  on:keydown={(event) => handleKeyDown(event)}
 >
   {#each items as item}
     {#if isMenuButton(item)}

src/lib/components/controls/contextmenu/ContextMenuPointer.svelte

@@ -13,10 +13,10 @@
   export let selected: boolean
   export let onContextMenu: OnContextMenu
 
-  function handleClick(event) {
-    let buttonElem = event.target
+  function handleClick(event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
+    let buttonElem: Element | null = event.currentTarget
     while (buttonElem && buttonElem.nodeName !== 'BUTTON') {
-      buttonElem = buttonElem.parentNode
+      buttonElem = buttonElem.parentNode as Element
     }
 
     if (buttonElem) {
@@ -39,7 +39,7 @@
   class="jse-context-menu-pointer"
   class:jse-selected={selected}
   title={CONTEXT_MENU_EXPLANATION}
-  on:click={handleClick}
+  on:click={(event) => handleClick(event)}
 >
   <Icon data={faCaretDown} />
 </button>

src/lib/components/controls/navigationBar/NavigationBarPathEditor.svelte

@@ -53,7 +53,7 @@
     } catch (error) {
       return {
         path: undefined,
-        error
+        error: error as Error
       }
     }
   }
@@ -64,7 +64,7 @@
     }
   }
 
-  function handleInput(event) {
+  function handleInput(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
     inputPath = event.currentTarget.value
   }
 
@@ -81,15 +81,15 @@
       if (result.path !== undefined) {
         onChange(result.path)
       } else {
-        onError(result.error)
+        onError(result.error as Error)
       }
     }
   }
 
   function handleCopy() {
     copyToClipBoard(inputPath)
     copied = true
-    copiedTimer = setTimeout(() => (copied = false), copiedDelay)
+    copiedTimer = window.setTimeout(() => (copied = false), copiedDelay)
     focus()
   }
 </script>
@@ -108,7 +108,7 @@
       type="button"
       class="jse-navigation-bar-validation-error"
       use:tooltip={{
-        text: inputValidationError,
+        text: String(inputValidationError || ''),
         ...absolutePopupContext
       }}
     >

src/lib/components/modes/tablemode/ColumnHeader.svelte

@@ -4,7 +4,7 @@
   import type { JSONPath } from 'immutable-json-patch'
   import type { SortedColumn } from '$lib/types.js'
   import { SortDirection } from '$lib/types.js'
-  import { stringifyJSONPath } from '../../../utils/pathUtils.js'
+  import { stringifyJSONPath } from '$lib/utils/pathUtils.js'
   import Icon from 'svelte-awesome'
   import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons'
   import { isEmpty, isEqual } from 'lodash-es'

src/lib/components/modes/tablemode/TableMode.svelte

@@ -689,7 +689,7 @@
   }
 
   function findNextInside(path: JSONPath): JSONSelection {
-    const index = parseInt(path[0])
+    const index = parseInt(path[0], 10)
     const nextPath = [String(index + 1), ...path.slice(1)]
 
     return existsIn(json, nextPath)

src/lib/components/modes/tablemode/contextmenu/TableContextMenu.svelte

@@ -58,7 +58,7 @@
   $: canEnforceString = canEditValue && !isObjectOrArray(focusValue)
 
   $: enforceString =
-    selection != null
+    selection != null && focusValue !== undefined
       ? getEnforceString(
           focusValue,
           documentState.enforceStringMap,

src/lib/components/modes/textmode/TextMode.svelte

@@ -283,7 +283,7 @@
 
       return true
     } catch (err) {
-      onError(err)
+      onError(err as Error)
     }
 
     return false
@@ -305,7 +305,7 @@
 
       return true
     } catch (err) {
-      onError(err)
+      onError(err as Error)
     }
 
     return false
@@ -325,7 +325,7 @@
       jsonStatus = JSON_STATUS_VALID
       jsonParseError = null
     } catch (err) {
-      onError(err)
+      onError(err as Error)
     }
   }
 
@@ -353,7 +353,7 @@
         }
       })
     } catch (err) {
-      onError(err)
+      onError(err as Error)
     }
   }
 
@@ -396,7 +396,7 @@
         }
       })
     } catch (err) {
-      onError(err)
+      onError(err as Error)
     }
   }
 
@@ -460,12 +460,15 @@
   function handleSelectValidationError(validationError: ValidationError) {
     debug('select validation error', validationError)
 
-    const richValidationError = toRichValidationError(validationError)
+    const { from, to } = toRichValidationError(validationError)
+    if (from === null || to === null) {
+      return
+    }
 
     // we take "to" as head, not as anchor, because the scrollIntoView will
     // move to the head, and when a large whole object is selected as a whole,
     // we want to scroll to the start of the object and not the end
-    setSelection(richValidationError.from, richValidationError.to)
+    setSelection(from, to)
 
     focus()
   }

src/lib/components/modes/textmode/menu/TextMenu.svelte

@@ -13,19 +13,19 @@
   import type { MenuItem, OnRenderMenuWithoutContext } from '$lib/types'
 
   export let readOnly = false
-  export let onFormat
-  export let onCompact
-  export let onSort
-  export let onTransform
-  export let onToggleSearch
-  export let onUndo
-  export let onRedo
-  export let canUndo
-  export let canRedo
-  export let canFormat
-  export let canCompact
-  export let canSort
-  export let canTransform
+  export let onFormat: () => boolean
+  export let onCompact: () => boolean
+  export let onSort: () => void
+  export let onTransform: () => void
+  export let onToggleSearch: () => void
+  export let onUndo: () => void
+  export let onRedo: () => void
+  export let canUndo: boolean
+  export let canRedo: boolean
+  export let canFormat: boolean
+  export let canCompact: boolean
+  export let canSort: boolean
+  export let canTransform: boolean
   export let onRenderMenu: OnRenderMenuWithoutContext
 
   const searchItem: MenuItem = {