Promise Indicator 2 • Playground • Svelte

App.svelte

LoadingIndicator.svelte

promiser.js

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>

<button on:click={()=>promiser(login(), status => loading = status)}>

Click me

</button>

{#if loading}

{/if}

</div>

<style>

.form {

position: relative;

padding: 20px;

}

</style>

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: "client" "server",

dev: false });

.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

modern