chore: fix TypeScript issues

src/lib/assets/jump.js/src/jump.ts

@@ -116,7 +116,7 @@ export const createJump = () => {
 
   // API
 
-  function jump(target: Element, options: JumpOptions = {}) {
+  function jump(target: Element | number | string, options: JumpOptions = {}) {
     // resolve options, or use defaults
     duration = 1000
     offset = options.offset || 0

src/lib/components/JSONEditor.svelte

@@ -57,6 +57,7 @@
   import memoizeOne from 'memoize-one'
   import type { Callbacks, Component } from 'svelte-simple-modal/types/Modal.svelte'
   import ModalRef from '../components/modals/ModalRef.svelte'
+  import type { Open } from 'svelte-simple-modal/types/Modal.svelte.js'
 
   // TODO: document how to enable debugging in the readme: localStorage.debug="jsoneditor:*", then reload
   const debug = createDebug('jsoneditor:JSONEditor')
@@ -103,7 +104,7 @@
   let instanceId = uniqueId()
   let hasFocus = false
   let refJSONEditorRoot: JSONEditorRoot
-  let open // svelte-simple-modal context open(...)
+  let open: Open // svelte-simple-modal context open(...)
   let jsoneditorModalState: {
     component: Component
     callbacks: Partial<Callbacks>
@@ -260,12 +261,16 @@
   }
 
   export async function updateProps(props: JSONEditorPropsOptional): Promise<void> {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     this.$set(props)
 
     await tick() // await rerender
   }
 
   export async function destroy() {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     this.$destroy()
 
     await tick() // await destroying

src/lib/components/modals/SortModal.svelte

@@ -8,7 +8,7 @@
   import { getNestedPaths } from '$lib/utils/arrayUtils.js'
   import { pathToOption, stringifyJSONPath } from '../../utils/pathUtils.js'
   import { sortJson } from '$lib/logic/sort.js'
-  import { sortModalState } from './sortModalState.js'
+  import { sortModalStates } from './sortModalStates'
   import type { JSONPath, JSONValue } from 'immutable-json-patch'
   import { compileJSONPointer, getIn } from 'immutable-json-patch'
   import { createDebug } from '$lib/utils/debug.js'
@@ -41,42 +41,33 @@
   }
   const directions = [asc, desc]
 
-  let selectedProperty =
-    (sortModalState[stateId] && sortModalState[stateId].selectedProperty) || undefined
-  let selectedDirection =
-    (sortModalState[stateId] && sortModalState[stateId].selectedDirection) || asc
+  let selectedProperty = sortModalStates[stateId]?.selectedProperty
+  let selectedDirection = sortModalStates[stateId]?.selectedDirection || asc
   let sortError: string | undefined = undefined
 
-  $: {
-    // if there is only one option, select it and do not render the select box
-    if (selectedProperty === undefined && properties && properties.length === 1) {
-      selectedProperty = properties[0]
-    }
-  }
-
   $: {
     // remember the selected values for the next time we open the SortModal
     // just in memory, not persisted
-    sortModalState[stateId] = {
+    sortModalStates[stateId] = {
       selectedProperty,
       selectedDirection
     }
 
-    debug('store state in memory', stateId, sortModalState[stateId])
+    debug('store state in memory', stateId, sortModalStates[stateId])
   }
 
   function handleSort() {
     try {
       sortError = undefined
 
-      const itemPath: JSONPath | undefined = selectedProperty?.value
+      const itemPath: JSONPath = selectedProperty?.value || properties?.[0]?.value || []
       const direction = selectedDirection?.value
       const operations = sortJson(json, rootPath, itemPath, direction)
       onSort({ operations, rootPath, itemPath, direction })
 
       close()
     } catch (err) {
-      sortError = err.toString()
+      sortError = String(err)
     }
   }
 
@@ -107,7 +98,7 @@
             />
           </td>
         </tr>
-        {#if jsonIsArray && (properties.length > 1 || selectedProperty === undefined)}
+        {#if jsonIsArray && ((properties && properties?.length > 1) || selectedProperty === undefined)}
           <tr>
             <th>Property</th>
             <td>
@@ -143,7 +134,7 @@
         class="jse-primary"
         on:click={handleSort}
         use:focus
-        disabled={jsonIsArray ? !selectedProperty : false}
+        disabled={jsonIsArray && (properties && properties?.length > 1) ? !selectedProperty : false}
       >
         Sort
       </button>

src/lib/components/modals/TransformModal.svelte

@@ -10,7 +10,7 @@
   import type { JSONPath, JSONValue } from 'immutable-json-patch'
   import { compileJSONPointer, getIn } from 'immutable-json-patch'
   import { stringifyJSONPath } from '$lib/utils/pathUtils.js'
-  import { transformModalState } from './transformModalState.js'
+  import { transformModalStates, transformModalStateShared } from './transformModalStates.js'
   import TransformWizard from './TransformWizard.svelte'
   import TransformModalHeader from './TransformModalHeader.svelte'
   import AbsolutePopup from './popup/AbsolutePopup.svelte'
@@ -53,18 +53,20 @@
 
   export let onTransform: OnPatch
 
+  let selectedJson: JSONValue | undefined
   $: selectedJson = getIn(json, rootPath)
-  $: selectedContent = { json: selectedJson }
+  let selectedContent: Content
+  $: selectedContent = selectedJson ? { json: selectedJson } : { text: '' }
 
   const { close } = getContext<Context>('simple-modal')
 
   const stateId = `${id}:${compileJSONPointer(rootPath)}`
 
-  const state = transformModalState[stateId] || {}
+  const state = transformModalStates[stateId] || {}
 
   // showWizard is not stored inside a stateId
-  let showWizard = transformModalState.showWizard !== false
-  let showOriginal = transformModalState.showOriginal !== false
+  let showWizard = transformModalStateShared.showWizard !== false
+  let showOriginal = transformModalStateShared.showOriginal !== false
 
   let queryOptions = state.queryOptions || {}
   let query =
@@ -88,17 +90,24 @@
     debug('updateQueryByWizard', { queryOptions, query, isManual })
   }
 
-  function handleChangeQuery(event) {
-    query = event.target.value
+  function handleChangeQuery(event: Event) {
+    query = (event.target as HTMLTextAreaElement).value
     isManual = true
     debug('handleChangeQuery', { query, isManual })
   }
 
-  function previewTransform(json: JSONValue, query: string) {
+  function previewTransform(json: JSONValue | undefined, query: string) {
+    if (json === undefined) {
+      previewContent = { text: '' }
+      previewError = 'Error: No JSON'
+      return
+    }
+
     try {
       debug('previewTransform', {
         query
       })
+
       const jsonTransformed = getSelectedQueryLanguage(queryLanguageId).executeQuery(
         json,
         query,
@@ -122,17 +131,23 @@
   $: {
     // remember the selected values for the next time we open the SortModal
     // just in memory, not persisted
-    transformModalState[stateId] = {
+    transformModalStates[stateId] = {
       queryOptions,
       query,
       queryLanguageId,
       isManual
     }
 
-    debug('store state in memory', stateId, transformModalState[stateId])
+    debug('store state in memory', stateId, transformModalStates[stateId])
   }
 
   function handleTransform() {
+    if (selectedJson === undefined) {
+      previewContent = { text: '' }
+      previewError = 'Error: No JSON'
+      return
+    }
+
     try {
       debug('handleTransform', { query })
       const jsonTransformed = getSelectedQueryLanguage(queryLanguageId).executeQuery(
@@ -163,14 +178,14 @@
     showWizard = !showWizard
 
     // not stored inside a stateId
-    transformModalState.showWizard = showWizard
+    transformModalStateShared.showWizard = showWizard
   }
 
   function toggleShowOriginal() {
     showOriginal = !showOriginal
 
     // not stored inside a stateId
-    transformModalState.showOriginal = showOriginal
+    transformModalStateShared.showOriginal = showOriginal
   }
 
   function focus(element: HTMLElement) {
@@ -236,12 +251,9 @@
           <div class="jse-label">
             <div class="jse-label-inner">Query</div>
           </div>
-          <textarea
-            class="jse-query"
-            spellcheck="false"
-            value={query}
-            on:input={handleChangeQuery}
-          />
+          <textarea class="jse-query" spellcheck="false" on:input={handleChangeQuery}
+            >{query}</textarea
+          >
         </div>
         <div class="jse-data-contents" class:jse-hide-original-data={!showOriginal}>
           <div class="jse-original-data" class:jse-hide={!showOriginal}>
@@ -266,7 +278,7 @@
                 {parser}
                 {parseMemoizeOne}
                 {onRenderValue}
-                onRenderMenu={noop}
+                onRenderMenu={() => undefined}
                 onError={console.error}
                 onChange={noop}
                 onChangeMode={noop}
@@ -300,7 +312,7 @@
                 {parser}
                 {parseMemoizeOne}
                 {onRenderValue}
-                onRenderMenu={noop}
+                onRenderMenu={() => undefined}
                 onError={console.error}
                 onChange={noop}
                 onChangeMode={noop}

src/lib/components/modals/sortModalStates.ts

@@ -0,0 +1,8 @@
+import type { NumberOption, PathOption } from '$lib/types.js'
+
+export interface SortModalState {
+  selectedProperty: PathOption
+  selectedDirection: NumberOption
+}
+
+export const sortModalStates: Record<string, SortModalState> = {}

src/lib/components/modals/transformModalStates.ts

@@ -0,0 +1,20 @@
+import type { QueryLanguageOptions } from '$lib/types.js'
+
+export interface TransformModalState {
+  queryLanguageId: string
+  queryOptions: QueryLanguageOptions
+  query: string
+  isManual: boolean
+}
+
+export const transformModalStates: Record<string, TransformModalState> = {}
+
+export interface TransformModalStateShared {
+  showWizard: boolean
+  showOriginal: boolean
+}
+
+export const transformModalStateShared: TransformModalStateShared = {
+  showWizard: true,
+  showOriginal: true
+}

src/lib/components/modes/JSONEditorRoot.svelte

@@ -79,7 +79,7 @@
       // check for 'code' mode is here for backward compatibility (deprecated since v0.4.0)
       className:
         'jse-group-button jse-first' +
-        (mode === Mode.text || mode === 'code' ? ' jse-selected' : ''),
+        (mode === Mode.text || (mode as string) === 'code' ? ' jse-selected' : ''),
       onClick: () => onChangeMode(Mode.text)
     },
     {
@@ -127,6 +127,8 @@
     if (refTextMode) {
       return refTextMode.patch(operations)
     }
+
+    throw new Error(`Method patch is not available in mode "${mode}"`)
   }
 
   export function expand(callback?: OnExpand): void {

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

@@ -1017,7 +1017,7 @@
     return false
   }
 
-  function handleContextMenuFromTableMenu(event) {
+  function handleContextMenuFromTableMenu(event: Event) {
     if (readOnly) {
       return
     }
@@ -1769,7 +1769,7 @@
               {#if showRefreshButton}
                 <th class="jse-table-cell jse-table-cell-header">
                   <RefreshColumnHeader
-                    count={json.length}
+                    count={Array.isArray(json) ? json.length : 0}
                     {maxSampleCount}
                     onRefresh={() => (maxSampleCount = Infinity)}
                   />
@@ -1867,6 +1867,7 @@
             {
               icon: faWrench,
               text: 'Paste as JSON instead',
+              title: 'Paste the text as JSON instead of a single value',
               // We use mousedown here instead of click: this message pops up
               // whilst the user is editing a value. When clicking this button,
               // the actual value is applied and the event is not propagated
@@ -1875,6 +1876,7 @@
             },
             {
               text: 'Leave as is',
+              title: 'Keep the pasted content as a single value',
               onClick: handleClearPastedJson
             }
           ]}
@@ -1894,11 +1896,13 @@
                 {
                   icon: faCheck,
                   text: 'Ok',
+                  title: 'Accept the repaired document',
                   onClick: acceptAutoRepair
                 },
                 {
                   icon: faCode,
                   text: 'Repair manually instead',
+                  title: 'Leave the document unchanged and repair it manually instead',
                   onClick: handleRequestRepair
                 }
               ]
@@ -1917,6 +1921,7 @@
               {
                 icon: faCode,
                 text: 'Repair manually',
+                title: 'Open the document in "code" mode and repair it manually',
                 onClick: handleRequestRepair
               }
             ]