feat: parameter for running 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 options: { runOutro: boolean } | undefined;
 }
 
 export {}
 
 // @filename: index.ts
 // ---cut---
-component.$destroy();
+component.$destroy(options);
 ```
 
 Removes a component from the DOM and triggers any `onDestroy` handlers.
 
+`options` may contain the property `runOutro` which indicates whether to play any outro transitions 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() {
-		destroy_component(this, 1);
-		this.$destroy = noop;
+	/**
+	 * @param {import('./private.js').ComponentDestroyOptions} [options]
+	 * @returns {void}
+	 */
+	$destroy(options) {
+		if (options?.runOutro && 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/src/runtime/internal/dev.js

@@ -331,9 +331,12 @@ export class SvelteComponentDev extends SvelteComponent {
 		super();
 	}
 
-	/** @returns {void} */
-	$destroy() {
-		super.$destroy();
+	/**
+	 * @param {import('./private.js').ComponentDestroyOptions} [options]
+	 * @returns {void}
+	 */
+	$destroy(options) {
+		super.$destroy(options);
 		this.$destroy = () => {
 			console.warn('Component was already destroyed'); // eslint-disable-line no-console
 		};

packages/svelte/src/runtime/internal/private.d.ts

@@ -75,6 +75,10 @@ export interface StyleInformation {
 	rules: Record<string, true>;
 }
 
+export interface ComponentDestroyOptions {
+	runOutro?: boolean;
+}
+
 export type TaskCallback = (now: number) => boolean | void;
 
 export type TaskEntry = { c: TaskCallback; f: () => void };

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({ runOutro: 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>