breaking: state mutations inside the template are no longer allowed

Author: trueadm

.changeset/wild-chairs-build.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: state mutations inside the template are no longer allowed

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

@@ -325,7 +325,7 @@ export function template_effect(fn) {
 			value: '{expression}'
 		});
 	}
-	return render_effect(fn);
+	return block(fn);
 }
 
 /**

packages/svelte/src/store/shared/index.js

@@ -3,6 +3,8 @@
 import { noop, run_all } from '../../internal/shared/utils.js';
 import { safe_not_equal } from '../../internal/client/reactivity/equality.js';
 import { subscribe_to_store } from '../utils.js';
+import { queue_micro_task } from '../../internal/client/dom/task.js';
+import { active_effect } from '../../internal/client/runtime.js';
 
 /**
  * @type {Array<SubscribeInvalidateTuple<any> | any>}
@@ -168,7 +170,11 @@ export function derived(stores, fn, initial_value) {
 			)
 		);
 		started = true;
-		sync();
+		if (active_effect === null) {
+			sync();
+		} else {
+			queue_micro_task(sync);
+		}
 		return function stop() {
 			run_all(unsubscribers);
 			cleanup();

packages/svelte/tests/runtime-runes/samples/side-effect-template/_config.js

@@ -0,0 +1,14 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		assert.throws(() => {}, /state_unsafe_mutation/);
+	}
+});

packages/svelte/tests/runtime-runes/samples/side-effect-template/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	let items = $state([]);
+</script>
+
+<button onclick={() => items.push(3, 2, 1)}>Add</button>
+{JSON.stringify(items.sort())}
+