Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
BlueThing.svelte
GreenThing.svelte
RedThing.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
›
⌄
⌄
⌄
⌄
<script>
import RedThing from './RedThing.svelte';
import GreenThing from './GreenThing.svelte';
import BlueThing from './BlueThing.svelte';
const options = [
{ color: 'red', component: RedThing },
{ color: 'green', component: GreenThing },
{ color: 'blue', component: BlueThing }
];
let selected = $state(options[0]);
</script>
<select bind:value={selected}>
{#each options as option}
<option value={option}>{option.color}</option>
{/each}
</select>
<selected.component />
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 RedThing from './RedThing.svelte';
import GreenThing from './GreenThing.svelte';
import BlueThing from './BlueThing.svelte';
var root_1 = $.template(`<option> </option>`);
var root = $.template(`<select></select> <!>`, 1);
export default function App($$anchor) {
const options = [
{ color: 'red', component: RedThing },
{ color: 'green', component: GreenThing },
{ color: 'blue', component: BlueThing }
];
let selected = $.state($.proxy(options[0]));
var fragment = root();
var select = $.first_child(fragment);
$.each(select, 21, () => options, $.index, ($$anchor, option) => {
var option_1 = root_1();
var option_1_value = {};
var text = $.child(option_1, true);
$.reset(option_1);
$.template_effect(() => {
if (option_1_value !== (option_1_value = $.get(option))) {
option_1.value = null == (option_1.__value = $.get(option)) ? '' : $.get(option);
}
$.set_text(text, $.get(option).color);
});
$.append($$anchor, option_1);
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 344
- end: 493
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (4)
Text {...}
- type: "Text"
- start: 342
- end: 344
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 344
- end: 469
- name: "select"
attributes: [...] (1)
BindDirective {...}
- start: 352
- end: 373
- type: "BindDirective"
- name: "value"
expression: Identifier {...}
- type: "Identifier"
- start: 364
- end: 372
loc: {...}
start: {...}
- line: 15
- column: 20
}end: {...}
- line: 15
- column: 28
}
}- name: "selected"
}- modifiers: []
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 374
- end: 376
- raw: "\n\t"
- data: "\n\t"
} EachBlock {...}
- type: "EachBlock"
- start: 376
- end: 459
expression: Identifier {...}
- type: "Identifier"
- start: 383
- end: 390
loc: {...}
start: {...}
- line: 16
- column: 8
}end: {...}
- line: 16
- column: 15
}
}- name: "options"
}body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 401
- end: 404
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 404
- end: 450
- name: "option"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 412
- end: 426
- name: "value"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 418
- end: 426
expression: Identifier {...}
- type: "Identifier"
- start: 419
- end: 425
loc: {...}
start: {...}
- line: 17
- column: 17
}end: {...}
- line: 17
- column: 23
}
}- name: "option"
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 427
- end: 441
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 428
- end: 440
loc: {...}
start: {...}
- line: 17
- column: 26
}end: {...}
- line: 17
- column: 38
}
}object: Identifier {...}
- type: "Identifier"
- start: 428
- end: 434
loc: {...}
start: {...}
- line: 17
- column: 26
}end: {...}
- line: 17
- column: 32
}
}- name: "option"
}property: Identifier {...}
- type: "Identifier"
- start: 435
- end: 440
loc: {...}
start: {...}
- line: 17
- column: 33
}end: {...}
- line: 17
- column: 38
}
}- name: "color"
}- computed: false
- optional: false
}
}
]
}
} Text {...}
- type: "Text"
- start: 450
- end: 452
- raw: "\n\t"
- data: "\n\t"
}
]
}context: Identifier {...}
- type: "Identifier"
- name: "option"
- start: 394
loc: {...}
start: {...}
- line: 16
- column: 19
- character: 394
}end: {...}
- line: 16
- column: 25
- character: 400
}
}- end: 400
- typeAnnotation: undefined
}- index: undefined
- key: undefined
} Text {...}
- type: "Text"
- start: 459
- end: 460
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 469
- end: 471
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 471
- end: 493
- name: "selected.component"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 342
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 333
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 13
- column: 0
}
}body: [...] (5)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 51
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 42
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 17
- end: 25
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 16
}
}local: Identifier {...}
- type: "Identifier"
- start: 17
- end: 25
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 16
}
}- name: "RedThing"
}
}
]source: Literal {...}
- type: "Literal"
- start: 31
- end: 50
loc: {...}
start: {...}
- line: 2
- column: 22
}end: {...}
- line: 2
- column: 41
}
}- value: "./RedThing.svelte"
- raw: "'./RedThing.svelte'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 53
- end: 98
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 46
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 60
- end: 70
loc: {...}
start: {...}
- line: 3
- column: 8
}end: {...}
- line: 3
- column: 18
}
}local: Identifier {...}
- type: "Identifier"
- start: 60
- end: 70
loc: {...}
start: {...}
- line: 3
- column: 8
}end: {...}
- line: 3
- column: 18
}
}- name: "GreenThing"
}
}
]source: Literal {...}
- type: "Literal"
- start: 76
- end: 97
loc: {...}
start: {...}
- line: 3
- column: 24
}end: {...}
- line: 3
- column: 45
}
}- value: "./GreenThing.svelte"
- raw: "'./GreenThing.svelte'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 100
- end: 143
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 44
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 107
- end: 116
loc: {...}
start: {...}
- line: 4
- column: 8
}end: {...}
- line: 4
- column: 17
}
}local: Identifier {...}
- type: "Identifier"
- start: 107
- end: 116
loc: {...}
start: {...}
- line: 4
- column: 8
}end: {...}
- line: 4
- column: 17
}
}- name: "BlueThing"
}
}
]source: Literal {...}
- type: "Literal"
- start: 122
- end: 142
loc: {...}
start: {...}
- line: 4
- column: 23
}end: {...}
- line: 4
- column: 43
}
}- value: "./BlueThing.svelte"
- raw: "'./BlueThing.svelte'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 146
- end: 295
loc: {...}
start: {...}
- line: 6
- column: 1
}end: {...}
- line: 10
- column: 3
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 152
- end: 294
loc: {...}
start: {...}
- line: 6
- column: 7
}end: {...}
- line: 10
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 152
- end: 159
loc: {...}
start: {...}
- line: 6
- column: 7
}end: {...}
- line: 6
- column: 14
}
}- name: "options"
}init: ArrayExpression {...}
- type: "ArrayExpression"
- start: 162
- end: 294
loc: {...}
start: {...}
- line: 6
- column: 17
}end: {...}
- line: 10
- column: 2
}
}elements: [...] (3)
ObjectExpression {...}
- type: "ObjectExpression"
- start: 166
- end: 203
loc: {...}
start: {...}
- line: 7
- column: 2
}end: {...}
- line: 7
- column: 39
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 168
- end: 180
loc: {...}
start: {...}
- line: 7
- column: 4
}end: {...}
- line: 7
- column: 16
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 168
- end: 173
loc: {...}
start: {...}
- line: 7
- column: 4
}end: {...}
- line: 7
- column: 9
}
}- name: "color"
}value: Literal {...}
- type: "Literal"
- start: 175
- end: 180
loc: {...}
start: {...}
- line: 7
- column: 11
}end: {...}
- line: 7
- column: 16
}
}- value: "red"
- raw: "'red'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 182
- end: 201
loc: {...}
start: {...}
- line: 7
- column: 18
}end: {...}
- line: 7
- column: 37
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 182
- end: 191
loc: {...}
start: {...}
- line: 7
- column: 18
}end: {...}
- line: 7
- column: 27
}
}- name: "component"
}value: Identifier {...}
- type: "Identifier"
- start: 193
- end: 201
loc: {...}
start: {...}
- line: 7
- column: 29
}end: {...}
- line: 7
- column: 37
}
}- name: "RedThing"
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 207
- end: 248
loc: {...}
start: {...}
- line: 8
- column: 2
}end: {...}
- line: 8
- column: 43
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 209
- end: 223
loc: {...}
start: {...}
- line: 8
- column: 4
}end: {...}
- line: 8
- column: 18
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 209
- end: 214
loc: {...}
start: {...}
- line: 8
- column: 4
}end: {...}
- line: 8
- column: 9
}
}- name: "color"
}value: Literal {...}
- type: "Literal"
- start: 216
- end: 223
loc: {...}
start: {...}
- line: 8
- column: 11
}end: {...}
- line: 8
- column: 18
}
}- value: "green"
- raw: "'green'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 225
- end: 246
loc: {...}
start: {...}
- line: 8
- column: 20
}end: {...}
- line: 8
- column: 41
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 225
- end: 234
loc: {...}
start: {...}
- line: 8
- column: 20
}end: {...}
- line: 8
- column: 29
}
}- name: "component"
}value: Identifier {...}
- type: "Identifier"
- start: 236
- end: 246
loc: {...}
start: {...}
- line: 8
- column: 31
}end: {...}
- line: 8
- column: 41
}
}- name: "GreenThing"
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 252
- end: 291
loc: {...}
start: {...}
- line: 9
- column: 2
}end: {...}
- line: 9
- column: 41
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 254
- end: 267
loc: {...}
start: {...}
- line: 9
- column: 4
}end: {...}
- line: 9
- column: 17
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 254
- end: 259
loc: {...}
start: {...}
- line: 9
- column: 4
}end: {...}
- line: 9
- column: 9
}
}- name: "color"
}value: Literal {...}
- type: "Literal"
- start: 261
- end: 267
loc: {...}
start: {...}
- line: 9
- column: 11
}end: {...}
- line: 9
- column: 17
}
}- value: "blue"
- raw: "'blue'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 269
- end: 289
loc: {...}
start: {...}
- line: 9
- column: 19
}end: {...}
- line: 9
- column: 39
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 269
- end: 278
loc: {...}
start: {...}
- line: 9
- column: 19
}end: {...}
- line: 9
- column: 28
}
}- name: "component"
}value: Identifier {...}
- type: "Identifier"
- start: 280
- end: 289
loc: {...}
start: {...}
- line: 9
- column: 30
}end: {...}
- line: 9
- column: 39
}
}- name: "BlueThing"
}- kind: "init"
}
]
}
]
}
}
]- kind: "const"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 298
- end: 332
loc: {...}
start: {...}
- line: 12
- column: 1
}end: {...}
- line: 12
- column: 35
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 302
- end: 331
loc: {...}
start: {...}
- line: 12
- column: 5
}end: {...}
- line: 12
- column: 34
}
}id: Identifier {...}
- type: "Identifier"
- start: 302
- end: 310
loc: {...}
start: {...}
- line: 12
- column: 5
}end: {...}
- line: 12
- column: 13
}
}- name: "selected"
}init: CallExpression {...}
- type: "CallExpression"
- start: 313
- end: 331
loc: {...}
start: {...}
- line: 12
- column: 16
}end: {...}
- line: 12
- column: 34
}
}callee: Identifier {...}
- type: "Identifier"
- start: 313
- end: 319
loc: {...}
start: {...}
- line: 12
- column: 16
}end: {...}
- line: 12
- column: 22
}
}- name: "$state"
}arguments: [...] (1)
MemberExpression {...}
- type: "MemberExpression"
- start: 320
- end: 330
loc: {...}
start: {...}
- line: 12
- column: 23
}end: {...}
- line: 12
- column: 33
}
}object: Identifier {...}
- type: "Identifier"
- start: 320
- end: 327
loc: {...}
start: {...}
- line: 12
- column: 23
}end: {...}
- line: 12
- column: 30
}
}- name: "options"
}property: Literal {...}
- type: "Literal"
- start: 328
- end: 329
loc: {...}
start: {...}
- line: 12
- column: 31
}end: {...}
- line: 12
- column: 32
}
}- value: 0
- raw: "0"
}- computed: true
- optional: false
}
]- optional: false
}
}
]- kind: "let"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time