(cache)snippets on class • Playground • Svelte

App.svelte

Box.svelte.ts

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

const MAX_SIZE = 200;

const box = new Box(100, 100, orangeBox);

</script>

<label>

{box.width}

</label>

<label>

{box.height}

</label>

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

<hr>

{@render box.snippet(box)}

<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>

{#snippet orangeBox(boxMeasures)}

<div

class="box"

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

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

{boxMeasures.area}

</div>

{/snippet}

import 'svelte/internal/disclose-version';

import 'svelte/internal/flags/legacy';

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

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

const orangeBox = ($$anchor, boxMeasures = $.noop) => {

var div = root_1();

let styles;

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

$.reset(div);

$.template_effect(() => {

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

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

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

});

$.set_text(text, boxMeasures().area);

});

$.append($$anchor, div);

};

var root_1 = $.from_html(`<div class="box svelte-15pixbb"> </div>`);

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

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

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

$.push($$props, false);

const MAX_SIZE = 200;

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

$.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_1 = $.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_2 = $.sibling(input_1);

$.reset(label_1);

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

button.__click = [on_click, box];

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

$.snippet(node, () => $.get(box).snippet, () => $.get(box));

$.template_effect(() => {

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

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

});

$.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']);

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: 421
end: 816
attributes: []
children: [...] (3)
  Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 430
end: 435
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 430
end: 435
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "label"
start: 430
end: 435
 }
 ]
start: 430
end: 435
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 436
end: 480
children: [...] (2)
  Declaration {...}
 type: "Declaration"
start: 440
end: 453
property: "display"
value: "flex"
 }
 Declaration {...}
 type: "Declaration"
start: 457
end: 476
property: "align-items"
value: "center"
 }
 ]
 }
start: 430
end: 480
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 483
end: 485
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 483
end: 485
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  TypeSelector {...}
 type: "TypeSelector"
name: "hr"
start: 483
end: 485
 }
 ]
start: 483
end: 485
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 486
end: 556
children: [...] (3)
  Declaration {...}
 type: "Declaration"
start: 490
end: 503
property: "margin"
value: "1em 0"
 }
 Declaration {...}
 type: "Declaration"
start: 507
end: 519
property: "border"
value: "none"
 }
 Declaration {...}
 type: "Declaration"
start: 523
end: 552
property: "border-bottom"
value: "1px solid #888"
 }
 ]
 }
start: 483
end: 556
 }
 Rule {...}
 type: "Rule"
prelude: SelectorList {...}
 type: "SelectorList"
start: 559
end: 563
children: [...] (1)
  ComplexSelector {...}
 type: "ComplexSelector"
start: 559
end: 563
children: [...] (1)
  RelativeSelector {...}
 type: "RelativeSelector"
combinator: null
selectors: [...] (1)
  ClassSelector {...}
 type: "ClassSelector"
name: "box"
start: 559
end: 563
 }
 ]
start: 559
end: 563
 }
 ]
 }
 ]
 }
block: Block {...}
 type: "Block"
start: 564
end: 807
children: [...] (7)
  Declaration {...}
 type: "Declaration"
start: 568
end: 640
property: "background"
value: "radial-gradient(at 25% 25%, hsl(15 100 60), hsl(15 100 50))"
 }
 Declaration {...}
 type: "Declaration"
start: 644
end: 662
property: "border-radius"
value: "2px"
 }
 Declaration {...}
 type: "Declaration"
start: 666
end: 716
property: "filter"
value: "drop-shadow(0 0 10px hsl(15 100 50 / 0.3))"
 }
 Declaration {...}
 type: "Declaration"
start: 720
end: 733
property: "display"
value: "flex"
 }
 Declaration {...}
 type: "Declaration"
start: 737
end: 756
property: "align-items"
value: "center"
 }
 Declaration {...}
 type: "Declaration"
start: 760
end: 783
property: "justify-content"
value: "center"
 }
 Declaration {...}
 type: "Declaration"
start: 787
end: 803
property: "overflow"
value: "hidden"
 }
 ]
 }
start: 559
end: 807
 }
 ]
content:  {...}
 start: 428
end: 808
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: 125
end: 992
type: "Root"
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (13)
  Text {...}
 type: "Text"
start: 123
end: 125
raw: "\n\n"
data: "\n\n"
 }
 RegularElement {...}
 type: "RegularElement"
start: 125
end: 224
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: 132
end: 134
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 134
end: 202
name: "input"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 141
end: 153
name: "type"
value: [...] (1)
  Text {...}
 start: 147
