Rhys/upgrade svelte apis

package.json

@@ -13,30 +13,30 @@
 		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/kit": "^2.5.27",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@types/chart.js": "^2.9.34",
 		"@types/js-search": "^1.4.0",
 		"@typescript-eslint/eslint-plugin": "^8.0.0",
 		"@typescript-eslint/parser": "^8.0.0",
 		"eslint": "^8.0.0",
 		"eslint-config-prettier": "^8.3.0",
-		"eslint-plugin-svelte": "^2.0.0",
-		"prettier": "^2.4.1",
-		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.0",
-		"svelte-check": "^3.4.3",
-		"svelte-preprocess": "^5.0.3",
+		"eslint-plugin-svelte": "^2.45.1",
+		"prettier": "^3.1.0",
+		"prettier-plugin-svelte": "^3.2.6",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"svelte-preprocess": "^6.0.0",
 		"tslib": "^2.3.1",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.0"
+		"typescript": "^5.5.0",
+		"vite": "^6.0.0"
 	},
 	"type": "module",
 	"dependencies": {
 		"@sveltejs/adapter-static": "^3.0.0",
-		"@sveltestrap/sveltestrap": "^6.2.7",
+		"@sveltestrap/sveltestrap": "^7.1.0",
 		"@types/elasticlunr": "^0.9.4",
-		"chart.js": "^3.6.2",
+		"chart.js": "^4.0.0",
 		"chartjs-adapter-moment": "^1.0.0",
 		"husky": "^7.0.4",
 		"js-search": "^2.0.0",

src/components/Bird.svelte

@@ -16,24 +16,30 @@
 	import { clean, getBreedingSites } from '../lib/data-tools';
 	import CountySelector from './UI/CountySelector.svelte';
 	import ThresholdSelector from './UI/ThresholdSelector.svelte';
-	/** @type {string} */
-	export let bird;
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} bird
+	 */
 
-	$: settings = getSettingsStore(bird);
-	$: rawRecords = $allRecords
+	/** @type {Props} */
+	let { bird } = $props();
+
+	let settings = $derived(getSettingsStore(bird));
+	let rawRecords = $derived($allRecords
 		.filter(({ species, viceCounty, numberIndex, location }) => {
 			if (species !== bird) return false
 			if ($threshold && numberIndex < $threshold) return false;
 			if ($county === 'ALL') return true
 			return viceCounty === $county
 			// return viceCounty = "KT"
-		})
-	$: records = clean(rawRecords);
+		}))
+	let records = $derived(clean(rawRecords));
 
-	$: breedingData = getBreedingSites(records, $settings);
+	let breedingData = $derived(getBreedingSites(records, $settings));
 
 
-	$: breedingSites = breedingData.map(({ location }) => location);
+	let breedingSites = $derived(breedingData.map(({ location }) => location));
 </script>
 
 <h2>{bird} <CountySelector /><ThresholdSelector /></h2>

src/components/UI/ContentOrSettings.svelte

@@ -1,9 +1,12 @@
 <script>
 	import { TabPane } from '@sveltestrap/sveltestrap';
 	import SettingsForm from './SettingsForm.svelte';
-	export let season;
-	export let bird;
-	export let settings;
+	let {
+		season,
+		bird,
+		settings,
+		children
+	} = $props();
 
 	const humanReadable = (season) =>
 		season.replace(
@@ -25,7 +28,7 @@
 		<p>(You can change at any time by going to the 'settings' tab)</p>
 		<SettingsForm {bird} {season} />
 	{:else if settings[season]}
-		<slot />
+		{@render children?.()}
 	{:else}
 		<h3>
 			{bird} is not {grammaticalSeason(season)} bird in the London recording area.

src/components/UI/Heatmap.svelte

@@ -1,8 +1,14 @@
 <script>
 	import { group, sortPropAsc } from '../../lib/data-tools';
  	import moment from 'moment';
-	/** @type {import('../../lib/data-tools').Record[]} */
-	export let records = [];
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('../../lib/data-tools').Record[]} [records]
+	 */
+
+	/** @type {Props} */
+	let { records = [] } = $props();
 
 	const oneDay = 1000*60*60*24;
 	const getNumberOrOne = (rx, str) => {
@@ -65,8 +71,8 @@ const getSexes = record => {
 			return {...stats, spacers: [...Array(daysUntilNextRecord)], date: record.date }
 	})
 
-	$: heatmap = generateHeatmap(records)
-	$: firstDay = moment(records[0].date).format('dddd').toLowerCase()
+	let heatmap = $derived(generateHeatmap(records))
+	let firstDay = $derived(moment(records[0].date).format('dddd').toLowerCase())
 
 </script>
 

src/components/UI/Months.svelte

@@ -1,4 +1,6 @@
 <script>
+	import { run } from 'svelte/legacy';
+
 	import { Accordion, AccordionItem } from '@sveltestrap/sveltestrap';
 	import Entry from '../aggregates/Entry.svelte';
 	import RecordsByDay from '../aggregates/RecordsByDay.svelte';
@@ -19,22 +21,30 @@
 		'December'
 	];
 
-	/** @type {import('../../lib/data-tools').Record[]} */
-	export let records = [];
-	export let fullFat = false;
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('../../lib/data-tools').Record[]} [records]
+	 * @property {boolean} [fullFat]
+	 */
+
+	/** @type {Props} */
+	let { records = [], fullFat = false } = $props();
 
-	$: months = MONTH_NAMES.map((name, index) => {
+	let months = $derived(MONTH_NAMES.map((name, index) => {
 		const relevantRecords = getMonthsOfRecords(records, index + 1);
 		return {
 			name,
 			index,
 			records: relevantRecords,
 			hasRecords: !!relevantRecords.length
 		};
+	}));
+	run(() => {
+		if (!fullFat) {
+			months = months.filter(({hasRecords}) => hasRecords)
+		}
 	});
-	$: if (!fullFat) {
-		months = months.filter(({hasRecords}) => hasRecords)
-	}
 </script>
 
 <Accordion>

src/components/UI/SettingsForm.svelte

@@ -33,8 +33,7 @@
 		}
 	];
 
-	export let bird;
-	export let season;
+	let { bird, season } = $props();
 	/**
 	 * @param {CustomEvent} ev
 	 */
@@ -43,11 +42,11 @@
 		$settings = { ...$settings, [target.id]: Number(target.value) };
 	}
 
-	$: settings = getSettingsStore(bird);
+	let settings = $derived(getSettingsStore(bird));
 
-	$: fieldsToOutput = season
+	let fieldsToOutput = $derived(season
 		? fields.filter(({ id }) => id === season)
-		: fields;
+		: fields);
 </script>
 
 <Form>

src/components/UI/Sites.svelte

@@ -4,23 +4,36 @@
 	import { group, sortPropAsc } from '../../lib/data-tools';
 	import Heatmap from './Heatmap.svelte'
 
-	/** @type {import('../../lib/data-tools').Record[]} */
-	export let records = [];
-	export let fullFat = false;
-	export let includeHeatmap = false;
-	export let isWidespread = false;
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('../../lib/data-tools').Record[]} [records]
+	 * @property {boolean} [fullFat]
+	 * @property {boolean} [includeHeatmap]
+	 * @property {boolean} [isWidespread]
+	 */
 
-	$: sites = group(records.sort(sortPropAsc('date')).sort(sortPropAsc('location')), ({location}) => location);
+	/** @type {Props} */
+	let {
+		records = [],
+		fullFat = false,
+		includeHeatmap = false,
+		isWidespread = false
+	} = $props();
+
+	let sites = $derived(group(records.sort(sortPropAsc('date')).sort(sortPropAsc('location')), ({location}) => location));
 </script>
 <h2>View by site</h2>
 <Accordion>
 	{#each sites as site}
 		<AccordionItem>
-			<div slot="header">
-				{site[0].location}{#if includeHeatmap}
-				{#if !isWidespread}<Heatmap records={site} />{/if}
-			{/if}
-		</div>
+			{#snippet header()}
+						<div >
+					{site[0].location}{#if includeHeatmap}
+					{#if !isWidespread}<Heatmap records={site} />{/if}
+				{/if}
+			</div>
+					{/snippet}
 			{#if isWidespread}<Heatmap records={site} />{/if}
 			<RecordsByDay records={site} isCollapsible={false} dateFormat="month-day"/>
 		</AccordionItem>

src/components/UI/TrendChart.svelte

@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: Can't migrate code with afterUpdate. Please migrate by hand. -->
 <script>
 	import { onMount, afterUpdate, onDestroy } from 'svelte';
 	import { Chart, registerables } from 'chart.js';