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