Hello world • Playground • Svelte

App.svelte

let name = 'Joe';

</script>

<style>

span{

color: hsl(12,94%,62%);

}

</style>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

var root = $.template(`<h1>Hey <span class="svelte-1mdkc4p"></span>!</h1>`);

export default function App($$anchor) {

let name = 'Joe';

var h1 = root();

var span = $.sibling($.child(h1));

span.textContent = name;

$.next();

$.reset(h1);

$.append($$anchor, h1);

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

span.svelte-1mdkc4p{

color: hsl(12,94%,62%);

}

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 74
end: 138
attributes: []
children: [...] (1)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 86
end: 90
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 86
end: 90
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "span"
start: 86
end: 90
 }
 ]
start: 86
end: 90
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 90
end: 129
children: [...] (1)
  Declaration {...}
 type: "Declaration"
start: 100
end: 122
property: "color"
value: "hsl(12,94%,62%)"
 }
 ]
 }
start: 86
end: 129
 }
 ]
content:  {...}
 start: 81
end: 130
styles: "\n    span{\n        color: hsl(12,94%,62%);\n    }\n"
comment: null
 }
 }
js: []
start: 39
end: 72
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 37
end: 39
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 39
end: 72
name: "h1"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 43
end: 47
raw: "Hey "
data: "Hey "
 }
 RegularElement {...}
 type: "RegularElement"
start: 47
end: 66
name: "span"
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: [...] (1)
  ExpressionTag {...}
 type: "ExpressionTag"
start: 53
end: 59
expression: Identifier {...}
 type: "Identifier"
start: 54
end: 58
loc:  {...}
 start:  {...}
 line: 5
column: 15
 }
end:  {...}
 line: 5
column: 19
 }
 }
name: "name"
 }
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 66
end: 67
raw: "!"
data: "!"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 72
end: 74
raw: "\n\n"
data: "\n\n"
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 37
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 28
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 3
column: 0
 }
 }
body: [...] (1)
  VariableDeclaration {...}
 type: "VariableDeclaration"
start: 10
end: 27
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 18
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 14
end: 26
loc:  {...}
 start:  {...}
 line: 2
column: 5
 }
end:  {...}
 line: 2
column: 17
 }
 }
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: 26
loc:  {...}
 start:  {...}
 line: 2
column: 12
 }
end:  {...}
 line: 2
column: 17
 }
 }
value: "Joe"
raw: "'Joe'"
 }
 }
 ]
kind: "let"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern