Flag for whether to run outro transitions on $destroy

documentation/docs/04-compiler-and-api/02-client-side-component-api.md

@@ -178,17 +178,20 @@ import { SvelteComponent, ComponentConstructorOptions } from 'svelte';
 declare global {
 	class Component extends SvelteComponent {}
 	var component: Component;
+	var run_outro: boolean;
 }
 
 export {}
 
 // @filename: index.ts
 // ---cut---
-component.$destroy();
+component.$destroy(run_outro);
 ```
 
 Removes a component from the DOM and triggers any `onDestroy` handlers.
 
+If `run_outro` is `true`, any outro transitions will play before the component is destroyed.
+
 ## Component props
 
 ```js

packages/svelte/src/runtime/internal/Component.js

@@ -17,7 +17,7 @@ import {
 	element,
 	attr
 } from './dom.js';
-import { transition_in } from './transitions.js';
+import { check_outros, group_outros, transition_in, transition_out } from './transitions.js';
 
 /** @returns {void} */
 export function bind(component, name, callback) {
@@ -455,10 +455,22 @@ export class SvelteComponent {
 	 */
 	$$set = undefined;
 
-	/** @returns {void} */
+	/**
-	$destroy() {
+	 * @param {boolean} [run_outro]
-		destroy_component(this, 1);
+	 * @returns {void}
-		this.$destroy = noop;
+	 */
+	$destroy(run_outro) {
+		if (run_outro && this.$$.fragment && this.$$.fragment.o) {
+			group_outros();
+			transition_out(this.$$.fragment, 0, 0, () => {
+				destroy_component(this, 1);
+				this.$destroy = noop;
+			});
+			check_outros();
+		} else {
+			destroy_component(this, 1);
+			this.$destroy = noop;
+		}
 	}
 
 	/**

packages/svelte/test/runtime/samples/transition-js-destroy/_config.js

@@ -0,0 +1,15 @@
+export default {
+	skip_if_ssr: true,
+	skip_if_hydrate: true,
+	skip_if_hydrate_from_ssr: true,
+	test({ assert, component, target, raf }) {
+		component.$destroy(true);
+
+		return Promise.resolve().then(() => {
+			const div = target.querySelector('div');
+
+			raf.tick(50);
+			assert.equal(div.transitioned, 0.5);
+		});
+	}
+};

packages/svelte/test/runtime/samples/transition-js-destroy/main.svelte

@@ -0,0 +1,14 @@
+<script>
+	function transitionOut(node) {
+		return () => {
+			return {
+				duration: 100,
+				tick: t => {
+					node.transitioned = t;
+				}
+			};
+		};
+	}
+</script>
+
+<div out:transitionOut|global></div>