feat(async-stack): return cleanup callback for onResolve

Author: vnphanquang

.changeset/olive-roses-itch.md

@@ -0,0 +1,5 @@
+---
+'@svelte-put/async-stack': minor
+---
+
+(experimental) `onResolve` now returns callback that removes the listener

packages/async-stack/src/helpers/enhance-dialog.js

@@ -30,24 +30,28 @@ export function enhanceDialog(item, options) {
 		[createAttachmentKey()]: function (dialog) {
 			dialog.showModal();
 
+			// set up listener when user calls item.resolve manually
 			/** @type {undefined | (() => void)}  */
 			let resumeResolution = undefined;
+			/** @type {undefined | (() => void)} */
+			let offResolve = undefined;
+			/** @returns {Promise<void>} */
+			function onResolve() {
+				return new Promise((resolvePromise) => {
+					if (dialog.open) {
+						// user calls `item.resolve(...)`
+						dialog.removeEventListener('close', onclose);
+						if ('requestClose' in dialog) {
+							dialog.requestClose();
+						} else {
+							dialog.close();
+						}
+					}
+					resumeResolution = resolvePromise;
+				});
+			}
 			if (options?.delayResolution) {
-				item.onResolve(
-					() =>
-						new Promise((resolve) => {
-							if (dialog.open) {
-								// user calls `item.resolve(...)`
-								dialog.removeEventListener('close', onclose);
-								if ('requestClose' in dialog) {
-									dialog.requestClose();
-								} else {
-									dialog.close();
-								}
-							}
-							resumeResolution = resolve;
-						}),
-				);
+				offResolve = item.onResolve(onResolve);
 			}
 			function onanimationend() {
 				if (dialog.open) return;
@@ -71,6 +75,7 @@ export function enhanceDialog(item, options) {
 			dialog.addEventListener('close', onclose);
 
 			return () => {
+				offResolve?.();
 				resumeResolution?.();
 				dialog.removeEventListener('animationend', onanimationend);
 				dialog.removeEventListener('click', onclick);

packages/async-stack/src/stack-item.svelte.d.ts

@@ -45,7 +45,9 @@ export class StackItem<
 	 * to stop the resolution flow. Note, however, that other resolve listeners
 	 * will still run to completion.
 	 *
+	 * This also returns a function that can be called to remove the listener.
+	 *
 	 * Note: this feature is experimental and may change at any time.
 	 */
-	onResolve: (callback: StackItemResolveListener<Resolved>) => void;
+	onResolve: (callback: StackItemResolveListener<Resolved>) => () => void;
 }

packages/async-stack/src/stack-item.svelte.js

@@ -77,8 +77,12 @@ export class StackItem {
 
 	/**
 	 * @param {import('./types.public').StackItemResolveListener<Resolved>} callback
+	 * @returns {() => void}
 	 */
 	onResolve = (callback) => {
 		this.#internals.resolveListeners.add(callback);
+		return () => {
+			this.#internals.resolveListeners.delete(callback);
+		};
 	};
 }