Hello world • Playground • Svelte

App.svelte

let a = "1";

let b = "2";

</script>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

var root = $.template(`<input type="number"> <input type="number"> <p> </p>`, 1);

export default function App($$anchor) {

let a = $.mutable_state("1");

let b = $.mutable_state("2");

var fragment = root();

var input = $.first_child(fragment);

$.remove_input_defaults(input);

var input_1 = $.sibling(input, 2);

$.remove_input_defaults(input_1);

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

var text = $.child(p);

$.reset(p);

$.template_effect(() => $.set_text(text, `${$.get(a) ?? ''} + ${$.get(b) ?? ''} = ${$.get(a) + $.get(b)}`));

$.bind_value(input, () => $.get(a), ($$value) => $.set(a, $$value));

$.bind_value(input_1, () => $.get(b), ($$value) => $.set(b, $$value));

$.append($$anchor, fragment);

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

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

		
			
				
					 Root {
 css: null
js: []
start: 48
end: 149
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (6)
  Text {...}
 type: "Text"
start: 46
end: 48
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 48
end: 84
name: "input"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 55
end: 68
name: "type"
value: [...] (1)
  Text {...}
 start: 61
end: 67
type: "Text"
raw: "number"
data: "number"
 }
 ]
 }
 BindDirective {...}
 start: 69
end: 83
type: "BindDirective"
name: "value"
expression: Identifier {...}
 type: "Identifier"
start: 81
end: 82
loc:  {...}
 start:  {...}
 line: 6
column: 33
 }
end:  {...}
 line: 6
column: 34
 }
 }
name: "a"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 84
end: 85
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 85
end: 121
name: "input"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 92
end: 105
name: "type"
value: [...] (1)
  Text {...}
 start: 98
end: 104
type: "Text"
raw: "number"
data: "number"
 }
 ]
 }
 BindDirective {...}
 start: 106
end: 120
type: "BindDirective"
name: "value"
expression: Identifier {...}
 type: "Identifier"
start: 118
end: 119
loc:  {...}
 start:  {...}
 line: 7
column: 33
 }
end:  {...}
 line: 7
column: 34
 }
 }
name: "b"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 121
end: 123
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 123
end: 149
name: "p"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  ExpressionTag {...}
 type: "ExpressionTag"
start: 126
end: 129
expression: Identifier {...}
 type: "Identifier"
start: 127
end: 128
loc:  {...}
 start:  {...}
 line: 9
column: 4
 }
end:  {...}
 line: 9
column: 5
 }
 }
name: "a"
 }
 }
 Text {...}
 type: "Text"
start: 129
end: 132
raw: " + "
data: " + "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 132
end: 135
expression: Identifier {...}
 type: "Identifier"
start: 133
end: 134
loc:  {...}
 start:  {...}
 line: 9
column: 10
 }
end:  {...}
 line: 9
column: 11
 }
 }
name: "b"
 }
 }
 Text {...}
 type: "Text"
start: 135
end: 138
raw: " = "
data: " = "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 138
end: 145
expression: BinaryExpression {...}
 type: "BinaryExpression"
start: 139
end: 144
loc:  {...}
 start:  {...}
 line: 9
column: 16
 }
end:  {...}
 line: 9
column: 21
 }
 }
left: Identifier {...}
 type: "Identifier"
start: 139
end: 140
loc:  {...}
 start:  {...}
 line: 9
column: 16
 }
end:  {...}
 line: 9
column: 17
 }
 }
name: "a"
 }
operator: "+"
right: Identifier {...}
 type: "Identifier"
start: 143
end: 144
loc:  {...}
 start:  {...}
 line: 9
column: 20
 }
end:  {...}
 line: 9
column: 21
 }
 }
name: "b"
 }
 }
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 46
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 37
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 4
column: 0
 }
 }
body: [...] (2)
  VariableDeclaration {...}
 type: "VariableDeclaration"
start: 10
end: 22
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 13
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 14
end: 21
loc:  {...}
 start:  {...}
 line: 2
column: 5
 }
end:  {...}
 line: 2
column: 12
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 14
end: 15
loc:  {...}
 start:  {...}
 line: 2
column: 5
 }
end:  {...}
 line: 2
column: 6
 }
 }
name: "a"
 }
init: Literal {...}
 type: "Literal"
start: 18
end: 21
loc:  {...}
 start:  {...}
 line: 2
column: 9
 }
end:  {...}
 line: 2
column: 12
 }
 }
value: "1"
raw: "\"1\""
 }
 }
 ]
kind: "let"
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 24
end: 36
loc:  {...}
 start:  {...}
 line: 3
column: 1
 }
end:  {...}
 line: 3
column: 13
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 28
end: 35
loc:  {...}
 start:  {...}
 line: 3
column: 5
 }
end:  {...}
 line: 3
column: 12
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 28
end: 29
loc:  {...}
 start:  {...}
 line: 3
column: 5
 }
end:  {...}
 line: 3
column: 6
 }
 }
name: "b"
 }
init: Literal {...}
 type: "Literal"
start: 32
end: 35
loc:  {...}
 start:  {...}
 line: 3
column: 9
 }
end:  {...}
 line: 3
column: 12
 }
 }
value: "2"
raw: "\"2\""
 }
 }
 ]
kind: "let"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern