Upgraded page and component to Svelte 5

package.json

@@ -44,19 +44,19 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^3.0.2",
-		"@sveltejs/kit": "^2.5.7",
-		"@sveltejs/package": "^2.3.1",
-		"@sveltejs/vite-plugin-svelte": "^3.1.0",
+		"@sveltejs/kit": "^2.5.27",
+		"@sveltejs/package": "^2.3.7",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tailwindcss/forms": "^0.5.7",
 		"autoprefixer": "^10.4.19",
 		"postcss": "^8.4.38",
 		"publint": "^0.2.7",
-		"svelte": "^4.2.15",
-		"svelte-check": "^3.7.1",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
 		"tailwindcss": "^3.4.3",
 		"tslib": "^2.6.2",
-		"typescript": "^5.4.5",
-		"vite": "^5.2.11"
+		"typescript": "^5.5.0",
+		"vite": "^5.4.4"
 	},
 	"peerDependencies": {
 		"svelte": "^3.59.1 || ^4.0.0 || ^5.0.0"

src/lib/Transition.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	import type { Readable } from 'svelte/store'
 
 	// unique key for context
@@ -24,7 +24,7 @@
 		return classes ? classes.split(' ').filter(x => x) : []
 	}
 
-	// to wait until css changes have been appplied we use a double rAF
+	// to wait until css changes have been applied we use a double rAF
 	function nextFrame() {
 		const raf = requestAnimationFrame // help minification
 		return new Promise(resolve => raf(() => raf(resolve)))
@@ -36,35 +36,48 @@
 	import { writable } from 'svelte/store'
 
 	// state of element (shown or hidden), if null this we are treated as a child
-	// transition and will get the state from our parent, coordinating with it
-	export let show: boolean | null = null
 
-	// apply transition when element is first rendered (i.e. animate in)
-	export let appear: boolean = false
-
-	// whether the element should be removed from the DOM (vs hidden)
-	export let unmount: boolean = false
-
-	// classes to apply when entering (showing)
-	export let enter: string = ''
-	export let enterFrom: string = ''
-	export let enterTo: string = ''
+	interface Props {
+		// transition and will get the state from our parent, coordinating with it
+		show?: boolean | null;
+		// apply transition when element is first rendered (i.e. animate in)
+		appear?: boolean;
+		// whether the element should be removed from the DOM (vs hidden)
+		unmount?: boolean;
+		// classes to apply when entering (showing)
+		enter?: string;
+		enterFrom?: string;
+		enterTo?: string;
+		// classes toi apply when leaving (hiding)
+		leave?: string | null;
+		leaveFrom?: string | null;
+		leaveTo?: string | null;
+		children?: import('svelte').Snippet;
+	}
 
-	// classes toi apply when leaving (hiding)
-	export let leave: string | null = null
-	export let leaveFrom: string | null = null
-	export let leaveTo: string | null = null
+	let {
+		show = null,
+		appear = false,
+		unmount = false,
+		enter = '',
+		enterFrom = '',
+		enterTo = '',
+		leave = null,
+		leaveFrom = null,
+		leaveTo = null,
+		children
+	}: Props = $props();
 
 	// convert class strings to arrays, for easier use with DOM elements
-	$: enterClasses = classes(enter)
-	$: enterFromClasses = classes(enterFrom)
-	$: enterToClasses = classes(enterTo)
+	let enterClasses = $derived(classes(enter))
+	let enterFromClasses = $derived(classes(enterFrom))
+	let enterToClasses = $derived(classes(enterTo))
 
 	// if leave, leaveFrom, or leaveTo are not specified then use enter values
 	// as a convenient way to avoid repeating definitions (but reverse To & From)
-	$: leaveClasses = classes(leave === null ? enter : leave)
-	$: leaveFromClasses = classes(leaveFrom === null ? enterTo : leaveFrom)
-	$: leaveToClasses = classes(leaveTo === null ? enterFrom : leaveTo)
+	let leaveClasses = $derived(classes(leave === null ? enter : leave))
+	let leaveFromClasses = $derived(classes(leaveFrom === null ? enterTo : leaveFrom))
+	let leaveToClasses = $derived(classes(leaveTo === null ? enterFrom : leaveTo))
 
 	// get parent context if we're a child
 	const parent = show === null ? getContext<Context>(key) : null
@@ -84,8 +97,8 @@
 	setContext(key, context)
 
 	// set initial state
-	let display = show && !context.appear ? 'contents' : 'none'
-	let mounted = !unmount || show === true
+	let display = $state(show && !context.appear ? 'contents' : 'none')
+	let mounted = $state(!unmount || show === true)
 
 	const dispatch = createEventDispatcher()
 
@@ -254,4 +267,4 @@
 	}
 </script>
 
