Counter squared • Playground • Svelte

App.svelte

let count = 0;

$: squared = count * count;

const increment = () => {

count += 1;

};

</script>

Count is {count}

</button>

<div>Squared: {squared}</div>

<style>

button{

display:block;

margin-block-end: 1rem;

}

</style>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

var root = $.template(`<button class="button svelte-pys109"> </button> <div> </div>`, 1);

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

$.push($$props, false);

const squared = $.mutable_state();

let count = $.mutable_state(0);

const increment = () => {

$.set(count, $.get(count) + 1);

};

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

$.set(squared, $.get(count) * $.get(count));

});

$.legacy_pre_effect_reset();

var fragment = root();

var button = $.first_child(fragment);

var text = $.child(button);

$.reset(button);

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

var text_1 = $.child(div);

$.reset(div);

$.template_effect(() => {

$.set_text(text, `Count is ${$.get(count) ?? ''}`);

$.set_text(text_1, `Squared: ${$.get(squared) ?? ''}`);

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

button.svelte-pys109{

display:block;

margin-block-end: 1rem;

}

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 223
end: 294
attributes: []
children: [...] (1)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 232
end: 238
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 232
end: 238
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "button"
start: 232
end: 238
 }
 ]
start: 232
end: 238
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 238
end: 285
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 242
end: 255
property: "display"
value: "block"
 }
 Declaration {...}
 type: "Declaration"
start: 259
end: 281
property: "margin-block-end"
value: "1rem"
 }
 ]
 }
start: 232
end: 285
 }
 ]
content:  {...}
 start: 230
end: 286
styles: "\n\tbutton{\n\t\tdisplay:block;\n\t\tmargin-block-end: 1rem;\n\t}\n"
comment: null
 }
 }
js: []
start: 117
end: 221
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 115
end: 117
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 117
end: 190
name: "button"
attributes: [...] (2)
  Attribute {...}
 type: "Attribute"
start: 125
end: 139
name: "class"
value: [...] (1)
  Text {...}
 start: 132
end: 138
type: "Text"
raw: "button"
data: "button"
 }
 ]
 }
 OnDirective {...}
 start: 140
end: 160
type: "OnDirective"
name: "click"
expression: Identifier {...}
 type: "Identifier"
start: 150
end: 159
loc:  {...}
 start:  {...}
 line: 10
column: 33
 }
end:  {...}
 line: 10
column: 42
 }
 }
name: "increment"
 }
modifiers: []
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 161
end: 173
raw: "Count is "
data: "Count is "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 173
end: 180
expression: Identifier {...}
 type: "Identifier"
start: 174
end: 179
loc:  {...}
 start:  {...}
 line: 11
column: 12
 }
end:  {...}
 line: 11
column: 17
 }
 }
name: "count"
 }
 }
 Text {...}
 type: "Text"
start: 180
end: 181
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 190
end: 192
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 192
end: 221
name: "div"
attributes: []
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (2)
  Text {...}
 type: "Text"
start: 197
end: 206
raw: "Squared: "
data: "Squared: "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 206
end: 215
expression: Identifier {...}
 type: "Identifier"
start: 207
end: 214
loc:  {...}
 start:  {...}
 line: 14
column: 15
 }
end:  {...}
 line: 14
column: 22
 }
 }
name: "squared"
 }
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 221
end: 223
raw: "\n\n"
data: "\n\n"
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 115
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 106
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 8
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: 27
end: 54
loc:  {...}
 start:  {...}
 line: 3
column: 1
 }
end:  {...}
 line: 3
column: 28
 }
 }
body: ExpressionStatement {...}
 type: "ExpressionStatement"
start: 30
end: 54
loc:  {...}
 start:  {...}
 line: 3
column: 4
 }
end:  {...}
 line: 3
column: 28
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 30
end: 53
loc:  {...}
 start:  {...}
 line: 3
column: 4
 }
end:  {...}
 line: 3
column: 27
 }
 }
operator: "="
left: Identifier {...}
 type: "Identifier"
start: 30
end: 37
loc:  {...}
 start:  {...}
 line: 3
column: 4
 }
end:  {...}
 line: 3
column: 11
 }
 }
name: "squared"
 }
right: BinaryExpression {...}
 type: "BinaryExpression"
start: 40
end: 53
loc:  {...}
 start:  {...}
 line: 3
column: 14
 }
end:  {...}
 line: 3
column: 27
 }
 }
left: Identifier {...}
 type: "Identifier"
start: 40
end: 45
loc:  {...}
 start:  {...}
 line: 3
column: 14
 }
end:  {...}
 line: 3
column: 19
 }
 }
name: "count"
 }
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: 27
end: 28
loc:  {...}
 start:  {...}
 line: 3
column: 1
 }
end:  {...}
 line: 3
column: 2
 }
 }
name: "$"
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 59
end: 105
loc:  {...}
 start:  {...}
 line: 5
column: 2
 }
end:  {...}
 line: 7
column: 4
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 65
end: 104
loc:  {...}
 start:  {...}
 line: 5
column: 8
 }
end:  {...}
 line: 7
column: 3
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 65
end: 74
loc:  {...}
 start:  {...}
 line: 5
column: 8
 }
end:  {...}
 line: 5
column: 17
 }
 }
name: "increment"
 }
init: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 77
end: 104
loc:  {...}
 start:  {...}
 line: 5
column: 20
 }
end:  {...}
 line: 7
column: 3
 }
 }
id: null
expression: false
generator: false
async: false
params: []
body: BlockStatement {...}
 type: "BlockStatement"
start: 83
end: 104
loc:  {...}
 start:  {...}
 line: 5
column: 26
 }
end:  {...}
 line: 7
column: 3
 }
 }
body: [...] (1)
  ExpressionStatement {...}
 type: "ExpressionStatement"
start: 89
end: 100
loc:  {...}
 start:  {...}
 line: 6
column: 4
 }
end:  {...}
 line: 6
column: 15
 }
 }
expression: AssignmentExpression {...}
 type: "AssignmentExpression"
start: 89
end: 99
loc:  {...}
 start:  {...}
 line: 6
column: 4
 }
end:  {...}
 line: 6
column: 14
 }
 }
operator: "+="
left: Identifier {...}
 type: "Identifier"
start: 89
end: 94
loc:  {...}
 start:  {...}
 line: 6
column: 4
 }
end:  {...}
 line: 6
column: 9
 }
 }
name: "count"
 }
right: Literal {...}
 type: "Literal"
start: 98
end: 99
loc:  {...}
 start:  {...}
 line: 6
column: 13
 }
end:  {...}
 line: 6
column: 14
 }
 }
value: 1
raw: "1"
 }
 }
 }
 ]
 }
 }
 }
 ]
kind: "const"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern