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} />
999
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
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
let festive = $state(false);
</script>
<div class={['flex', { festive }]}>
<div>
{#each 'MERRY' as letter}
<span>{letter}</span>
{/each}
</div>
<div>
{#each 'CHRISTMAS!' as letter}
<span>{letter}</span>
{/each}
</div>
</div>
{#if !festive}
<div class="controls">
<button onclick={() => festive = !festive}>
Activate Christmas mode
</button>
</div>
{/if}
<style>
.flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
line-height: 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
29
30
31
32
33
34
35
36
›
⌄
⌄
⌄
import "svelte/internal/disclose-version";
import * as $ from "svelte/internal/client";
var root_1 = $.template(`<span class="svelte-i8gjzs"> </span>`);
var root_2 = $.template(`<span class="svelte-i8gjzs"> </span>`);
var on_click = (_, festive) => $.set(festive, !$.get(festive));
var root_3 = $.template(`<div class="controls svelte-i8gjzs"><button class="svelte-i8gjzs">Activate Christmas mode</button></div>`);
var root = $.template(`<div><div class="svelte-i8gjzs"></div> <div class="svelte-i8gjzs"></div></div> <!>`, 1);
export default function App($$anchor) {
let festive = $.state(false);
var fragment = root();
var div = $.first_child(fragment);
var div_1 = $.child(div);
$.each(div_1, 20, () => 'MERRY', $.index, ($$anchor, letter) => {
var span = root_1();
var text = $.child(span, true);
$.reset(span);
$.template_effect(() => $.set_text(text, letter));
$.append($$anchor, span);
});
$.reset(div_1);
var div_2 = $.sibling(div_1, 2);
$.each(div_2, 20, () => 'CHRISTMAS!', $.index, ($$anchor, letter) => {
var span_1 = root_2();
var text_1 = $.child(span_1, true);
$.reset(span_1);
$.template_effect(() => $.set_text(text_1, letter));
$.append($$anchor, span_1);
});
result = svelte.compile(source, {
generate: ,
});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
›
.flex.svelte-i8gjzs {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
line-height: 1;
span:where(.svelte-i8gjzs) {
font-family: Impact;
font-size: 15vmin;
color: white;
-webkit-text-stroke: 3px black;
}
&.festive span:where(.svelte-i8gjzs) {
animation: 1.5s linear svelte-i8gjzs-christmas infinite;
&:nth-child(3n+1) {
animation-delay: -0.5s;
}
&:nth-child(3n+2) {
animation-delay: -1s;
}
}
}
.controls.svelte-i8gjzs {
position: fixed;
display: flex;
top: 0;
left: 0;
width: 100%;
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 395
- end: 1387
- attributes: []
children: [...] (3)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 404
- end: 409
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 404
- end: 409
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "flex"
- start: 404
- end: 409
}
]- start: 404
- end: 409
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 410
- end: 850
children: [...] (9)
Declaration {...}
- type: "Declaration"
- start: 414
- end: 427
- property: "display"
- value: "flex"
} Declaration {...}
- type: "Declaration"
- start: 431
- end: 453
- property: "flex-direction"
- value: "column"
} Declaration {...}
- type: "Declaration"
- start: 457
- end: 476
- property: "align-items"
- value: "center"
} Declaration {...}
- type: "Declaration"
- start: 480
- end: 503
- property: "justify-content"
- value: "center"
} Declaration {...}
- type: "Declaration"
- start: 507
- end: 518
- property: "width"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 522
- end: 534
- property: "height"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 538
- end: 552
- property: "line-height"
- value: "1"
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 557
- end: 561
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 557
- end: 561
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "span"
- start: 557
- end: 561
}
]- start: 557
- end: 561
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 562
- end: 665
children: [...] (4)
Declaration {...}
- type: "Declaration"
- start: 567
- end: 586
- property: "font-family"
- value: "Impact"
} Declaration {...}
- type: "Declaration"
- start: 591
- end: 608
- property: "font-size"
- value: "15vmin"
} Declaration {...}
- type: "Declaration"
- start: 613
- end: 625
- property: "color"
- value: "white"
} Declaration {...}
- type: "Declaration"
- start: 630
- end: 660
- property: "-webkit-text-stroke"
- value: "3px black"
}
]
}- start: 557
- end: 665
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 669
- end: 683
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 669
- end: 683
children: [...] (2)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (2)
NestingSelector {...}
- type: "NestingSelector"
- name: "&"
- start: 669
- end: 670
} ClassSelector {...}
- type: "ClassSelector"
- name: "festive"
- start: 670
- end: 678
}
]- start: 669
- end: 678
} RelativeSelector {...}
- type: "RelativeSelector"
combinator: Combinator {...}
- type: "Combinator"
- name: " "
- start: 678
- end: 679
}selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "span"
- start: 679
- end: 683
}
]- start: 678
- end: 683
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 684
- end: 847
children: [...] (3)
Declaration {...}
- type: "Declaration"
- start: 689
- end: 730
- property: "animation"
- value: "1.5s linear christmas infinite"
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 736
- end: 753
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 736
- end: 753
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (2)
NestingSelector {...}
- type: "NestingSelector"
- name: "&"
- start: 736
- end: 737
} PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "nth-child"
args: SelectorList {...}
- type: "SelectorList"
- start: 748
- end: 752
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 748
- end: 752
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
Nth {...}
- type: "Nth"
- value: "3n+1"
- start: 748
- end: 752
}
]- start: 748
- end: 752
}
]
}
]
}- start: 737
- end: 753
}
]- start: 736
- end: 753
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 754
- end: 788
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 760
- end: 782
- property: "animation-delay"
- value: "-0.5s"
}
]
}- start: 736
- end: 788
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 793
- end: 810
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 793
- end: 810
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (2)
NestingSelector {...}
- type: "NestingSelector"
- name: "&"
- start: 793
- end: 794
} PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "nth-child"
args: SelectorList {...}
- type: "SelectorList"
- start: 805
- end: 809
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 805
- end: 809
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
Nth {...}
- type: "Nth"
- value: "3n+2"
- start: 805
- end: 809
}
]- start: 805
- end: 809
}
]
}
]
}- start: 794
- end: 810
}
]- start: 793
- end: 810
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 811
- end: 843
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 817
- end: 837
- property: "animation-delay"
- value: "-1s"
}
]
}- start: 793
- end: 843
}
]
}- start: 669
- end: 847
}
]
}- start: 404
- end: 850
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 853
- end: 862
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 853
- end: 862
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "controls"
- start: 853
- end: 862
}
]- start: 853
- end: 862
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 863
- end: 1127
children: [...] (8)
Declaration {...}
- type: "Declaration"
- start: 867
- end: 882
- property: "position"
- value: "fixed"
} Declaration {...}
- type: "Declaration"
- start: 886
- end: 899
- property: "display"
- value: "flex"
} Declaration {...}
- type: "Declaration"
- start: 903
- end: 909
- property: "top"
- value: "0"
} Declaration {...}
- type: "Declaration"
- start: 913
- end: 920
- property: "left"
- value: "0"
} Declaration {...}
- type: "Declaration"
- start: 924
- end: 935
- property: "width"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 939
- end: 951
- property: "padding"
- value: "1em"
} Declaration {...}
- type: "Declaration"
- start: 955
- end: 978
- property: "justify-content"
- value: "center"
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 983
- end: 989
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 983
- end: 989
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "button"
- start: 983
- end: 989
}
]- start: 983
- end: 989
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 990
- end: 1124
children: [...] (6)
Declaration {...}
- type: "Declaration"
- start: 995
- end: 1009
- property: "font-size"
- value: "2em"
} Declaration {...}
- type: "Declaration"
- start: 1014
- end: 1028
- property: "padding"
- value: "0.5em"
} Declaration {...}
- type: "Declaration"
- start: 1033
- end: 1062
- property: "background"
- value: "hsl(0, 100%, 40%)"
} Declaration {...}
- type: "Declaration"
- start: 1067
- end: 1079
- property: "color"
- value: "white"
} Declaration {...}
- type: "Declaration"
- start: 1084
- end: 1096
- property: "border"
- value: "none"
} Declaration {...}
- type: "Declaration"
- start: 1101
- end: 1119
- property: "border-radius"
- value: "4px"
}
]
}- start: 983
- end: 1124
}
]
}- start: 853
- end: 1127
} Atrule {...}
- type: "Atrule"
- start: 1130
- end: 1378
- name: "keyframes"
- prelude: "christmas"
block: Block {...}
- type: "Block"
- start: 1151
- end: 1378
children: [...] (7)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1155
- end: 1157
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1155
- end: 1157
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
Percentage {...}
- type: "Percentage"
- value: "0%"
- start: 1155
- end: 1157
}
]- start: 1155
- end: 1157
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1158
- end: 1178
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 1163
- end: 1173
- property: "color"
- value: "red"
}
]
}- start: 1155
- end: 1178
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1182
- end: 1189
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1182
- end: 1189
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
Percentage {...}
- type: "Percentage"
- value: "33.332%"
- start: 1182
- end: 1189
}
]- start: 1182
- end: 1189
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1190
- end: 1210
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 1195
- end: 1205
- property: "color"
- value: "red"
}
]
}- start: 1182
- end: 1210
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1214
- end: 1221
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1214
- end: 1221
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
Percentage {...}
- type: "Percentage"
- value: "33.333%"
- start: 1214
- end: 1221
}
]- start: 1214
- end: 1221
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1222
- end: 1244
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 1227
- end: 1239
- property: "color"
- value: "green"
}
]
}- start: 1214
- end: 1244
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1248
- end: 1255
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1248
- end: 1255
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
Percentage {...}
- type: "Percentage"
- value: "66.666%"
- start: 1248
- end: 1255
}
]- start: 1248
- end: 1255
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1256
- end: 1278
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 1261
- end: 1273
- property: "color"
- value: "green"
}
]
}- start: 1248
- end: 1278
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1282
- end: 1289
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1282
- end: 1289
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
Percentage {...}
- type: "Percentage"
- value: "66.667%"
- start: 1282
- end: 1289
}
]- start: 1282
- end: 1289
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1290
- end: 1312
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 1295
- end: 1307
- property: "color"
- value: "white"
}
]
}- start: 1282
- end: 1312
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1316
- end: 1323
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1316
- end: 1323
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
Percentage {...}
- type: "Percentage"
- value: "99.999%"
- start: 1316
- end: 1323
}
]- start: 1316
- end: 1323
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1324
- end: 1346
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 1329
- end: 1341
- property: "color"
- value: "white"
}
]
}- start: 1316
- end: 1346
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1350
- end: 1354
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1350
- end: 1354
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
Percentage {...}
- type: "Percentage"
- value: "100%"
- start: 1350
- end: 1354
}
]- start: 1350
- end: 1354
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1355
- end: 1375
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 1360
- end: 1370
- property: "color"
- value: "red"
}
]
}- start: 1350
- end: 1375
}
]
}
}
]content: {...}
- start: 402
- end: 1379
- styles: "\n\t.flex {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tline-height: 1;\n\n\t\tspan {\n\t\t\tfont-family: Impact;\n\t\t\tfont-size: 15vmin;\n\t\t\tcolor: white;\n\t\t\t-webkit-text-stroke: 3px black;\n\t\t}\n\n\t\t&.festive span {\n\t\t\tanimation: 1.5s linear christmas infinite;\n\n\t\t\t&:nth-child(3n+1) {\n\t\t\t\tanimation-delay: -0.5s;\n\t\t\t}\n\n\t\t\t&:nth-child(3n+2) {\n\t\t\t\tanimation-delay: -1s;\n\t\t\t}\n\t\t}\n\t}\n\n\t.controls {\n\t\tposition: fixed;\n\t\tdisplay: flex;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tpadding: 1em;\n\t\tjustify-content: center;\n\n\t\tbutton {\n\t\t\tfont-size: 2em;\n\t\t\tpadding: 0.5em;\n\t\t\tbackground: hsl(0, 100%, 40%);\n\t\t\tcolor: white;\n\t\t\tborder: none;\n\t\t\tborder-radius: 4px;\n\t\t}\n\t}\n\n\t@keyframes christmas {\n\t\t0% {\n\t\t\tcolor: red;\n\t\t}\n\n\t\t33.332% {\n\t\t\tcolor: red;\n\t\t}\n\n\t\t33.333% {\n\t\t\tcolor: green;\n\t\t}\n\n\t\t66.666% {\n\t\t\tcolor: green;\n\t\t}\n\n\t\t66.667% {\n\t\t\tcolor: white;\n\t\t}\n\n\t\t99.999% {\n\t\t\tcolor: white;\n\t\t}\n\n\t\t100% {\n\t\t\tcolor: red;\n\t\t}\n\t}\n"
- comment: null
}
}- js: []
- start: 50
- end: 393
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 48
- end: 50
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 50
- end: 254
- name: "div"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 55
- end: 84
- name: "class"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 61
- end: 84
expression: ArrayExpression {...}
- type: "ArrayExpression"
- start: 62
- end: 83
loc: {...}
start: {...}
- line: 5
- column: 12
}end: {...}
- line: 5
- column: 33
}
}elements: [...] (2)
Literal {...}
- type: "Literal"
- start: 63
- end: 69
loc: {...}
start: {...}
- line: 5
- column: 13
}end: {...}
- line: 5
- column: 19
}
}- value: "flex"
- raw: "'flex'"
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 71
- end: 82
loc: {...}
start: {...}
- line: 5
- column: 21
}end: {...}
- line: 5
- column: 32
}
}properties: [...] (1)
Property {...}
- type: "Property"
- start: 73
- end: 80
loc: {...}
start: {...}
- line: 5
- column: 23
}end: {...}
- line: 5
- column: 30
}
}- method: false
- shorthand: true
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 73
- end: 80
loc: {...}
start: {...}
- line: 5
- column: 23
}end: {...}
- line: 5
- column: 30
}
}- name: "festive"
}- kind: "init"
value: Identifier {...}
- type: "Identifier"
- start: 73
- end: 80
loc: {...}
start: {...}
- line: 5
- column: 23
}end: {...}
- line: 5
- column: 30
}
}- name: "festive"
}
}
]
}
]
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 85
- end: 87
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 87
- end: 163
- name: "div"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-i8gjzs"
- raw: "svelte-i8gjzs"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 92
- end: 95
- raw: "\n\t\t"
- data: "\n\t\t"
} EachBlock {...}
- type: "EachBlock"
- start: 95
- end: 155
expression: Literal {...}
- type: "Literal"
- start: 102
- end: 109
loc: {...}
start: {...}
- line: 7
- column: 9
}end: {...}
- line: 7
- column: 16
}
}- value: "MERRY"
- raw: "'MERRY'"
}body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 120
- end: 124
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 124
- end: 145
- name: "span"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-i8gjzs"
- raw: "svelte-i8gjzs"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 130
- end: 138
expression: Identifier {...}
- type: "Identifier"
- start: 131
- end: 137
loc: {...}
start: {...}
- line: 8
- column: 10
}end: {...}
- line: 8
- column: 16
}
}- name: "letter"
}
}
]
}
} Text {...}
- type: "Text"
- start: 145
- end: 148
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
}context: Identifier {...}
- type: "Identifier"
- name: "letter"
- start: 113
loc: {...}
start: {...}
- line: 7
- column: 20
- character: 113
}end: {...}
- line: 7
- column: 26
- character: 119
}
}- end: 119
- typeAnnotation: undefined
}- index: undefined
- key: undefined
} Text {...}
- type: "Text"
- start: 155
- end: 157
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 163
- end: 166
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 166
- end: 247
- name: "div"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-i8gjzs"
- raw: "svelte-i8gjzs"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 171
- end: 174
- raw: "\n\t\t"
- data: "\n\t\t"
} EachBlock {...}
- type: "EachBlock"
- start: 174
- end: 239
expression: Literal {...}
- type: "Literal"
- start: 181
- end: 193
loc: {...}
start: {...}
- line: 13
- column: 9
}end: {...}
- line: 13
- column: 21
}
}- value: "CHRISTMAS!"
- raw: "'CHRISTMAS!'"
}body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 204
- end: 208
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 208
- end: 229
- name: "span"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-i8gjzs"
- raw: "svelte-i8gjzs"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 214
- end: 222
expression: Identifier {...}
- type: "Identifier"
- start: 215
- end: 221
loc: {...}
start: {...}
- line: 14
- column: 10
}end: {...}
- line: 14
- column: 16
}
}- name: "letter"
}
}
]
}
} Text {...}
- type: "Text"
- start: 229
- end: 232
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
}context: Identifier {...}
- type: "Identifier"
- name: "letter"
- start: 197
loc: {...}
start: {...}
- line: 13
- column: 25
- character: 197
}end: {...}
- line: 13
- column: 31
- character: 203
}
}- end: 203
- typeAnnotation: undefined
}- index: undefined
- key: undefined
} Text {...}
- type: "Text"
- start: 239
- end: 241
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 247
- end: 248
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 254
- end: 256
- raw: " "
- data: " "
} IfBlock {...}
- type: "IfBlock"
- elseif: false
- start: 256
- end: 393
test: UnaryExpression {...}
- type: "UnaryExpression"
- start: 261
- end: 269
loc: {...}
start: {...}
- line: 19
- column: 5
}end: {...}
- line: 19
- column: 13
}
}- operator: "!"
- prefix: true
argument: Identifier {...}
- type: "Identifier"
- start: 262
- end: 269
loc: {...}
start: {...}
- line: 19
- column: 6
}end: {...}
- line: 19
- column: 13
}
}- name: "festive"
}
}consequent: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 270
- end: 272
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 272
- end: 387
- name: "div"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 277
- end: 293
- name: "class"
value: [...] (1)
Text {...}
- start: 284
- end: 292
- type: "Text"
- raw: "controls"
- data: "controls svelte-i8gjzs"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 294
- end: 297
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 297
- end: 379
- name: "button"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 305
- end: 339
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 313
- end: 339
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 314
- end: 338
loc: {...}
start: {...}
- line: 21
- column: 19
}end: {...}
- line: 21
- column: 43
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 320
- end: 338
loc: {...}
start: {...}
- line: 21
- column: 25
}end: {...}
- line: 21
- column: 43
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 320
- end: 327
loc: {...}
start: {...}
- line: 21
- column: 25
}end: {...}
- line: 21
- column: 32
}
}- name: "festive"
}right: UnaryExpression {...}
- type: "UnaryExpression"
- start: 330
- end: 338
loc: {...}
start: {...}
- line: 21
- column: 35
}end: {...}
- line: 21
- column: 43
}
}- operator: "!"
- prefix: true
argument: Identifier {...}
- type: "Identifier"
- start: 331
- end: 338
loc: {...}
start: {...}
- line: 21
- column: 36
}end: {...}
- line: 21
- column: 43
}
}- name: "festive"
}
}
}
}
}
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-i8gjzs"
- raw: "svelte-i8gjzs"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 340
- end: 370
- raw: "Activate Christmas mode"
- data: "Activate Christmas mode"
}
]
}
} Text {...}
- type: "Text"
- start: 379
- end: 381
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 387
- end: 388
- raw: "\n"
- data: "\n"
}
]
}- alternate: null
} Text {...}
- type: "Text"
- start: 393
- end: 395
- 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: "festive"
}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: false
- raw: "false"
}
]- optional: false
}
}
]- kind: "let"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time