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
›
⌄
⌄
⌄
⌄
⌄
⌄
<script>
let files = $state();
$effect(() => {
if (files) {
// Note that `files` is of type `FileList`, not an Array:
// https://developer.mozilla.org/en-US/docs/Web/API/FileList
console.log(files);
for (const file of files) {
console.log(`${file.name}: ${file.size} bytes`);
}
}
});
</script>
<label for="avatar">Upload a picture:</label>
<input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />
<label for="many">Upload multiple files of any type:</label>
<input bind:files id="many" multiple type="file" />
{#if files}
<h2>Selected files:</h2>
{#each Array.from(files) as file}
<p>{file.name} ({file.size} bytes)</p>
{/each}
{/if}
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_2 = $.template(`<p> </p>`);
var root_1 = $.template(`<h2>Selected files:</h2> <!>`, 1);
var root = $.template(`<label for="avatar">Upload a picture:</label> <input accept="image/png, image/jpeg" id="avatar" name="avatar" type="file"> <label for="many">Upload multiple files of any type:</label> <input id="many" multiple type="file"> <!>`, 1);
export default function App($$anchor, $$props) {
$.push($$props, true);
let files = $.state(undefined);
$.user_effect(() => {
if ($.get(files)) {
// Note that `files` is of type `FileList`, not an Array:
// https://developer.mozilla.org/en-US/docs/Web/API/FileList
console.log($.get(files));
for (const file of $.get(files)) {
console.log(`${file.name}: ${file.size} bytes`);
}
}
});
var fragment = root();
var input = $.sibling($.first_child(fragment), 2);
var input_1 = $.sibling(input, 4);
var node = $.sibling(input_1, 2);
{
var consequent = ($$anchor) => {
var fragment_1 = root_1();
var node_1 = $.sibling($.first_child(fragment_1), 2);
$.each(node_1, 17, () => Array.from($.get(files)), $.index, ($$anchor, file) => {
var p = root_2();
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 323
- end: 702
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (10)
Text {...}
- type: "Text"
- start: 321
- end: 323
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 323
- end: 368
- name: "label"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 330
- end: 342
- name: "for"
value: [...] (1)
Text {...}
- start: 335
- end: 341
- type: "Text"
- raw: "avatar"
- data: "avatar"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 343
- end: 360
- raw: "Upload a picture:"
- data: "Upload a picture:"
}
]
}
} Text {...}
- type: "Text"
- start: 368
- end: 369
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 369
- end: 458
- name: "input"
attributes: [...] (5)
Attribute {...}
- type: "Attribute"
- start: 376
- end: 406
- name: "accept"
value: [...] (1)
Text {...}
- start: 384
- end: 405
- type: "Text"
- raw: "image/png, image/jpeg"
- data: "image/png, image/jpeg"
}
]
} BindDirective {...}
- start: 407
- end: 417
- type: "BindDirective"
- name: "files"
expression: Identifier {...}
- start: 412
- end: 417
- type: "Identifier"
- name: "files"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 418
- end: 429
- name: "id"
value: [...] (1)
Text {...}
- start: 422
- end: 428
- type: "Text"
- raw: "avatar"
- data: "avatar"
}
]
} Attribute {...}
- type: "Attribute"
- start: 430
- end: 443
- name: "name"
value: [...] (1)
Text {...}
- start: 436
- end: 442
- type: "Text"
- raw: "avatar"
- data: "avatar"
}
]
} Attribute {...}
- type: "Attribute"
- start: 444
- end: 455
- name: "type"
value: [...] (1)
Text {...}
- start: 450
- end: 454
- type: "Text"
- raw: "file"
- data: "file"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 458
- end: 460
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 460
- end: 520
- name: "label"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 467
- end: 477
- name: "for"
value: [...] (1)
Text {...}
- start: 472
- end: 476
- type: "Text"
- raw: "many"
- data: "many"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 478
- end: 512
- raw: "Upload multiple files of any type:"
- data: "Upload multiple files of any type:"
}
]
}
} Text {...}
- type: "Text"
- start: 520
- end: 521
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 521
- end: 572
- name: "input"
attributes: [...] (4)
BindDirective {...}
- start: 528
- end: 538
- type: "BindDirective"
- name: "files"
expression: Identifier {...}
- start: 533
- end: 538
- type: "Identifier"
- name: "files"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 539
- end: 548
- name: "id"
value: [...] (1)
Text {...}
- start: 543
- end: 547
- type: "Text"
- raw: "many"
- data: "many"
}
]
} Attribute {...}
- type: "Attribute"
- start: 549
- end: 557
- name: "multiple"
- value: true
} Attribute {...}
- type: "Attribute"
- start: 558
- end: 569
- name: "type"
value: [...] (1)
Text {...}
- start: 564
- end: 568
- type: "Text"
- raw: "file"
- data: "file"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 572
- end: 574
- raw: " "
- data: " "
} IfBlock {...}
- type: "IfBlock"
- elseif: false
- start: 574
- end: 702
test: Identifier {...}
- type: "Identifier"
- start: 579
- end: 584
loc: {...}
start: {...}
- line: 23
- column: 5
}end: {...}
- line: 23
- column: 10
}
}- name: "files"
}consequent: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 585
- end: 587
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 587
- end: 611
- name: "h2"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 591
- end: 606
- raw: "Selected files:"
- data: "Selected files:"
}
]
}
} Text {...}
- type: "Text"
- start: 611
- end: 613
- raw: " "
- data: " "
} EachBlock {...}
- type: "EachBlock"
- start: 613
- end: 696
expression: CallExpression {...}
- type: "CallExpression"
- start: 620
- end: 637
loc: {...}
start: {...}
- line: 25
- column: 8
}end: {...}
- line: 25
- column: 25
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 620
- end: 630
loc: {...}
start: {...}
- line: 25
- column: 8
}end: {...}
- line: 25
- column: 18
}
}object: Identifier {...}
- type: "Identifier"
- start: 620
- end: 625
loc: {...}
start: {...}
- line: 25
- column: 8
}end: {...}
- line: 25
- column: 13
}
}- name: "Array"
}property: Identifier {...}
- type: "Identifier"
- start: 626
- end: 630
loc: {...}
start: {...}
- line: 25
- column: 14
}end: {...}
- line: 25
- column: 18
}
}- name: "from"
}- computed: false
- optional: false
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 631
- end: 636
loc: {...}
start: {...}
- line: 25
- column: 19
}end: {...}
- line: 25
- column: 24
}
}- name: "files"
}
]- optional: false
}body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 646
- end: 649
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 649
- end: 687
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (4)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 652
- end: 663
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 653
- end: 662
loc: {...}
start: {...}
- line: 26
- column: 6
}end: {...}
- line: 26
- column: 15
}
}object: Identifier {...}
- type: "Identifier"
- start: 653
- end: 657
loc: {...}
start: {...}
- line: 26
- column: 6
}end: {...}
- line: 26
- column: 10
}
}- name: "file"
}property: Identifier {...}
- type: "Identifier"
- start: 658
- end: 662
loc: {...}
start: {...}
- line: 26
- column: 11
}end: {...}
- line: 26
- column: 15
}
}- name: "name"
}- computed: false
- optional: false
}
} Text {...}
- type: "Text"
- start: 663
- end: 665
- raw: " ("
- data: " ("
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 665
- end: 676
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 666
- end: 675
loc: {...}
start: {...}
- line: 26
- column: 19
}end: {...}
- line: 26
- column: 28
}
}object: Identifier {...}
- type: "Identifier"
- start: 666
- end: 670
loc: {...}
start: {...}
- line: 26
- column: 19
}end: {...}
- line: 26
- column: 23
}
}- name: "file"
}property: Identifier {...}
- type: "Identifier"
- start: 671
- end: 675
loc: {...}
start: {...}
- line: 26
- column: 24
}end: {...}
- line: 26
- column: 28
}
}- name: "size"
}- computed: false
- optional: false
}
} Text {...}
- type: "Text"
- start: 676
- end: 683
- raw: " bytes)"
- data: " bytes)"
}
]
}
} Text {...}
- type: "Text"
- start: 687
- end: 689
- raw: "\n\t"
- data: "\n\t"
}
]
}context: Identifier {...}
- type: "Identifier"
- name: "file"
- start: 641
loc: {...}
start: {...}
- line: 25
- column: 29
- character: 641
}end: {...}
- line: 25
- column: 33
- character: 645
}
}- end: 645
- typeAnnotation: undefined
}- index: undefined
- key: undefined
} Text {...}
- type: "Text"
- start: 696
- end: 697
- raw: "\n"
- data: "\n"
}
]
}- alternate: null
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 321
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 312
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 15
- column: 0
}
}body: [...] (2)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 31
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 22
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 14
- end: 30
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 21
}
}id: Identifier {...}
- type: "Identifier"
- start: 14
- end: 19
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 10
}
}- name: "files"
}init: CallExpression {...}
- type: "CallExpression"
- start: 22
- end: 30
loc: {...}
start: {...}
- line: 2
- column: 13
}end: {...}
- line: 2
- column: 21
}
}callee: Identifier {...}
- type: "Identifier"
- start: 22
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 13
}end: {...}
- line: 2
- column: 19
}
}- name: "$state"
}- arguments: []
- optional: false
}
}
]- kind: "let"
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 34
- end: 311
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 14
- column: 4
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 34
- end: 310
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 14
- column: 3
}
}callee: Identifier {...}
- type: "Identifier"
- start: 34
- end: 41
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 8
}
}- name: "$effect"
}arguments: [...] (1)
ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 42
- end: 309
loc: {...}
start: {...}
- line: 4
- column: 9
}end: {...}
- line: 14
- column: 2
}
}- id: null
- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 48
- end: 309
loc: {...}
start: {...}
- line: 4
- column: 15
}end: {...}
- line: 14
- column: 2
}
}body: [...] (1)
IfStatement {...}
- type: "IfStatement"
- start: 52
- end: 306
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 13
- column: 3
}
}test: Identifier {...}
- type: "Identifier"
- start: 56
- end: 61
loc: {...}
start: {...}
- line: 5
- column: 6
}end: {...}
- line: 5
- column: 11
}
}- name: "files"
}consequent: BlockStatement {...}
- type: "BlockStatement"
- start: 63
- end: 306
loc: {...}
start: {...}
- line: 5
- column: 13
}end: {...}
- line: 13
- column: 3
}
}body: [...] (2)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 193
- end: 212
loc: {...}
start: {...}
- line: 8
- column: 3
}end: {...}
- line: 8
- column: 22
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 193
- end: 211
loc: {...}
start: {...}
- line: 8
- column: 3
}end: {...}
- line: 8
- column: 21
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 193
- end: 204
loc: {...}
start: {...}
- line: 8
- column: 3
}end: {...}
- line: 8
- column: 14
}
}object: Identifier {...}
- type: "Identifier"
- start: 193
- end: 200
loc: {...}
start: {...}
- line: 8
- column: 3
}end: {...}
- line: 8
- column: 10
}
}- name: "console"
}property: Identifier {...}
- type: "Identifier"
- start: 201
- end: 204
loc: {...}
start: {...}
- line: 8
- column: 11
}end: {...}
- line: 8
- column: 14
}
}- name: "log"
}- computed: false
- optional: false
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 205
- end: 210
loc: {...}
start: {...}
- line: 8
- column: 15
}end: {...}
- line: 8
- column: 20
}
}- name: "files"
}
]- optional: false
}leadingComments: [...] (2)
Line {...}
- type: "Line"
- value: " Note that `files` is of type `FileList`, not an Array:"
- start: 68
- end: 125
} Line {...}
- type: "Line"
- value: " https://developer.mozilla.org/en-US/docs/Web/API/FileList"
- start: 129
- end: 189
}
]
} ForOfStatement {...}
- type: "ForOfStatement"
- start: 217
- end: 302
loc: {...}
start: {...}
- line: 10
- column: 3
}end: {...}
- line: 12
- column: 4
}
}- await: false
left: VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 222
- end: 232
loc: {...}
start: {...}
- line: 10
- column: 8
}end: {...}
- line: 10
- column: 18
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 228
- end: 232
loc: {...}
start: {...}
- line: 10
- column: 14
}end: {...}
- line: 10
- column: 18
}
}id: Identifier {...}
- type: "Identifier"
- start: 228
- end: 232
loc: {...}
start: {...}
- line: 10
- column: 14
}end: {...}
- line: 10
- column: 18
}
}- name: "file"
}- init: null
}
]- kind: "const"
}right: Identifier {...}
- type: "Identifier"
- start: 236
- end: 241
loc: {...}
start: {...}
- line: 10
- column: 22
}end: {...}
- line: 10
- column: 27
}
}- name: "files"
}body: BlockStatement {...}
- type: "BlockStatement"
- start: 243
- end: 302
loc: {...}
start: {...}
- line: 10
- column: 29
}end: {...}
- line: 12
- column: 4
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 249
- end: 297
loc: {...}
start: {...}
- line: 11
- column: 4
}end: {...}
- line: 11
- column: 52
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 249
- end: 296
loc: {...}
start: {...}
- line: 11
- column: 4
}end: {...}
- line: 11
- column: 51
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 249
- end: 260
loc: {...}
start: {...}
- line: 11
- column: 4
}end: {...}
- line: 11
- column: 15
}
}object: Identifier {...}
- type: "Identifier"
- start: 249
- end: 256
loc: {...}
start: {...}
- line: 11
- column: 4
}end: {...}
- line: 11
- column: 11
}
}- name: "console"
}property: Identifier {...}
- type: "Identifier"
- start: 257
- end: 260
loc: {...}
start: {...}
- line: 11
- column: 12
}end: {...}
- line: 11
- column: 15
}
}- name: "log"
}- computed: false
- optional: false
}arguments: [...] (1)
TemplateLiteral {...}
- type: "TemplateLiteral"
- start: 261
- end: 295
loc: {...}
start: {...}
- line: 11
- column: 16
}end: {...}
- line: 11
- column: 50
}
}expressions: [...] (2)
MemberExpression {...}
- type: "MemberExpression"
- start: 264
- end: 273
loc: {...}
start: {...}
- line: 11
- column: 19
}end: {...}
- line: 11
- column: 28
}
}object: Identifier {...}
- type: "Identifier"
- start: 264
- end: 268
loc: {...}
start: {...}
- line: 11
- column: 19
}end: {...}
- line: 11
- column: 23
}
}- name: "file"
}property: Identifier {...}
- type: "Identifier"
- start: 269
- end: 273
loc: {...}
start: {...}
- line: 11
- column: 24
}end: {...}
- line: 11
- column: 28
}
}- name: "name"
}- computed: false
- optional: false
} MemberExpression {...}
- type: "MemberExpression"
- start: 278
- end: 287
loc: {...}
start: {...}
- line: 11
- column: 33
}end: {...}
- line: 11
- column: 42
}
}object: Identifier {...}
- type: "Identifier"
- start: 278
- end: 282
loc: {...}
start: {...}
- line: 11
- column: 33
}end: {...}
- line: 11
- column: 37
}
}- name: "file"
}property: Identifier {...}
- type: "Identifier"
- start: 283
- end: 287
loc: {...}
start: {...}
- line: 11
- column: 38
}end: {...}
- line: 11
- column: 42
}
}- name: "size"
}- computed: false
- optional: false
}
]quasis: [...] (3)
TemplateElement {...}
- type: "TemplateElement"
- start: 262
- end: 262
loc: {...}
start: {...}
- line: 11
- column: 17
}end: {...}
- line: 11
- column: 17
}
}value: {...}
- raw: ""
- cooked: ""
}- tail: false
} TemplateElement {...}
- type: "TemplateElement"
- start: 274
- end: 276
loc: {...}
start: {...}
- line: 11
- column: 29
}end: {...}
- line: 11
- column: 31
}
}value: {...}
- raw: ": "
- cooked: ": "
}- tail: false
} TemplateElement {...}
- type: "TemplateElement"
- start: 288
- end: 294
loc: {...}
start: {...}
- line: 11
- column: 43
}end: {...}
- line: 11
- column: 49
}
}value: {...}
- raw: " bytes"
- cooked: " bytes"
}- tail: true
}
]
}
]- optional: false
}
}
]
}
}
]
}- alternate: null
}
]
}
}
]- optional: false
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time