feat: port components to Svelte 5, minor style fixes

src/lib/api/knowledgepanels.ts

@@ -1,20 +1,24 @@
+export type KnowledgePanelTitle = {
+	title: string;
+	subtitle?: string;
+	grade: 'a' | 'b' | 'c' | 'd' | 'e' | 'unknown';
+	icon_url: string;
+	icon_color_from_evaluation: string;
+	icon_size: string;
+	type: string;
+};
+
+export type KnowledgePanelSize = 'small';
+
 export type KnowledgePanel = {
 	type: 'card' | 'inline';
 	expanded: boolean;
 	expand_for: string;
-	title_element: {
-		title: string;
-		subtitle?: string;
-		grade: 'a' | 'b' | 'c' | 'd' | 'e' | 'unknown';
-		icon_url: string;
-		icon_color_from_evaluation: string;
-		icon_size: string;
-		type: string;
-	};
+	title_element: KnowledgePanelTitle;
 	elements: KnowledgeElement[];
 	topics: string[];
 	level: string;
-	size?: 'small';
+	size?: KnowledgePanelSize;
 };
 
 export type KnowledgeElement =

src/lib/const.ts

@@ -1,10 +1,9 @@
 export const STATIC_HOST = 'https://static.openfoodfacts.org';
-
-export const TAXONOMY_URL = (taxo: string) => `${STATIC_HOST}/data/taxonomies/${taxo}.json`;
-
 export const API_HOST = 'https://world.openfoodfacts.org';
-
-export const PRODUCT_URL = (barcode: string) => `${API_HOST}/api/v3/product/${barcode}.json`;
 export const SEARCH_URL = `${API_HOST}/api/v2/search`;
 
 export const USER_AGENT = `Open Food Facts Explorer (${import.meta.env.PACKAGE_VERSION})`;
+
+export const KP_ATTRIBUTE_IMG = (img: string) => `${STATIC_HOST}/images/attributes/dist/${img}`;
+export const TAXONOMY_URL = (taxo: string) => `${STATIC_HOST}/data/taxonomies/${taxo}.json`;
+export const PRODUCT_URL = (barcode: string) => `${API_HOST}/api/v3/product/${barcode}.json`;

src/lib/greenscore/GreenScore.svelte

@@ -1,21 +1,18 @@
 <script lang="ts">
-	import EcoscoreA from './green-score-a.svg';
-	import EcoscoreB from './green-score-b.svg';
-	import EcoscoreC from './green-score-c.svg';
-	import EcoscoreD from './green-score-d.svg';
-	import EcoscoreE from './green-score-e.svg';
-	import EcoscoreUnknown from './green-score-unknown.svg';
+	import { KP_ATTRIBUTE_IMG } from '$lib/const';
 
 	const MAP: Record<string, string> = {
-		a: EcoscoreA,
-		b: EcoscoreB,
-		c: EcoscoreC,
-		d: EcoscoreD,
-		e: EcoscoreE
+		a: KP_ATTRIBUTE_IMG('green-score-b.svg'),
+		b: KP_ATTRIBUTE_IMG('green-score-c.svg'),
+		c: KP_ATTRIBUTE_IMG('green-score-d.svg'),
+		d: KP_ATTRIBUTE_IMG('green-score-e.svg'),
+		e: KP_ATTRIBUTE_IMG('green-score-unknown.svg')
 	};
 
-	export let grade: string;
-	$: src = MAP[grade.toLowerCase()] ?? EcoscoreUnknown;
+	let SRC_UNKNOWN = KP_ATTRIBUTE_IMG('green-score-unknown.svg');
+
+	let { grade }: { grade: string } = $props();
+	let src = $derived(MAP[grade.toLowerCase()] ?? SRC_UNKNOWN);
 </script>
 
-<img alt="Nutriscore" {src} class="transition-all duration-75 hover:brightness-90" />
+<img alt="Green-Score" {src} class="transition-all duration-75 hover:brightness-90" />

src/lib/knowledgepanels/Element.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { KnowledgeElement, KnowledgePanel } from '$lib/api';
+	import type { KnowledgeElement, KnowledgePanel, KnowledgePanelSize } from '$lib/api';
 	import Debug from '$lib/ui/Debug.svelte';
 
 	import Panel from './Panel.svelte';
@@ -8,8 +8,12 @@
 	import PanelGroup from './PanelGroup.svelte';
 	import ImageButton from '$lib/ui/ImageButton.svelte';
 
-	export let allPanels: Record<string, KnowledgePanel>;
-	export let element: KnowledgeElement;
+	type Props = {
+		allPanels: Record<string, KnowledgePanel>;
+		element: KnowledgeElement;
+		size?: KnowledgePanelSize;
+	};
+	let { allPanels, element, size }: Props = $props();
 </script>
 
 <div class="my-1">
