Merge branch 'main' into deriveds-in-constructor

Rich-Harris · Rich-Harris · commit 4b8b0386a0a5 · 2025-03-21T10:17:16.000-04:00
diff --git a/.changeset/dirty-pianos-sparkle.md b/.changeset/dirty-pianos-sparkle.md
diff --git a/.changeset/nine-laws-rush.md b/.changeset/nine-laws-rush.md
diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md
@@ -74,6 +74,8 @@ Teardown functions also run when the effect is destroyed, which happens when its
 
 `$effect` automatically picks up any reactive values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body (including indirectly, via function calls) and registers them as dependencies. When those dependencies change, the `$effect` schedules a re-run.
 
+If `$state` and `$derived` are used directly inside the `$effect` (for example, during creation of a [reactive class](https://svelte.dev/docs/svelte/$state#Classes)), those values will _not_ be treated as dependencies.
+
 Values that are read _asynchronously_ — after an `await` or inside a `setTimeout`, for example — will not be tracked. Here, the canvas will be repainted when `color` changes, but not when `size` changes ([demo](/playground/untitled#H4sIAAAAAAAAE31T246bMBD9lZF3pWSlBEirfaEQqdo_2PatVIpjBrDkGGQPJGnEv1e2IZfVal-wfHzmzJyZ4cIqqdCy9M-F0blDlnqArZjmB3f72XWRHVCRw_bc4me4aDWhJstSlllhZEfbQhekkMDKfwg5PFvihMvX5OXH_CJa1Zrb0-Kpqr5jkiwC48rieuDWQbqgZ6wqFLRcvkC-hYvnkWi1dWqa8ESQTxFRjfQWsOXiWzmr0sSLhEJu3p1YsoJkNUcdZUnN9dagrBu6FVRQHAM10sJRKgUG16bXcGxQ44AGdt7SDkTDdY02iqLHnJVU6hedlWuIp94JW6Tf8oBt_8GdTxlF0b4n0C35ZLBzXb3mmYn3ae6cOW74zj0YVzDNYXRHFt9mprNgHfZSl6mzml8CMoLvTV6wTZIUDEJv5us2iwMtiJRyAKG4tXnhl8O0yhbML0Wm-B7VNlSSSd31BG7z8oIZZ6dgIffAVY_5xdU9Qrz1Bnx8fCfwtZ7v8Qc9j3nB8PqgmMWlHIID6-bkVaPZwDySfWtKNGtquxQ23Qlsq2QJT0KIqb8dL0up6xQ2eIBkAg_c1FI_YqW0neLnFCqFpwmreedJYT7XX8FVOBfwWRhXstZrSXiwKQjUhOZeMIleb5JZfHWn2Yq5pWEpmR7Hv-N_wEqT8hEEAAA=)):
 
 ```ts
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,21 @@
 # svelte
 
+## 5.24.0
+
+### Minor Changes
+
+- feat: allow state created in deriveds/effects to be written/read locally without self-invalidation ([#15553](https://github.com/sveltejs/svelte/pull/15553))
+
+### Patch Changes
+
+- fix: check if DOM prototypes are extensible ([#15569](https://github.com/sveltejs/svelte/pull/15569))
+
+- Keep inlined trailing JSDoc comments of properties when running svelte-migrate ([#15567](https://github.com/sveltejs/svelte/pull/15567))
+
+- fix: simplify set calls for proxyable values ([#15548](https://github.com/sveltejs/svelte/pull/15548))
+
+- fix: don't depend on deriveds created inside the current reaction ([#15564](https://github.com/sveltejs/svelte/pull/15564))
+
 ## 5.23.2
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.23.2",
+  "version": "5.24.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
@@ -1592,7 +1592,6 @@ function extract_type_and_comment(declarator, state, path) {
 	const comment_start = /** @type {any} */ (comment_node)?.start;
 	const comment_end = /** @type {any} */ (comment_node)?.end;
 	let comment = comment_node && str.original.substring(comment_start, comment_end);
-
 	if (comment_node) {
 		str.update(comment_start, comment_end, '');
 	}
@@ -1673,6 +1672,11 @@ function extract_type_and_comment(declarator, state, path) {
 		state.has_type_or_fallback = true;
 		const match = /@type {(.+)}/.exec(comment_node.value);
 		if (match) {
+			// try to find JSDoc comments after a hyphen `-`
+			const jsdoc_comment = /@type {.+} (?:\w+|\[.*?\]) - (.+)/.exec(comment_node.value);
+			if (jsdoc_comment) {
+				cleaned_comment += jsdoc_comment[1]?.trim();
+			}
 			return {
 				type: match[1],
 				comment: cleaned_comment,
@@ -1693,7 +1697,6 @@ function extract_type_and_comment(declarator, state, path) {
 			};
 		}
 	}
-
 	return {
 		type: 'any',
 		comment: state.uses_ts ? comment : cleaned_comment,
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
@@ -2,7 +2,7 @@
 import { hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import { DEV } from 'esm-env';
 import { init_array_prototype_warnings } from '../dev/equality.js';
-import { get_descriptor } from '../../shared/utils.js';
+import { get_descriptor, is_extensible } from '../../shared/utils.js';
 
 // export these for reference in the compiled code, making global name deduplication unnecessary
 /** @type {Window} */
@@ -34,26 +34,31 @@ export function init_operations() {
 
 	var element_prototype = Element.prototype;
 	var node_prototype = Node.prototype;
+	var text_prototype = Text.prototype;
 
 	// @ts-ignore
 	first_child_getter = get_descriptor(node_prototype, 'firstChild').get;
 	// @ts-ignore
 	next_sibling_getter = get_descriptor(node_prototype, 'nextSibling').get;
 
-	// the following assignments improve perf of lookups on DOM nodes
-	// @ts-expect-error
-	element_prototype.__click = undefined;
-	// @ts-expect-error
-	element_prototype.__className = undefined;
-	// @ts-expect-error
-	element_prototype.__attributes = null;
-	// @ts-expect-error
-	element_prototype.__style = undefined;
-	// @ts-expect-error
-	element_prototype.__e = undefined;
-
-	// @ts-expect-error
-	Text.prototype.__t = undefined;
+	if (is_extensible(element_prototype)) {
+		// the following assignments improve perf of lookups on DOM nodes
+		// @ts-expect-error
+		element_prototype.__click = undefined;
+		// @ts-expect-error
+		element_prototype.__className = undefined;
+		// @ts-expect-error
+		element_prototype.__attributes = null;
+		// @ts-expect-error
+		element_prototype.__style = undefined;
+		// @ts-expect-error
+		element_prototype.__e = undefined;
+	}
+
+	if (is_extensible(text_prototype)) {
+		// @ts-expect-error
+		text_prototype.__t = undefined;
+	}
 
 	if (DEV) {
 		// @ts-expect-error
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
@@ -101,7 +101,7 @@ export {
 	text,
 	props_id
 } from './dom/template.js';
-export { derived, derived_safe_equal } from './reactivity/deriveds.js';
+export { user_derived as derived, derived_safe_equal } from './reactivity/deriveds.js';
 export {
 	effect_tracking,
 	effect_root,
@@ -113,14 +113,7 @@ export {
 	user_effect,
 	user_pre_effect
 } from './reactivity/effects.js';
-export {
-	mutable_source,
-	mutate,
-	set,
-	source as state,
-	update,
-	update_pre
-} from './reactivity/sources.js';
+export { mutable_source, mutate, set, state, update, update_pre } from './reactivity/sources.js';
 export {
 	prop,
 	rest_props,
diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js
@@ -10,7 +10,7 @@ import {
 	object_prototype
 } from '../shared/utils.js';
 import { check_ownership, widen_ownership } from './dev/ownership.js';
-import { source, set } from './reactivity/sources.js';
+import { state as source, set } from './reactivity/sources.js';
 import { STATE_SYMBOL, STATE_SYMBOL_METADATA } from './constants.js';
 import { UNINITIALIZED } from '../../constants.js';
 import * as e from './errors.js';
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -8,7 +8,8 @@ import {
 	skip_reaction,
 	update_reaction,
 	increment_write_version,
-	set_active_effect
+	set_active_effect,
+	push_reaction_value
 } from '../runtime.js';
 import { equals, safe_equals } from './equality.js';
 import * as e from '../errors.js';
@@ -61,6 +62,19 @@ export function derived(fn) {
 	return signal;
 }
 
+/**
+ * @template V
+ * @param {() => V} fn
+ * @returns {Derived<V>}
+ */
+export function user_derived(fn) {
+	const d = derived(fn);
+
+	push_reaction_value(d);
+
+	return d;
+}
+
 /**
  * @template V
  * @param {() => V} fn
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -15,7 +15,8 @@ import {
 	set_reaction_sources,
 	check_dirtiness,
 	untracking,
-	is_destroying_effect
+	is_destroying_effect,
+	push_reaction_value
 } from '../runtime.js';
 import { equals, safe_equals } from './equality.js';
 import {
@@ -64,14 +65,6 @@ export function source(v, stack) {
 		wv: 0
 	};
 
-	if (active_reaction !== null && active_reaction.f & EFFECT_IS_UPDATING) {
-		if (reaction_sources === null) {
-			set_reaction_sources([signal]);
-		} else {
-			reaction_sources.push(signal);
-		}
-	}
-
 	if (DEV && tracing_mode_flag) {
 		signal.created = stack ?? get_stack('CreatedAt');
 		signal.debug = null;
@@ -80,6 +73,19 @@ export function source(v, stack) {
 	return signal;
 }
 
+/**
+ * @template V
+ * @param {V} v
+ * @param {Error | null} [stack]
+ */
+export function state(v, stack) {
+	const s = source(v, stack);
+
+	push_reaction_value(s);
+
+	return s;
+}
+
 /**
  * @template V
  * @param {V} initial_value
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
@@ -101,6 +101,17 @@ export function set_reaction_sources(sources) {
 	reaction_sources = sources;
 }
 
+/** @param {Value} value */
+export function push_reaction_value(value) {
+	if (active_reaction !== null && active_reaction.f & EFFECT_IS_UPDATING) {
+		if (reaction_sources === null) {
+			set_reaction_sources([value]);
+		} else {
+			reaction_sources.push(value);
+		}
+	}
+}
+
 /**
  * The dependencies of the reaction that is currently being executed. In many cases,
  * the dependencies are unchanged between runs, and so this will be `null` unless
@@ -875,21 +886,23 @@ export function get(signal) {
 
 	// Register the dependency on the current reaction signal.
 	if (active_reaction !== null && !untracking) {
-		var deps = active_reaction.deps;
-		if (signal.rv < read_version) {
-			signal.rv = read_version;
-			// If the signal is accessing the same dependencies in the same
-			// order as it did last time, increment `skipped_deps`
-			// rather than updating `new_deps`, which creates GC cost
-			if (new_deps === null && deps !== null && deps[skipped_deps] === signal) {
-				skipped_deps++;
-			} else if (new_deps === null) {
-				new_deps = [signal];
-			} else if (!skip_reaction || !new_deps.includes(signal)) {
-				// Normally we can push duplicated dependencies to `new_deps`, but if we're inside
-				// an unowned derived because skip_reaction is true, then we need to ensure that
-				// we don't have duplicates
-				new_deps.push(signal);
+		if (!reaction_sources?.includes(signal)) {
+			var deps = active_reaction.deps;
+			if (signal.rv < read_version) {
+				signal.rv = read_version;
+				// If the signal is accessing the same dependencies in the same
+				// order as it did last time, increment `skipped_deps`
+				// rather than updating `new_deps`, which creates GC cost
+				if (new_deps === null && deps !== null && deps[skipped_deps] === signal) {
+					skipped_deps++;
+				} else if (new_deps === null) {
+					new_deps = [signal];
+				} else if (!skip_reaction || !new_deps.includes(signal)) {
+					// Normally we can push duplicated dependencies to `new_deps`, but if we're inside
+					// an unowned derived because skip_reaction is true, then we need to ensure that
+					// we don't have duplicates
+					new_deps.push(signal);
+				}
 			}
 		}
 	} else if (
diff --git a/packages/svelte/src/internal/shared/utils.js b/packages/svelte/src/internal/shared/utils.js
@@ -10,6 +10,7 @@ export var get_descriptors = Object.getOwnPropertyDescriptors;
 export var object_prototype = Object.prototype;
 export var array_prototype = Array.prototype;
 export var get_prototype_of = Object.getPrototypeOf;
+export var is_extensible = Object.isExtensible;
 
 /**
  * @param {any} thing
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
@@ -4,5 +4,5 @@
  * The current version, as set in package.json.
  * @type {string}
  */
-export const VERSION = '5.23.2';
+export const VERSION = '5.24.0';
 export const PUBLIC_VERSION = '5';
diff --git a/packages/svelte/tests/migrate/samples/jsdoc-with-comments/input.svelte b/packages/svelte/tests/migrate/samples/jsdoc-with-comments/input.svelte
@@ -21,6 +21,9 @@
 	 */
 	export let type_no_comment;
 
+	/** @type {boolean} type_with_comment - One-line declaration with comment */
+	export let type_with_comment;
+
 	/**
 	 * This is optional
 	 */
@@ -40,4 +43,10 @@
 	export let inline_multiline_trailing_comment = 'world'; /*
 	* this is a same-line trailing multiline comment
 	**/
+
+	/** @type {number} [default_value=1] */
+	export let default_value = 1;
+
+	/** @type {number} [comment_default_value=1] - This has a comment and an optional value. */
+	export let comment_default_value = 1;
 </script>
diff --git a/packages/svelte/tests/migrate/samples/jsdoc-with-comments/output.svelte b/packages/svelte/tests/migrate/samples/jsdoc-with-comments/output.svelte
@@ -9,24 +9,33 @@
 	
 
 	
+
+	
+	
+
 	
 
 	
 
+
 	
 
+	
 	/**
 	 * @typedef {Object} Props
 	 * @property {string} comment - My wonderful comment
 	 * @property {number} another_comment - My wonderful other comment
 	 * @property {any} one_line - one line comment
 	 * @property {any} no_comment
 	 * @property {boolean} type_no_comment
+	 * @property {boolean} type_with_comment - One-line declaration with comment
 	 * @property {any} [optional] - This is optional
 	 * @property {any} inline_commented - this should stay a comment
 	 * @property {any} inline_commented_merged - This comment should be merged - with this inline comment
 	 * @property {string} [inline_multiline_leading_comment] - this is a same-line leading multiline comment
 	 * @property {string} [inline_multiline_trailing_comment] - this is a same-line trailing multiline comment
+	 * @property {number} [default_value]
+	 * @property {number} [comment_default_value] - This has a comment and an optional value.
 	 */
 
 	/** @type {Props} */
@@ -36,10 +45,13 @@
 		one_line,
 		no_comment,
 		type_no_comment,
+		type_with_comment,
 		optional = {stuff: true},
 		inline_commented,
 		inline_commented_merged,
 		inline_multiline_leading_comment = 'world',
-		inline_multiline_trailing_comment = 'world'
+		inline_multiline_trailing_comment = 'world',
+		default_value = 1,
+		comment_default_value = 1
 	} = $props();
 </script>
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-cleanup/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-cleanup/_config.js
@@ -10,6 +10,6 @@ export default test({
 		flushSync(() => {
 			b1.click();
 		});
-		assert.deepEqual(logs, ['init 0', 'cleanup 2', null, 'init 2', 'cleanup 4', null, 'init 4']);
+		assert.deepEqual(logs, ['init 0']);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/_config.js b/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/main.svelte b/packages/svelte/tests/runtime-runes/samples/untrack-own-deriveds/main.svelte
diff --git a/packages/svelte/tests/signals/test.ts b/packages/svelte/tests/signals/test.ts
