Merge pull request #45 from huntabyte/fix/35

.changeset/gorgeous-weeks-trade.md

@@ -0,0 +1,5 @@
+---
+"svelte-sonner": patch
+---
+
+fix: toast dismissing immediately after update

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,50 @@
+name: '🐛 Bug report'
+description: Report an issue with svelte-sonner
+labels: ['type: bug']
+body:
+    - type: markdown
+      attributes:
+          value: |
+              Thanks for taking the time to fill out this bug report!
+    - type: textarea
+      id: bug-description
+      attributes:
+          label: Describe the bug
+          description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us how in the description. Thanks!
+          placeholder: Bug description
+      validations:
+          required: true
+    - type: textarea
+      id: reproduction
+      attributes:
+          label: Reproduction
+          description: Please provide a link to a repo or Stackblitz that can reproduce the problem you ran into. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided within a reasonable time-frame, the issue will be closed.
+          placeholder: Reproduction
+      validations:
+          required: true
+    - type: textarea
+      id: logs
+      attributes:
+          label: Logs
+          description: 'Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text.'
+          render: bash
+    - type: textarea
+      id: system-info
+      attributes:
+          label: System Info
+          description: Output of `npx envinfo --system --npmPackages svelte,svelte-sonner,@sveltejs/kit --binaries --browsers`
+          render: bash
+          placeholder: System, Binaries, Browsers
+      validations:
+          required: true
+    - type: dropdown
+      id: severity
+      attributes:
+          label: Severity
+          description: Select the severity of this issue
+          options:
+              - annoyance
+              - blocking an upgrade
+              - blocking all usage of svelte-sonner
+      validations:
+          required: true

.github/ISSUE_TEMPLATE/documentation_change.yml

@@ -0,0 +1,22 @@
+name: 📖 Report Docs Issue
+description: Suggest an addition or modification to the documentation
+labels: ["type: documentation"]
+body:
+  - type: dropdown
+    attributes:
+      label: Change Type
+      description: What type of change are you proposing?
+      options:
+        - Addition
+        - Correction
+        - Removal
+        - Cleanup (formatting, typos, etc.)
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Proposed Changes
+      description: Describe the proposed changes and why they are necessary
+    validations:
+      required: true

CHANGELOG.md

@@ -4,16 +4,16 @@
 
 ### Patch Changes
 
-- 23d87bc: Custom components properties propagation when it is used in toast of predefined types.
+-   23d87bc: Custom components properties propagation when it is used in toast of predefined types.
 
 ## 0.3.10
 
 ### Patch Changes
 
-- [#40](https://github.com/wobsoriano/svelte-sonner/pull/40): Custom components properties propagation when it is used in toast of predefined types.
+-   [#40](https://github.com/wobsoriano/svelte-sonner/pull/40): Custom components properties propagation when it is used in toast of predefined types.
 
 ## 0.3.9
 
 ### Patch Changes
 
-- c997d85: fix: toasts being dismissed early & add `clientWritable`
+-   c997d85: fix: toasts being dismissed early & add `clientWritable`

src/lib/Toast.svelte

@@ -76,8 +76,7 @@
 
 	let offset = 0;
 	let closeTimerStartTimeRef = 0;
-	let closeTimerRemainingTimeRef =
-		toast.duration || duration || TOAST_LIFETIME;
+
 	let lastCloseTimerStartTimeRef = 0;
 	let pointerStartRef: { x: number; y: number } | null = null;
 
@@ -109,14 +108,33 @@
 
 	let timeoutId: ReturnType<typeof setTimeout>;
 
+	let remainingTime = toast.duration || duration || TOAST_LIFETIME;
+
+	let toastUpdateCount = 0;
+
+	$: if (toast) {
+		toastUpdateCount++;
+	}
+
+	$: if (toastUpdateCount > 1 && timeoutId) {
+		// if the toast has been updated after the initial render,
+		// we want to reset the timer and set the remaining time to the
+		// new duration
+		clearTimeout(timeoutId);
+		remainingTime = toast.duration || duration || TOAST_LIFETIME;
+		startTimer();
+	}
+
+	// If toast's duration changes, it will be out of sync with the
+	// remainingAtTimeout, so we know we need to restart the timer
+	// with the new duration
+
 	// Pause the tmer on each hover
 	function pauseTimer() {
 		if (lastCloseTimerStartTimeRef < closeTimerStartTimeRef) {
 			// Get the elapsed time since the timer started
 			const elapsedTime = new Date().getTime() - closeTimerStartTimeRef;
-
-			closeTimerRemainingTimeRef =
-				closeTimerRemainingTimeRef - elapsedTime;
+			remainingTime = remainingTime - elapsedTime;
 		}
 
 		lastCloseTimerStartTimeRef = new Date().getTime();
@@ -128,7 +146,7 @@
 		timeoutId = setTimeout(() => {
 			toast.onAutoClose?.(toast);
 			deleteToast();
-		}, closeTimerRemainingTimeRef);
+		}, remainingTime);
 	}
 
 	$: isPromiseLoadingOrInfiniteDuration =

