mirror of https://github.com/sveltejs/svelte
feat: adds $state.link rune (#12545)
* feat: adds $state.link rune * add tests * types * docs * debugger * lint * Update .changeset/friendly-rice-confess.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update packages/svelte/src/compiler/phases/2-analyze/index.js Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * feedback * feedback * feedback * feedback * rename link_state to linked_state for grammatical consistency * oops, victim of find-replace * no need to store linked_value if setting * simplify tests * test behaviour of objects * update docs * copy * more direct example that shows unlinking and relinking * add callback argument support * fix * tidy up * document callback --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> Co-authored-by: Rich Harris <rich.harris@vercel.com>pull/12924/head
parent
f6f0e78cbd
commit
63ec2e2e88
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: add `$state.link` rune
|
@ -0,0 +1,38 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `<button>0</button><button>0</button><button>false</button>`,
|
||||||
|
|
||||||
|
test({ assert, target }) {
|
||||||
|
const [btn1, btn2, btn3] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
flushSync(() => btn1.click());
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>1</button><button>1</button><button>false</button>`
|
||||||
|
);
|
||||||
|
|
||||||
|
flushSync(() => btn2.click());
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>1</button><button>2</button><button>false</button>`
|
||||||
|
);
|
||||||
|
|
||||||
|
flushSync(() => btn3.click());
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>1</button><button>2</button><button>true</button>`);
|
||||||
|
|
||||||
|
flushSync(() => btn1.click());
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button><button>true</button>`);
|
||||||
|
|
||||||
|
flushSync(() => btn1.click());
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>3</button><button>2</button><button>true</button>`);
|
||||||
|
|
||||||
|
flushSync(() => btn1.click());
|
||||||
|
flushSync(() => btn3.click());
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>4</button><button>4</button><button>false</button>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
let a = $state(0);
|
||||||
|
let b = $state.link(a, (value) => {
|
||||||
|
if (c) return;
|
||||||
|
b = value;
|
||||||
|
});
|
||||||
|
let c = $state(false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => a++}>{a}</button>
|
||||||
|
<button onclick={() => b++}>{b}</button>
|
||||||
|
<button onclick={() => c = !c}>{c}</button>
|
@ -0,0 +1,19 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `<button>0</button><button>0</button>`,
|
||||||
|
|
||||||
|
test({ assert, target }) {
|
||||||
|
const [btn1, btn2] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
flushSync(() => btn1.click());
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>1</button><button>1</button>`);
|
||||||
|
|
||||||
|
flushSync(() => btn2.click());
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>1</button><button>2</button>`);
|
||||||
|
|
||||||
|
flushSync(() => btn1.click());
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button>`);
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
class Instance {
|
||||||
|
a = $state(0);
|
||||||
|
b = $state.link(this.a);
|
||||||
|
}
|
||||||
|
|
||||||
|
const instance = new Instance();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => instance.a++}>{instance.a}</button>
|
||||||
|
<button onclick={() => instance.b++}>{instance.b}</button>
|
@ -0,0 +1,24 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `<button>0</button><button>0</button><button>0</button>`,
|
||||||
|
|
||||||
|
test({ assert, target }) {
|
||||||
|
const [btn1, btn2, btn3] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
flushSync(() => btn1.click());
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>1</button><button>1</button><button>1</button>`);
|
||||||
|
|
||||||
|
// mutate the original object, via the link
|
||||||
|
flushSync(() => btn2.click());
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button><button>2</button>`);
|
||||||
|
|
||||||
|
// mutate the copy
|
||||||
|
flushSync(() => btn3.click());
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button><button>3</button>`);
|
||||||
|
|
||||||
|
flushSync(() => btn1.click());
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>3</button><button>3</button><button>3</button>`);
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1,9 @@
|
|||||||
|
<script>
|
||||||
|
let a = $state({ value: 0 });
|
||||||
|
let b = $state.link(a);
|
||||||
|
let c = $state.link({ ...a });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => a.value++}>{a.value}</button>
|
||||||
|
<button onclick={() => b.value++}>{b.value}</button>
|
||||||
|
<button onclick={() => c.value++}>{c.value}</button>
|
@ -0,0 +1,19 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `<button>0</button><button>0</button>`,
|
||||||
|
|
||||||
|
test({ assert, target }) {
|
||||||
|
const [btn1, btn2] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
flushSync(() => btn1.click());
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>1</button><button>1</button>`);
|
||||||
|
|
||||||
|
flushSync(() => btn2.click());
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>1</button><button>2</button>`);
|
||||||
|
|
||||||
|
flushSync(() => btn1.click());
|
||||||
|
assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button>`);
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
let a = $state(0);
|
||||||
|
let b = $state.link(a);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => a++}>{a}</button>
|
||||||
|
<button onclick={() => b++}>{b}</button>
|
Loading…
Reference in new issue