@svelteschool/svelte-forms • Playground • Svelte

App.svelte

import Form from "@svelteschool/svelte-forms";

let values;

</script>

<input

placeholder="First name"

type="text"

name="firstName" />

<input

placeholder="Last name"

type="text"

name="lastName" />

</fieldset>

</fieldset>

<label>What are your favorite movies?</label>

<ul>

<li>

<label for="m1">Space Jam</label>

</li>

<li>

<label for="m2">Home Alone</label>

</li>

<li>

<label for="m3">Frozen</label>

</li>

<li>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

import Form from "@svelteschool/svelte-forms";

var root_1 = $.template(`<fieldset class="svelte-gkh6p"><input placeholder="First name" type="text" name="firstName"> <input placeholder="Last name" type="text" name="lastName"></fieldset> <fieldset class="svelte-gkh6p"><input placeholder="Enter email" type="email" name="email"> <input placeholder="Phone Number" type="numeric" name="phone"></fieldset> <div class="input"><label class="svelte-gkh6p">What are your favorite movies?</label> <ul class="svelte-gkh6p"><li class="svelte-gkh6p"><input id="m1" type="checkbox" name="movies" value="Space Jam"> <label for="m1" class="svelte-gkh6p">Space Jam</label></li> <li class="svelte-gkh6p"><input id="m2" type="checkbox" name="movies" value="Home Alone"> <label for="m2" class="svelte-gkh6p">Home Alone</label></li> <li class="svelte-gkh6p"><input id="m3" type="checkbox" name="movies" value="Frozen"> <label for="m3" class="svelte-gkh6p">Frozen</label></li> <li class="svelte-gkh6p"><input id="m4" type="checkbox" name="movies" value="Star Wars"> <label for="m4" class="svelte-gkh6p">Star Wars</label></li></ul></div> <label for="topping" class="svelte-gkh6p">Select topping:</label> <select id="topping" name="topping"><option>Cream</option><option>Chocolate</option><option>Maple Syrup</option></select>`, 1);

var root = $.template(`<!> <pre> </pre> <button>Check 'dat two-way binding!</button>`, 1);

export default function App($$anchor) {

let values = $.mutable_state();

var fragment = root();

var node = $.first_child(fragment);

Form(node, {

get values() {

return $.get(values);

set values($$value) {

$.set(values, $$value);

children: ($$anchor, $$slotProps) => {

var fragment_1 = root_1();

var select = $.sibling($.first_child(fragment_1), 8);

var option = $.child(select);

option.value = null == (option.__value = 'Cream') ? '' : 'Cream';

var option_1 = $.sibling(option);

option_1.value = null == (option_1.__value = 'Chocolate') ? '' : 'Chocolate';

var option_2 = $.sibling(option_1);

option_2.value = null == (option_2.__value = 'Maple Syrup') ? '' : 'Maple Syrup';

$.reset(select);

$.append($$anchor, fragment_1);

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

label.svelte-gkh6p {

display: inline;

}

ul.svelte-gkh6p {

list-style: none;

display: flex;

padding: 0;

}

li.svelte-gkh6p {

padding: 0 10px;

}

fieldset.svelte-gkh6p {

padding: 10px 0;

border: none;

}

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 1544
end: 1729
attributes: []
children: [...] (4)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 1553
end: 1558
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 1553
end: 1558
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "label"
start: 1553
end: 1558
 }
 ]
start: 1553
end: 1558
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 1559
end: 1582
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 1563
end: 1578
property: "display"
value: "inline"
 }
 ]
 }
start: 1553
end: 1582
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 1584
end: 1586
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 1584
end: 1586
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "ul"
start: 1584
end: 1586
 }
 ]
start: 1584
end: 1586
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 1587
end: 1642
children: [...] (3)
  Declaration {...}
 type: "Declaration"
start: 1591
end: 1607
property: "list-style"
value: "none"
 }
 Declaration {...}
 type: "Declaration"
start: 1611
end: 1624
property: "display"
value: "flex"
 }
 Declaration {...}
 type: "Declaration"
start: 1628
end: 1638
property: "padding"
value: "0"
 }
 ]
 }
start: 1584
end: 1642
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 1644
end: 1646
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 1644
end: 1646
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "li"
start: 1644
end: 1646
 }
 ]
start: 1644
end: 1646
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 1647
end: 1670
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 1651
end: 1666
property: "padding"
value: "0 10px"
 }
 ]
 }
start: 1644
end: 1670
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 1672
end: 1680
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 1672
end: 1680
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "fieldset"
start: 1672
end: 1680
 }
 ]
start: 1672
end: 1680
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 1681
end: 1720
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 1685
end: 1700
property: "padding"
value: "10px 0"
 }
 Declaration {...}
 type: "Declaration"
start: 1704
end: 1716
property: "border"
value: "none"
 }
 ]
 }
start: 1672
end: 1720
 }
 ]
content:  {...}
 start: 1551
end: 1721
styles: "\n\tlabel {\n\t\tdisplay: inline;\n\t}\n\tul {\n\t\tlist-style: none;\n\t\tdisplay: flex;\n\t\tpadding: 0;\n\t}\n\tli {\n\t\tpadding: 0 10px;\n\t}\n\tfieldset {\n\t\tpadding: 10px 0;\n\t\tborder: none;\n\t}\n"
comment: null
 }
 }
js: []
start: 83
end: 1542
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (7)
  Text {...}
 type: "Text"
start: 81
end: 83
raw: "\n\n"
data: "\n\n"
 }
 Component {...}
 type: "Component"
start: 83
end: 1359
name: "Form"
attributes: [...] (1)
  BindDirective {...}
 start: 89
end: 100
type: "BindDirective"
name: "values"
expression: Identifier {...}
 start: 94
end: 100
type: "Identifier"
name: "values"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (11)
  Text {...}
 type: "Text"
start: 101
end: 104
raw: "\n  "
data: "\n  "
 }
 RegularElement {...}
 type: "RegularElement"
start: 104
end: 298
name: "fieldset"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 114
end: 119
raw: "\n    "
data: "\n    "
 }
 RegularElement {...}
 type: "RegularElement"
start: 119
end: 200
name: "input"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 132
end: 156
name: "placeholder"
value: [...] (1)
  Text {...}
 start: 145
end: 155
type: "Text"
raw: "First name"
data: "First name"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 163
end: 174
name: "type"
value: [...] (1)
  Text {...}
 start: 169
end: 173
type: "Text"
raw: "text"
data: "text"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 181
end: 197
name: "name"
value: [...] (1)
  Text {...}
 start: 187
end: 196
type: "Text"
raw: "firstName"
data: "firstName"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 200
end: 205
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 205
end: 284
name: "input"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 218
end: 241
name: "placeholder"
value: [...] (1)
  Text {...}
 start: 231
end: 240
type: "Text"
raw: "Last name"
data: "Last name"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 248
end: 259
name: "type"
value: [...] (1)
  Text {...}
 start: 254
end: 258
type: "Text"
raw: "text"
data: "text"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 266
end: 281
name: "name"
value: [...] (1)
  Text {...}
 start: 272
end: 280
type: "Text"
raw: "lastName"
data: "lastName"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 284
end: 287
raw: "\n  "
data: "\n  "
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 298
end: 301
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 301
end: 458
name: "fieldset"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 311
end: 316
raw: "\n    "
data: "\n    "
 }
 RegularElement {...}
 type: "RegularElement"
start: 316
end: 377
name: "input"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 323
end: 348
name: "placeholder"
value: [...] (1)
  Text {...}
 start: 336
end: 347
type: "Text"
raw: "Enter email"
data: "Enter email"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 349
end: 361
name: "type"
value: [...] (1)
  Text {...}
 start: 355
end: 360
type: "Text"
raw: "email"
data: "email"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 362
end: 374
name: "name"
value: [...] (1)
  Text {...}
 start: 368
end: 373
type: "Text"
raw: "email"
data: "email"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 377
end: 380
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 380
end: 444
name: "input"
attributes: [...] (3)
  Attribute {...}
 type: "Attribute"
start: 387
end: 413
name: "placeholder"
value: [...] (1)
  Text {...}
 start: 400
end: 412
type: "Text"
raw: "Phone Number"
data: "Phone Number"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 414
end: 428
name: "type"
value: [...] (1)
  Text {...}
 start: 420
end: 427
type: "Text"
raw: "numeric"
data: "numeric"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 429
end: 441
name: "name"
value: [...] (1)
  Text {...}
 start: 435
end: 440
type: "Text"
raw: "phone"
data: "phone"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 444
end: 447
raw: "\n  "
data: "\n  "
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 458
end: 461
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 461
end: 1110
name: "div"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 466
end: 479
name: "class"
value: [...] (1)
  Text {...}
 start: 473
