Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
Thing.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
30
31
32
33
34
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
import Thing from './Thing.svelte';
let things = $state([
{ id: 1, color: 'darkblue' },
{ id: 2, color: 'indigo' },
{ id: 3, color: 'deeppink' },
{ id: 4, color: 'salmon' },
{ id: 5, color: 'gold' }
]);
function handleClick() {
things = things.slice(1);
}
</script>
<button onclick={handleClick}> Remove first thing </button>
<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em">
<div>
<h2>Keyed</h2>
{#each things as thing (thing.id)}
<Thing current={thing.color} />
{/each}
</div>
<div>
<h2>Unkeyed</h2>
{#each things as thing}
<Thing current={thing.color} />
{/each}
</div>
</div>
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';
import Thing from './Thing.svelte';
function handleClick(_, things) {
$.set(things, $.proxy($.get(things).slice(1)));
}
var root = $.template(`<button>Remove first thing</button> <div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em"><div><h2>Keyed</h2> <!></div> <div><h2>Unkeyed</h2> <!></div></div>`, 1);
export default function App($$anchor) {
let things = $.state($.proxy([
{ id: 1, color: 'darkblue' },
{ id: 2, color: 'indigo' },
{ id: 3, color: 'deeppink' },
{ id: 4, color: 'salmon' },
{ id: 5, color: 'gold' }
]));
var fragment = root();
var button = $.first_child(fragment);
button.__click = [handleClick, things];
var div = $.sibling(button, 2);
var div_1 = $.child(div);
var node = $.sibling($.child(div_1), 2);
$.each(node, 17, () => $.get(things), (thing) => thing.id, ($$anchor, thing) => {
Thing($$anchor, {
get current() {
return $.get(thing).color;
}
});
});
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 295
- end: 657
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (4)
Text {...}
- type: "Text"
- start: 293
- end: 295
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 295
- end: 354
- name: "button"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 303
- end: 324
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 311
- end: 324
expression: Identifier {...}
- type: "Identifier"
- start: 312
- end: 323
loc: {...}
start: {...}
- line: 17
- column: 17
}end: {...}
- line: 17
- column: 28
}
}- name: "handleClick"
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 325
- end: 345
- raw: "Remove first thing"
- data: "Remove first thing"
}
]
}
} Text {...}
- type: "Text"
- start: 354
- end: 356
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 356
- end: 657
- name: "div"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 361
- end: 429
- name: "style"
value: [...] (1)
Text {...}
- start: 368
- end: 428
- type: "Text"
- raw: "display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em"
- data: "display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 430
- end: 432
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 432
- end: 544
- name: "div"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 437
- end: 440
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 440
- end: 454
- name: "h2"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 444
- end: 449
- raw: "Keyed"
- data: "Keyed"
}
]
}
} Text {...}
- type: "Text"
- start: 454
- end: 457
- raw: " "
- data: " "
} EachBlock {...}
- type: "EachBlock"
- start: 457
- end: 536
expression: Identifier {...}
- type: "Identifier"
- start: 464
- end: 470
loc: {...}
start: {...}
- line: 22
- column: 9
}end: {...}
- line: 22
- column: 15
}
}- name: "things"
}body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 491
- end: 495
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} Component {...}
- type: "Component"
- start: 495
- end: 526
- name: "Thing"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 502
- end: 523
- name: "current"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 510
- end: 523
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 511
- end: 522
loc: {...}
start: {...}
- line: 23
- column: 19
}end: {...}
- line: 23
- column: 30
}
}object: Identifier {...}
- type: "Identifier"
- start: 511
- end: 516
loc: {...}
start: {...}
- line: 23
- column: 19
}end: {...}
- line: 23
- column: 24
}
}- name: "thing"
}property: Identifier {...}
- type: "Identifier"
- start: 517
- end: 522
loc: {...}
start: {...}
- line: 23
- column: 25
}end: {...}
- line: 23
- column: 30
}
}- name: "color"
}- computed: false
- optional: false
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 526
- end: 529
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
}context: Identifier {...}
- type: "Identifier"
- name: "thing"
- start: 474
loc: {...}
start: {...}
- line: 22
- column: 19
- character: 474
}end: {...}
- line: 22
- column: 24
- character: 479
}
}- end: 479
- typeAnnotation: undefined
}- index: undefined
key: MemberExpression {...}
- type: "MemberExpression"
- start: 481
- end: 489
loc: {...}
start: {...}
- line: 22
- column: 26
}end: {...}
- line: 22
- column: 34
}
}object: Identifier {...}
- type: "Identifier"
- start: 481
- end: 486
loc: {...}
start: {...}
- line: 22
- column: 26
}end: {...}
- line: 22
- column: 31
}
}- name: "thing"
}property: Identifier {...}
- type: "Identifier"
- start: 487
- end: 489
loc: {...}
start: {...}
- line: 22
- column: 32
}end: {...}
- line: 22
- column: 34
}
}- name: "id"
}- computed: false
- optional: false
}
} Text {...}
- type: "Text"
- start: 536
- end: 538
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 544
- end: 547
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 547
- end: 650
- name: "div"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 552
- end: 555
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 555
- end: 571
- name: "h2"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 559
- end: 566
- raw: "Unkeyed"
- data: "Unkeyed"
}
]
}
} Text {...}
- type: "Text"
- start: 571
- end: 574
- raw: " "
- data: " "
} EachBlock {...}
- type: "EachBlock"
- start: 574
- end: 642
expression: Identifier {...}
- type: "Identifier"
- start: 581
- end: 587
loc: {...}
start: {...}
- line: 29
- column: 9
}end: {...}
- line: 29
- column: 15
}
}- name: "things"
}body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 597
- end: 601
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} Component {...}
- type: "Component"
- start: 601
- end: 632
- name: "Thing"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 608
- end: 629
- name: "current"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 616
- end: 629
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 617
- end: 628
loc: {...}
start: {...}
- line: 30
- column: 19
}end: {...}
- line: 30
- column: 30
}
}object: Identifier {...}
- type: "Identifier"
- start: 617
- end: 622
loc: {...}
start: {...}
- line: 30
- column: 19
}end: {...}
- line: 30
- column: 24
}
}- name: "thing"
}property: Identifier {...}
- type: "Identifier"
- start: 623
- end: 628
loc: {...}
start: {...}
- line: 30
- column: 25
}end: {...}
- line: 30
- column: 30
}
}- name: "color"
}- computed: false
- optional: false
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 632
- end: 635
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
}context: Identifier {...}
- type: "Identifier"
- name: "thing"
- start: 591
loc: {...}
start: {...}
- line: 29
- column: 19
- character: 591
}end: {...}
- line: 29
- column: 24
- character: 596
}
}- end: 596
- typeAnnotation: undefined
}- index: undefined
- key: undefined
} Text {...}
- type: "Text"
- start: 642
- end: 644
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 650
- end: 651
- raw: "\n"
- data: "\n"
}
]
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 293
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 284
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 15
- column: 0
}
}body: [...] (3)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 45
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 36
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 17
- end: 22
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 13
}
}local: Identifier {...}
- type: "Identifier"
- start: 17
- end: 22
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 13
}
}- name: "Thing"
}
}
]source: Literal {...}
- type: "Literal"
- start: 28
- end: 44
loc: {...}
start: {...}
- line: 2
- column: 19
}end: {...}
- line: 2
- column: 35
}
}- value: "./Thing.svelte"
- raw: "'./Thing.svelte'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 48
- end: 225
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 10
- column: 4
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 52
- end: 224
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 10
- column: 3
}
}id: Identifier {...}
- type: "Identifier"
- start: 52
- end: 58
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 11
}
}- name: "things"
}init: CallExpression {...}
- type: "CallExpression"
- start: 61
- end: 224
loc: {...}
start: {...}
- line: 4
- column: 14
}end: {...}
- line: 10
- column: 3
}
}callee: Identifier {...}
- type: "Identifier"
- start: 61
- end: 67
loc: {...}
start: {...}
- line: 4
- column: 14
}end: {...}
- line: 4
- column: 20
}
}- name: "$state"
}arguments: [...] (1)
ArrayExpression {...}
- type: "ArrayExpression"
- start: 68
- end: 223
loc: {...}
start: {...}
- line: 4
- column: 21
}end: {...}
- line: 10
- column: 2
}
}elements: [...] (5)
ObjectExpression {...}
- type: "ObjectExpression"
- start: 72
- end: 100
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 30
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 74
- end: 79
loc: {...}
start: {...}
- line: 5
- column: 4
}end: {...}
- line: 5
- column: 9
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 74
- end: 76
loc: {...}
start: {...}
- line: 5
- column: 4
}end: {...}
- line: 5
- column: 6
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 78
- end: 79
loc: {...}
start: {...}
- line: 5
- column: 8
}end: {...}
- line: 5
- column: 9
}
}- value: 1
- raw: "1"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 81
- end: 98
loc: {...}
start: {...}
- line: 5
- column: 11
}end: {...}
- line: 5
- column: 28
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 81
- end: 86
loc: {...}
start: {...}
- line: 5
- column: 11
}end: {...}
- line: 5
- column: 16
}
}- name: "color"
}value: Literal {...}
- type: "Literal"
- start: 88
- end: 98
loc: {...}
start: {...}
- line: 5
- column: 18
}end: {...}
- line: 5
- column: 28
}
}- value: "darkblue"
- raw: "'darkblue'"
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 104
- end: 130
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 28
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 106
- end: 111
loc: {...}
start: {...}
- line: 6
- column: 4
}end: {...}
- line: 6
- column: 9
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 106
- end: 108
loc: {...}
start: {...}
- line: 6
- column: 4
}end: {...}
- line: 6
- column: 6
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 110
- end: 111
loc: {...}
start: {...}
- line: 6
- column: 8
}end: {...}
- line: 6
- column: 9
}
}- value: 2
- raw: "2"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 113
- end: 128
loc: {...}
start: {...}
- line: 6
- column: 11
}end: {...}
- line: 6
- column: 26
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 113
- end: 118
loc: {...}
start: {...}
- line: 6
- column: 11
}end: {...}
- line: 6
- column: 16
}
}- name: "color"
}value: Literal {...}
- type: "Literal"
- start: 120
- end: 128
loc: {...}
start: {...}
- line: 6
- column: 18
}end: {...}
- line: 6
- column: 26
}
}- value: "indigo"
- raw: "'indigo'"
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 134
- end: 162
loc: {...}
start: {...}
- line: 7
- column: 2
}end: {...}
- line: 7
- column: 30
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 136
- end: 141
loc: {...}
start: {...}
- line: 7
- column: 4
}end: {...}
- line: 7
- column: 9
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 136
- end: 138
loc: {...}
start: {...}
- line: 7
- column: 4
}end: {...}
- line: 7
- column: 6
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 140
- end: 141
loc: {...}
start: {...}
- line: 7
- column: 8
}end: {...}
- line: 7
- column: 9
}
}- value: 3
- raw: "3"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 143
- end: 160
loc: {...}
start: {...}
- line: 7
- column: 11
}end: {...}
- line: 7
- column: 28
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 143
- end: 148
loc: {...}
start: {...}
- line: 7
- column: 11
}end: {...}
- line: 7
- column: 16
}
}- name: "color"
}value: Literal {...}
- type: "Literal"
- start: 150
- end: 160
loc: {...}
start: {...}
- line: 7
- column: 18
}end: {...}
- line: 7
- column: 28
}
}- value: "deeppink"
- raw: "'deeppink'"
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 166
- end: 192
loc: {...}
start: {...}
- line: 8
- column: 2
}end: {...}
- line: 8
- column: 28
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 168
- end: 173
loc: {...}
start: {...}
- line: 8
- column: 4
}end: {...}
- line: 8
- column: 9
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 168
- end: 170
loc: {...}
start: {...}
- line: 8
- column: 4
}end: {...}
- line: 8
- column: 6
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 172
- end: 173
loc: {...}
start: {...}
- line: 8
- column: 8
}end: {...}
- line: 8
- column: 9
}
}- value: 4
- raw: "4"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 175
- end: 190
loc: {...}
start: {...}
- line: 8
- column: 11
}end: {...}
- line: 8
- column: 26
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 175
- end: 180
loc: {...}
start: {...}
- line: 8
- column: 11
}end: {...}
- line: 8
- column: 16
}
}- name: "color"
}value: Literal {...}
- type: "Literal"
- start: 182
- end: 190
loc: {...}
start: {...}
- line: 8
- column: 18
}end: {...}
- line: 8
- column: 26
}
}- value: "salmon"
- raw: "'salmon'"
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 196
- end: 220
loc: {...}
start: {...}
- line: 9
- column: 2
}end: {...}
- line: 9
- column: 26
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 198
- end: 203
loc: {...}
start: {...}
- line: 9
- column: 4
}end: {...}
- line: 9
- column: 9
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 198
- end: 200
loc: {...}
start: {...}
- line: 9
- column: 4
}end: {...}
- line: 9
- column: 6
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 202
- end: 203
loc: {...}
start: {...}
- line: 9
- column: 8
}end: {...}
- line: 9
- column: 9
}
}- value: 5
- raw: "5"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 205
- end: 218
loc: {...}
start: {...}
- line: 9
- column: 11
}end: {...}
- line: 9
- column: 24
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 205
- end: 210
loc: {...}
start: {...}
- line: 9
- column: 11
}end: {...}
- line: 9
- column: 16
}
}- name: "color"
}value: Literal {...}
- type: "Literal"
- start: 212
- end: 218
loc: {...}
start: {...}
- line: 9
- column: 18
}end: {...}
- line: 9
- column: 24
}
}- value: "gold"
- raw: "'gold'"
}- kind: "init"
}
]
}
]
}
]- optional: false
}
}
]- kind: "let"
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 228
- end: 283
loc: {...}
start: {...}
- line: 12
- column: 1
}end: {...}
- line: 14
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 237
- end: 248
loc: {...}
start: {...}
- line: 12
- column: 10
}end: {...}
- line: 12
- column: 21
}
}- name: "handleClick"
}- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 251
- end: 283
loc: {...}
start: {...}
- line: 12
- column: 24
}end: {...}
- line: 14
- column: 2
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 255
- end: 280
loc: {...}
start: {...}
- line: 13
- column: 2
}end: {...}
- line: 13
- column: 27
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 255
- end: 279
loc: {...}
start: {...}
- line: 13
- column: 2
}end: {...}
- line: 13
- column: 26
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 255
- end: 261
loc: {...}
start: {...}
- line: 13
- column: 2
}end: {...}
- line: 13
- column: 8
}
}- name: "things"
}right: CallExpression {...}
- type: "CallExpression"
- start: 264
- end: 279
loc: {...}
start: {...}
- line: 13
- column: 11
}end: {...}
- line: 13
- column: 26
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 264
- end: 276
loc: {...}
start: {...}
- line: 13
- column: 11
}end: {...}
- line: 13
- column: 23
}
}object: Identifier {...}
- type: "Identifier"
- start: 264
- end: 270
loc: {...}
start: {...}
- line: 13
- column: 11
}end: {...}
- line: 13
- column: 17
}
}- name: "things"
}property: Identifier {...}
- type: "Identifier"
- start: 271
- end: 276
loc: {...}
start: {...}
- line: 13
- column: 18
}end: {...}
- line: 13
- column: 23
}
}- name: "slice"
}- computed: false
- optional: false
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 277
- end: 278
loc: {...}
start: {...}
- line: 13
- column: 24
}end: {...}
- line: 13
- column: 25
}
}- value: 1
- raw: "1"
}
]- optional: false
}
}
}
]
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time