end: 152
type: "Text"
raw: "range"
data: "range"
 }
 ]
 }
 BindDirective {...}
 start: 154
end: 176
type: "BindDirective"
name: "value"
expression: MemberExpression {...}
 type: "MemberExpression"
start: 166
end: 175
loc:  {...}
 start:  {...}
 line: 9
column: 33
 }
end:  {...}
 line: 9
column: 42
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 166
end: 169
loc:  {...}
 start:  {...}
 line: 9
column: 33
 }
end:  {...}
 line: 9
column: 36
 }
 }
name: "box"
 }
property: Identifier {...}
 type: "Identifier"
start: 170
end: 175
loc:  {...}
 start:  {...}
 line: 9
column: 37
 }
end:  {...}
 line: 9
column: 42
 }
 }
name: "width"
 }
computed: false
optional: false
 }
modifiers: []
 }
 Attribute {...}
 type: "Attribute"
start: 177
end: 184
name: "min"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 181
end: 184
expression: Literal {...}
 type: "Literal"
start: 182
end: 183
loc:  {...}
 start:  {...}
 line: 9
column: 49
 }
end:  {...}
 line: 9
column: 50
 }
 }
value: 0
raw: "0"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 185
end: 199
name: "max"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 189
end: 199
expression: Identifier {...}
 type: "Identifier"
start: 190
end: 198
loc:  {...}
 start:  {...}
 line: 9
column: 57
 }
end:  {...}
 line: 9
column: 65
 }
 }
name: "MAX_SIZE"
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 202
end: 204
raw: " "
data: " "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 204
end: 215
expression: MemberExpression {...}
 type: "MemberExpression"
start: 205
end: 214
loc:  {...}
 start:  {...}
 line: 10
column: 2
 }
end:  {...}
 line: 10
column: 11
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 205
end: 208
loc:  {...}
 start:  {...}
 line: 10
column: 2
 }
end:  {...}
 line: 10
column: 5
 }
 }
name: "box"
 }
property: Identifier {...}
 type: "Identifier"
start: 209
end: 214
loc:  {...}
 start:  {...}
 line: 10
column: 6
 }
end:  {...}
 line: 10
column: 11
 }
 }
name: "width"
 }
computed: false
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 215
end: 216
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 224
end: 226
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 226
end: 327
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: 233
end: 235
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 235
end: 304
name: "input"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 242
end: 254
name: "type"
value: [...] (1)
  Text {...}
 start: 248
end: 253
type: "Text"
raw: "range"
data: "range"
 }
 ]
 }
 BindDirective {...}
 start: 255
end: 278
type: "BindDirective"
name: "value"
expression: MemberExpression {...}
 type: "MemberExpression"
start: 267
end: 277
loc:  {...}
 start:  {...}
 line: 14
column: 33
 }
end:  {...}
 line: 14
column: 43
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 267
end: 270
loc:  {...}
 start:  {...}
 line: 14
column: 33
 }
end:  {...}
 line: 14
column: 36
 }
 }
name: "box"
 }
property: Identifier {...}
 type: "Identifier"
start: 271
end: 277
loc:  {...}
 start:  {...}
 line: 14
column: 37
 }
end:  {...}
 line: 14
column: 43
 }
 }
name: "height"
 }
computed: false
optional: false
 }
modifiers: []
 }
 Attribute {...}
 type: "Attribute"
start: 279
end: 286
name: "min"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 283
end: 286
expression: Literal {...}
 type: "Literal"
start: 284
end: 285
loc:  {...}
 start:  {...}
 line: 14
column: 50
 }
end:  {...}
 line: 14
column: 51
 }
 }
value: 0
raw: "0"
 }
 }
 }
 Attribute {...}
 type: "Attribute"
start: 287
end: 301
name: "max"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 291
end: 301
expression: Identifier {...}
 type: "Identifier"
start: 292
end: 300
loc:  {...}
 start:  {...}
 line: 14
column: 58
 }
end:  {...}
 line: 14
column: 66
 }
 }
name: "MAX_SIZE"
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: []
 }
 }
 Text {...}
 type: "Text"
start: 304
end: 306
raw: " "
data: " "
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 306
end: 318
expression: MemberExpression {...}
 type: "MemberExpression"
start: 307
end: 317
loc:  {...}
 start:  {...}
 line: 15
column: 2
 }
end:  {...}
 line: 15
column: 12
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 307
end: 310
loc:  {...}
 start:  {...}
 line: 15
column: 2
 }
end:  {...}
 line: 15
column: 5
 }
 }
name: "box"
 }
property: Identifier {...}
 type: "Identifier"
start: 311
end: 317
loc:  {...}
 start:  {...}
 line: 15
column: 6
 }
end:  {...}
 line: 15
column: 12
 }
 }
name: "height"
 }
computed: false
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 318
end: 319
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 327
end: 329
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 329
end: 385
name: "button"
attributes: [...] (1)
  Attribute {...}
 type: "Attribute"
start: 337
end: 367
name: "onclick"
value: ExpressionTag {...}
 type: "ExpressionTag"
start: 345
end: 367
expression: ArrowFunctionExpression {...}
 type: "ArrowFunctionExpression"
start: 346
end: 366
loc:  {...}
 start:  {...}
 line: 18
column: 17
 }
end:  {...}
 line: 18
column: 37
 }
 }
id: null
expression: true
generator: false
async: false
params: []
body: CallExpression {...}
 type: "CallExpression"
start: 352
end: 366
loc:  {...}
 start:  {...}
 line: 18
column: 23
 }
end:  {...}
 line: 18
column: 37
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 352
end: 364
loc:  {...}
 start:  {...}
 line: 18
column: 23
 }
end:  {...}
 line: 18
column: 35
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 352
end: 355
loc:  {...}
 start:  {...}
 line: 18
column: 23
 }
end:  {...}
 line: 18
column: 26
 }
 }
name: "box"
 }
property: Identifier {...}
 type: "Identifier"
start: 356
end: 364
loc:  {...}
 start:  {...}
 line: 18
column: 27
 }
end:  {...}
 line: 18
column: 35
 }
 }
name: "embiggen"
 }
computed: false
optional: false
 }
arguments: []
optional: false
 }
 }
 }
 }
 ]
fragment: Fragment {...}
 type: "Fragment"
nodes: [...] (1)
  Text {...}
 type: "Text"
start: 368
end: 376
raw: "embiggen"
data: "embiggen"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 385
end: 387
raw: " "
data: " "
 }
 RegularElement {...}
 type: "RegularElement"
start: 387
end: 391
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: 391
end: 393
raw: " "
data: " "
 }
 RenderTag {...}
 type: "RenderTag"
start: 393
end: 419
expression: CallExpression {...}
 type: "CallExpression"
start: 402
end: 418
loc:  {...}
 start:  {...}
 line: 22
column: 9
 }
end:  {...}
 line: 22
column: 25
 }
 }
callee: MemberExpression {...}
 type: "MemberExpression"
start: 402
end: 413
loc:  {...}
 start:  {...}
 line: 22
column: 9
 }
end:  {...}
 line: 22
column: 20
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 402
end: 405
loc:  {...}
 start:  {...}
 line: 22
column: 9
 }
end:  {...}
 line: 22
column: 12
 }
 }
name: "box"
 }
property: Identifier {...}
 type: "Identifier"
start: 406
end: 413
loc:  {...}
 start:  {...}
 line: 22
column: 13
 }
end:  {...}
 line: 22
column: 20
 }
 }
name: "snippet"
 }
computed: false
optional: false
 }
arguments: [...] (1)
  Identifier {...}
 type: "Identifier"
start: 414
end: 417
loc:  {...}
 start:  {...}
 line: 22
column: 21
 }
end:  {...}
 line: 22
column: 24
 }
 }
name: "box"
 }
 ]
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 419
end: 421
raw: "\n\n"
data: "\n\n"
 }
 Text {...}
 type: "Text"
start: 816
end: 818
raw: "\n\n"
data: "\n\n"
 }
 SnippetBlock {...}
 type: "SnippetBlock"
start: 818
end: 992
expression: Identifier {...}
 type: "Identifier"
start: 828
end: 837
name: "orangeBox"
 }
typeParams: undefined
parameters: [...] (1)
  Identifier {...}
 type: "Identifier"
start: 838
end: 849
loc:  {...}
 start:  {...}
 line: 47
column: 20
 }
end:  {...}
 line: 47
column: 31
 }
 }
name: "boxMeasures"
 }
 ]
body: Fragment {...}
 type: "Fragment"
nodes: [...] (3)
  Text {...}
 type: "Text"
start: 851
end: 853
raw: "\n\t"
data: "\n\t"
 }
 RegularElement {...}
 type: "RegularElement"
start: 853
end: 981
name: "div"
attributes: [...] (4)
  Attribute {...}
 type: "Attribute"
start: 860
end: 871
name: "class"
value: [...] (1)
  Text {...}
 start: 867
end: 870
type: "Text"
raw: "box"
data: "box"
 }
 ]
 }
 StyleDirective {...}
 start: 874