end: 478
type: "Text"
raw: "input"
data: "input"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 480
end: 485
raw: "\n    "
data: "\n    "
 }
 RegularElement {...}
 type: "RegularElement"
start: 485
end: 530
name: "label"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 492
end: 522
raw: "What are your favorite movies?"
data: "What are your favorite movies?"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 530
end: 535
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 535
end: 1101
name: "ul"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (9)
  Text {...}
 type: "Text"
start: 539
end: 546
raw: "\n      "
data: "\n      "
 }
 RegularElement {...}
 type: "RegularElement"
start: 546
end: 678
name: "li"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 550
end: 559
raw: "\n        "
data: "\n        "
 }
 RegularElement {...}
 type: "RegularElement"
start: 559
end: 624
name: "input"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 566
end: 573
name: "id"
value: [...] (1)
  Text {...}
 start: 570
end: 572
type: "Text"
raw: "m1"
data: "m1"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 574
end: 589
name: "type"
value: [...] (1)
  Text {...}
 start: 580
end: 588
type: "Text"
raw: "checkbox"
data: "checkbox"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 590
end: 603
name: "name"
value: [...] (1)
  Text {...}
 start: 596
end: 602
type: "Text"
raw: "movies"
data: "movies"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 604
end: 621
name: "value"
value: [...] (1)
  Text {...}
 start: 611
end: 620
type: "Text"
raw: "Space Jam"
data: "Space Jam"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 624
end: 633
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 633
end: 666
name: "label"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 640
end: 648
name: "for"
value: [...] (1)
  Text {...}
 start: 645
end: 647
type: "Text"
raw: "m1"
data: "m1"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 649
end: 658
raw: "Space Jam"
data: "Space Jam"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 666
end: 673
raw: "\n      "
data: "\n      "
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 678
end: 685
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 685
end: 819
name: "li"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 689
end: 698
raw: "\n        "
data: "\n        "
 }
 RegularElement {...}
 type: "RegularElement"
start: 698
end: 764
name: "input"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 705
end: 712
name: "id"
value: [...] (1)
  Text {...}
 start: 709
end: 711
type: "Text"
raw: "m2"
data: "m2"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 713
end: 728
name: "type"
value: [...] (1)
  Text {...}
 start: 719
end: 727
type: "Text"
raw: "checkbox"
data: "checkbox"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 729
end: 742
name: "name"
value: [...] (1)
  Text {...}
 start: 735
end: 741
type: "Text"
raw: "movies"
data: "movies"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 743
end: 761
name: "value"
value: [...] (1)
  Text {...}
 start: 750
end: 760
type: "Text"
raw: "Home Alone"
data: "Home Alone"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 764
end: 773
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 773
end: 807
name: "label"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 780
end: 788
name: "for"
value: [...] (1)
  Text {...}
 start: 785
end: 787
type: "Text"
raw: "m2"
data: "m2"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 789
end: 799
raw: "Home Alone"
data: "Home Alone"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 807
end: 814
raw: "\n      "
data: "\n      "
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 819
end: 826
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 826
end: 952
name: "li"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 830
end: 839
raw: "\n        "
data: "\n        "
 }
 RegularElement {...}
 type: "RegularElement"
start: 839
end: 901
name: "input"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 846
end: 853
name: "id"
value: [...] (1)
  Text {...}
 start: 850
end: 852
type: "Text"
raw: "m3"
data: "m3"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 854
end: 869
name: "type"
value: [...] (1)
  Text {...}
 start: 860
end: 868
type: "Text"
raw: "checkbox"
data: "checkbox"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 870
end: 883
name: "name"
value: [...] (1)
  Text {...}
 start: 876
end: 882
type: "Text"
raw: "movies"
data: "movies"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 884
end: 898
name: "value"
value: [...] (1)
  Text {...}
 start: 891
end: 897
type: "Text"
raw: "Frozen"
data: "Frozen"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 901
end: 910
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 910
end: 940
name: "label"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 917
end: 925
name: "for"
value: [...] (1)
  Text {...}
 start: 922
end: 924
type: "Text"
raw: "m3"
data: "m3"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 926
end: 932
raw: "Frozen"
data: "Frozen"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 940
end: 947
raw: "\n      "
data: "\n      "
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 952
end: 959
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 959
end: 1091
name: "li"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 963
end: 972
raw: "\n        "
data: "\n        "
 }
 RegularElement {...}
 type: "RegularElement"