@@ -28,7 +32,7 @@
 			<table class="table-compact table w-full">
 				<thead>
 					<tr>
-						<th />
+						<th></th>
 						{#each element.table_element.columns as column}
 							<th>{column.text}</th>
 						{/each}
@@ -37,7 +41,7 @@
 				<tbody>
 					{#each element.table_element.rows as row}
 						<tr>
-							<td />
+							<td></td>
 							{#each row.values as cell}
 								<td>{cell.text}</td>
 							{/each}

src/lib/knowledgepanels/Map.svelte

@@ -2,9 +2,12 @@
 	import type { KnowledgeMapElement } from '$lib/api';
 	import { onMount } from 'svelte';
 
-	export let element: KnowledgeMapElement;
+	let { element }: { element: KnowledgeMapElement } = $props();
 
 	const MAX_INITIAL_ZOOM = 3;
+	const MAX_ZOOM = 19;
+	const TILES_BASE_URL = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
+	const ATTRIBUTION = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
 
 	onMount(async () => {
 		const { default: L } = await import('leaflet');
@@ -15,16 +18,13 @@
 		);
 
 		map.setZoom(Math.min(map.getZoom(), MAX_INITIAL_ZOOM));
+		L.tileLayer(TILES_BASE_URL, { maxZoom: MAX_ZOOM, attribution: ATTRIBUTION }).addTo(map);
 
-		L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-			maxZoom: 19,
-			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-		}).addTo(map);
 		for (const pointer of element.map_element.pointers) {
 			const marker = L.marker([pointer.geo.lat, pointer.geo.lng]);
 			marker.addTo(map);
 		}
 	});
 </script>
 
-<div id="map" class="h-96 w-full rounded-lg" />
+<div id="map" class="h-96 w-full rounded-lg"></div>

src/lib/knowledgepanels/Panel.svelte

@@ -1,19 +1,70 @@
 <script lang="ts">
-	import type { KnowledgePanel } from '$lib/api';
+	import { dev } from '$app/environment';
+
+	import type { KnowledgeElement, KnowledgePanel, KnowledgePanelTitle } from '$lib/api';
 
-	import Elements from './Elements.svelte';
 	import Card from '$lib/ui/Card.svelte';
-	import { dev } from '$app/environment';
 	import Debug from '$lib/ui/Debug.svelte';
+	import Element from './Element.svelte';
 
-	export let allPanels: Record<string, KnowledgePanel>;
-	export let panel: KnowledgePanel | null;
-	export let id: string;
-	export let link: string | undefined = undefined;
+	type Props = {
+		allPanels: Record<string, KnowledgePanel>;
 
-	let expanded = panel?.expanded ?? false;
+		panel: KnowledgePanel;
+		id: string;
+		link?: string;
+	};
+	let { allPanels, panel, id, link }: Props = $props();
+
+	let expanded = $state(panel?.expanded ?? false);
 </script>
 
