Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
runes
This component is in runes mode.
To disable runes mode, add the following to the top of your component:
<svelte:options runes={false} />
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
⌄
⌄
⌄
⌄
⌄
<script>
let number = $state(0);
let currentValue = $derived(number * 2);
const addByOne = () => number += 1;
const decreaseByOne = () => number > 0 ? number -= 1: 0;
const reset = () => number = 0;
const multiplyByTwo = () => number *= 2;
</script>
<div class="container">
<h1>Multiplied By Two: {currentValue}</h1>
<button class="addBtn" onclick = {addByOne}>Add By One</button>
<button class="decreaseBtn" onclick = {decreaseByOne}>Decrease By One</button>
<button onclick = {reset}>Reset</button>
<button onclick = {multiplyByTwo}>Multiply By Two</button>
<p>Current Value is: {number}</p>
</div>
<style>
:root {
--backgound_color: #1e293b;;
--font_family: fantasy;
--btn_color: #18181b;
--btn_add_color: #047857;
--btn_decrease_color: #dc2626;
}
.container {
background-color: var(--backgound_color);
font-family: var(--font_family);
text-align: center;
max-width: 100%;
height: 100vh;
resolving https://unpkg.com/svelte@5.2.3/src/internal/client/dev/console-log.js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
⌄
import "svelte/internal/disclose-version";
import * as $ from "svelte/internal/client";
const addByOne = (_, number) => $.set(number, $.get(number) + 1);
const decreaseByOne = (__1, number) => $.get(number) > 0 ? $.set(number, $.get(number) - 1) : 0;
const reset = (__2, number) => $.set(number, 0);
const multiplyByTwo = (__3, number) => $.set(number, $.get(number) * 2);
var root = $.template(`<div class="container svelte-3hnaup"><h1 class="svelte-3hnaup"> </h1> <button class="addBtn svelte-3hnaup">Add By One</button> <button class="decreaseBtn svelte-3hnaup">Decrease By One</button> <button class="svelte-3hnaup">Reset</button> <button class="svelte-3hnaup">Multiply By Two</button> <p class="svelte-3hnaup"> </p></div>`);
export default function App($$anchor) {
let number = $.state(0);
let currentValue = $.derived(() => $.get(number) * 2);
var div = root();
var h1 = $.child(div);
var text = $.child(h1);
$.reset(h1);
var button = $.sibling(h1, 2);
button.__click = [addByOne, number];
var button_1 = $.sibling(button, 2);
button_1.__click = [decreaseByOne, number];
var button_2 = $.sibling(button_1, 2);
button_2.__click = [reset, number];
var button_3 = $.sibling(button_2, 2);
button_3.__click = [multiplyByTwo, number];
var p = $.sibling(button_3, 2);
var text_1 = $.child(p);
result = svelte.compile(source, {
generate: ,
});99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
:root {
--backgound_color: #1e293b;;
--font_family: fantasy;
--btn_color: #18181b;
--btn_add_color: #047857;
--btn_decrease_color: #dc2626;
}
.container.svelte-3hnaup {
background-color: var(--backgound_color);
font-family: var(--font_family);
text-align: center;
max-width: 100%;
height: 100vh;
padding: 3rem;
}
h1.svelte-3hnaup {
font-size: 3rem;
}
button.svelte-3hnaup {
background-color: var(--btn_color);
border: none;
border-radius: 5px;
font-family: var(--font_family);
font-size: 18px;
padding: 10px;
}
.addBtn.svelte-3hnaup {
background-color: var(--btn_add_color)
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 622
- end: 1313
- attributes: []
children: [...] (7)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 631
- end: 636
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 631
- end: 636
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "root"
- args: null
- start: 631
- end: 636
}
]- start: 631
- end: 636
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 637
- end: 783
children: [...] (5)
Declaration {...}
- type: "Declaration"
- start: 641
- end: 667
- property: "--backgound_color"
- value: "#1e293b"
} Declaration {...}
- type: "Declaration"
- start: 668
- end: 694
- property: ";"
- value: "--font_family: fantasy"
} Declaration {...}
- type: "Declaration"
- start: 698
- end: 718
- property: "--btn_color"
- value: "#18181b"
} Declaration {...}
- type: "Declaration"
- start: 722
- end: 746
- property: "--btn_add_color"
- value: "#047857"
} Declaration {...}
- type: "Declaration"
- start: 750
- end: 779
- property: "--btn_decrease_color"
- value: "#dc2626"
}
]
}- start: 631
- end: 783
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 787
- end: 797
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 787
- end: 797
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "container"
- start: 787
- end: 797
}
]- start: 787
- end: 797
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 798
- end: 956
children: [...] (6)
Declaration {...}
- type: "Declaration"
- start: 802
- end: 842
- property: "background-color"
- value: "var(--backgound_color)"
} Declaration {...}
- type: "Declaration"
- start: 846
- end: 877
- property: "font-family"
- value: "var(--font_family)"
} Declaration {...}
- type: "Declaration"
- start: 881
- end: 899
- property: "text-align"
- value: "center"
} Declaration {...}
- type: "Declaration"
- start: 903
- end: 918
- property: "max-width"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 922
- end: 935
- property: "height"
- value: "100vh"
} Declaration {...}
- type: "Declaration"
- start: 939
- end: 952
- property: "padding"
- value: "3rem"
}
]
}- start: 787
- end: 956
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 960
- end: 962
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 960
- end: 962
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "h1"
- start: 960
- end: 962
}
]- start: 960
- end: 962
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 963
- end: 986
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 967
- end: 982
- property: "font-size"
- value: "3rem"
}
]
}- start: 960
- end: 986
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 989
- end: 995
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 989
- end: 995
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "button"
- start: 989
- end: 995
}
]- start: 989
- end: 995
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 996
- end: 1150
children: [...] (6)
Declaration {...}
- type: "Declaration"
- start: 1000
- end: 1034
- property: "background-color"
- value: "var(--btn_color)"
} Declaration {...}
- type: "Declaration"
- start: 1038
- end: 1050
- property: "border"
- value: "none"
} Declaration {...}
- type: "Declaration"
- start: 1054
- end: 1072
- property: "border-radius"
- value: "5px"
} Declaration {...}
- type: "Declaration"
- start: 1076
- end: 1107
- property: "font-family"
- value: "var(--font_family)"
} Declaration {...}
- type: "Declaration"
- start: 1111
- end: 1126
- property: "font-size"
- value: "18px"
} Declaration {...}
- type: "Declaration"
- start: 1130
- end: 1143
- property: "padding"
- value: "10px"
}
]
}- start: 989
- end: 1150
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1153
- end: 1160
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1153
- end: 1160
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "addBtn"
- start: 1153
- end: 1160
}
]- start: 1153
- end: 1160
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1161
- end: 1206
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 1165
- end: 1205
- property: "background-color"
- value: "var(--btn_add_color)"
}
]
}- start: 1153
- end: 1206
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1209
- end: 1221
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1209
- end: 1221
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "decreaseBtn"
- start: 1209
- end: 1221
}
]- start: 1209
- end: 1221
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1222
- end: 1273
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 1226
- end: 1269
- property: "background-color"
- value: "var(--btn_decrease_color)"
}
]
}- start: 1209
- end: 1273
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 1276
- end: 1277
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 1276
- end: 1277
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "p"
- start: 1276
- end: 1277
}
]- start: 1276
- end: 1277
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 1278
- end: 1301
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 1282
- end: 1297
- property: "font-size"
- value: "2rem"
}
]
}- start: 1276
- end: 1301
}
]content: {...}
- start: 629
- end: 1305
- styles: "\n\t:root {\n\t\t--backgound_color: #1e293b;;\n\t\t--font_family: fantasy;\n\t\t--btn_color: #18181b;\n\t\t--btn_add_color: #047857;\n\t\t--btn_decrease_color: #dc2626;\n\t}\n\t\n\t.container {\n\t\tbackground-color: var(--backgound_color);\n\t\tfont-family: var(--font_family);\n\t\ttext-align: center;\n\t\tmax-width: 100%;\n\t\theight: 100vh;\n\t\tpadding: 3rem;\n\t}\n\n h1 {\n\t\tfont-size: 3rem;\n\t}\n\n\tbutton {\n\t\tbackground-color: var(--btn_color);\n\t\tborder: none;\n\t\tborder-radius: 5px;\n\t\tfont-family: var(--font_family);\n\t\tfont-size: 18px;\n\t\tpadding: 10px;\n\t\t\n\t}\n\n\t.addBtn {\n\t\tbackground-color: var(--btn_add_color)\n\t}\n\n\t.decreaseBtn {\n\t\tbackground-color: var(--btn_decrease_color);\n\t}\n\n\tp {\n\t\tfont-size: 2rem;\n\t}\n\n\t\n"
- comment: null
}
}- js: []
- start: 262
- end: 619
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 259
- end: 262
- raw: "\n\n "
- data: "\n\n "
} RegularElement {...}
- type: "RegularElement"
- start: 262
- end: 619
- name: "div"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 267
- end: 284
- name: "class"
value: [...] (1)
Text {...}
- start: 274
- end: 283
- type: "Text"
- raw: "container"
- data: "container svelte-3hnaup"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (13)
Text {...}
- type: "Text"
- start: 285
- end: 287
- raw: "\n "
- data: "\n "
} RegularElement {...}
- type: "RegularElement"
- start: 287
- end: 329
- name: "h1"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-3hnaup"
- raw: "svelte-3hnaup"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (2)
Text {...}
- type: "Text"
- start: 291
- end: 310
- raw: "Multiplied By Two: "
- data: "Multiplied By Two: "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 310
- end: 324
expression: Identifier {...}
- type: "Identifier"
- start: 311
- end: 323
loc: {...}
start: {...}
- line: 13
- column: 25
}end: {...}
- line: 13
- column: 37
}
}- name: "currentValue"
}
}
]
}
} Text {...}
- type: "Text"
- start: 329
- end: 331
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 331
- end: 394
- name: "button"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 339
- end: 353
- name: "class"
value: [...] (1)
Text {...}
- start: 346
- end: 352
- type: "Text"
- raw: "addBtn"
- data: "addBtn svelte-3hnaup"
}
]
} Attribute {...}
- type: "Attribute"
- start: 354
- end: 374
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 364
- end: 374
expression: Identifier {...}
- type: "Identifier"
- start: 365
- end: 373
loc: {...}
start: {...}
- line: 14
- column: 35
}end: {...}
- line: 14
- column: 43
}
}- name: "addByOne"
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 375
- end: 385
- raw: "Add By One"
- data: "Add By One"
}
]
}
} Text {...}
- type: "Text"
- start: 394
- end: 396
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 396
- end: 474
- name: "button"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 404
- end: 423
- name: "class"
value: [...] (1)
Text {...}
- start: 411
- end: 422
- type: "Text"
- raw: "decreaseBtn"
- data: "decreaseBtn svelte-3hnaup"
}
]
} Attribute {...}
- type: "Attribute"
- start: 424
- end: 449
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 434
- end: 449
expression: Identifier {...}
- type: "Identifier"
- start: 435
- end: 448
loc: {...}
start: {...}
- line: 15
- column: 40
}end: {...}
- line: 15
- column: 53
}
}- name: "decreaseByOne"
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 450
- end: 465
- raw: "Decrease By One"
- data: "Decrease By One"
}
]
}
} Text {...}
- type: "Text"
- start: 474
- end: 476
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 476
- end: 516
- name: "button"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 484
- end: 501
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 494
- end: 501
expression: Identifier {...}
- type: "Identifier"
- start: 495
- end: 500
loc: {...}
start: {...}
- line: 16
- column: 20
}end: {...}
- line: 16
- column: 25
}
}- name: "reset"
}
}
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-3hnaup"
- raw: "svelte-3hnaup"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 502
- end: 507
- raw: "Reset"
- data: "Reset"
}
]
}
} Text {...}
- type: "Text"
- start: 516
- end: 518
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 518
- end: 576
- name: "button"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 526
- end: 551
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 536
- end: 551
expression: Identifier {...}
- type: "Identifier"
- start: 537
- end: 550
loc: {...}
start: {...}
- line: 17
- column: 20
}end: {...}
- line: 17
- column: 33
}
}- name: "multiplyByTwo"
}
}
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-3hnaup"
- raw: "svelte-3hnaup"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 552
- end: 567
- raw: "Multiply By Two"
- data: "Multiply By Two"
}
]
}
} Text {...}
- type: "Text"
- start: 576
- end: 579
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 579
- end: 612
- name: "p"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-3hnaup"
- raw: "svelte-3hnaup"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (2)
Text {...}
- type: "Text"
- start: 582
- end: 600
- raw: "Current Value is: "
- data: "Current Value is: "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 600
- end: 608
expression: Identifier {...}
- type: "Identifier"
- start: 601
- end: 607
loc: {...}
start: {...}
- line: 18
- column: 23
}end: {...}
- line: 18
- column: 29
}
}- name: "number"
}
}
]
}
} Text {...}
- type: "Text"
- start: 612
- end: 613
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 619
- end: 622
- raw: "\n\n\n"
- data: "\n\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 259
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 250
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 10
- column: 0
}
}body: [...] (6)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 33
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 24
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 14
- end: 32
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 23
}
}id: Identifier {...}
- type: "Identifier"
- start: 14
- end: 20
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 11
}
}- name: "number"
}init: CallExpression {...}
- type: "CallExpression"
- start: 23
- end: 32
loc: {...}
start: {...}
- line: 2
- column: 14
}end: {...}
- line: 2
- column: 23
}
}callee: Identifier {...}
- type: "Identifier"
- start: 23
- end: 29
loc: {...}
start: {...}
- line: 2
- column: 14
}end: {...}
- line: 2
- column: 20
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 30
- end: 31
loc: {...}
start: {...}
- line: 2
- column: 21
}end: {...}
- line: 2
- column: 22
}
}- value: 0
- raw: "0"
}
]- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 35
- end: 75
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 41
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 39
- end: 74
loc: {...}
start: {...}
- line: 3
- column: 5
}end: {...}
- line: 3
- column: 40
}
}id: Identifier {...}
- type: "Identifier"
- start: 39
- end: 51
loc: {...}
start: {...}
- line: 3
- column: 5
}end: {...}
- line: 3
- column: 17
}
}- name: "currentValue"
}init: CallExpression {...}
- type: "CallExpression"
- start: 54
- end: 74
loc: {...}
start: {...}
- line: 3
- column: 20
}end: {...}
- line: 3
- column: 40
}
}callee: Identifier {...}
- type: "Identifier"
- start: 54
- end: 62
loc: {...}
start: {...}
- line: 3
- column: 20
}end: {...}
- line: 3
- column: 28
}
}- name: "$derived"
}arguments: [...] (1)
BinaryExpression {...}
- type: "BinaryExpression"
- start: 63
- end: 73
loc: {...}
start: {...}
- line: 3
- column: 29
}end: {...}
- line: 3
- column: 39
}
}left: Identifier {...}
- type: "Identifier"
- start: 63
- end: 69
loc: {...}
start: {...}
- line: 3
- column: 29
}end: {...}
- line: 3
- column: 35
}
}- name: "number"
}- operator: "*"
right: Literal {...}
- type: "Literal"
- start: 72
- end: 73
loc: {...}
start: {...}
- line: 3
- column: 38
}end: {...}
- line: 3
- column: 39
}
}- value: 2
- raw: "2"
}
}
]- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 79
- end: 114
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 36
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 85
- end: 113
loc: {...}
start: {...}
- line: 5
- column: 7
}end: {...}
- line: 5
- column: 35
}
}id: Identifier {...}
- type: "Identifier"
- start: 85
- end: 93
loc: {...}
start: {...}
- line: 5
- column: 7
}end: {...}
- line: 5
- column: 15
}
}- name: "addByOne"
}init: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 96
- end: 113
loc: {...}
start: {...}
- line: 5
- column: 18
}end: {...}
- line: 5
- column: 35
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 102
- end: 113
loc: {...}
start: {...}
- line: 5
- column: 24
}end: {...}
- line: 5
- column: 35
}
}- operator: "+="
left: Identifier {...}
- type: "Identifier"
- start: 102
- end: 108
loc: {...}
start: {...}
- line: 5
- column: 24
}end: {...}
- line: 5
- column: 30
}
}- name: "number"
}right: Literal {...}
- type: "Literal"
- start: 112
- end: 113
loc: {...}
start: {...}
- line: 5
- column: 34
}end: {...}
- line: 5
- column: 35
}
}- value: 1
- raw: "1"
}
}
}
}
]- kind: "const"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 116
- end: 172
loc: {...}
start: {...}
- line: 6
- column: 1
}end: {...}
- line: 6
- column: 57
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 122
- end: 171
loc: {...}
start: {...}
- line: 6
- column: 7
}end: {...}
- line: 6
- column: 56
}
}id: Identifier {...}
- type: "Identifier"
- start: 122
- end: 135
loc: {...}
start: {...}
- line: 6
- column: 7
}end: {...}
- line: 6
- column: 20
}
}- name: "decreaseByOne"
}init: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 138
- end: 171
loc: {...}
start: {...}
- line: 6
- column: 23
}end: {...}
- line: 6
- column: 56
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: ConditionalExpression {...}
- type: "ConditionalExpression"
- start: 144
- end: 171
loc: {...}
start: {...}
- line: 6
- column: 29
}end: {...}
- line: 6
- column: 56
}
}test: BinaryExpression {...}
- type: "BinaryExpression"
- start: 144
- end: 154
loc: {...}
start: {...}
- line: 6
- column: 29
}end: {...}
- line: 6
- column: 39
}
}left: Identifier {...}
- type: "Identifier"
- start: 144
- end: 150
loc: {...}
start: {...}
- line: 6
- column: 29
}end: {...}
- line: 6
- column: 35
}
}- name: "number"
}- operator: ">"
right: Literal {...}
- type: "Literal"
- start: 153
- end: 154
loc: {...}
start: {...}
- line: 6
- column: 38
}end: {...}
- line: 6
- column: 39
}
}- value: 0
- raw: "0"
}
}consequent: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 157
- end: 168
loc: {...}
start: {...}
- line: 6
- column: 42
}end: {...}
- line: 6
- column: 53
}
}- operator: "-="
left: Identifier {...}
- type: "Identifier"
- start: 157
- end: 163
loc: {...}
start: {...}
- line: 6
- column: 42
}end: {...}
- line: 6
- column: 48
}
}- name: "number"
}right: Literal {...}
- type: "Literal"
- start: 167
- end: 168
loc: {...}
start: {...}
- line: 6
- column: 52
}end: {...}
- line: 6
- column: 53
}
}- value: 1
- raw: "1"
}
}alternate: Literal {...}
- type: "Literal"
- start: 170
- end: 171
loc: {...}
start: {...}
- line: 6
- column: 55
}end: {...}
- line: 6
- column: 56
}
}- value: 0
- raw: "0"
}
}
}
}
]- kind: "const"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 174
- end: 205
loc: {...}
start: {...}
- line: 7
- column: 1
}end: {...}
- line: 7
- column: 32
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 180
- end: 204
loc: {...}
start: {...}
- line: 7
- column: 7
}end: {...}
- line: 7
- column: 31
}
}id: Identifier {...}
- type: "Identifier"
- start: 180
- end: 185
loc: {...}
start: {...}
- line: 7
- column: 7
}end: {...}
- line: 7
- column: 12
}
}- name: "reset"
}init: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 188
- end: 204
loc: {...}
start: {...}
- line: 7
- column: 15
}end: {...}
- line: 7
- column: 31
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 194
- end: 204
loc: {...}
start: {...}
- line: 7
- column: 21
}end: {...}
- line: 7
- column: 31
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 194
- end: 200
loc: {...}
start: {...}
- line: 7
- column: 21
}end: {...}
- line: 7
- column: 27
}
}- name: "number"
}right: Literal {...}
- type: "Literal"
- start: 203
- end: 204
loc: {...}
start: {...}
- line: 7
- column: 30
}end: {...}
- line: 7
- column: 31
}
}- value: 0
- raw: "0"
}
}
}
}
]- kind: "const"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 207
- end: 247
loc: {...}
start: {...}
- line: 8
- column: 1
}end: {...}
- line: 8
- column: 41
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 213
- end: 246
loc: {...}
start: {...}
- line: 8
- column: 7
}end: {...}
- line: 8
- column: 40
}
}id: Identifier {...}
- type: "Identifier"
- start: 213
- end: 226
loc: {...}
start: {...}
- line: 8
- column: 7
}end: {...}
- line: 8
- column: 20
}
}- name: "multiplyByTwo"
}init: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 229
- end: 246
loc: {...}
start: {...}
- line: 8
- column: 23
}end: {...}
- line: 8
- column: 40
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 235
- end: 246
loc: {...}
start: {...}
- line: 8
- column: 29
}end: {...}
- line: 8
- column: 40
}
}- operator: "*="
left: Identifier {...}
- type: "Identifier"
- start: 235
- end: 241
loc: {...}
start: {...}
- line: 8
- column: 29
}end: {...}
- line: 8
- column: 35
}
}- name: "number"
}right: Literal {...}
- type: "Literal"
- start: 245
- end: 246
loc: {...}
start: {...}
- line: 8
- column: 39
}end: {...}
- line: 8
- column: 40
}
}- value: 2
- raw: "2"
}
}
}
}
]- kind: "const"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time