Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
GridGallery.svelte
runes
Runes are available from Svelte 5 onwards, and this playground is using Svelte 3.31.2.
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>
import GridGallery from './GridGallery.svelte'
let rows = 2
let cols = 3
let growX = 7
let growY = 2
let duration = 600
let activeClassName = 'GridGalleryActiveItem'
$: cs = Array(rows*cols)
</script>
Rows: <input type="number"bind:value={rows} style="width:3rem">
Cols: <input type="number"bind:value={cols} style="width:3rem">
GrowX: <input type="number"bind:value={growX} style="width:3rem">
GrowY: <input type="number"bind:value={growY} style="width:3rem">
<GridGallery class="gg" {growX} {growY} {rows} {cols} {duration} {activeClassName}>
{#each cs as c, ix}
<div class="c" style="position:relative;background-image:url(https://loremflickr.com/{610+ix}/{610+ix}/rio)">
<span style="position:absolute; bottom:0; left:0; width:100%; color:white; filter: drop-shadow(2px 4px 6px black);"><center>
Image {ix+1}
</center></span>
</div>
{/each}
</GridGallery>
<style>
.c{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition:all 600ms;
}
:global(.gg) {
height:calc( 100% - 3rem);
}
/*
Error compiling component
WebAssembly.instantiateStreaming(): value type opcode @+13
999
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
›
⌄
/* App.svelte generated by Svelte v3.31.2 */
import {
SvelteComponent,
append,
attr,
create_component,
destroy_component,
destroy_each,
detach,
element,
empty,
init,
insert,
listen,
mount_component,
noop,
run_all,
safe_not_equal,
set_input_value,
set_style,
space,
text,
to_number,
transition_in,
transition_out
} from "svelte/internal";
import GridGallery from "./GridGallery.svelte";
function add_css() {
var style = element("style");
style.id = "svelte-178y9da-style";
style.textContent = ".c.svelte-178y9da{background-size:cover;background-repeat:no-repeat;background-position:center;transition:all 600ms}.gg{height:calc( 100% - 3rem)}";
append(document.head, style);
}
result = svelte.compile(source, {
generate: ,
});9
1
›
.c.svelte-178y9da{background-size:cover;background-repeat:no-repeat;background-position:center;transition:all 600ms}.gg{height:calc( 100% - 3rem)}
{
html: Fragment {...}
- start: 218
- end: 891
- type: "Fragment"
children: [...] (11)
Text {...}
- start: 217
- end: 224
- type: "Text"
- raw: "\nRows: "
- data: "\nRows: "
} Element {...}
- start: 224
- end: 281
- type: "Element"
- name: "input"
attributes: [...] (3)
Attribute {...}
- start: 231
- end: 244
- type: "Attribute"
- name: "type"
value: [...] (1)
Text {...}
- start: 237
- end: 243
- type: "Text"
- raw: "number"
- data: "number"
}
]
} Attribute {...}
- start: 262
- end: 280
- type: "Attribute"
- name: "style"
value: [...] (1)
Text {...}
- start: 269
- end: 279
- type: "Text"
- raw: "width:3rem"
- data: "width:3rem"
}
]
} Binding {...}
- start: 244
- end: 261
- type: "Binding"
- name: "value"
- modifiers: []
expression: Identifier {...}
- type: "Identifier"
- start: 256
- end: 260
loc: {...}
start: {...}
- line: 11
- column: 38
}end: {...}
- line: 11
- column: 42
}
}- name: "rows"
}
}
]- children: []
} Text {...}
- start: 281
- end: 288
- type: "Text"
- raw: "\nCols: "
- data: "\nCols: "
} Element {...}
- start: 288
- end: 345
- type: "Element"
- name: "input"
attributes: [...] (3)
Attribute {...}
- start: 295
- end: 308
- type: "Attribute"
- name: "type"
value: [...] (1)
Text {...}
- start: 301
- end: 307
- type: "Text"
- raw: "number"
- data: "number"
}
]
} Attribute {...}
- start: 326
- end: 344
- type: "Attribute"
- name: "style"
value: [...] (1)
Text {...}
- start: 333
- end: 343
- type: "Text"
- raw: "width:3rem"
- data: "width:3rem"
}
]
} Binding {...}
- start: 308
- end: 325
- type: "Binding"
- name: "value"
- modifiers: []
expression: Identifier {...}
- type: "Identifier"
- start: 320
- end: 324
loc: {...}
start: {...}
- line: 12
- column: 38
}end: {...}
- line: 12
- column: 42
}
}- name: "cols"
}
}
]- children: []
} Text {...}
- start: 345
- end: 353
- type: "Text"
- raw: "\nGrowX: "
- data: "\nGrowX: "
} Element {...}
- start: 353
- end: 411
- type: "Element"
- name: "input"
attributes: [...] (3)
Attribute {...}
- start: 360
- end: 373
- type: "Attribute"
- name: "type"
value: [...] (1)
Text {...}
- start: 366
- end: 372
- type: "Text"
- raw: "number"
- data: "number"
}
]
} Attribute {...}
- start: 392
- end: 410
- type: "Attribute"
- name: "style"
value: [...] (1)
Text {...}
- start: 399
- end: 409
- type: "Text"
- raw: "width:3rem"
- data: "width:3rem"
}
]
} Binding {...}
- start: 373
- end: 391
- type: "Binding"
- name: "value"
- modifiers: []
expression: Identifier {...}
- type: "Identifier"
- start: 385
- end: 390
loc: {...}
start: {...}
- line: 13
- column: 39
}end: {...}
- line: 13
- column: 44
}
}- name: "growX"
}
}
]- children: []
} Text {...}
- start: 411
- end: 419
- type: "Text"
- raw: "\nGrowY: "
- data: "\nGrowY: "
} Element {...}
- start: 419
- end: 477
- type: "Element"
- name: "input"
attributes: [...] (3)
Attribute {...}
- start: 426
- end: 439
- type: "Attribute"
- name: "type"
value: [...] (1)
Text {...}
- start: 432
- end: 438
- type: "Text"
- raw: "number"
- data: "number"
}
]
} Attribute {...}
- start: 458
- end: 476
- type: "Attribute"
- name: "style"
value: [...] (1)
Text {...}
- start: 465
- end: 475
- type: "Text"
- raw: "width:3rem"
- data: "width:3rem"
}
]
} Binding {...}
- start: 439
- end: 457
- type: "Binding"
- name: "value"
- modifiers: []
expression: Identifier {...}
- type: "Identifier"
- start: 451
- end: 456
loc: {...}
start: {...}
- line: 14
- column: 39
}end: {...}
- line: 14
- column: 44
}
}- name: "growY"
}
}
]- children: []
} Text {...}
- start: 477
- end: 478
- type: "Text"
- raw: "\n"
- data: "\n"
} InlineComponent {...}
- start: 478
- end: 891
- type: "InlineComponent"
- name: "GridGallery"
attributes: [...] (7)
Attribute {...}
- start: 491
- end: 501
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 498
- end: 500
- type: "Text"
- raw: "gg"
- data: "gg"
}
]
} Attribute {...}
- start: 502
- end: 509
- type: "Attribute"
- name: "growX"
value: [...] (1)
AttributeShorthand {...}
- start: 503
- end: 508
- type: "AttributeShorthand"
expression: Identifier {...}
- start: 503
- end: 508
- type: "Identifier"
- name: "growX"
}
}
]
} Attribute {...}
- start: 510
- end: 517
- type: "Attribute"
- name: "growY"
value: [...] (1)
AttributeShorthand {...}
- start: 511
- end: 516
- type: "AttributeShorthand"
expression: Identifier {...}
- start: 511
- end: 516
- type: "Identifier"
- name: "growY"
}
}
]
} Attribute {...}
- start: 518
- end: 524
- type: "Attribute"
- name: "rows"
value: [...] (1)
AttributeShorthand {...}
- start: 519
- end: 523
- type: "AttributeShorthand"
expression: Identifier {...}
- start: 519
- end: 523
- type: "Identifier"
- name: "rows"
}
}
]
} Attribute {...}
- start: 525
- end: 531
- type: "Attribute"
- name: "cols"
value: [...] (1)
AttributeShorthand {...}
- start: 526
- end: 530
- type: "AttributeShorthand"
expression: Identifier {...}
- start: 526
- end: 530
- type: "Identifier"
- name: "cols"
}
}
]
} Attribute {...}
- start: 532
- end: 542
- type: "Attribute"
- name: "duration"
value: [...] (1)
AttributeShorthand {...}
- start: 533
- end: 541
- type: "AttributeShorthand"
expression: Identifier {...}
- start: 533
- end: 541
- type: "Identifier"
- name: "duration"
}
}
]
} Attribute {...}
- start: 543
- end: 560
- type: "Attribute"
- name: "activeClassName"
value: [...] (1)
AttributeShorthand {...}
- start: 544
- end: 559
- type: "AttributeShorthand"
expression: Identifier {...}
- start: 544
- end: 559
- type: "Identifier"
- name: "activeClassName"
}
}
]
}
]children: [...] (3)
Text {...}
- start: 561
- end: 563
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} EachBlock {...}
- start: 563
- end: 876
- type: "EachBlock"
expression: Identifier {...}
- type: "Identifier"
- start: 570
- end: 572
loc: {...}
start: {...}
- line: 16
- column: 8
}end: {...}
- line: 16
- column: 10
}
}- name: "cs"
}children: [...] (1)
Element {...}
- start: 584
- end: 867
- type: "Element"
- name: "div"
attributes: [...] (2)
Attribute {...}
- start: 589
- end: 598
- type: "Attribute"
- name: "class"
value: [...] (1)
Text {...}
- start: 596
- end: 597
- type: "Text"
- raw: "c"
- data: "c svelte-178y9da"
}
]
} Attribute {...}
- start: 599
- end: 692
- type: "Attribute"
- name: "style"
value: [...] (5)
Text {...}
- start: 606
- end: 670
- type: "Text"
- raw: "position:relative;background-image:url(https://loremflickr.com/"
- data: "position:relative;background-image:url(https://loremflickr.com/"
} MustacheTag {...}
- start: 669
- end: 677
- type: "MustacheTag"
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 670
- end: 676
loc: {...}
start: {...}
- line: 17
- column: 87
}end: {...}
- line: 17
- column: 93
}
}left: Literal {...}
- type: "Literal"
- start: 670
- end: 673
loc: {...}
start: {...}
- line: 17
- column: 87
}end: {...}
- line: 17
- column: 90
}
}- value: 610
- raw: "610"
}- operator: "+"
right: MemberExpression {...}
- type: "MemberExpression"
- start: 22
- end: 64
object: Identifier {...}
- type: "Identifier"
- start: 22
- end: 45
- name: "#ctx"
loc: {...}
start: {...}
- line: 17
- column: 91
}end: {...}
- line: 17
- column: 93
}
}
}property: Literal {...}
- type: "Literal"
- value: 11
}- computed: true
- optional: false
leadingComments: [...] (1)
Block {...}
- type: "Block"
- value: "ix"
- start: 0
- end: 21
- has_trailing_newline: false
}
]
}
}
} Text {...}
- start: 677
- end: 679
- type: "Text"
- raw: "/"
- data: "/"
} MustacheTag {...}
- start: 678
- end: 686
- type: "MustacheTag"
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 679
- end: 685
loc: {...}
start: {...}
- line: 17
- column: 96
}end: {...}
- line: 17
- column: 102
}
}left: Literal {...}
- type: "Literal"
- start: 679
- end: 682
loc: {...}
start: {...}
- line: 17
- column: 96
}end: {...}
- line: 17
- column: 99
}
}- value: 610
- raw: "610"
}- operator: "+"
right: MemberExpression {...}
- type: "MemberExpression"
- start: 22
- end: 64
object: Identifier {...}
- type: "Identifier"
- start: 22
- end: 45
- name: "#ctx"
loc: {...}
start: {...}
- line: 17
- column: 100
}end: {...}
- line: 17
- column: 102
}
}
}property: Literal {...}
- type: "Literal"
- value: 11
}- computed: true
- optional: false
leadingComments: [...] (1)
Block {...}
- type: "Block"
- value: "ix"
- start: 0
- end: 21
- has_trailing_newline: false
}
]
}
}
} Text {...}
- start: 686
- end: 691
- type: "Text"
- raw: "/rio)"
- data: "/rio)"
}
]
}
]children: [...] (3)
Text {...}
- start: 693
- end: 696
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} Element {...}
- start: 696
- end: 857
- type: "Element"
- name: "span"
attributes: [...] (1)
Attribute {...}
- start: 702
- end: 811
- type: "Attribute"
- name: "style"
value: [...] (1)
Text {...}
- start: 709
- end: 810
- type: "Text"
- raw: "position:absolute; bottom:0; left:0; width:100%; color:white; filter: drop-shadow(2px 4px 6px black);"
- data: "position:absolute; bottom:0; left:0; width:100%; color:white; filter: drop-shadow(2px 4px 6px black);"
}
]
}
]children: [...] (1)
Element {...}
- start: 812
- end: 850
- type: "Element"
- name: "center"
- attributes: []
children: [...] (3)
Text {...}
- start: 820
- end: 831
- type: "Text"
- raw: "\n\t\t\t Image "
- data: "\n\t\t\t Image "
} MustacheTag {...}
- start: 831
- end: 837
- type: "MustacheTag"
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 832
- end: 836
loc: {...}
start: {...}
- line: 19
- column: 11
}end: {...}
- line: 19
- column: 15
}
}left: MemberExpression {...}
- type: "MemberExpression"
- start: 22
- end: 64
object: Identifier {...}
- type: "Identifier"
- start: 22
- end: 45
- name: "#ctx"
loc: {...}
start: {...}
- line: 19
- column: 11
}end: {...}
- line: 19
- column: 13
}
}
}property: Literal {...}
- type: "Literal"
- value: 11
}- computed: true
- optional: false
leadingComments: [...] (1)
Block {...}
- type: "Block"
- value: "ix"
- start: 0
- end: 21
- has_trailing_newline: false
}
]
}- operator: "+"
right: Literal {...}
- type: "Literal"
- start: 835
- end: 836
loc: {...}
start: {...}
- line: 19
- column: 14
}end: {...}
- line: 19
- column: 15
}
}- value: 1
- raw: "1"
}
}
} Text {...}
- start: 837
- end: 841
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
}
]
} Text {...}
- start: 857
- end: 861
- type: "Text"
- raw: " \n\n\t"
- data: " \n\n\t"
}
]
}
]context: Identifier {...}
- type: "Identifier"
- name: "c"
- start: 576
- end: 577
}- index: "ix"
} Text {...}
- start: 876
- end: 877
- type: "Text"
- raw: "\n"
- data: "\n"
}
]
} Text {...}
- start: 891
- end: 892
- type: "Text"
- raw: "\n"
- data: "\n"
}
]
}css: Style {...}
- type: "Style"
- start: 892
- end: 1164
- attributes: []
children: [...] (2)
Rule {...}
- type: "Rule"
selector: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "c"
- start: 901
- end: 903
}
]- start: 901
- end: 903
}
]- start: 901
- end: 903
}block: Block {...}
- type: "Block"
children: [...] (4)
Declaration {...}
- type: "Declaration"
- important: false
- property: "background-size"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "cover"
- start: 924
- end: 929
}
]- start: 923
- end: 929
}- start: 907
- end: 929
} Declaration {...}
- type: "Declaration"
- important: false
- property: "background-repeat"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "no-repeat"
- start: 952
- end: 961
}
]- start: 951
- end: 961
}- start: 933
- end: 961
} Declaration {...}
- type: "Declaration"
- important: false
- property: "background-position"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 988
- end: 994
}
]- start: 987
- end: 994
}- start: 967
- end: 994
} Declaration {...}
- type: "Declaration"
- important: false
- property: "transition"
value: Value {...}
- type: "Value"
children: [...] (3)
Identifier {...}
- type: "Identifier"
- name: "all"
- start: 1009
- end: 1012
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Dimension {...}
- type: "Dimension"
- value: "600"
- unit: "ms"
- start: 1013
- end: 1018
}
]- start: 1009
- end: 1018
}- start: 998
- end: 1018
}
]- start: 903
- end: 1022
}- start: 901
- end: 1022
} Rule {...}
- type: "Rule"
selector: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "global"
children: [...] (1)
Raw {...}
- type: "Raw"
- value: ".gg"
- start: 1034
- end: 1037
}
]- start: 1026
- end: 1038
}
]- start: 1026
- end: 1038
}
]- start: 1026
- end: 1038
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "height"
value: Value {...}
- type: "Value"
children: [...] (1)
Function {...}
- type: "Function"
- name: "calc"
children: [...] (5)
Percentage {...}
- type: "Percentage"
- value: "100"
- start: 1056
- end: 1060
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Operator {...}
- type: "Operator"
- value: "-"
- start: 1061
- end: 1062
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Dimension {...}
- type: "Dimension"
- value: "3"
- unit: "rem"
- start: 1063
- end: 1067
}
]- start: 1050
- end: 1068
}
]- start: 1050
- end: 1068
}- start: 1043
- end: 1068
}
]- start: 1039
- end: 1072
}- start: 1026
- end: 1072
}
]content: {...}
- start: 899
- end: 1156
- styles: "\n\t.c{\n\t\tbackground-size: cover;\n\t\tbackground-repeat: no-repeat;\n background-position: center;\n\t\ttransition:all 600ms;\n\t}\n\t\n\t:global(.gg) {\n\t\theight:calc( 100% - 3rem);\n\t}\n\t/*\n\t:global(.GridGalleryActiveItem){\n\t\tborder: solid 1px white !important;\n\t}\n\t*/\n"
}
}instance: Script {...}
- type: "Script"
- start: 0
- end: 217
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 208
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 10
- column: 0
}
}body: [...] (8)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 56
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 47
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 17
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 19
}
}local: Identifier {...}
- type: "Identifier"
- start: 17
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 19
}
}- name: "GridGallery"
}
}
]source: Literal {...}
- type: "Literal"
- start: 34
- end: 56
loc: {...}
start: {...}
- line: 2
- column: 25
}end: {...}
- line: 2
- column: 47
}
}- value: "./GridGallery.svelte"
- raw: "'./GridGallery.svelte'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 58
- end: 70
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 13
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 62
- end: 70
loc: {...}
start: {...}
- line: 3
- column: 5
}end: {...}
- line: 3
- column: 13
}
}id: Identifier {...}
- type: "Identifier"
- start: 62
- end: 66
loc: {...}
start: {...}
- line: 3
- column: 5
}end: {...}
- line: 3
- column: 9
}
}- name: "rows"
}init: Literal {...}
- type: "Literal"
- start: 69
- end: 70
loc: {...}
start: {...}
- line: 3
- column: 12
}end: {...}
- line: 3
- column: 13
}
}- value: 2
- raw: "2"
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 72
- end: 84
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 13
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 76
- end: 84
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 13
}
}id: Identifier {...}
- type: "Identifier"
- start: 76
- end: 80
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 9
}
}- name: "cols"
}init: Literal {...}
- type: "Literal"
- start: 83
- end: 84
loc: {...}
start: {...}
- line: 4
- column: 12
}end: {...}
- line: 4
- column: 13
}
}- value: 3
- raw: "3"
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 86
- end: 99
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 14
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 90
- end: 99
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 14
}
}id: Identifier {...}
- type: "Identifier"
- start: 90
- end: 95
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 10
}
}- name: "growX"
}init: Literal {...}
- type: "Literal"
- start: 98
- end: 99
loc: {...}
start: {...}
- line: 5
- column: 13
}end: {...}
- line: 5
- column: 14
}
}- value: 7
- raw: "7"
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 101
- end: 114
loc: {...}
start: {...}
- line: 6
- column: 1
}end: {...}
- line: 6
- column: 14
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 105
- end: 114
loc: {...}
start: {...}
- line: 6
- column: 5
}end: {...}
- line: 6
- column: 14
}
}id: Identifier {...}
- type: "Identifier"
- start: 105
- end: 110
loc: {...}
start: {...}
- line: 6
- column: 5
}end: {...}
- line: 6
- column: 10
}
}- name: "growY"
}init: Literal {...}
- type: "Literal"
- start: 113
- end: 114
loc: {...}
start: {...}
- line: 6
- column: 13
}end: {...}
- line: 6
- column: 14
}
}- value: 2
- raw: "2"
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 116
- end: 134
loc: {...}
start: {...}
- line: 7
- column: 1
}end: {...}
- line: 7
- column: 19
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 120
- end: 134
loc: {...}
start: {...}
- line: 7
- column: 5
}end: {...}
- line: 7
- column: 19
}
}id: Identifier {...}
- type: "Identifier"
- start: 120
- end: 128
loc: {...}
start: {...}
- line: 7
- column: 5
}end: {...}
- line: 7
- column: 13
}
}- name: "duration"
}init: Literal {...}
- type: "Literal"
- start: 131
- end: 134
loc: {...}
start: {...}
- line: 7
- column: 16
}end: {...}
- line: 7
- column: 19
}
}- value: 600
- raw: "600"
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 136
- end: 181
loc: {...}
start: {...}
- line: 8
- column: 1
}end: {...}
- line: 8
- column: 46
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 140
- end: 181
loc: {...}
start: {...}
- line: 8
- column: 5
}end: {...}
- line: 8
- column: 46
}
}id: Identifier {...}
- type: "Identifier"
- start: 140
- end: 155
loc: {...}
start: {...}
- line: 8
- column: 5
}end: {...}
- line: 8
- column: 20
}
}- name: "activeClassName"
}init: Literal {...}
- type: "Literal"
- start: 158
- end: 181
loc: {...}
start: {...}
- line: 8
- column: 23
}end: {...}
- line: 8
- column: 46
}
}- value: "GridGalleryActiveItem"
- raw: "'GridGalleryActiveItem'"
}
}
]- kind: "let"
} LabeledStatement {...}
- type: "LabeledStatement"
- start: 183
- end: 207
loc: {...}
start: {...}
- line: 9
- column: 1
}end: {...}
- line: 9
- column: 25
}
}body: ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 186
- end: 207
loc: {...}
start: {...}
- line: 9
- column: 4
}end: {...}
- line: 9
- column: 25
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 186
- end: 207
loc: {...}
start: {...}
- line: 9
- column: 4
}end: {...}
- line: 9
- column: 25
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 186
- end: 188
loc: {...}
start: {...}
- line: 9
- column: 4
}end: {...}
- line: 9
- column: 6
}
}- name: "cs"
}right: CallExpression {...}
- type: "CallExpression"
- start: 191
- end: 207
loc: {...}
start: {...}
- line: 9
- column: 9
}end: {...}
- line: 9
- column: 25
}
}callee: Identifier {...}
- type: "Identifier"
- start: 191
- end: 196
loc: {...}
start: {...}
- line: 9
- column: 9
}end: {...}
- line: 9
- column: 14
}
}- name: "Array"
}arguments: [...] (1)
BinaryExpression {...}
- type: "BinaryExpression"
- start: 197
- end: 206
loc: {...}
start: {...}
- line: 9
- column: 15
}end: {...}
- line: 9
- column: 24
}
}left: Identifier {...}
- type: "Identifier"
- start: 197
- end: 201
loc: {...}
start: {...}
- line: 9
- column: 15
}end: {...}
- line: 9
- column: 19
}
}- name: "rows"
}- operator: "*"
right: Identifier {...}
- type: "Identifier"
- start: 202
- end: 206
loc: {...}
start: {...}
- line: 9
- column: 20
}end: {...}
- line: 9
- column: 24
}
}- name: "cols"
}
}
]- optional: false
}
}
}label: Identifier {...}
- type: "Identifier"
- start: 183
- end: 184
loc: {...}
start: {...}
- line: 9
- column: 1
}end: {...}
- line: 9
- column: 2
}
}- name: "$"
}
}
]- sourceType: "module"
}
}- module: undefined
}
The AST is not public API and may change at any point in time