-<div style:display use:transition={show}>{#if mounted}<slot />{/if}</div>
+<div style:display use:transition={show}>{#if mounted}{@render children?.()}{/if}</div>

src/routes/+layout.svelte

@@ -1,5 +1,10 @@
-<script>
+<script lang="ts">
   import "../app.css";
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
 </script>
 
-<slot />
+{@render children?.()}

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  let source = /* html */`  <!--
+  let source = /* html */$state(`  <!--
     Modal panel, show/hide based on modal state.
 
     Entering: "ease-out duration-300"
@@ -8,15 +8,15 @@
     Leaving: "ease-in duration-200"
       From: "opacity-100 translate-y-0 sm:scale-100"
       To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-  -->`;
-  const regex = /\<!--\s+(?<description>.*)\s+Entering:\s?(?<enter>.*)\s+From:\s?(?<enterFrom>.*)\s+To:\s?(?<enterTo>.*)\s+Leaving:\s?(?<leave>.*)\s+From:\s?(?<leaveFrom>.*)\s+To:\s?(?<leaveTo>.*)\s+--\>/mi;
+  -->`);
+  const regex = /\<!--\s+(?<description>.*)\s+Entering:\s?(?<enter>.*)\s+From:\s?(?<enterFrom>.*)\s+To:\s?(?<enterTo>.*)\s+Leaving:\s?(?<leave>.*)\s+From:\s?(?<leaveFrom>.*)\s+To:\s?(?<leaveTo>.*)\s+-->/mi;
 
 	function removeEmptyLines(value: string) {
 		return value.split('\n').filter(line => line !== '  ').join('\n')
 	}
 
-  $: groups = source.match(regex)?.groups
-	$: result = groups ? removeEmptyLines(`<!-- ${groups.description} -->
+  let groups = $derived(source.match(regex)?.groups)
+	let result = $derived(groups ? removeEmptyLines(`<!-- ${groups.description} -->
 <Transition
   enter=${groups.enter}
   enterFrom=${groups.enterFrom}
@@ -25,7 +25,7 @@
   ${groups.leaveFrom !== groups.enterTo ? `leaveFrom=${groups.leaveFrom}` : ''}
   ${groups.leaveTo !== groups.enterFrom ? `leaveTo=${groups.leaveTo}` : ''}
 >
-</Transition>`) : ''
+</Transition>`) : '')
 
 	async function copy() {
 		await navigator.clipboard.writeText(result)
@@ -57,7 +57,7 @@
 		</div>
 	</div>
 
-	<button type="button" class="mt-2 flex items-center gap-1 rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" on:click={copy}>
+	<button type="button" class="mt-2 flex items-center gap-1 rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" onclick={copy}>
 		<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-gray-500 size-5">
 			<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z" />
 		</svg>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Transition from '$lib/Transition.svelte'
 
-	let show = true
+	let show = $state(true)
 
 	function resetIsShowing() {
 		show = false
@@ -25,7 +25,7 @@
 		</Transition>
 	</div>
 	<button
-		on:click={resetIsShowing}
+		onclick={resetIsShowing}
 		disabled={!show}
 		class="flex items-center px-3 py-2 mt-8 text-sm font-medium text-white transition transform bg-black rounded-full active:bg-opacity-40 hover:scale-105 hover:bg-opacity-30 focus:outline-none bg-opacity-20"
 	>

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

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import Transition from '$lib'
 
-	let show = false
+	let show = $state(false)
 </script>
 
 <div class="flex flex-col w-full h-full items-center justify-center bg-gradient-to-r from-sky-400 to-indigo-500">
 	<div class="fixed inset-0 flex items-center justify-center">
 		<button
 			type="button"
 			class="rounded-md bg-black bg-opacity-20 px-4 py-2 text-sm font-medium text-white hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
-			on:click={() => show = true}>Open dialog</button
+			onclick={() => show = true}>Open dialog</button
 		>
 	</div>
 
@@ -23,7 +23,7 @@
 				leaveFrom="opacity-100"
 				leaveTo="opacity-0"
 			>
-				<button class="fixed inset-0 bg-black bg-opacity-25" on:click={() => show = false}></button>
+				<button class="fixed inset-0 bg-black bg-opacity-25" onclick={() => show = false}></button>
 			</Transition>
 
 			<div class="fixed inset-0 overflow-y-auto">
@@ -50,7 +50,7 @@
 								<button
 									type="button"
 									class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-									on:click={() => show = false}
+									onclick={() => show = false}
 								>
 									Got it, thanks!
 								</button>