Update options project to Svelte 5

Author: msmolens

src/options/Options.svelte

@@ -122,7 +122,7 @@
         <input
           type="checkbox"
           bind:checked={options.openInNewTab}
-          on:change={handleCheckboxChange}
+          onchange={handleCheckboxChange}
           data-option-name="openInNewTab" />
         {strings.openInNewTab}
       </label>
@@ -133,7 +133,7 @@
         <input
           type="checkbox"
           bind:checked={options.truncate}
-          on:change={handleCheckboxChange}
+          onchange={handleCheckboxChange}
           data-option-name="truncate" />
         {strings.truncate}
       </label>
@@ -143,7 +143,7 @@
         <input
           type="checkbox"
           bind:checked={options.tooltips}
-          on:change={handleCheckboxChange}
+          onchange={handleCheckboxChange}
           data-option-name="tooltips" />
         {strings.tooltips}
       </label>
@@ -153,7 +153,7 @@
         <input
           type="checkbox"
           bind:checked={options.showRecentlyVisited}
-          on:change={handleCheckboxChange}
+          onchange={handleCheckboxChange}
           data-option-name="showRecentlyVisited" />
         {strings.showRecentlyVisited}
       </label>
@@ -169,7 +169,7 @@
             name="colorScheme"
             value="light"
             bind:group={options.colorScheme}
-            on:change={handleRadioChange} />
+            onchange={handleRadioChange} />
           {strings.colorSchemeLight}
         </label>
       </div>
@@ -180,7 +180,7 @@
             name="colorScheme"
             value="dark"
             bind:group={options.colorScheme}
-            on:change={handleRadioChange} />
+            onchange={handleRadioChange} />
           {strings.colorSchemeDark}
         </label>
       </div>

src/options/main.ts

@@ -1,8 +1,10 @@
+import { mount } from 'svelte';
+
 import Options from './Options.svelte';
 
 const target = document.getElementById('app');
 if (!target) {
   throw new Error('Missing app element');
 }
 
-new Options({ target });
+mount(Options, { target });

src/options/vite.config.ts

@@ -2,7 +2,6 @@ import { resolve } from 'path';
 import { type ViteUserConfig, defineProject, mergeConfig } from 'vitest/config';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { svelteTesting } from '@testing-library/svelte/vite';
-import { sveltePreprocess } from 'svelte-preprocess';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { developmentConfig } from '../../vite.common-development.config.js';
 import { getTreetopDistName } from '../../vite.common.config.js';
@@ -12,28 +11,14 @@ const dist = getTreetopDistName();
 // https://vitejs.dev/config/
 export default defineProject(({ mode }) => {
   const commonConfig: ViteUserConfig = {
-    plugins: [
-      tsconfigPaths(),
-      svelte({
-        preprocess: sveltePreprocess(),
-      }),
-      svelteTesting(),
-    ],
+    plugins: [tsconfigPaths(), svelte(), svelteTesting()],
     build: {
       outDir: resolve(__dirname, '../../', dist),
       rollupOptions: {
         input: resolve(__dirname, './options.html'),
       },
     },
     test: {
-      // Work around onMount not being called when running tests
-      // https://github.com/vitest-dev/vitest/issues/2834#issuecomment-1439576110
-      alias: [
-        {
-          find: /^svelte$/,
-          replacement: 'svelte/internal',
-        },
-      ],
       environment: 'jsdom',
       restoreMocks: true,
       setupFiles: [