fix: proxify the value in assignment shorthands to the private field (#15862)

Co-authored-by: 7nik <kifiranet@gmail.com>
pull/15903/head
7nik 4 months ago committed by GitHub
parent 326b32932c
commit 3bb1af9677
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: proxify the value in assignment shorthands to the private field

@ -580,5 +580,7 @@ export function build_assignment_value(operator, left, right) {
return operator === '=' return operator === '='
? right ? right
: // turn something like x += 1 into x = x + 1 : // turn something like x += 1 into x = x + 1
b.binary(/** @type {ESTree.BinaryOperator} */ (operator.slice(0, -1)), left, right); ['||=', '&&=', '??='].includes(operator)
? b.logical(/** @type {ESTree.LogicalOperator} */ (operator.slice(0, -1)), left, right)
: b.binary(/** @type {ESTree.BinaryOperator} */ (operator.slice(0, -1)), left, right);
} }

@ -0,0 +1,20 @@
import { flushSync } from 'svelte';
import { test } from '../../test';
export default test({
async test({ assert, target }) {
const btn = target.querySelector('button');
btn?.click();
flushSync();
assert.htmlEqual(
target.innerHTML,
`
<button>inc</button>
<p>a:1</p>
<p>b:2</p>
<p>c:3</p>
`
);
}
});

@ -0,0 +1,28 @@
<script>
class Counter {
#a = $state();
#b = $state({ val: -1 });
#c = $state();
constructor() {
this.#a ||= {val: 0}
this.#b &&= {val: 0}
this.#c ??= {val: 0}
}
inc() {
this.#a.val += 1;
this.#b.val += 2;
this.#c.val += 3;
}
get a() { return this.#a?.val; }
get b() { return this.#b?.val; }
get c() { return this.#c?.val; }
}
let counter = new Counter();
</script>
<button onclick={() => counter.inc()}>inc</button>
<!-- prevent updating outputs in a common effect -->
{#key 1}<p>a:{counter.a}</p>{/key}
{#key 2}<p>b:{counter.b}</p>{/key}
{#key 3}<p>c:{counter.c}</p>{/key}
Loading…
Cancel
Save