Merge pull request #83 from xxmichas/main

fix: blurry toasts, heights store

.changeset/dirty-pigs-kick.md

@@ -0,0 +1,5 @@
+---
+"svelte-sonner": patch
+---
+
+fix: blurry toasts, heights store

src/lib/Toast.svelte

@@ -34,7 +34,7 @@
 		loading: ''
 	};
 
-	const { toasts, heights, removeHeight, addHeight, dismiss } = toastState;
+	const { toasts, heights, removeHeight, setHeight, dismiss } = toastState;
 
 	export let toast: $$Props['toast'];
 	export let index: $$Props['index'];
@@ -88,9 +88,8 @@
 	$: invert = toast.invert || invert;
 	$: disabled = toastType === 'loading';
 
-	$: {
-		offset = heightIndex * GAP + toastsHeightBefore;
-	}
+	// Sometimes toasts are blurry when offset isn't an int
+	$: offset = Math.round(heightIndex * GAP + toastsHeightBefore);
 
 	// Listen to height changes
 	async function updateHeights() {
@@ -109,10 +108,13 @@
 
 		initialHeight = newHeight;
 
-		addHeight({ toastId: toast.id, height: newHeight });
+		setHeight({ toastId: toast.id, height: newHeight });
 	}
 
-	$: mounted, toast.title, toast.description, updateHeights()
+	$: title = toast.title;
+	$: description = toast.description;
+
+	$: mounted, title, description, updateHeights();
 
 	function deleteToast() {
 		removed = true;
@@ -192,7 +194,7 @@
 
 		// Add toast height tot heights array after the toast is mounted
 		initialHeight = height;
-		addHeight({ toastId: toast.id, height });
+		setHeight({ toastId: toast.id, height });
 
 		return () => removeHeight(toast.id);
 	});

src/lib/state.ts

@@ -39,7 +39,15 @@ function createToastState() {
 			toasts.update((prev) =>
 				prev.map((toast) => {
 					if (toast.id === id) {
-						return { ...toast, ...data, id, title: message, dismissable, type, updated: true };
+						return {
+							...toast,
+							...data,
+							id,
+							title: message,
+							dismissable,
+							type,
+							updated: true
+						};
 					}
 					return {
 						...toast,
@@ -163,8 +171,22 @@ function createToastState() {
 		heights.update((prev) => prev.filter((height) => height.toastId !== id));
 	}
 
-	function addHeight(height: HeightT) {
-		heights.update((prev) => [height, ...prev]);
+	function setHeight(data: HeightT) {
+		const exists = get(heights).find((el) => el.toastId === data.toastId);
+		if (exists === undefined) {
+			heights.update((prev) => [data, ...prev]);
+			return;
+		}
+
+		heights.update((prev) =>
+			prev.map((el) => {
+				if (el.toastId === data.toastId) {
+					return data;
+				} else {
+					return el;
+				}
+			})
+		);
 	}
 
 	function reset() {
@@ -186,7 +208,7 @@ function createToastState() {
 		promise,
 		custom,
 		removeHeight,
-		addHeight,
+		setHeight,
 		reset,
 		// stores
 		toasts,