Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
Chapter.svelte
Story.svelte
helpers.js
runes
Runes are available from Svelte 5 onwards, and this playground is using Svelte 4.2.8.
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 Story from "./Story.svelte";
import Chapter from './Chapter.svelte';
import { percent } from './helpers.js';
import {get} from 'svelte/store';
let index;
let id
</script>
<mark>
<b>{index ?? '?'} - {id ?? '???'}</b>
</mark>
<main>
<Story bind:index bind:id>
<Chapter id="intro" --color="orangered">
<h1>📜 Svelte Storyscrolling</h1>
<p>There aren't really great libraries for this...</p>
</Chapter>
<Chapter id="middle" --color="steelblue">
<h1>😀 But guess what?</h1>
<p>I made this example based on <a href="https://svelte.dev/repl/3d3736e634c9404ea8ec2ef7b87e2053?version=3.42.4">a lovely REPL</a>.</p>
</Chapter>
<Chapter id="bindings" --color="mediumvioletred">
<h1>⚡ Active State</h1>
<p>You can track the active node's index and id...</p>
</Chapter>
<div class="spacer">
<h1>✋ Query Parameter</h1>
<p>This spacer is excluded since it's not queried...</p>
</div>
<Chapter id="transitions" --color="rebeccapurple" let:visible let:intro let:outro>
Error compiling component
WebAssembly.instantiateStreaming(): value type opcode @+13
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
›
⌄
/* App.svelte generated by Svelte v4.2.8 */
import {
SvelteComponent,
add_flush_callback,
append,
append_styles,
attr,
bind,
binding_callbacks,
create_component,
destroy_component,
detach,
element,
init,
insert,
mount_component,
noop,
safe_not_equal,
set_data,
set_style,
space,
text,
transition_in,
transition_out
} from "svelte/internal";
import "svelte/internal/disclose-version";
import Story from "./Story.svelte";
import Chapter from './Chapter.svelte';
import { percent } from './helpers.js';
import { get } from 'svelte/store';
function add_css(target) {
append_styles(target, "svelte-vxzh6s", "mark.svelte-vxzh6s{width:100%;top:0;left:0;position:fixed;text-align:center}main.svelte-vxzh6s{margin-top:15vh;padding:2rem}h1.svelte-vxzh6s{font-size:2.5em}p.svelte-vxzh6s{font-size:1.5em}a.svelte-vxzh6s{color:white}.spacer.svelte-vxzh6s{height:80vh;display:flex;flex-flow:column;justify-content:center;text-align:center;border:1px solid white;margin:1rem}*{margin:0}");
}
result = svelte.compile(source, {
generate: ,
});9
1
›
mark.svelte-vxzh6s{width:100%;top:0;left:0;position:fixed;text-align:center}main.svelte-vxzh6s{margin-top:15vh;padding:2rem}h1.svelte-vxzh6s{font-size:2.5em}p.svelte-vxzh6s{font-size:1.5em}a.svelte-vxzh6s{color:white}.spacer.svelte-vxzh6s{height:80vh;display:flex;flex-flow:column;justify-content:center;text-align:center;border:1px solid white;margin:1rem}*{margin:0}
{
html: Fragment {...}
- start: 199
- end: 1486
- type: "Fragment"
children: [...] (5)
Text {...}
- start: 196
- end: 199
- type: "Text"
- raw: "\n\n\n"
- data: "\n\n\n"
} Element {...}
- start: 199
- end: 252
- type: "Element"
- name: "mark"
- attributes: []
children: [...] (3)
Text {...}
- start: 205
- end: 207
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 207
- end: 244
- type: "Element"
- name: "b"
- attributes: []
children: [...] (3)
MustacheTag {...}
- start: 210
- end: 224
- type: "MustacheTag"
expression: LogicalExpression {...}
- type: "LogicalExpression"
- start: 211
- end: 223
loc: {...}
start: {...}
- line: 15
- column: 5
}end: {...}
- line: 15
- column: 17
}
}left: Identifier {...}
- type: "Identifier"
- start: 211
- end: 216
loc: {...}
start: {...}
- line: 15
- column: 5
}end: {...}
- line: 15
- column: 10
}
}- name: "index"
}- operator: "??"
right: Literal {...}
- type: "Literal"
- start: 220
- end: 223
loc: {...}
start: {...}
- line: 15
- column: 14
}end: {...}
- line: 15
- column: 17
}
}- value: "?"
- raw: "'?'"
}
}
} Text {...}
- start: 224
- end: 227
- type: "Text"
- raw: " - "
- data: " - "
} MustacheTag {...}
- start: 227
- end: 240
- type: "MustacheTag"
expression: LogicalExpression {...}
- type: "LogicalExpression"
- start: 228
- end: 239
loc: {...}
start: {...}
- line: 15
- column: 22
}end: {...}
- line: 15
- column: 33
}
}left: Identifier {...}
- type: "Identifier"
- start: 228
- end: 230
loc: {...}
start: {...}
- line: 15
- column: 22
}end: {...}
- line: 15
- column: 24
}
}- name: "id"
}- operator: "??"
right: Literal {...}
- type: "Literal"
- start: 234
- end: 239
loc: {...}
start: {...}
- line: 15
- column: 28
}end: {...}
- line: 15
- column: 33
}
}- value: "???"
- raw: "'???'"
}
}
}
]
} Text {...}
- start: 244
- end: 245
- type: "Text"
- raw: "\n"
- data: "\n"
}
]
} Text {...}
- start: 252
- end: 254
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} Element {...}
- start: 254
- end: 1486
- type: "Element"
- name: "main"
- attributes: []
children: [...] (3)
Text {...}
- start: 260
- end: 262
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} InlineComponent {...}
- start: 262
- end: 1478
- type: "InlineComponent"
- name: "Story"
attributes: [...] (2)
Binding {...}
- start: 269
- end: 279
- type: "Binding"
- name: "index"
- modifiers: []
expression: Identifier {...}
- start: 274
- end: 279
- type: "Identifier"
- name: "index"
}
} Binding {...}
- start: 280
- end: 287
- type: "Binding"
- name: "id"
- modifiers: []
expression: Identifier {...}
- start: 285
- end: 287
- type: "Identifier"
- name: "id"
}
}
]children: [...] (15)
Text {...}
- start: 288
- end: 292
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} InlineComponent {...}
- start: 292
- end: 443
- type: "InlineComponent"
- name: "Chapter"
attributes: [...] (2)
Attribute {...}
- start: 301
- end: 311
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 305
- end: 310
- type: "Text"
- raw: "intro"
- data: "intro"
}
]
} Attribute {...}
- start: 312
- end: 331
- type: "Attribute"
- name: "--color"
value: [...] (1)
Text {...}
- start: 321
- end: 330
- type: "Text"
- raw: "orangered"
- data: "orangered"
}
]
}
]children: [...] (5)
Text {...}
- start: 332
- end: 337
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 337
- end: 370
- type: "Element"
- name: "h1"
- attributes: []
children: [...] (1)
Text {...}
- start: 341
- end: 365
- type: "Text"
- raw: "📜 Svelte Storyscrolling"
- data: "📜 Svelte Storyscrolling"
}
]
} Text {...}
- start: 370
- end: 375
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 375
- end: 429
- type: "Element"
- name: "p"
- attributes: []
children: [...] (1)
Text {...}
- start: 378
- end: 425
- type: "Text"
- raw: "There aren't really great libraries for this..."
- data: "There aren't really great libraries for this..."
}
]
} Text {...}
- start: 429
- end: 433
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
} Text {...}
- start: 443
- end: 447
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} InlineComponent {...}
- start: 447
- end: 675
- type: "InlineComponent"
- name: "Chapter"
attributes: [...] (2)
Attribute {...}
- start: 456
- end: 467
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 460
- end: 466
- type: "Text"
- raw: "middle"
- data: "middle"
}
]
} Attribute {...}
- start: 468
- end: 487
- type: "Attribute"
- name: "--color"
value: [...] (1)
Text {...}
- start: 477
- end: 486
- type: "Text"
- raw: "steelblue"
- data: "steelblue"
}
]
}
]children: [...] (5)
Text {...}
- start: 488
- end: 493
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 493
- end: 520
- type: "Element"
- name: "h1"
- attributes: []
children: [...] (1)
Text {...}
- start: 497
- end: 515
- type: "Text"
- raw: "😀 But guess what?"
- data: "😀 But guess what?"
}
]
} Text {...}
- start: 520
- end: 525
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 525
- end: 661
- type: "Element"
- name: "p"
- attributes: []
children: [...] (3)
Text {...}
- start: 528
- end: 557
- type: "Text"
- raw: "I made this example based on "
- data: "I made this example based on "
} Element {...}
- start: 557
- end: 656
- type: "Element"
- name: "a"
attributes: [...] (1)
Attribute {...}
- start: 560
- end: 638
- type: "Attribute"
- name: "href"
value: [...] (1)
Text {...}
- start: 566
- end: 637
- type: "Text"
- raw: "https://svelte.dev/repl/3d3736e634c9404ea8ec2ef7b87e2053?version=3.42.4"
- data: "https://svelte.dev/repl/3d3736e634c9404ea8ec2ef7b87e2053?version=3.42.4"
}
]
}
]children: [...] (1)
Text {...}
- start: 639
- end: 652
- type: "Text"
- raw: "a lovely REPL"
- data: "a lovely REPL"
}
]
} Text {...}
- start: 656
- end: 657
- type: "Text"
- raw: "."
- data: "."
}
]
} Text {...}
- start: 661
- end: 665
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
} Text {...}
- start: 675
- end: 679
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} InlineComponent {...}
- start: 679
- end: 829
- type: "InlineComponent"
- name: "Chapter"
attributes: [...] (2)
Attribute {...}
- start: 688
- end: 701
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 692
- end: 700
- type: "Text"
- raw: "bindings"
- data: "bindings"
}
]
} Attribute {...}
- start: 702
- end: 727
- type: "Attribute"
- name: "--color"
value: [...] (1)
Text {...}
- start: 711
- end: 726
- type: "Text"
- raw: "mediumvioletred"
- data: "mediumvioletred"
}
]
}
]children: [...] (5)
Text {...}
- start: 728
- end: 733
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 733
- end: 756
- type: "Element"
- name: "h1"
- attributes: []
children: [...] (1)
Text {...}
- start: 737
- end: 751
- type: "Text"
- raw: "⚡ Active State"
- data: "⚡ Active State"
}
]
} Text {...}
- start: 756
- end: 761
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 761
- end: 815
- type: "Element"
- name: "p"
- attributes: []
children: [...] (1)
Text {...}
- start: 764
- end: 811
- type: "Text"
- raw: "You can track the active node's index and id..."
- data: "You can track the active node's index and id..."
}
]
} Text {...}
- start: 815
- end: 819
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
} Text {...}
- start: 829
- end: 833
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} Element {...}
- start: 833
- end: 955
- type: "Element"
- name: "div"
attributes: [...] (1)
Attribute {...}
- start: 838
- end: 852
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 845
- end: 851
- type: "Text"
- raw: "spacer"
- data: "spacer"
}
]
}
]children: [...] (5)
Text {...}
- start: 853
- end: 858
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 858
- end: 884
- type: "Element"
- name: "h1"
- attributes: []
children: [...] (1)
Text {...}
- start: 862
- end: 879
- type: "Text"
- raw: "✋ Query Parameter"
- data: "✋ Query Parameter"
}
]
} Text {...}
- start: 884
- end: 889
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 889
- end: 945
- type: "Element"
- name: "p"
- attributes: []
children: [...] (1)
Text {...}
- start: 892
- end: 941
- type: "Text"
- raw: "This spacer is excluded since it's not queried..."
- data: "This spacer is excluded since it's not queried..."
}
]
} Text {...}
- start: 945
- end: 949
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
} Text {...}
- start: 955
- end: 959
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} InlineComponent {...}
- start: 959
- end: 1182
- type: "InlineComponent"
- name: "Chapter"
attributes: [...] (5)
Attribute {...}
- start: 968
- end: 984
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 972
- end: 983
- type: "Text"
- raw: "transitions"
- data: "transitions"
}
]
} Attribute {...}
- start: 985
- end: 1008
- type: "Attribute"
- name: "--color"
value: [...] (1)
Text {...}
- start: 994
- end: 1007
- type: "Text"
- raw: "rebeccapurple"
- data: "rebeccapurple"
}
]
} Let {...}
- start: 1009
- end: 1020
- type: "Let"
- name: "visible"
- modifiers: []
- expression: null
} Let {...}
- start: 1021
- end: 1030
- type: "Let"
- name: "intro"
- modifiers: []
- expression: null
} Let {...}
- start: 1031
- end: 1040
- type: "Let"
- name: "outro"
- modifiers: []
- expression: null
}
]children: [...] (5)
Text {...}
- start: 1041
- end: 1046
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 1046
- end: 1081
- type: "Element"
- name: "h1"
- attributes: []
children: [...] (1)
Text {...}
- start: 1050
- end: 1076
- type: "Text"
- raw: "🕊️ Visible, Intro & Outro"
- data: "🕊️ Visible, Intro & Outro"
}
]
} Text {...}
- start: 1081
- end: 1086
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 1086
- end: 1168
- type: "Element"
- name: "p"
- attributes: []
children: [...] (6)
Text {...}
- start: 1089
- end: 1098
- type: "Text"
- raw: "Visible: "
- data: "Visible: "
} MustacheTag {...}
- start: 1098
- end: 1116
- type: "MustacheTag"
expression: CallExpression {...}
- type: "CallExpression"
- start: 1099
- end: 1115
loc: {...}
start: {...}
- line: 38
- column: 17
}end: {...}
- line: 38
- column: 33
}
}callee: Identifier {...}
- type: "Identifier"
- start: 1099
- end: 1106
loc: {...}
start: {...}
- line: 38
- column: 17
}end: {...}
- line: 38
- column: 24
}
}- name: "percent"
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 1107
- end: 1114
loc: {...}
start: {...}
- line: 38
- column: 25
}end: {...}
- line: 38
- column: 32
}
}- name: "visible"
}
]- optional: false
}
} Text {...}
- start: 1116
- end: 1124
- type: "Text"
- raw: " Intro: "
- data: " Intro: "
} MustacheTag {...}
- start: 1124
- end: 1140
- type: "MustacheTag"
expression: CallExpression {...}
- type: "CallExpression"
- start: 1125
- end: 1139
loc: {...}
start: {...}
- line: 38
- column: 43
}end: {...}
- line: 38
- column: 57
}
}callee: Identifier {...}
- type: "Identifier"
- start: 1125
- end: 1132
loc: {...}
start: {...}
- line: 38
- column: 43
}end: {...}
- line: 38
- column: 50
}
}- name: "percent"
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 1133
- end: 1138
loc: {...}
start: {...}
- line: 38
- column: 51
}end: {...}
- line: 38
- column: 56
}
}- name: "intro"
}
]- optional: false
}
} Text {...}
- start: 1140
- end: 1148
- type: "Text"
- raw: " Outro: "
- data: " Outro: "
} MustacheTag {...}
- start: 1148
- end: 1164
- type: "MustacheTag"
expression: CallExpression {...}
- type: "CallExpression"
- start: 1149
- end: 1163
loc: {...}
start: {...}
- line: 38
- column: 67
}end: {...}
- line: 38
- column: 81
}
}callee: Identifier {...}
- type: "Identifier"
- start: 1149
- end: 1156
loc: {...}
start: {...}
- line: 38
- column: 67
}end: {...}
- line: 38
- column: 74
}
}- name: "percent"
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 1157
- end: 1162
loc: {...}
start: {...}
- line: 38
- column: 75
}end: {...}
- line: 38
- column: 80
}
}- name: "outro"
}
]- optional: false
}
}
]
} Text {...}
- start: 1168
- end: 1172
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
} Text {...}
- start: 1182
- end: 1186
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} InlineComponent {...}
- start: 1186
- end: 1318
- type: "InlineComponent"
- name: "Chapter"
attributes: [...] (3)
Attribute {...}
- start: 1195
- end: 1206
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 1199
- end: 1205
- type: "Text"
- raw: "offset"
- data: "offset"
}
]
} Attribute {...}
- start: 1207
- end: 1223
- type: "Attribute"
- name: "--color"
value: [...] (1)
Text {...}
- start: 1216
- end: 1222
- type: "Text"
- raw: "sienna"
- data: "sienna"
}
]
} Let {...}
- start: 1224
- end: 1234
- type: "Let"
- name: "offset"
- modifiers: []
- expression: null
}
]children: [...] (5)
Text {...}
- start: 1235
- end: 1240
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 1240
- end: 1267
- type: "Element"
- name: "h1"
- attributes: []
children: [...] (1)
Text {...}
- start: 1244
- end: 1262
- type: "Text"
- raw: "📏 Centered Offset"
- data: "📏 Centered Offset"
}
]
} Text {...}
- start: 1267
- end: 1272
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 1272
- end: 1304
- type: "Element"
- name: "p"
- attributes: []
children: [...] (2)
Text {...}
- start: 1275
- end: 1283
- type: "Text"
- raw: "Offset: "
- data: "Offset: "
} MustacheTag {...}
- start: 1283
- end: 1300
- type: "MustacheTag"
expression: CallExpression {...}
- type: "CallExpression"
- start: 1284
- end: 1299
loc: {...}
start: {...}
- line: 42
- column: 16
}end: {...}
- line: 42
- column: 31
}
}callee: Identifier {...}
- type: "Identifier"
- start: 1284
- end: 1291
loc: {...}
start: {...}
- line: 42
- column: 16
}end: {...}
- line: 42
- column: 23
}
}- name: "percent"
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 1292
- end: 1298
loc: {...}
start: {...}
- line: 42
- column: 24
}end: {...}
- line: 42
- column: 30
}
}- name: "offset"
}
]- optional: false
}
}
]
} Text {...}
- start: 1304
- end: 1308
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
} Text {...}
- start: 1318
- end: 1322
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} InlineComponent {...}
- start: 1322
- end: 1468
- type: "InlineComponent"
- name: "Chapter"
attributes: [...] (2)
Attribute {...}
- start: 1331
- end: 1346
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 1335
- end: 1345
- type: "Text"
- raw: "conclusion"
- data: "conclusion"
}
]
} Attribute {...}
- start: 1347
- end: 1365
- type: "Attribute"
- name: "--color"
value: [...] (1)
Text {...}
- start: 1356
- end: 1364
- type: "Text"
- raw: "seagreen"
- data: "seagreen"
}
]
}
]children: [...] (5)
Text {...}
- start: 1366
- end: 1371
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 1371
- end: 1400
- type: "Element"
- name: "h1"
- attributes: []
children: [...] (1)
Text {...}
- start: 1375
- end: 1395
- type: "Text"
- raw: "👍 Seems to work OK!"
- data: "👍 Seems to work OK!"
}
]
} Text {...}
- start: 1400
- end: 1405
- type: "Text"
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} Element {...}
- start: 1405
- end: 1454
- type: "Element"
- name: "p"
- attributes: []
children: [...] (1)
Text {...}
- start: 1408
- end: 1450
- type: "Text"
- raw: "But there's always room for improvement..."
- data: "But there's always room for improvement..."
}
]
} Text {...}
- start: 1454
- end: 1458
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
} Text {...}
- start: 1468
- end: 1470
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
}
]
} Text {...}
- start: 1478
- end: 1479
- type: "Text"
- raw: "\n"
- data: "\n"
}
]
} Text {...}
- start: 1486
- end: 1488
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
}
]
}css: Style {...}
- type: "Style"
- start: 1488
- end: 1920
- attributes: []
children: [...] (7)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "mark"
- start: 1497
- end: 1501
}
]- start: 1497
- end: 1501
}
]- start: 1497
- end: 1501
}block: Block {...}
- type: "Block"
children: [...] (5)
Declaration {...}
- type: "Declaration"
- important: false
- property: "width"
value: Value {...}
- type: "Value"
children: [...] (1)
Percentage {...}
- type: "Percentage"
- value: "100"
- start: 1513
- end: 1517
}
]- start: 1513
- end: 1517
}- start: 1506
- end: 1517
} Declaration {...}
- type: "Declaration"
- important: false
- property: "top"
value: Value {...}
- type: "Value"
children: [...] (1)
Number {...}
- type: "Number"
- value: "0"
- start: 1526
- end: 1527
}
]- start: 1526
- end: 1527
}- start: 1521
- end: 1527
} Declaration {...}
- type: "Declaration"
- important: false
- property: "left"
value: Value {...}
- type: "Value"
children: [...] (1)
Number {...}
- type: "Number"
- value: "0"
- start: 1537
- end: 1538
}
]- start: 1537
- end: 1538
}- start: 1531
- end: 1538
} Declaration {...}
- type: "Declaration"
- important: false
- property: "position"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "fixed"
- start: 1552
- end: 1557
}
]- start: 1552
- end: 1557
}- start: 1542
- end: 1557
} Declaration {...}
- type: "Declaration"
- important: false
- property: "text-align"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 1573
- end: 1579
}
]- start: 1573
- end: 1579
}- start: 1561
- end: 1579
}
]- start: 1502
- end: 1583
}- start: 1497
- end: 1583
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "main"
- start: 1586
- end: 1590
}
]- start: 1586
- end: 1590
}
]- start: 1586
- end: 1590
}block: Block {...}
- type: "Block"
children: [...] (2)
Declaration {...}
- type: "Declaration"
- important: false
- property: "margin-top"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "15"
- unit: "vh"
- start: 1607
- end: 1611
}
]- start: 1607
- end: 1611
}- start: 1595
- end: 1611
} Declaration {...}
- type: "Declaration"
- important: false
- property: "padding"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "2"
- unit: "rem"
- start: 1624
- end: 1628
}
]- start: 1624
- end: 1628
}- start: 1615
- end: 1628
}
]- start: 1591
- end: 1632
}- start: 1586
- end: 1632
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "h1"
- start: 1636
- end: 1638
}
]- start: 1636
- end: 1638
}
]- start: 1636
- end: 1638
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "font-size"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "2.5"
- unit: "em"
- start: 1654
- end: 1659
}
]- start: 1654
- end: 1659
}- start: 1643
- end: 1659
}
]- start: 1639
- end: 1663
}- start: 1636
- end: 1663
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "p"
- start: 1667
- end: 1668
}
]- start: 1667
- end: 1668
}
]- start: 1667
- end: 1668
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "font-size"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "1.5"
- unit: "em"
- start: 1684
- end: 1689
}
]- start: 1684
- end: 1689
}- start: 1673
- end: 1689
}
]- start: 1669
- end: 1693
}- start: 1667
- end: 1693
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "a"
- start: 1697
- end: 1698
}
]- start: 1697
- end: 1698
}
]- start: 1697
- end: 1698
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "color"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "white"
- start: 1710
- end: 1715
}
]- start: 1710
- end: 1715
}- start: 1703
- end: 1715
}
]- start: 1699
- end: 1719
}- start: 1697
- end: 1719
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "spacer"
- start: 1722
- end: 1729
}
]- start: 1722
- end: 1729
}
]- start: 1722
- end: 1729
}block: Block {...}
- type: "Block"
children: [...] (7)
Declaration {...}
- type: "Declaration"
- important: false
- property: "height"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "80"
- unit: "vh"
- start: 1742
- end: 1746
}
]- start: 1742
- end: 1746
}- start: 1734
- end: 1746
} Declaration {...}
- type: "Declaration"
- important: false
- property: "display"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "flex"
- start: 1759
- end: 1763
}
]- start: 1759
- end: 1763
}- start: 1750
- end: 1763
} Declaration {...}
- type: "Declaration"
- important: false
- property: "flex-flow"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "column"
- start: 1778
- end: 1784
}
]- start: 1778
- end: 1784
}- start: 1767
- end: 1784
} Declaration {...}
- type: "Declaration"
- important: false
- property: "justify-content"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 1805
- end: 1811
}
]- start: 1805
- end: 1811
}- start: 1788
- end: 1811
} Declaration {...}
- type: "Declaration"
- important: false
- property: "text-align"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 1827
- end: 1833
}
]- start: 1827
- end: 1833
}- start: 1815
- end: 1833
} Declaration {...}
- type: "Declaration"
- important: false
- property: "border"
value: Value {...}
- type: "Value"
children: [...] (3)
Dimension {...}
- type: "Dimension"
- value: "1"
- unit: "px"
- start: 1845
- end: 1848
} Identifier {...}
- type: "Identifier"
- name: "solid"
- start: 1849
- end: 1854
} Identifier {...}
- type: "Identifier"
- name: "white"
- start: 1855
- end: 1860
}
]- start: 1845
- end: 1860
}- start: 1837
- end: 1860
} Declaration {...}
- type: "Declaration"
- important: false
- property: "margin"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "1"
- unit: "rem"
- start: 1872
- end: 1876
}
]- start: 1872
- end: 1876
}- start: 1864
- end: 1876
}
]- start: 1730
- end: 1880
}- start: 1722
- end: 1880
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "global"
children: [...] (1)
Raw {...}
- type: "Raw"
- value: "*"
- start: 1891
- end: 1892
}
]- start: 1883
- end: 1893
}
]- start: 1883
- end: 1893
}
]- start: 1883
- end: 1893
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "margin"
value: Value {...}
- type: "Value"
children: [...] (1)
Number {...}
- type: "Number"
- value: "0"
- start: 1906
- end: 1907
}
]- start: 1906
- end: 1907
}- start: 1898
- end: 1907
}
]- start: 1894
- end: 1911
}- start: 1883
- end: 1911
}
]content: {...}
- start: 1495
- end: 1912
- styles: "\n\tmark {\n\t\twidth: 100%;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tposition: fixed;\n\t\ttext-align: center;\n\t}\n\n\tmain {\n\t\tmargin-top: 15vh;\n\t\tpadding: 2rem;\n\t}\n\t\n\th1 {\n\t\tfont-size: 2.5em;\n\t}\n\t\n\tp {\n\t\tfont-size: 1.5em;\n\t}\n\t\n\ta {\n\t\tcolor: white;\n\t}\n\n\t.spacer {\n\t\theight: 80vh;\n\t\tdisplay: flex;\n\t\tflex-flow: column;\n\t\tjustify-content: center;\n\t\ttext-align: center;\n\t\tborder: 1px solid white;\n\t\tmargin: 1rem;\n\t}\n\n\t:global(*) {\n\t\tmargin: 0;\n\t}\n"
}
}instance: Script {...}
- type: "Script"
- start: 0
- end: 196
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 187
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 11
- column: 0
}
}body: [...] (6)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 45
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 36
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 17
- end: 22
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 13
}
}local: Identifier {...}
- type: "Identifier"
- start: 17
- end: 22
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 13
}
}- name: "Story"
}
}
]source: Literal {...}
- type: "Literal"
- start: 28
- end: 44
loc: {...}
start: {...}
- line: 2
- column: 19
}end: {...}
- line: 2
- column: 35
}
}- value: "./Story.svelte"
- raw: "\"./Story.svelte\""
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 47
- end: 86
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 40
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 54
- end: 61
loc: {...}
start: {...}
- line: 3
- column: 8
}end: {...}
- line: 3
- column: 15
}
}local: Identifier {...}
- type: "Identifier"
- start: 54
- end: 61
loc: {...}
start: {...}
- line: 3
- column: 8
}end: {...}
- line: 3
- column: 15
}
}- name: "Chapter"
}
}
]source: Literal {...}
- type: "Literal"
- start: 67
- end: 85
loc: {...}
start: {...}
- line: 3
- column: 21
}end: {...}
- line: 3
- column: 39
}
}- value: "./Chapter.svelte"
- raw: "'./Chapter.svelte'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 89
- end: 128
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 40
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 98
- end: 105
loc: {...}
start: {...}
- line: 5
- column: 10
}end: {...}
- line: 5
- column: 17
}
}imported: Identifier {...}
- type: "Identifier"
- start: 98
- end: 105
loc: {...}
start: {...}
- line: 5
- column: 10
}end: {...}
- line: 5
- column: 17
}
}- name: "percent"
}local: Identifier {...}
- type: "Identifier"
- start: 98
- end: 105
loc: {...}
start: {...}
- line: 5
- column: 10
}end: {...}
- line: 5
- column: 17
}
}- name: "percent"
}
}
]source: Literal {...}
- type: "Literal"
- start: 113
- end: 127
loc: {...}
start: {...}
- line: 5
- column: 25
}end: {...}
- line: 5
- column: 39
}
}- value: "./helpers.js"
- raw: "'./helpers.js'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 131
- end: 164
loc: {...}
start: {...}
- line: 7
- column: 1
}end: {...}
- line: 7
- column: 34
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 139
- end: 142
loc: {...}
start: {...}
- line: 7
- column: 9
}end: {...}
- line: 7
- column: 12
}
}imported: Identifier {...}
- type: "Identifier"
- start: 139
- end: 142
loc: {...}
start: {...}
- line: 7
- column: 9
}end: {...}
- line: 7
- column: 12
}
}- name: "get"
}local: Identifier {...}
- type: "Identifier"
- start: 139
- end: 142
loc: {...}
start: {...}
- line: 7
- column: 9
}end: {...}
- line: 7
- column: 12
}
}- name: "get"
}
}
]source: Literal {...}
- type: "Literal"
- start: 149
- end: 163
loc: {...}
start: {...}
- line: 7
- column: 19
}end: {...}
- line: 7
- column: 33
}
}- value: "svelte/store"
- raw: "'svelte/store'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 168
- end: 178
loc: {...}
start: {...}
- line: 9
- column: 1
}end: {...}
- line: 9
- column: 11
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 172
- end: 177
loc: {...}
start: {...}
- line: 9
- column: 5
}end: {...}
- line: 9
- column: 10
}
}id: Identifier {...}
- type: "Identifier"
- start: 172
- end: 177
loc: {...}
start: {...}
- line: 9
- column: 5
}end: {...}
- line: 9
- column: 10
}
}- name: "index"
}- init: null
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 180
- end: 186
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 10
- column: 7
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 184
- end: 186
loc: {...}
start: {...}
- line: 10
- column: 5
}end: {...}
- line: 10
- column: 7
}
}id: Identifier {...}
- type: "Identifier"
- start: 184
- end: 186
loc: {...}
start: {...}
- line: 10
- column: 5
}end: {...}
- line: 10
- column: 7
}
}- name: "id"
}- init: null
}
]- kind: "let"
}
]- sourceType: "module"
}
}- module: undefined
}
The AST is not public API and may change at any point in time