+{#snippet elementList(elements: KnowledgeElement[])}
+	{#each elements as element, i}
+		{#if i > 0}
+			<hr class="my-2 border-base-100 bg-base-100" />
+		{/if}
+		<Element {element} {allPanels} />
+	{/each}
+{/snippet}
+
+{#snippet detailsElement(title: KnowledgePanelTitle, elements: KnowledgeElement[])}
+	<details
+		bind:open={expanded}
+		class:border-l-secondary={expanded}
+		class:border-l-2={expanded}
+		class:pl-4={expanded}
+	>
+		<summary
+			class="my-2 flex w-full cursor-pointer select-none items-center rounded-lg p-2 hover:bg-base-200 dark:hover:bg-base-100"
+		>
+			{#if title != null}
+				{#if title.icon_url != null}
+					{#if title.type === 'grade'}
+						<img class="mr-4 h-12" src={title.icon_url} alt={title.title} />
+					{:else}
+						<img
+							class="mr-8 w-8 rounded-md bg-white object-contain"
+							src={title.icon_url}
+							alt={title.title}
+						/>
+					{/if}
+				{/if}
+
+				<div class="grow text-xl">
+					<div>{title.title}</div>
+					{#if title.subtitle != null}
+						<h3 class="text-sm italic text-secondary">{title.subtitle}</h3>
+					{/if}
+				</div>
+			{/if}
+		</summary>
+		{#if panel.elements != null}
+			{@render elementList(panel.elements)}
+		{/if}
+	</details>
+{/snippet}
+
 <div {id}>
 	{#if panel == null}
 		<div class="alert alert-warning">Panel is null</div>
@@ -26,55 +77,16 @@
 				{/if}
 			</div>
 
-			<Elements elements={panel.elements} {allPanels} />
+			{@render elementList(panel.elements)}
 		</Card>
 	{:else if panel.type === 'inline'}
 		{#if panel.elements != null}
-			<div class="pl-4">
-				<Elements elements={panel.elements} {allPanels} />
+			<div class="border-l-2 border-l-secondary pl-4">
+				{@render elementList(panel.elements)}
 			</div>
 		{/if}
 	{:else}
-		<details
-			bind:open={expanded}
-			class:border-l-secondary={expanded}
-			class:border-l-2={expanded}
-			class:pl-2={expanded}
-		>
-			<summary
-				class="my-2 flex w-full cursor-pointer select-none items-center rounded-lg p-2 hover:bg-base-200 dark:hover:bg-base-100"
-			>
-				{#if panel.title_element != null}
-					{#if panel.title_element.icon_url != null}
-						{#if panel.title_element.type === 'grade'}
-							<img
-								class="mr-4 h-12"
-								src={panel.title_element.icon_url}
-								alt={panel.title_element.title}
-							/>
-						{:else}
-							<img
-								class="mr-4 h-8 w-8 rounded-md bg-white object-contain"
-								src={panel.title_element.icon_url}
-								alt={panel.title_element.title}
-							/>
-						{/if}
-					{/if}
-
-					<div class="grow text-xl">
-						<div>{panel.title_element.title}</div>
-						{#if panel.title_element.subtitle != null}
-							<h3 class="text-sm italic text-secondary">{panel.title_element.subtitle}</h3>
-						{/if}
-					</div>
-				{/if}
-			</summary>
-			{#if panel.elements != null}
-				<div class="pl-4">
-					<Elements elements={panel.elements} {allPanels} />
-				</div>
-			{/if}
-		</details>
+		{@render detailsElement(panel.title_element, panel.elements)}
 	{/if}
 
 	{#if dev}

src/lib/knowledgepanels/PanelGroup.svelte

@@ -3,25 +3,29 @@
 	import ImageButton from '$lib/ui/ImageButton.svelte';
 	import Panel from './Panel.svelte';
 
-	export let element: KnowledgePanelGroupElement;
-	export let allPanels: Record<string, KnowledgePanel>;
+	let {
+		element,
+		allPanels
+	}: {
+		element: KnowledgePanelGroupElement;
+		allPanels: Record<string, KnowledgePanel>;
+	} = $props();
+
+	let groupEl = $derived(element.panel_group_element);
 </script>
 
 <div class="flex flex-col gap-4 md:flex-row">
 	<div class="grow">
-		<h3 class="my-3 text-xl font-bold">{element.panel_group_element.title}</h3>
-		{#each element.panel_group_element.panel_ids as id}
+		<h3 class="my-3 text-xl font-bold">{groupEl.title}</h3>
+		{#each groupEl.panel_ids as id}
 			{@const panel = allPanels[id]}
 			<Panel {panel} {allPanels} {id} />
 		{/each}
 	</div>
 
-	{#if element.panel_group_element.image != null}
+	{#if groupEl.image != null}
 		<div class="md:max-w-64">
-			<ImageButton
-				src={element.panel_group_element.image.sizes['full'].url}
-				alt={element.panel_group_element.image.alt}
-			/>
+			<ImageButton src={groupEl.image.sizes['full'].url} alt={groupEl.image.alt} />
 		</div>
 	{/if}
 </div>

src/lib/knowledgepanels/Panels.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
 	import type { KnowledgePanel } from '$lib/api';
-
 	import Panel from './Panel.svelte';
 
-	export let knowledgePanels: Record<string, KnowledgePanel>;
-	$: panelsArray = sort(Object.entries(knowledgePanels));
+	let { knowledgePanels }: { knowledgePanels: Record<string, KnowledgePanel> } = $props();
 
 	function sort(arr: [string, KnowledgePanel][]) {
 		return arr.sort((a, b) => {
@@ -14,7 +12,9 @@
 		});
 	}
 
-	const summaryId = 'knowledge-panels';
+	let panelsArray = $derived(sort(Object.entries(knowledgePanels)));
+
+	const SUMMARY_ID = 'knowledge-panels';
 </script>
 
 <div class="">
@@ -24,7 +24,7 @@
 
 	<div class="mt-3 border-b-2 border-dashed border-secondary"></div>
 
-	<div class="my-4 flex flex-col justify-center gap-4 md:flex-row" id={summaryId}>
+	<div class="my-4 flex flex-col justify-center gap-4 md:flex-row" id={SUMMARY_ID}>
 		{#each panelsArray as [panelKey, panel]}
 			{#if panel.type === 'card'}
 				<a class="btn btn-secondary text-lg" href={'#' + panelKey}>
@@ -39,6 +39,6 @@
 
 {#each panelsArray as [id, panel]}
 	{#if panel.type === 'card'}
-		<Panel {panel} allPanels={knowledgePanels} {id} link={'#' + summaryId} />
+		<Panel {panel} allPanels={knowledgePanels} {id} link={'#' + SUMMARY_ID} />
 	{/if}
 {/each}