Merge branch 'main' into async

Author: Rich-Harris

.changeset/three-steaks-wash.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly tag private class state fields

packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js

@@ -78,7 +78,7 @@ export function ClassBody(node, context) {
 				? /** @type {CallExpression} */ (context.visit(definition.value, child_state))
 				: undefined;
 
-			if (dev) {
+			if (dev && field.node === definition) {
 				value = b.call('$.tag', value, b.literal(`${declaration.id?.name ?? '[class]'}.${name}`));
 			}
 

packages/svelte/tests/runtime-runes/samples/flush-sync-no-scheduled/_config.js

@@ -5,7 +5,6 @@ export default test({
 		const btn = target.querySelector('button');
 		const main = target.querySelector('main');
 		ok(main);
-		console.log(main.innerHTML);
 		assert.htmlEqual(main.innerHTML, `<div>true</div>`);
 		// we don't want to use flush sync (or tick that use it inside) since we are testing that calling `flushSync` once
 		// when there are no scheduled effects does not cause reactivity to break

packages/svelte/tests/runtime-runes/samples/inspect-trace-class/_config.js

@@ -0,0 +1,31 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { normalise_trace_logs } from '../../../helpers.js';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, target, logs }) {
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: '$state', highlighted: true },
+			{ log: 'Counter.#count', highlighted: false },
+			{ log: 0 }
+		]);
+
+		logs.length = 0;
+
+		const button = target.querySelector('button');
+		button?.click();
+		flushSync();
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect' },
+			{ log: '$state', highlighted: true },
+			{ log: 'Counter.#count', highlighted: false },
+			{ log: 1 }
+		]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/inspect-trace-class/main.svelte

@@ -0,0 +1,28 @@
+<script>
+	class Counter {
+		#count;
+
+		constructor() {
+			this.#count = $state(0);
+		}
+
+		get count() {
+			return this.#count;
+		}
+
+		increment = () => {
+			this.#count += 1;
+		}
+	}
+
+	const counter = new Counter();
+
+	$effect(() => {
+		$inspect.trace('effect');
+		counter.count;
+	});
+</script>
+
+<button onclick={counter.increment}>
+	clicks: {counter.count}
+</button>