allow setup to return a teardown function

Rich-Harris · Rich-Harris · commit 7239cbbcccf6 · 2024-07-16T20:47:38.000-04:00
diff --git a/packages/svelte/src/internal/client/dom/blocks/snippet.js b/packages/svelte/src/internal/client/dom/blocks/snippet.js
@@ -3,7 +3,7 @@
 /** @import { Getters } from '#shared' */
 import { add_snippet_symbol } from '../../../shared/validate.js';
 import { EFFECT_TRANSPARENT } from '../../constants.js';
-import { branch, block, destroy_effect } from '../../reactivity/effects.js';
+import { branch, block, destroy_effect, teardown } from '../../reactivity/effects.js';
 import {
 	dev_current_component_function,
 	set_dev_current_component_function
@@ -92,8 +92,12 @@ export function createRawSnippet(fn) {
 				anchor.before(element);
 			}
 
-			snippet.setup?.(element);
+			const result = snippet.setup?.(element);
 			assign_nodes(element, element);
+
+			if (typeof result === 'function') {
+				teardown(result);
+			}
 		}
 	);
 }
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-raw-teardown/_config.js b/packages/svelte/tests/runtime-runes/samples/snippet-raw-teardown/_config.js
@@ -0,0 +1,11 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ target, assert, logs }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.deepEqual(logs, ['tearing down']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/snippet-raw-teardown/main.svelte b/packages/svelte/tests/runtime-runes/samples/snippet-raw-teardown/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { createRawSnippet } from 'svelte';
+
+	let show = $state(true);
+
+	const snippet = createRawSnippet(() => ({
+		render: () => `<hr>`,
+		setup(p) {
+			return () => console.log('tearing down')
+		}
+	}));
+</script>
+
+<button onclick={() => show = !show}>click</button>
+
+{#if show}
+	{@render snippet()}
+{/if}
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
@@ -122,7 +122,7 @@ The `setup` function is called during `mount` or `hydrate` with that same elemen
 {@render greet(name)}
 ```
 
-If the snippet is fully static, you can omit the `setup` function.
+If `setup` returns a function, it will be called when the snippet is unmounted. If the snippet is fully static, you can omit the `setup` function altogether.
 
 ## `svelte/reactivity`
 
