chore: Migrate galactic-sovereign-frontend to Svelte 5

frontend/galactic-sovereign-frontend/package.json

@@ -15,26 +15,26 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-node": "^5.1.1",
-		"@sveltejs/enhanced-img": "^0.3.8",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/enhanced-img": "^0.3.9",
+		"@sveltejs/kit": "^2.5.27",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/eslint": "^8.56.7",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.36.0",
+		"eslint-plugin-svelte": "^2.45.1",
 		"globals": "^15.0.0",
 		"postcss": "^8.4.47",
 		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"svelte": "^4.2.7",
-		"svelte-check": "^3.6.0",
+		"prettier-plugin-svelte": "^3.2.6",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
 		"tailwindcss": "^3.4.13",
 		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
+		"typescript": "^5.5.0",
 		"typescript-eslint": "^8.0.0-alpha.20",
-		"vite": "^5.0.3",
+		"vite": "^5.4.4",
 		"vitest": "^1.2.0"
 	},
 	"type": "module"
-}
+}

frontend/galactic-sovereign-frontend/src/lib/components/Building.svelte

@@ -4,9 +4,13 @@
 	import { type UiBuilding, type UiBuildingCost } from '$lib/game/buildings';
 	import { type UiResource } from '$lib/game/resources';
 
-	export let building: UiBuilding;
-	export let availableResources: UiResource[];
-	export let buildingActionAlreadyRunning: boolean;
+	interface Props {
+		building: UiBuilding;
+		availableResources: UiResource[];
+		buildingActionAlreadyRunning: boolean;
+	}
+
+	let { building, availableResources, buildingActionAlreadyRunning }: Props = $props();
 
 	// https://kit.svelte.dev/docs/images#sveltejs-enhanced-img-dynamically-choosing-an-image
 	// https://github.com/vitejs/vite/issues/9599#issuecomment-1209333753
@@ -31,34 +35,40 @@
 	}
 
 	// https://stackoverflow.com/questions/49296458/capitalize-first-letter-of-a-string-using-angular-or-typescript
-	$: title = building.name[0].toUpperCase() + building.name.slice(1);
+	let title = $derived(building.name[0].toUpperCase() + building.name.slice(1));
 
 	// https://stackoverflow.com/questions/68060723/glob-import-of-image-urls-in-sveltekit
 	// https://stackoverflow.com/questions/423376/how-to-get-the-file-name-from-a-full-path-using-javascript
-	$: images = Object.keys(modules).map((imagePath) => {
-		return {
-			building: imagePath
-				.replace(/^.*[\\/]/, '')
-				.replace(/\..*$/, '')
-				.replace(/\_/, ' '),
-			data: modules[imagePath].default
-		};
-	});
+	let images = $derived(
+		Object.keys(modules).map((imagePath) => {
+			return {
+				building: imagePath
+					.replace(/^.*[\\/]/, '')
+					.replace(/\..*$/, '')
+					.replace(/\_/, ' '),
+				data: modules[imagePath].default
+			};
+		})
+	);
 
-	$: costs = building.costs.map((c) => ({
-		resource: c.resource,
-		cost: c.cost,
-		color: textColor(c, availableResources)
-	}));
+	let costs = $derived(
+		building.costs.map((c) => ({
+			resource: c.resource,
+			cost: c.cost,
+			color: textColor(c, availableResources)
+		}))
+	);
 
-	$: gains = building.resourcesProduction.map((rp) => ({
-		resource: rp.resource,
-		nextProduction: rp.nextProduction,
-		gain: rp.gain
-	}));
-	$: needsGainsSection = gains.length > 0;
+	let gains = $derived(
+		building.resourcesProduction.map((rp) => ({
+			resource: rp.resource,
+			nextProduction: rp.nextProduction,
+			gain: rp.gain
+		}))
+	);
+	let needsGainsSection = $derived(gains.length > 0);
 
