Svelte Script Code Execution Order • Playground • Svelte

App.svelte

import { onMount } from 'svelte'

const fetchData = async () => {

console.log('1. fetchData')

}

console.log('2. started')

fetchData().then(() => console.log('3. fetched'))

$: console.log('4. reactive')

console.log('5. continued')

onMount(() => {

console.log('6. onMount')

})

console.log('7. after mount')

</script>

<h1>In which order will these console logs appear?</h1>

<p>

Write down your answer below and then open the console

</p>

<p>

For more info, please check out <a href="https://dev.to/idosius/svelte-script-code-execution-order-4n1m">the blog post on dev.to</a>

</p>

<p>

</p>

<style>

textarea {

width: 100%;

started
fetchData
continued
after mount
reactive
fetched
onMount

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

import * as $ from 'svelte/internal/client';

import { onMount } from 'svelte';

var root = $.template(`<h1>In which order will these console logs appear?</h1> <p>Write down your answer below and then open the console</p> <p>For more info, please check out <a href="https://dev.to/idosius/svelte-script-code-execution-order-4n1m">the blog post on dev.to</a></p> <p><textarea rows="10" class="svelte-e9rb8c"></textarea></p>`, 1);

export default function App($$anchor, $$props) {

$.push($$props, false);

const fetchData = async () => {

console.log('1. fetchData');

};

console.log('2. started');

fetchData().then(() => console.log('3. fetched'));

console.log('5. continued');

onMount(() => {

console.log('6. onMount');

});

console.log('7. after mount');

$.legacy_pre_effect(() => {}, () => {

console.log('4. reactive');

});

$.legacy_pre_effect_reset();

$.init();

var fragment = root();

$.next(6);

$.append($$anchor, fragment);

$.pop();

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

textarea.svelte-e9rb8c {

width: 100%;

}

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 659
end: 705
attributes: []
children: [...] (1)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 668
end: 676
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 668
end: 676
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "textarea"
start: 668
end: 676
 }
 ]
start: 668
end: 676
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 677
end: 696
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 681
end: 692
property: "width"
value: "100%"
 }
 ]
 }
start: 668
end: 696
 }
 ]
content:  {...}
 start: 666
end: 697
styles: "\n\ttextarea {\n\t\twidth: 100%;\n\t}\n"
comment: null
 }
 }
js: []
start: 352
end: 657
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (9)
  Text {...}
 type: "Text"
start: 350
end: 352
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 352
end: 407
name: "h1"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 356
end: 402
raw: "In which order will these console logs appear?"
data: "In which order will these console logs appear?"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 407
end: 408
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 408
end: 472
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 411
end: 468
raw: "Write down your answer below and then open the console"
data: "Write down your answer below and then open the console"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 472
end: 473
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 473
end: 615
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 476
end: 510
raw: "For more info, please check out "
data: "For more info, please check out "
 }
 RegularElement {...}
 type: "RegularElement"
start: 510
end: 610
name: "a"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 513
end: 582
name: "href"
value: [...] (1)
  Text {...}
 start: 519
end: 581
type: "Text"
raw: "https://dev.to/idosius/svelte-script-code-execution-order-4n1m"
data: "https://dev.to/idosius/svelte-script-code-execution-order-4n1m"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 583
end: 606
raw: "the blog post on dev.to"
data: "the blog post on dev.to"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 610
end: 611
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 615
end: 616
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 616
end: 657
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 619
end: 621
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 621
end: 652
name: "textarea"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 631
end: 640
name: "rows"
value: [...] (1)
  Text {...}
 start: 637
end: 639
type: "Text"
raw: "10"
data: "10"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 652
end: 653
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 657
end: 659
raw: "\n\n"
data: "\n\n"
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 350
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 341
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 21
column: 0
 }
 }
body: [...] (8)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 10
end: 42
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 33
 }
 }
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: 110
loc:  {...}
 start:  {...}
 line: 4
column: 1
 }
end:  {...}
 line: 6
column: 2
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 52
end: 110
loc:  {...}
 start:  {...}
 line: 4
column: 7
 }
end:  {...}
 line: 6
column: 2
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 52
end: 61
loc:  {...}
 start:  {...}
 line: 4
column: 7
 }
end:  {...}
 line: 4
column: 16
 }
 }
name: "fetchData"
 }
init: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 64
end: 110
loc:  {...}
 start:  {...}
 line: 4
column: 19
 }
end:  {...}
 line: 6
column: 2
 }
 }
id: null
expression: false
generator: false
async: true
params: []
body: BlockStatement {...}
 type: "BlockStatement"
start: 76
end: 110
loc:  {...}
 start:  {...}
 line: 4
column: 31
 }
end:  {...}
 line: 6
column: 2
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 80
end: 107
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 29
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 80
end: 107
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 29
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 80
end: 91
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 13
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 80
end: 87
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 5
column: 9
 }
 }
name: "console"
 }
property: Identifier {...}
 type: "Identifier"
start: 88
end: 91
loc:  {...}
 start:  {...}
 line: 5
column: 10
 }
