Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
runes
This component is not in runes mode.
To enable runes mode, either start using runes in your code, or add the following to the top of your component:
<svelte:options runes />
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
›
⌄
⌄
⌄
<script>
let name = "Sarah";
let countChanges = 0;
$: {
console.log("I run whenever the name changes!", name);
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>
the name was indeed Another name that will be ignored?
I run whenever the name changes! Rose
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
⌄
⌄
⌄
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
var root = $.template(`<h1> </h1> <p> </p>`, 1);
export default function App($$anchor, $$props) {
$.push($$props, false);
let name = $.mutable_state("Sarah");
let countChanges = $.mutable_state(0);
$.set(name, "John");
$.set(name, "Another name that will be ignored?");
console.log("the name was indeed", $.get(name));
$.set(name, "Rose");
$.legacy_pre_effect(() => ($.get(name), $.get(countChanges)), () => {
console.log("I run whenever the name changes!", $.get(name));
$.update(countChanges);
});
$.legacy_pre_effect_reset();
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);
$.template_effect(() => {
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 271
- end: 354
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (4)
Text {...}
- type: "Text"
- start: 269
- end: 271
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 271
- end: 293
- name: "h1"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 275
- end: 281
- raw: "Hello "
- data: "Hello "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 281
- end: 287
expression: Identifier {...}
- type: "Identifier"
- start: 282
- end: 286
loc: {...}
start: {...}
- line: 15
- column: 11
}end: {...}
- line: 15
- column: 15
}
}- name: "name"
}
} Text {...}
- type: "Text"
- start: 287
- end: 288
- raw: "!"
- data: "!"
}
]
}
} Text {...}
- type: "Text"
- start: 293
- end: 294
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 294
- end: 354
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 297
- end: 329
- raw: "I think that name has changed "
- data: "I think that name has changed "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 329
- end: 343
expression: Identifier {...}
- type: "Identifier"
- start: 330
- end: 342
loc: {...}
start: {...}
- line: 17
- column: 32
}end: {...}
- line: 17
- column: 44
}
}- name: "countChanges"
}
} Text {...}
- type: "Text"
- start: 343
- end: 350
- raw: " times"
- data: " times"
}
]
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 269
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 260
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 13
- column: 0
}
}body: [...] (7)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 29
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 20
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 14
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 19
}
}id: Identifier {...}
- type: "Identifier"
- start: 14
- end: 18
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 9
}
}- name: "name"
}init: Literal {...}
- type: "Literal"
- start: 21
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 12
}end: {...}
- line: 2
- column: 19
}
}- value: "Sarah"
- raw: "\"Sarah\""
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 31
- end: 52
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 22
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 35
- end: 51
loc: {...}
start: {...}
- line: 3
- column: 5
}end: {...}
- line: 3
- column: 21
}
}id: Identifier {...}
- type: "Identifier"
- start: 35
- end: 47
loc: {...}
start: {...}
- line: 3
- column: 5
}end: {...}
- line: 3
- column: 17
}
}- name: "countChanges"
}init: Literal {...}
- type: "Literal"
- start: 50
- end: 51
loc: {...}
start: {...}
- line: 3
- column: 20
}end: {...}
- line: 3
- column: 21
}
}- value: 0
- raw: "0"
}
}
]- kind: "let"
} LabeledStatement {...}
- type: "LabeledStatement"
- start: 54
- end: 136
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 7
- column: 2
}
}body: BlockStatement {...}
- type: "BlockStatement"
- start: 57
- end: 136
loc: {...}
start: {...}
- line: 4
- column: 4
}end: {...}
- line: 7
- column: 2
}
}body: [...] (2)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 61
- end: 115
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 56
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 61
- end: 114
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 55
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 61
- end: 72
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 13
}
}object: Identifier {...}
- type: "Identifier"
- start: 61
- end: 68
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 9
}
}- name: "console"
}property: Identifier {...}
- type: "Identifier"
- start: 69
- end: 72
loc: {...}
start: {...}
- line: 5
- column: 10
}end: {...}
- line: 5
- column: 13
}
}- name: "log"
}- computed: false
- optional: false
}arguments: [...] (2)
Literal {...}
- type: "Literal"
- start: 73
- end: 107
loc: {...}
start: {...}
- line: 5
- column: 14
}end: {...}
- line: 5
- column: 48
}
}- value: "I run whenever the name changes!"
- raw: "\"I run whenever the name changes!\""
} Identifier {...}
- type: "Identifier"
- start: 109
- end: 113
loc: {...}
start: {...}
- line: 5
- column: 50
}end: {...}
- line: 5
- column: 54
}
}- name: "name"
}
]- optional: false
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 118
- end: 133
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 17
}
}expression: UpdateExpression {...}
- type: "UpdateExpression"
- start: 118
- end: 132
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 16
}
}- operator: "++"
- prefix: false
argument: Identifier {...}
- type: "Identifier"
- start: 118
- end: 130
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 14
}
}- name: "countChanges"
}
}
}
]
}label: Identifier {...}
- type: "Identifier"
- start: 54
- end: 55
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 2
}
}- name: "$"
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 139
- end: 153
loc: {...}
start: {...}
- line: 8
- column: 1
}end: {...}
- line: 8
- column: 15
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 139
- end: 152
loc: {...}
start: {...}
- line: 8
- column: 1
}end: {...}
- line: 8
- column: 14
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 139
- end: 143
loc: {...}
start: {...}
- line: 8
- column: 1
}end: {...}
- line: 8
- column: 5
}
}- name: "name"
}right: Literal {...}
- type: "Literal"
- start: 146
- end: 152
loc: {...}
start: {...}
- line: 8
- column: 8
}end: {...}
- line: 8
- column: 14
}
}- value: "John"
- raw: "\"John\""
}
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 155
- end: 199
loc: {...}
start: {...}
- line: 9
- column: 1
}end: {...}
- line: 9
- column: 45
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 155
- end: 198
loc: {...}
start: {...}
- line: 9
- column: 1
}end: {...}
- line: 9
- column: 44
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 155
- end: 159
loc: {...}
start: {...}
- line: 9
- column: 1
}end: {...}
- line: 9
- column: 5
}
}- name: "name"
}right: Literal {...}
- type: "Literal"
- start: 162
- end: 198
loc: {...}
start: {...}
- line: 9
- column: 8
}end: {...}
- line: 9
- column: 44
}
}- value: "Another name that will be ignored?"
- raw: "\"Another name that will be ignored?\""
}
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 201
- end: 241
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 10
- column: 41
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 201
- end: 241
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 10
- column: 41
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 201
- end: 212
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 10
- column: 12
}
}object: Identifier {...}
- type: "Identifier"
- start: 201
- end: 208
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 10
- column: 8
}
}- name: "console"
}property: Identifier {...}
- type: "Identifier"
- start: 209
- end: 212
loc: {...}
start: {...}
- line: 10
- column: 9
}end: {...}
- line: 10
- column: 12
}
}- name: "log"
}- computed: false
- optional: false
}arguments: [...] (2)
Literal {...}
- type: "Literal"
- start: 213
- end: 234
loc: {...}
start: {...}
- line: 10
- column: 13
}end: {...}
- line: 10
- column: 34
}
}- value: "the name was indeed"
- raw: "\"the name was indeed\""
} Identifier {...}
- type: "Identifier"
- start: 236
- end: 240
loc: {...}
start: {...}
- line: 10
- column: 36
}end: {...}
- line: 10
- column: 40
}
}- name: "name"
}
]- optional: false
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 243
- end: 257
loc: {...}
start: {...}
- line: 11
- column: 1
}end: {...}
- line: 11
- column: 15
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 243
- end: 256
loc: {...}
start: {...}
- line: 11
- column: 1
}end: {...}
- line: 11
- column: 14
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 243
- end: 247
loc: {...}
start: {...}
- line: 11
- column: 1
}end: {...}
- line: 11
- column: 5
}
}- name: "name"
}right: Literal {...}
- type: "Literal"
- start: 250
- end: 256
loc: {...}
start: {...}
- line: 11
- column: 8
}end: {...}
- line: 11
- column: 14
}
}- value: "Rose"
- raw: "\"Rose\""
}
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time