-	$: buildingImage = images.find((image) => image.building === building.name);
+	let buildingImage = $derived(images.find((image) => image.building === building.name));
 
 	const isAffordable = building.costs.reduce(
 		(currentlyAffordable, cost) => currentlyAffordable && canAfford(cost, availableResources),
@@ -73,22 +83,26 @@
 	{/if}
 	<StyledText text="Required for level {building.level + 1}:" textColor="text-white" />
 	<table>
-		{#each costs as cost}
-			<tr>
-				<td class="text-white capitalize">{cost.resource}:</td>
-				<td class={cost.color}>{cost.cost}</td>
-			</tr>
-		{/each}
+		<tbody>
+			{#each costs as cost}
+				<tr>
+					<td class="text-white capitalize">{cost.resource}:</td>
+					<td class={cost.color}>{cost.cost}</td>
+				</tr>
+			{/each}
+		</tbody>
 	</table>
 	{#if needsGainsSection}
 		<StyledText text="Production:" textColor="text-white" />
 		<table>
-			{#each gains as gain}
-				<tr>
-					<td class="text-white capitalize">{gain.resource}:</td>
-					<td class="text-enabled">{gain.nextProduction}(+{gain.gain})</td>
-				</tr>
-			{/each}
+			<tbody>
+				{#each gains as gain}
+					<tr>
+						<td class="text-white capitalize">{gain.resource}:</td>
+						<td class="text-enabled">{gain.nextProduction}(+{gain.gain})</td>
+					</tr>
+				{/each}
+			</tbody>
 		</table>
 	{/if}
 	<!-- https://kit.svelte.dev/docs/form-actions#default-actions -->

frontend/galactic-sovereign-frontend/src/lib/components/BuildingAction.svelte

@@ -5,8 +5,12 @@
 
 	import { type UiBuildingAction } from '$lib/game/actions';
 
-	export let action: UiBuildingAction;
-	export let onCompleted: () => void;
+	interface Props {
+		action: UiBuildingAction;
+		onCompleted: () => void;
+	}
+
+	let { action, onCompleted }: Props = $props();
 
 	// https://kit.svelte.dev/docs/images#sveltejs-enhanced-img-dynamically-choosing-an-image
 	// https://github.com/vitejs/vite/issues/9599#issuecomment-1209333753
@@ -22,19 +26,21 @@
 	// https://stackoverflow.com/questions/14980014/how-can-i-calculate-the-time-between-2-dates-in-typescript
 	const serverRemainingMs = action.completedAt.getTime() - Date.now();
 
-	let cancelButtonClass = serverRemainingMs > 0 ? '' : 'hidden';
-	let actionCompleted = serverRemainingMs < 0;
-
-	$: images = Object.keys(modules).map((imagePath) => {
-		return {
-			building: imagePath
-				.replace(/^.*[\\/]/, '')
-				.replace(/\..*$/, '')
-				.replace(/\_/, ' '),
-			data: modules[imagePath].default
-		};
-	});
-	$: actionImage = images.find((image) => image.building === action.name);
+	let cancelButtonClass = $state(serverRemainingMs > 0 ? '' : 'hidden');
+	let actionCompleted = $state(serverRemainingMs < 0);
+
+	let images = $derived(
+		Object.keys(modules).map((imagePath) => {
+			return {
+				building: imagePath
+					.replace(/^.*[\\/]/, '')
+					.replace(/\..*$/, '')
+					.replace(/\_/, ' '),
+				data: modules[imagePath].default
+			};
+		})
+	);
+	let actionImage = $derived(images.find((image) => image.building === action.name));
 
 	function onActionCompleted() {
 		cancelButtonClass = 'hidden';

frontend/galactic-sovereign-frontend/src/lib/components/CenteredWrapper.svelte

@@ -1,10 +1,21 @@
 <script lang="ts">
+	import { type Snippet } from 'svelte';
+
 	import { FlexContainer } from '$lib/components';
 
-	export let width: string = 'w-full';
-	export let height: string = 'h-full';
+	interface Props {
+		width?: string;
+		height?: string;
+		bgColor?: string;
+		children?: Snippet;
+	}
 
-	export let bgColor: string = 'bg-transparent';
+	let {
+		width = 'w-full',
+		height = 'h-full',
+		bgColor = 'bg-transparent',
+		children
+	}: Props = $props();
 </script>
 
 <!-- https://stackoverflow.com/questions/1122381/how-to-force-child-div-to-be-100-of-parent-divs-height-without-specifying-pare -->
@@ -17,6 +28,6 @@
 >
 	<FlexContainer {bgColor}>
 		<!-- https://svelte.dev/tutorial/slots -->
-		<slot />
+		{@render children?.()}
 	</FlexContainer>
 </FlexContainer>

frontend/galactic-sovereign-frontend/src/lib/components/FlexContainer.svelte

@@ -1,16 +1,25 @@
 <script lang="ts">
-	export let vertical: boolean = true;
-	export let justify: string = 'evenly';
-	export let align: string = 'center';
-	export let extensible: boolean = true;
-	export let bgColor: string = 'bg-transparent';
-	export let styling: string = '';
+	import { type Snippet } from 'svelte';
 
-	$: direction = vertical ? 'flex-col' : 'flex-row';
-	$: justification = generateJustifyClass(justify);
-	$: alignment = generateAlignClass(align);
-	// https://stackoverflow.com/questions/75999354/tailwindcss-content-larger-than-screen-when-adding-components
-	$: grow = extensible ? 'flex-1' : 'flex-none';
+	interface Props {
+		vertical?: boolean;
+		justify?: string;
+		align?: string;
+		extensible?: boolean;
+		bgColor?: string;
+		styling?: string;
+		children?: Snippet;
+	}
+
+	let {
+		vertical = true,
+		justify = 'evenly',
+		align = 'center',
+		extensible = true,
+		bgColor = 'bg-transparent',
+		styling = '',
+		children
+	}: Props = $props();
 
 	// https://tailwindcss.com/docs/content-configuration#dynamic-class-names
 	function generateJustifyClass(justify: string): string {
@@ -36,9 +45,14 @@
 				return 'items-center';
 		}
 	}
+	let direction = $derived(vertical ? 'flex-col' : 'flex-row');
+	let justification = $derived(generateJustifyClass(justify));
+	let alignment = $derived(generateAlignClass(align));
+	// https://stackoverflow.com/questions/75999354/tailwindcss-content-larger-than-screen-when-adding-components
+	let grow = $derived(extensible ? 'flex-1' : 'flex-none');
 </script>
 
 <!-- https://stackoverflow.com/questions/29467660/how-to-stretch-children-to-fill-cross-axis -->
 <div class="flex {direction} {justification} {alignment} {bgColor} {grow} {styling}">
-	<slot />
+	{@render children?.()}
 </div>

frontend/galactic-sovereign-frontend/src/lib/components/Footer.svelte

@@ -1,13 +1,20 @@
 <script lang="ts">
+	import { type Snippet } from 'svelte';
+
 	import { FlexContainer } from '$lib/components';
 
-	export let height: string = 'h-1/10';
+	interface Props {
+		height?: string;
+		children?: Snippet;
+	}
+
+	let { height = 'h-1/10', children }: Props = $props();
 </script>
 
 <FlexContainer
 	vertical={false}
 	bgColor={'bg-black'}
 	styling="fixed bottom-0 w-full {height} text-white"
 >
-	<slot />
+	{@render children?.()}
 </FlexContainer>

frontend/galactic-sovereign-frontend/src/lib/components/FormField.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
+	import { type Snippet } from 'svelte';
+
 	import { FlexContainer } from '$lib/components';
 
-	export let label: string = 'My label';
-	export let labelId: string;
+	interface Props {
+		label?: string;
+		labelId: string;
+		children?: Snippet;
+	}
+
+	let { label = 'My label', labelId, children }: Props = $props();
 </script>
 
 <FlexContainer extensible={false} align={'stretch'} styling={'text-secondary'}>
 	<label for={labelId}>{label}</label>
-	<slot />
+	{@render children?.()}
 </FlexContainer>

frontend/galactic-sovereign-frontend/src/lib/components/GamePageWrapper.svelte

@@ -1,15 +1,20 @@
 <script lang="ts">
+	import { type Snippet } from 'svelte';
+
 	import { FlexContainer, Header, StyledText } from '$lib/components';
 
 	import { type UiResource } from '$lib/game/resources';
 	import { floorToInteger, toFlooredShortString } from '$lib/displayUtils';
 
-	// https://svelte.dev/blog/zero-config-type-safety
-	export let universeName: string;
-	export let planetName: string;
-	export let playerName: string;
+	interface Props {
+		universeName: string;
+		planetName: string;
+		playerName: string;
+		resources: UiResource[];
+		children?: Snippet;
+	}
 
-	export let resources: UiResource[];
+	let { universeName, planetName, playerName, resources, children }: Props = $props();
 
 	function resourceTextColor(resource: UiResource): string {
 		if (resource.amount < resource.storage) {
@@ -62,6 +67,6 @@
 			{/each}
 		</FlexContainer>
 
-		<slot />
+		{@render children?.()}
 	</FlexContainer>
 </FlexContainer>

frontend/galactic-sovereign-frontend/src/lib/components/Header.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
+	import { type Snippet } from 'svelte';
+
 	import { FlexContainer } from '$lib/components';
+
+	interface Props {
+		children?: Snippet;
+	}
+
+	let { children }: Props = $props();
 </script>
 
 <FlexContainer
 	vertical={false}
 	bgColor={'bg-black'}
 	styling={'w-full h-1/10 fixed top-0 left-0 text-white'}
 >
-	<slot />
+	{@render children?.()}
 </FlexContainer>