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 promise = $state(getRandomNumber());
async function getRandomNumber() {
const res = await fetch(`/tutorial/random-number`);
const text = await res.text();
if (res.ok) {
return text;
} else {
throw new Error(text);
}
}
function handleClick() {
promise = getRandomNumber();
}
</script>
<button onclick={handleClick}> generate random number </button>
{#await promise}
<p>...waiting</p>
{:then number}
<p>The number is {number}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
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';
function handleClick(_, promise, getRandomNumber) {
$.set(promise, $.proxy(getRandomNumber()));
}
var root_1 = $.template(`<p> </p>`);
var root_2 = $.template(`<p style="color: red"> </p>`);
var root_3 = $.template(`<p>...waiting</p>`);
var root = $.template(`<button>generate random number</button> <!>`, 1);
export default function App($$anchor, $$props) {
$.push($$props, true);
let promise = $.state($.proxy(getRandomNumber()));
async function getRandomNumber() {
const res = await fetch(`/tutorial/random-number`);
const text = await res.text();
if (res.ok) {
return text;
} else {
throw new Error(text);
}
}
var fragment = root();
var button = $.first_child(fragment);
button.__click = [handleClick, promise, getRandomNumber];
var node = $.sibling(button, 2);
$.await(
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 324
- end: 537
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (4)
Text {...}
- type: "Text"
- start: 322
- end: 324
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 324
- end: 387
- name: "button"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 332
- end: 353
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 340
- end: 353
expression: Identifier {...}
- type: "Identifier"
- start: 341
- end: 352
loc: {...}
start: {...}
- line: 20
- column: 17
}end: {...}
- line: 20
- column: 28
}
}- name: "handleClick"
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 354
- end: 378
- raw: "generate random number"
- data: "generate random number"
}
]
}
} Text {...}
- type: "Text"
- start: 387
- end: 389
- raw: " "
- data: " "
} AwaitBlock {...}
- type: "AwaitBlock"
- start: 389
- end: 537
expression: Identifier {...}
- type: "Identifier"
- start: 397
- end: 404
loc: {...}
start: {...}
- line: 22
- column: 8
}end: {...}
- line: 22
- column: 15
}
}- name: "promise"
}value: Identifier {...}
- type: "Identifier"
- name: "number"
- start: 432
loc: {...}
start: {...}
- line: 24
- column: 7
- character: 432
}end: {...}
- line: 24
- column: 13
- character: 438
}
}- end: 438
- typeAnnotation: undefined
}error: Identifier {...}
- type: "Identifier"
- name: "error"
- start: 479
loc: {...}
start: {...}
- line: 26
- column: 8
- character: 479
}end: {...}
- line: 26
- column: 13
- character: 484
}
}- end: 484
- typeAnnotation: undefined
}pending: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 405
- end: 407
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 407
- end: 424
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 410
- end: 420
- raw: "...waiting"
- data: "...waiting"
}
]
}
} Text {...}
- type: "Text"
- start: 424
- end: 425
- raw: "\n"
- data: "\n"
}
]
}then: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 439
- end: 441
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 441
- end: 470
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (2)
Text {...}
- type: "Text"
- start: 444
- end: 458
- raw: "The number is "
- data: "The number is "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 458
- end: 466
expression: Identifier {...}
- type: "Identifier"
- start: 459
- end: 465
loc: {...}
start: {...}
- line: 25
- column: 19
}end: {...}
- line: 25
- column: 25
}
}- name: "number"
}
}
]
}
} Text {...}
- type: "Text"
- start: 470
- end: 471
- raw: "\n"
- data: "\n"
}
]
}catch: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 485
- end: 487
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 487
- end: 528
- name: "p"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 490
- end: 508
- name: "style"
value: [...] (1)
Text {...}
- start: 497
- end: 507
- type: "Text"
- raw: "color: red"
- data: "color: red"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 509
- end: 524
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 510
- end: 523
loc: {...}
start: {...}
- line: 27
- column: 24
}end: {...}
- line: 27
- column: 37
}
}object: Identifier {...}
- type: "Identifier"
- start: 510
- end: 515
loc: {...}
start: {...}
- line: 27
- column: 24
}end: {...}
- line: 27
- column: 29
}
}- name: "error"
}property: Identifier {...}
- type: "Identifier"
- start: 516
- end: 523
loc: {...}
start: {...}
- line: 27
- column: 30
}end: {...}
- line: 27
- column: 37
}
}- name: "message"
}- computed: false
- optional: false
}
}
]
}
} Text {...}
- type: "Text"
- start: 528
- end: 529
- raw: "\n"
- data: "\n"
}
]
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 322
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 313
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 18
- column: 0
}
}body: [...] (3)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 50
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 41
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 14
- end: 49
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 40
}
}id: Identifier {...}
- type: "Identifier"
- start: 14
- end: 21
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 12
}
}- name: "promise"
}init: CallExpression {...}
- type: "CallExpression"
- start: 24
- end: 49
loc: {...}
start: {...}
- line: 2
- column: 15
}end: {...}
- line: 2
- column: 40
}
}callee: Identifier {...}
- type: "Identifier"
- start: 24
- end: 30
loc: {...}
start: {...}
- line: 2
- column: 15
}end: {...}
- line: 2
- column: 21
}
}- name: "$state"
}arguments: [...] (1)
CallExpression {...}
- type: "CallExpression"
- start: 31
- end: 48
loc: {...}
start: {...}
- line: 2
- column: 22
}end: {...}
- line: 2
- column: 39
}
}callee: Identifier {...}
- type: "Identifier"
- start: 31
- end: 46
loc: {...}
start: {...}
- line: 2
- column: 22
}end: {...}
- line: 2
- column: 37
}
}- name: "getRandomNumber"
}- arguments: []
- optional: false
}
]- optional: false
}
}
]- kind: "let"
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 53
- end: 251
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 13
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 68
- end: 83
loc: {...}
start: {...}
- line: 4
- column: 16
}end: {...}
- line: 4
- column: 31
}
}- name: "getRandomNumber"
}- expression: false
- generator: false
- async: true
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 86
- end: 251
loc: {...}
start: {...}
- line: 4
- column: 34
}end: {...}
- line: 13
- column: 2
}
}body: [...] (3)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 90
- end: 141
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 53
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 96
- end: 140
loc: {...}
start: {...}
- line: 5
- column: 8
}end: {...}
- line: 5
- column: 52
}
}id: Identifier {...}
- type: "Identifier"
- start: 96
- end: 99
loc: {...}
start: {...}
- line: 5
- column: 8
}end: {...}
- line: 5
- column: 11
}
}- name: "res"
}init: AwaitExpression {...}
- type: "AwaitExpression"
- start: 102
- end: 140
loc: {...}
start: {...}
- line: 5
- column: 14
}end: {...}
- line: 5
- column: 52
}
}argument: CallExpression {...}
- type: "CallExpression"
- start: 108
- end: 140
loc: {...}
start: {...}
- line: 5
- column: 20
}end: {...}
- line: 5
- column: 52
}
}callee: Identifier {...}
- type: "Identifier"
- start: 108
- end: 113
loc: {...}
start: {...}
- line: 5
- column: 20
}end: {...}
- line: 5
- column: 25
}
}- name: "fetch"
}arguments: [...] (1)
TemplateLiteral {...}
- type: "TemplateLiteral"
- start: 114
- end: 139
loc: {...}
start: {...}
- line: 5
- column: 26
}end: {...}
- line: 5
- column: 51
}
}- expressions: []
quasis: [...] (1)
TemplateElement {...}
- type: "TemplateElement"
- start: 115
- end: 138
loc: {...}
start: {...}
- line: 5
- column: 27
}end: {...}
- line: 5
- column: 50
}
}value: {...}
- raw: "/tutorial/random-number"
- cooked: "/tutorial/random-number"
}- tail: true
}
]
}
]- optional: false
}
}
}
]- kind: "const"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 144
- end: 174
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 32
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 150
- end: 173
loc: {...}
start: {...}
- line: 6
- column: 8
}end: {...}
- line: 6
- column: 31
}
}id: Identifier {...}
- type: "Identifier"
- start: 150
- end: 154
loc: {...}
start: {...}
- line: 6
- column: 8
}end: {...}
- line: 6
- column: 12
}
}- name: "text"
}init: AwaitExpression {...}
- type: "AwaitExpression"
- start: 157
- end: 173
loc: {...}
start: {...}
- line: 6
- column: 15
}end: {...}
- line: 6
- column: 31
}
}argument: CallExpression {...}
- type: "CallExpression"
- start: 163
- end: 173
loc: {...}
start: {...}
- line: 6
- column: 21
}end: {...}
- line: 6
- column: 31
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 163
- end: 171
loc: {...}
start: {...}
- line: 6
- column: 21
}end: {...}
- line: 6
- column: 29
}
}object: Identifier {...}
- type: "Identifier"
- start: 163
- end: 166
loc: {...}
start: {...}
- line: 6
- column: 21
}end: {...}
- line: 6
- column: 24
}
}- name: "res"
}property: Identifier {...}
- type: "Identifier"
- start: 167
- end: 171
loc: {...}
start: {...}
- line: 6
- column: 25
}end: {...}
- line: 6
- column: 29
}
}- name: "text"
}- computed: false
- optional: false
}- arguments: []
- optional: false
}
}
}
]- kind: "const"
} IfStatement {...}
- type: "IfStatement"
- start: 178
- end: 248
loc: {...}
start: {...}
- line: 8
- column: 2
}end: {...}
- line: 12
- column: 3
}
}test: MemberExpression {...}
- type: "MemberExpression"
- start: 182
- end: 188
loc: {...}
start: {...}
- line: 8
- column: 6
}end: {...}
- line: 8
- column: 12
}
}object: Identifier {...}
- type: "Identifier"
- start: 182
- end: 185
loc: {...}
start: {...}
- line: 8
- column: 6
}end: {...}
- line: 8
- column: 9
}
}- name: "res"
}property: Identifier {...}
- type: "Identifier"
- start: 186
- end: 188
loc: {...}
start: {...}
- line: 8
- column: 10
}end: {...}
- line: 8
- column: 12
}
}- name: "ok"
}- computed: false
- optional: false
}consequent: BlockStatement {...}
- type: "BlockStatement"
- start: 190
- end: 211
loc: {...}
start: {...}
- line: 8
- column: 14
}end: {...}
- line: 10
- column: 3
}
}body: [...] (1)
ReturnStatement {...}
- type: "ReturnStatement"
- start: 195
- end: 207
loc: {...}
start: {...}
- line: 9
- column: 3
}end: {...}
- line: 9
- column: 15
}
}argument: Identifier {...}
- type: "Identifier"
- start: 202
- end: 206
loc: {...}
start: {...}
- line: 9
- column: 10
}end: {...}
- line: 9
- column: 14
}
}- name: "text"
}
}
]
}alternate: BlockStatement {...}
- type: "BlockStatement"
- start: 217
- end: 248
loc: {...}
start: {...}
- line: 10
- column: 9
}end: {...}
- line: 12
- column: 3
}
}body: [...] (1)
ThrowStatement {...}
- type: "ThrowStatement"
- start: 222
- end: 244
loc: {...}
start: {...}
- line: 11
- column: 3
}end: {...}
- line: 11
- column: 25
}
}argument: NewExpression {...}
- type: "NewExpression"
- start: 228
- end: 243
loc: {...}
start: {...}
- line: 11
- column: 9
}end: {...}
- line: 11
- column: 24
}
}callee: Identifier {...}
- type: "Identifier"
- start: 232
- end: 237
loc: {...}
start: {...}
- line: 11
- column: 13
}end: {...}
- line: 11
- column: 18
}
}- name: "Error"
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 238
- end: 242
loc: {...}
start: {...}
- line: 11
- column: 19
}end: {...}
- line: 11
- column: 23
}
}- name: "text"
}
]
}
}
]
}
}
]
}
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 254
- end: 312
loc: {...}
start: {...}
- line: 15
- column: 1
}end: {...}
- line: 17
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 263
- end: 274
loc: {...}
start: {...}
- line: 15
- column: 10
}end: {...}
- line: 15
- column: 21
}
}- name: "handleClick"
}- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 277
- end: 312
loc: {...}
start: {...}
- line: 15
- column: 24
}end: {...}
- line: 17
- column: 2
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 281
- end: 309
loc: {...}
start: {...}
- line: 16
- column: 2
}end: {...}
- line: 16
- column: 30
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 281
- end: 308
loc: {...}
start: {...}
- line: 16
- column: 2
}end: {...}
- line: 16
- column: 29
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 281
- end: 288
loc: {...}
start: {...}
- line: 16
- column: 2
}end: {...}
- line: 16
- column: 9
}
}- name: "promise"
}right: CallExpression {...}
- type: "CallExpression"
- start: 291
- end: 308
loc: {...}
start: {...}
- line: 16
- column: 12
}end: {...}
- line: 16
- column: 29
}
}callee: Identifier {...}
- type: "Identifier"
- start: 291
- end: 306
loc: {...}
start: {...}
- line: 16
- column: 12
}end: {...}
- line: 16
- column: 27
}
}- name: "getRandomNumber"
}- arguments: []
- optional: false
}
}
}
]
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time