Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
runes
This component is not in runes mode.
To enable runes mode, either start using runes in your code, or add the following to the top of your component:
<svelte:options runes />
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
›
⌄
⌄
⌄
⌄
<script>
const values = [
{ label: 'ten', value: 10 },
{ label: 'twenty', value: 20 },
{ label: 'thirty', value: 30 }
];
let selected = values[1];
</script>
{#each values as value}
<label>
<input
type="radio"
bind:group={selected}
name="amount"
value={value}
> {value.label}
</label>
{/each}
{selected.value}
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 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
var root_1 = $.template(`<label><input type="radio" name="amount"> </label>`);
var root = $.template(`<!> `, 1);
export default function App($$anchor) {
const binding_group = [];
const values = [
{ label: 'ten', value: 10 },
{ label: 'twenty', value: 20 },
{ label: 'thirty', value: 30 }
];
let selected = $.mutable_state(values[1]);
var fragment = root();
var node = $.first_child(fragment);
$.each(node, 1, () => values, $.index, ($$anchor, value) => {
var label = root_1();
var input = $.child(label);
$.remove_input_defaults(input);
var input_value;
var text = $.sibling(input);
$.reset(label);
$.template_effect(() => {
if (input_value !== (input_value = $.get(value))) {
input.value = null == (input.__value = $.get(value)) ? '' : $.get(value);
}
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 169
- end: 339
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (4)
Text {...}
- type: "Text"
- start: 167
- end: 169
- raw: "\n\n"
- data: "\n\n"
} EachBlock {...}
- type: "EachBlock"
- start: 169
- end: 321
expression: Identifier {...}
- type: "Identifier"
- start: 176
- end: 182
loc: {...}
start: {...}
- line: 11
- column: 7
}end: {...}
- line: 11
- column: 13
}
}- name: "values"
}body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 192
- end: 194
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 194
- end: 313
- name: "label"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 201
- end: 204
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 204
- end: 289
- name: "input"
attributes: [...] (4)
Attribute {...}
- type: "Attribute"
- start: 214
- end: 226
- name: "type"
value: [...] (1)
Text {...}
- start: 220
- end: 225
- type: "Text"
- raw: "radio"
- data: "radio"
}
]
} BindDirective {...}
- start: 230
- end: 251
- type: "BindDirective"
- name: "group"
expression: Identifier {...}
- type: "Identifier"
- start: 242
- end: 250
loc: {...}
start: {...}
- line: 15
- column: 15
}end: {...}
- line: 15
- column: 23
}
}- name: "selected"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 255
- end: 268
- name: "name"
value: [...] (1)
Text {...}
- start: 261
- end: 267
- type: "Text"
- raw: "amount"
- data: "amount"
}
]
} Attribute {...}
- type: "Attribute"
- start: 272
- end: 285
- name: "value"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 278
- end: 285
expression: Identifier {...}
- type: "Identifier"
- start: 279
- end: 284
loc: {...}
start: {...}
- line: 17
- column: 10
}end: {...}
- line: 17
- column: 15
}
}- name: "value"
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 289
- end: 290
- raw: " "
- data: " "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 290
- end: 303
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 291
- end: 302
loc: {...}
start: {...}
- line: 18
- column: 5
}end: {...}
- line: 18
- column: 16
}
}object: Identifier {...}
- type: "Identifier"
- start: 291
- end: 296
loc: {...}
start: {...}
- line: 18
- column: 5
}end: {...}
- line: 18
- column: 10
}
}- name: "value"
}property: Identifier {...}
- type: "Identifier"
- start: 297
- end: 302
loc: {...}
start: {...}
- line: 18
- column: 11
}end: {...}
- line: 18
- column: 16
}
}- name: "label"
}- computed: false
- optional: false
}
} Text {...}
- type: "Text"
- start: 303
- end: 305
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 313
- end: 314
- raw: "\n"
- data: "\n"
}
]
}context: Identifier {...}
- type: "Identifier"
- name: "value"
- start: 186
loc: {...}
start: {...}
- line: 11
- column: 17
- character: 186
}end: {...}
- line: 11
- column: 22
- character: 191
}
}- end: 191
- typeAnnotation: undefined
}- index: undefined
- key: undefined
} Text {...}
- type: "Text"
- start: 321
- end: 323
- raw: " "
- data: " "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 323
- end: 339
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 324
- end: 338
loc: {...}
start: {...}
- line: 22
- column: 1
}end: {...}
- line: 22
- column: 15
}
}object: Identifier {...}
- type: "Identifier"
- start: 324
- end: 332
loc: {...}
start: {...}
- line: 22
- column: 1
}end: {...}
- line: 22
- column: 9
}
}- name: "selected"
}property: Identifier {...}
- type: "Identifier"
- start: 333
- end: 338
loc: {...}
start: {...}
- line: 22
- column: 10
}end: {...}
- line: 22
- column: 15
}
}- name: "value"
}- computed: false
- optional: false
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 167
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 158
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 9
- column: 0
}
}body: [...] (2)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 128
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 6
- column: 3
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 16
- end: 127
loc: {...}
start: {...}
- line: 2
- column: 7
}end: {...}
- line: 6
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 16
- end: 22
loc: {...}
start: {...}
- line: 2
- column: 7
}end: {...}
- line: 2
- column: 13
}
}- name: "values"
}init: ArrayExpression {...}
- type: "ArrayExpression"
- start: 25
- end: 127
loc: {...}
start: {...}
- line: 2
- column: 16
}end: {...}
- line: 6
- column: 2
}
}elements: [...] (3)
ObjectExpression {...}
- type: "ObjectExpression"
- start: 29
- end: 56
loc: {...}
start: {...}
- line: 3
- column: 2
}end: {...}
- line: 3
- column: 29
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 31
- end: 43
loc: {...}
start: {...}
- line: 3
- column: 4
}end: {...}
- line: 3
- column: 16
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 31
- end: 36
loc: {...}
start: {...}
- line: 3
- column: 4
}end: {...}
- line: 3
- column: 9
}
}- name: "label"
}value: Literal {...}
- type: "Literal"
- start: 38
- end: 43
loc: {...}
start: {...}
- line: 3
- column: 11
}end: {...}
- line: 3
- column: 16
}
}- value: "ten"
- raw: "'ten'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 45
- end: 54
loc: {...}
start: {...}
- line: 3
- column: 18
}end: {...}
- line: 3
- column: 27
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 45
- end: 50
loc: {...}
start: {...}
- line: 3
- column: 18
}end: {...}
- line: 3
- column: 23
}
}- name: "value"
}value: Literal {...}
- type: "Literal"
- start: 52
- end: 54
loc: {...}
start: {...}
- line: 3
- column: 25
}end: {...}
- line: 3
- column: 27
}
}- value: 10
- raw: "10"
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 60
- end: 90
loc: {...}
start: {...}
- line: 4
- column: 2
}end: {...}
- line: 4
- column: 32
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 62
- end: 77
loc: {...}
start: {...}
- line: 4
- column: 4
}end: {...}
- line: 4
- column: 19
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 62
- end: 67
loc: {...}
start: {...}
- line: 4
- column: 4
}end: {...}
- line: 4
- column: 9
}
}- name: "label"
}value: Literal {...}
- type: "Literal"
- start: 69
- end: 77
loc: {...}
start: {...}
- line: 4
- column: 11
}end: {...}
- line: 4
- column: 19
}
}- value: "twenty"
- raw: "'twenty'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 79
- end: 88
loc: {...}
start: {...}
- line: 4
- column: 21
}end: {...}
- line: 4
- column: 30
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 79
- end: 84
loc: {...}
start: {...}
- line: 4
- column: 21
}end: {...}
- line: 4
- column: 26
}
}- name: "value"
}value: Literal {...}
- type: "Literal"
- start: 86
- end: 88
loc: {...}
start: {...}
- line: 4
- column: 28
}end: {...}
- line: 4
- column: 30
}
}- value: 20
- raw: "20"
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 94
- end: 124
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 32
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 96
- end: 111
loc: {...}
start: {...}
- line: 5
- column: 4
}end: {...}
- line: 5
- column: 19
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 96
- end: 101
loc: {...}
start: {...}
- line: 5
- column: 4
}end: {...}
- line: 5
- column: 9
}
}- name: "label"
}value: Literal {...}
- type: "Literal"
- start: 103
- end: 111
loc: {...}
start: {...}
- line: 5
- column: 11
}end: {...}
- line: 5
- column: 19
}
}- value: "thirty"
- raw: "'thirty'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 113
- end: 122
loc: {...}
start: {...}
- line: 5
- column: 21
}end: {...}
- line: 5
- column: 30
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 113
- end: 118
loc: {...}
start: {...}
- line: 5
- column: 21
}end: {...}
- line: 5
- column: 26
}
}- name: "value"
}value: Literal {...}
- type: "Literal"
- start: 120
- end: 122
loc: {...}
start: {...}
- line: 5
- column: 28
}end: {...}
- line: 5
- column: 30
}
}- value: 30
- raw: "30"
}- kind: "init"
}
]
}
]
}
}
]- kind: "const"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 132
- end: 157
loc: {...}
start: {...}
- line: 8
- column: 1
}end: {...}
- line: 8
- column: 26
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 136
- end: 156
loc: {...}
start: {...}
- line: 8
- column: 5
}end: {...}
- line: 8
- column: 25
}
}id: Identifier {...}
- type: "Identifier"
- start: 136
- end: 144
loc: {...}
start: {...}
- line: 8
- column: 5
}end: {...}
- line: 8
- column: 13
}
}- name: "selected"
}init: MemberExpression {...}
- type: "MemberExpression"
- start: 147
- end: 156
loc: {...}
start: {...}
- line: 8
- column: 16
}end: {...}
- line: 8
- column: 25
}
}object: Identifier {...}
- type: "Identifier"
- start: 147
- end: 153
loc: {...}
start: {...}
- line: 8
- column: 16
}end: {...}
- line: 8
- column: 22
}
}- name: "values"
}property: Literal {...}
- type: "Literal"
- start: 154
- end: 155
loc: {...}
start: {...}
- line: 8
- column: 23
}end: {...}
- line: 8
- column: 24
}
}- value: 1
- raw: "1"
}- computed: true
- optional: false
}
}
]- kind: "let"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time