(cache)Dear Santa • Playground • Svelte

App.svelte

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>

</form>

<style>

:global(*) {

font-family: 'Comic Sans MS';

}

textarea {

width: 100%;

height: 200px;

resize: none;

margin: 0 0 1em 0;

}

</style>

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: "client" "server",

dev: false });

* {

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

modern