Merge branch 'main' into schedule_effect_perf_without_branch

.changeset/brave-candles-serve.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly migrate sequence expressions

.changeset/dirty-worms-type.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid disconnecting deriveds that are still active

.changeset/pre.json

@@ -37,6 +37,7 @@
     "blue-rules-juggle",
     "blue-timers-film",
     "blue-waves-sneeze",
+    "brave-candles-serve",
     "brave-carrots-draw",
     "brave-doors-compete",
     "brave-gorillas-end",
@@ -135,6 +136,7 @@
     "dirty-pens-look",
     "dirty-pianos-eat",
     "dirty-tips-add",
+    "dirty-worms-type",
     "dry-clocks-grow",
     "dry-eggs-play",
     "dry-eggs-retire",
@@ -500,6 +502,7 @@
     "odd-buckets-lie",
     "odd-needles-joke",
     "odd-schools-wait",
+    "odd-shirts-hear",
     "odd-shoes-cheat",
     "odd-taxis-retire",
     "odd-toys-glow",

packages/svelte/CHANGELOG.md

@@ -1,5 +1,15 @@
 # svelte
 
+## 5.0.0-next.250
+
+### Patch Changes
+
+- fix: correctly migrate sequence expressions ([#13291](https://github.com/sveltejs/svelte/pull/13291))
+
+- fix: avoid disconnecting deriveds that are still active ([#13292](https://github.com/sveltejs/svelte/pull/13292))
+
+- feat: Add accessibility warnings for buttons and anchors without explicit labels and content ([#13130](https://github.com/sveltejs/svelte/pull/13130))
+
 ## 5.0.0-next.249
 
 ### Patch Changes

packages/svelte/package.json

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

packages/svelte/src/compiler/migrate/index.js

@@ -368,8 +368,15 @@ const instance_script = {
 
 			// state
 			if (declarator.init) {
-				state.str.prependLeft(/** @type {number} */ (declarator.init.start), '$state(');
-				state.str.appendRight(/** @type {number} */ (declarator.init.end), ')');
+				let { start, end } = /** @type {{ start: number, end: number }} */ (declarator.init);
+
+				if (declarator.init.type === 'SequenceExpression') {
+					while (state.str.original[start] !== '(') start -= 1;
+					while (state.str.original[end - 1] !== ')') end += 1;
+				}
+
+				state.str.prependLeft(start, '$state(');
+				state.str.appendRight(end, ')');
 			} else {
 				state.str.prependLeft(
 					/** @type {number} */ (declarator.id.typeAnnotation?.end ?? declarator.id.end),
@@ -416,25 +423,30 @@ const instance_script = {
 			const bindings = ids.map((id) => state.scope.get(id.name));
 			const reassigned_bindings = bindings.filter((b) => b?.reassigned);
 			if (reassigned_bindings.length === 0 && !bindings.some((b) => b?.kind === 'store_sub')) {
+				let { start, end } = /** @type {{ start: number, end: number }} */ (
+					node.body.expression.right
+				);
+
 				// $derived
 				state.str.update(
 					/** @type {number} */ (node.start),
 					/** @type {number} */ (node.body.expression.start),
 					'let '
 				);
-				state.str.prependRight(
-					/** @type {number} */ (node.body.expression.right.start),
-					'$derived('
-				);
-				if (node.body.expression.right.end !== node.end) {
-					state.str.update(
-						/** @type {number} */ (node.body.expression.right.end),
-						/** @type {number} */ (node.end),
-						');'
-					);
-				} else {
-					state.str.appendLeft(/** @type {number} */ (node.end), ');');
+
+				if (node.body.expression.right.type === 'SequenceExpression') {
+					while (state.str.original[start] !== '(') start -= 1;
+					while (state.str.original[end - 1] !== ')') end += 1;
 				}
+
+				state.str.prependRight(start, `$derived(`);
+
+				// in a case like `$: ({ a } = b())`, there's already a trailing parenthesis.
+				// otherwise, we need to add one
+				if (state.str.original[/** @type {number} */ (node.body.start)] !== '(') {
+					state.str.appendLeft(end, `)`);
+				}
+
 				return;
 			} else {
 				for (const binding of reassigned_bindings) {

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

@@ -371,7 +371,14 @@ function remove_reaction(signal, dependency) {
 	}
 	// If the derived has no reactions, then we can disconnect it from the graph,
 	// allowing it to either reconnect in the future, or be GC'd by the VM.
-	if (reactions === null && (dependency.f & DERIVED) !== 0) {
+	if (
+		reactions === null &&
+		(dependency.f & DERIVED) !== 0 &&
+		// Destroying a child effect while updating a parent effect can cause a dependency to appear
+		// to be unused, when in fact it is used by the currently-updating parent. Checking `new_deps`
+		// allows us to skip the expensive work of disconnecting and immediately reconnecting it
+		(new_deps === null || !new_deps.includes(dependency))
+	) {
 		set_signal_status(dependency, MAYBE_DIRTY);
 		// If we are working with a derived that is owned by an effect, then mark it as being
 		// disconnected.

packages/svelte/src/version.js

@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.249';
+export const VERSION = '5.0.0-next.250';
 export const PUBLIC_VERSION = '5';

packages/svelte/tests/migrate/samples/derivations/input.svelte

@@ -1,7 +1,11 @@
 <script>
 	let count = 0;
+	// semicolon at the end
 	$: doubled = count * 2;
 	$: ({ quadrupled } = { quadrupled: count * 4 });
+	// no semicolon at the end
+	$: time_8 = count * 8
+	$: ({ time_16 } = { time_16: count * 16 })
 </script>
 
-{count} / {doubled} / {quadrupled}
+{count} / {doubled} / {quadrupled} / {time_8} / {time_16}

packages/svelte/tests/migrate/samples/derivations/output.svelte

@@ -1,7 +1,11 @@
 <script>
 	let count = 0;
+	// semicolon at the end
 	let doubled = $derived(count * 2);
 	let { quadrupled } = $derived({ quadrupled: count * 4 });
+	// no semicolon at the end
+	let time_8 = $derived(count * 8)
+	let { time_16 } = $derived({ time_16: count * 16 })
 </script>
 
-{count} / {doubled} / {quadrupled}
+{count} / {doubled} / {quadrupled} / {time_8} / {time_16}

packages/svelte/tests/migrate/samples/state-and-derivations-sequence/input.svelte

@@ -0,0 +1,14 @@
+<script>
+	let count = (void 0, 0);
+	// semicolon at the end
+	$: doubled = (void 0, count * 2);
+	$: ({ quadrupled } = (void 0, { quadrupled: count * 4 }));
+	// no semicolon at the end
+	$: time_8 = (void 0, count * 8)
+	$: ({ time_16 } = (void 0, { time_16: count * 16 }))
+</script>
+
+<!-- reassign to migrate to state -->
+<button onclick={()=> count++}></button>
+
+{count} / {doubled} / {quadrupled} / {time_8} / {time_16}

packages/svelte/tests/migrate/samples/state-and-derivations-sequence/output.svelte

@@ -0,0 +1,14 @@
+<script>
+	let count = $state((void 0, 0));
+	// semicolon at the end
+	let doubled = $derived((void 0, count * 2));
+	let { quadrupled } = $derived((void 0, { quadrupled: count * 4 }));
+	// no semicolon at the end
+	let time_8 = $derived((void 0, count * 8))
+	let { time_16 } = $derived((void 0, { time_16: count * 16 }))
+</script>
+
+<!-- reassign to migrate to state -->
+<button onclick={()=> count++}></button>
+
+{count} / {doubled} / {quadrupled} / {time_8} / {time_16}

packages/svelte/tests/runtime-runes/samples/if-block-dependencies/_config.js

@@ -0,0 +1,19 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await Promise.resolve();
+
+		let [btn1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1?.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`false\ntrue\n<button>Toggle</button>\nfirst:\nfalse\n<br>\nsecond:\ntrue`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/if-block-dependencies/main.svelte

@@ -0,0 +1,21 @@
+<script>
+	let first = $state(true)
+	let second = $state(false)
+	let derivedSecond = $derived(second)
+
+	queueMicrotask(() => {
+		first = false
+	});
+</script>
+
+{first} {second}
+
+<button onclick={() => {
+	second = true
+}}>Toggle</button>
+
+{#if first || derivedSecond}
+		first: {first}
+		<br />
+		second: {derivedSecond}
+{/if}