primitive vs. object • Playground • Svelte

App.svelte

let isForRealz = false;

let isForRealzObj = {value: false};

function makeTrue() {

isForRealz = true;

isForRealzObj.value = true;

}

$: if (isForRealz) console.log(Date.now(), "isForRealz became true");

$: if (isForRealzObj.value) console.log(Date.now(), "isForRealzObj became true");

</script>

<p>

click the button multiple times, why does the second console keep firing?

</p>

<h4>isForRealz: {isForRealz && isForRealzObj.value}</h4>

<button on:click={makeTrue}>click and watch the console</button>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

var root = $.template(`<p>click the button multiple times, why does the second console keep firing?</p> <h4> </h4> <button>click and watch the console</button>`, 1);

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

$.push($$props, false);

let isForRealz = $.mutable_state(false);

let isForRealzObj = $.mutable_state({ value: false });

function makeTrue() {

$.set(isForRealz, true);

$.mutate(isForRealzObj, $.get(isForRealzObj).value = true);

}

$.legacy_pre_effect(() => ($.get(isForRealz)), () => {

if ($.get(isForRealz)) console.log(Date.now(), "isForRealz became true");

});

$.legacy_pre_effect(() => ($.get(isForRealzObj)), () => {

if ($.get(isForRealzObj).value) console.log(Date.now(), "isForRealzObj became true");

});

$.legacy_pre_effect_reset();

var fragment = root();

var h4 = $.sibling($.first_child(fragment), 2);

var text = $.child(h4);

$.reset(h4);

var button = $.sibling(h4, 2);

$.template_effect(() => $.set_text(text, `isForRealz: ${($.get(isForRealz) && $.get(isForRealzObj).value) ?? ''}`));

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

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

		
			
				
					 Root {
 css: null
js: []
start: 315
end: 520
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (6)
  Text {...}
 type: "Text"
start: 313
end: 315
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 315
end: 398
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 318
end: 394
raw: "click the button multiple times, why does the second console keep firing?"
data: "click the button multiple times, why does the second console keep firing?"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 398
end: 399
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 399
end: 455
name: "h4"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 403
end: 415
raw: "isForRealz: "
data: "isForRealz: "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 415
end: 450
expression: LogicalExpression {...}
 type: "LogicalExpression"
start: 416
end: 449
loc:  {...}
 start:  {...}
 line: 16
column: 17
 }
end:  {...}
 line: 16
column: 50
 }
 }
left: Identifier {...}
 type: "Identifier"
start: 416
end: 426
loc:  {...}
 start:  {...}
 line: 16
column: 17
 }
end:  {...}
 line: 16
column: 27
 }
 }
name: "isForRealz"
 }
operator: "&&"
right: MemberExpression {...}
 type: "MemberExpression"
start: 430
end: 449
loc:  {...}
 start:  {...}
 line: 16
column: 31
 }
end:  {...}
 line: 16
column: 50
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 430
end: 443
loc:  {...}
 start:  {...}
 line: 16
column: 31
 }
end:  {...}
 line: 16
column: 44
 }
 }
name: "isForRealzObj"
 }
property: Identifier {...}
 type: "Identifier"
start: 444
end: 449
loc:  {...}
 start:  {...}
 line: 16
column: 45
 }
end:  {...}
 line: 16
column: 50
 }
 }
name: "value"
 }
computed: false
optional: false
 }
 }
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 455
end: 456
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 456
end: 520
name: "button"
attributes: [...] (1)
  OnDirective {...}
 start: 464
end: 483
type: "OnDirective"
name: "click"
expression: Identifier {...}
 type: "Identifier"
start: 474
end: 482
loc:  {...}
 start:  {...}
 line: 17
column: 18
 }
end:  {...}
 line: 17
column: 26
 }
 }
name: "makeTrue"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 484
end: 511
raw: "click and watch the console"
data: "click and watch the console"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 313
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 304
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 11
column: 0
 }
 }
body: [...] (5)
  VariableDeclaration {...}
 type: "VariableDeclaration"
start: 10
end: 33
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 24
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 14
end: 32
loc:  {...}
 start:  {...}
 line: 2
column: 5
 }
end:  {...}
 line: 2
column: 23
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 14
end: 24
loc:  {...}
 start:  {...}
 line: 2
column: 5
 }
end:  {...}
 line: 2
column: 15
 }
 }
name: "isForRealz"
 }
init: Literal {...}
 type: "Literal"
start: 27
end: 32
loc:  {...}
 start:  {...}
 line: 2
column: 18
 }
end:  {...}
 line: 2
column: 23
 }
 }
value: false
raw: "false"
 }
 }
 ]
kind: "let"
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 35
end: 70
loc:  {...}
 start:  {...}
 line: 3
column: 1
 }
end:  {...}
 line: 3
column: 36
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 39
end: 69
loc:  {...}
 start:  {...}
 line: 3
column: 5
 }
end:  {...}
 line: 3
column: 35
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 39
end: 52
loc:  {...}
 start:  {...}
 line: 3
column: 5
 }
end:  {...}
 line: 3
column: 18
 }
 }
name: "isForRealzObj"
 }
init: ObjectExpression {...}
 type: "ObjectExpression"
start: 55
end: 69
loc:  {...}
 start:  {...}
 line: 3
column: 21
 }
end:  {...}
 line: 3
column: 35
 }
 }
properties: [...] (1)
  Property {...}
 type: "Property"
start: 56
end: 68
loc:  {...}
 start:  {...}
 line: 3
column: 22
 }
end:  {...}
 line: 3
column: 34
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 56
end: 61
loc:  {...}
 start:  {...}
 line: 3
column: 22
 }
end:  {...}
 line: 3
column: 27
 }
 }
name: "value"
 }
value: Literal {...}
 type: "Literal"
start: 63
end: 68
loc:  {...}
 start:  {...}
 line: 3
column: 29
 }
end:  {...}
 line: 3
column: 34
 }
 }
value: false
raw: "false"
 }
kind: "init"
 }
 ]
 }
 }
 ]
kind: "let"
 }
 FunctionDeclaration {...}
 type: "FunctionDeclaration"
start: 72
end: 147
loc:  {...}
 start:  {...}
 line: 4
column: 1
 }
end:  {...}
 line: 7
column: 2
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 81
end: 89
loc:  {...}
 start:  {...}
 line: 4
column: 10
 }
end:  {...}
 line: 4
column: 18
 }
 }
name: "makeTrue"
 }
expression: false
generator: false
async: false
params: []
body: BlockStatement {...}
 type: "BlockStatement"
start: 92
end: 147
loc:  {...}
 start:  {...}
 line: 4
column: 21
 }
end:  {...}
 line: 7
column: 2
 }
 }
body: [...] (2)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 96
end: 114
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 20
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 96
end: 113
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 19
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 96
end: 106
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 12
 }
 }
name: "isForRealz"
 }
right: Literal {...}
 type: "Literal"
start: 109
end: 113
loc:  {...}
 start:  {...}
 line: 5
column: 15
 }
end:  {...}
 line: 5
column: 19
 }
 }
value: true
raw: "true"
 }
 }
 }
 ExpressionStatement {...}
 type: "ExpressionStatement"
start: 117
end: 144
loc:  {...}
 start:  {...}
 line: 6
column: 2
 }
end:  {...}
 line: 6
column: 29
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 117
end: 143
loc:  {...}
 start:  {...}
 line: 6
column: 2
 }
end:  {...}
 line: 6
column: 28
 }
 }
operator: "="
left: MemberExpression {...}
 type: "MemberExpression"
start: 117
end: 136
loc:  {...}
 start:  {...}
 line: 6
column: 2
 }
end:  {...}
 line: 6
column: 21
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 117
end: 130
loc:  {...}
 start:  {...}
 line: 6
column: 2
 }
end:  {...}
 line: 6
column: 15
 }
 }
name: "isForRealzObj"
 }
property: Identifier {...}
 type: "Identifier"
start: 131
end: 136
loc:  {...}
 start:  {...}
 line: 6
column: 16
 }
end:  {...}
 line: 6
column: 21
 }
 }
name: "value"
 }
computed: false
optional: false
 }
right: Literal {...}
 type: "Literal"
start: 139
end: 143
loc:  {...}
 start:  {...}
 line: 6
column: 24
 }
end:  {...}
 line: 6
column: 28
 }
 }
value: true
raw: "true"
 }
 }
 }
 ]
 }
 }
 LabeledStatement {...}
 type: "LabeledStatement"
start: 149
end: 218
loc:  {...}
 start:  {...}
 line: 8
column: 1
 }
end:  {...}
 line: 8
column: 70
 }
 }
body: IfStatement {...}
 type: "IfStatement"
start: 152
end: 218
loc:  {...}
 start:  {...}
 line: 8
column: 4
 }
end:  {...}
 line: 8
column: 70
 }
 }
test: Identifier {...}
 type: "Identifier"
start: 156
end: 166
loc:  {...}
 start:  {...}
 line: 8
column: 8
 }
end:  {...}
 line: 8
column: 18
 }
 }
name: "isForRealz"
 }
consequent: ExpressionStatement {...}
 type: "ExpressionStatement"
start: 168
end: 218
loc:  {...}
 start:  {...}
 line: 8
column: 20
 }
end:  {...}
 line: 8
column: 70
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 168
end: 217
loc:  {...}
 start:  {...}
 line: 8
column: 20
 }
end:  {...}
 line: 8
column: 69
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 168
end: 179
loc:  {...}
 start:  {...}
 line: 8
column: 20
 }
end:  {...}
 line: 8
column: 31
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 168
end: 175
loc:  {...}
 start:  {...}
 line: 8
column: 20
 }
end:  {...}
 line: 8
column: 27
 }
 }
name: "console"
 }
property: Identifier {...}
 type: "Identifier"
start: 176
end: 179
loc:  {...}
 start:  {...}
 line: 8
column: 28
 }
end:  {...}
 line: 8
