(cache)📦 Advanced Svelte Advanced reactivity Getters and setters (with external Box class) 📦 • Playground • Svelte

App.svelte

Box.svelte.ts

import {Box} from './Box.svelte.ts'

const MAX_SIZE = 200;

const box = new Box(100, 100);

</script>

<label>

{box.width}

</label>

<label>

{box.height}

</label>

<button onclick={() => box.embiggen(10)}>embiggen</button>

<hr>

<div

class="box"

style:width="{box.width}px"

style:height="{box.height}px"

{box.area}

</div>

<style>

label {

display: flex;

align-items: center;

}

hr {

margin: 1em 0;

border: none;

border-bottom: 1px solid #888;

}

.box {

background: radial-gradient(at 25% 25%, hsl(15 100 60), hsl(15 100 50)) ;

border-radius: 2px;

filter: drop-shadow(0 0 10px hsl(15 100 50 / 0.3));

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

}

</style>

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

import { Box } from './Box.svelte.ts';

var on_click = (_, box) => $.get(box).embiggen(10);

var root = $.template(`<label class="svelte-15pixbb"><input type="range"> </label> <label class="svelte-15pixbb"><input type="range"> </label> <button>embiggen</button> <hr class="svelte-15pixbb"> <div class="box svelte-15pixbb"> </div>`, 1);

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

$.push($$props, false);

const MAX_SIZE = 200;

const box = $.mutable_source(new Box(100, 100));

$.init();

var fragment = root();

var label = $.first_child(fragment);

var input = $.child(label);

$.remove_input_defaults(input);

$.set_attribute(input, 'min', 0);

$.set_attribute(input, 'max', MAX_SIZE);

var text = $.sibling(input);

$.reset(label);

var label_1 = $.sibling(label, 2);

var input_1 = $.child(label_1);

$.remove_input_defaults(input_1);

$.set_attribute(input_1, 'min', 0);

$.set_attribute(input_1, 'max', MAX_SIZE);

var text_1 = $.sibling(input_1);

$.reset(label_1);

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

button.__click = [on_click, box];

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

let styles;

var text_2 = $.child(div, true);

$.reset(div);

$.template_effect(() => {

$.set_text(text, ` ${$.get(box).width ?? ''}`);

$.set_text(text_1, ` ${$.get(box).height ?? ''}`);

styles = $.set_style(div, '', styles, {

width: `${$.get(box).width ?? ''}px`,

height: `${$.get(box).height ?? ''}px`

});

$.set_text(text_2, $.get(box).area);

});

$.bind_value(input, () => $.get(box).width, ($$value) => $.mutate(box, $.get(box).width = $$value));

$.bind_value(input_1, () => $.get(box).height, ($$value) => $.mutate(box, $.get(box).height = $$value));

$.append($$anchor, fragment);

$.pop();

}

$.delegate(['click']);

result = svelte.compile(source, {

generate: "client" "server",

dev: false });

label.svelte-15pixbb {

display: flex;

align-items: center;

}

hr.svelte-15pixbb {

margin: 1em 0;

border: none;

border-bottom: 1px solid #888;

}

.box.svelte-15pixbb {

background: radial-gradient(at 25% 25%, hsl(15 100 60), hsl(15 100 50)) ;

border-radius: 2px;

filter: drop-shadow(0 0 10px hsl(15 100 50 / 0.3));

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

}

		
			
				
					 Root {
 css: StyleSheet {...}
 type: "StyleSheet"
start: 484
end: 879
attributes: []
children: [...] (3)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 493
end: 498
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 493
end: 498
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "label"
start: 493
end: 498
 }
 ]
start: 493
end: 498
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 499
end: 543
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 503
end: 516
property: "display"
value: "flex"
 }
 Declaration {...}
 type: "Declaration"
start: 520
end: 539
property: "align-items"
value: "center"
 }
 ]
 }
start: 493
end: 543
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 546
end: 548
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 546
end: 548
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "hr"
start: 546
end: 548
 }
 ]
