chore: refactor the Welcome components to runes

Author: josdejong

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

@@ -1,5 +1,3 @@
-<svelte:options immutable={true} />
-
 <script lang="ts">
   import type { JSONPath } from 'immutable-json-patch'
   import { getIn, isJSONArray, isJSONObject } from 'immutable-json-patch'
@@ -10,40 +8,56 @@
   import { isEmpty } from 'lodash-es'
   import { stringifyJSONPath } from '$lib/utils/pathUtils.js'
 
-  export let text: string | undefined
-  export let json: unknown | undefined
-  export let readOnly: boolean
-  export let parser: JSONParser
-  export let openJSONEditorModal: (path: JSONPath) => void
-  export let extractPath: (path: JSONPath) => void
-  export let onChangeMode: OnChangeMode
-  export let onClick: () => void
+  interface Props {
+    text: string | undefined
+    json: unknown | undefined
+    readOnly: boolean
+    parser: JSONParser
+    openJSONEditorModal: (path: JSONPath) => void
+    extractPath: (path: JSONPath) => void
+    onChangeMode: OnChangeMode
+    onClick: () => void
+  }
+
+  const {
+    text,
+    json,
+    readOnly,
+    parser,
+    openJSONEditorModal,
+    extractPath,
+    onChangeMode,
+    onClick
+  }: Props = $props()
 
-  let nestedArrayPaths: JSONPath[]
-  $: nestedArrayPaths = json
-    ? findNestedArrays(json)
-        .slice(0, 99)
-        .filter((path) => path.length > 0)
-    : []
-  $: hasNestedArrays = !isEmpty(nestedArrayPaths)
-  $: isEmptyDocument = json === undefined && (text === '' || text === undefined)
+  const nestedArrayPaths: JSONPath[] = $derived(
+    json
+      ? findNestedArrays(json)
+          .slice(0, 99)
+          .filter((path) => path.length > 0)
+      : []
+  )
+  const hasNestedArrays = $derived(!isEmpty(nestedArrayPaths))
+  const isEmptyDocument = $derived(json === undefined && (text === '' || text === undefined))
 
-  $: documentType = hasNestedArrays
-    ? 'Object with nested arrays'
-    : isEmptyDocument
-      ? 'An empty document'
-      : isJSONObject(json)
-        ? 'An object'
-        : isJSONArray(json)
-          ? 'An empty array' // note: can also be an array with objects but without properties
-          : `A ${valueType(json, parser)}`
+  const documentType = $derived(
+    hasNestedArrays
+      ? 'Object with nested arrays'
+      : isEmptyDocument
+        ? 'An empty document'
+        : isJSONObject(json)
+          ? 'An object'
+          : isJSONArray(json)
+            ? 'An empty array' // note: can also be an array with objects but without properties
+            : `A ${valueType(json, parser)}`
+  )
 
   function countItems(nestedArrayPath: JSONPath): number {
     return (getIn(json, nestedArrayPath) as JSONPath).length
   }
 </script>
 
-<div class="jse-table-mode-welcome" on:click={() => onClick()} role="none">
+<div class="jse-table-mode-welcome" onclick={() => onClick()} role="none">
   <div class="jse-space jse-before"></div>
 
   <div class="jse-nested-arrays">
@@ -71,22 +85,22 @@
         <button
           type="button"
           class="jse-nested-array-action"
-          on:click={() => openJSONEditorModal(nestedArrayPath)}
+          onclick={() => openJSONEditorModal(nestedArrayPath)}
         >
           {readOnly ? 'View' : 'Edit'}
         </button>
         {#if !readOnly}
           <button
             type="button"
             class="jse-nested-array-action"
-            on:click={() => extractPath(nestedArrayPath)}
+            onclick={() => extractPath(nestedArrayPath)}
           >
             Extract
           </button>
         {/if}
       </div>
     {/each}
-    <button type="button" class="jse-nested-array-action" on:click={() => onChangeMode(Mode.tree)}>
+    <button type="button" class="jse-nested-array-action" onclick={() => onChangeMode(Mode.tree)}>
       Switch to tree mode
     </button>
   </div>

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

@@ -1,27 +1,37 @@
-<svelte:options immutable={true} />
-
 <script lang="ts">
-  export let readOnly: boolean
-  export let onCreateArray: () => void
-  export let onCreateObject: () => void
-  export let onClick: () => void
+  interface Props {
+    readOnly: boolean
+    onCreateArray: () => void
+    onCreateObject: () => void
+    onClick: () => void
+  }
+
+  const { readOnly, onCreateArray, onCreateObject, onClick }: Props = $props()
+
+  function handleCreateObject(event: MouseEvent) {
+    event.stopPropagation()
+    onCreateObject()
+  }
+
+  function handleCreateArray(event: MouseEvent) {
+    event.stopPropagation()
+    onCreateArray()
+  }
 </script>
 
-<div class="jse-welcome" on:click={() => onClick()} role="none">
+<div class="jse-welcome" onclick={() => onClick()} role="none">
   <div class="jse-space jse-before"></div>
   <div class="jse-contents">
     <div class="jse-welcome-title">Empty document</div>
     {#if !readOnly}
       <div class="jse-welcome-info">
         You can paste clipboard data using <b>Ctrl+V</b>, or use the following options:
       </div>
-      <button
-        title={"Create an empty JSON object (press '{')"}
-        on:click|stopPropagation={() => onCreateObject()}>Create object</button
+      <button title={"Create an empty JSON object (press '{')"} onclick={handleCreateObject}
+        >Create object</button
       >
-      <button
-        title={"Create an empty JSON array (press '[')"}
-        on:click|stopPropagation={() => onCreateArray()}>Create array</button
+      <button title={"Create an empty JSON array (press '[')"} onclick={handleCreateArray}
+        >Create array</button
       >
     {/if}
   </div>