column: 31
 }
 }
name: "log"
 }
computed: false
optional: false
 }
arguments: [...] (2)
  CallExpression {...}
 type: "CallExpression"
start: 180
end: 190
loc:  {...}
 start:  {...}
 line: 8
column: 32
 }
end:  {...}
 line: 8
column: 42
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 180
end: 188
loc:  {...}
 start:  {...}
 line: 8
column: 32
 }
end:  {...}
 line: 8
column: 40
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 180
end: 184
loc:  {...}
 start:  {...}
 line: 8
column: 32
 }
end:  {...}
 line: 8
column: 36
 }
 }
name: "Date"
 }
property: Identifier {...}
 type: "Identifier"
start: 185
end: 188
loc:  {...}
 start:  {...}
 line: 8
column: 37
 }
end:  {...}
 line: 8
column: 40
 }
 }
name: "now"
 }
computed: false
optional: false
 }
arguments: []
optional: false
 }
 Literal {...}
 type: "Literal"
start: 192
end: 216
loc:  {...}
 start:  {...}
 line: 8
column: 44
 }
end:  {...}
 line: 8
column: 68
 }
 }
value: "isForRealz became true"
raw: "\"isForRealz became true\""
 }
 ]
optional: false
 }
 }
alternate: null
 }
label: Identifier {...}
 type: "Identifier"
start: 149
end: 150
loc:  {...}
 start:  {...}
 line: 8
column: 1
 }
end:  {...}
 line: 8
column: 2
 }
 }
name: "$"
 }
 }
 LabeledStatement {...}
 type: "LabeledStatement"
start: 220
end: 301
loc:  {...}
 start:  {...}
 line: 9
column: 1
 }
end:  {...}
 line: 9
column: 82
 }
 }
body: IfStatement {...}
 type: "IfStatement"
start: 223
end: 301
loc:  {...}
 start:  {...}
 line: 9
column: 4
 }
end:  {...}
 line: 9
column: 82
 }
 }
test: MemberExpression {...}
 type: "MemberExpression"
start: 227
end: 246
loc:  {...}
 start:  {...}
 line: 9
column: 8
 }
end:  {...}
 line: 9
column: 27
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 227
end: 240
loc:  {...}
 start:  {...}
 line: 9
column: 8
 }
end:  {...}
 line: 9
column: 21
 }
 }
name: "isForRealzObj"
 }
property: Identifier {...}
 type: "Identifier"
start: 241
end: 246
loc:  {...}
 start:  {...}
 line: 9
column: 22
 }
end:  {...}
 line: 9
column: 27
 }
 }
name: "value"
 }
computed: false
optional: false
 }
consequent: ExpressionStatement {...}
 type: "ExpressionStatement"
start: 248
end: 301
loc:  {...}
 start:  {...}
 line: 9
column: 29
 }
end:  {...}
 line: 9
column: 82
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 248
end: 300
loc:  {...}
 start:  {...}
 line: 9
column: 29
 }
end:  {...}
 line: 9
column: 81
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 248
end: 259
loc:  {...}
 start:  {...}
 line: 9
column: 29
 }
end:  {...}
 line: 9
column: 40
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 248
end: 255
loc:  {...}
 start:  {...}
 line: 9
column: 29
 }
end:  {...}
 line: 9
column: 36
 }
 }
name: "console"
 }
property: Identifier {...}
 type: "Identifier"
start: 256
end: 259
loc:  {...}
 start:  {...}
 line: 9
column: 37
 }
end:  {...}
 line: 9
column: 40
 }
 }
name: "log"
 }
computed: false
optional: false
 }
arguments: [...] (2)
  CallExpression {...}
 type: "CallExpression"
start: 260
end: 270
loc:  {...}
 start:  {...}
 line: 9
column: 41
 }
end:  {...}
 line: 9
column: 51
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 260
end: 268
loc:  {...}
 start:  {...}
 line: 9
column: 41
 }
end:  {...}
 line: 9
column: 49
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 260
end: 264
loc:  {...}
 start:  {...}
 line: 9
column: 41
 }
end:  {...}
 line: 9
column: 45
 }
 }
name: "Date"
 }
property: Identifier {...}
 type: "Identifier"
start: 265
end: 268
loc:  {...}
 start:  {...}
 line: 9
column: 46
 }
end:  {...}
 line: 9
column: 49
 }
 }
name: "now"
 }
computed: false
optional: false
 }
arguments: []
optional: false
 }
 Literal {...}
 type: "Literal"
start: 272
end: 299
loc:  {...}
 start:  {...}
 line: 9
column: 53
 }
end:  {...}
 line: 9
column: 80
 }
 }
value: "isForRealzObj became true"
raw: "\"isForRealzObj became true\""
 }
 ]
optional: false
 }
 }
alternate: null
 }
label: Identifier {...}
 type: "Identifier"
start: 220
end: 221
loc:  {...}
 start:  {...}
 line: 9
column: 1
 }
end:  {...}
 line: 9
column: 2
 }
 }
name: "$"
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern