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
21
›
⌄
⌄
⌄
⌄
<script>
let current = $state('foo');
</script>
<button class:active={current === 'foo'} onclick={() => (current = 'foo')}>foo</button>
<button class:active={current === 'bar'} onclick={() => (current = 'bar')}>bar</button>
<button class:active={current === 'baz'} onclick={() => (current = 'baz')}>baz</button>
<style>
button {
display: block;
}
.active {
background-color: #ff3e00;
color: white;
}
</style>
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
›
⌄
⌄
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';
var on_click = (_, current) => $.set(current, 'foo');
var on_click_1 = (__1, current) => $.set(current, 'bar');
var on_click_2 = (__2, current) => $.set(current, 'baz');
var root = $.template(`<button class="svelte-ecv9v0">foo</button> <button class="svelte-ecv9v0">bar</button> <button class="svelte-ecv9v0">baz</button>`, 1);
export default function App($$anchor) {
let current = $.state('foo');
var fragment = root();
var button = $.first_child(fragment);
button.__click = [on_click, current];
var button_1 = $.sibling(button, 2);
button_1.__click = [on_click_1, current];
var button_2 = $.sibling(button_1, 2);
button_2.__click = [on_click_2, current];
$.template_effect(() => {
$.toggle_class(button, 'active', $.get(current) === 'foo');
$.toggle_class(button_1, 'active', $.get(current) === 'bar');
$.toggle_class(button_2, 'active', $.get(current) === 'baz');
});
$.append($$anchor, fragment);
}
$.delegate(['click']);
result = svelte.compile(source, {
generate: ,
});99
1
2
3
4
5
6
7
8
9
10
›
button.svelte-ecv9v0 {
display: block;
}
.active.svelte-ecv9v0 {
background-color: #ff3e00;
color: white;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 317
- end: 424
- attributes: []
children: [...] (2)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 326
- end: 332
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 326
- end: 332
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "button"
- start: 326
- end: 332
}
]- start: 326
- end: 332
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 333
- end: 355
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 337
- end: 351
- property: "display"
- value: "block"
}
]
}- start: 326
- end: 355
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 358
- end: 365
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 358
- end: 365
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "active"
- start: 358
- end: 365
}
]- start: 358
- end: 365
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 366
- end: 415
children: [...] (2)
Declaration {...}
- type: "Declaration"
- start: 370
- end: 395
- property: "background-color"
- value: "#ff3e00"
} Declaration {...}
- type: "Declaration"
- start: 399
- end: 411
- property: "color"
- value: "white"
}
]
}- start: 358
- end: 415
}
]content: {...}
- start: 324
- end: 416
- styles: "\n\tbutton {\n\t\tdisplay: block;\n\t}\n\n\t.active {\n\t\tbackground-color: #ff3e00;\n\t\tcolor: white;\n\t}\n"
- comment: null
}
}- js: []
- start: 50
- end: 315
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (7)
Text {...}
- type: "Text"
- start: 48
- end: 50
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 50
- end: 137
- name: "button"
attributes: [...] (3)
ClassDirective {...}
- start: 58
- end: 90
- type: "ClassDirective"
- name: "active"
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 72
- end: 89
loc: {...}
start: {...}
- line: 5
- column: 22
}end: {...}
- line: 5
- column: 39
}
}left: Identifier {...}
- type: "Identifier"
- start: 72
- end: 79
loc: {...}
start: {...}
- line: 5
- column: 22
}end: {...}
- line: 5
- column: 29
}
}- name: "current"
}- operator: "==="
right: Literal {...}
- type: "Literal"
- start: 84
- end: 89
loc: {...}
start: {...}
- line: 5
- column: 34
}end: {...}
- line: 5
- column: 39
}
}- value: "foo"
- raw: "'foo'"
}
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 91
- end: 124
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 99
- end: 124
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 100
- end: 123
loc: {...}
start: {...}
- line: 5
- column: 50
}end: {...}
- line: 5
- column: 73
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 107
- end: 122
loc: {...}
start: {...}
- line: 5
- column: 57
}end: {...}
- line: 5
- column: 72
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 107
- end: 114
loc: {...}
start: {...}
- line: 5
- column: 57
}end: {...}
- line: 5
- column: 64
}
}- name: "current"
}right: Literal {...}
- type: "Literal"
- start: 117
- end: 122
loc: {...}
start: {...}
- line: 5
- column: 67
}end: {...}
- line: 5
- column: 72
}
}- value: "foo"
- raw: "'foo'"
}
}
}
}
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-ecv9v0"
- raw: "svelte-ecv9v0"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 125
- end: 128
- raw: "foo"
- data: "foo"
}
]
}
} Text {...}
- type: "Text"
- start: 137
- end: 139
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 139
- end: 226
- name: "button"
attributes: [...] (3)
ClassDirective {...}
- start: 147
- end: 179
- type: "ClassDirective"
- name: "active"
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 161
- end: 178
loc: {...}
start: {...}
- line: 7
- column: 22
}end: {...}
- line: 7
- column: 39
}
}left: Identifier {...}
- type: "Identifier"
- start: 161
- end: 168
loc: {...}
start: {...}
- line: 7
- column: 22
}end: {...}
- line: 7
- column: 29
}
}- name: "current"
}- operator: "==="
right: Literal {...}
- type: "Literal"
- start: 173
- end: 178
loc: {...}
start: {...}
- line: 7
- column: 34
}end: {...}
- line: 7
- column: 39
}
}- value: "bar"
- raw: "'bar'"
}
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 180
- end: 213
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 188
- end: 213
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 189
- end: 212
loc: {...}
start: {...}
- line: 7
- column: 50
}end: {...}
- line: 7
- column: 73
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 196
- end: 211
loc: {...}
start: {...}
- line: 7
- column: 57
}end: {...}
- line: 7
- column: 72
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 196
- end: 203
loc: {...}
start: {...}
- line: 7
- column: 57
}end: {...}
- line: 7
- column: 64
}
}- name: "current"
}right: Literal {...}
- type: "Literal"
- start: 206
- end: 211
loc: {...}
start: {...}
- line: 7
- column: 67
}end: {...}
- line: 7
- column: 72
}
}- value: "bar"
- raw: "'bar'"
}
}
}
}
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-ecv9v0"
- raw: "svelte-ecv9v0"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 214
- end: 217
- raw: "bar"
- data: "bar"
}
]
}
} Text {...}
- type: "Text"
- start: 226
- end: 228
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 228
- end: 315
- name: "button"
attributes: [...] (3)
ClassDirective {...}
- start: 236
- end: 268
- type: "ClassDirective"
- name: "active"
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 250
- end: 267
loc: {...}
start: {...}
- line: 9
- column: 22
}end: {...}
- line: 9
- column: 39
}
}left: Identifier {...}
- type: "Identifier"
- start: 250
- end: 257
loc: {...}
start: {...}
- line: 9
- column: 22
}end: {...}
- line: 9
- column: 29
}
}- name: "current"
}- operator: "==="
right: Literal {...}
- type: "Literal"
- start: 262
- end: 267
loc: {...}
start: {...}
- line: 9
- column: 34
}end: {...}
- line: 9
- column: 39
}
}- value: "baz"
- raw: "'baz'"
}
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 269
- end: 302
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 277
- end: 302
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 278
- end: 301
loc: {...}
start: {...}
- line: 9
- column: 50
}end: {...}
- line: 9
- column: 73
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 285
- end: 300
loc: {...}
start: {...}
- line: 9
- column: 57
}end: {...}
- line: 9
- column: 72
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 285
- end: 292
loc: {...}
start: {...}
- line: 9
- column: 57
}end: {...}
- line: 9
- column: 64
}
}- name: "current"
}right: Literal {...}
- type: "Literal"
- start: 295
- end: 300
loc: {...}
start: {...}
- line: 9
- column: 67
}end: {...}
- line: 9
- column: 72
}
}- value: "baz"
- raw: "'baz'"
}
}
}
}
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-ecv9v0"
- raw: "svelte-ecv9v0"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 303
- end: 306
- raw: "baz"
- data: "baz"
}
]
}
} Text {...}
- type: "Text"
- start: 315
- end: 317
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 48
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 39
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 3
- column: 0
}
}body: [...] (1)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 38
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 29
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 14
- end: 37
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 28
}
}id: Identifier {...}
- type: "Identifier"
- start: 14
- end: 21
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 12
}
}- name: "current"
}init: CallExpression {...}
- type: "CallExpression"
- start: 24
- end: 37
loc: {...}
start: {...}
- line: 2
- column: 15
}end: {...}
- line: 2
- column: 28
}
}callee: Identifier {...}
- type: "Identifier"
- start: 24
- end: 30
loc: {...}
start: {...}
- line: 2
- column: 15
}end: {...}
- line: 2
- column: 21
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 31
- end: 36
loc: {...}
start: {...}
- line: 2
- column: 22
}end: {...}
- line: 2
- column: 27
}
}- value: "foo"
- raw: "'foo'"
}
]- optional: false
}
}
]- kind: "let"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time