stores see multiple changes per tick • Playground • Svelte

App.svelte

import {writable} from "svelte/store";

let name = writable("Sarah");

let countChanges = -1;

name.subscribe(newName => {

console.log("I run whenever the name changes!", newName);

countChanges++;

});

$name = "John";

$name = "Another name that will be ignored?";

console.log("the name was indeed", $name)

$name = "Rose";

</script>

<h1>Hello {$name}!</h1>

<p>

I think that name has changed {countChanges} times

</p>

   I run whenever the name changes! Sarah
   I run whenever the name changes! John
   I run whenever the name changes! Another name that will be ignored?
   the name was indeed Another name that will be ignored?
   I run whenever the name changes! Rose

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

import * as $ from 'svelte/internal/client';

import { writable } from "svelte/store";

var root = $.template(`<h1> </h1> <p> </p>`, 1);

export default function App($$anchor, $$props) {

$.push($$props, false);

const [$$stores, $$cleanup] = $.setup_stores();

const $name = () => $.store_get(name, '$name', $$stores);

let name = writable("Sarah");

let countChanges = $.mutable_state(-1);

name.subscribe((newName) => {

console.log("I run whenever the name changes!", newName);

$.update(countChanges);

});

$.store_set(name, "John");

$.store_set(name, "Another name that will be ignored?");

console.log("the name was indeed", $name());

$.store_set(name, "Rose");

$.init();

var fragment = root();

var h1 = $.first_child(fragment);

var text = $.child(h1);

$.reset(h1);

var p = $.sibling(h1, 2);

var text_1 = $.child(p);

$.reset(p);

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

/* Add a <style> tag to see the CSS output */

		
			
				
					 Root {
 css: null
js: []
start: 354
end: 438
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (4)
  Text {...}
 type: "Text"
start: 352
end: 354
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 354
end: 377
name: "h1"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 358
end: 364
raw: "Hello "
data: "Hello "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 364
end: 371
expression: Identifier {...}
 type: "Identifier"
start: 365
end: 370
loc:  {...}
 start:  {...}
 line: 16
column: 11
 }
end:  {...}
 line: 16
column: 16
 }
 }
name: "$name"
 }
 }
 Text {...}
 type: "Text"
start: 371
end: 372
raw: "!"
data: "!"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 377
end: 378
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 378
end: 438
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 381
end: 413
raw: "I think that name has changed "
data: "I think that name has changed "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 413
end: 427
expression: Identifier {...}
 type: "Identifier"
start: 414
end: 426
loc:  {...}
 start:  {...}
 line: 18
column: 32
 }
end:  {...}
 line: 18
column: 44
 }
 }
name: "countChanges"
 }
 }
 Text {...}
 type: "Text"
start: 427
end: 434
raw: " times"
data: " times"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 352
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 343
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 14
column: 0
 }
 }
body: [...] (8)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 10
end: 48
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 39
 }
 }
specifiers: [...] (1)
  ImportSpecifier {...}
 type: "ImportSpecifier"
start: 18
end: 26
loc:  {...}
 start:  {...}
 line: 2
column: 9
 }
end:  {...}
 line: 2
column: 17
 }
 }
imported: Identifier {...}
 type: "Identifier"
start: 18
end: 26
loc:  {...}
 start:  {...}
 line: 2
column: 9
 }
end:  {...}
 line: 2
column: 17
 }
 }
name: "writable"
 }
local: Identifier {...}
 type: "Identifier"
start: 18
end: 26
loc:  {...}
 start:  {...}
 line: 2
column: 9
 }
end:  {...}
 line: 2
column: 17
 }
 }
name: "writable"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 33
end: 47
loc:  {...}
 start:  {...}
 line: 2
column: 24
 }
end:  {...}
 line: 2
column: 38
 }
 }
value: "svelte/store"
raw: "\"svelte/store\""
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 50
end: 79
loc:  {...}
 start:  {...}
 line: 3
column: 1
 }
end:  {...}
 line: 3
column: 30
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 54
end: 78
loc:  {...}
 start:  {...}
 line: 3
column: 5
 }
end:  {...}
 line: 3
column: 29
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 54
end: 58
loc:  {...}
 start:  {...}
 line: 3
column: 5
 }
end:  {...}
 line: 3
column: 9
 }
 }
name: "name"
 }
init: CallExpression {...}
 type: "CallExpression"
start: 61
end: 78
loc:  {...}
 start:  {...}
 line: 3
column: 12
 }
end:  {...}
 line: 3
column: 29
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 61
end: 69
loc:  {...}
 start:  {...}
 line: 3
column: 12
 }
end:  {...}
 line: 3
column: 20
 }
 }
