Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
custom-transitions.js
shape.js
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
27
28
29
30
31
32
33
34
35
36
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
import { quintOut } from 'svelte/easing';
import { fade, draw, fly } from 'svelte/transition';
import { expand } from './custom-transitions.js';
import { inner, outer } from './shape.js';
let visible = $state(true);
</script>
{#if visible}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
<g out:fade={{ duration: 200 }} opacity="0.2">
<path
in:expand={{ duration: 400, delay: 1000, easing: quintOut }}
style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
d={outer}
/>
<path in:draw={{ duration: 1000 }} style="stroke:#ff3e00; stroke-width: 1.5" d={inner} />
</g>
</svg>
<div class="centered" out:fly={{ y: -20, duration: 800 }}>
{#each 'SVELTE' as char, i}
<span in:fade|global={{ delay: 1000 + i * 150, duration: 800 }}>{char}</span>
{/each}
</div>
{/if}
<label>
<input type="checkbox" bind:checked={visible} />
toggle me
</label>
<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet" />
<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
34
35
36
›
⌄
⌄
⌄
⌄
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';
import { quintOut } from 'svelte/easing';
import { fade, draw, fly } from 'svelte/transition';
import { expand } from './custom-transitions.js';
import { inner, outer } from './shape.js';
var root_2 = $.template(`<span class="svelte-81eh3v"> </span>`);
var root_1 = $.template(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124" class="svelte-81eh3v"><g opacity="0.2"><path style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;" class="svelte-81eh3v"></path><path style="stroke:#ff3e00; stroke-width: 1.5" class="svelte-81eh3v"></path></g></svg> <div class="centered svelte-81eh3v"></div>`, 1);
var root = $.template(`<!> <label class="svelte-81eh3v"><input type="checkbox"> toggle me</label> <link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet">`, 1);
export default function App($$anchor) {
let visible = $.state(true);
var fragment = root();
var node = $.first_child(fragment);
{
var consequent = ($$anchor) => {
var fragment_1 = root_1();
var svg = $.first_child(fragment_1);
var g = $.child(svg);
var path = $.child(g);
$.set_attribute(path, 'd', outer);
var path_1 = $.sibling(path);
$.set_attribute(path_1, 'd', inner);
$.reset(g);
$.reset(svg);
var div = $.sibling(svg, 2);
$.each(div, 20, () => 'SVELTE', $.index, ($$anchor, char, i) => {
var span = root_2();
var text = $.child(span, true);
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
›
svg.svelte-81eh3v {
width: 100%;
height: 100%;
}
path.svelte-81eh3v {
fill: white;
opacity: 1;
}
label.svelte-81eh3v {
position: absolute;
top: 1em;
left: 1em;
}
.centered.svelte-81eh3v {
font-size: 20vw;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: 'Overpass';
letter-spacing: 0.12em;
color: #676778;
font-weight: 400;
}
.centered.svelte-81eh3v span:where(.svelte-81eh3v) {
will-change: filter;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 1000
- end: 1413
- attributes: []
children: [...] (5)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1009
- end: 1012
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1009
- end: 1012
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "svg"
- start: 1009
- end: 1012
}
]- start: 1009
- end: 1012
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1013
- end: 1048
children: [...] (2)
Declaration {...}
- type: "Declaration"
- start: 1017
- end: 1028
- property: "width"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 1032
- end: 1044
- property: "height"
- value: "100%"
}
]
}- start: 1009
- end: 1048
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1051
- end: 1055
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1051
- end: 1055
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "path"
- start: 1051
- end: 1055
}
]- start: 1051
- end: 1055
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1056
- end: 1089
children: [...] (2)
Declaration {...}
- type: "Declaration"
- start: 1060
- end: 1071
- property: "fill"
- value: "white"
} Declaration {...}
- type: "Declaration"
- start: 1075
- end: 1085
- property: "opacity"
- value: "1"
}
]
}- start: 1051
- end: 1089
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1092
- end: 1097
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1092
- end: 1097
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "label"
- start: 1092
- end: 1097
}
]- start: 1092
- end: 1097
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1098
- end: 1149
children: [...] (3)
Declaration {...}
- type: "Declaration"
- start: 1102
- end: 1120
- property: "position"
- value: "absolute"
} Declaration {...}
- type: "Declaration"
- start: 1124
- end: 1132
- property: "top"
- value: "1em"
} Declaration {...}
- type: "Declaration"
- start: 1136
- end: 1145
- property: "left"
- value: "1em"
}
]
}- start: 1092
- end: 1149
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1152
- end: 1161
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1152
- end: 1161
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "centered"
- start: 1152
- end: 1161
}
]- start: 1152
- end: 1161
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1162
- end: 1359
children: [...] (9)
Declaration {...}
- type: "Declaration"
- start: 1166
- end: 1181
- property: "font-size"
- value: "20vw"
} Declaration {...}
- type: "Declaration"
- start: 1185
- end: 1203
- property: "position"
- value: "absolute"
} Declaration {...}
- type: "Declaration"
- start: 1207
- end: 1216
- property: "left"
- value: "50%"
} Declaration {...}
- type: "Declaration"
- start: 1220
- end: 1228
- property: "top"
- value: "50%"
} Declaration {...}
- type: "Declaration"
- start: 1232
- end: 1264
- property: "transform"
- value: "translate(-50%, -50%)"
} Declaration {...}
- type: "Declaration"
- start: 1268
- end: 1291
- property: "font-family"
- value: "'Overpass'"
} Declaration {...}
- type: "Declaration"
- start: 1295
- end: 1317
- property: "letter-spacing"
- value: "0.12em"
} Declaration {...}
- type: "Declaration"
- start: 1321
- end: 1335
- property: "color"
- value: "#676778"
} Declaration {...}
- type: "Declaration"
- start: 1339
- end: 1355
- property: "font-weight"
- value: "400"
}
]
}- start: 1152
- end: 1359
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1362
- end: 1376
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1362
- end: 1376
children: [...] (2)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "centered"
- start: 1362
- end: 1371
}
]- start: 1362
- end: 1371
} RelativeSelector {...}
- type: "RelativeSelector"
combinator: Combinator {...}
- type: "Combinator"
- name: " "
- start: 1371
- end: 1372
}selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "span"
- start: 1372
- end: 1376
}
]- start: 1371
- end: 1376
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1377
- end: 1404
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 1381
- end: 1400
- property: "will-change"
- value: "filter"
}
]
}- start: 1362
- end: 1404
}
]content: {...}
- start: 1007
- end: 1405
- styles: "\n\tsvg {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\tpath {\n\t\tfill: white;\n\t\topacity: 1;\n\t}\n\n\tlabel {\n\t\tposition: absolute;\n\t\ttop: 1em;\n\t\tleft: 1em;\n\t}\n\n\t.centered {\n\t\tfont-size: 20vw;\n\t\tposition: absolute;\n\t\tleft: 50%;\n\t\ttop: 50%;\n\t\ttransform: translate(-50%, -50%);\n\t\tfont-family: 'Overpass';\n\t\tletter-spacing: 0.12em;\n\t\tcolor: #676778;\n\t\tfont-weight: 400;\n\t}\n\n\t.centered span {\n\t\twill-change: filter;\n\t}\n"
- comment: null
}
}- js: []
- start: 242
- end: 998
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (7)
Text {...}
- type: "Text"
- start: 240
- end: 242
- raw: "\n\n"
- data: "\n\n"
} IfBlock {...}
- type: "IfBlock"
- elseif: false
- start: 242
- end: 828
test: Identifier {...}
- type: "Identifier"
- start: 247
- end: 254
loc: {...}
start: {...}
- line: 10
- column: 5
}end: {...}
- line: 10
- column: 12
}
}- name: "visible"
}consequent: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 255
- end: 257
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 257
- end: 632
- name: "svg"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 262
- end: 296
- name: "xmlns"
value: [...] (1)
Text {...}
- start: 269
- end: 295
- type: "Text"
- raw: "http://www.w3.org/2000/svg"
- data: "http://www.w3.org/2000/svg"
}
]
} Attribute {...}
- type: "Attribute"
- start: 297
- end: 318
- name: "viewBox"
value: [...] (1)
Text {...}
- start: 306
- end: 317
- type: "Text"
- raw: "0 0 103 124"
- data: "0 0 103 124"
}
]
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-81eh3v"
- raw: "svelte-81eh3v"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 319
- end: 322
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 322
- end: 624
- name: "g"
attributes: [...] (2)
TransitionDirective {...}
- start: 325
- end: 353
- type: "TransitionDirective"
- name: "fade"
expression: ObjectExpression {...}
- type: "ObjectExpression"
- start: 335
- end: 352
loc: {...}
start: {...}
- line: 12
- column: 15
}end: {...}
- line: 12
- column: 32
}
}properties: [...] (1)
Property {...}
- type: "Property"
- start: 337
- end: 350
loc: {...}
start: {...}
- line: 12
- column: 17
}end: {...}
- line: 12
- column: 30
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 337
- end: 345
loc: {...}
start: {...}
- line: 12
- column: 17
}end: {...}
- line: 12
- column: 25
}
}- name: "duration"
}value: Literal {...}
- type: "Literal"
- start: 347
- end: 350
loc: {...}
start: {...}
- line: 12
- column: 27
}end: {...}
- line: 12
- column: 30
}
}- value: 200
- raw: "200"
}- kind: "init"
}
]
}- modifiers: []
- intro: false
- outro: true
} Attribute {...}
- type: "Attribute"
- start: 354
- end: 367
- name: "opacity"
value: [...] (1)
Text {...}
- start: 363
- end: 366
- type: "Text"
- raw: "0.2"
- data: "0.2"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 368
- end: 372
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 372
- end: 524
- name: "path"
attributes: [...] (4)
TransitionDirective {...}
- start: 382
- end: 442
- type: "TransitionDirective"
- name: "expand"
expression: ObjectExpression {...}
- type: "ObjectExpression"
- start: 393
- end: 441
loc: {...}
start: {...}
- line: 14
- column: 15
}end: {...}
- line: 14
- column: 63
}
}properties: [...] (3)
Property {...}
- type: "Property"
- start: 395
- end: 408
loc: {...}
start: {...}
- line: 14
- column: 17
}end: {...}
- line: 14
- column: 30
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 395
- end: 403
loc: {...}
start: {...}
- line: 14
- column: 17
}end: {...}
- line: 14
- column: 25
}
}- name: "duration"
}value: Literal {...}
- type: "Literal"
- start: 405
- end: 408
loc: {...}
start: {...}
- line: 14
- column: 27
}end: {...}
- line: 14
- column: 30
}
}- value: 400
- raw: "400"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 410
- end: 421
loc: {...}
start: {...}
- line: 14
- column: 32
}end: {...}
- line: 14
- column: 43
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 410
- end: 415
loc: {...}
start: {...}
- line: 14
- column: 32
}end: {...}
- line: 14
- column: 37
}
}- name: "delay"
}value: Literal {...}
- type: "Literal"
- start: 417
- end: 421
loc: {...}
start: {...}
- line: 14
- column: 39
}end: {...}
- line: 14
- column: 43
}
}- value: 1000
- raw: "1000"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 423
- end: 439
loc: {...}
start: {...}
- line: 14
- column: 45
}end: {...}
- line: 14
- column: 61
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 423
- end: 429
loc: {...}
start: {...}
- line: 14
- column: 45
}end: {...}
- line: 14
- column: 51
}
}- name: "easing"
}value: Identifier {...}
- type: "Identifier"
- start: 431
- end: 439
loc: {...}
start: {...}
- line: 14
- column: 53
}end: {...}
- line: 14
- column: 61
}
}- name: "quintOut"
}- kind: "init"
}
]
}- modifiers: []
- intro: true
- outro: false
} Attribute {...}
- type: "Attribute"
- start: 447
- end: 504
- name: "style"
value: [...] (1)
Text {...}
- start: 454
- end: 503
- type: "Text"
- raw: "stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
- data: "stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
}
]
} Attribute {...}
- type: "Attribute"
- start: 509
- end: 518
- name: "d"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 511
- end: 518
expression: Identifier {...}
- type: "Identifier"
- start: 512
- end: 517
loc: {...}
start: {...}
- line: 16
- column: 7
}end: {...}
- line: 16
- column: 12
}
}- name: "outer"
}
}
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-81eh3v"
- raw: "svelte-81eh3v"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 524
- end: 528
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 528
- end: 617
- name: "path"
attributes: [...] (4)
TransitionDirective {...}
- start: 534
- end: 562
- type: "TransitionDirective"
- name: "draw"
expression: ObjectExpression {...}
- type: "ObjectExpression"
- start: 543
- end: 561
loc: {...}
start: {...}
- line: 18
- column: 18
}end: {...}
- line: 18
- column: 36
}
}properties: [...] (1)
Property {...}
- type: "Property"
- start: 545
- end: 559
loc: {...}
start: {...}
- line: 18
- column: 20
}end: {...}
- line: 18
- column: 34
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 545
- end: 553
loc: {...}
start: {...}
- line: 18
- column: 20
}end: {...}
- line: 18
- column: 28
}
}- name: "duration"
}value: Literal {...}
- type: "Literal"
- start: 555
- end: 559
loc: {...}
start: {...}
- line: 18
- column: 30
}end: {...}
- line: 18
- column: 34
}
}- value: 1000
- raw: "1000"
}- kind: "init"
}
]
}- modifiers: []
- intro: true
- outro: false
} Attribute {...}
- type: "Attribute"
- start: 563
- end: 604
- name: "style"
value: [...] (1)
Text {...}
- start: 570
- end: 603
- type: "Text"
- raw: "stroke:#ff3e00; stroke-width: 1.5"
- data: "stroke:#ff3e00; stroke-width: 1.5"
}
]
} Attribute {...}
- type: "Attribute"
- start: 605
- end: 614
- name: "d"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 607
- end: 614
expression: Identifier {...}
- type: "Identifier"
- start: 608
- end: 613
loc: {...}
start: {...}
- line: 18
- column: 83
}end: {...}
- line: 18
- column: 88
}
}- name: "inner"
}
}
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-81eh3v"
- raw: "svelte-81eh3v"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 617
- end: 620
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
}
} Text {...}
- type: "Text"
- start: 624
- end: 626
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 632
- end: 635
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 635
- end: 822
- name: "div"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 640
- end: 656
- name: "class"
value: [...] (1)
Text {...}
- start: 647
- end: 655
- type: "Text"
- raw: "centered"
- data: "centered svelte-81eh3v"
}
]
} TransitionDirective {...}
- start: 657
- end: 692
- type: "TransitionDirective"
- name: "fly"
expression: ObjectExpression {...}
- type: "ObjectExpression"
- start: 666
- end: 691
loc: {...}
start: {...}
- line: 22
- column: 32
}end: {...}
- line: 22
- column: 57
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 668
- end: 674
loc: {...}
start: {...}
- line: 22
- column: 34
}end: {...}
- line: 22
- column: 40
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 668
- end: 669
loc: {...}
start: {...}
- line: 22
- column: 34
}end: {...}
- line: 22
- column: 35
}
}- name: "y"
}value: UnaryExpression {...}
- type: "UnaryExpression"
- start: 671
- end: 674
loc: {...}
start: {...}
- line: 22
- column: 37
}end: {...}
- line: 22
- column: 40
}
}- operator: "-"
- prefix: true
argument: Literal {...}
- type: "Literal"
- start: 672
- end: 674
loc: {...}
start: {...}
- line: 22
- column: 38
}end: {...}
- line: 22
- column: 40
}
}- value: 20
- raw: "20"
}
}- kind: "init"
} Property {...}
- type: "Property"
- start: 676
- end: 689
loc: {...}
start: {...}
- line: 22
- column: 42
}end: {...}
- line: 22
- column: 55
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 676
- end: 684
loc: {...}
start: {...}
- line: 22
- column: 42
}end: {...}
- line: 22
- column: 50
}
}- name: "duration"
}value: Literal {...}
- type: "Literal"
- start: 686
- end: 689
loc: {...}
start: {...}
- line: 22
- column: 52
}end: {...}
- line: 22
- column: 55
}
}- value: 800
- raw: "800"
}- kind: "init"
}
]
}- modifiers: []
- intro: false
- outro: true
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 693
- end: 696
- raw: "\n\t\t"
- data: "\n\t\t"
} EachBlock {...}
- type: "EachBlock"
- start: 696
- end: 814
expression: Literal {...}
- type: "Literal"
- start: 703
- end: 711
loc: {...}
start: {...}
- line: 23
- column: 9
}end: {...}
- line: 23
- column: 17
}
}- value: "SVELTE"
- raw: "'SVELTE'"
}body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 723
- end: 727
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 727
- end: 804
- name: "span"
attributes: [...] (2)
TransitionDirective {...}
- start: 733
- end: 790
- type: "TransitionDirective"
- name: "fade"
expression: ObjectExpression {...}
- type: "ObjectExpression"
- start: 749
- end: 789
loc: {...}
start: {...}
- line: 24
- column: 25
}end: {...}
- line: 24
- column: 65
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 751
- end: 772
loc: {...}
start: {...}
- line: 24
- column: 27
}end: {...}
- line: 24
- column: 48
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 751
- end: 756
loc: {...}
start: {...}
- line: 24
- column: 27
}end: {...}
- line: 24
- column: 32
}
}- name: "delay"
}value: BinaryExpression {...}
- type: "BinaryExpression"
- start: 758
- end: 772
loc: {...}
start: {...}
- line: 24
- column: 34
}end: {...}
- line: 24
- column: 48
}
}left: Literal {...}
- type: "Literal"
- start: 758
- end: 762
loc: {...}
start: {...}
- line: 24
- column: 34
}end: {...}
- line: 24
- column: 38
}
}- value: 1000
- raw: "1000"
}- operator: "+"
right: BinaryExpression {...}
- type: "BinaryExpression"
- start: 765
- end: 772
loc: {...}
start: {...}
- line: 24
- column: 41
}end: {...}
- line: 24
- column: 48
}
}left: Identifier {...}
- type: "Identifier"
- start: 765
- end: 766
loc: {...}
start: {...}
- line: 24
- column: 41
}end: {...}
- line: 24
- column: 42
}
}- name: "i"
}- operator: "*"
right: Literal {...}
- type: "Literal"
- start: 769
- end: 772
loc: {...}
start: {...}
- line: 24
- column: 45
}end: {...}
- line: 24
- column: 48
}
}- value: 150
- raw: "150"
}
}
}- kind: "init"
} Property {...}
- type: "Property"
- start: 774
- end: 787
loc: {...}
start: {...}
- line: 24
- column: 50
}end: {...}
- line: 24
- column: 63
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 774
- end: 782
loc: {...}
start: {...}
- line: 24
- column: 50
}end: {...}
- line: 24
- column: 58
}
}- name: "duration"
}value: Literal {...}
- type: "Literal"
- start: 784
- end: 787
loc: {...}
start: {...}
- line: 24
- column: 60
}end: {...}
- line: 24
- column: 63
}
}- value: 800
- raw: "800"
}- kind: "init"
}
]
}modifiers: [...] (1)
- "global"
]- intro: true
- outro: false
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-81eh3v"
- raw: "svelte-81eh3v"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 791
- end: 797
expression: Identifier {...}
- type: "Identifier"
- start: 792
- end: 796
loc: {...}
start: {...}
- line: 24
- column: 68
}end: {...}
- line: 24
- column: 72
}
}- name: "char"
}
}
]
}
} Text {...}
- type: "Text"
- start: 804
- end: 807
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
}context: Identifier {...}
- type: "Identifier"
- name: "char"
- start: 715
loc: {...}
start: {...}
- line: 23
- column: 21
- character: 715
}end: {...}
- line: 23
- column: 25
- character: 719
}
}- end: 719
- typeAnnotation: undefined
}- index: "i"
- key: undefined
} Text {...}
- type: "Text"
- start: 814
- end: 816
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 822
- end: 823
- raw: "\n"
- data: "\n"
}
]
}- alternate: null
} Text {...}
- type: "Text"
- start: 828
- end: 830
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 830
- end: 907
- name: "label"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-81eh3v"
- raw: "svelte-81eh3v"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 837
- end: 839
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 839
- end: 887
- name: "input"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 846
- end: 861
- name: "type"
value: [...] (1)
Text {...}
- start: 852
- end: 860
- type: "Text"
- raw: "checkbox"
- data: "checkbox"
}
]
} BindDirective {...}
- start: 862
- end: 884
- type: "BindDirective"
- name: "checked"
expression: Identifier {...}
- type: "Identifier"
- start: 876
- end: 883
loc: {...}
start: {...}
- line: 30
- column: 38
}end: {...}
- line: 30
- column: 45
}
}- name: "visible"
}- modifiers: []
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 887
- end: 899
- raw: " toggle me"
- data: " toggle me"
}
]
}
} Text {...}
- type: "Text"
- start: 907
- end: 909
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 909
- end: 998
- name: "link"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 915
- end: 978
- name: "href"
value: [...] (1)
Text {...}
- start: 921
- end: 977
- type: "Text"
- raw: "https://fonts.googleapis.com/css?family=Overpass:100,400"
- data: "https://fonts.googleapis.com/css?family=Overpass:100,400"
}
]
} Attribute {...}
- type: "Attribute"
- start: 979
- end: 995
- name: "rel"
value: [...] (1)
Text {...}
- start: 984
- end: 994
- type: "Text"
- raw: "stylesheet"
- data: "stylesheet"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 998
- end: 1000
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 240
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 231
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 8
- column: 0
}
}body: [...] (5)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 51
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 42
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 19
- end: 27
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 18
}
}imported: Identifier {...}
- type: "Identifier"
- start: 19
- end: 27
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 18
}
}- name: "quintOut"
}local: Identifier {...}
- type: "Identifier"
- start: 19
- end: 27
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 18
}
}- name: "quintOut"
}
}
]source: Literal {...}
- type: "Literal"
- start: 35
- end: 50
loc: {...}
start: {...}
- line: 2
- column: 26
}end: {...}
- line: 2
- column: 41
}
}- value: "svelte/easing"
- raw: "'svelte/easing'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 53
- end: 105
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 53
}
}specifiers: [...] (3)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 62
- end: 66
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 14
}
}imported: Identifier {...}
- type: "Identifier"
- start: 62
- end: 66
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 14
}
}- name: "fade"
}local: Identifier {...}
- type: "Identifier"
- start: 62
- end: 66
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 14
}
}- name: "fade"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 68
- end: 72
loc: {...}
start: {...}
- line: 3
- column: 16
}end: {...}
- line: 3
- column: 20
}
}imported: Identifier {...}
- type: "Identifier"
- start: 68
- end: 72
loc: {...}
start: {...}
- line: 3
- column: 16
}end: {...}
- line: 3
- column: 20
}
}- name: "draw"
}local: Identifier {...}
- type: "Identifier"
- start: 68
- end: 72
loc: {...}
start: {...}
- line: 3
- column: 16
}end: {...}
- line: 3
- column: 20
}
}- name: "draw"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 74
- end: 77
loc: {...}
start: {...}
- line: 3
- column: 22
}end: {...}
- line: 3
- column: 25
}
}imported: Identifier {...}
- type: "Identifier"
- start: 74
- end: 77
loc: {...}
start: {...}
- line: 3
- column: 22
}end: {...}
- line: 3
- column: 25
}
}- name: "fly"
}local: Identifier {...}
- type: "Identifier"
- start: 74
- end: 77
loc: {...}
start: {...}
- line: 3
- column: 22
}end: {...}
- line: 3
- column: 25
}
}- name: "fly"
}
}
]source: Literal {...}
- type: "Literal"
- start: 85
- end: 104
loc: {...}
start: {...}
- line: 3
- column: 33
}end: {...}
- line: 3
- column: 52
}
}- value: "svelte/transition"
- raw: "'svelte/transition'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 107
- end: 156
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 50
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 116
- end: 122
loc: {...}
start: {...}
- line: 4
- column: 10
}end: {...}
- line: 4
- column: 16
}
}imported: Identifier {...}
- type: "Identifier"
- start: 116
- end: 122
loc: {...}
start: {...}
- line: 4
- column: 10
}end: {...}
- line: 4
- column: 16
}
}- name: "expand"
}local: Identifier {...}
- type: "Identifier"
- start: 116
- end: 122
loc: {...}
start: {...}
- line: 4
- column: 10
}end: {...}
- line: 4
- column: 16
}
}- name: "expand"
}
}
]source: Literal {...}
- type: "Literal"
- start: 130
- end: 155
loc: {...}
start: {...}
- line: 4
- column: 24
}end: {...}
- line: 4
- column: 49
}
}- value: "./custom-transitions.js"
- raw: "'./custom-transitions.js'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 158
- end: 200
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 43
}
}specifiers: [...] (2)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 167
- end: 172
loc: {...}
start: {...}
- line: 5
- column: 10
}end: {...}
- line: 5
- column: 15
}
}imported: Identifier {...}
- type: "Identifier"
- start: 167
- end: 172
loc: {...}
start: {...}
- line: 5
- column: 10
}end: {...}
- line: 5
- column: 15
}
}- name: "inner"
}local: Identifier {...}
- type: "Identifier"
- start: 167
- end: 172
loc: {...}
start: {...}
- line: 5
- column: 10
}end: {...}
- line: 5
- column: 15
}
}- name: "inner"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 174
- end: 179
loc: {...}
start: {...}
- line: 5
- column: 17
}end: {...}
- line: 5
- column: 22
}
}imported: Identifier {...}
- type: "Identifier"
- start: 174
- end: 179
loc: {...}
start: {...}
- line: 5
- column: 17
}end: {...}
- line: 5
- column: 22
}
}- name: "outer"
}local: Identifier {...}
- type: "Identifier"
- start: 174
- end: 179
loc: {...}
start: {...}
- line: 5
- column: 17
}end: {...}
- line: 5
- column: 22
}
}- name: "outer"
}
}
]source: Literal {...}
- type: "Literal"
- start: 187
- end: 199
loc: {...}
start: {...}
- line: 5
- column: 30
}end: {...}
- line: 5
- column: 42
}
}- value: "./shape.js"
- raw: "'./shape.js'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 203
- end: 230
loc: {...}
start: {...}
- line: 7
- column: 1
}end: {...}
- line: 7
- column: 28
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 207
- end: 229
loc: {...}
start: {...}
- line: 7
- column: 5
}end: {...}
- line: 7
- column: 27
}
}id: Identifier {...}
- type: "Identifier"
- start: 207
- end: 214
loc: {...}
start: {...}
- line: 7
- column: 5
}end: {...}
- line: 7
- column: 12
}
}- name: "visible"
}init: CallExpression {...}
- type: "CallExpression"
- start: 217
- end: 229
loc: {...}
start: {...}
- line: 7
- column: 15
}end: {...}
- line: 7
- column: 27
}
}callee: Identifier {...}
- type: "Identifier"
- start: 217
- end: 223
loc: {...}
start: {...}
- line: 7
- column: 15
}end: {...}
- line: 7
- column: 21
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 224
- end: 228
loc: {...}
start: {...}
- line: 7
- column: 22
}end: {...}
- line: 7
- column: 26
}
}- value: true
- raw: "true"
}
]- optional: false
}
}
]- kind: "let"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time