Hello world • Playground • Svelte

App.svelte

AlertModal.svelte

import { onMount } from 'svelte';

import AlertModal from './AlertModal.svelte';

let newMessageTitle = 'You received a new message!';

onMount(() => {

setTimeout(() => {

newMessageTitle = undefined;

}, 2000)

})

</script>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

import { onMount } from 'svelte';

import AlertModal from './AlertModal.svelte';

export default function App($$anchor, $$props) {

$.push($$props, false);

let newMessageTitle = $.mutable_state('You received a new message!');

onMount(() => {

setTimeout(

() => {

$.set(newMessageTitle, undefined);

2000

);

});

$.init();

AlertModal($$anchor, {

get title() {

return $.get(newMessageTitle);

}

});

$.pop();

}

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

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

		
			
				
					 Root {
 css: null
js: []
start: 267
end: 305
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 265
end: 267
raw: "\n\n"
data: "\n\n"
 }
 Component {...}
 type: "Component"
start: 267
end: 305
name: "AlertModal"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 279
end: 302
name: "title"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 285
end: 302
expression: Identifier {...}
 type: "Identifier"
start: 286
end: 301
loc:  {...}
 start:  {...}
 line: 14
column: 19
 }
end:  {...}
 line: 14
column: 34
 }
 }
name: "newMessageTitle"
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 265
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 256
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 12
column: 0
 }
 }
body: [...] (4)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 11
end: 44
loc:  {...}
 start:  {...}
 line: 2
column: 2
 }
end:  {...}
 line: 2
column: 35
 }
 }
specifiers: [...] (1)
  ImportSpecifier {...}
 type: "ImportSpecifier"
start: 20
end: 27
loc:  {...}
 start:  {...}
 line: 2
column: 11
 }
end:  {...}
 line: 2
column: 18
 }
 }
imported: Identifier {...}
 type: "Identifier"
start: 20
end: 27
loc:  {...}
 start:  {...}
 line: 2
column: 11
 }
end:  {...}
 line: 2
column: 18
 }
 }
name: "onMount"
 }
local: Identifier {...}
 type: "Identifier"
start: 20
end: 27
loc:  {...}
 start:  {...}
 line: 2
column: 11
 }
end:  {...}
 line: 2
column: 18
 }
 }
name: "onMount"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 35
end: 43
loc:  {...}
 start:  {...}
 line: 2
column: 26
 }
end:  {...}
 line: 2
column: 34
 }
 }
value: "svelte"
raw: "'svelte'"
 }
 }
 ImportDeclaration {...}
 type: "ImportDeclaration"
start: 47
end: 92
loc:  {...}
 start:  {...}
 line: 3
column: 2
 }
end:  {...}
 line: 3
column: 47
 }
 }
specifiers: [...] (1)
  ImportDefaultSpecifier {...}
 type: "ImportDefaultSpecifier"
start: 54
end: 64
loc:  {...}
 start:  {...}
 line: 3
column: 9
 }
end:  {...}
 line: 3
column: 19
 }
 }
local: Identifier {...}
 type: "Identifier"
start: 54
end: 64
loc:  {...}
 start:  {...}
 line: 3
column: 9
 }
end:  {...}
 line: 3
column: 19
 }
 }
name: "AlertModal"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 70
end: 91
loc:  {...}
 start:  {...}
 line: 3
column: 25
 }
end:  {...}
 line: 3
column: 46
 }
 }
value: "./AlertModal.svelte"
raw: "'./AlertModal.svelte'"
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 98
end: 150
loc:  {...}
 start:  {...}
 line: 5
column: 3
 }
end:  {...}
 line: 5
column: 55
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 102
end: 149
loc:  {...}
 start:  {...}
 line: 5
column: 7
 }
end:  {...}
 line: 5
column: 54
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 102
end: 117
loc:  {...}
 start:  {...}
 line: 5
column: 7
 }
end:  {...}
 line: 5
column: 22
 }
 }
name: "newMessageTitle"
 }
init: Literal {...}
 type: "Literal"
start: 120
end: 149
loc:  {...}
 start:  {...}
 line: 5
column: 25
 }
end:  {...}
 line: 5
column: 54
 }
 }
value: "You received a new message!"
raw: "'You received a new message!'"
 }
 }
 ]
kind: "let"
 }
 ExpressionStatement {...}
 type: "ExpressionStatement"
start: 155
end: 255
loc:  {...}
 start:  {...}
 line: 7
column: 3
 }
end:  {...}
 line: 11
column: 5
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 155
end: 255
loc:  {...}
 start:  {...}
 line: 7
column: 3
 }
end:  {...}
 line: 11
column: 5
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 155
end: 162
loc:  {...}
 start:  {...}
 line: 7
column: 3
 }
end:  {...}
 line: 7
column: 10
 }
 }
name: "onMount"
 }
arguments: [...] (1)
  ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 163
end: 254
loc:  {...}
 start:  {...}
 line: 7
column: 11
 }
end:  {...}
 line: 11
column: 4
 }
 }
id: null
expression: false
generator: false
async: false
params: []
body: BlockStatement {...}
 type: "BlockStatement"
start: 169
end: 254
loc:  {...}
 start:  {...}
 line: 7
column: 17
 }
end:  {...}
 line: 11
column: 4
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 177
end: 249
loc:  {...}
 start:  {...}
 line: 8
column: 6
 }
end:  {...}
 line: 10
column: 14
 }
 }
expression: CallExpression {...}
 type: "CallExpression"
start: 177
end: 249
loc:  {...}
 start:  {...}
 line: 8
column: 6
 }
end:  {...}
 line: 10
column: 14
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 177
end: 187
loc:  {...}
 start:  {...}
 line: 8
column: 6
 }
end:  {...}
 line: 8
column: 16
 }
 }
name: "setTimeout"
 }
arguments: [...] (2)
  ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 188
end: 242
loc:  {...}
 start:  {...}
 line: 8
column: 17
 }
end:  {...}
 line: 10
column: 7
 }
 }
id: null
expression: false
generator: false
async: false
params: []
body: BlockStatement {...}
 type: "BlockStatement"
start: 194
end: 242
loc:  {...}
 start:  {...}
 line: 8
column: 23
 }
end:  {...}
 line: 10
column: 7
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 206
end: 234
loc:  {...}
 start:  {...}
 line: 9
column: 10
 }
end:  {...}
 line: 9
column: 38
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 206
end: 233
loc:  {...}
 start:  {...}
 line: 9
column: 10
 }
end:  {...}
 line: 9
column: 37
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 206
end: 221
loc:  {...}
 start:  {...}
 line: 9
column: 10
 }
end:  {...}
 line: 9
column: 25
 }
 }
name: "newMessageTitle"
 }
right: Identifier {...}
 type: "Identifier"
start: 224
end: 233
loc:  {...}
 start:  {...}
 line: 9
column: 28
 }
end:  {...}
 line: 9
column: 37
 }
 }
name: "undefined"
 }
 }
 }
 ]
 }
 }
 Literal {...}
 type: "Literal"
start: 244
end: 248
loc:  {...}
 start:  {...}
 line: 10
column: 9
 }
end:  {...}
 line: 10
column: 13
 }
 }
value: 2000
raw: "2000"
 }
 ]
optional: false
 }
 }
 ]
 }
 }
 ]
optional: false
 }
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern