migrate svelte to 5 for collapsible panel

watergis · Dec 20, 2024 · 3ad0aa5 · 3ad0aa5
1 parent cd07259
commit 3ad0aa5
Show file tree

Hide file tree

Showing 5 changed files with 307 additions and 80 deletions.
diff --git a/.changeset/early-ghosts-sing.md b/.changeset/early-ghosts-sing.md
@@ -0,0 +1,5 @@
+---
+"@watergis/svelte-collapsible-panel": major
+---
+
+migrate svelte to v5 (breaking change)
diff --git a/packages/collapsible-panel/package.json b/packages/collapsible-panel/package.json
@@ -36,32 +36,32 @@
 	},
 	"homepage": "https://github.com/watergis/svelte-maplibre-components/tree/main/packages/collapsible-panel#readme",
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.2.4",
-		"@sveltejs/kit": "^2.5.24",
-		"@sveltejs/package": "^2.3.4",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
-		"@typescript-eslint/eslint-plugin": "^8.2.0",
-		"@typescript-eslint/parser": "^8.2.0",
-		"eslint": "^9.9.1",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/kit": "^2.13.0",
+		"@sveltejs/package": "^2.3.7",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@typescript-eslint/eslint-plugin": "^8.18.1",
+		"@typescript-eslint/parser": "^8.18.1",
+		"eslint": "^9.17.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.43.0",
-		"globals": "^15.9.0",
-		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.6",
-		"sass": "^1.77.8",
-		"svelte": "^4.2.19",
-		"svelte-check": "^3.8.6",
-		"svelte-preprocess": "^6.0.2",
-		"tslib": "^2.7.0",
-		"typescript": "^5.5.4",
-		"typescript-eslint": "^8.2.0",
-		"vite": "^5.4.2"
+		"eslint-plugin-svelte": "^2.46.1",
+		"globals": "^15.14.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.2",
+		"sass": "^1.83.0",
+		"svelte": "^5.15.0",
+		"svelte-check": "^4.1.1",
+		"svelte-preprocess": "^6.0.3",
+		"tslib": "^2.8.1",
+		"typescript": "^5.7.2",
+		"typescript-eslint": "^8.18.1",
+		"vite": "^6.0.4"
 	},
 	"type": "module",
 	"dependencies": {
-		"@fortawesome/free-solid-svg-icons": "^6.6.0",
+		"@fortawesome/free-solid-svg-icons": "^6.7.2",
 		"bulma": "^1.0.2",
-		"svelte-fa": "^4.0.2"
+		"svelte-fa": "^4.0.3"
 	},
 	"peerDependencies": {
 		"svelte": "^4.0.0"

diff --git a/packages/collapsible-panel/src/lib/CollapsiblePanel.svelte b/packages/collapsible-panel/src/lib/CollapsiblePanel.svelte
@@ -2,17 +2,14 @@
 	import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons';
 	import Fa from 'svelte-fa';
 
-	export let title: string;
+	interface Props {
+		title: string;
+		isPanelOpen?: boolean;
+		color?: 'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger' | '';
+		children?: import('svelte').Snippet;
+	}
 
-	export let isPanelOpen = false;
-	export let color:
-		| 'is-primary'
-		| 'is-link'
-		| 'is-info'
-		| 'is-success'
-		| 'is-warning'
-		| 'is-danger'
-		| '' = '';
+	let { title, isPanelOpen = $bindable(false), color = '', children }: Props = $props();
 
 	const handleEnterKey = (e: KeyboardEvent) => {
 		if (e.key === 'Enter') {
@@ -28,8 +25,8 @@
 		class="panel-heading p-2 header-menu"
 		role="button"
 		tabindex="0"
-		on:click={() => (isPanelOpen = !isPanelOpen)}
-		on:keydown={handleEnterKey}
+		onclick={() => (isPanelOpen = !isPanelOpen)}
+		onkeydown={handleEnterKey}
 	>
 		<span class="panel-icon mt-1">
 			{#if isPanelOpen}
@@ -41,7 +38,7 @@
 		{title}
 	</div>
 	<div class="container m-2" hidden={!isPanelOpen}>
-		<slot />
+		{@render children?.()}
 	</div>
 </nav>
 

diff --git a/packages/collapsible-panel/src/routes/+page.svelte b/packages/collapsible-panel/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { CollapsiblePanel } from '$lib';
 
-	let isPanelOpen = true;
+	let isPanelOpen = $state(true);
 </script>
 
 <sveltekit:head>