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
19
20
›
⌄
⌄
⌄
⌄
⌄
<script>
let count = $state(0);
$effect(() => {
if (count >= 10) {
alert(`count is dangerously high!`);
count = 9;
}
});
function handleClick() {
count += 1;
}
</script>
<button onclick={handleClick}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>
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>`);
export default function App($$anchor, $$props) {
$.push($$props, true);
let count = $.state(0);
$.user_effect(() => {
if ($.get(count) >= 10) {
alert(`count is dangerously high!`);
$.set(count, 9);
}
});
var button = root();
button.__click = [handleClick, count];
var text = $.child(button);
$.reset(button);
$.template_effect(() => $.set_text(text, `Clicked ${$.get(count) ?? ''}
${($.get(count) === 1 ? 'time' : 'times') ?? ''}`));
$.append($$anchor, button);
$.pop();
}
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 190
- end: 281
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (2)
Text {...}
- type: "Text"
- start: 188
- end: 190
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 190
- end: 281
- name: "button"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 198
- end: 219
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 206
- end: 219
expression: Identifier {...}
- type: "Identifier"
- start: 207
- end: 218
loc: {...}
start: {...}
- line: 16
- column: 17
}end: {...}
- line: 16
- column: 28
}
}- name: "handleClick"
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 220
- end: 230
- raw: "Clicked "
- data: "Clicked "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 230
- end: 237
expression: Identifier {...}
- type: "Identifier"
- start: 231
- end: 236
loc: {...}
start: {...}
- line: 17
- column: 10
}end: {...}
- line: 17
- column: 15
}
}- name: "count"
}
} Text {...}
- type: "Text"
- start: 237
- end: 239
- raw: "\n\t"
- data: "\n\t"
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 239
- end: 271
expression: ConditionalExpression {...}
- type: "ConditionalExpression"
- start: 240
- end: 270
loc: {...}
start: {...}
- line: 18
- column: 2
}end: {...}
- line: 18
- column: 32
}
}test: BinaryExpression {...}
- type: "BinaryExpression"
- start: 240
- end: 251
loc: {...}
start: {...}
- line: 18
- column: 2
}end: {...}
- line: 18
- column: 13
}
}left: Identifier {...}
- type: "Identifier"
- start: 240
- end: 245
loc: {...}
start: {...}
- line: 18
- column: 2
}end: {...}
- line: 18
- column: 7
}
}- name: "count"
}- operator: "==="
right: Literal {...}
- type: "Literal"
- start: 250
- end: 251
loc: {...}
start: {...}
- line: 18
- column: 12
}end: {...}
- line: 18
- column: 13
}
}- value: 1
- raw: "1"
}
}consequent: Literal {...}
- type: "Literal"
- start: 254
- end: 260
loc: {...}
start: {...}
- line: 18
- column: 16
}end: {...}
- line: 18
- column: 22
}
}- value: "time"
- raw: "'time'"
}alternate: Literal {...}
- type: "Literal"
- start: 263
- end: 270
loc: {...}
start: {...}
- line: 18
- column: 25
}end: {...}
- line: 18
- column: 32
}
}- value: "times"
- raw: "'times'"
}
}
} Text {...}
- type: "Text"
- start: 271
- end: 272
- raw: "\n"
- data: "\n"
}
]
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 188
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 179
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 14
- column: 0
}
}body: [...] (3)
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: 0
- raw: "0"
}
]- optional: false
}
}
]- kind: "let"
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 35
- end: 134
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 9
- column: 4
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 35
- end: 133
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 9
- column: 3
}
}callee: Identifier {...}
- type: "Identifier"
- start: 35
- end: 42
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 8
}
}- name: "$effect"
}arguments: [...] (1)
ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 43
- end: 132
loc: {...}
start: {...}
- line: 4
- column: 9
}end: {...}
- line: 9
- column: 2
}
}- id: null
- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 49
- end: 132
loc: {...}
start: {...}
- line: 4
- column: 15
}end: {...}
- line: 9
- column: 2
}
}body: [...] (1)
IfStatement {...}
- type: "IfStatement"
- start: 53
- end: 129
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 8
- column: 3
}
}test: BinaryExpression {...}
- type: "BinaryExpression"
- start: 57
- end: 68
loc: {...}
start: {...}
- line: 5
- column: 6
}end: {...}
- line: 5
- column: 17
}
}left: Identifier {...}
- type: "Identifier"
- start: 57
- end: 62
loc: {...}
start: {...}
- line: 5
- column: 6
}end: {...}
- line: 5
- column: 11
}
}- name: "count"
}- operator: ">="
right: Literal {...}
- type: "Literal"
- start: 66
- end: 68
loc: {...}
start: {...}
- line: 5
- column: 15
}end: {...}
- line: 5
- column: 17
}
}- value: 10
- raw: "10"
}
}consequent: BlockStatement {...}
- type: "BlockStatement"
- start: 70
- end: 129
loc: {...}
start: {...}
- line: 5
- column: 19
}end: {...}
- line: 8
- column: 3
}
}body: [...] (2)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 75
- end: 111
loc: {...}
start: {...}
- line: 6
- column: 3
}end: {...}
- line: 6
- column: 39
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 75
- end: 110
loc: {...}
start: {...}
- line: 6
- column: 3
}end: {...}
- line: 6
- column: 38
}
}callee: Identifier {...}
- type: "Identifier"
- start: 75
- end: 80
loc: {...}
start: {...}
- line: 6
- column: 3
}end: {...}
- line: 6
- column: 8
}
}- name: "alert"
}arguments: [...] (1)
TemplateLiteral {...}
- type: "TemplateLiteral"
- start: 81
- end: 109
loc: {...}
start: {...}
- line: 6
- column: 9
}end: {...}
- line: 6
- column: 37
}
}- expressions: []
quasis: [...] (1)
TemplateElement {...}
- type: "TemplateElement"
- start: 82
- end: 108
loc: {...}
start: {...}
- line: 6
- column: 10
}end: {...}
- line: 6
- column: 36
}
}value: {...}
- raw: "count is dangerously high!"
- cooked: "count is dangerously high!"
}- tail: true
}
]
}
]- optional: false
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 115
- end: 125
loc: {...}
start: {...}
- line: 7
- column: 3
}end: {...}
- line: 7
- column: 13
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 115
- end: 124
loc: {...}
start: {...}
- line: 7
- column: 3
}end: {...}
- line: 7
- column: 12
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 115
- end: 120
loc: {...}
start: {...}
- line: 7
- column: 3
}end: {...}
- line: 7
- column: 8
}
}- name: "count"
}right: Literal {...}
- type: "Literal"
- start: 123
- end: 124
loc: {...}
start: {...}
- line: 7
- column: 11
}end: {...}
- line: 7
- column: 12
}
}- value: 9
- raw: "9"
}
}
}
]
}- alternate: null
}
]
}
}
]- optional: false
}
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 137
- end: 178
loc: {...}
start: {...}
- line: 11
- column: 1
}end: {...}
- line: 13
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 146
- end: 157
loc: {...}
start: {...}
- line: 11
- column: 10
}end: {...}
- line: 11
- column: 21
}
}- name: "handleClick"
}- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 160
- end: 178
loc: {...}
start: {...}
- line: 11
- column: 24
}end: {...}
- line: 13
- column: 2
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 164
- end: 175
loc: {...}
start: {...}
- line: 12
- column: 2
}end: {...}
- line: 12
- column: 13
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 164
- end: 174
loc: {...}
start: {...}
- line: 12
- column: 2
}end: {...}
- line: 12
- column: 12
}
}- operator: "+="
left: Identifier {...}
- type: "Identifier"
- start: 164
- end: 169
loc: {...}
start: {...}
- line: 12
- column: 2
}end: {...}
- line: 12
- column: 7
}
}- name: "count"
}right: Literal {...}
- type: "Literal"
- start: 173
- end: 174
loc: {...}
start: {...}
- line: 12
- column: 11
}end: {...}
- line: 12
- column: 12
}
}- value: 1
- raw: "1"
}
}
}
]
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time