mirror of https://github.com/sveltejs/svelte
S. Elliott Johnson
5 months ago
parent
adb6e712e9
commit
92940ffbfd
@ -0,0 +1,13 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>10</button>`,
|
||||
ssrHtml: `<button>0</button>`,
|
||||
|
||||
async test({ assert, target }) {
|
||||
flushSync();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<button>10</button>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
class Counter {
|
||||
constructor() {
|
||||
this.count = $state(0);
|
||||
$effect(() => {
|
||||
this.count = 10;
|
||||
});
|
||||
}
|
||||
}
|
||||
const counter = new Counter();
|
||||
</script>
|
||||
|
||||
<button on:click={() => counter.count++}>{counter.count}</button>
|
||||
@ -0,0 +1,45 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
// The component context class instance gets shared between tests, strangely, causing hydration to fail?
|
||||
mode: ['client', 'server'],
|
||||
|
||||
async test({ assert, target, logs }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(logs, [0, 'class trigger false', 'local trigger false', 1]);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(logs, [0, 'class trigger false', 'local trigger false', 1, 2]);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(logs, [0, 'class trigger false', 'local trigger false', 1, 2, 3]);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(logs, [
|
||||
0,
|
||||
'class trigger false',
|
||||
'local trigger false',
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
'class trigger true',
|
||||
'local trigger true'
|
||||
]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,37 @@
|
||||
<script module>
|
||||
class SomeLogic {
|
||||
trigger() {
|
||||
this.someValue++;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
this.someValue = $state(0);
|
||||
this.isAboveThree = $derived(this.someValue > 3);
|
||||
}
|
||||
}
|
||||
|
||||
const someLogic = new SomeLogic();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function increment() {
|
||||
someLogic.trigger();
|
||||
}
|
||||
|
||||
let localDerived = $derived(someLogic.someValue > 3);
|
||||
|
||||
$effect(() => {
|
||||
console.log(someLogic.someValue);
|
||||
});
|
||||
$effect(() => {
|
||||
console.log('class trigger ' + someLogic.isAboveThree)
|
||||
});
|
||||
$effect(() => {
|
||||
console.log('local trigger ' + localDerived)
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<button on:click={increment}>
|
||||
clicks: {someLogic.someValue}
|
||||
</button>
|
||||
@ -0,0 +1,20 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>10: 20</button>`,
|
||||
|
||||
test({ assert, target }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.htmlEqual(target.innerHTML, `<button>11: 22</button>`);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.htmlEqual(target.innerHTML, `<button>12: 24</button>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
class Counter {
|
||||
constructor(initial) {
|
||||
this.count = $state(initial);
|
||||
}
|
||||
|
||||
increment = () => {
|
||||
this.count++;
|
||||
}
|
||||
}
|
||||
|
||||
class PluggableCounter extends Counter {
|
||||
constructor(initial, plugin) {
|
||||
super(initial)
|
||||
this.custom = $derived(plugin(this.count));
|
||||
}
|
||||
}
|
||||
|
||||
const counter = new PluggableCounter(10, (count) => count * 2);
|
||||
</script>
|
||||
|
||||
<button onclick={counter.increment}>{counter.count}: {counter.custom}</button>
|
||||
@ -0,0 +1,20 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>20</button>`,
|
||||
|
||||
test({ assert, target }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.htmlEqual(target.innerHTML, `<button>22</button>`);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
assert.htmlEqual(target.innerHTML, `<button>24</button>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
class Counter {
|
||||
/** @type {number} */
|
||||
#count;
|
||||
|
||||
constructor(initial) {
|
||||
this.#count = $state(initial);
|
||||
this.doubled = $derived(this.#count * 2);
|
||||
}
|
||||
|
||||
increment = () => {
|
||||
this.#count++;
|
||||
}
|
||||
}
|
||||
const counter = new Counter(10);
|
||||
</script>
|
||||
|
||||
<button onclick={counter.increment}>{counter.doubled}</button>
|
||||
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"code": "constructor_state_reassignment",
|
||||
"message": "Cannot redeclare stateful field `count` in the constructor. The field was originally declared here: `(unknown):2:1`",
|
||||
"start": {
|
||||
"line": 5,
|
||||
"column": 2
|
||||
},
|
||||
"end": {
|
||||
"line": 5,
|
||||
"column": 24
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,7 @@
|
||||
export class Counter {
|
||||
count = $state(0);
|
||||
|
||||
constructor() {
|
||||
this.count = $state(0);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"code": "constructor_state_reassignment",
|
||||
"message": "Cannot redeclare stateful field `count` in the constructor. The field was originally declared here: `(unknown):3:2`",
|
||||
"start": {
|
||||
"line": 5,
|
||||
"column": 2
|
||||
},
|
||||
"end": {
|
||||
"line": 5,
|
||||
"column": 24
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,7 @@
|
||||
export class Counter {
|
||||
constructor() {
|
||||
this.count = $state(0);
|
||||
this.count = 1;
|
||||
this.count = $state(0);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"code": "constructor_state_reassignment",
|
||||
"message": "Cannot redeclare stateful field `count` in the constructor. The field was originally declared here: `(unknown):3:2`",
|
||||
"start": {
|
||||
"line": 5,
|
||||
"column": 2
|
||||
},
|
||||
"end": {
|
||||
"line": 5,
|
||||
"column": 28
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,7 @@
|
||||
export class Counter {
|
||||
constructor() {
|
||||
this.count = $state(0);
|
||||
this.count = 1;
|
||||
this.count = $state.raw(0);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"code": "state_invalid_placement",
|
||||
"message": "`$state(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor.",
|
||||
"start": {
|
||||
"line": 4,
|
||||
"column": 16
|
||||
},
|
||||
"end": {
|
||||
"line": 4,
|
||||
"column": 25
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,7 @@
|
||||
export class Counter {
|
||||
constructor() {
|
||||
if (true) {
|
||||
this.count = $state(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue