return a promise

Author: Rich-Harris

documentation/docs/06-runtime/04-imperative-component-api.md

@@ -47,6 +47,8 @@ const app = mount(App, { target: document.body });
 unmount(app, { outro: true });
 ```
 
+Returns a `Promise` that resolves after transitions have completed if `options.outro` is true, or immediately otherwise.
+
 ## `render`
 
 Only available on the server and when compiling with the `server` option. Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app:

packages/svelte/src/internal/client/reactivity/effects.js

@@ -257,19 +257,23 @@ export function effect_root(fn) {
 /**
  * An effect root whose children can transition out
  * @param {() => void} fn
- * @returns {(options?: { outro?: boolean }) => void}
+ * @returns {(options?: { outro?: boolean }) => Promise<void>}
  */
 export function component_root(fn) {
 	const effect = create_effect(ROOT_EFFECT, fn, true);
 
 	return (options = {}) => {
-		if (options.outro) {
-			pause_effect(effect, () => {
+		return new Promise((fulfil) => {
+			if (options.outro) {
+				pause_effect(effect, () => {
+					destroy_effect(effect);
+					fulfil(undefined);
+				});
+			} else {
 				destroy_effect(effect);
-			});
-		} else {
-			destroy_effect(effect);
-		}
+				fulfil(undefined);
+			}
+		});
 	};
 }
 

packages/svelte/src/internal/client/render.js

@@ -274,6 +274,8 @@ let mounted_components = new WeakMap();
  *
  * If `options.outro` is `true`, [transitions](https://svelte.dev/docs/svelte/transition) will play before the component is removed from the DOM.
  *
+ * Returns a `Promise` that resolves after transitions have completed if `options.outro` is true, or immediately otherwise.
+ *
  * ```js
  * import { mount, unmount } from 'svelte';
  * import App from './App.svelte';
@@ -285,13 +287,18 @@ let mounted_components = new WeakMap();
  * ```
  * @param {Record<string, any>} component
  * @param {{ outro?: boolean }} [options]
+ * @returns {Promise<void>}
  */
 export function unmount(component, options) {
 	const fn = mounted_components.get(component);
 
 	if (fn) {
-		fn(options);
-	} else if (DEV) {
+		return fn(options);
+	}
+
+	if (DEV) {
 		w.lifecycle_double_unmount();
 	}
+
+	return Promise.resolve();
 }

packages/svelte/types/index.d.ts

@@ -451,6 +451,8 @@ declare module 'svelte' {
 	 *
 	 * If `options.outro` is `true`, [transitions](https://svelte.dev/docs/svelte/transition) will play before the component is removed from the DOM.
 	 *
+	 * Returns a `Promise` that resolves after transitions have completed if `options.outro` is true, or immediately otherwise.
+	 *
 	 * ```js
 	 * import { mount, unmount } from 'svelte';
 	 * import App from './App.svelte';
@@ -460,11 +462,10 @@ declare module 'svelte' {
 	 * // later...
 	 * unmount(app, { outro: true });
 	 * ```
-	 * 
-	 */
+	 * */
 	export function unmount(component: Record<string, any>, options?: {
 		outro?: boolean;
-	} | undefined): void;
+	} | undefined): Promise<void>;
 	/**
 	 * Returns a promise that resolves once any pending state changes have been applied.
 	 * */