start: 546
end: 548
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 549
end: 619
children: [...] (3)
  Declaration {...}
 type: "Declaration"
start: 553
end: 566
property: "margin"
value: "1em 0"
 }
 Declaration {...}
 type: "Declaration"
start: 570
end: 582
property: "border"
value: "none"
 }
 Declaration {...}
 type: "Declaration"
start: 586
end: 615
property: "border-bottom"
value: "1px solid #888"
 }
 ]
 }
start: 546
end: 619
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 622
end: 626
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 622
end: 626
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "box"
start: 622
end: 626
 }
 ]
start: 622
end: 626
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 627
end: 870
children: [...] (7)
  Declaration {...}
 type: "Declaration"
start: 631
end: 703
property: "background"
value: "radial-gradient(at 25% 25%, hsl(15 100 60), hsl(15 100 50))"
 }
 Declaration {...}
 type: "Declaration"
start: 707
end: 725
property: "border-radius"
value: "2px"
 }
 Declaration {...}
 type: "Declaration"
start: 729
end: 779
property: "filter"
value: "drop-shadow(0 0 10px hsl(15 100 50 / 0.3))"
 }
 Declaration {...}
 type: "Declaration"
start: 783
end: 796
property: "display"
value: "flex"
 }
 Declaration {...}
 type: "Declaration"
start: 800
end: 819
property: "align-items"
value: "center"
 }
 Declaration {...}
 type: "Declaration"
start: 823
end: 846
property: "justify-content"
value: "center"
 }
 Declaration {...}
 type: "Declaration"
start: 850
end: 866
property: "overflow"
value: "hidden"
 }
 ]
 }
start: 622
end: 870
 }
 ]
content:  {...}
 start: 491
end: 871
styles: "\n\tlabel {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\thr {\n\t\tmargin: 1em 0;\n\t\tborder: none;\n\t\tborder-bottom: 1px solid #888;\n\t}\n\n\t.box {\n\t\tbackground: radial-gradient(at 25% 25%, hsl(15 100 60), hsl(15 100 50)) ;\n\t\tborder-radius: 2px;\n\t\tfilter: drop-shadow(0 0 10px hsl(15 100 50 / 0.3));\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\toverflow: hidden;\n\t}\n"
comment: null
 }
 }
js: []
start: 114
end: 482
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (11)
  Text {...}
 type: "Text"
start: 112
end: 114
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 114
end: 213
name: "label"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 121
end: 123
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 123
end: 191
name: "input"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 130
end: 142
name: "type"
value: [...] (1)
  Text {...}
 start: 136
end: 141
type: "Text"
raw: "range"
data: "range"
 }
 ]
 }
 BindDirective {...}
 start: 143
end: 165
type: "BindDirective"
name: "value"
expression: MemberExpression {...}
 type: "MemberExpression"
start: 155
end: 164
loc:  {...}
 start:  {...}
 line: 9
column: 33
 }
end:  {...}
 line: 9
column: 42
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 155
end: 158
loc:  {...}
 start:  {...}
 line: 9
column: 33
 }
end:  {...}
 line: 9
column: 36
 }
 }
name: "box"
 }
property: Identifier {...}
 type: "Identifier"
start: 159
end: 164
loc:  {...}
 start:  {...}
 line: 9
column: 37
 }
end:  {...}
 line: 9
column: 42
 }
 }
name: "width"
 }
computed: false
optional: false
 }
modifiers: []
 }
 Attribute {...}
 type: "Attribute"
start: 166
end: 173
name: "min"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 170
end: 173
expression: Literal {...}
 type: "Literal"
start: 171
end: 172
loc:  {...}
 start:  {...}
 line: 9
column: 49
 }
end:  {...}
 line: 9
column: 50
 }
 }
value: 0
raw: "0"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 174
end: 188
name: "max"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 178
end: 188
expression: Identifier {...}
 type: "Identifier"
start: 179
end: 187
loc:  {...}
 start:  {...}
 line: 9
column: 57
 }
end:  {...}
 line: 9
column: 65
 }
 }
name: "MAX_SIZE"
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 191
end: 193
raw: " "
data: " "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 193
end: 204
expression: MemberExpression {...}
 type: "MemberExpression"
start: 194
end: 203
loc:  {...}
 start:  {...}
 line: 10
column: 2
 }
end:  {...}
 line: 10
column: 11
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 194
end: 197
loc:  {...}
 start:  {...}
 line: 10
column: 2
 }
end:  {...}
 line: 10
column: 5
 }
 }
name: "box"
 }
property: Identifier {...}
 type: "Identifier"
start: 198
end: 203
loc:  {...}
 start:  {...}
 line: 10
column: 6
 }
end:  {...}
 line: 10
column: 11
 }
 }
name: "width"
 }
computed: false
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 204
end: 205
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 213
end: 215
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 215
end: 316
name: "label"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (5)
  Text {...}
 type: "Text"
start: 222
end: 224
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 224
end: 293
name: "input"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 231
end: 243
name: "type"
value: [...] (1)
  Text {...}
 start: 237
end: 242
type: "Text"
raw: "range"
data: "range"
 }
 ]
 }
 BindDirective {...}
 start: 244
end: 267
type: "BindDirective"
name: "value"
expression: MemberExpression {...}
 type: "MemberExpression"
start: 256
end: 266
loc:  {...}
 start:  {...}
 line: 14
column: 33
 }
end:  {...}
 line: 14
column: 43
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 256
end: 259
loc:  {...}
 start:  {...}
 line: 14
column: 33
 }
end:  {...}
 line: 14
column: 36
 }
 }
name: "box"
 }
property: Identifier {...}
 type: "Identifier"
start: 260
end: 266
loc:  {...}
 start:  {...}
 line: 14
column: 37
 }
end:  {...}
 line: 14
column: 43
 }
 }
name: "height"
 }
computed: false
optional: false
 }
modifiers: []
 }
 Attribute {...}
 type: "Attribute"
start: 268
end: 275
name: "min"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 272
end: 275
expression: Literal {...}
 type: "Literal"
start: 273
end: 274
loc:  {...}
 start:  {...}
 line: 14
column: 50
 }
end:  {...}
 line: 14
column: 51
 }
 }
value: 0
raw: "0"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 276
end: 290
name: "max"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 280
end: 290
expression: Identifier {...}
 type: "Identifier"
start: 281
end: 289
loc:  {...}
 start:  {...}
 line: 14
column: 58
 }
end:  {...}
 line: 14
column: 66
 }
 }
name: "MAX_SIZE"
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 293
end: 295
raw: " "
data: " "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 295
end: 307
expression: MemberExpression {...}
 type: "MemberExpression"
start: 296
end: 306
loc:  {...}
 start:  {...}
 line: 15
column: 2
 }
end:  {...}
 line: 15
column: 12
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 296
end: 299
loc:  {...}
 start:  {...}
 line: 15
column: 2
 }
end:  {...}
 line: 15
column: 5
 }
 }
name: "box"
 }
property: Identifier {...}
 type: "Identifier"
start: 300
end: 306
loc:  {...}
 start:  {...}
 line: 15
column: 6
 }
end:  {...}
 line: 15
column: 12
 }
 }
name: "height"
 }
computed: false
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 307
end: 308
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 316
end: 318
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 318
end: 376
name: "button"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 326
end: 358
name: "onclick"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 334
end: 358
expression: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 335
end: 357
loc:  {...}
 start:  {...}
 line: 18
column: 17
 }
end:  {...}
 line: 18
column: 39
 }
 }
id: null
expression: true
generator: false
async: false
params: []
body: CallExpression {...}
 type: "CallExpression"
start: 341
end: 357
loc:  {...}
 start:  {...}
 line: 18
column: 23
 }
end:  {...}
 line: 18
column: 39
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 341
end: 353
loc:  {...}
 start:  {...}
 line: 18
column: 23
 }
