fix: #518 convert all Svelte examples to Svelte 5

Author: josdejong

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

@@ -1,7 +1,7 @@
 <script>
   import { JSONEditor } from 'svelte-jsoneditor'
 
-  let content = {
+  let content = $state({
     text: undefined, // can be used to pass a stringified JSON document instead
     json: {
       array: [1, 2, 3],
@@ -12,7 +12,7 @@
       object: { a: 'b', c: 'd' },
       string: 'Hello World'
     }
-  }
+  })
 
   function handleChange(updatedContent) {
     console.log('contents changed:', updatedContent)

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

@@ -1,7 +1,7 @@
 <script>
   import { JSONEditor } from 'svelte-jsoneditor'
 
-  let content = {
+  let content = $state({
     text: undefined, // can be used to pass a stringified JSON document instead
     json: {
       array: [1, 2, 3],
@@ -12,9 +12,9 @@
       object: { a: 'b', c: 'd' },
       string: 'Hello World'
     }
-  }
+  })
 
-  $: console.log('contents changed:', content)
+  $inspect('content', content)
 </script>
 
 <svelte:head>

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

@@ -7,7 +7,7 @@
   } from 'svelte-jsoneditor'
   import { faCalculator } from '@fortawesome/free-solid-svg-icons'
 
-  let content = {
+  let content = $state({
     text: undefined, // can be used to pass a stringified JSON document instead
     json: {
       array: [1, 2, 3],
@@ -18,7 +18,7 @@
       object: { a: 'b', c: 'd' },
       string: 'Hello World'
     }
-  }
+  })
 
   function handleCalculateSize() {
     const size = toTextContent(content).text.length

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

@@ -1,7 +1,7 @@
 <script>
   import { JSONEditor } from 'svelte-jsoneditor'
 
-  let content = {
+  let content = $state({
     text: undefined, // can be used to pass a stringified JSON document instead
     json: {
       array: [1, 2, 3],
@@ -12,7 +12,7 @@
       object: { a: 'b', c: 'd' },
       string: 'Hello World'
     }
-  }
+  })
 
   function handleClassName(path, value) {
     if (JSON.stringify(path) === '["object","c"]' || JSON.stringify(path) === '["string"]') {

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

@@ -4,7 +4,7 @@
 
   const LosslessJSONParser = { parse, stringify }
 
-  let content = {
+  let content = $state({
     text: `{
   "using": "Lossless JSON Parser",
   "formatted number": 4.0,
@@ -13,9 +13,9 @@
   "small": 1e-500
 }`,
     json: undefined
-  }
+  })
 
-  $: console.log('contents changed:', content)
+  $inspect('content', content)
 </script>
 
 <svelte:head>

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

@@ -9,7 +9,7 @@
   import { faCopy } from '@fortawesome/free-regular-svg-icons'
   import copyToClipboard from '$lib/utils/copyToClipboard.js'
 
-  let content = {
+  let content = $state({
     text: undefined, // can be used to pass a stringified JSON document instead
     json: {
       array: [1, 2, 3],
@@ -20,7 +20,7 @@
       object: { a: 'b', c: 'd' },
       string: 'Hello World'
     }
-  }
+  })
 
   async function handleCopy() {
     console.log('Custom copy button clicked')

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

@@ -1,12 +1,12 @@
 <script>
   import { JSONEditor } from 'svelte-jsoneditor'
 
-  let content = {
+  let content = $state({
     text: undefined, // can be used to pass a stringified JSON document instead
     json: {
       string: 'Hello custom theme color :)'
     }
-  }
+  })
 </script>
 
 <svelte:head>

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

@@ -81,7 +81,7 @@
     return errors
   }
 
-  let content = {
+  let content = $state({
     text: undefined, // can be used to pass a stringified JSON document instead
     json: {
       team: [
@@ -98,7 +98,7 @@
         }
       ]
     }
-  }
+  })
 </script>
 
 <svelte:head>

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

@@ -9,15 +9,15 @@
   import ReadonlyPassword from '../../components/ReadonlyPassword.svelte'
   import { EvaluatorAction } from '../../components/EvaluatorAction'
 
-  let content = {
+  let content = $state({
     text: undefined, // can be used to pass a stringified JSON document instead
     json: {
       username: 'John',
       password: 'secret...',
       gender: 'male',
       evaluate: '2 + 3'
     }
-  }
+  })
 
   const genderOptions = [
     { value: null, text: '-' },

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

@@ -7,7 +7,7 @@
   } from 'svelte-jsoneditor'
   import EditableValueInput from '../../components/EditableValueInput.svelte'
 
-  let content = {
+  let content = $state({
     text: undefined, // can be used to pass a stringified JSON document instead
     json: {
       array: [1, 2, 3],
@@ -18,7 +18,7 @@
       object: { a: 'b', c: 'd' },
       string: 'Hello World'
     }
-  }
+  })
 
   function onRenderValue(props: RenderValueProps): RenderValueComponentDescription[] {
     if (props.isEditing && !props.readOnly) {

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

@@ -80,7 +80,7 @@
     return renderJSONSchemaEnum(props, schema, schemaDefinitions) || renderValue(props)
   }
 
-  let content = {
+  let content = $state({
     text: undefined, // can be used to pass a stringified JSON document instead
     json: {
       firstName: 'John',
@@ -94,7 +94,7 @@
         salary: 100
       }
     }
-  }
+  })
 </script>
 
 <svelte:head>

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

@@ -13,10 +13,10 @@
     { value: 'jse-font-large', label: 'large' }
   ]
 
-  let selectedTheme = themes[1].value
-  let selectedFontSize = fontSizes[1].value
+  let selectedTheme = $state(themes[1].value)
+  let selectedFontSize = $state(fontSizes[1].value)
 
-  let content = {
+  let content = $state({
     text: undefined, // can be used to pass a stringified JSON document instead
     json: {
       array: [1, 2, 3],
@@ -27,7 +27,7 @@
       object: { a: 'b', c: 'd' },
       string: 'Hello World'
     }
-  }
+  })
 
   let editorRef
   function refresh() {
@@ -36,7 +36,7 @@
     editorRef?.refresh()
   }
 
-  $: console.log('contents changed:', content)
+  $inspect('content', content)
 </script>
 
 <svelte:head>
@@ -49,15 +49,15 @@
   <p>You can customize the styling of the editor using CSS variables</p>
 
   <p>
-    Theme: <select bind:value={selectedTheme} on:change={refresh}>
+    Theme: <select bind:value={selectedTheme} onchange={refresh}>
       {#each themes as theme}
         <option value={theme.value}>{theme.label}</option>
       {/each}
     </select>
   </p>
   <p>
     Font size:
-    <select bind:value={selectedFontSize} on:change={refresh}>
+    <select bind:value={selectedFontSize} onchange={refresh}>
       {#each fontSizes as fontSize}
         <option value={fontSize.value}>{fontSize.label}</option>
       {/each}

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

@@ -3,7 +3,7 @@
 
   let refJsonEditor
 
-  let content = {
+  let content = $state({
     text: undefined, // can be used to pass a stringified JSON document instead
     json: {
       array: [1, 2, 3],
@@ -14,7 +14,7 @@
       object: { a: 'b', c: 'd' },
       string: 'Hello World'
     }
-  }
+  })
 
   function expandAll() {
     refJsonEditor.expand([], () => true)
@@ -33,8 +33,8 @@
 <p>You can call methods on the editor by creating a reference to the editor instance.</p>
 
 <p>
-  <button type="button" on:click={expandAll}>Expand All</button>
-  <button type="button" on:click={collapseAll}>Collapse All</button>
+  <button type="button" onclick={expandAll}>Expand All</button>
+  <button type="button" onclick={collapseAll}>Collapse All</button>
 </p>
 
 <div class="editor">