Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
LoadingIndicator.svelte
promiser.js
runes
This component is not in runes mode.
To enable runes mode, either start using runes in your code, or add the following to the top of your component:
<svelte:options runes />
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
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
import promiser from './promiser.js'
import LoadingIndicator from './LoadingIndicator.svelte'
let loading = false
async function login(){
return await new Promise(resolve => setTimeout(resolve, 3000))
}
</script>
<div class="form">
<button on:click={()=>promiser(login(), status => loading = status)}>
Click me
</button>
{#if loading}
<LoadingIndicator/>
{/if}
</div>
<style>
.form {
position: relative;
padding: 20px;
}
</style>
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 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
import promiser from './promiser.js';
import LoadingIndicator from './LoadingIndicator.svelte';
var root = $.template(`<div class="form svelte-114dvxr"><button>Click me</button> <!></div>`);
export default function App($$anchor, $$props) {
$.push($$props, false);
let loading = $.mutable_state(false);
async function login() {
return await new Promise((resolve) => setTimeout(resolve, 3000));
}
$.init();
var div = root();
var button = $.child(div);
var node = $.sibling(button, 2);
{
var consequent = ($$anchor) => {
LoadingIndicator($$anchor, {});
};
$.if(node, ($$render) => {
if ($.get(loading)) $$render(consequent);
});
}
$.reset(div);
$.event('click', button, () => promiser(login(), (status) => $.set(loading, status)));
$.append($$anchor, div);
result = svelte.compile(source, {
generate: ,
});9
1
2
3
4
5
6
7
8
›
.form.svelte-114dvxr {
position: relative;
padding: 20px;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 387
- end: 458
- attributes: []
children: [...] (1)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 398
- end: 403
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 398
- end: 403
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "form"
- start: 398
- end: 403
}
]- start: 398
- end: 403
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 404
- end: 447
children: [...] (2)
Declaration {...}
- type: "Declaration"
- start: 408
- end: 426
- property: "position"
- value: "relative"
} Declaration {...}
- type: "Declaration"
- start: 430
- end: 443
- property: "padding"
- value: "20px"
}
]
}- start: 398
- end: 447
}
]content: {...}
- start: 394
- end: 450
- styles: "\n\t\n\t.form {\n\t\tposition: relative;\n\t\tpadding: 20px;\n\t}\n\t\n"
- comment: null
}
}- js: []
- start: 225
- end: 386
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 224
- end: 225
- raw: "\n"
- data: "\n"
} RegularElement {...}
- type: "RegularElement"
- start: 225
- end: 386
- name: "div"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 230
- end: 242
- name: "class"
value: [...] (1)
Text {...}
- start: 237
- end: 241
- type: "Text"
- raw: "form"
- data: "form"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 243
- end: 245
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 245
- end: 336
- name: "button"
attributes: [...] (1)
OnDirective {...}
- start: 253
- end: 313
- type: "OnDirective"
- name: "click"
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 263
- end: 312
loc: {...}
start: {...}
- line: 12
- column: 19
}end: {...}
- line: 12
- column: 68
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: CallExpression {...}
- type: "CallExpression"
- start: 267
- end: 312
loc: {...}
start: {...}
- line: 12
- column: 23
}end: {...}
- line: 12
- column: 68
}
}callee: Identifier {...}
- type: "Identifier"
- start: 267
- end: 275
loc: {...}
start: {...}
- line: 12
- column: 23
}end: {...}
- line: 12
- column: 31
}
}- name: "promiser"
}arguments: [...] (2)
CallExpression {...}
- type: "CallExpression"
- start: 276
- end: 283
loc: {...}
start: {...}
- line: 12
- column: 32
}end: {...}
- line: 12
- column: 39
}
}callee: Identifier {...}
- type: "Identifier"
- start: 276
- end: 281
loc: {...}
start: {...}
- line: 12
- column: 32
}end: {...}
- line: 12
- column: 37
}
}- name: "login"
}- arguments: []
- optional: false
} ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 285
- end: 311
loc: {...}
start: {...}
- line: 12
- column: 41
}end: {...}
- line: 12
- column: 67
}
}- id: null
- expression: true
- generator: false
- async: false
params: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 285
- end: 291
loc: {...}
start: {...}
- line: 12
- column: 41
}end: {...}
- line: 12
- column: 47
}
}- name: "status"
}
]body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 295
- end: 311
loc: {...}
start: {...}
- line: 12
- column: 51
}end: {...}
- line: 12
- column: 67
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 295
- end: 302
loc: {...}
start: {...}
- line: 12
- column: 51
}end: {...}
- line: 12
- column: 58
}
}- name: "loading"
}right: Identifier {...}
- type: "Identifier"
- start: 305
- end: 311
loc: {...}
start: {...}
- line: 12
- column: 61
}end: {...}
- line: 12
- column: 67
}
}- name: "status"
}
}
}
]- optional: false
}
}- modifiers: []
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 314
- end: 327
- raw: "Click me"
- data: "Click me"
}
]
}
} Text {...}
- type: "Text"
- start: 336
- end: 338
- raw: " "
- data: " "
} IfBlock {...}
- type: "IfBlock"
- elseif: false
- start: 338
- end: 379
test: Identifier {...}
- type: "Identifier"
- start: 343
- end: 350
loc: {...}
start: {...}
- line: 15
- column: 6
}end: {...}
- line: 15
- column: 13
}
}- name: "loading"
}consequent: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 351
- end: 353
- raw: "\n\t"
- data: "\n\t"
} Component {...}
- type: "Component"
- start: 353
- end: 372
- name: "LoadingIndicator"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 372
- end: 374
- raw: "\n\t"
- data: "\n\t"
}
]
}- alternate: null
} Text {...}
- type: "Text"
- start: 379
- end: 380
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 386
- end: 387
- raw: "\n"
- data: "\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 224
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 215
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 10
- column: 0
}
}body: [...] (4)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 9
- end: 45
loc: {...}
start: {...}
- line: 2
- column: 0
}end: {...}
- line: 2
- column: 36
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 16
- end: 24
loc: {...}
start: {...}
- line: 2
- column: 7
}end: {...}
- line: 2
- column: 15
}
}local: Identifier {...}
- type: "Identifier"
- start: 16
- end: 24
loc: {...}
start: {...}
- line: 2
- column: 7
}end: {...}
- line: 2
- column: 15
}
}- name: "promiser"
}
}
]source: Literal {...}
- type: "Literal"
- start: 30
- end: 45
loc: {...}
start: {...}
- line: 2
- column: 21
}end: {...}
- line: 2
- column: 36
}
}- value: "./promiser.js"
- raw: "'./promiser.js'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 46
- end: 102
loc: {...}
start: {...}
- line: 3
- column: 0
}end: {...}
- line: 3
- column: 56
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 53
- end: 69
loc: {...}
start: {...}
- line: 3
- column: 7
}end: {...}
- line: 3
- column: 23
}
}local: Identifier {...}
- type: "Identifier"
- start: 53
- end: 69
loc: {...}
start: {...}
- line: 3
- column: 7
}end: {...}
- line: 3
- column: 23
}
}- name: "LoadingIndicator"
}
}
]source: Literal {...}
- type: "Literal"
- start: 75
- end: 102
loc: {...}
start: {...}
- line: 3
- column: 29
}end: {...}
- line: 3
- column: 56
}
}- value: "./LoadingIndicator.svelte"
- raw: "'./LoadingIndicator.svelte'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 103
- end: 122
loc: {...}
start: {...}
- line: 4
- column: 0
}end: {...}
- line: 4
- column: 19
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 107
- end: 122
loc: {...}
start: {...}
- line: 4
- column: 4
}end: {...}
- line: 4
- column: 19
}
}id: Identifier {...}
- type: "Identifier"
- start: 107
- end: 114
loc: {...}
start: {...}
- line: 4
- column: 4
}end: {...}
- line: 4
- column: 11
}
}- name: "loading"
}init: Literal {...}
- type: "Literal"
- start: 117
- end: 122
loc: {...}
start: {...}
- line: 4
- column: 14
}end: {...}
- line: 4
- column: 19
}
}- value: false
- raw: "false"
}
}
]- kind: "let"
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 124
- end: 213
loc: {...}
start: {...}
- line: 6
- column: 0
}end: {...}
- line: 8
- column: 1
}
}id: Identifier {...}
- type: "Identifier"
- start: 139
- end: 144
loc: {...}
start: {...}
- line: 6
- column: 15
}end: {...}
- line: 6
- column: 20
}
}- name: "login"
}- expression: false
- generator: false
- async: true
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 146
- end: 213
loc: {...}
start: {...}
- line: 6
- column: 22
}end: {...}
- line: 8
- column: 1
}
}body: [...] (1)
ReturnStatement {...}
- type: "ReturnStatement"
- start: 149
- end: 211
loc: {...}
start: {...}
- line: 7
- column: 1
}end: {...}
- line: 7
- column: 63
}
}argument: AwaitExpression {...}
- type: "AwaitExpression"
- start: 156
- end: 211
loc: {...}
start: {...}
- line: 7
- column: 8
}end: {...}
- line: 7
- column: 63
}
}argument: NewExpression {...}
- type: "NewExpression"
- start: 162
- end: 211
loc: {...}
start: {...}
- line: 7
- column: 14
}end: {...}
- line: 7
- column: 63
}
}callee: Identifier {...}
- type: "Identifier"
- start: 166
- end: 173
loc: {...}
start: {...}
- line: 7
- column: 18
}end: {...}
- line: 7
- column: 25
}
}- name: "Promise"
}arguments: [...] (1)
ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 174
- end: 210
loc: {...}
start: {...}
- line: 7
- column: 26
}end: {...}
- line: 7
- column: 62
}
}- id: null
- expression: true
- generator: false
- async: false
params: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 174
- end: 181
loc: {...}
start: {...}
- line: 7
- column: 26
}end: {...}
- line: 7
- column: 33
}
}- name: "resolve"
}
]body: CallExpression {...}
- type: "CallExpression"
- start: 185
- end: 210
loc: {...}
start: {...}
- line: 7
- column: 37
}end: {...}
- line: 7
- column: 62
}
}callee: Identifier {...}
- type: "Identifier"
- start: 185
- end: 195
loc: {...}
start: {...}
- line: 7
- column: 37
}end: {...}
- line: 7
- column: 47
}
}- name: "setTimeout"
}arguments: [...] (2)
Identifier {...}
- type: "Identifier"
- start: 196
- end: 203
loc: {...}
start: {...}
- line: 7
- column: 48
}end: {...}
- line: 7
- column: 55
}
}- name: "resolve"
} Literal {...}
- type: "Literal"
- start: 205
- end: 209
loc: {...}
start: {...}
- line: 7
- column: 57
}end: {...}
- line: 7
- column: 61
}
}- value: 3000
- raw: "3000"
}
]- optional: false
}
}
]
}
}
}
]
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time