end:  {...}
 line: 18
column: 35
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 341
end: 344
loc:  {...}
 start:  {...}
 line: 18
column: 23
 }
end:  {...}
 line: 18
column: 26
 }
 }
name: "box"
 }
property: Identifier {...}
 type: "Identifier"
start: 345
end: 353
loc:  {...}
 start:  {...}
 line: 18
column: 27
 }
end:  {...}
 line: 18
column: 35
 }
 }
name: "embiggen"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Literal {...}
 type: "Literal"
start: 354
end: 356
loc:  {...}
 start:  {...}
 line: 18
column: 36
 }
end:  {...}
 line: 18
column: 38
 }
 }
value: 10
raw: "10"
 }
 ]
optional: false
 }
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 359
end: 367
raw: "embiggen"
data: "embiggen"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 376
end: 378
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 378
end: 382
name: "hr"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "class"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 382
end: 384
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 384
end: 482
name: "div"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 390
end: 401
name: "class"
value: [...] (1)
  Text {...}
 start: 397
end: 400
type: "Text"
raw: "box"
data: "box"
 }
 ]
 }
 StyleDirective {...}
 start: 403
end: 430
type: "StyleDirective"
name: "width"
modifiers: []
value: [...] (2)
  ExpressionTag {...}
 type: "ExpressionTag"
start: 416
end: 427
expression: MemberExpression {...}
 type: "MemberExpression"
start: 417
end: 426
loc:  {...}
 start:  {...}
 line: 24
column: 15
 }
end:  {...}
 line: 24
column: 24
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 417
end: 420
loc:  {...}
 start:  {...}
 line: 24
column: 15
 }
end:  {...}
 line: 24
column: 18
 }
 }
name: "box"
 }
property: Identifier {...}
 type: "Identifier"
start: 421
end: 426
loc:  {...}
 start:  {...}
 line: 24
column: 19
 }
end:  {...}
 line: 24
column: 24
 }
 }
name: "width"
 }
computed: false
optional: false
 }
 }
 Text {...}
 start: 427
end: 429
type: "Text"
raw: "px"
data: "px"
 }
 ]
 }
 StyleDirective {...}
 start: 432
end: 461
type: "StyleDirective"
name: "height"
modifiers: []
value: [...] (2)
  ExpressionTag {...}
 type: "ExpressionTag"
start: 446
end: 458
expression: MemberExpression {...}
 type: "MemberExpression"
start: 447
end: 457
loc:  {...}
 start:  {...}
 line: 25
column: 16
 }
end:  {...}
 line: 25
column: 26
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 447
end: 450
loc:  {...}
 start:  {...}
 line: 25
column: 16
 }
end:  {...}
 line: 25
column: 19
 }
 }
name: "box"
 }
property: Identifier {...}
 type: "Identifier"
start: 451
end: 457
loc:  {...}
 start:  {...}
 line: 25
column: 20
 }
end:  {...}
 line: 25
column: 26
 }
 }
name: "height"
 }
computed: false
optional: false
 }
 }
 Text {...}
 start: 458
end: 460
type: "Text"
raw: "px"
data: "px"
 }
 ]
 }
 Attribute {...}
 type: "Attribute"
start: -1
end: -1
name: "style"
value: [...] (1)
  Text {...}
 type: "Text"
data: ""
raw: ""
start: -1
end: -1
 }
 ]
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 463
end: 465
raw: "\n\t"
data: "\n\t"
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 465
end: 475
expression: MemberExpression {...}
 type: "MemberExpression"
start: 466
end: 474
loc:  {...}
 start:  {...}
 line: 27
column: 2
 }
end:  {...}
 line: 27
column: 10
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 466
end: 469
loc:  {...}
 start:  {...}
 line: 27
column: 2
 }
end:  {...}
 line: 27
column: 5
 }
 }
name: "box"
 }
property: Identifier {...}
 type: "Identifier"
start: 470
end: 474
loc:  {...}
 start:  {...}
 line: 27
column: 6
 }
