Preact Signal and Svelte

Compared to Svelte Reactive Blocks, Preact Signal feels more verbose but less surprising to me.

Svelte advertises itself as bringing reactivity to JavaScript itself:

 1<script>
 2	let x = 0
 3	let y = 0
 4	$: total = x + y
 5</script>
 6
 7<div>
 8<p>{x} + {y} = {total}</p>
 9<button on:click={() => x++}>Increase X</button><br />
10<button on:click={() => y++}>Increase Y</button>
11</div>

Brief. Short. And except for $:, every token is intuitive.

In the above code, $: means total depends on the value of x and y. Thus, when either button is pressed, the {total} part will be rerendered automatically.

However, in the following code sample, total will only get updated when x changes, not when y changes!

1function yPlusAValue(value) {
2  return value + y;
3}
4
5$: total = yPlusAValue(x);

This surprising behavior is because the Svelte compiler is not smart enought to figure out that yPlusAValue involves the value ofy. As Svelte documentation mentioned:

reactive blocks are ordered via simple static analysis at compile time, and all the compiler looks at are the variables that are assigned to and used within the block itself, not in any functions called by them.

Now, let's port this to Preact Signal:

 1import { render } from "preact";
 2import { useSignal, useComputed } from "@preact/signals";
 3
 4function Adder() {
 5	const x = useSignal(0);
 6	const y = useSignal(0);
 7	const total = useComputed(() => x.value + y.value)
 8  return (
 9    <div>
10      <p>{x} + {y} = {total}</p>
11      <button onClick={() => x.value++}>Increase X</button><br />
12  		<button onClick={() => y.value++}>Increase Y</button>
13	</div>
14  );
15}
16
17render(<Adder />, document.getElementById("app"));

It is a bit more verbose than Svelte but still clean.¹ Most importantly, it also works with function calls:

1function yPlusAValue(s) {
2  return s.value + y.value;
3}
4const total = useComputed(() => yPlusAValue(x))