CountDown • Playground • Svelte

App.svelte

let count = 0;

$: remaining = 10 - count;

const increment = () => {

if (remaining > 0) {

count++;

}

</script>

<div>

<div>Count: {count}</div>

<div>Remaining: {remaining}</div>

<button on:click={increment}>Click</button>

</div>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

var root = $.template(`<div><div> </div> <div> </div> <button>Click</button></div>`);

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

$.push($$props, false);

const remaining = $.mutable_state();

let count = $.mutable_state(0);

const increment = () => {

if ($.get(remaining) > 0) {

$.update(count);

}

};

$.legacy_pre_effect(() => ($.get(count)), () => {

$.set(remaining, 10 - $.get(count));

});

$.legacy_pre_effect_reset();

var div = root();

var div_1 = $.child(div);

var text = $.child(div_1);

$.reset(div_1);

var div_2 = $.sibling(div_1, 2);

var text_1 = $.child(div_2);

$.reset(div_2);

var button = $.sibling(div_2, 2);

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

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

		
			
				
					 Root {
 css: null
js: []
start: 145
end: 267
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 143
end: 145
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 145
end: 267
name: "div"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (7)
  Text {...}
 type: "Text"
start: 150
end: 153
raw: "\n  "
data: "\n  "
 }
 RegularElement {...}
 type: "RegularElement"
start: 153
end: 178
name: "div"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 158
end: 165
raw: "Count: "
data: "Count: "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 165
end: 172
expression: Identifier {...}
 type: "Identifier"
start: 166
end: 171
loc:  {...}
 start:  {...}
 line: 13
column: 15
 }
end:  {...}
 line: 13
column: 20
 }
 }
name: "count"
 }
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 178
end: 181
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 181
end: 214
name: "div"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 186
end: 197
raw: "Remaining: "
data: "Remaining: "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 197
end: 208
expression: Identifier {...}
 type: "Identifier"
start: 198
end: 207
loc:  {...}
 start:  {...}
 line: 14
column: 19
 }
end:  {...}
 line: 14
column: 28
 }
 }
name: "remaining"
 }
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 214
end: 217
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 217
end: 260
name: "button"
attributes: [...] (1)
  OnDirective {...}
 start: 225
end: 245
type: "OnDirective"
name: "click"
expression: Identifier {...}
 type: "Identifier"
start: 235
end: 244
loc:  {...}
 start:  {...}
 line: 15
column: 20
 }
end:  {...}
 line: 15
column: 29
 }
 }
name: "increment"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 246
end: 251
raw: "Click"
data: "Click"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 260
end: 261
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 143
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 134
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 10
column: 0
 }
 }
body: [...] (3)
  VariableDeclaration {...}
 type: "VariableDeclaration"
start: 11
end: 25
loc:  {...}
 start:  {...}
 line: 2
column: 2
 }
end:  {...}
 line: 2
column: 16
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 15
end: 24
loc:  {...}
 start:  {...}
 line: 2
column: 6
 }
end:  {...}
 line: 2
column: 15
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 15
end: 20
loc:  {...}
 start:  {...}
 line: 2
column: 6
 }
end:  {...}
 line: 2
column: 11
 }
 }
name: "count"
 }
init: Literal {...}
 type: "Literal"
start: 23
end: 24
loc:  {...}
 start:  {...}
 line: 2
column: 14
 }
end:  {...}
 line: 2
column: 15
 }
 }
value: 0
raw: "0"
 }
 }
 ]
kind: "let"
 }
 LabeledStatement {...}
 type: "LabeledStatement"
start: 28
end: 54
loc:  {...}
 start:  {...}
 line: 3
column: 2
 }
end:  {...}
 line: 3
column: 28
 }
 }
body: ExpressionStatement {...}
 type: "ExpressionStatement"
start: 31
end: 54
loc:  {...}
 start:  {...}
 line: 3
column: 5
 }
end:  {...}
 line: 3
column: 28
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 31
end: 53
loc:  {...}
 start:  {...}
 line: 3
