props • Playground • Svelte

App.svelte
TodoList.svelte
import TodoList from "./TodoList.svelte";
let todos = [
{ id: 1, name: "Create a Svelte starter app", completed: true },
{ id: 2, name: "Create your first component", completed: true },
{ id: 3, name: "Complete the rest of the tutorial", completed: false }
];
</script>
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
import TodoList from "./TodoList.svelte";
export default function App($$anchor) {
let todos = [
{
id: 1,
completed: true
{
id: 2,
completed: true
{
id: 3,
completed: false
}
];
TodoList($$anchor, { todos });
}
result = svelte.compile(source, {
generate: "client" "server",
dev: false });
/* Add a <style> tag to see the CSS output */
		
			
				
					 Root {
 css: null
js: []
start: 0
end: 345
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (4)
  Comment {...}
 type: "Comment"
start: 0
end: 19
data: " App.svelte "
 }
 Text {...}
 type: "Text"
start: 19
end: 20
raw: "\n"
data: "\n"
 }
 Text {...}
 type: "Text"
start: 317
end: 319
raw: "\n\n"
data: "\n\n"
 }
 Component {...}
 type: "Component"
start: 319
end: 345
name: "TodoList"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 329
end: 342
name: "todos"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 335
end: 342
expression: Identifier {...}
 type: "Identifier"
start: 336
end: 341
loc:  {...}
 start:  {...}
 line: 12
column: 17
 }
end:  {...}
 line: 12
column: 22
 }
 }
name: "todos"
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 20
end: 317
context: "default"
content: Program {...}
 type: "Program"
start: 28
end: 308
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 10
column: 0
 }
 }
body: [...] (2)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 31
end: 72
loc:  {...}
 start:  {...}
 line: 3
column: 2
 }
end:  {...}
 line: 3
column: 43
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 38
end: 46
loc:  {...}
 start:  {...}
 line: 3
column: 9
 }
end:  {...}
 line: 3
column: 17
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 38
end: 46
loc:  {...}
 start:  {...}
 line: 3
column: 9
 }
end:  {...}
 line: 3
column: 17
 }
 }
name: "TodoList"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 52
end: 71
loc:  {...}
 start:  {...}
 line: 3
column: 23
 }
end:  {...}
 line: 3
column: 42
 }
 }
value: "./TodoList.svelte"
raw: "\"./TodoList.svelte\""
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 76
end: 307
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 9
column: 4
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 80
end: 306
loc:  {...}
 start:  {...}
 line: 5
column: 6
 }
end:  {...}
 line: 9
column: 3
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 80
end: 85
loc:  {...}
 start:  {...}
 line: 5
column: 6
 }
end:  {...}
 line: 5
column: 11
 }
 }
name: "todos"
 }
init: ArrayExpression {...}
 type: "ArrayExpression"
start: 88
end: 306
loc:  {...}
 start:  {...}
 line: 5
column: 14
 }
end:  {...}
 line: 9
column: 3
 }
 }
elements: [...] (3)
  ObjectExpression {...}
 type: "ObjectExpression"
start: 94
end: 157
loc:  {...}
 start:  {...}
 line: 6
column: 4
 }
end:  {...}
 line: 6
column: 67
 }
 }
properties: [...] (3)
  Property {...}
 type: "Property"
start: 96
end: 101
loc:  {...}
 start:  {...}
 line: 6
column: 6
 }
end:  {...}
 line: 6
column: 11
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 96
end: 98
loc:  {...}
 start:  {...}
 line: 6
column: 6
 }
end:  {...}
 line: 6
column: 8
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 100
end: 101
loc:  {...}
 start:  {...}
 line: 6
column: 10
 }
end:  {...}
 line: 6
column: 11
 }
 }
value: 1
raw: "1"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 103
end: 138
loc:  {...}
 start:  {...}
 line: 6
column: 13
 }
end:  {...}
 line: 6
column: 48
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 103
end: 107
loc:  {...}
 start:  {...}
 line: 6
column: 13
 }
end:  {...}
 line: 6
column: 17
 }
 }
name: "name"
 }
value: Literal {...}
 type: "Literal"
start: 109
end: 138
loc:  {...}
 start:  {...}
 line: 6
column: 19
 }
end:  {...}
 line: 6
column: 48
 }
 }
value: "Create a Svelte starter app"
raw: "\"Create a Svelte starter app\""
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 140
end: 155
loc:  {...}
 start:  {...}
 line: 6
column: 50
 }
end:  {...}
 line: 6
column: 65
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 140
end: 149
loc:  {...}
 start:  {...}
 line: 6
column: 50
 }
end:  {...}
 line: 6
column: 59
 }
 }
name: "completed"
 }
value: Literal {...}
 type: "Literal"
start: 151
end: 155
loc:  {...}
 start:  {...}
 line: 6
column: 61
 }
end:  {...}
 line: 6
column: 65
 }
 }
value: true
raw: "true"
 }
kind: "init"
 }
 ]
 }
 ObjectExpression {...}
 type: "ObjectExpression"
start: 163
end: 226
loc:  {...}
 start:  {...}
 line: 7
column: 4
 }
end:  {...}
 line: 7
column: 67
 }
 }
properties: [...] (3)
  Property {...}
 type: "Property"
start: 165
end: 170
loc:  {...}
 start:  {...}
 line: 7
column: 6
 }
end:  {...}
 line: 7
column: 11
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 165
end: 167
loc:  {...}
 start:  {...}
 line: 7
column: 6
 }
end:  {...}
 line: 7
column: 8
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 169
end: 170
loc:  {...}
 start:  {...}
 line: 7
column: 10
 }
end:  {...}
 line: 7
column: 11
 }
 }
value: 2
raw: "2"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 172
end: 207
loc:  {...}
 start:  {...}
 line: 7
column: 13
 }
end:  {...}
 line: 7
column: 48
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 172
end: 176
loc:  {...}
 start:  {...}
 line: 7
column: 13
 }
end:  {...}
 line: 7
column: 17
 }
 }
name: "name"
 }
value: Literal {...}
 type: "Literal"
start: 178
end: 207
loc:  {...}
 start:  {...}
 line: 7
column: 19
 }
end:  {...}
 line: 7
column: 48
 }
 }
value: "Create your first component"
raw: "\"Create your first component\""
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 209
end: 224
loc:  {...}
 start:  {...}
 line: 7
column: 50
 }
end:  {...}
 line: 7
column: 65
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 209
end: 218
loc:  {...}
 start:  {...}
 line: 7
column: 50
 }
end:  {...}
 line: 7
column: 59
 }
 }
name: "completed"
 }
value: Literal {...}
 type: "Literal"
start: 220
end: 224
loc:  {...}
 start:  {...}
 line: 7
column: 61
 }
end:  {...}
 line: 7
column: 65
 }
 }
value: true
raw: "true"
 }
kind: "init"
 }
 ]
 }
 ObjectExpression {...}
 type: "ObjectExpression"
start: 232
end: 302
loc:  {...}
 start:  {...}
 line: 8
column: 4
 }
end:  {...}
 line: 8
column: 74
 }
 }
properties: [...] (3)
  Property {...}
 type: "Property"
start: 234
end: 239
loc:  {...}
 start:  {...}
 line: 8
column: 6
 }
end:  {...}
 line: 8
column: 11
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 234
end: 236
loc:  {...}
 start:  {...}
 line: 8
column: 6
 }
end:  {...}
 line: 8
column: 8
 }
 }
name: "id"
 }
value: Literal {...}
 type: "Literal"
start: 238
end: 239
loc:  {...}
 start:  {...}
 line: 8
column: 10
 }
end:  {...}
 line: 8
column: 11
 }
 }
value: 3
raw: "3"
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 241
end: 282
loc:  {...}
 start:  {...}
 line: 8
column: 13
 }
end:  {...}
 line: 8
column: 54
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 241
end: 245
loc:  {...}
 start:  {...}
 line: 8
column: 13
 }
end:  {...}
 line: 8
column: 17
 }
 }
name: "name"
 }
value: Literal {...}
 type: "Literal"
start: 247
end: 282
loc:  {...}
 start:  {...}
 line: 8
column: 19
 }
end:  {...}
 line: 8
column: 54
 }
 }
value: "Complete the rest of the tutorial"
raw: "\"Complete the rest of the tutorial\""
 }
kind: "init"
 }
 Property {...}
 type: "Property"
start: 284
end: 300
loc:  {...}
 start:  {...}
 line: 8
column: 56
 }
end:  {...}
 line: 8
column: 72
 }
 }
method: false
shorthand: false
computed: false
key: Identifier {...}
 type: "Identifier"
start: 284
end: 293
loc:  {...}
 start:  {...}
 line: 8
column: 56
 }
end:  {...}
 line: 8
column: 65
 }
 }
name: "completed"
 }
value: Literal {...}
 type: "Literal"
start: 295
end: 300
loc:  {...}
 start:  {...}
 line: 8
column: 67
 }
end:  {...}
 line: 8
column: 72
 }
 }
value: false
raw: "false"
 }
kind: "init"
 }
 ]
 }
 ]
 }
 }
 ]
kind: "let"
 }
 ]
sourceType: "module"
leadingComments: [...] (1)
  Line {...}
 type: "Line"
value: " App.svelte "
 }
 ]
 }
attributes: []
 }
 }
The AST is not public API and may change at any point in time
modern