fix: destroy effect on error (#12376)

fixes #12360

---------

Co-authored-by: Simon Holthausen <[email protected]>

Author: Rich-Harris

.changeset/small-chefs-sing.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: destroy effects that error on creation

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

@@ -109,6 +109,9 @@ function create_effect(type, fn, sync, push = true) {
 			set_is_flushing_effect(true);
 			update_effect(effect);
 			effect.f |= EFFECT_RAN;
+		} catch (e) {
+			destroy_effect(effect);
+			throw e;
 		} finally {
 			set_is_flushing_effect(previously_flushing_effect);
 		}

packages/svelte/tests/runtime-legacy/shared.ts

@@ -104,7 +104,10 @@ export function runtime_suite(runes: boolean) {
 				if (config.skip_mode?.includes('hydrate')) return true;
 			}
 
-			if (variant === 'dom' && config.skip_mode?.includes('client')) {
+			if (
+				variant === 'dom' &&
+				(config.skip_mode?.includes('client') || (config.mode && !config.mode.includes('client')))
+			) {
 				return 'no-test';
 			}
 

packages/svelte/tests/runtime-runes/samples/event-global-hydration-error-cleanup/_config.js

@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<p><p>invalid</p></p>',
+	mode: ['hydrate'],
+	recover: true,
+	test({ assert, target, logs }) {
+		target.click();
+		flushSync();
+		assert.deepEqual(logs, ['body', 'document', 'window']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/event-global-hydration-error-cleanup/main.svelte

@@ -0,0 +1,5 @@
+<svelte:window onclick={() => console.log('window')} />
+<svelte:document onclick={() => console.log('document')} />
+<svelte:body onclick={() => console.log('body')} />
+
+<p>{@html '<p>invalid</p>'}</p>

packages/svelte/tests/runtime-runes/samples/event-global-mount-error-cleanup/Inner.svelte

@@ -0,0 +1,3 @@
+<script>
+	throw new Error('boom');
+</script>

packages/svelte/tests/runtime-runes/samples/event-global-mount-error-cleanup/Outer.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Inner from './Inner.svelte';
+</script>
+
+<svelte:window onclick={() => console.log('window')} />
+<svelte:document onclick={() => console.log('document')} />
+<svelte:body onclick={() => console.log('body')} />
+
+<Inner />

packages/svelte/tests/runtime-runes/samples/event-global-mount-error-cleanup/_config.js

@@ -0,0 +1,11 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	test({ assert, target, logs }) {
+		target.click();
+		flushSync();
+		assert.deepEqual(logs, []);
+	}
+});

packages/svelte/tests/runtime-runes/samples/event-global-mount-error-cleanup/main.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { mount, onMount } from 'svelte';
+	import Outer from './Outer.svelte';
+
+	let el;
+
+	onMount(() => {
+		try {
+			mount(Outer, { target: el });
+		} catch {}
+	});
+</script>
+
+<div bind:this={el}></div>