Hello world • Playground • Svelte

App.svelte

let name = 'world';

</script>

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

<style>

h1 {

color: #0000FF

}

</style>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

var root = $.template(`<h1 class="svelte-rbuihw"></h1>`);

export default function App($$anchor) {

let name = 'world';

var h1 = root();

h1.textContent = `Hello ${name ?? ''}!`;

$.append($$anchor, h1);

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

h1.svelte-rbuihw {

color: #0000FF

}

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 65
end: 107
attributes: []
children: [...] (1)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 74
end: 76
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 74
end: 76
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "h1"
start: 74
end: 76
 }
 ]
start: 74
end: 76
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 77
end: 98
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 81
end: 97
property: "color"
value: "#0000FF"
 }
 ]
 }
start: 74
end: 98
 }
 ]
content:  {...}
 start: 72
end: 99
styles: "\n\th1 {\n\t\tcolor: #0000FF\n\t}\n"
comment: null
 }
 }
js: []
start: 41
end: 63
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 39
end: 41
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 41
end: 63
name: "h1"
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: [...] (3)
  Text {...}
 type: "Text"
start: 45
end: 51
raw: "Hello "
data: "Hello "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 51
end: 57
expression: Identifier {...}
 type: "Identifier"
start: 52
end: 56
loc:  {...}
 start:  {...}
 line: 5
column: 11
 }
end:  {...}
 line: 5
column: 15
 }
 }
name: "name"
 }
 }
 Text {...}
 type: "Text"
start: 57
end: 58
raw: "!"
data: "!"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 63
end: 65
raw: "\n\n"
data: "\n\n"
 }
 ]
 }
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