column: 5
 }
end:  {...}
 line: 3
column: 27
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 31
end: 40
loc:  {...}
 start:  {...}
 line: 3
column: 5
 }
end:  {...}
 line: 3
column: 14
 }
 }
name: "remaining"
 }
right: BinaryExpression {...}
 type: "BinaryExpression"
start: 43
end: 53
loc:  {...}
 start:  {...}
 line: 3
column: 17
 }
end:  {...}
 line: 3
column: 27
 }
 }
left: Literal {...}
 type: "Literal"
start: 43
end: 45
loc:  {...}
 start:  {...}
 line: 3
column: 17
 }
end:  {...}
 line: 3
column: 19
 }
 }
value: 10
raw: "10"
 }
operator: "-"
right: Identifier {...}
 type: "Identifier"
start: 48
end: 53
loc:  {...}
 start:  {...}
 line: 3
column: 22
 }
end:  {...}
 line: 3
column: 27
 }
 }
name: "count"
 }
 }
 }
 }
label: Identifier {...}
 type: "Identifier"
start: 28
end: 29
loc:  {...}
 start:  {...}
 line: 3
column: 2
 }
end:  {...}
 line: 3
column: 3
 }
 }
name: "$"
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 58
end: 133
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 9
column: 3
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 64
end: 133
loc:  {...}
 start:  {...}
 line: 5
column: 8
 }
end:  {...}
 line: 9
column: 3
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 64
end: 73
loc:  {...}
 start:  {...}
 line: 5
column: 8
 }
end:  {...}
 line: 5
column: 17
 }
 }
name: "increment"
 }
init: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 76
end: 133
loc:  {...}
 start:  {...}
 line: 5
column: 20
 }
end:  {...}
 line: 9
column: 3
 }
 }
id: null
expression: false
generator: false
async: false
params: []
body: BlockStatement {...}
 type: "BlockStatement"
start: 82
end: 133
loc:  {...}
 start:  {...}
 line: 5
column: 26
 }
end:  {...}
 line: 9
column: 3
 }
 }
body: [...] (1)
  IfStatement {...}
 type: "IfStatement"
start: 88
end: 129
loc:  {...}
 start:  {...}
 line: 6
column: 4
 }
end:  {...}
 line: 8
column: 5
 }
 }
test: BinaryExpression {...}
 type: "BinaryExpression"
start: 92
end: 105
loc:  {...}
 start:  {...}
 line: 6
column: 8
 }
end:  {...}
 line: 6
column: 21
 }
 }
left: Identifier {...}
 type: "Identifier"
start: 92
end: 101
loc:  {...}
 start:  {...}
 line: 6
column: 8
 }
end:  {...}
 line: 6
column: 17
 }
 }
name: "remaining"
 }
operator: ">"
right: Literal {...}
 type: "Literal"
start: 104
end: 105
loc:  {...}
 start:  {...}
 line: 6
column: 20
 }
end:  {...}
 line: 6
column: 21
 }
 }
value: 0
raw: "0"
 }
 }
consequent: BlockStatement {...}
 type: "BlockStatement"
start: 107
end: 129
loc:  {...}
 start:  {...}
 line: 6
column: 23
 }
end:  {...}
 line: 8
column: 5
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 115
end: 123
loc:  {...}
 start:  {...}
 line: 7
column: 6
 }
end:  {...}
 line: 7
column: 14
 }
 }
expression: UpdateExpression {...}
 type: "UpdateExpression"
start: 115
end: 122
loc:  {...}
 start:  {...}
 line: 7
column: 6
 }
end:  {...}
 line: 7
column: 13
 }
 }
operator: "++"
prefix: false
argument: Identifier {...}
 type: "Identifier"
start: 115
end: 120
loc:  {...}
 start:  {...}
 line: 7
column: 6
 }
end:  {...}
 line: 7
column: 11
 }
 }
name: "count"
 }
 }
 }
 ]
 }
alternate: null
 }
 ]
 }
 }
 }
 ]
kind: "const"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern