Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
runes
This component is in runes mode.
To disable runes mode, add the following to the top of your component:
<svelte:options runes={false} />
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
›
⌄
⌄
⌄
<script>
let count = $state(1);
let doubled = $derived(count * 2);
let quadrupled = $derived(doubled * 2);
function handleClick() {
count += 1;
}
</script>
<button onclick={handleClick}>
Count: {count}
</button>
<p>{count} * 2 = {doubled}</p>
<p>{doubled} * 2 = {quadrupled}</p>
Error compiling component
WebAssembly.instantiateStreaming(): value type opcode @+13
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 * as $ from 'svelte/internal/client';
function handleClick(_, count) {
$.set(count, $.get(count) + 1);
}
var root = $.template(`<button> </button> <p> </p> <p> </p>`, 1);
export default function App($$anchor) {
let count = $.state(1);
let doubled = $.derived(() => $.get(count) * 2);
let quadrupled = $.derived(() => $.get(doubled) * 2);
var fragment = root();
var button = $.first_child(fragment);
button.__click = [handleClick, count];
var text = $.child(button);
$.reset(button);
var p = $.sibling(button, 2);
var text_1 = $.child(p);
$.reset(p);
var p_1 = $.sibling(p, 2);
var text_2 = $.child(p_1);
$.reset(p_1);
$.template_effect(() => {
$.set_text(text, `Count: ${$.get(count) ?? ''}`);
$.set_text(text_1, `${$.get(count) ?? ''} * 2 = ${$.get(doubled) ?? ''}`);
$.set_text(text_2, `${$.get(doubled) ?? ''} * 2 = ${$.get(quadrupled) ?? ''}`);
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 166
- end: 290
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (6)
Text {...}
- type: "Text"
- start: 164
- end: 166
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 166
- end: 222
- name: "button"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 174
- end: 195
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 182
- end: 195
expression: Identifier {...}
- type: "Identifier"
- start: 183
- end: 194
loc: {...}
start: {...}
- line: 12
- column: 17
}end: {...}
- line: 12
- column: 28
}
}- name: "handleClick"
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 196
- end: 205
- raw: "Count: "
- data: "Count: "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 205
- end: 212
expression: Identifier {...}
- type: "Identifier"
- start: 206
- end: 211
loc: {...}
start: {...}
- line: 13
- column: 9
}end: {...}
- line: 13
- column: 14
}
}- name: "count"
}
} Text {...}
- type: "Text"
- start: 212
- end: 213
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 222
- end: 224
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 224
- end: 254
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 227
- end: 234
expression: Identifier {...}
- type: "Identifier"
- start: 228
- end: 233
loc: {...}
start: {...}
- line: 16
- column: 4
}end: {...}
- line: 16
- column: 9
}
}- name: "count"
}
} Text {...}
- type: "Text"
- start: 234
- end: 241
- raw: " * 2 = "
- data: " * 2 = "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 241
- end: 250
expression: Identifier {...}
- type: "Identifier"
- start: 242
- end: 249
loc: {...}
start: {...}
- line: 16
- column: 18
}end: {...}
- line: 16
- column: 25
}
}- name: "doubled"
}
}
]
}
} Text {...}
- type: "Text"
- start: 254
- end: 255
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 255
- end: 290
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 258
- end: 267
expression: Identifier {...}
- type: "Identifier"
- start: 259
- end: 266
loc: {...}
start: {...}
- line: 17
- column: 4
}end: {...}
- line: 17
- column: 11
}
}- name: "doubled"
}
} Text {...}
- type: "Text"
- start: 267
- end: 274
- raw: " * 2 = "
- data: " * 2 = "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 274
- end: 286
expression: Identifier {...}
- type: "Identifier"
- start: 275
- end: 285
loc: {...}
start: {...}
- line: 17
- column: 20
}end: {...}
- line: 17
- column: 30
}
}- name: "quadrupled"
}
}
]
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 164
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 155
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 10
- column: 0
}
}body: [...] (4)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 32
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 23
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 14
- end: 31
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 22
}
}id: Identifier {...}
- type: "Identifier"
- start: 14
- end: 19
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 10
}
}- name: "count"
}init: CallExpression {...}
- type: "CallExpression"
- start: 22
- end: 31
loc: {...}
start: {...}
- line: 2
- column: 13
}end: {...}
- line: 2
- column: 22
}
}callee: Identifier {...}
- type: "Identifier"
- start: 22
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 13
}end: {...}
- line: 2
- column: 19
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 29
- end: 30
loc: {...}
start: {...}
- line: 2
- column: 20
}end: {...}
- line: 2
- column: 21
}
}- value: 1
- raw: "1"
}
]- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 35
- end: 69
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 35
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 39
- end: 68
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 34
}
}id: Identifier {...}
- type: "Identifier"
- start: 39
- end: 46
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 12
}
}- name: "doubled"
}init: CallExpression {...}
- type: "CallExpression"
- start: 49
- end: 68
loc: {...}
start: {...}
- line: 4
- column: 15
}end: {...}
- line: 4
- column: 34
}
}callee: Identifier {...}
- type: "Identifier"
- start: 49
- end: 57
loc: {...}
start: {...}
- line: 4
- column: 15
}end: {...}
- line: 4
- column: 23
}
}- name: "$derived"
}arguments: [...] (1)
BinaryExpression {...}
- type: "BinaryExpression"
- start: 58
- end: 67
loc: {...}
start: {...}
- line: 4
- column: 24
}end: {...}
- line: 4
- column: 33
}
}left: Identifier {...}
- type: "Identifier"
- start: 58
- end: 63
loc: {...}
start: {...}
- line: 4
- column: 24
}end: {...}
- line: 4
- column: 29
}
}- name: "count"
}- operator: "*"
right: Literal {...}
- type: "Literal"
- start: 66
- end: 67
loc: {...}
start: {...}
- line: 4
- column: 32
}end: {...}
- line: 4
- column: 33
}
}- value: 2
- raw: "2"
}
}
]- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 71
- end: 110
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 40
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 75
- end: 109
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 39
}
}id: Identifier {...}
- type: "Identifier"
- start: 75
- end: 85
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 15
}
}- name: "quadrupled"
}init: CallExpression {...}
- type: "CallExpression"
- start: 88
- end: 109
loc: {...}
start: {...}
- line: 5
- column: 18
}end: {...}
- line: 5
- column: 39
}
}callee: Identifier {...}
- type: "Identifier"
- start: 88
- end: 96
loc: {...}
start: {...}
- line: 5
- column: 18
}end: {...}
- line: 5
- column: 26
}
}- name: "$derived"
}arguments: [...] (1)
BinaryExpression {...}
- type: "BinaryExpression"
- start: 97
- end: 108
loc: {...}
start: {...}
- line: 5
- column: 27
}end: {...}
- line: 5
- column: 38
}
}left: Identifier {...}
- type: "Identifier"
- start: 97
- end: 104
loc: {...}
start: {...}
- line: 5
- column: 27
}end: {...}
- line: 5
- column: 34
}
}- name: "doubled"
}- operator: "*"
right: Literal {...}
- type: "Literal"
- start: 107
- end: 108
loc: {...}
start: {...}
- line: 5
- column: 37
}end: {...}
- line: 5
- column: 38
}
}- value: 2
- raw: "2"
}
}
]- optional: false
}
}
]- kind: "let"
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 113
- end: 154
loc: {...}
start: {...}
- line: 7
- column: 1
}end: {...}
- line: 9
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 122
- end: 133
loc: {...}
start: {...}
- line: 7
- column: 10
}end: {...}
- line: 7
- column: 21
}
}- name: "handleClick"
}- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 136
- end: 154
loc: {...}
start: {...}
- line: 7
- column: 24
}end: {...}
- line: 9
- column: 2
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 140
- end: 151
loc: {...}
start: {...}
- line: 8
- column: 2
}end: {...}
- line: 8
- column: 13
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 140
- end: 150
loc: {...}
start: {...}
- line: 8
- column: 2
}end: {...}
- line: 8
- column: 12
}
}- operator: "+="
left: Identifier {...}
- type: "Identifier"
- start: 140
- end: 145
loc: {...}
start: {...}
- line: 8
- column: 2
}end: {...}
- line: 8
- column: 7
}
}- name: "count"
}right: Literal {...}
- type: "Literal"
- start: 149
- end: 150
loc: {...}
start: {...}
- line: 8
- column: 11
}end: {...}
- line: 8
- column: 12
}
}- value: 1
- raw: "1"
}
}
}
]
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time