mirror of https://github.com/sveltejs/svelte
Rich Harris
7 months ago
commit
ef28490c07
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': minor
|
||||
---
|
||||
|
||||
feat: SSR-safe ID generation with `$props.id()`
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: ignore typescript abstract methods
|
||||
@ -0,0 +1,33 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ target, assert }) {
|
||||
// Test for https://github.com/sveltejs/svelte/issues/15237
|
||||
const [setValues, clearValue] = target.querySelectorAll('button');
|
||||
const [text1, text2, check1, check2] = target.querySelectorAll('input');
|
||||
|
||||
assert.equal(text1.value, '');
|
||||
assert.equal(text2.value, '');
|
||||
assert.equal(check1.checked, false);
|
||||
assert.equal(check2.checked, false);
|
||||
|
||||
flushSync(() => {
|
||||
setValues.click();
|
||||
});
|
||||
|
||||
assert.equal(text1.value, 'message');
|
||||
assert.equal(text2.value, 'message');
|
||||
assert.equal(check1.checked, true);
|
||||
assert.equal(check2.checked, true);
|
||||
|
||||
flushSync(() => {
|
||||
clearValue.click();
|
||||
});
|
||||
|
||||
assert.equal(text1.value, '');
|
||||
assert.equal(text2.value, '');
|
||||
assert.equal(check1.checked, false);
|
||||
assert.equal(check2.checked, false);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
let value = $state();
|
||||
let checked = $state(false);
|
||||
|
||||
function setValues() {
|
||||
value = 'message';
|
||||
checked = true;
|
||||
}
|
||||
function clearValues() {
|
||||
value = null;
|
||||
checked = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={setValues}>setValues</button>
|
||||
<button onclick={clearValues}>clearValues</button>
|
||||
|
||||
<input type="text" {value} />
|
||||
<input type="text" {value} {...{}} />
|
||||
|
||||
<input type="checkbox" {checked} />
|
||||
<input type="checkbox" {checked} {...{}} />
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
let { linked3 = $bindable(), linked4 = $bindable() } = $props();
|
||||
</script>
|
||||
|
||||
<p>Binding</p>
|
||||
<button onclick={() => linked3.count++}>Increment Linked 1 ({linked3.count})</button>
|
||||
<button onclick={() => linked4.count++}>Increment Linked 2 ({linked4.count})</button>
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
const linked1 = getContext('linked1');
|
||||
const linked2 = getContext('linked2');
|
||||
</script>
|
||||
|
||||
<p>Context</p>
|
||||
<button onclick={() => linked1.linked.current.count++}
|
||||
>Increment Linked 1 ({linked1.linked.current.count})</button
|
||||
>
|
||||
<button onclick={() => linked2.linked.current.count++}
|
||||
>Increment Linked 2 ({linked2.linked.current.count})</button
|
||||
>
|
||||
@ -0,0 +1,34 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
// Tests that ownership is widened with $derived (on class or on its own) that contains $state
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
|
||||
test({ assert, target, warnings }) {
|
||||
const [root, counter_context1, counter_context2, counter_binding1, counter_binding2] =
|
||||
target.querySelectorAll('button');
|
||||
|
||||
counter_context1.click();
|
||||
counter_context2.click();
|
||||
counter_binding1.click();
|
||||
counter_binding2.click();
|
||||
flushSync();
|
||||
|
||||
assert.equal(warnings.length, 0);
|
||||
|
||||
root.click();
|
||||
flushSync();
|
||||
counter_context1.click();
|
||||
counter_context2.click();
|
||||
counter_binding1.click();
|
||||
counter_binding2.click();
|
||||
flushSync();
|
||||
|
||||
assert.equal(warnings.length, 0);
|
||||
},
|
||||
|
||||
warnings: []
|
||||
});
|
||||
@ -0,0 +1,46 @@
|
||||
<script>
|
||||
import CounterBinding from './CounterBinding.svelte';
|
||||
import CounterContext from './CounterContext.svelte';
|
||||
import { setContext } from 'svelte';
|
||||
|
||||
let counter = $state({ count: 0 });
|
||||
|
||||
class Linked {
|
||||
#getter;
|
||||
linked = $derived.by(() => {
|
||||
const state = $state({ current: $state.snapshot(this.#getter()) });
|
||||
return state;
|
||||
});
|
||||
|
||||
constructor(fn) {
|
||||
this.#getter = fn;
|
||||
}
|
||||
}
|
||||
|
||||
const linked1 = $derived.by(() => {
|
||||
const state = $state({ current: $state.snapshot(counter) });
|
||||
return state;
|
||||
});
|
||||
const linked2 = new Linked(() => counter);
|
||||
|
||||
setContext('linked1', {
|
||||
get linked() {
|
||||
return linked1;
|
||||
}
|
||||
});
|
||||
setContext('linked2', linked2);
|
||||
|
||||
const linked3 = $derived.by(() => {
|
||||
const state = $state({ current: $state.snapshot(counter) });
|
||||
return state;
|
||||
});
|
||||
const linked4 = new Linked(() => counter);
|
||||
</script>
|
||||
|
||||
<p>Parent</p>
|
||||
<button onclick={() => counter.count++}>
|
||||
Increment Original ({counter.count})
|
||||
</button>
|
||||
|
||||
<CounterContext />
|
||||
<CounterBinding bind:linked3={linked3.current} bind:linked4={linked4.linked.current} />
|
||||
@ -0,0 +1 @@
|
||||
[]
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
class Test {
|
||||
#deps = () => [];
|
||||
|
||||
deps = $derived.by(() => {
|
||||
return [];
|
||||
});
|
||||
|
||||
constructor(f = () => []) {
|
||||
this.#deps = f;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in new issue