src/lib/Toaster.svelte

@@ -95,7 +95,6 @@
 
 			if (isHotkeyPressed) {
 				expanded = true;
-				console.log('hotkeypressed');
 				listRef?.focus();
 			}
 

src/tests/toast.spec.ts

@@ -61,4 +61,70 @@ describe('Toast', () => {
 		await sleep(100);
 		expect(document.activeElement).toBeInstanceOf(HTMLOListElement);
 	});
+
+	it('should not immediately close the toast when reset', async () => {
+		const { user, trigger, getByText, queryByText } = setup({
+			cb: (toast) => {
+				const id = toast('Loading', { duration: 4000 });
+
+				setTimeout(() => {
+					toast.success('Finished loading!', { id });
+				}, 1000);
+			}
+		});
+
+		await user.click(trigger);
+		expect(getByText('Loading')).toBeVisible();
+		await sleep(2050);
+		expect(queryByText('Loading')).toBeNull();
+		expect(getByText('Finished loading!')).toBeVisible();
+		await sleep(1000);
+		expect(getByText('Finished loading!')).toBeVisible();
+	});
+
+	it('should reset duration on a toast update', async () => {
+		const { user, trigger, getByText, queryByText } = setup({
+			cb: (toast) => {
+				const id = toast('Loading', { duration: 1000 });
+
+				setTimeout(() => {
+					toast.success('Finished loading!', { id });
+				}, 750);
+			}
+		});
+
+		await user.click(trigger);
+		expect(getByText('Loading')).toBeVisible();
+		await sleep(800);
+		expect(queryByText('Loading')).toBeNull();
+		expect(getByText('Finished loading!')).toBeVisible();
+		// there would only be ~.5 second left on the original toast
+		// so we're gonna wait 2 seconds to make sure the timer is reset
+		await sleep(600);
+		expect(getByText('Finished loading!')).toBeVisible();
+		// finally we'll wait another 1500ms to make sure the toast closes after 2 seconds
+		// since the original toast had a duration of 2 seconds
+		await sleep(600);
+		expect(queryByText('Finished loading!')).toBeNull();
+	});
+
+	it('should allow duration updates on toast update', async () => {
+		const { user, trigger, getByText, queryByText } = setup({
+			cb: (toast) => {
+				const id = toast('Loading', { duration: 2000 });
+
+				setTimeout(() => {
+					toast.success('Finished loading!', { id, duration: 4000 });
+				}, 1000);
+			}
+		});
+
+		await user.click(trigger);
+		expect(getByText('Loading')).toBeVisible();
+		await sleep(1200);
+		expect(queryByText('Loading')).toBeNull();
+		expect(getByText('Finished loading!')).toBeVisible();
+		await sleep(2200);
+		expect(getByText('Finished loading!')).toBeVisible();
+	});
 });