fix: typescript issues

src/lib/components/modes/treemode/JSONValue.svelte

@@ -2,9 +2,9 @@
 
 <script lang="ts">
   import type { JSONEditorContext, JSONSelection, SearchResultItem } from '$lib/types.js'
-  import { isSvelteActionRenderer } from '$lib/typeguards.js'
   import type { JSONPath } from 'immutable-json-patch'
   import { isEditingSelection, isValueSelection } from '$lib/logic/selection.js'
+  import { isSvelteActionRenderer } from '$lib/typeguards.js'
 
   export let path: JSONPath
   export let value: unknown

src/lib/types.ts

@@ -550,7 +550,7 @@ export interface SvelteComponentRenderer {
 }
 
 export interface SvelteActionRenderer {
-  action: Action
+  action: Action<HTMLElement, Record<string, unknown>>
   props: Record<string, unknown>
 }
 

src/routes/components/EvaluatorAction.ts

@@ -1,22 +1,22 @@
-import { createValueSelection, type OnSelect } from 'svelte-jsoneditor'
+import { createValueSelection, type OnJSONSelect } from 'svelte-jsoneditor'
 import type { Action } from 'svelte/action'
-import type { JSONPath } from 'immutable-json-patch'
+import { type JSONPath } from 'immutable-json-patch'
 
-export interface EvaluatorProps {
+export interface EvaluatorActionProps {
   value: unknown
   path: JSONPath
   readOnly: boolean
-  onSelect: OnSelect
+  onSelect: OnJSONSelect
 }
 
-export const EvaluatorAction: Action<HTMLDivElement, EvaluatorProps> = (node, props) => {
-  function evaluate(expr: string) {
-    const result = expr
-      .split('+')
-      .map((value) => parseFloat(value.trim()))
-      .reduce((a, b) => a + b)
+export const EvaluatorAction: Action<HTMLDivElement, Record<string, unknown>> = (
+  node,
+  initialProps
+) => {
+  let props = toEvaluatorProps(initialProps)
 
-    return `The result of "${expr}" is "${result}" (double-click to edit)`
+  function updateResult() {
+    node.innerText = evaluate(String(props.value))
   }
 
   function handleValueDoubleClick(event: MouseEvent) {
@@ -30,14 +30,29 @@ export const EvaluatorAction: Action<HTMLDivElement, EvaluatorProps> = (node, pr
   }
 
   node.addEventListener('dblclick', handleValueDoubleClick)
-  node.innerText = evaluate(String(props.value))
+  updateResult()
 
   return {
-    update: (props) => {
-      node.innerText = evaluate(String(props.value))
+    update: (updatedProps) => {
+      props = toEvaluatorProps(updatedProps)
+      updateResult()
     },
     destroy: () => {
       node.removeEventListener('dblclick', handleValueDoubleClick)
     }
   }
 }
+
+function evaluate(expr: string) {
+  const result = expr
+    .split('+')
+    .map((value) => parseFloat(value.trim()))
+    .reduce((a, b) => a + b)
+
+  return `The result of "${expr}" is "${result}" (double-click to edit)`
+}
+
+function toEvaluatorProps(props: Record<string, unknown>): EvaluatorActionProps {
+  // you can add validations and typeguards here if needed
+  return props as unknown as EvaluatorActionProps
+}

src/routes/examples/custom_value_renderer/+page.svelte

@@ -1,7 +1,13 @@
-<script>
-  import { EnumValue, JSONEditor, renderValue } from 'svelte-jsoneditor'
+<script lang="ts">
+  import {
+    EnumValue,
+    JSONEditor,
+    renderValue,
+    type RenderValueComponentDescription,
+    type RenderValueProps
+  } from 'svelte-jsoneditor'
   import ReadonlyPassword from '../../components/ReadonlyPassword.svelte'
-  import { EvaluatorAction } from '../../components/EvaluatorAction.ts'
+  import { EvaluatorAction } from '../../components/EvaluatorAction'
 
   let content = {
     text: undefined, // can be used to pass a stringified JSON document instead
@@ -20,7 +26,7 @@
     { value: 'other', text: 'Other' }
   ]
 
-  function onRenderValue(props) {
+  function onRenderValue(props: RenderValueProps): RenderValueComponentDescription[] {
     const { path, value, readOnly, parser, isEditing, selection, onSelect, onPatch } = props
 
     const key = props.path[props.path.length - 1]