Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
Butterfly.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
21
22
23
24
25
26
›
⌄
⌄
⌄
⌄
<script>
import Butterfly from './Butterfly.svelte';
let count = $state(0);
let doubled = $derived(count * 2);
let quadrupled = $derived(doubled * 2);
let octupled = $derived(quadrupled * 2);
function flap() {
count += 1;
}
$effect(() => {
// Because of this line, clicking the butterfly will cause information
// to be logged to the console about which state changed to cause
// the effect to re-run. (note: stack traces are better
// outside the playground!)
$inspect.trace();
if (octupled > 20) {
alert('The flapping of the wings of a butterfly can be felt on the other side of the world.')
}
});
</script>
<Butterfly onflap={() => count += 1} />
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
›
⌄
⌄
⌄
⌄
⌄
import "svelte/internal/disclose-version";
import * as $ from "svelte/internal/client";
import Butterfly from './Butterfly.svelte';
export default function App($$anchor, $$props) {
$.push($$props, true);
let count = $.state(0);
let doubled = $.derived(() => $.get(count) * 2);
let quadrupled = $.derived(() => $.get(doubled) * 2);
let octupled = $.derived(() => $.get(quadrupled) * 2);
function flap() {
$.set(count, $.get(count) + 1);
}
$.user_effect(() => {
if ($.get(octupled) > 20) {
alert('The flapping of the wings of a butterfly can be felt on the other side of the world.');
}
});
Butterfly($$anchor, {
onflap: () => $.set(count, $.get(count) + 1)
});
$.pop();
}
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 646
- end: 685
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (2)
Text {...}
- type: "Text"
- start: 644
- end: 646
- raw: "\n\n"
- data: "\n\n"
} Component {...}
- type: "Component"
- start: 646
- end: 685
- name: "Butterfly"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 657
- end: 682
- name: "onflap"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 664
- end: 682
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 665
- end: 681
loc: {...}
start: {...}
- line: 26
- column: 19
}end: {...}
- line: 26
- column: 35
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 671
- end: 681
loc: {...}
start: {...}
- line: 26
- column: 25
}end: {...}
- line: 26
- column: 35
}
}- operator: "+="
left: Identifier {...}
- type: "Identifier"
- start: 671
- end: 676
loc: {...}
start: {...}
- line: 26
- column: 25
}end: {...}
- line: 26
- column: 30
}
}- name: "count"
}right: Literal {...}
- type: "Literal"
- start: 680
- end: 681
loc: {...}
start: {...}
- line: 26
- column: 34
}end: {...}
- line: 26
- column: 35
}
}- value: 1
- raw: "1"
}
}
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 644
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 635
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 24
- column: 0
}
}body: [...] (7)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 53
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 44
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 17
- end: 26
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 17
}
}local: Identifier {...}
- type: "Identifier"
- start: 17
- end: 26
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 17
}
}- name: "Butterfly"
}
}
]source: Literal {...}
- type: "Literal"
- start: 32
- end: 52
loc: {...}
start: {...}
- line: 2
- column: 23
}end: {...}
- line: 2
- column: 43
}
}- value: "./Butterfly.svelte"
- raw: "'./Butterfly.svelte'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 57
- end: 79
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 23
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 61
- end: 78
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 22
}
}id: Identifier {...}
- type: "Identifier"
- start: 61
- end: 66
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 10
}
}- name: "count"
}init: CallExpression {...}
- type: "CallExpression"
- start: 69
- end: 78
loc: {...}
start: {...}
- line: 4
- column: 13
}end: {...}
- line: 4
- column: 22
}
}callee: Identifier {...}
- type: "Identifier"
- start: 69
- end: 75
loc: {...}
start: {...}
- line: 4
- column: 13
}end: {...}
- line: 4
- column: 19
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 76
- end: 77
loc: {...}
start: {...}
- line: 4
- column: 20
}end: {...}
- line: 4
- column: 21
}
}- value: 0
- raw: "0"
}
]- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 81
- end: 115
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 35
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 85
- end: 114
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 34
}
}id: Identifier {...}
- type: "Identifier"
- start: 85
- end: 92
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 12
}
}- name: "doubled"
}init: CallExpression {...}
- type: "CallExpression"
- start: 95
- end: 114
loc: {...}
start: {...}
- line: 5
- column: 15
}end: {...}
- line: 5
- column: 34
}
}callee: Identifier {...}
- type: "Identifier"
- start: 95
- end: 103
loc: {...}
start: {...}
- line: 5
- column: 15
}end: {...}
- line: 5
- column: 23
}
}- name: "$derived"
}arguments: [...] (1)
BinaryExpression {...}
- type: "BinaryExpression"
- start: 104
- end: 113
loc: {...}
start: {...}
- line: 5
- column: 24
}end: {...}
- line: 5
- column: 33
}
}left: Identifier {...}
- type: "Identifier"
- start: 104
- end: 109
loc: {...}
start: {...}
- line: 5
- column: 24
}end: {...}
- line: 5
- column: 29
}
}- name: "count"
}- operator: "*"
right: Literal {...}
- type: "Literal"
- start: 112
- end: 113
loc: {...}
start: {...}
- line: 5
- column: 32
}end: {...}
- line: 5
- column: 33
}
}- value: 2
- raw: "2"
}
}
]- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 117
- end: 156
loc: {...}
start: {...}
- line: 6
- column: 1
}end: {...}
- line: 6
- column: 40
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 121
- end: 155
loc: {...}
start: {...}
- line: 6
- column: 5
}end: {...}
- line: 6
- column: 39
}
}id: Identifier {...}
- type: "Identifier"
- start: 121
- end: 131
loc: {...}
start: {...}
- line: 6
- column: 5
}end: {...}
- line: 6
- column: 15
}
}- name: "quadrupled"
}init: CallExpression {...}
- type: "CallExpression"
- start: 134
- end: 155
loc: {...}
start: {...}
- line: 6
- column: 18
}end: {...}
- line: 6
- column: 39
}
}callee: Identifier {...}
- type: "Identifier"
- start: 134
- end: 142
loc: {...}
start: {...}
- line: 6
- column: 18
}end: {...}
- line: 6
- column: 26
}
}- name: "$derived"
}arguments: [...] (1)
BinaryExpression {...}
- type: "BinaryExpression"
- start: 143
- end: 154
loc: {...}
start: {...}
- line: 6
- column: 27
}end: {...}
- line: 6
- column: 38
}
}left: Identifier {...}
- type: "Identifier"
- start: 143
- end: 150
loc: {...}
start: {...}
- line: 6
- column: 27
}end: {...}
- line: 6
- column: 34
}
}- name: "doubled"
}- operator: "*"
right: Literal {...}
- type: "Literal"
- start: 153
- end: 154
loc: {...}
start: {...}
- line: 6
- column: 37
}end: {...}
- line: 6
- column: 38
}
}- value: 2
- raw: "2"
}
}
]- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 158
- end: 198
loc: {...}
start: {...}
- line: 7
- column: 1
}end: {...}
- line: 7
- column: 41
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 162
- end: 197
loc: {...}
start: {...}
- line: 7
- column: 5
}end: {...}
- line: 7
- column: 40
}
}id: Identifier {...}
- type: "Identifier"
- start: 162
- end: 170
loc: {...}
start: {...}
- line: 7
- column: 5
}end: {...}
- line: 7
- column: 13
}
}- name: "octupled"
}init: CallExpression {...}
- type: "CallExpression"
- start: 173
- end: 197
loc: {...}
start: {...}
- line: 7
- column: 16
}end: {...}
- line: 7
- column: 40
}
}callee: Identifier {...}
- type: "Identifier"
- start: 173
- end: 181
loc: {...}
start: {...}
- line: 7
- column: 16
}end: {...}
- line: 7
- column: 24
}
}- name: "$derived"
}arguments: [...] (1)
BinaryExpression {...}
- type: "BinaryExpression"
- start: 182
- end: 196
loc: {...}
start: {...}
- line: 7
- column: 25
}end: {...}
- line: 7
- column: 39
}
}left: Identifier {...}
- type: "Identifier"
- start: 182
- end: 192
loc: {...}
start: {...}
- line: 7
- column: 25
}end: {...}
- line: 7
- column: 35
}
}- name: "quadrupled"
}- operator: "*"
right: Literal {...}
- type: "Literal"
- start: 195
- end: 196
loc: {...}
start: {...}
- line: 7
- column: 38
}end: {...}
- line: 7
- column: 39
}
}- value: 2
- raw: "2"
}
}
]- optional: false
}
}
]- kind: "let"
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 201
- end: 235
loc: {...}
start: {...}
- line: 9
- column: 1
}end: {...}
- line: 11
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 210
- end: 214
loc: {...}
start: {...}
- line: 9
- column: 10
}end: {...}
- line: 9
- column: 14
}
}- name: "flap"
}- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 217
- end: 235
loc: {...}
start: {...}
- line: 9
- column: 17
}end: {...}
- line: 11
- column: 2
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 221
- end: 232
loc: {...}
start: {...}
- line: 10
- column: 2
}end: {...}
- line: 10
- column: 13
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 221
- end: 231
loc: {...}
start: {...}
- line: 10
- column: 2
}end: {...}
- line: 10
- column: 12
}
}- operator: "+="
left: Identifier {...}
- type: "Identifier"
- start: 221
- end: 226
loc: {...}
start: {...}
- line: 10
- column: 2
}end: {...}
- line: 10
- column: 7
}
}- name: "count"
}right: Literal {...}
- type: "Literal"
- start: 230
- end: 231
loc: {...}
start: {...}
- line: 10
- column: 11
}end: {...}
- line: 10
- column: 12
}
}- value: 1
- raw: "1"
}
}
}
]
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 238
- end: 634
loc: {...}
start: {...}
- line: 13
- column: 1
}end: {...}
- line: 23
- column: 4
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 238
- end: 633
loc: {...}
start: {...}
- line: 13
- column: 1
}end: {...}
- line: 23
- column: 3
}
}callee: Identifier {...}
- type: "Identifier"
- start: 238
- end: 245
loc: {...}
start: {...}
- line: 13
- column: 1
}end: {...}
- line: 13
- column: 8
}
}- name: "$effect"
}arguments: [...] (1)
ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 246
- end: 632
loc: {...}
start: {...}
- line: 13
- column: 9
}end: {...}
- line: 23
- column: 2
}
}- id: null
- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 252
- end: 632
loc: {...}
start: {...}
- line: 13
- column: 15
}end: {...}
- line: 23
- column: 2
}
}body: [...] (2)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 485
- end: 502
loc: {...}
start: {...}
- line: 18
- column: 2
}end: {...}
- line: 18
- column: 19
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 485
- end: 501
loc: {...}
start: {...}
- line: 18
- column: 2
}end: {...}
- line: 18
- column: 18
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 485
- end: 499
loc: {...}
start: {...}
- line: 18
- column: 2
}end: {...}
- line: 18
- column: 16
}
}object: Identifier {...}
- type: "Identifier"
- start: 485
- end: 493
loc: {...}
start: {...}
- line: 18
- column: 2
}end: {...}
- line: 18
- column: 10
}
}- name: "$inspect"
}property: Identifier {...}
- type: "Identifier"
- start: 494
- end: 499
loc: {...}
start: {...}
- line: 18
- column: 11
}end: {...}
- line: 18
- column: 16
}
}- name: "trace"
}- computed: false
- optional: false
}- arguments: []
- optional: false
}leadingComments: [...] (4)
Line {...}
- type: "Line"
- value: " Because of this line, clicking the butterfly will cause information"
- start: 256
- end: 326
} Line {...}
- type: "Line"
- value: " to be logged to the console about which state changed to cause"
- start: 329
- end: 394
} Line {...}
- type: "Line"
- value: " the effect to re-run. (note: stack traces are better"
- start: 397
- end: 452
} Line {...}
- type: "Line"
- value: " outside the playground!)"
- start: 455
- end: 482
}
]
} IfStatement {...}
- type: "IfStatement"
- start: 508
- end: 629
loc: {...}
start: {...}
- line: 20
- column: 2
}end: {...}
- line: 22
- column: 3
}
}test: BinaryExpression {...}
- type: "BinaryExpression"
- start: 512
- end: 525
loc: {...}
start: {...}
- line: 20
- column: 6
}end: {...}
- line: 20
- column: 19
}
}left: Identifier {...}
- type: "Identifier"
- start: 512
- end: 520
loc: {...}
start: {...}
- line: 20
- column: 6
}end: {...}
- line: 20
- column: 14
}
}- name: "octupled"
}- operator: ">"
right: Literal {...}
- type: "Literal"
- start: 523
- end: 525
loc: {...}
start: {...}
- line: 20
- column: 17
}end: {...}
- line: 20
- column: 19
}
}- value: 20
- raw: "20"
}
}consequent: BlockStatement {...}
- type: "BlockStatement"
- start: 527
- end: 629
loc: {...}
start: {...}
- line: 20
- column: 21
}end: {...}
- line: 22
- column: 3
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 532
- end: 625
loc: {...}
start: {...}
- line: 21
- column: 3
}end: {...}
- line: 21
- column: 96
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 532
- end: 625
loc: {...}
start: {...}
- line: 21
- column: 3
}end: {...}
- line: 21
- column: 96
}
}callee: Identifier {...}
- type: "Identifier"
- start: 532
- end: 537
loc: {...}
start: {...}
- line: 21
- column: 3
}end: {...}
- line: 21
- column: 8
}
}- name: "alert"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 538
- end: 624
loc: {...}
start: {...}
- line: 21
- column: 9
}end: {...}
- line: 21
- column: 95
}
}- value: "The flapping of the wings of a butterfly can be felt on the other side of the world."
- raw: "'The flapping of the wings of a butterfly can be felt on the other side of the world.'"
}
]- optional: false
}
}
]
}- alternate: null
}
]
}
}
]- optional: false
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time