Merge branch 'main' into aa

CONTRIBUTING.md

@@ -51,7 +51,7 @@ We use [GitHub issues](https://github.com/sveltejs/svelte/issues) for our public
 
 If you have questions about using Svelte, contact us on Discord at [svelte.dev/chat](https://svelte.dev/chat), and we will do our best to answer your questions.
 
-If you see anything you'd like to be implemented, create a [feature request issue](https://github.com/sveltejs/svelte/issues/new?template=feature_request.yml)
+If you see anything you'd like to be implemented, create a [feature request issue](https://github.com/sveltejs/svelte/issues/new?template=feature_request.yml).
 
 ### Reporting new issues
 

packages/svelte/CHANGELOG.md

@@ -1,5 +1,15 @@
 # svelte
 
+## 5.19.4
+
+### Patch Changes
+
+- fix: Add `bind:focused` property to `HTMLAttributes` type ([#15122](https://github.com/sveltejs/svelte/pull/15122))
+
+- fix: lazily connect derievds (in deriveds) to their parent ([#15129](https://github.com/sveltejs/svelte/pull/15129))
+
+- fix: disallow $state/$derived in const tags ([#15115](https://github.com/sveltejs/svelte/pull/15115))
+
 ## 5.19.3
 
 ### Patch Changes

packages/svelte/elements.d.ts

@@ -839,6 +839,7 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	readonly 'bind:contentBoxSize'?: Array<ResizeObserverSize> | undefined | null;
 	readonly 'bind:borderBoxSize'?: Array<ResizeObserverSize> | undefined | null;
 	readonly 'bind:devicePixelContentBoxSize'?: Array<ResizeObserverSize> | undefined | null;
+	readonly 'bind:focused'?: boolean | undefined | null;
 
 	// SvelteKit
 	'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;

packages/svelte/package.json

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

packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js

@@ -80,7 +80,8 @@ export function CallExpression(node, context) {
 		case '$derived':
 		case '$derived.by':
 			if (
-				parent.type !== 'VariableDeclarator' &&
+				(parent.type !== 'VariableDeclarator' ||
+					get_parent(context.path, -3).type === 'ConstTag') &&
 				!(parent.type === 'PropertyDefinition' && !parent.static && !parent.computed)
 			) {
 				e.state_invalid_placement(node, rune);

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

@@ -72,10 +72,6 @@ export function derived(fn) {
 		signal.created = get_stack('CreatedAt');
 	}
 
-	if (parent_derived !== null) {
-		(parent_derived.children ??= []).push(signal);
-	}
-
 	return signal;
 }
 

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

@@ -1018,26 +1018,30 @@ export function get(signal) {
 				signal.reactions.push(active_reaction);
 			}
 		}
-	} else if (is_derived && /** @type {Derived} */ (signal).deps === null) {
+	}
+
+	if (
+		is_derived &&
+		/** @type {Derived} */ (signal).deps === null &&
+		(active_reaction === null || untracking || (active_reaction.f & DERIVED) !== 0)
+	) {
 		var derived = /** @type {Derived} */ (signal);
 		var parent = derived.parent;
-		var target = derived;
 
-		while (parent !== null) {
+		if (parent !== null) {
-			// Attach the derived to the nearest parent effect, if there are deriveds
+			// Attach the derived to the nearest parent effect or derived
-			// in between then we also need to attach them too
 			if ((parent.f & DERIVED) !== 0) {
 				var parent_derived = /** @type {Derived} */ (parent);
 
-				target = parent_derived;
+				if (!parent_derived.children?.includes(derived)) {
-				parent = parent_derived.parent;
+					(parent_derived.children ??= []).push(derived);
+				}
 			} else {
 				var parent_effect = /** @type {Effect} */ (parent);
 
-				if (!parent_effect.deriveds?.includes(target)) {
+				if (!parent_effect.deriveds?.includes(derived)) {
-					(parent_effect.deriveds ??= []).push(target);
+					(parent_effect.deriveds ??= []).push(derived);
 				}
-				break;
 			}
 		}
 	}

packages/svelte/src/version.js

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

packages/svelte/tests/signals/test.ts

@@ -803,6 +803,33 @@ describe('signals', () => {
 		};
 	});
 
+	test('nested deriveds do not connect inside parent deriveds if unused', () => {
+		return () => {
+			let a = render_effect(() => {});
+			let b: Derived<void> | undefined;
+
+			const destroy = effect_root(() => {
+				a = render_effect(() => {
+					$.untrack(() => {
+						b = derived(() => {
+							derived(() => {});
+							derived(() => {});
+							derived(() => {});
+						});
+						$.get(b);
+					});
+				});
+			});
+
+			assert.deepEqual(a.deriveds?.length, 1);
+			assert.deepEqual(b?.children, null);
+
+			destroy();
+
+			assert.deepEqual(a.deriveds, null);
+		};
+	});
+
 	test('deriveds containing effects work correctly when used with untrack', () => {
 		return () => {
 			let a = render_effect(() => {});

packages/svelte/tests/types/bindings.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  let focused = $state(false);
+</script>
+
+<input bind:focused={focused} type="text" />
+<textarea bind:focused={focused}></textarea>
+<select bind:focused={focused}></select>
+<div bind:focused={focused}></div>

packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/errors.json

@@ -0,0 +1,14 @@
+[
+	{
+		"code": "state_invalid_placement",
+		"message": "`$derived(...)` can only be used as a variable declaration initializer or a class field",
+		"start": {
+			"line": 2,
+			"column": 15
+		},
+		"end": {
+			"line": 2,
+			"column": 26
+		}
+	}
+]

packages/svelte/tests/validator/samples/const-tag-invalid-rune-usage/input.svelte

@@ -0,0 +1,3 @@
+{#snippet test()}
+	{@const der = $derived(0)}
+{/snippet}