File tree Expand file tree Collapse file tree 2 files changed +56
-0
lines changed
packages/svelte/tests/runtime-runes/samples/each-updates-8 Expand file tree Collapse file tree 2 files changed +56
-0
lines changed Original file line number Diff line number Diff line change
1
+ import { flushSync } from 'svelte' ;
2
+ import { test } from '../../test' ;
3
+
4
+ export default test ( {
5
+ html : `<button>Add new message</button><p>first</p><p>message 1</p>` ,
6
+
7
+ async test ( { assert, target } ) {
8
+ /**
9
+ * @type {{ click: () => void; } }
10
+ */
11
+ let btn1 ;
12
+
13
+ [ btn1 ] = target . querySelectorAll ( 'button' ) ;
14
+
15
+ flushSync ( ( ) => {
16
+ btn1 . click ( ) ;
17
+ } ) ;
18
+
19
+ assert . htmlEqual ( target . innerHTML , `<button>Add new message</button><p>first</p><p>message 1</p><p>message 2</p>` ) ;
20
+
21
+ await Promise . resolve ( ) ;
22
+
23
+ assert . htmlEqual ( target . innerHTML , `<button>Add new message</button><p>first</p><p>message 1</p><p>message 2</p>` ) ;
24
+
25
+ flushSync ( ( ) => {
26
+ btn1 . click ( ) ;
27
+ } ) ;
28
+
29
+ await Promise . resolve ( ) ;
30
+
31
+ assert . htmlEqual ( target . innerHTML , `<button>Add new message</button><p>first</p><p>message 1</p><p>message 2</p><p>message 3</p>` ) ;
32
+ }
33
+ } ) ;
Original file line number Diff line number Diff line change
1
+ <script >
2
+ let messages = $state ([{id: 1 , content: " message 1" }]);
3
+
4
+ function add () {
5
+ const newId = messages .length + 1
6
+ messages .push ({id: 0 , tmpId: newId, content: ` message ${ newId} ` })
7
+
8
+ queueMicrotask (() => {
9
+ const msg = messages .find ((m ) => m .tmpId === newId && m .id === 0 )
10
+ msg .tmpId = " "
11
+ msg .id = newId
12
+ })
13
+ }
14
+ </script >
15
+
16
+ <button onclick ={add }>Add new message</button >
17
+
18
+ {#each messages as msg , i (` ${msg .id }_${msg .tmpId ?? " " } ` )}
19
+ {#if i === 0 }
20
+ <p >first</p >
21
+ {/if }
22
+ <p >{msg .content }</p >
23
+ {/each }
You can’t perform that action at this time.
0 commit comments