using $inspect() or $effect() causes strange behavior

[dangelomedinag]

Describe the bug

• if uncomment $effect() or $inpect() counter.count not update

<script>
	let counter = $state({ 
		count: 0,
		increment(){this.count += 1},
	});

	/* Any of the following lines breaks the updates */
	// $effect(() => { console.log(counter) }); 
	// $inspect(counter) 
</script>

<button onclick={counter.increment}>
	clicks: {counter.count}
</button>

• The following fragment causes a loop when invoking increment

<script>
	let counter = $state({ 
		count: 0,
		increment: () => {
			this.count += 1; /* `this` is undefined obviously */
		},
	});
</script>

<button onclick={counter.increment}>
	clicks: {counter.count}
</button>

clicking causes a loop

Reproduction

link1

link2

Logs

No response

System Info

(Svelte v5.0.0-next.60)

Severity

annoyance

[trueadm]

There's some DEV related code that makes your code example work, but really it shouldn't ever work as your event handler has a this of the button element. I'll fix that DEV bit of code, but you should probably avoid passing in the event handler directly and use an arrow function instead:

<button onclick={() => counter.increment()}>
	clicks: {counter.count}
</button>