Merge branch 'main' into svelte-custom-renderer

.changeset/hip-flowers-give.md

@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: do not dispatch introstart event with animation of animate directive

packages/svelte/CHANGELOG.md

@@ -1,5 +1,13 @@
 # svelte
 
+## 5.55.5
+
+### Patch Changes
+
+- fix: don't mark deriveds while an effect is updating ([#18124](https://github.com/sveltejs/svelte/pull/18124))
+
+- fix: do not dispatch introstart event with animation of animate directive ([#18122](https://github.com/sveltejs/svelte/pull/18122))
+
 ## 5.55.4
 
 ### Patch Changes

packages/svelte/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.55.4",
+  "version": "5.55.5",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {

packages/svelte/src/internal/client/constants.js

@@ -48,7 +48,8 @@ export const EFFECT_OFFSCREEN = 1 << 25;
 /**
  * Tells that we marked this derived and its reactions as visited during the "mark as (maybe) dirty"-phase.
  * Will be lifted during execution of the derived and during checking its dirty state (both are necessary
- * because a derived might be checked but not executed).
+ * because a derived might be checked but not executed). This is a pure performance optimization flag and
+ * should not be used for any other purpose!
  */
 export const WAS_MARKED = 1 << 16;
 

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

@@ -27,7 +27,8 @@ import {
 	ROOT_EFFECT,
 	ASYNC,
 	WAS_MARKED,
-	CONNECTED
+	CONNECTED,
+	REACTION_IS_UPDATING
 } from '#client/constants';
 import * as e from '../errors.js';
 import { legacy_mode_flag, tracing_mode_flag } from '../../flags/index.js';
@@ -356,8 +357,11 @@ function mark_reactions(signal, status, updated_during_traversal) {
 			batch_values?.delete(derived);
 
 			if ((flags & WAS_MARKED) === 0) {
-				// Only connected deriveds can be reliably unmarked right away
+				// Only connected deriveds being executed outside the update cycle can be reliably unmarked right away
-				if (flags & CONNECTED) {
+				if (
+					flags & CONNECTED &&
+					(active_effect === null || (active_effect.f & REACTION_IS_UPDATING) === 0)
+				) {
 					reaction.f |= WAS_MARKED;
 				}
 

packages/svelte/src/version.js

@@ -4,5 +4,5 @@
  * The current version, as set in package.json.
  * @type {string}
  */
-export const VERSION = '5.55.4';
+export const VERSION = '5.55.5';
 export const PUBLIC_VERSION = '5';

packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/Child.svelte

@@ -0,0 +1,7 @@
+<script>
+    import { store } from "./store.svelte.js";
+
+    // This write marks the derived in main.svelte before it has reactions added to it.
+    // This test checks that this does not cause the WAS_MARKED logic to incorrectly skip marking the derived subsequently.
+    store.set("child-init-write", Math.random());
+</script>

packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/_config.js

@@ -0,0 +1,29 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [show, hide] = target.querySelectorAll('button');
+
+		hide.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>show</button>
+			<button>hide</button>
+		`
+		);
+
+		show.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>show</button>
+			<button>hide</button>
+			<div>visible</div>
+		`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/main.svelte

@@ -0,0 +1,14 @@
+<script>
+    import Child from "./Child.svelte";
+    import { store } from "./store.svelte.js";
+
+    const visible = $derived(store.get("visible"));
+    const visible2 = $derived(visible);
+</script>
+
+<button onclick={() => store.set("visible", true)}>show</button>
+<button onclick={() => store.set("visible", false)}>hide</button>
+{#if visible2}
+	<Child />
+	<div>visible</div>
+{/if}

packages/svelte/tests/runtime-runes/samples/derived-dep-set-while-rendering/store.svelte.js

@@ -0,0 +1,13 @@
+class RawStore {
+	values = $state.raw({ visible: true });
+
+	get(key) {
+		return this.values[key];
+	}
+
+	set(key, value) {
+		this.values = { ...this.values, [key]: value };
+	}
+}
+
+export const store = new RawStore();