Update welcome project to Svelte 5

Author: msmolens

src/welcome/InfoBox.svelte

@@ -1,4 +1,13 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title: Snippet;
+    detail1: Snippet;
+    detail2?: Snippet;
+  }
+
+  let { title, detail1, detail2 }: Props = $props();
 </script>
 
 <style>
@@ -27,17 +36,17 @@
 <div class="container">
   <div class="content">
     <div class="title">
-      <slot name="title" />
+      {@render title()}
     </div>
     <hr />
     <div class="detail">
       &bull;
-      <slot name="detail1" />
+      {@render detail1()}
     </div>
-    {#if $$slots.detail2}
+    {#if detail2}
       <div class="detail">
         &bull;
-        <slot name="detail2" />
+        {@render detail2()}
       </div>
     {/if}
   </div>

src/welcome/Welcome.svelte

@@ -6,7 +6,7 @@
 
   import InfoBox from './InfoBox.svelte';
 
-  let ready = false;
+  let ready = $state(false);
 
   onMount(() => {
     ready = true;
@@ -96,39 +96,58 @@
 {#if ready}
   <main transition:fade={{ delay: 400, duration: 300 }}>
     <InfoBox>
-      <span slot="title">Getting started</span>
-      <span slot="detail1">
-        Open Treetop by clicking its icon (<img
-          class="icon"
-          src={icon}
-          alt="Treetop Icon" />) in the toolbar.
-      </span>
-      <span slot="detail2"
-        >Treetop shows all your bookmarks on a single page.</span>
+      {#snippet title()}
+        <span>Getting started</span>
+      {/snippet}
+      {#snippet detail1()}
+        <span>
+          Open Treetop by clicking its icon (<img
+            class="icon"
+            src={icon}
+            alt="Treetop Icon" />) in the toolbar.
+        </span>
+      {/snippet}
+      {#snippet detail2()}
+        <span>Treetop shows all your bookmarks on a single page.</span>
+      {/snippet}
     </InfoBox>
 
     <InfoBox>
-      <span slot="title">Always up-to-date</span>
-      <span slot="detail1">Treetop updates automatically as you browse.</span>
-      <span slot="detail2"
-        >Recently visited bookmarks have a larger font.
-      </span>
+      {#snippet title()}
+        <span>Always up-to-date</span>
+      {/snippet}
+      {#snippet detail1()}
+        <span>Treetop updates automatically as you browse.</span>
+      {/snippet}
+      {#snippet detail2()}
+        <span>Recently visited bookmarks have a larger font. </span>
+      {/snippet}
     </InfoBox>
 
     <InfoBox>
-      <span slot="title">Find and edit your bookmarks</span>
-      <span slot="detail1">Search for bookmarks by name or URL.</span>
-      <span slot="detail2">
-        Right-click to edit or delete bookmarks and folders.
-      </span>
+      {#snippet title()}
+        <span>Find and edit your bookmarks</span>
+      {/snippet}
+      {#snippet detail1()}
+        <span>Search for bookmarks by name or URL.</span>
+      {/snippet}
+      {#snippet detail2()}
+        <span> Right-click to edit or delete bookmarks and folders. </span>
+      {/snippet}
     </InfoBox>
 
     <InfoBox>
-      <span slot="title">Customize</span>
-      <span slot="detail1">
-        Click the Preferences button to customize Treetop's display.
-      </span>
-      <span slot="detail2">Click on a folder to make it the root folder.</span>
+      {#snippet title()}
+        <span>Customize</span>
+      {/snippet}
+      {#snippet detail1()}
+        <span>
+          Click the Preferences button to customize Treetop's display.
+        </span>
+      {/snippet}
+      {#snippet detail2()}
+        <span>Click on a folder to make it the root folder.</span>
+      {/snippet}
     </InfoBox>
   </main>
 {/if}

src/welcome/main.ts

@@ -1,14 +1,15 @@
 // eslint-disable-next-line simple-import-sort/imports
 import 'normalize.css/normalize.css';
 
+import { mount } from 'svelte';
 import Welcome from './Welcome.svelte';
 
 const target = document.getElementById('app');
 if (!target) {
   throw new Error('Missing app element');
 }
 
-new Welcome({
+mount(Welcome, {
   // Play transitions on first render
   intro: true,
   target,

src/welcome/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, './welcome.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: ['../../test/vitest-setup.ts'],