end:  {...}
 line: 5
column: 13
 }
 }
name: "log"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 92
end: 106
loc:  {...}
 start:  {...}
 line: 5
column: 14
 }
end:  {...}
 line: 5
column: 28
 }
 }
value: "1. fetchData"
raw: "'1. fetchData'"
 }
 ]
optional: false
 }
 }
 ]
 }
 }
 }
 ]
kind: "const"
 }
 ExpressionStatement {...}
 type: "ExpressionStatement"
start: 114
end: 139
loc:  {...}
 start:  {...}
 line: 8
column: 1
 }
end:  {...}
 line: 8
column: 26
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 114
end: 139
loc:  {...}
 start:  {...}
 line: 8
column: 1
 }
end:  {...}
 line: 8
column: 26
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 114
end: 125
loc:  {...}
 start:  {...}
 line: 8
column: 1
 }
end:  {...}
 line: 8
column: 12
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 114
end: 121
loc:  {...}
 start:  {...}
 line: 8
column: 1
 }
end:  {...}
 line: 8
column: 8
 }
 }
name: "console"
 }
property: Identifier {...}
 type: "Identifier"
start: 122
end: 125
loc:  {...}
 start:  {...}
 line: 8
column: 9
 }
end:  {...}
 line: 8
column: 12
 }
 }
name: "log"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 126
end: 138
loc:  {...}
 start:  {...}
 line: 8
column: 13
 }
end:  {...}
 line: 8
column: 25
 }
 }
value: "2. started"
raw: "'2. started'"
 }
 ]
optional: false
 }
 }
 ExpressionStatement {...}
 type: "ExpressionStatement"
start: 143
end: 192
loc:  {...}
 start:  {...}
 line: 10
column: 1
 }
end:  {...}
 line: 10
column: 50
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 143
end: 192
loc:  {...}
 start:  {...}
 line: 10
column: 1
 }
end:  {...}
 line: 10
column: 50
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 143
end: 159
loc:  {...}
 start:  {...}
 line: 10
column: 1
 }
end:  {...}
 line: 10
column: 17
 }
 }
object: CallExpression {...}
 type: "CallExpression"
start: 143
end: 154
loc:  {...}
 start:  {...}
 line: 10
column: 1
 }
end:  {...}
 line: 10
column: 12
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 143
end: 152
loc:  {...}
 start:  {...}
 line: 10
column: 1
 }
end:  {...}
 line: 10
column: 10
 }
 }
name: "fetchData"
 }
arguments: []
optional: false
 }
property: Identifier {...}
 type: "Identifier"
start: 155
end: 159
loc:  {...}
 start:  {...}
 line: 10
column: 13
 }
end:  {...}
 line: 10
column: 17
 }
 }
name: "then"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 160
end: 191
loc:  {...}
 start:  {...}
 line: 10
column: 18
 }
end:  {...}
 line: 10
column: 49
 }
 }
id: null
expression: true
generator: false
async: false
params: []
body: CallExpression {...}
 type: "CallExpression"
start: 166
end: 191
loc:  {...}
 start:  {...}
 line: 10
column: 24
 }
end:  {...}
 line: 10
column: 49
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 166
end: 177
loc:  {...}
 start:  {...}
 line: 10
column: 24
 }
end:  {...}
 line: 10
column: 35
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 166
end: 173
loc:  {...}
 start:  {...}
 line: 10
column: 24
 }
end:  {...}
 line: 10
column: 31
 }
 }
name: "console"
 }
property: Identifier {...}
 type: "Identifier"
start: 174
end: 177
loc:  {...}
 start:  {...}
 line: 10
column: 32
 }
end:  {...}
 line: 10
column: 35
 }
 }
name: "log"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 178
end: 190
loc:  {...}
 start:  {...}
 line: 10
column: 36
 }
end:  {...}
 line: 10
column: 48
 }
 }
value: "3. fetched"
raw: "'3. fetched'"
 }
 ]
optional: false
 }
 }
 ]
optional: false
 }
 }
 LabeledStatement {...}
 type: "LabeledStatement"
start: 196
end: 225
loc:  {...}
 start:  {...}
 line: 12
column: 1
 }
end:  {...}
 line: 12
column: 30
 }
 }
body: ExpressionStatement {...}
 type: "ExpressionStatement"
start: 199
end: 225
loc:  {...}
 start:  {...}
 line: 12
column: 4
 }
end:  {...}
 line: 12
column: 30
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 199
end: 225
loc:  {...}
 start:  {...}
 line: 12
column: 4
 }
end:  {...}
 line: 12
column: 30
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 199
end: 210
loc:  {...}
 start:  {...}
 line: 12
column: 4
 }
end:  {...}
 line: 12
column: 15
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 199
end: 206
loc:  {...}
 start:  {...}
 line: 12
column: 4
 }
end:  {...}
 line: 12
column: 11
 }
 }
name: "console"
 }
property: Identifier {...}
 type: "Identifier"
start: 207
end: 210
loc:  {...}
 start:  {...}
 line: 12
column: 12
 }
end:  {...}
 line: 12