name: "writable"
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 70
end: 77
loc:  {...}
 start:  {...}
 line: 3
column: 21
 }
end:  {...}
 line: 3
column: 28
 }
 }
value: "Sarah"
raw: "\"Sarah\""
 }
 ]
optional: false
 }
 }
 ]
kind: "let"
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 81
end: 103
loc:  {...}
 start:  {...}
 line: 4
column: 1
 }
end:  {...}
 line: 4
column: 23
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 85
end: 102
loc:  {...}
 start:  {...}
 line: 4
column: 5
 }
end:  {...}
 line: 4
column: 22
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 85
end: 97
loc:  {...}
 start:  {...}
 line: 4
column: 5
 }
end:  {...}
 line: 4
column: 17
 }
 }
name: "countChanges"
 }
init: UnaryExpression {...}
 type: "UnaryExpression"
start: 100
end: 102
loc:  {...}
 start:  {...}
 line: 4
column: 20
 }
end:  {...}
 line: 4
column: 22
 }
 }
operator: "-"
prefix: true
argument: Literal {...}
 type: "Literal"
start: 101
end: 102
loc:  {...}
 start:  {...}
 line: 4
column: 21
 }
end:  {...}
 line: 4
column: 22
 }
 }
value: 1
raw: "1"
 }
 }
 }
 ]
kind: "let"
 }
 ExpressionStatement {...}
 type: "ExpressionStatement"
start: 105
end: 215
loc:  {...}
 start:  {...}
 line: 5
column: 1
 }
end:  {...}
 line: 8
column: 4
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 105
end: 214
loc:  {...}
 start:  {...}
 line: 5
column: 1
 }
end:  {...}
 line: 8
column: 3
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 105
end: 119
loc:  {...}
 start:  {...}
 line: 5
column: 1
 }
end:  {...}
 line: 5
column: 15
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 105
end: 109
loc:  {...}
 start:  {...}
 line: 5
column: 1
 }
end:  {...}
 line: 5
column: 5
 }
 }
name: "name"
 }
property: Identifier {...}
 type: "Identifier"
start: 110
end: 119
loc:  {...}
 start:  {...}
 line: 5
column: 6
 }
end:  {...}
 line: 5
column: 15
 }
 }
name: "subscribe"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 120
end: 213
loc:  {...}
 start:  {...}
 line: 5
column: 16
 }
end:  {...}
 line: 8
column: 2
 }
 }
id: null
expression: false
generator: false
async: false
params: [...] (1)
  Identifier {...}
 type: "Identifier"
start: 120
end: 127
loc:  {...}
 start:  {...}
 line: 5
column: 16
 }
end:  {...}
 line: 5
column: 23
 }
 }
name: "newName"
 }
 ]
body: BlockStatement {...}
 type: "BlockStatement"
start: 131
end: 213
loc:  {...}
 start:  {...}
 line: 5
column: 27
 }
end:  {...}
 line: 8
column: 2
 }
 }
body: [...] (2)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 135
end: 192
loc:  {...}
 start:  {...}
 line: 6
column: 2
 }
end:  {...}
 line: 6
column: 59
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 135
end: 191
loc:  {...}
 start:  {...}
 line: 6
column: 2
 }
end:  {...}
 line: 6
column: 58
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 135
end: 146
loc:  {...}
 start:  {...}
 line: 6
column: 2
 }
end:  {...}
 line: 6
column: 13
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 135
end: 142
loc:  {...}
 start:  {...}
 line: 6
column: 2
 }
end:  {...}
 line: 6
column: 9
 }
 }
name: "console"
 }
property: Identifier {...}
 type: "Identifier"
start: 143
end: 146
loc:  {...}
 start:  {...}
 line: 6
column: 10
 }
end:  {...}
 line: 6
column: 13
 }
 }
name: "log"
 }
computed: false
optional: false
 }
arguments: [...] (2)
  Literal {...}
 type: "Literal"
start: 147
end: 181
loc:  {...}
 start:  {...}
 line: 6
column: 14
 }
end:  {...}
 line: 6
column: 48
 }
 }
value: "I run whenever the name changes!"
raw: "\"I run whenever the name changes!\""
 }
 Identifier {...}
 type: "Identifier"
start: 183
end: 190
loc:  {...}
 start:  {...}
 line: 6
column: 50
 }
end:  {...}
 line: 6
column: 57
 }
 }
name: "newName"
 }
 ]
optional: false
 }
 }
 ExpressionStatement {...}
 type: "ExpressionStatement"
start: 195
end: 210
loc:  {...}
 start:  {...}
 line: 7
column: 2
 }
end:  {...}
 line: 7
column: 17
 }
 }
expression: UpdateExpression {...}
 type: "UpdateExpression"
start: 195
end: 209
loc:  {...}
 start:  {...}
 line: 7
column: 2
 }
end:  {...}
 line: 7
column: 16
 }
 }
operator: "++"
prefix: false
argument: Identifier {...}
 type: "Identifier"
start: 195
end: 207
loc:  {...}
 start:  {...}
 line: 7
column: 2
 }
end:  {...}
 line: 7
column: 14
 }
 }
name: "countChanges"
 }
 }
 }
 ]
 }
 }
 ]
optional: false
 }
 }
 ExpressionStatement {...}
 type: "ExpressionStatement"
start: 218
end: 233
loc:  {...}
 start:  {...}
 line: 9
column: 1
 }
end:  {...}
 line: 9
column: 16
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 218
end: 232
loc:  {...}
 start:  {...}
 line: 9
column: 1
 }
end:  {...}
 line: 9
column: 15
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 218
end: 223
loc:  {...}
 start:  {...}
 line: 9
column: 1
 }
end:  {...}
 line: 9
column: 6
 }
 }
name: "$name"
 }
right: Literal {...}
 type: "Literal"
start: 226
end: 232
loc:  {...}
 start:  {...}
 line: 9
column: 9
 }
end:  {...}
 line: 9
column: 15
 }
 }
value: "John"
raw: "\"John\""
 }
 }
 }
 ExpressionStatement {...}
 type: "ExpressionStatement"
start: 235
end: 280
loc:  {...}
 start:  {...}
 line: 10
column: 1
 }
end:  {...}
 line: 10
column: 46
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 235
end: 279
loc:  {...}
 start:  {...}
 line: 10
column: 1
 }
end:  {...}
 line: 10
column: 45
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 235
end: 240
loc:  {...}
 start:  {...}
 line: 10
column: 1
 }
end:  {...}
 line: 10
column: 6
 }
 }
name: "$name"
 }
right: Literal {...}
 type: "Literal"
start: 243
end: 279
loc:  {...}
 start:  {...}
 line: 10
column: 9
 }
end:  {...}
 line: 10
column: 45
 }
 }
value: "Another name that will be ignored?"
raw: "\"Another name that will be ignored?\""
 }
 }
 }
 ExpressionStatement {...}
 type: "ExpressionStatement"
start: 282
end: 323
loc:  {...}
 start:  {...}
 line: 11
column: 1
 }
end:  {...}
 line: 11
column: 42
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 282
end: 323
loc:  {...}
 start:  {...}
 line: 11
column: 1
 }
end:  {...}
 line: 11
column: 42
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 282
end: 293
loc:  {...}
 start:  {...}
 line: 11
column: 1
 }
end:  {...}
 line: 11
column: 12
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 282
end: 289
loc:  {...}
 start:  {...}
 line: 11
column: 1
 }
end:  {...}
 line: 11
column: 8
 }
 }
name: "console"
 }
property: Identifier {...}
 type: "Identifier"
start: 290
end: 293
loc:  {...}
 start:  {...}
 line: 11
column: 9
 }
end:  {...}
 line: 11
column: 12
 }
 }
name: "log"
 }
computed: false
optional: false
 }
arguments: [...] (2)
  Literal {...}
 type: "Literal"
start: 294
end: 315
loc:  {...}
 start:  {...}
 line: 11
column: 13
 }
end:  {...}
 line: 11
column: 34
 }
 }
value: "the name was indeed"
raw: "\"the name was indeed\""
 }
 Identifier {...}
 type: "Identifier"
start: 317
end: 322
loc:  {...}
 start:  {...}
 line: 11
column: 36
 }
end:  {...}
 line: 11
column: 41
 }
 }
name: "$name"
 }
 ]
optional: false
 }
 }
 ExpressionStatement {...}
 type: "ExpressionStatement"
start: 325
end: 340
loc:  {...}
 start:  {...}
 line: 12
column: 1
 }
end:  {...}
 line: 12
column: 16
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 325
end: 339
loc:  {...}
 start:  {...}
 line: 12
column: 1
 }
end:  {...}
 line: 12
column: 15
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 325
end: 330
loc:  {...}
 start:  {...}
 line: 12
column: 1
 }
end:  {...}
 line: 12
column: 6
 }
 }
name: "$name"
 }
right: Literal {...}
 type: "Literal"
start: 333
end: 339
loc:  {...}
 start:  {...}
 line: 12
column: 9
 }
end:  {...}
 line: 12
column: 15
 }
 }
value: "Rose"
raw: "\"Rose\""
 }
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

The AST is not public API and may change at any point in time

modern