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
23
24
25
26
27
28
29
30
31
32
33
›
⌄
⌄
⌄
⌄
⌄
⌄
<script>
let wishlist = [
'DJI PHANTOM 4 RTK',
'Apple Vision Pro',
'iPhone 16 Pro Max with Swarovski Crystals case'
].join('\n');
</script>
<form onsubmit={(e) => {
e.preventDefault();
alert('the elves received your letter');
}}>
<p>Dear Santa,</p>
<p>This Christmas I would like:</p>
<textarea defaultValue="a lump of coal">{wishlist}</textarea>
<input type="reset" value="start over">
<button>send</button>
</form>
<style>
:global(*) {
font-family: 'Comic Sans MS';
}
textarea {
width: 100%;
height: 200px;
resize: none;
margin: 0 0 1em 0;
}
</style>
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
›
⌄
⌄
⌄
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
var root = $.template(`<form><p>Dear Santa,</p> <p>This Christmas I would like:</p> <textarea class="svelte-1ncc6yl"></textarea> <input type="reset" value="start over"> <button>send</button></form>`);
export default function App($$anchor, $$props) {
$.push($$props, false);
let wishlist = [
'DJI PHANTOM 4 RTK',
'Apple Vision Pro',
'iPhone 16 Pro Max with Swarovski Crystals case'
].join('\n');
$.init();
var form = root();
var textarea = $.sibling($.child(form), 4);
$.remove_textarea_child(textarea);
textarea.defaultValue = 'a lump of coal';
$.set_value(textarea, wishlist);
$.next(4);
$.reset(form);
$.event('submit', form, (e) => {
e.preventDefault();
alert('the elves received your letter');
});
$.append($$anchor, form);
$.pop();
}
result = svelte.compile(source, {
generate: ,
});99
1
2
3
4
5
6
7
8
9
10
11
12
›
* {
font-family: 'Comic Sans MS';
}
textarea.svelte-1ncc6yl {
width: 100%;
height: 200px;
resize: none;
margin: 0 0 1em 0;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 437
- end: 588
- attributes: []
children: [...] (2)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 446
- end: 456
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 446
- end: 456
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "global"
args: SelectorList {...}
- type: "SelectorList"
- start: 454
- end: 455
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 454
- end: 455
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "*"
- start: 454
- end: 455
}
]- start: 454
- end: 455
}
]
}
]
}- start: 446
- end: 456
}
]- start: 446
- end: 456
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 457
- end: 493
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 461
- end: 489
- property: "font-family"
- value: "'Comic Sans MS'"
}
]
}- start: 446
- end: 493
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 497
- end: 505
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 497
- end: 505
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "textarea"
- start: 497
- end: 505
}
]- start: 497
- end: 505
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 506
- end: 579
children: [...] (4)
Declaration {...}
- type: "Declaration"
- start: 510
- end: 521
- property: "width"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 525
- end: 538
- property: "height"
- value: "200px"
} Declaration {...}
- type: "Declaration"
- start: 542
- end: 554
- property: "resize"
- value: "none"
} Declaration {...}
- type: "Declaration"
- start: 558
- end: 575
- property: "margin"
- value: "0 0 1em 0"
}
]
}- start: 497
- end: 579
}
]content: {...}
- start: 444
- end: 580
- styles: "\n\t:global(*) {\n\t\tfont-family: 'Comic Sans MS';\n\t}\n\t\n\ttextarea {\n\t\twidth: 100%;\n\t\theight: 200px;\n\t\tresize: none;\n\t\tmargin: 0 0 1em 0;\n\t}\n"
- comment: null
}
}- js: []
- start: 149
- end: 435
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 147
- end: 149
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 149
- end: 435
- name: "form"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 155
- end: 239
- name: "onsubmit"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 164
- end: 239
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 165
- end: 238
loc: {...}
start: {...}
- line: 9
- column: 16
}end: {...}
- line: 12
- column: 1
}
}- id: null
- expression: false
- generator: false
- async: false
params: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 166
- end: 167
loc: {...}
start: {...}
- line: 9
- column: 17
}end: {...}
- line: 9
- column: 18
}
}- name: "e"
}
]body: BlockStatement {...}
- type: "BlockStatement"
- start: 172
- end: 238
loc: {...}
start: {...}
- line: 9
- column: 23
}end: {...}
- line: 12
- column: 1
}
}body: [...] (2)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 175
- end: 194
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 10
- column: 20
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 175
- end: 193
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 10
- column: 19
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 175
- end: 191
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 10
- column: 17
}
}object: Identifier {...}
- type: "Identifier"
- start: 175
- end: 176
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 10
- column: 2
}
}- name: "e"
}property: Identifier {...}
- type: "Identifier"
- start: 177
- end: 191
loc: {...}
start: {...}
- line: 10
- column: 3
}end: {...}
- line: 10
- column: 17
}
}- name: "preventDefault"
}- computed: false
- optional: false
}- arguments: []
- optional: false
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 196
- end: 236
loc: {...}
start: {...}
- line: 11
- column: 1
}end: {...}
- line: 11
- column: 41
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 196
- end: 235
loc: {...}
start: {...}
- line: 11
- column: 1
}end: {...}
- line: 11
- column: 40
}
}callee: Identifier {...}
- type: "Identifier"
- start: 196
- end: 201
loc: {...}
start: {...}
- line: 11
- column: 1
}end: {...}
- line: 11
- column: 6
}
}- name: "alert"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 202
- end: 234
loc: {...}
start: {...}
- line: 11
- column: 7
}end: {...}
- line: 11
- column: 39
}
}- value: "the elves received your letter"
- raw: "'the elves received your letter'"
}
]- optional: false
}
}
]
}
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (11)
Text {...}
- type: "Text"
- start: 240
- end: 242
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 242
- end: 260
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 245
- end: 256
- raw: "Dear Santa,"
- data: "Dear Santa,"
}
]
}
} Text {...}
- type: "Text"
- start: 260
- end: 262
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 262
- end: 297
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 265
- end: 293
- raw: "This Christmas I would like:"
- data: "This Christmas I would like:"
}
]
}
} Text {...}
- type: "Text"
- start: 297
- end: 301
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 301
- end: 362
- name: "textarea"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 311
- end: 340
- name: "defaultValue"
value: [...] (1)
Text {...}
- start: 325
- end: 339
- type: "Text"
- raw: "a lump of coal"
- data: "a lump of coal"
}
]
} Attribute {...}
- type: "Attribute"
- start: 341
- end: 351
- name: "value"
value: [...] (1)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 341
- end: 351
expression: Identifier {...}
- type: "Identifier"
- start: 342
- end: 350
loc: {...}
start: {...}
- line: 16
- column: 42
}end: {...}
- line: 16
- column: 50
}
}- name: "wishlist"
}
}
]
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-1ncc6yl"
- raw: "svelte-1ncc6yl"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 362
- end: 365
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 365
- end: 404
- name: "input"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 372
- end: 384
- name: "type"
value: [...] (1)
Text {...}
- start: 378
- end: 383
- type: "Text"
- raw: "reset"
- data: "reset"
}
]
} Attribute {...}
- type: "Attribute"
- start: 385
- end: 403
- name: "value"
value: [...] (1)
Text {...}
- start: 392
- end: 402
- type: "Text"
- raw: "start over"
- data: "start over"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 404
- end: 406
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 406
- end: 427
- name: "button"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 414
- end: 418
- raw: "send"
- data: "send"
}
]
}
} Text {...}
- type: "Text"
- start: 427
- end: 428
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 435
- end: 437
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 147
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 138
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 7
- column: 0
}
}body: [...] (1)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 137
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 6
- column: 14
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 14
- end: 136
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 6
- column: 13
}
}id: Identifier {...}
- type: "Identifier"
- start: 14
- end: 22
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 13
}
}- name: "wishlist"
}init: CallExpression {...}
- type: "CallExpression"
- start: 25
- end: 136
loc: {...}
start: {...}
- line: 2
- column: 16
}end: {...}
- line: 6
- column: 13
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 25
- end: 130
loc: {...}
start: {...}
- line: 2
- column: 16
}end: {...}
- line: 6
- column: 7
}
}object: ArrayExpression {...}
- type: "ArrayExpression"
- start: 25
- end: 125
loc: {...}
start: {...}
- line: 2
- column: 16
}end: {...}
- line: 6
- column: 2
}
}elements: [...] (3)
Literal {...}
- type: "Literal"
- start: 29
- end: 48
loc: {...}
start: {...}
- line: 3
- column: 2
}end: {...}
- line: 3
- column: 21
}
}- value: "DJI PHANTOM 4 RTK"
- raw: "'DJI PHANTOM 4 RTK'"
} Literal {...}
- type: "Literal"
- start: 52
- end: 70
loc: {...}
start: {...}
- line: 4
- column: 2
}end: {...}
- line: 4
- column: 20
}
}- value: "Apple Vision Pro"
- raw: "'Apple Vision Pro'"
} Literal {...}
- type: "Literal"
- start: 74
- end: 122
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 50
}
}- value: "iPhone 16 Pro Max with Swarovski Crystals case"
- raw: "'iPhone 16 Pro Max with Swarovski Crystals case'"
}
]
}property: Identifier {...}
- type: "Identifier"
- start: 126
- end: 130
loc: {...}
start: {...}
- line: 6
- column: 3
}end: {...}
- line: 6
- column: 7
}
}- name: "join"
}- computed: false
- optional: false
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 131
- end: 135
loc: {...}
start: {...}
- line: 6
- column: 8
}end: {...}
- line: 6
- column: 12
}
}- value: "\n"
- raw: "'\\n'"
}
]- optional: false
}
}
]- kind: "let"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time