chore(deps): update dependency eslint-plugin-svelte to v3

.changeset/orange-jeans-mate.md

@@ -0,0 +1,11 @@
+---
+"@undp-data/svelte-geohub-static-image-controls": patch
+"@undp-data/svelte-maplibre-storymap": patch
+"@undp-data/svelte-undp-components": patch
+"@undp-data/svelte-undp-design": patch
+"@undp-data/cgaz-admin-tool": patch
+"@undp-data/style-switcher": patch
+"geohub": patch
+---
+
+fix: fixed lint error for eslint-plugin-svelte v3 changes.

packages/cgaz-admin-tool/package.json

@@ -48,7 +48,7 @@
 		"@typescript-eslint/parser": "^8.23.0",
 		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"pmtiles": "^4.2.1",
 		"prettier": "^3.4.2",

packages/style-switcher/package.json

@@ -31,7 +31,7 @@
 		"@typescript-eslint/parser": "^8.23.0",
 		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",

packages/svelte-maplibre-storymap/package.json

@@ -51,7 +51,7 @@
 		"@typescript-eslint/parser": "^8.23.0",
 		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",

packages/svelte-maplibre-storymap/src/lib/StoryMap.svelte

@@ -288,7 +288,7 @@
 		<StoryMapHeader bind:template />
 
 		{#if $mapStore}
-			{#each config.chapters as chapter}
+			{#each config.chapters as chapter (chapter.id)}
 				<StoryMapChapter {chapter} bind:activeId bind:template />
 			{/each}
 		{/if}
@@ -333,7 +333,7 @@
 							aria-label={config.title}
 						>
 						</button>
-						{#each config.chapters as ch, index}
+						{#each config.chapters as ch, index (ch.id)}
 							<button
 								class="progress-button {slideIndex === index + 1 ? 'is-active' : ''}"
 								use:tippyTooltip={{ content: ch.title }}

packages/svelte-maplibre-storymap/src/routes/+page.svelte

@@ -19,7 +19,7 @@
 
 <div class="overlay">
 	<div class="buttons has-addons">
-		{#each cssModes as mode}
+		{#each cssModes as mode (mode.id)}
 			<label class="radio">
 				<input type="radio" name="cssmode" value={mode.id} bind:group={cssMode} />
 				{mode.label}

packages/svelte-static-image-controls/package.json

@@ -49,7 +49,7 @@
 		"@typescript-eslint/parser": "^8.23.0",
 		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"pmtiles": "^4.2.1",
 		"prettier": "^3.4.2",

packages/svelte-static-image-controls/src/lib/StaticImageControl.svelte

@@ -261,7 +261,7 @@
 				<div class="select is-fullwidth">
 					<select bind:value={selectedPageName} onchange={handlePageSizeChanged}>
 						<option value="custom">Custom</option>
-						{#each Object.keys(PageSizes) as name}
+						{#each Object.keys(PageSizes) as name (name)}
 							{@const size = PageSizes[name]}
 							<option value={name}>{name} ({size[0]} mm x {size[1]} mm)</option>
 						{/each}

packages/svelte-undp-components/package.json

@@ -68,7 +68,7 @@
 		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-storybook": "^0.11.2",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"jsdom": "^26.0.0",
 		"pmtiles": "^4.2.1",

packages/svelte-undp-components/src/lib/components/maplibre/heatmap/HeatmapColor.svelte

@@ -99,8 +99,7 @@
 
 <div class="fixed-grid has-{colorValues.length}-cols">
 	<div class="grid is-gap-1">
-		<!-- eslint-disable @typescript-eslint/no-unused-vars -->
-		{#each colorValues as colorValueRow, index}
+		{#each colorValues as colorValueRow, index (colorValueRow.index)}
 			<div class="cell">
 				<HeatmapColorRow
 					bind:colorRow={colorValues[index]}

packages/svelte-undp-components/src/lib/components/maplibre/raster/RasterResampling.svelte

@@ -37,7 +37,7 @@
 
 <div class="select is-fullwidth">
 	<select bind:value onchange={setValue}>
-		{#each options as option}
+		{#each options as option (option.value)}
 			<option value={option.value}>{option.title}</option>
 		{/each}
 	</select>

packages/svelte-undp-components/src/lib/components/maplibre/symbol/IconOverlap.svelte

@@ -24,7 +24,7 @@
 
 <div data-testid="icon-overlap-slider" class="select is-fullwidth">
 	<select bind:value={selected} onchange={setIconOverlap}>
-		{#each choices as choice}
+		{#each choices as choice (choice)}
 			<option value={choice}
 				>{choice.toLowerCase().replace(/\b(\w)/g, (s) => s.toUpperCase())}</option
 			>

packages/svelte-undp-components/src/lib/components/maplibre/symbol/SymbolPlacement.svelte

@@ -70,7 +70,7 @@
 		title="Icon overlap"
 		onchange={setSymbolPlacement}
 	>
-		{#each choices as choice}
+		{#each choices as choice (choice)}
 			<option class="legend-text" value={choice}>{clean(choice)}</option>
 		{/each}
 	</select>

packages/svelte-undp-components/src/lib/components/maplibre/symbol/TextFont.svelte

@@ -23,6 +23,7 @@
 	onMount(async () => {
 		const res = await fetch(fontJsonUrl);
 		fonts = await res.json();
+		setValue();
 	});
 
 	const style = $map
@@ -38,14 +39,11 @@
 	const setValue = () => {
 		map.setLayoutProperty(layerId, propertyName, [value]);
 	};
-	onMount(() => {
-		setValue();
-	});
 </script>
 
 <div class="select is-fullwidth">
 	<select bind:value onchange={setValue}>
-		{#each fonts as font}
+		{#each fonts as font (font)}
 			<option value={font}>{font}</option>
 		{/each}
 	</select>

packages/svelte-undp-components/src/lib/components/maplibre/util/PropertySelect.svelte

@@ -112,7 +112,7 @@
 			disabled={readonly}
 		>
 			{#if propertySelectOptions}
-				{#each propertySelectOptions as propertySelectOption}
+				{#each propertySelectOptions as propertySelectOption (propertySelectOption)}
 					<option
 						title="Property Option"
 						data-testid="property-select-option"

packages/svelte-undp-components/src/lib/components/maplibre/util/VectorColorClassification.svelte

@@ -414,7 +414,7 @@
 											bind:value={classificationMethod}
 											onchange={handleClassificationMethodChanged}
 										>
-											{#each ClassificationMethods as classificationMethod}
+											{#each ClassificationMethods as classificationMethod (classificationMethod.code)}
 												<option
 													class="legend-text"
 													title="Classification Method"
@@ -469,8 +469,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<!-- eslint-disable @typescript-eslint/no-unused-vars -->
-					{#each colorMapRows as colorMapRow, index}
+					{#each colorMapRows as colorMapRow, index (colorMapRow.index)}
 						<LegendColorMapRow
 							bind:colorMapRow={colorMapRows[index]}
 							bind:colorMapName

packages/svelte-undp-components/src/lib/components/maplibre/util/VectorValueClassification.svelte

@@ -308,7 +308,7 @@
 									bind:value={classificationMethod}
 									onchange={handleClassificationMethodChanged}
 								>
-									{#each ClassificationMethods as classificationMethod}
+									{#each ClassificationMethods as classificationMethod (classificationMethod.code)}
 										<option
 											class="legend-text"
 											title="Classification Method"
@@ -352,7 +352,7 @@
 				</tr>
 			</thead>
 			<tbody>
-				{#each colorMapRows as row, index}
+				{#each colorMapRows as row, index (row.index)}
 					<tr data-testid="line-width-row-container">
 						<td style="min-width: 100px;">
 							<div style={legendCssTemplate.replace(/{value}/g, `${row.value}`)}></div>
@@ -373,7 +373,8 @@
 						<td style="min-width: 10px;">
 							<div style="margin-top: 5px;">
 								{#if row.end}
-									{`<`}
+									{@const ope = `<`}
+									{ope}
 								{/if}
 							</div>
 						</td>

packages/svelte-undp-components/src/lib/components/pg_tileserv/VectorSimulation.svelte

@@ -127,7 +127,7 @@
 		</div>
 	</div>
 {:else}
-	{#each Object.entries(args) as [argId, arg]}
+	{#each Object.entries(args) as [argId, arg] (argId)}
 		{@const value = selectedArgs[argId]?.value ?? 0}
 
 		<PropertyEditor

packages/svelte-undp-components/src/lib/components/titiler/RasterAlgorithms.svelte

@@ -142,7 +142,7 @@
 			>
 				{#snippet control()}
 					<div>
-						{#each Object.keys(params) as key}
+						{#each Object.keys(params) as key (key)}
 							{@const args = params[key]}
 							<PropertyEditor
 								id={key}

packages/svelte-undp-components/src/lib/components/titiler/RasterClassifyLegend.svelte

@@ -462,7 +462,7 @@
 									bind:value={classificationMethod}
 									onchange={handleClassificationMethodChange}
 								>
-									{#each ClassificationMethods as classificationMethod}
+									{#each ClassificationMethods as classificationMethod (classificationMethod.code)}
 										<option
 											class="legend-text"
 											title="Classification Method"
@@ -518,7 +518,7 @@
 		</thead>
 		<tbody>
 			<!-- eslint-disable @typescript-eslint/no-unused-vars -->
-			{#each colorMapRows as colorMapRow, index}
+			{#each colorMapRows as colorMapRow, index (colorMapRow.index)}
 				<LegendColorMapRow
 					bind:colorMapRow={colorMapRows[index]}
 					bind:colorMapName

packages/svelte-undp-components/src/lib/components/ui/Breadcrumbs.svelte

@@ -32,7 +32,7 @@
 
 <nav class="breadcrumb has-text-weight-bold is-uppercase is-{size}" aria-label="breadcrumbs">
 	<ul>
-		{#each pages as page, index}
+		{#each pages as page, index (pages.indexOf(page))}
 			{#if index === pages.length - 1}
 				<li class="is-active">
 					<!-- svelte-ignore a11y_missing_attribute -->

packages/svelte-undp-components/src/lib/components/ui/ColorMapPicker.svelte

@@ -129,9 +129,9 @@
 
 	<div class="card-color">
 		{#key isReverseColors}
-			{#each colorMapTypes as colorMapType}
+			{#each colorMapTypes as colorMapType (colorMapType.name)}
 				{#if activeColorMapType === colorMapType.name}
-					{#each colorMapType.codes.sort((a, b) => a.localeCompare(b)) as cmName}
+					{#each colorMapType.codes.sort((a, b) => a.localeCompare(b)) as cmName (cmName)}
 						<div
 							class="card {colorMapName.replace('_r', '') === cmName ? 'selected' : ''}"
 							role="button"

packages/svelte-undp-components/src/lib/components/ui/CountrySelector.svelte

@@ -140,7 +140,7 @@
 	{#if showSelectedCountries && selected.length > 0}
 		<div class="selected-area fixed-grid has-3-cols p-2">
 			<div class="grid">
-				{#each selected as iso3}
+				{#each selected as iso3 (iso3)}
 					<div class="cell">
 						<Chips
 							label={iso3}
@@ -158,7 +158,7 @@
 		{#if countriesFiltered.length === 0}
 			<Notification type="info" showCloseButton={false}>No country found</Notification>
 		{:else}
-			{#each countriesFiltered as country}
+			{#each countriesFiltered as country (country.iso_3)}
 				{@const isSelected = selected.includes(country.iso_3)}
 				<div class="country-item p-1 px-2">
 					<label class="checkbox is-flex is-align-items-center">

packages/svelte-undp-components/src/lib/components/ui/IconImagePicker.svelte

@@ -111,9 +111,9 @@
 	></button>
 
 	<div class="card-icon">
-		{#each iconGroupsByLetter as iconGroup}
+		{#each iconGroupsByLetter as iconGroup (iconGroup.id)}
 			{#if activeIconGroupId === iconGroup.id}
-				{#each iconGroup.values as spriteImage}
+				{#each iconGroup.values as spriteImage (spriteImage.alt)}
 					<div
 						role="button"
 						tabindex="0"

packages/svelte-undp-components/src/lib/components/ui/IconImageSelector.svelte

@@ -75,7 +75,7 @@
 >
 	{#if iconImage}
 		<span class="icon is-small">
-			<figure class={`image is-24x24`} data-testid="icon-figure">
+			<figure class="image is-24x24" data-testid="icon-figure">
 				<div style={iconImage}></div>
 			</figure>
 		</span>

packages/svelte-undp-components/src/lib/components/ui/MenuButton.svelte

@@ -61,7 +61,7 @@
 			onmouseleave={() => (isButtonHovered = false)}
 		>
 			<div class="dropdown-content">
-				{#each subButtons as btn}
+				{#each subButtons as btn (subButtons.indexOf(btn))}
 					{#if btn.callback}
 						<!-- svelte-ignore a11y_missing_attribute -->
 						<a

packages/svelte-undp-components/src/lib/components/ui/SDGSelector.svelte

@@ -88,7 +88,7 @@
 </div>
 
 <div bind:this={tooltipContent} class="sdg-content tooltip">
-	{#each sdgNumbers as number}
+	{#each sdgNumbers as number (number)}
 		{@const isSelected = selected.includes(number)}
 		<div class="sdg-item py-2 pl-2 pr-4">
 			<label class="checkbox is-flex is-align-items-center">

packages/svelte-undp-components/src/lib/components/ui/SegmentButtons.svelte

@@ -53,7 +53,7 @@
 </script>
 
 <div class="field has-addons is-flex {wrap ? 'is-flex-wrap-wrap' : ''}">
-	{#each buttons as button}
+	{#each buttons as button (button.value)}
 		<p class="control">
 			<button
 				type="button"

packages/svelte-undp-components/src/lib/components/ui/Tabs.svelte

@@ -43,7 +43,7 @@
 		: null} m-0 mt-2 mb-2"
 >
 	<ul>
-		{#each tabs as tab}
+		{#each tabs as tab (tab.id)}
 			<li class={activeTab === tab.id ? 'is-active' : 'inactive-tab'}>
 				<a
 					href={tab.id.startsWith('#') ? tab.id : null}

packages/svelte-undp-components/src/lib/components/ui/TagSelector.svelte

@@ -155,7 +155,7 @@
 	{#if showSelectedTags && type === 'multi' && selected.length > 0}
 		<div class="selected-area fixed-grid has-3-cols p-2">
 			<div class="grid">
-				{#each selected as tag}
+				{#each selected as tag (`${tag.key}-${tag.value}`)}
 					<div class="cell">
 						<Chips
 							bind:label={tag.value}
@@ -191,7 +191,7 @@
 				{/if}
 			</div>
 		{:else}
-			{#each tagsFiltered as tag}
+			{#each tagsFiltered as tag (`${tag.key}-${tag.value}`)}
 				{@const isSelected = selected.includes(tag)}
 				<!-- svelte-ignore a11y_interactive_supports_focus -->
 				<div

packages/svelte-undp-design/package.json

@@ -50,7 +50,7 @@
 		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-storybook": "^0.11.2",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"jsdom": "^26.0.0",
 		"prettier": "^3.4.2",

packages/svelte-undp-design/src/lib/Breadcrumbs/Breadcrumbs.svelte

@@ -31,7 +31,7 @@
 {#if breadcrumbs && breadcrumbs.length > 0}
 	<nav aria-label="breadcrumb" data-viewport="true" class="breadcrumb-undp inviewport">
 		<ul>
-			{#each breadcrumbs as breadcrumb, index}
+			{#each breadcrumbs as breadcrumb, index (breadcrumbs.indexOf(breadcrumb))}
 				{#if index === breadcrumbs.length - 1}
 					<li>
 						<span class="icon-text">

packages/svelte-undp-design/src/lib/FluidCarousel/FluidCarousel.svelte

@@ -54,7 +54,7 @@
 			bind:initialPageIndex
 			on:pageChange={handlePageChanged}
 		>
-			{#each contents as content}
+			{#each contents as content (contents.indexOf(content))}
 				<div
 					class="swiper-slide slider-slide"
 					aria-roledescription="slide"