column: 15
 }
 }
name: "log"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 211
end: 224
loc:  {...}
 start:  {...}
 line: 12
column: 16
 }
end:  {...}
 line: 12
column: 29
 }
 }
value: "4. reactive"
raw: "'4. reactive'"
 }
 ]
optional: false
 }
 }
label: Identifier {...}
 type: "Identifier"
start: 196
end: 197
loc:  {...}
 start:  {...}
 line: 12
column: 1
 }
end:  {...}
 line: 12
column: 2
 }
 }
name: "$"
 }
 }
 ExpressionStatement {...}
 type: "ExpressionStatement"
start: 229
end: 256
loc:  {...}
 start:  {...}
 line: 14
column: 1
 }
end:  {...}
 line: 14
column: 28
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 229
end: 256
loc:  {...}
 start:  {...}
 line: 14
column: 1
 }
end:  {...}
 line: 14
column: 28
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 229
end: 240
loc:  {...}
 start:  {...}
 line: 14
column: 1
 }
end:  {...}
 line: 14
column: 12
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 229
end: 236
loc:  {...}
 start:  {...}
 line: 14
column: 1
 }
end:  {...}
 line: 14
column: 8
 }
 }
name: "console"
 }
property: Identifier {...}
 type: "Identifier"
start: 237
end: 240
loc:  {...}
 start:  {...}
 line: 14
column: 9
 }
end:  {...}
 line: 14
column: 12
 }
 }
name: "log"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 241
end: 255
loc:  {...}
 start:  {...}
 line: 14
column: 13
 }
end:  {...}
 line: 14
column: 27
 }
 }
value: "5. continued"
raw: "'5. continued'"
 }
 ]
optional: false
 }
 }
 ExpressionStatement {...}
 type: "ExpressionStatement"
start: 260
end: 307
loc:  {...}
 start:  {...}
 line: 16
column: 1
 }
end:  {...}
 line: 18
column: 3
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 260
end: 307
loc:  {...}
 start:  {...}
 line: 16
column: 1
 }
end:  {...}
 line: 18
column: 3
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 260
end: 267
loc:  {...}
 start:  {...}
 line: 16
column: 1
 }
end:  {...}
 line: 16
column: 8
 }
 }
name: "onMount"
 }
arguments: [...] (1)
  ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 268
end: 306
loc:  {...}
 start:  {...}
 line: 16
column: 9
 }
end:  {...}
 line: 18
column: 2
 }
 }
id: null
expression: false
generator: false
async: false
params: []
body: BlockStatement {...}
 type: "BlockStatement"
start: 274
end: 306
loc:  {...}
 start:  {...}
 line: 16
column: 15
 }
end:  {...}
 line: 18
column: 2
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 278
end: 303
loc:  {...}
 start:  {...}
 line: 17
column: 2
 }
end:  {...}
 line: 17
column: 27
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 278
end: 303
loc:  {...}
 start:  {...}
 line: 17
column: 2
 }
end:  {...}
 line: 17
column: 27
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 278
end: 289
loc:  {...}
 start:  {...}
 line: 17
column: 2
 }
end:  {...}
 line: 17
column: 13
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 278
end: 285
loc:  {...}
 start:  {...}
 line: 17
column: 2
 }
end:  {...}
 line: 17
column: 9
 }
 }
name: "console"
 }
property: Identifier {...}
 type: "Identifier"
start: 286
end: 289
loc:  {...}
 start:  {...}
 line: 17
column: 10
 }
end:  {...}
 line: 17
column: 13
 }
 }
name: "log"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 290
end: 302
loc:  {...}
 start:  {...}
 line: 17
column: 14
 }
end:  {...}
 line: 17
column: 26
 }
 }
value: "6. onMount"
raw: "'6. onMount'"
 }
 ]
optional: false
 }
 }
 ]
 }
 }
 ]
optional: false
 }
 }
 ExpressionStatement {...}
 type: "ExpressionStatement"
start: 311
end: 340
loc:  {...}
 start:  {...}
 line: 20
column: 1
 }
end:  {...}
 line: 20
column: 30
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 311
end: 340
loc:  {...}
 start:  {...}
 line: 20
column: 1
 }
end:  {...}
 line: 20
column: 30
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 311
end: 322
loc:  {...}
 start:  {...}
 line: 20
column: 1
 }
end:  {...}
 line: 20
column: 12
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 311
end: 318
loc:  {...}
 start:  {...}
 line: 20
column: 1
 }
end:  {...}
 line: 20
column: 8
 }
 }
name: "console"
 }
property: Identifier {...}
 type: "Identifier"
start: 319
end: 322
loc:  {...}
 start:  {...}
 line: 20
column: 9
 }
end:  {...}
 line: 20
column: 12
 }
 }
name: "log"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 323
end: 339
loc:  {...}
 start:  {...}
 line: 20
column: 13
 }
end:  {...}
 line: 20
column: 29
 }
 }
value: "7. after mount"
raw: "'7. after mount'"
 }
 ]
optional: false
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

The AST is not public API and may change at any point in time

modern