Radio Buttons • Playground • Svelte

App.svelte

Radio.svelte

import Radio from './Radio.svelte'

let radioValue;

const options = [{

value: 'green',

label: 'Bulbasaur',

}, {

value: 'red',

label: 'Charmander',

}, {

value: 'blue',

label: 'Squirtle',

}]

</script>

<p>

{radioValue} is selected

</p>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

import Radio from './Radio.svelte';

var root = $.template(`<!> <p> </p>`, 1);

export default function App($$anchor) {

let radioValue = $.mutable_state();

const options = [

{ value: 'green', label: 'Bulbasaur' },

{ value: 'red', label: 'Charmander' },

{ value: 'blue', label: 'Squirtle' }

];

var fragment = root();

var node = $.first_child(fragment);

Radio(node, {

options,

fontSize: 16,

legend: 'Select a starter Pokemon',

get userSelected() {

return $.get(radioValue);

set userSelected($$value) {

$.set(radioValue, $$value);

$$legacy: true

});

var p = $.sibling(node, 2);

var text = $.child(p);

$.reset(p);

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

/* Add a <style> tag to see the CSS output */

		
			
				
					 Root {
 css: null
js: []
start: 230
end: 362
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (4)
  Text {...}
 type: "Text"
start: 228
end: 230
raw: "\n\n"
data: "\n\n"
 }
 Component {...}
 type: "Component"
start: 230
end: 327
name: "Radio"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 237
end: 246
name: "options"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 238
end: 245
expression: Identifier {...}
 start: 238
end: 245
type: "Identifier"
name: "options"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 247
end: 260
name: "fontSize"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 256
end: 260
expression: Literal {...}
 type: "Literal"
start: 257
end: 259
loc:  {...}
 start:  {...}
 line: 18
column: 27
 }
end:  {...}
 line: 18
column: 29
 }
 }
value: 16
raw: "16"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 261
end: 294
name: "legend"
value: [...] (1)
  Text {...}
 start: 269
end: 293
type: "Text"
raw: "Select a starter Pokemon"
data: "Select a starter Pokemon"
 }
 ]
 }
 BindDirective {...}
 start: 295
end: 325
type: "BindDirective"
name: "userSelected"
expression: Identifier {...}
 type: "Identifier"
start: 314
end: 324
loc:  {...}
 start:  {...}
 line: 18
column: 84
 }
end:  {...}
 line: 18
column: 94
 }
 }
name: "radioValue"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 327
end: 328
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 328
end: 362
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 331
end: 333
raw: "\n\t"
data: "\n\t"
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 333
end: 345
expression: Identifier {...}
 type: "Identifier"
start: 334
end: 344
loc:  {...}
 start:  {...}
 line: 20
column: 2
 }
end:  {...}
 line: 20
column: 12
 }
 }
name: "radioValue"
 }
 }
 Text {...}
 type: "Text"
start: 345
end: 358
raw: " is selected"
data: " is selected"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 228
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 219
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 16
column: 0
 }
 }
body: [...] (3)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 10
end: 44
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 35
 }
 }
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: "Radio"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 28
end: 44
loc:  {...}
 start:  {...}
 line: 2
column: 19
 }
end:  {...}
 line: 2
column: 35
 }
 }
value: "./Radio.svelte"
raw: "'./Radio.svelte'"
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 48
end: 63
loc:  {...}
 start:  {...}
 line: 4
column: 1
 }
end:  {...}
 line: 4
column: 16
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 52
end: 62
loc:  {...}
 start:  {...}
 line: 4
column: 5
 }
end:  {...}
 line: 4
column: 15
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 52
end: 62
loc:  {...}
 start:  {...}
 line: 4
column: 5
 }
end:  {...}
 line: 4
column: 15
 }
 }
name: "radioValue"
 }
init: null
 }
 ]
kind: "let"
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 67
end: 218
loc:  {...}
 start:  {...}
 line: 6
column: 1
 }
end:  {...}
 line: 15
column: 3
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 73
end: 218
loc:  {...}
 start:  {...}
 line: 6
column: 7
 }
end:  {...}
 line: 15
column: 3
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 73
end: 80
loc:  {...}
 start:  {...}
 line: 6
column: 7
 }
end:  {...}
 line: 6
column: 14
 }
 }
name: "options"
 }
init: ArrayExpression {...}
 type: "ArrayExpression"
start: 83
end: 218
loc:  {...}
 start:  {...}
 line: 6
column: 17
 }
end:  {...}
 line: 15
column: 3
 }
 }
elements: [...] (3)
  ObjectExpression {...}
 type: "ObjectExpression"
start: 84
end: 128
loc:  {...}
 start:  {...}
 line: 6
column: 18
 }
end:  {...}
 line: 9
column: 2
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 88
end: 102
loc:  {...}
 start:  {...}
 line: 7
column: 2
 }
end:  {...}
 line: 7
column: 16
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 88
end: 93
loc:  {...}
 start:  {...}
 line: 7
column: 2
 }
end:  {...}
 line: 7
column: 7
 }
 }
name: "value"
 }
value: Literal {...}
 type: "Literal"
start: 95
end: 102
loc:  {...}
 start:  {...}
 line: 7
column: 9
 }
end:  {...}
 line: 7
column: 16
 }
 }
value: "green"
raw: "'green'"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 106
end: 124
loc:  {...}
 start:  {...}
 line: 8
column: 2
 }
end:  {...}
 line: 8
column: 20
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 106
end: 111
loc:  {...}
 start:  {...}
 line: 8
column: 2
 }
end:  {...}
 line: 8
column: 7
 }
 }
name: "label"
 }
value: Literal {...}
 type: "Literal"
start: 113
end: 124
loc:  {...}
 start:  {...}
 line: 8
column: 9
 }
end:  {...}
 line: 8
column: 20
 }
 }
value: "Bulbasaur"
raw: "'Bulbasaur'"
 }
kind: "init"
 }
 ]
 }
 ObjectExpression {...}
 type: "ObjectExpression"
start: 130
end: 173
loc:  {...}
 start:  {...}
 line: 9
column: 4
 }
end:  {...}
 line: 12
column: 2
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 134
end: 146
loc:  {...}
 start:  {...}
 line: 10
column: 2
 }
end:  {...}
 line: 10
column: 14
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 134
end: 139
loc:  {...}
 start:  {...}
 line: 10
column: 2
 }
end:  {...}
 line: 10
column: 7
 }
 }
name: "value"
 }
value: Literal {...}
 type: "Literal"
start: 141
end: 146
loc:  {...}
 start:  {...}
 line: 10
column: 9
 }
end:  {...}
 line: 10
column: 14
 }
 }
value: "red"
raw: "'red'"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 150
end: 169
loc:  {...}
 start:  {...}
 line: 11
column: 2
 }
end:  {...}
 line: 11
column: 21
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 150
end: 155
loc:  {...}
 start:  {...}
 line: 11
column: 2
 }
end:  {...}
 line: 11
column: 7
 }
 }
name: "label"
 }
value: Literal {...}
 type: "Literal"
start: 157
end: 169
loc:  {...}
 start:  {...}
 line: 11
column: 9
 }
end:  {...}
 line: 11
column: 21
 }
 }
value: "Charmander"
raw: "'Charmander'"
 }
kind: "init"
 }
 ]
 }
 ObjectExpression {...}
 type: "ObjectExpression"
start: 175
end: 217
loc:  {...}
 start:  {...}
 line: 12
column: 4
 }
end:  {...}
 line: 15
column: 2
 }
 }
properties: [...] (2)
  Property {...}
 type: "Property"
start: 179
end: 192
loc:  {...}
 start:  {...}
 line: 13
column: 2
 }
end:  {...}
 line: 13
column: 15
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 179
end: 184
loc:  {...}
 start:  {...}
 line: 13
column: 2
 }
end:  {...}
 line: 13
column: 7
 }
 }
name: "value"
 }
value: Literal {...}
 type: "Literal"
start: 186
end: 192
loc:  {...}
 start:  {...}
 line: 13
column: 9
 }
end:  {...}
 line: 13
column: 15
 }
 }
value: "blue"
raw: "'blue'"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 196
end: 213
loc:  {...}
 start:  {...}
 line: 14
column: 2
 }
end:  {...}
 line: 14
column: 19
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 196
end: 201
loc:  {...}
 start:  {...}
 line: 14
column: 2
 }
end:  {...}
 line: 14
column: 7
 }
 }
name: "label"
 }
value: Literal {...}
 type: "Literal"
start: 203
end: 213
loc:  {...}
 start:  {...}
 line: 14
column: 9
 }
end:  {...}
 line: 14
column: 19
 }
 }
value: "Squirtle"
raw: "'Squirtle'"
 }
kind: "init"
 }
 ]
 }
 ]
 }
 }
 ]
kind: "const"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern