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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
import { onMount } from 'svelte';
let photos = $state([]);
onMount(async () => {
const res = await fetch(`/tutorial/api/album`);
photos = await res.json();
});
</script>
<h1>Photo album</h1>
<div class="photos">
{#each photos as photo}
<figure>
<img src={photo.thumbnailUrl} alt={photo.title} />
<figcaption>{photo.title}</figcaption>
</figure>
{:else}
<!-- this block renders when photos.length === 0 -->
<p>loading...</p>
{/each}
</div>
<style>
.photos {
width: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 8px;
}
figure,
img {
width: 100%;
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 { onMount } from 'svelte';
var root_1 = $.template(`<figure class="svelte-1ioor56"><img class="svelte-1ioor56"> <figcaption> </figcaption></figure>`);
var root_2 = $.template(`<p>loading...</p>`);
var root = $.template(`<h1>Photo album</h1> <div class="photos svelte-1ioor56"></div>`, 1);
export default function App($$anchor, $$props) {
$.push($$props, true);
let photos = $.state($.proxy([]));
onMount(async () => {
const res = await fetch(`/tutorial/api/album`);
$.set(photos, $.proxy(await res.json()));
});
var fragment = root();
var div = $.sibling($.first_child(fragment), 2);
$.each(
div,
21,
() => $.get(photos),
$.index,
($$anchor, photo) => {
var figure = root_1();
var img = $.child(figure);
var figcaption = $.sibling(img, 2);
var text = $.child(figcaption, true);
$.reset(figcaption);
$.reset(figure);
result = svelte.compile(source, {
generate: ,
});99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
›
.photos.svelte-1ioor56 {
width: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 8px;
}
figure.svelte-1ioor56,
img.svelte-1ioor56 {
width: 100%;
margin: 0;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 478
- end: 646
- attributes: []
children: [...] (2)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 487
- end: 494
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 487
- end: 494
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "photos"
- start: 487
- end: 494
}
]- start: 487
- end: 494
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 495
- end: 589
children: [...] (4)
Declaration {...}
- type: "Declaration"
- start: 499
- end: 510
- property: "width"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 514
- end: 527
- property: "display"
- value: "grid"
} Declaration {...}
- type: "Declaration"
- start: 531
- end: 568
- property: "grid-template-columns"
- value: "repeat(5, 1fr)"
} Declaration {...}
- type: "Declaration"
- start: 572
- end: 585
- property: "grid-gap"
- value: "8px"
}
]
}- start: 487
- end: 589
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 592
- end: 604
children: [...] (2)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 592
- end: 598
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "figure"
- start: 592
- end: 598
}
]- start: 592
- end: 598
}
]
} ComplexSelector {...}
- type: "ComplexSelector"
- start: 601
- end: 604
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "img"
- start: 601
- end: 604
}
]- start: 601
- end: 604
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 605
- end: 637
children: [...] (2)
Declaration {...}
- type: "Declaration"
- start: 609
- end: 620
- property: "width"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 624
- end: 633
- property: "margin"
- value: "0"
}
]
}- start: 592
- end: 637
}
]content: {...}
- start: 485
- end: 638
- styles: "\n\t.photos {\n\t\twidth: 100%;\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(5, 1fr);\n\t\tgrid-gap: 8px;\n\t}\n\n\tfigure,\n\timg {\n\t\twidth: 100%;\n\t\tmargin: 0;\n\t}\n"
- comment: null
}
}- js: []
- start: 190
- end: 476
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 188
- end: 190
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 190
- end: 210
- name: "h1"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 194
- end: 205
- raw: "Photo album"
- data: "Photo album"
}
]
}
} Text {...}
- type: "Text"
- start: 210
- end: 212
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 212
- end: 476
- name: "div"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 217
- end: 231
- name: "class"
value: [...] (1)
Text {...}
- start: 224
- end: 230
- type: "Text"
- raw: "photos"
- data: "photos svelte-1ioor56"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 232
- end: 234
- raw: "\n\t"
- data: "\n\t"
} EachBlock {...}
- type: "EachBlock"
- start: 234
- end: 469
expression: Identifier {...}
- type: "Identifier"
- start: 241
- end: 247
loc: {...}
start: {...}
- line: 15
- column: 8
}end: {...}
- line: 15
- column: 14
}
}- name: "photos"
}body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 257
- end: 260
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 260
- end: 376
- name: "figure"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-1ioor56"
- raw: "svelte-1ioor56"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 268
- end: 272
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 272
- end: 322
- name: "img"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 277
- end: 301
- name: "src"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 281
- end: 301
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 282
- end: 300
loc: {...}
start: {...}
- line: 17
- column: 13
}end: {...}
- line: 17
- column: 31
}
}object: Identifier {...}
- type: "Identifier"
- start: 282
- end: 287
loc: {...}
start: {...}
- line: 17
- column: 13
}end: {...}
- line: 17
- column: 18
}
}- name: "photo"
}property: Identifier {...}
- type: "Identifier"
- start: 288
- end: 300
loc: {...}
start: {...}
- line: 17
- column: 19
}end: {...}
- line: 17
- column: 31
}
}- name: "thumbnailUrl"
}- computed: false
- optional: false
}
}
} Attribute {...}
- type: "Attribute"
- start: 302
- end: 319
- name: "alt"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 306
- end: 319
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 307
- end: 318
loc: {...}
start: {...}
- line: 17
- column: 38
}end: {...}
- line: 17
- column: 49
}
}object: Identifier {...}
- type: "Identifier"
- start: 307
- end: 312
loc: {...}
start: {...}
- line: 17
- column: 38
}end: {...}
- line: 17
- column: 43
}
}- name: "photo"
}property: Identifier {...}
- type: "Identifier"
- start: 313
- end: 318
loc: {...}
start: {...}
- line: 17
- column: 44
}end: {...}
- line: 17
- column: 49
}
}- name: "title"
}- computed: false
- optional: false
}
}
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-1ioor56"
- raw: "svelte-1ioor56"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 322
- end: 326
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 326
- end: 364
- name: "figcaption"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 338
- end: 351
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 339
- end: 350
loc: {...}
start: {...}
- line: 18
- column: 16
}end: {...}
- line: 18
- column: 27
}
}object: Identifier {...}
- type: "Identifier"
- start: 339
- end: 344
loc: {...}
start: {...}
- line: 18
- column: 16
}end: {...}
- line: 18
- column: 21
}
}- name: "photo"
}property: Identifier {...}
- type: "Identifier"
- start: 345
- end: 350
loc: {...}
start: {...}
- line: 18
- column: 22
}end: {...}
- line: 18
- column: 27
}
}- name: "title"
}- computed: false
- optional: false
}
}
]
}
} Text {...}
- type: "Text"
- start: 364
- end: 367
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
}
} Text {...}
- type: "Text"
- start: 376
- end: 378
- raw: "\n\t"
- data: "\n\t"
}
]
}context: Identifier {...}
- type: "Identifier"
- name: "photo"
- start: 251
loc: {...}
start: {...}
- line: 15
- column: 18
- character: 251
}end: {...}
- line: 15
- column: 23
- character: 256
}
}- end: 256
- typeAnnotation: undefined
}- index: undefined
- key: undefined
fallback: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 385
- end: 388
- raw: "\n\t\t"
- data: "\n\t\t"
} Comment {...}
- type: "Comment"
- start: 388
- end: 440
- data: " this block renders when photos.length === 0 "
} Text {...}
- type: "Text"
- start: 440
- end: 443
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 443
- end: 460
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 446
- end: 456
- raw: "loading..."
- data: "loading..."
}
]
}
} Text {...}
- type: "Text"
- start: 460
- end: 462
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 469
- end: 470
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 476
- end: 478
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 188
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 179
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 10
- column: 0
}
}body: [...] (3)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 43
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 34
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 19
- end: 26
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 17
}
}imported: Identifier {...}
- type: "Identifier"
- start: 19
- end: 26
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 17
}
}- name: "onMount"
}local: Identifier {...}
- type: "Identifier"
- start: 19
- end: 26
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 17
}
}- name: "onMount"
}
}
]source: Literal {...}
- type: "Literal"
- start: 34
- end: 42
loc: {...}
start: {...}
- line: 2
- column: 25
}end: {...}
- line: 2
- column: 33
}
}- value: "svelte"
- raw: "'svelte'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 46
- end: 70
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 25
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 50
- end: 69
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 24
}
}id: Identifier {...}
- type: "Identifier"
- start: 50
- end: 56
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 11
}
}- name: "photos"
}init: CallExpression {...}
- type: "CallExpression"
- start: 59
- end: 69
loc: {...}
start: {...}
- line: 4
- column: 14
}end: {...}
- line: 4
- column: 24
}
}callee: Identifier {...}
- type: "Identifier"
- start: 59
- end: 65
loc: {...}
start: {...}
- line: 4
- column: 14
}end: {...}
- line: 4
- column: 20
}
}- name: "$state"
}arguments: [...] (1)
ArrayExpression {...}
- type: "ArrayExpression"
- start: 66
- end: 68
loc: {...}
start: {...}
- line: 4
- column: 21
}end: {...}
- line: 4
- column: 23
}
}- elements: []
}
]- optional: false
}
}
]- kind: "let"
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 73
- end: 178
loc: {...}
start: {...}
- line: 6
- column: 1
}end: {...}
- line: 9
- column: 4
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 73
- end: 177
loc: {...}
start: {...}
- line: 6
- column: 1
}end: {...}
- line: 9
- column: 3
}
}callee: Identifier {...}
- type: "Identifier"
- start: 73
- end: 80
loc: {...}
start: {...}
- line: 6
- column: 1
}end: {...}
- line: 6
- column: 8
}
}- name: "onMount"
}arguments: [...] (1)
ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 81
- end: 176
loc: {...}
start: {...}
- line: 6
- column: 9
}end: {...}
- line: 9
- column: 2
}
}- id: null
- expression: false
- generator: false
- async: true
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 93
- end: 176
loc: {...}
start: {...}
- line: 6
- column: 21
}end: {...}
- line: 9
- column: 2
}
}body: [...] (2)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 97
- end: 144
loc: {...}
start: {...}
- line: 7
- column: 2
}end: {...}
- line: 7
- column: 49
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 103
- end: 143
loc: {...}
start: {...}
- line: 7
- column: 8
}end: {...}
- line: 7
- column: 48
}
}id: Identifier {...}
- type: "Identifier"
- start: 103
- end: 106
loc: {...}
start: {...}
- line: 7
- column: 8
}end: {...}
- line: 7
- column: 11
}
}- name: "res"
}init: AwaitExpression {...}
- type: "AwaitExpression"
- start: 109
- end: 143
loc: {...}
start: {...}
- line: 7
- column: 14
}end: {...}
- line: 7
- column: 48
}
}argument: CallExpression {...}
- type: "CallExpression"
- start: 115
- end: 143
loc: {...}
start: {...}
- line: 7
- column: 20
}end: {...}
- line: 7
- column: 48
}
}callee: Identifier {...}
- type: "Identifier"
- start: 115
- end: 120
loc: {...}
start: {...}
- line: 7
- column: 20
}end: {...}
- line: 7
- column: 25
}
}- name: "fetch"
}arguments: [...] (1)
TemplateLiteral {...}
- type: "TemplateLiteral"
- start: 121
- end: 142
loc: {...}
start: {...}
- line: 7
- column: 26
}end: {...}
- line: 7
- column: 47
}
}- expressions: []
quasis: [...] (1)
TemplateElement {...}
- type: "TemplateElement"
- start: 122
- end: 141
loc: {...}
start: {...}
- line: 7
- column: 27
}end: {...}
- line: 7
- column: 46
}
}value: {...}
- raw: "/tutorial/api/album"
- cooked: "/tutorial/api/album"
}- tail: true
}
]
}
]- optional: false
}
}
}
]- kind: "const"
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 147
- end: 173
loc: {...}
start: {...}
- line: 8
- column: 2
}end: {...}
- line: 8
- column: 28
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 147
- end: 172
loc: {...}
start: {...}
- line: 8
- column: 2
}end: {...}
- line: 8
- column: 27
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 147
- end: 153
loc: {...}
start: {...}
- line: 8
- column: 2
}end: {...}
- line: 8
- column: 8
}
}- name: "photos"
}right: AwaitExpression {...}
- type: "AwaitExpression"
- start: 156
- end: 172
loc: {...}
start: {...}
- line: 8
- column: 11
}end: {...}
- line: 8
- column: 27
}
}argument: CallExpression {...}
- type: "CallExpression"
- start: 162
- end: 172
loc: {...}
start: {...}
- line: 8
- column: 17
}end: {...}
- line: 8
- column: 27
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 162
- end: 170
loc: {...}
start: {...}
- line: 8
- column: 17
}end: {...}
- line: 8
- column: 25
}
}object: Identifier {...}
- type: "Identifier"
- start: 162
- end: 165
loc: {...}
start: {...}
- line: 8
- column: 17
}end: {...}
- line: 8
- column: 20
}
}- name: "res"
}property: Identifier {...}
- type: "Identifier"
- start: 166
- end: 170
loc: {...}
start: {...}
- line: 8
- column: 21
}end: {...}
- line: 8
- column: 25
}
}- name: "json"
}- computed: false
- optional: false
}- arguments: []
- optional: false
}
}
}
}
]
}
}
]- optional: false
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time