start: 972
end: 1037
name: "input"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 979
end: 986
name: "id"
value: [...] (1)
  Text {...}
 start: 983
end: 985
type: "Text"
raw: "m4"
data: "m4"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 987
end: 1002
name: "type"
value: [...] (1)
  Text {...}
 start: 993
end: 1001
type: "Text"
raw: "checkbox"
data: "checkbox"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 1003
end: 1016
name: "name"
value: [...] (1)
  Text {...}
 start: 1009
end: 1015
type: "Text"
raw: "movies"
data: "movies"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 1017
end: 1034
name: "value"
value: [...] (1)
  Text {...}
 start: 1024
end: 1033
type: "Text"
raw: "Star Wars"
data: "Star Wars"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 1037
end: 1046
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1046
end: 1079
name: "label"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 1053
end: 1061
name: "for"
value: [...] (1)
  Text {...}
 start: 1058
end: 1060
type: "Text"
raw: "m4"
data: "m4"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 1062
end: 1071
raw: "Star Wars"
data: "Star Wars"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1079
end: 1086
raw: "\n      "
data: "\n      "
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1091
end: 1096
raw: "\n    "
data: "\n    "
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1101
end: 1104
raw: "\n  "
data: "\n  "
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1110
end: 1113
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1113
end: 1157
name: "label"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 1120
end: 1133
name: "for"
value: [...] (1)
  Text {...}
 start: 1125
end: 1132
type: "Text"
raw: "topping"
data: "topping"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 1134
end: 1149
raw: "Select topping:"
data: "Select topping:"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1157
end: 1160
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1160
end: 1351
name: "select"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 1168
end: 1180
name: "id"
value: [...] (1)
  Text {...}
 start: 1172
end: 1179
type: "Text"
raw: "topping"
data: "topping"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: 1181
end: 1195
name: "name"
value: [...] (1)
  Text {...}
 start: 1187
end: 1194
type: "Text"
raw: "topping"
data: "topping"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (7)
  Text {...}
 type: "Text"
start: 1196
end: 1201
raw: "\n    "
data: "\n    "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1201
end: 1237
name: "option"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 1209
end: 1222
name: "value"
value: [...] (1)
  Text {...}
 start: 1216
end: 1221
type: "Text"
raw: "Cream"
data: "Cream"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 1223
end: 1228
raw: "Cream"
data: "Cream"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1237
end: 1242
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1242
end: 1286
name: "option"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 1250
end: 1267
name: "value"
value: [...] (1)
  Text {...}
 start: 1257
end: 1266
type: "Text"
raw: "Chocolate"
data: "Chocolate"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 1268
end: 1277
raw: "Chocolate"
data: "Chocolate"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1286
end: 1291
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1291
end: 1339
name: "option"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 1299
end: 1318
name: "value"
value: [...] (1)
  Text {...}
 start: 1306
end: 1317
type: "Text"
raw: "Maple Syrup"
data: "Maple Syrup"
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 1319
end: 1330
raw: "Maple Syrup"
data: "Maple Syrup"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1339
end: 1342
raw: "\n  "
data: "\n  "
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1351
end: 1352
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1359
end: 1361
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1361
end: 1410
name: "pre"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  ExpressionTag {...}
 type: "ExpressionTag"
start: 1366
end: 1404
expression: CallExpression {...}
 type: "CallExpression"
start: 1367
end: 1403
loc:  {...}
 start:  {...}
 line: 51
column: 6
 }
end:  {...}
 line: 51
column: 42
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 1367
end: 1381
loc:  {...}
 start:  {...}
 line: 51
column: 6
 }
end:  {...}
 line: 51
column: 20
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 1367
end: 1371
loc:  {...}
 start:  {...}
 line: 51
column: 6
 }
end:  {...}
 line: 51
column: 10
 }
 }
name: "JSON"
 }
property: Identifier {...}
 type: "Identifier"
start: 1372
end: 1381
loc:  {...}
 start:  {...}
 line: 51
column: 11
 }
end:  {...}
 line: 51
column: 20
 }
 }
name: "stringify"
 }
computed: false
optional: false
 }
arguments: [...] (3)
  Identifier {...}
 type: "Identifier"
start: 1382
end: 1388
loc:  {...}
 start:  {...}
 line: 51
column: 21
 }
end:  {...}
 line: 51
column: 27
 }
 }
name: "values"
 }
 Identifier {...}
 type: "Identifier"
start: 1390
end: 1399
loc:  {...}
 start:  {...}
 line: 51
column: 29
 }
end:  {...}
 line: 51
column: 38
 }
 }
name: "undefined"
 }
 Literal {...}
 type: "Literal"
start: 1401
end: 1402
loc:  {...}
 start:  {...}
 line: 51
column: 40
 }
end:  {...}
 line: 51
column: 41
 }
 }
value: 1
raw: "1"
 }
 ]
optional: false
 }
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1410
end: 1412
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 1412
end: 1542
name: "button"
attributes: [...] (1)
  OnDirective {...}
 start: 1420
end: 1502
type: "OnDirective"
name: "click"
expression: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 1430
end: 1501
loc:  {...}
 start:  {...}
 line: 53
column: 18
 }
end:  {...}
 line: 53
column: 89
 }
 }
id: null
expression: true
generator: false
async: false
params: []
body: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 1436
end: 1501
loc:  {...}
 start:  {...}
 line: 53
column: 24
 }
end:  {...}
 line: 53
column: 89
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 1436
end: 1442
loc:  {...}
 start:  {...}
 line: 53
column: 24
 }
end:  {...}
 line: 53
column: 30
 }
 }
name: "values"
 }
right: ObjectExpression {...}
 type: "ObjectExpression"
start: 1445
end: 1501
loc:  {...}
 start:  {...}
 line: 53
column: 33
 }
end:  {...}
 line: 53
column: 89
 }
 }
properties: [...] (2)
  SpreadElement {...}
 type: "SpreadElement"
start: 1447
end: 1456
loc:  {...}
 start:  {...}
 line: 53
column: 35
 }
end:  {...}
 line: 53
column: 44
 }
 }
argument: Identifier {...}
 type: "Identifier"
start: 1450
end: 1456
loc:  {...}
 start:  {...}
 line: 53
column: 38
 }
end:  {...}
 line: 53
column: 44
 }
 }
name: "values"
 }
 }
 Property {...}
 type: "Property"
start: 1458
end: 1499
loc:  {...}
 start:  {...}
 line: 53
column: 46
 }
end:  {...}
 line: 53
column: 87
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 1458
end: 1467
loc:  {...}
 start:  {...}
 line: 53
column: 46
 }
end:  {...}
 line: 53
column: 55
 }
 }
name: "firstName"
 }
value: Literal {...}
 type: "Literal"
start: 1469
end: 1499
loc:  {...}
 start:  {...}
 line: 53
column: 57
 }
end:  {...}
 line: 53
column: 87
 }
 }
value: "WOW! Two-way bound! Amazing!"
raw: "\"WOW! Two-way bound! Amazing!\""
 }
kind: "init"
 }
 ]
 }
 }
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 1503
end: 1533
raw: "Check 'dat two-way binding!"
data: "Check 'dat two-way binding!"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 1542
end: 1544
raw: "\n\n"
data: "\n\n"
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 81
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 72
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 4
column: 0
 }
 }
body: [...] (2)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 11
end: 57
loc:  {...}
 start:  {...}
 line: 2
column: 2
 }
end:  {...}
 line: 2
column: 48
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 18
end: 22
loc:  {...}
 start:  {...}
 line: 2
column: 9
 }
end:  {...}
 line: 2
column: 13
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 18
end: 22
loc:  {...}
 start:  {...}
 line: 2
column: 9
 }
end:  {...}
 line: 2
column: 13
 }
 }
name: "Form"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 28
end: 56
loc:  {...}
 start:  {...}
 line: 2
column: 19
 }
end:  {...}
 line: 2
column: 47
 }
 }
value: "@svelteschool/svelte-forms"
raw: "\"@svelteschool/svelte-forms\""
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 60
end: 71
loc:  {...}
 start:  {...}
 line: 3
column: 2
 }
end:  {...}
 line: 3
column: 13
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 64
end: 70
loc:  {...}
 start:  {...}
 line: 3
column: 6
 }
end:  {...}
 line: 3
column: 12
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 64
end: 70
loc:  {...}
 start:  {...}
 line: 3
column: 6
 }
end:  {...}
 line: 3
column: 12
 }
 }
name: "values"
 }
init: null
 }
 ]
kind: "let"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern