From e57f471b7e6a783f25d9b54855ad69d7202b1b35 Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Sat, 2 Sep 2023 08:36:42 +0200
Subject: [PATCH] chore: fix TypeScript issues

---
 .../navigationBar/NavigationBarItem.svelte    |  6 ++-
 .../NavigationBarPathEditor.svelte            |  8 ++--
 .../components/modals/CopyPasteModal.svelte   |  3 +-
 src/lib/components/modals/Header.svelte       |  3 +-
 .../components/modals/JSONEditorModal.svelte  |  3 +-
 .../components/modals/JSONRepairModal.svelte  |  3 +-
 src/lib/components/modals/ModalRef.svelte     |  3 +-
 src/lib/components/modals/SortModal.svelte    |  3 +-
 .../components/modals/TransformModal.svelte   | 12 +++---
 .../modals/TransformModalHeader.svelte        | 12 +++---
 .../modals/popup/AbsolutePopup.svelte         |  4 +-
 .../components/modals/transformModalState.ts  | 11 ++++-
 .../modes/tablemode/TableMode.svelte          |  7 ++-
 .../components/modes/textmode/TextMode.svelte | 43 +++++++++++--------
 .../components/modes/treemode/TreeMode.svelte |  7 ++-
 .../modes/treemode/ValidationErrorIcon.svelte |  4 +-
 .../value/components/ColorPicker.svelte       |  6 +--
 .../value/components/TimestampTag.svelte      |  3 +-
 src/lib/types.ts                              |  9 ++++
 19 files changed, 96 insertions(+), 54 deletions(-)

diff --git a/src/lib/components/controls/navigationBar/NavigationBarItem.svelte b/src/lib/components/controls/navigationBar/NavigationBarItem.svelte
index 34e43311..7c292833 100644
--- a/src/lib/components/controls/navigationBar/NavigationBarItem.svelte
+++ b/src/lib/components/controls/navigationBar/NavigationBarItem.svelte
@@ -6,8 +6,10 @@
   import NavigationBarDropdown from '../../../components/controls/navigationBar/NavigationBarDropdown.svelte'
   import { getContext } from 'svelte'
   import type { JSONPath } from 'immutable-json-patch'
+  import type { AbsolutePopupContext } from '$lib/types'
 
-  const { openAbsolutePopup, closeAbsolutePopup } = getContext('absolute-popup')
+  const { openAbsolutePopup, closeAbsolutePopup } =
+    getContext<AbsolutePopupContext>('absolute-popup')
 
   export let path: JSONPath
   export let index: number
@@ -21,7 +23,7 @@
   $: itemPath = path.slice(0, index)
   $: selectedItem = path[index]
 
-  function handleSelectItem(item) {
+  function handleSelectItem(item: string) {
     closeAbsolutePopup(popupId)
     onSelect(itemPath.concat(item))
   }
diff --git a/src/lib/components/controls/navigationBar/NavigationBarPathEditor.svelte b/src/lib/components/controls/navigationBar/NavigationBarPathEditor.svelte
index e8e0d058..b7e7cd45 100644
--- a/src/lib/components/controls/navigationBar/NavigationBarPathEditor.svelte
+++ b/src/lib/components/controls/navigationBar/NavigationBarPathEditor.svelte
@@ -6,9 +6,9 @@
   import Icon from 'svelte-awesome'
   import { keyComboFromEvent } from '$lib/utils/keyBindings.js'
   import { tooltip } from '../../controls/tooltip/tooltip.js'
-  import type { JSONPathParser, OnError } from '$lib/types.js'
+  import type { AbsolutePopupContext, JSONPathParser, OnError } from '$lib/types.js'
 
-  const absolutePopupContext = getContext('absolute-popup')
+  const absolutePopupContext = getContext<AbsolutePopupContext>('absolute-popup')
 
   export let path: JSONPath
   export let pathParser: JSONPathParser
@@ -17,13 +17,13 @@
   export let onError: OnError
   export let pathExists: (path: JSONPath) => boolean
 
-  let inputRef
+  let inputRef: HTMLInputElement
   let inputPath: string
   let validationActive = false
   $: inputPath = pathParser.stringify(path)
   $: inputValidationError = validationActive ? parseAndValidate(inputPath).error : undefined
 
-  let copiedTimer = undefined
+  let copiedTimer: number | undefined = undefined
   let copied = false
   const copiedDelay = 1000 // ms
 
diff --git a/src/lib/components/modals/CopyPasteModal.svelte b/src/lib/components/modals/CopyPasteModal.svelte
index f89075ca..fa75d9d3 100644
--- a/src/lib/components/modals/CopyPasteModal.svelte
+++ b/src/lib/components/modals/CopyPasteModal.svelte
@@ -4,8 +4,9 @@
   import { getContext } from 'svelte'
   import { IS_MAC } from '../../utils/navigatorUtils.js'
   import Header from './Header.svelte'
+  import type { Context } from 'svelte-simple-modal'
 
-  const { close } = getContext('simple-modal')
+  const { close } = getContext<Context>('simple-modal')
 
   const ctrl = IS_MAC ? '⌘' : 'Ctrl'
 </script>
diff --git a/src/lib/components/modals/Header.svelte b/src/lib/components/modals/Header.svelte
index 54503e3c..4cf32bd9 100644
--- a/src/lib/components/modals/Header.svelte
+++ b/src/lib/components/modals/Header.svelte
@@ -4,11 +4,12 @@
   import { getContext } from 'svelte'
   import Icon from 'svelte-awesome'
   import { faTimes } from '@fortawesome/free-solid-svg-icons'
+  import type { Context } from 'svelte-simple-modal'
 
   export let title = 'Modal'
   export let onClose: (() => void) | undefined = undefined
 
-  const { close } = getContext('simple-modal')
+  const { close } = getContext<Context>('simple-modal')
 </script>
 
 <div class="jse-header">
diff --git a/src/lib/components/modals/JSONEditorModal.svelte b/src/lib/components/modals/JSONEditorModal.svelte
index 1c6a88b3..24a3612c 100644
--- a/src/lib/components/modals/JSONEditorModal.svelte
+++ b/src/lib/components/modals/JSONEditorModal.svelte
@@ -31,6 +31,7 @@
   import memoizeOne from 'memoize-one'
   import { onEscape } from '$lib/actions/onEscape.js'
   import { getFocusPath } from '$lib/logic/selection.js'
+  import type { Context } from 'svelte-simple-modal'
 
   const debug = createDebug('jsoneditor:JSONEditorModal')
 
@@ -60,7 +61,7 @@
   export let onSortModal: OnSortModal
   export let onTransformModal: OnTransformModal
 
-  const { close } = getContext('simple-modal')
+  const { close } = getContext<Context>('simple-modal')
 
   interface ModalState {
     mode: Mode
diff --git a/src/lib/components/modals/JSONRepairModal.svelte b/src/lib/components/modals/JSONRepairModal.svelte
index d44189c2..17602f7f 100644
--- a/src/lib/components/modals/JSONRepairModal.svelte
+++ b/src/lib/components/modals/JSONRepairModal.svelte
@@ -4,13 +4,14 @@
   import { getContext } from 'svelte'
   import JSONRepairComponent from './repair/JSONRepairComponent.svelte'
   import { onEscape } from '$lib/actions/onEscape.js'
+  import type { Context } from 'svelte-simple-modal'
 
   export let text
   export let onParse
   export let onRepair
   export let onApply
 
-  const { close } = getContext('simple-modal')
+  const { close } = getContext<Context>('simple-modal')
 
   function handleApply(repairedText) {
     close()
diff --git a/src/lib/components/modals/ModalRef.svelte b/src/lib/components/modals/ModalRef.svelte
index fbd233ae..866302b5 100644
--- a/src/lib/components/modals/ModalRef.svelte
+++ b/src/lib/components/modals/ModalRef.svelte
@@ -12,8 +12,9 @@
   // <ModalRef bind:open bind:close />
   //
   import { getContext } from 'svelte'
+  import type { Context } from 'svelte-simple-modal'
 
-  const context = getContext('simple-modal')
+  const context = getContext<Context>('simple-modal')
 
   export const open = context.open
   export const close = context.close
diff --git a/src/lib/components/modals/SortModal.svelte b/src/lib/components/modals/SortModal.svelte
index 9d4b1fe3..6830ffc2 100644
--- a/src/lib/components/modals/SortModal.svelte
+++ b/src/lib/components/modals/SortModal.svelte
@@ -14,6 +14,7 @@
   import { createDebug } from '$lib/utils/debug.js'
   import type { OnSort } from '$lib/types.js'
   import { onEscape } from '$lib/actions/onEscape.js'
+  import type { Context } from 'svelte-simple-modal'
 
   const debug = createDebug('jsoneditor:SortModal')
 
@@ -22,7 +23,7 @@
   export let rootPath: JSONPath
   export let onSort: OnSort
 
-  const { close } = getContext('simple-modal')
+  const { close } = getContext<Context>('simple-modal')
 
   const stateId = `${id}:${compileJSONPointer(rootPath)}`
   const selectedJson = getIn(json, rootPath)
diff --git a/src/lib/components/modals/TransformModal.svelte b/src/lib/components/modals/TransformModal.svelte
index 2df75a71..214a7afc 100644
--- a/src/lib/components/modals/TransformModal.svelte
+++ b/src/lib/components/modals/TransformModal.svelte
@@ -24,9 +24,11 @@
     OnClassName,
     OnPatch,
     OnRenderValue,
-    QueryLanguage
+    QueryLanguage,
+    QueryLanguageOptions
   } from '$lib/types.js'
   import { onEscape } from '$lib/actions/onEscape.js'
+  import type { Context } from 'svelte-simple-modal'
 
   const debug = createDebug('jsoneditor:TransformModal')
 
@@ -54,7 +56,7 @@
   $: selectedJson = getIn(json, rootPath)
   $: selectedContent = { json: selectedJson }
 
-  const { close } = getContext('simple-modal')
+  const { close } = getContext<Context>('simple-modal')
 
   const stateId = `${id}:${compileJSONPointer(rootPath)}`
 
@@ -78,7 +80,7 @@
     return queryLanguages.find((item) => item.id === queryLanguageId) || queryLanguages[0]
   }
 
-  function updateQueryByWizard(newQueryOptions) {
+  function updateQueryByWizard(newQueryOptions: QueryLanguageOptions) {
     queryOptions = newQueryOptions
     query = getSelectedQueryLanguage(queryLanguageId).createQuery(json, newQueryOptions)
     isManual = false
@@ -107,7 +109,7 @@
       previewError = undefined
     } catch (err) {
       previewContent = { text: '' }
-      previewError = err.toString()
+      previewError = String(err)
     }
   }
 
@@ -153,7 +155,7 @@
       // button when creating a preview was successful
       console.error(err)
       previewContent = { text: '' }
-      previewError = err.toString()
+      previewError = String(err)
     }
   }
 
diff --git a/src/lib/components/modals/TransformModalHeader.svelte b/src/lib/components/modals/TransformModalHeader.svelte
index 9a6ab7bb..4f881546 100644
--- a/src/lib/components/modals/TransformModalHeader.svelte
+++ b/src/lib/components/modals/TransformModalHeader.svelte
@@ -5,7 +5,8 @@
   import Icon from 'svelte-awesome'
   import { faCog, faTimes } from '@fortawesome/free-solid-svg-icons'
   import SelectQueryLanguage from '../controls/selectQueryLanguage/SelectQueryLanguage.svelte'
-  import type { OnChangeQueryLanguage, QueryLanguage } from '$lib/types.js'
+  import type { AbsolutePopupContext, OnChangeQueryLanguage, QueryLanguage } from '$lib/types.js'
+  import type { Context } from 'svelte-simple-modal'
 
   export let queryLanguages: QueryLanguage[]
   export let queryLanguageId: string
@@ -14,14 +15,15 @@
   let refConfigButton: HTMLButtonElement | undefined
   let popupId: number | undefined
 
-  const { close } = getContext('simple-modal')
-  const { openAbsolutePopup, closeAbsolutePopup } = getContext('absolute-popup')
+  const { close } = getContext<Context>('simple-modal')
+  const { openAbsolutePopup, closeAbsolutePopup } =
+    getContext<AbsolutePopupContext>('absolute-popup')
 
   function openConfig() {
     const props = {
       queryLanguages,
       queryLanguageId,
-      onChangeQueryLanguage: (selectedQueryLanguage) => {
+      onChangeQueryLanguage: (selectedQueryLanguage: QueryLanguage) => {
         closeAbsolutePopup(popupId)
         onChangeQueryLanguage(selectedQueryLanguage)
       }
@@ -50,7 +52,7 @@
       <Icon data={faCog} />
     </button>
   {/if}
-  <button type="button" class="jse-close" on:click={close}>
+  <button type="button" class="jse-close" on:click={() => close()}>
     <Icon data={faTimes} />
   </button>
 </div>
diff --git a/src/lib/components/modals/popup/AbsolutePopup.svelte b/src/lib/components/modals/popup/AbsolutePopup.svelte
index bd6d3952..7746c55e 100644
--- a/src/lib/components/modals/popup/AbsolutePopup.svelte
+++ b/src/lib/components/modals/popup/AbsolutePopup.svelte
@@ -3,7 +3,7 @@
 <script lang="ts">
   import { createDebug } from '$lib/utils/debug.js'
   import { setContext, SvelteComponent } from 'svelte'
-  import type { AbsolutePopupOptions, PopupEntry } from '$lib/types'
+  import type { AbsolutePopupOptions, PopupEntry, AbsolutePopupContext } from '$lib/types'
   import { uniqueId } from '$lib/utils/uniqueId.js'
   import AbsolutePopupEntry from './AbsolutePopupEntry.svelte'
 
@@ -45,7 +45,7 @@
 
   $: debug('popups', popups)
 
-  setContext('absolute-popup', { openAbsolutePopup, closeAbsolutePopup })
+  setContext<AbsolutePopupContext>('absolute-popup', { openAbsolutePopup, closeAbsolutePopup })
 </script>
 
 {#each popups as popup}
diff --git a/src/lib/components/modals/transformModalState.ts b/src/lib/components/modals/transformModalState.ts
index 598dcd61..8e7686cf 100644
--- a/src/lib/components/modals/transformModalState.ts
+++ b/src/lib/components/modals/transformModalState.ts
@@ -1 +1,10 @@
-export const transformModalState: Record<string, unknown> = {}
+import type { QueryLanguageOptions } from '$lib/types.js'
+
+export interface ModalState {
+  queryLanguageId: string
+  queryOptions: QueryLanguageOptions
+  query: string
+  isManual: boolean
+}
+
+export const transformModalState: Record<string, ModalState> = {}
diff --git a/src/lib/components/modes/tablemode/TableMode.svelte b/src/lib/components/modes/tablemode/TableMode.svelte
index f51b46a1..201edd41 100644
--- a/src/lib/components/modes/tablemode/TableMode.svelte
+++ b/src/lib/components/modes/tablemode/TableMode.svelte
@@ -2,6 +2,7 @@
 
 <script lang="ts">
   import type {
+    AbsolutePopupContext,
     AbsolutePopupOptions,
     AfterPatchCallback,
     Content,
@@ -135,10 +136,12 @@
   import TableModeWelcome from './TableModeWelcome.svelte'
   import JSONPreview from '../../controls/JSONPreview.svelte'
   import RefreshColumnHeader from './RefreshColumnHeader.svelte'
+  import type { Context } from 'svelte-simple-modal'
 
   const debug = createDebug('jsoneditor:TableMode')
-  const { open } = getContext('simple-modal')
-  const { openAbsolutePopup, closeAbsolutePopup } = getContext('absolute-popup')
+  const { open } = getContext<Context>('simple-modal')
+  const { openAbsolutePopup, closeAbsolutePopup } =
+    getContext<AbsolutePopupContext>('absolute-popup')
   const jump = createJump()
   const sortModalId = uniqueId()
   const transformModalId = uniqueId()
diff --git a/src/lib/components/modes/textmode/TextMode.svelte b/src/lib/components/modes/textmode/TextMode.svelte
index a19f6ecf..d6d18c63 100644
--- a/src/lib/components/modes/textmode/TextMode.svelte
+++ b/src/lib/components/modes/textmode/TextMode.svelte
@@ -150,9 +150,9 @@
   const isSSR = typeof window === 'undefined'
   debug('isSSR:', isSSR)
 
-  let codeMirrorRef
-  let codeMirrorView
-  let domTextMode
+  let codeMirrorRef: HTMLDivElement
+  let domTextMode: HTMLDivElement
+  let codeMirrorView: EditorView
   let editorState: EditorState
 
   let onChangeDisabled = false
@@ -457,10 +457,7 @@
     onChangeCodeMirrorValue()
   }
 
-  /**
-   * @param {ValidationError} validationError
-   **/
-  function handleSelectValidationError(validationError) {
+  function handleSelectValidationError(validationError: ValidationError) {
     debug('select validation error', validationError)
 
     const richValidationError = toRichValidationError(validationError)
@@ -486,11 +483,7 @@
     focus()
   }
 
-  /**
-   * @param {number} anchor
-   * @param {number} head
-   **/
-  function setSelection(anchor, head) {
+  function setSelection(anchor: number, head: number) {
     debug('setSelection', { anchor, head })
 
     if (codeMirrorView) {
@@ -503,7 +496,7 @@
     }
   }
 
-  function handleDoubleClick(event, view) {
+  function handleDoubleClick(event: MouseEvent, view: EditorView) {
     // When the user double-clicked right from a bracket [ or {,
     // select the contents of the array or object
     if (view.state.selection.ranges.length === 1) {
@@ -531,7 +524,17 @@
     return linter(linterCallback, { delay: TEXT_MODE_ONCHANGE_DELAY })
   }
 
-  function createCodeMirrorView({ target, initialText, readOnly, indentation }) {
+  function createCodeMirrorView({
+    target,
+    initialText,
+    readOnly,
+    indentation
+  }: {
+    target: HTMLDivElement
+    initialText: string
+    readOnly: boolean
+    indentation: number | string
+  }): EditorView {
     debug('Create CodeMirror editor', { readOnly, indentation })
 
     const state = EditorState.create({
@@ -707,8 +710,10 @@
     }
   }
 
-  function toCodeMirrorSelection(selection: JSONEditorSelection | null): EditorSelection | null {
-    return isTextSelection(selection) ? EditorSelection.fromJSON(selection) : null
+  function toCodeMirrorSelection(
+    selection: JSONEditorSelection | null
+  ): EditorSelection | undefined {
+    return isTextSelection(selection) ? EditorSelection.fromJSON(selection) : undefined
   }
 
   /**
@@ -759,7 +764,7 @@
     emitOnSelect()
   }
 
-  function updateLinter(validator) {
+  function updateLinter(validator: Validator | null) {
     debug('updateLinter', validator)
 
     if (!codeMirrorView) {
@@ -771,7 +776,7 @@
     })
   }
 
-  function updateIndentation(indentation) {
+  function updateIndentation(indentation: number | string) {
     if (codeMirrorView) {
       debug('updateIndentation', indentation)
 
@@ -791,7 +796,7 @@
     }
   }
 
-  function updateReadOnly(readOnly) {
+  function updateReadOnly(readOnly: boolean) {
     if (codeMirrorView) {
       debug('updateReadOnly', readOnly)
 
diff --git a/src/lib/components/modes/treemode/TreeMode.svelte b/src/lib/components/modes/treemode/TreeMode.svelte
index a0ff4d31..99e765bb 100644
--- a/src/lib/components/modes/treemode/TreeMode.svelte
+++ b/src/lib/components/modes/treemode/TreeMode.svelte
@@ -106,6 +106,7 @@
   import NavigationBar from '../../controls/navigationBar/NavigationBar.svelte'
   import SearchBox from './menu/SearchBox.svelte'
   import type {
+    AbsolutePopupContext,
     AbsolutePopupOptions,
     AfterPatchCallback,
     Content,
@@ -155,17 +156,19 @@
     onRemove
   } from '$lib/logic/actions.js'
   import JSONPreview from '../../controls/JSONPreview.svelte'
+  import type { Context } from 'svelte-simple-modal'
 
   const debug = createDebug('jsoneditor:TreeMode')
 
   const isSSR = typeof window === 'undefined'
   debug('isSSR:', isSSR)
 
-  const { open } = getContext('simple-modal')
+  const { open } = getContext<Context>('simple-modal')
   const sortModalId = uniqueId()
   const transformModalId = uniqueId()
 
-  const { openAbsolutePopup, closeAbsolutePopup } = getContext('absolute-popup')
+  const { openAbsolutePopup, closeAbsolutePopup } =
+    getContext<AbsolutePopupContext>('absolute-popup')
 
   let refContents: HTMLDivElement
   let refHiddenInput: HTMLInputElement
diff --git a/src/lib/components/modes/treemode/ValidationErrorIcon.svelte b/src/lib/components/modes/treemode/ValidationErrorIcon.svelte
index 22bf1141..b5ea1d20 100644
--- a/src/lib/components/modes/treemode/ValidationErrorIcon.svelte
+++ b/src/lib/components/modes/treemode/ValidationErrorIcon.svelte
@@ -3,9 +3,9 @@
   import Icon from 'svelte-awesome'
   import { getContext } from 'svelte'
   import { tooltip } from '../../controls/tooltip/tooltip.js'
-  import type { ValidationError } from '$lib/types.js'
+  import type { AbsolutePopupContext, ValidationError } from '$lib/types.js'
 
-  const absolutePopupContext = getContext('absolute-popup')
+  const absolutePopupContext = getContext<AbsolutePopupContext>('absolute-popup')
 
   export let validationError: ValidationError
   export let onExpand: (event: Event) => void
diff --git a/src/lib/plugins/value/components/ColorPicker.svelte b/src/lib/plugins/value/components/ColorPicker.svelte
index cc9da639..18c6b59c 100644
--- a/src/lib/plugins/value/components/ColorPicker.svelte
+++ b/src/lib/plugins/value/components/ColorPicker.svelte
@@ -7,9 +7,9 @@
   import { compileJSONPointer } from 'immutable-json-patch'
   import { getContext } from 'svelte'
   import ColorPickerPopup from '../../../components/controls/ColorPickerPopup.svelte'
-  import type { OnPatch } from '$lib/types.js'
+  import type { AbsolutePopupContext, OnPatch } from '$lib/types.js'
 
-  const { openAbsolutePopup } = getContext('absolute-popup')
+  const { openAbsolutePopup } = getContext<AbsolutePopupContext>('absolute-popup')
 
   export let path: JSONPath
   export let value: string
@@ -35,7 +35,7 @@
     focus()
   }
 
-  function openColorPicker(event) {
+  function openColorPicker(event: MouseEvent) {
     if (readOnly) {
       return
     }
diff --git a/src/lib/plugins/value/components/TimestampTag.svelte b/src/lib/plugins/value/components/TimestampTag.svelte
index 256a40d7..7171d98c 100644
--- a/src/lib/plugins/value/components/TimestampTag.svelte
+++ b/src/lib/plugins/value/components/TimestampTag.svelte
@@ -5,8 +5,9 @@
   import { faClock } from '@fortawesome/free-regular-svg-icons'
   import { getContext } from 'svelte'
   import { tooltip } from '$lib/components/controls/tooltip/tooltip.js'
+  import type { AbsolutePopupContext } from '$lib/types'
 
-  const absolutePopupContext = getContext('absolute-popup')
+  const absolutePopupContext = getContext<AbsolutePopupContext>('absolute-popup')
 
   export let value: number
 
diff --git a/src/lib/types.ts b/src/lib/types.ts
index fcb2ea8c..98109793 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -378,6 +378,15 @@ export interface AbsolutePopupOptions {
   onClose?: () => void
 }
 
+export interface AbsolutePopupContext {
+  openAbsolutePopup: (
+    component: typeof SvelteComponent,
+    props: Record<string, unknown>,
+    options: AbsolutePopupOptions
+  ) => number
+  closeAbsolutePopup: (popupId: number | undefined) => void
+}
+
 export interface JSONEditorPropsOptional {
   content?: Content
   readOnly?: boolean