Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
Switch.svelte
api.js
store.js
runes
Runes are available from Svelte 5 onwards, and this playground is using Svelte 3.29.5.
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
›
⌄
⌄
⌄
⌄
⌄
<script>
import { onMount } from 'svelte';
import { slide } from 'svelte/transition';
import Switch from './Switch.svelte';
import { mergeRequests, isMergeRequestsLoading, populateMergeRequests, showAllMergeRequests } from './store.js';
onMount(() => {
populateMergeRequests();
});
$: console.log($mergeRequests);
</script>
<div id="app">
<h1>Open merge requests</h1>
<Switch />
{#if $isMergeRequestsLoading}
<div class="spinner" />
{:else}
{@debug $mergeRequests}
{#each $mergeRequests as mergeRequest}
<p transition:slide class="name">{mergeRequest}</p>
{/each}
{/if}
</div>
Error compiling component
WebAssembly.instantiateStreaming(): value type opcode @+13
999
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
›
/* App.svelte generated by Svelte v3.29.5 */
import {
SvelteComponent,
add_render_callback,
append,
attr,
check_outros,
component_subscribe,
create_bidirectional_transition,
create_component,
destroy_component,
destroy_each,
detach,
element,
empty,
group_outros,
init,
insert,
mount_component,
noop,
safe_not_equal,
set_data,
space,
text,
transition_in,
transition_out
} from "svelte/internal";
import { onMount } from "svelte";
import { slide } from "svelte/transition";
import Switch from "./Switch.svelte";
import {
mergeRequests,
isMergeRequestsLoading,
populateMergeRequests,
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
{
html: Fragment {...}
- start: 339
- end: 620
- type: "Fragment"
children: [...] (2)
Text {...}
- start: 337
- end: 339
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} Element {...}
- start: 339
- end: 620
- type: "Element"
- name: "div"
attributes: [...] (1)
Attribute {...}
- start: 344
- end: 352
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 348
- end: 351
- type: "Text"
- raw: "app"
- data: "app"
}
]
}
]children: [...] (7)
Text {...}
- start: 353
- end: 356
- type: "Text"
- raw: "\n "
- data: "\n "
} Element {...}
- start: 356
- end: 384
- type: "Element"
- name: "h1"
- attributes: []
children: [...] (1)
Text {...}
- start: 360
- end: 379
- type: "Text"
- raw: "Open merge requests"
- data: "Open merge requests"
}
]
} Text {...}
- start: 384
- end: 387
- type: "Text"
- raw: "\n "
- data: "\n "
} InlineComponent {...}
- start: 387
- end: 397
- type: "InlineComponent"
- name: "Switch"
- attributes: []
- children: []
} Text {...}
- start: 397
- end: 400
- type: "Text"
- raw: "\n "
- data: "\n "
} IfBlock {...}
- start: 400
- end: 613
- type: "IfBlock"
expression: Identifier {...}
- type: "Identifier"
- start: 405
- end: 428
loc: {...}
start: {...}
- line: 16
- column: 7
}end: {...}
- line: 16
- column: 30
}
}- name: "$isMergeRequestsLoading"
}children: [...] (1)
Element {...}
- start: 434
- end: 457
- type: "Element"
- name: "div"
attributes: [...] (1)
Attribute {...}
- start: 439
- end: 454
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 446
- end: 453
- type: "Text"
- raw: "spinner"
- data: "spinner"
}
]
}
]- children: []
}
]else: ElseBlock {...}
- start: 467
- end: 608
- type: "ElseBlock"
children: [...] (3)
DebugTag {...}
- start: 471
- end: 494
- type: "DebugTag"
identifiers: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 479
- end: 493
loc: {...}
start: {...}
- line: 19
- column: 11
}end: {...}
- line: 19
- column: 25
}
}- name: "$mergeRequests"
}
]
} Text {...}
- start: 494
- end: 499
- type: "Text"
- raw: "\n "
- data: "\n "
} EachBlock {...}
- start: 499
- end: 605
- type: "EachBlock"
expression: Identifier {...}
- type: "Identifier"
- start: 506
- end: 520
loc: {...}
start: {...}
- line: 20
- column: 11
}end: {...}
- line: 20
- column: 25
}
}- name: "$mergeRequests"
}children: [...] (1)
Element {...}
- start: 542
- end: 593
- type: "Element"
- name: "p"
attributes: [...] (2)
Transition {...}
- start: 545
- end: 561
- type: "Transition"
- name: "slide"
- modifiers: []
- expression: null
- intro: true
- outro: true
} Attribute {...}
- start: 562
- end: 574
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 569
- end: 573
- type: "Text"
- raw: "name"
- data: "name"
}
]
}
]children: [...] (1)
MustacheTag {...}
- start: 575
- end: 589
- type: "MustacheTag"
expression: Identifier {...}
- type: "Identifier"
- start: 576
- end: 588
loc: {...}
start: {...}
- line: 21
- column: 38
}end: {...}
- line: 21
- column: 50
}
}- name: "mergeRequest"
}
}
]
}
]context: Identifier {...}
- type: "Identifier"
- name: "mergeRequest"
- start: 524
- end: 536
}
}
]
}
} Text {...}
- start: 613
- end: 614
- type: "Text"
- raw: "\n"
- data: "\n"
}
]
}
]
}- css: undefined
instance: Script {...}
- type: "Script"
- start: 0
- end: 337
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 328
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 11
- column: 0
}
}body: [...] (6)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 43
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 34
}
}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'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 45
- end: 87
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 43
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 54
- end: 59
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 15
}
}imported: Identifier {...}
- type: "Identifier"
- start: 54
- end: 59
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 15
}
}- name: "slide"
}local: Identifier {...}
- type: "Identifier"
- start: 54
- end: 59
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 15
}
}- name: "slide"
}
}
]source: Literal {...}
- type: "Literal"
- start: 67
- end: 86
loc: {...}
start: {...}
- line: 3
- column: 23
}end: {...}
- line: 3
- column: 42
}
}- value: "svelte/transition"
- raw: "'svelte/transition'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 89
- end: 126
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 38
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 96
- end: 102
loc: {...}
start: {...}
- line: 4
- column: 8
}end: {...}
- line: 4
- column: 14
}
}local: Identifier {...}
- type: "Identifier"
- start: 96
- end: 102
loc: {...}
start: {...}
- line: 4
- column: 8
}end: {...}
- line: 4
- column: 14
}
}- name: "Switch"
}
}
]source: Literal {...}
- type: "Literal"
- start: 108
- end: 125
loc: {...}
start: {...}
- line: 4
- column: 20
}end: {...}
- line: 4
- column: 37
}
}- value: "./Switch.svelte"
- raw: "'./Switch.svelte'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 128
- end: 240
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 113
}
}specifiers: [...] (4)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 137
- end: 150
loc: {...}
start: {...}
- line: 5
- column: 10
}end: {...}
- line: 5
- column: 23
}
}imported: Identifier {...}
- type: "Identifier"
- start: 137
- end: 150
loc: {...}
start: {...}
- line: 5
- column: 10
}end: {...}
- line: 5
- column: 23
}
}- name: "mergeRequests"
}local: Identifier {...}
- type: "Identifier"
- start: 137
- end: 150
loc: {...}
start: {...}
- line: 5
- column: 10
}end: {...}
- line: 5
- column: 23
}
}- name: "mergeRequests"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 152
- end: 174
loc: {...}
start: {...}
- line: 5
- column: 25
}end: {...}
- line: 5
- column: 47
}
}imported: Identifier {...}
- type: "Identifier"
- start: 152
- end: 174
loc: {...}
start: {...}
- line: 5
- column: 25
}end: {...}
- line: 5
- column: 47
}
}- name: "isMergeRequestsLoading"
}local: Identifier {...}
- type: "Identifier"
- start: 152
- end: 174
loc: {...}
start: {...}
- line: 5
- column: 25
}end: {...}
- line: 5
- column: 47
}
}- name: "isMergeRequestsLoading"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 176
- end: 197
loc: {...}
start: {...}
- line: 5
- column: 49
}end: {...}
- line: 5
- column: 70
}
}imported: Identifier {...}
- type: "Identifier"
- start: 176
- end: 197
loc: {...}
start: {...}
- line: 5
- column: 49
}end: {...}
- line: 5
- column: 70
}
}- name: "populateMergeRequests"
}local: Identifier {...}
- type: "Identifier"
- start: 176
- end: 197
loc: {...}
start: {...}
- line: 5
- column: 49
}end: {...}
- line: 5
- column: 70
}
}- name: "populateMergeRequests"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 199
- end: 219
loc: {...}
start: {...}
- line: 5
- column: 72
}end: {...}
- line: 5
- column: 92
}
}imported: Identifier {...}
- type: "Identifier"
- start: 199
- end: 219
loc: {...}
start: {...}
- line: 5
- column: 72
}end: {...}
- line: 5
- column: 92
}
}- name: "showAllMergeRequests"
}local: Identifier {...}
- type: "Identifier"
- start: 199
- end: 219
loc: {...}
start: {...}
- line: 5
- column: 72
}end: {...}
- line: 5
- column: 92
}
}- name: "showAllMergeRequests"
}
}
]source: Literal {...}
- type: "Literal"
- start: 227
- end: 239
loc: {...}
start: {...}
- line: 5
- column: 100
}end: {...}
- line: 5
- column: 112
}
}- value: "./store.js"
- raw: "'./store.js'"
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 244
- end: 294
loc: {...}
start: {...}
- line: 7
- column: 1
}end: {...}
- line: 9
- column: 5
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 244
- end: 293
loc: {...}
start: {...}
- line: 7
- column: 1
}end: {...}
- line: 9
- column: 4
}
}callee: Identifier {...}
- type: "Identifier"
- start: 244
- end: 251
loc: {...}
start: {...}
- line: 7
- column: 1
}end: {...}
- line: 7
- column: 8
}
}- name: "onMount"
}arguments: [...] (1)
ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 252
- end: 292
loc: {...}
start: {...}
- line: 7
- column: 9
}end: {...}
- line: 9
- column: 3
}
}- id: null
- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 258
- end: 292
loc: {...}
start: {...}
- line: 7
- column: 15
}end: {...}
- line: 9
- column: 3
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 264
- end: 288
loc: {...}
start: {...}
- line: 8
- column: 4
}end: {...}
- line: 8
- column: 28
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 264
- end: 287
loc: {...}
start: {...}
- line: 8
- column: 4
}end: {...}
- line: 8
- column: 27
}
}callee: Identifier {...}
- type: "Identifier"
- start: 264
- end: 285
loc: {...}
start: {...}
- line: 8
- column: 4
}end: {...}
- line: 8
- column: 25
}
}- name: "populateMergeRequests"
}- arguments: []
- optional: false
}
}
]
}
}
]- optional: false
}
} LabeledStatement {...}
- type: "LabeledStatement"
- start: 296
- end: 327
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 10
- column: 32
}
}body: ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 299
- end: 327
loc: {...}
start: {...}
- line: 10
- column: 4
}end: {...}
- line: 10
- column: 32
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 299
- end: 326
loc: {...}
start: {...}
- line: 10
- column: 4
}end: {...}
- line: 10
- column: 31
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 299
- end: 310
loc: {...}
start: {...}
- line: 10
- column: 4
}end: {...}
- line: 10
- column: 15
}
}object: Identifier {...}
- type: "Identifier"
- start: 299
- end: 306
loc: {...}
start: {...}
- line: 10
- column: 4
}end: {...}
- line: 10
- column: 11
}
}- name: "console"
}property: Identifier {...}
- type: "Identifier"
- start: 307
- end: 310
loc: {...}
start: {...}
- line: 10
- column: 12
}end: {...}
- line: 10
- column: 15
}
}- name: "log"
}- computed: false
- optional: false
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 311
- end: 325
loc: {...}
start: {...}
- line: 10
- column: 16
}end: {...}
- line: 10
- column: 30
}
}- name: "$mergeRequests"
}
]- optional: false
}
}label: Identifier {...}
- type: "Identifier"
- start: 296
- end: 297
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 10
- column: 2
}
}- name: "$"
}
}
]- sourceType: "module"
}
}- module: undefined
}
The AST is not public API and may change at any point in time