end: 909
type: "StyleDirective"
name: "width"
modifiers: []
value: [...] (2)
  ExpressionTag {...}
 type: "ExpressionTag"
start: 887
end: 906
expression: MemberExpression {...}
 type: "MemberExpression"
start: 888
end: 905
loc:  {...}
 start:  {...}
 line: 50
column: 16
 }
end:  {...}
 line: 50
column: 33
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 888
end: 899
loc:  {...}
 start:  {...}
 line: 50
column: 16
 }
end:  {...}
 line: 50
column: 27
 }
 }
name: "boxMeasures"
 }
property: Identifier {...}
 type: "Identifier"
start: 900
end: 905
loc:  {...}
 start:  {...}
 line: 50
column: 28
 }
end:  {...}
 line: 50
column: 33
 }
 }
name: "width"
 }
computed: false
optional: false
 }
 }
 Text {...}
 start: 906
end: 908
type: "Text"
raw: "px"
data: "px"
 }
 ]
 }
 StyleDirective {...}
 start: 912
end: 949
type: "StyleDirective"
name: "height"
modifiers: []
value: [...] (2)
  ExpressionTag {...}
 type: "ExpressionTag"
start: 926
end: 946
expression: MemberExpression {...}
 type: "MemberExpression"
start: 927
end: 945
loc:  {...}
 start:  {...}
 line: 51
column: 17
 }
end:  {...}
 line: 51
column: 35
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 927
end: 938
loc:  {...}
 start:  {...}
 line: 51
column: 17
 }
end:  {...}
 line: 51
column: 28
 }
 }
name: "boxMeasures"
 }
property: Identifier {...}
 type: "Identifier"
start: 939
end: 945
loc:  {...}
 start:  {...}
 line: 51
column: 29
 }
end:  {...}
 line: 51
column: 35
 }
 }
name: "height"
 }
computed: false
optional: false
 }
 }
 Text {...}
 start: 946
end: 948
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: 952
end: 955
raw: "\n\t\t"
data: "\n\t\t"
 }
 ExpressionTag {...}
 type: "ExpressionTag"
start: 955
end: 973
expression: MemberExpression {...}
 type: "MemberExpression"
start: 956
end: 972
loc:  {...}
 start:  {...}
 line: 53
column: 3
 }
end:  {...}
 line: 53
column: 19
 }
 }
object: Identifier {...}
 type: "Identifier"
start: 956
end: 967
loc:  {...}
 start:  {...}
 line: 53
column: 3
 }
end:  {...}
 line: 53
column: 14
 }
 }
name: "boxMeasures"
 }
property: Identifier {...}
 type: "Identifier"
start: 968
end: 972
loc:  {...}
 start:  {...}
 line: 53
column: 15
 }
end:  {...}
 line: 53
column: 19
 }
 }
name: "area"
 }
computed: false
optional: false
 }
 }
 Text {...}
 type: "Text"
start: 973
end: 975
raw: "\n\t"
data: "\n\t"
 }
 ]
 }
 }
 Text {...}
 type: "Text"
start: 981
end: 982
raw: "\n"
data: "\n"
 }
 ]
 }
 }
 ]
 }
options: null
instance: Script {...}
 type: "Script"
start: 0
end: 123
context: "default"
content: Program {...}
 type: "Program"
start: 8
end: 114
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: 113
loc:  {...}
 start:  {...}
 line: 5
column: 1
 }
end:  {...}
 line: 5
column: 42
 }
 }
declarations: [...] (1)
  VariableDeclarator {...}
 type: "VariableDeclarator"
start: 78
end: 112
loc:  {...}
 start:  {...}
 line: 5
column: 7
 }
end:  {...}
 line: 5
column: 41
 }
 }
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: 112
loc:  {...}
 start:  {...}
 line: 5
column: 13
 }
end:  {...}
 line: 5
column: 41
 }
 }
callee: Identifier {...}
 type: "Identifier"
start: 88
end: 91
loc:  {...}
 start:  {...}
 line: 5
column: 17
 }
end:  {...}
 line: 5
column: 20
 }
 }
name: "Box"
 }
arguments: [...] (3)
  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"
 }
 Identifier {...}
 type: "Identifier"
start: 102
end: 111
loc:  {...}
 start:  {...}
 line: 5
column: 31
 }
end:  {...}
 line: 5
column: 40
 }
 }
name: "orangeBox"
 }
 ]
 }
 }
 ]
kind: "const"
 }
 ]
sourceType: "module"
 }
attributes: []
 }
 }

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

modern