end:  {...}
 line: 27
column: 10
 }
 }
name: "area"
 }
computed: false
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 475
end: 476
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 482
end: 484
raw: "\n\n"
data: "\n\n"
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 112
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 103
loc:  {...}
 start:  {...}
 line: 1
column: 0
 }
end:  {...}
 line: 6
column: 0
 }
 }
body: [...] (3)
  ImportDeclaration {...}
 type: "ImportDeclaration"
start: 10
end: 45
loc:  {...}
 start:  {...}
 line: 2
column: 1
 }
end:  {...}
 line: 2
column: 36
 }
 }
specifiers: [...] (1)
  ImportSpecifier {...}
 type: "ImportSpecifier"
start: 18
end: 21
loc:  {...}
 start:  {...}
 line: 2
column: 9
 }
end:  {...}
 line: 2
column: 12
 }
 }
imported: Identifier {...}
 type: "Identifier"
start: 18
end: 21
loc:  {...}
 start:  {...}
 line: 2
column: 9
 }
end:  {...}
 line: 2
column: 12
 }
 }
name: "Box"
 }
local: Identifier {...}
 type: "Identifier"
start: 18
end: 21
loc:  {...}
 start:  {...}
 line: 2
column: 9
 }
end:  {...}
 line: 2
column: 12
 }
 }
name: "Box"
 }
 }
 ]
source: Literal {...}
 type: "Literal"
start: 28
end: 45
loc:  {...}
 start:  {...}
 line: 2
column: 19
 }
end:  {...}
 line: 2
column: 36
 }
 }
value: "./Box.svelte.ts"
raw: "'./Box.svelte.ts'"
 }
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 48
end: 69
loc:  {...}
 start:  {...}
 line: 3
column: 2
 }
end:  {...}
 line: 3
column: 23
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 54
end: 68
loc:  {...}
 start:  {...}
 line: 3
column: 8
 }
end:  {...}
 line: 3
column: 22
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 54
end: 62
loc:  {...}
 start:  {...}
 line: 3
column: 8
 }
end:  {...}
 line: 3
column: 16
 }
 }
name: "MAX_SIZE"
 }
init: Literal {...}
 type: "Literal"
start: 65
end: 68
loc:  {...}
 start:  {...}
 line: 3
column: 19
 }
end:  {...}
 line: 3
column: 22
 }
 }
value: 200
raw: "200"
 }
 }
 ]
kind: "const"
 }
 VariableDeclaration {...}
 type: "VariableDeclaration"
start: 72
end: 102
loc:  {...}
 start:  {...}
 line: 5
column: 1
 }
end:  {...}
 line: 5
column: 31
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 78
end: 101
loc:  {...}
 start:  {...}
 line: 5
column: 7
 }
end:  {...}
 line: 5
column: 30
 }
 }
id: Identifier {...}
 type: "Identifier"
start: 78
end: 81
loc:  {...}
 start:  {...}
 line: 5
column: 7
 }
end:  {...}
 line: 5
column: 10
 }
 }
name: "box"
 }
init: NewExpression {...}
 type: "NewExpression"
start: 84
end: 101
loc:  {...}
 start:  {...}
 line: 5
column: 13
 }
end:  {...}
 line: 5
column: 30
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 88
end: 91
loc:  {...}
 start:  {...}
 line: 5
column: 17
 }
end:  {...}
 line: 5
column: 20
 }
 }
name: "Box"
 }
arguments: [...] (2)
  Literal {...}
 type: "Literal"
start: 92
end: 95
loc:  {...}
 start:  {...}
 line: 5
column: 21
 }
end:  {...}
 line: 5
column: 24
 }
 }
value: 100
raw: "100"
 }
 Literal {...}
 type: "Literal"
start: 97
end: 100
loc:  {...}
 start:  {...}
 line: 5
column: 26
 }
end:  {...}
 line: 5
column: 29
 }
 }
value: 100
raw: "100"
 }
 ]
 }
 }
 ]
kind: "const"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern