text input • Playground • Svelte

App.svelte

let name = 'world';

</script>

<h1>Hello {name}!</h1>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

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

export default function App($$anchor) {

let name = $.mutable_state('world');

var fragment = root();

var input = $.first_child(fragment);

$.remove_input_defaults(input);

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

var text = $.child(h1);

$.reset(h1);

$.template_effect(() => $.set_text(text, `Hello ${$.get(name) ?? ''}!`));

$.bind_value(input, () => $.get(name), ($$value) => $.set(name, $$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: 41
end: 102
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (4)
  Text {...}
 type: "Text"
start: 39
end: 41
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 41
end: 78
name: "input"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 48
end: 59
name: "type"
value: [...] (1)
  Text {...}
 start: 54
end: 58
type: "Text"
raw: "text"
data: "text"
 }
 ]
 }
 BindDirective {...}
 start: 60
end: 77
type: "BindDirective"
name: "value"
expression: Identifier {...}
 type: "Identifier"
start: 72
end: 76
loc:  {...}
 start:  {...}
 line: 5
column: 31
 }
end:  {...}
 line: 5
column: 35
 }
 }
name: "name"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 78
end: 80
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 80
end: 102
name: "h1"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 84
end: 90
raw: "Hello "
data: "Hello "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 90
end: 96
expression: Identifier {...}
 type: "Identifier"
start: 91
end: 95
loc:  {...}
 start:  {...}
 line: 7
column: 11
 }
end:  {...}
 line: 7
column: 15
 }
 }
name: "name"
 }
 }
 Text {...}
 type: "Text"
start: 96
end: 97
raw: "!"
data: "!"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 39
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 30
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 3
column: 0
 }
 }
body: [...] (1)
  VariableDeclaration {...}
 type: "VariableDeclaration"
start: 10
end: 29
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 20
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 14
end: 28
loc:  {...}
 start:  {...}
 line: 2
column: 5
 }
end:  {...}
 line: 2
column: 19
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 14
end: 18
loc:  {...}
 start:  {...}
 line: 2
column: 5
 }
end:  {...}
 line: 2
column: 9
 }
 }
name: "name"
 }
init: Literal {...}
 type: "Literal"
start: 21
end: 28
loc:  {...}
 start:  {...}
 line: 2
column: 12
 }
end:  {...}
 line: 2
column: 19
 }
 }
value: "world"
raw: "'world'"
 }
 }
 ]
kind: "let"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern