Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
Content.svelte
Items.svelte
runes
Runes are available from Svelte 5 onwards, and this playground is using Svelte 3.31.0.
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
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
/*
Thanks for checking this out! This is a demo of github.com/dimfeld/svelte-zoomable.
Also see the grid example at https://svelte.dev/repl/32bf500c4b8b4b718daee1fae74b6a51?version=3.32.0
And if you have any questions or comments, feel free to ping me at @dimfeld on Twitter.
*/
import { fade } from 'svelte/transition';
import { ZoomableContainer, zoomPresets } from "svelte-zoomable";
import Items from "./Items.svelte";
const data = [
{
id: "fruit",
title: "Fruits",
children: [
{
id: "apple",
title: "Apple",
content: ["Apples are good!"],
},
{
id: "banana",
title: "Banana",
content: ["Bananas are yellow"],
},
],
},
{
id: "meat",
title: "Meat",
children: [
{
id: "beef",
title: "Beef",
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.0 */
import {
SvelteComponent,
add_flush_callback,
add_render_callback,
append,
attr,
bind,
binding_callbacks,
create_component,
destroy_component,
destroy_each,
detach,
element,
init,
insert,
listen,
mount_component,
noop,
safe_not_equal,
select_option,
select_value,
set_data,
set_style,
space,
subscribe,
text,
transition_in,
transition_out
} from "svelte/internal";
import { fade } from "svelte/transition";
import { ZoomableContainer, zoomPresets } from "svelte-zoomable";
import Items from "./Items.svelte";
function add_css() {
result = svelte.compile(source, {
generate: ,
});9
1
›
body{margin:0px;padding:0px}*{box-sizing:border-box}header.svelte-1gtxwyl{display:flex;flex-direction:row;justify-content:space-between;width:100%;padding:1rem 0.5rem}#app.svelte-1gtxwyl{width:100vw;height:100vh;display:grid;grid-template-rows:2.5rem 1fr}main.svelte-1gtxwyl{width:95%;height:95%;position:relative;place-self:center}#title.svelte-1gtxwyl{margin:5px 10px}
{
html: Fragment {...}
- start: 1713
- end: 2828
- type: "Fragment"
children: [...] (3)
Text {...}
- start: 1711
- end: 1713
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} Text {...}
- start: 2203
- end: 2204
- type: "Text"
- raw: "\n"
- data: "\n"
} Element {...}
- start: 2204
- end: 2828
- type: "Element"
- name: "div"
attributes: [...] (1)
Attribute {...}
- start: 2209
- end: 2217
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 2213
- end: 2216
- type: "Text"
- raw: "app"
- data: "app"
}
]
}
]children: [...] (5)
Text {...}
- start: 2218
- end: 2220
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 2220
- end: 2676
- type: "Element"
- name: "header"
- attributes: []
children: [...] (5)
Text {...}
- start: 2228
- end: 2231
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} Element {...}
- start: 2231
- end: 2393
- type: "Element"
- name: "h3"
attributes: [...] (1)
Attribute {...}
- start: 2235
- end: 2245
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 2239
- end: 2244
- type: "Text"
- raw: "title"
- data: "title"
}
]
}
]children: [...] (3)
Text {...}
- start: 2246
- end: 2250
- type: "Text"
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} IfBlock {...}
- start: 2250
- end: 2385
- type: "IfBlock"
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 2255
- end: 2286
loc: {...}
start: {...}
- line: 116
- column: 8
}end: {...}
- line: 116
- column: 39
}
}left: ChainExpression {...}
- type: "ChainExpression"
- start: 2255
- end: 2280
loc: {...}
start: {...}
- line: 116
- column: 8
}end: {...}
- line: 116
- column: 33
}
}expression: MemberExpression {...}
- type: "MemberExpression"
- start: 2255
- end: 2280
loc: {...}
start: {...}
- line: 116
- column: 8
}end: {...}
- line: 116
- column: 33
}
}object: MemberExpression {...}
- type: "MemberExpression"
- start: 2255
- end: 2273
loc: {...}
start: {...}
- line: 116
- column: 8
}end: {...}
- line: 116
- column: 26
}
}object: MemberExpression {...}
- type: "MemberExpression"
- start: 22
- end: 64
object: Identifier {...}
- type: "Identifier"
- start: 22
- end: 45
- name: "#ctx"
loc: {...}
start: {...}
- line: 116
- column: 8
}end: {...}
- line: 116
- column: 20
}
}
}property: Literal {...}
- type: "Literal"
- value: 3
}- computed: true
- optional: false
leadingComments: [...] (1)
Block {...}
- type: "Block"
- value: "$zoomManager"
- start: 0
- end: 21
- has_trailing_newline: false
}
]
}property: Identifier {...}
- type: "Identifier"
- start: 2269
- end: 2273
loc: {...}
start: {...}
- line: 116
- column: 22
}end: {...}
- line: 116
- column: 26
}
}- name: "path"
}- computed: false
- optional: true
}property: Identifier {...}
- type: "Identifier"
- start: 2274
- end: 2280
loc: {...}
start: {...}
- line: 116
- column: 27
}end: {...}
- line: 116
- column: 33
}
}- name: "length"
}- computed: false
- optional: false
}
}- operator: "==="
right: Literal {...}
- type: "Literal"
- start: 2285
- end: 2286
loc: {...}
start: {...}
- line: 116
- column: 38
}end: {...}
- line: 116
- column: 39
}
}- value: 0
- raw: "0"
}
}children: [...] (1)
Text {...}
- start: 2287
- end: 2309
- type: "Text"
- raw: "\n\t\t\t\tClick to zoom\n\t\t\t"
- data: "Click to zoom"
}
]else: ElseBlock {...}
- start: 2339
- end: 2380
- type: "ElseBlock"
children: [...] (1)
IfBlock {...}
- start: 2339
- end: 2385
- type: "IfBlock"
- elseif: true
expression: ChainExpression {...}
- type: "ChainExpression"
- start: 2319
- end: 2338
loc: {...}
start: {...}
- line: 118
- column: 13
}end: {...}
- line: 118
- column: 32
}
}expression: MemberExpression {...}
- type: "MemberExpression"
- start: 2319
- end: 2338
loc: {...}
start: {...}
- line: 118
- column: 13
}end: {...}
- line: 118
- column: 32
}
}object: MemberExpression {...}
- type: "MemberExpression"
- start: 22
- end: 64
object: Identifier {...}
- type: "Identifier"
- start: 22
- end: 45
- name: "#ctx"
loc: {...}
start: {...}
- line: 118
- column: 13
}end: {...}
- line: 118
- column: 25
}
}
}property: Literal {...}
- type: "Literal"
- value: 3
}- computed: true
- optional: false
leadingComments: [...] (1)
Block {...}
- type: "Block"
- value: "$zoomManager"
- start: 0
- end: 21
- has_trailing_newline: false
}
]
}property: Identifier {...}
- type: "Identifier"
- start: 2333
- end: 2338
loc: {...}
start: {...}
- line: 118
- column: 27
}end: {...}
- line: 118
- column: 32
}
}- name: "title"
}- computed: false
- optional: true
}
}children: [...] (1)
MustacheTag {...}
- start: 2344
- end: 2376
- type: "MustacheTag"
expression: CallExpression {...}
- type: "CallExpression"
- start: 2345
- end: 2375
loc: {...}
start: {...}
- line: 119
- column: 5
}end: {...}
- line: 119
- column: 35
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 2345
- end: 2368
loc: {...}
start: {...}
- line: 119
- column: 5
}end: {...}
- line: 119
- column: 28
}
}object: MemberExpression {...}
- type: "MemberExpression"
- start: 2345
- end: 2363
loc: {...}
start: {...}
- line: 119
- column: 5
}end: {...}
- line: 119
- column: 23
}
}object: MemberExpression {...}
- type: "MemberExpression"
- start: 22
- end: 64
object: Identifier {...}
- type: "Identifier"
- start: 22
- end: 45
- name: "#ctx"
loc: {...}
start: {...}
- line: 119
- column: 5
}end: {...}
- line: 119
- column: 17
}
}
}property: Literal {...}
- type: "Literal"
- value: 3
}- computed: true
- optional: false
leadingComments: [...] (1)
Block {...}
- type: "Block"
- value: "$zoomManager"
- start: 0
- end: 21
- has_trailing_newline: false
}
]
}property: Identifier {...}
- type: "Identifier"
- start: 2358
- end: 2363
loc: {...}
start: {...}
- line: 119
- column: 18
}end: {...}
- line: 119
- column: 23
}
}- name: "title"
}- computed: false
- optional: false
}property: Identifier {...}
- type: "Identifier"
- start: 2364
- end: 2368
loc: {...}
start: {...}
- line: 119
- column: 24
}end: {...}
- line: 119
- column: 28
}
}- name: "join"
}- computed: false
- optional: false
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 2369
- end: 2374
loc: {...}
start: {...}
- line: 119
- column: 29
}end: {...}
- line: 119
- column: 34
}
}- value: " > "
- raw: "' > '"
}
]- optional: false
}
}
]
}
]
}
} Text {...}
- start: 2385
- end: 2388
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
} Text {...}
- start: 2393
- end: 2398
- type: "Text"
- raw: "\n\t\n\t\t"
- data: "\n\t\n\t\t"
} Element {...}
- start: 2398
- end: 2665
- type: "Element"
- name: "label"
- attributes: []
children: [...] (5)
Text {...}
- start: 2405
- end: 2412
- type: "Text"
- raw: "\n "
- data: "\n "
} Element {...}
- start: 2412
- end: 2472
- type: "Element"
- name: "span"
attributes: [...] (1)
Attribute {...}
- start: 2418
- end: 2445
- type: "Attribute"
- name: "style"
value: [...] (1)
Text {...}
- start: 2425
- end: 2444
- type: "Text"
- raw: "margin-right:0.5rem"
- data: "margin-right:0.5rem"
}
]
}
]children: [...] (1)
Text {...}
- start: 2446
- end: 2465
- type: "Text"
- raw: "Choose a Zoom Style"
- data: "Choose a Zoom Style"
}
]
} Text {...}
- start: 2472
- end: 2479
- type: "Text"
- raw: "\n "
- data: "\n "
} Element {...}
- start: 2479
- end: 2652
- type: "Element"
- name: "select"
attributes: [...] (1)
Binding {...}
- start: 2487
- end: 2512
- type: "Binding"
- name: "value"
- modifiers: []
expression: Identifier {...}
- type: "Identifier"
- start: 2499
- end: 2511
loc: {...}
start: {...}
- line: 125
- column: 26
}end: {...}
- line: 125
- column: 38
}
}- name: "zoomPresetId"
}
}
]children: [...] (3)
Text {...}
- start: 2513
- end: 2522
- type: "Text"
- raw: "\n "
- data: "\n "
} EachBlock {...}
- start: 2522
- end: 2636
- type: "EachBlock"
expression: CallExpression {...}
- type: "CallExpression"
- start: 2529
- end: 2558
loc: {...}
start: {...}
- line: 126
- column: 15
}end: {...}
- line: 126
- column: 44
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 2529
- end: 2543
loc: {...}
start: {...}
- line: 126
- column: 15
}end: {...}
- line: 126
- column: 29
}
}object: Identifier {...}
- type: "Identifier"
- start: 2529
- end: 2535
loc: {...}
start: {...}
- line: 126
- column: 15
}end: {...}
- line: 126
- column: 21
}
}- name: "Object"
}property: Identifier {...}
- type: "Identifier"
- start: 2536
- end: 2543
loc: {...}
start: {...}
- line: 126
- column: 22
}end: {...}
- line: 126
- column: 29
}
}- name: "entries"
}- computed: false
- optional: false
}arguments: [...] (1)
MemberExpression {...}
- type: "MemberExpression"
- start: 22
- end: 64
object: Identifier {...}
- type: "Identifier"
- start: 22
- end: 45
- name: "#ctx"
loc: {...}
start: {...}
- line: 126
- column: 30
}end: {...}
- line: 126
- column: 43
}
}
}property: Literal {...}
- type: "Literal"
- value: 5
}- computed: true
- optional: false
leadingComments: [...] (1)
Block {...}
- type: "Block"
- value: "zoomPresetIds"
- start: 0
- end: 21
- has_trailing_newline: false
}
]
}
]- optional: false
}children: [...] (1)
Element {...}
- start: 2585
- end: 2620
- type: "Element"
- name: "option"
attributes: [...] (1)
Attribute {...}
- start: 2593
- end: 2603
- type: "Attribute"
- name: "value"
value: [...] (1)
MustacheTag {...}
- start: 2599
- end: 2603
- type: "MustacheTag"
expression: Identifier {...}
- type: "Identifier"
- start: 2600
- end: 2602
loc: {...}
start: {...}
- line: 127
- column: 25
}end: {...}
- line: 127
- column: 27
}
}- name: "id"
}
}
]
}
]children: [...] (1)
MustacheTag {...}
- start: 2604
- end: 2611
- type: "MustacheTag"
expression: Identifier {...}
- type: "Identifier"
- start: 2605
- end: 2610
loc: {...}
start: {...}
- line: 127
- column: 30
}end: {...}
- line: 127
- column: 35
}
}- name: "label"
}
}
]
}
]context: ArrayPattern {...}
- type: "ArrayPattern"
- start: 2562
- end: 2573
loc: {...}
start: {...}
- line: 126
- column: 49
}end: {...}
- line: 126
- column: 60
}
}elements: [...] (2)
Identifier {...}
- type: "Identifier"
- start: 2563
- end: 2565
loc: {...}
start: {...}
- line: 126
- column: 50
}end: {...}
- line: 126
- column: 52
}
}- name: "id"
} Identifier {...}
- type: "Identifier"
- start: 2567
- end: 2572
loc: {...}
start: {...}
- line: 126
- column: 54
}end: {...}
- line: 126
- column: 59
}
}- name: "label"
}
]
}
} Text {...}
- start: 2636
- end: 2643
- type: "Text"
- raw: "\n "
- data: "\n "
}
]
} Text {...}
- start: 2652
- end: 2657
- type: "Text"
- raw: "\n "
- data: "\n "
}
]
} Text {...}
- start: 2665
- end: 2667
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
}
]
} Text {...}
- start: 2676
- end: 2680
- type: "Text"
- raw: "\n\n "
- data: "\n\n "
} Element {...}
- start: 2680
- end: 2821
- type: "Element"
- name: "main"
- attributes: []
children: [...] (3)
Text {...}
- start: 2686
- end: 2691
- type: "Text"
- raw: "\n "
- data: "\n "
} InlineComponent {...}
- start: 2691
- end: 2811
- type: "InlineComponent"
- name: "ZoomableContainer"
attributes: [...] (2)
Binding {...}
- start: 2710
- end: 2726
- type: "Binding"
- name: "zoomManager"
- modifiers: []
expression: Identifier {...}
- start: 2715
- end: 2726
- type: "Identifier"
- name: "zoomManager"
}
} Attribute {...}
- start: 2727
- end: 2756
- type: "Attribute"
- name: "transitionPreset"
value: [...] (1)
MustacheTag {...}
- start: 2744
- end: 2756
- type: "MustacheTag"
expression: Identifier {...}
- type: "Identifier"
- start: 2745
- end: 2755
loc: {...}
start: {...}
- line: 134
- column: 58
}end: {...}
- line: 134
- column: 68
}
}- name: "zoomPreset"
}
}
]
}
]children: [...] (3)
Text {...}
- start: 2757
- end: 2764
- type: "Text"
- raw: "\n "
- data: "\n "
} InlineComponent {...}
- start: 2764
- end: 2786
- type: "InlineComponent"
- name: "Items"
attributes: [...] (1)
Attribute {...}
- start: 2771
- end: 2783
- type: "Attribute"
- name: "items"
value: [...] (1)
MustacheTag {...}
- start: 2777
- end: 2783
- type: "MustacheTag"
expression: Identifier {...}
- type: "Identifier"
- start: 2778
- end: 2782
loc: {...}
start: {...}
- line: 135
- column: 20
}end: {...}
- line: 135
- column: 24
}
}- name: "data"
}
}
]
}
]- children: []
} Text {...}
- start: 2786
- end: 2791
- type: "Text"
- raw: "\n "
- data: "\n "
}
]
} Text {...}
- start: 2811
- end: 2814
- type: "Text"
- raw: "\n "
- data: "\n "
}
]
} Text {...}
- start: 2821
- end: 2822
- type: "Text"
- raw: "\n"
- data: "\n"
}
]
}
]
}css: Style {...}
- type: "Style"
- start: 1713
- end: 2203
- attributes: []
children: [...] (6)
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: "body"
- start: 1731
- end: 1735
}
]- start: 1723
- end: 1736
}
]- start: 1723
- end: 1736
}
]- start: 1723
- end: 1736
}block: Block {...}
- type: "Block"
children: [...] (2)
Declaration {...}
- type: "Declaration"
- important: false
- property: "margin"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "0"
- unit: "px"
- start: 1751
- end: 1754
}
]- start: 1750
- end: 1754
}- start: 1743
- end: 1754
} Declaration {...}
- type: "Declaration"
- important: false
- property: "padding"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "0"
- unit: "px"
- start: 1767
- end: 1770
}
]- start: 1766
- end: 1770
}- start: 1758
- end: 1770
}
]- start: 1737
- end: 1775
}- start: 1723
- end: 1775
} 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: "*"
- start: 1787
- end: 1788
}
]- start: 1779
- end: 1789
}
]- start: 1779
- end: 1789
}
]- start: 1779
- end: 1789
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "box-sizing"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "border-box"
- start: 1808
- end: 1818
}
]- start: 1807
- end: 1818
}- start: 1796
- end: 1818
}
]- start: 1790
- end: 1823
}- start: 1779
- end: 1823
} Rule {...}
- type: "Rule"
selector: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "header"
- start: 1827
- end: 1833
}
]- start: 1827
- end: 1833
}
]- start: 1827
- end: 1833
}block: Block {...}
- type: "Block"
children: [...] (5)
Declaration {...}
- type: "Declaration"
- important: false
- property: "display"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "flex"
- start: 1849
- end: 1853
}
]- start: 1848
- end: 1853
}- start: 1840
- end: 1853
} Declaration {...}
- type: "Declaration"
- important: false
- property: "flex-direction"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "row"
- start: 1875
- end: 1878
}
]- start: 1874
- end: 1878
}- start: 1859
- end: 1878
} Declaration {...}
- type: "Declaration"
- important: false
- property: "justify-content"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "space-between"
- start: 1901
- end: 1914
}
]- start: 1900
- end: 1914
}- start: 1884
- end: 1914
} Declaration {...}
- type: "Declaration"
- important: false
- property: "width"
value: Value {...}
- type: "Value"
children: [...] (1)
Percentage {...}
- type: "Percentage"
- value: "100"
- start: 1927
- end: 1931
}
]- start: 1926
- end: 1931
}- start: 1920
- end: 1931
} Declaration {...}
- type: "Declaration"
- important: false
- property: "padding"
value: Value {...}
- type: "Value"
children: [...] (3)
Dimension {...}
- type: "Dimension"
- value: "1"
- unit: "rem"
- start: 1946
- end: 1950
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Dimension {...}
- type: "Dimension"
- value: "0.5"
- unit: "rem"
- start: 1951
- end: 1957
}
]- start: 1945
- end: 1957
}- start: 1937
- end: 1957
}
]- start: 1834
- end: 1962
}- start: 1827
- end: 1962
} Rule {...}
- type: "Rule"
selector: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
IdSelector {...}
- type: "IdSelector"
- name: "app"
- start: 1966
- end: 1970
}
]- start: 1966
- end: 1970
}
]- start: 1966
- end: 1970
}block: Block {...}
- type: "Block"
children: [...] (4)
Declaration {...}
- type: "Declaration"
- important: false
- property: "width"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "100"
- unit: "vw"
- start: 1984
- end: 1989
}
]- start: 1983
- end: 1989
}- start: 1977
- end: 1989
} Declaration {...}
- type: "Declaration"
- important: false
- property: "height"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "100"
- unit: "vh"
- start: 2003
- end: 2008
}
]- start: 2002
- end: 2008
}- start: 1995
- end: 2008
} Declaration {...}
- type: "Declaration"
- important: false
- property: "display"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "grid"
- start: 2023
- end: 2027
}
]- start: 2022
- end: 2027
}- start: 2014
- end: 2027
} Declaration {...}
- type: "Declaration"
- important: false
- property: "grid-template-rows"
value: Value {...}
- type: "Value"
children: [...] (3)
Dimension {...}
- type: "Dimension"
- value: "2.5"
- unit: "rem"
- start: 2051
- end: 2057
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Dimension {...}
- type: "Dimension"
- value: "1"
- unit: "fr"
- start: 2058
- end: 2061
}
]- start: 2050
- end: 2061
}- start: 2031
- end: 2061
}
]- start: 1971
- end: 2066
}- start: 1966
- end: 2066
} Rule {...}
- type: "Rule"
selector: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "main"
- start: 2070
- end: 2074
}
]- start: 2070
- end: 2074
}
]- start: 2070
- end: 2074
}block: Block {...}
- type: "Block"
children: [...] (4)
Declaration {...}
- type: "Declaration"
- important: false
- property: "width"
value: Value {...}
- type: "Value"
children: [...] (1)
Percentage {...}
- type: "Percentage"
- value: "95"
- start: 2088
- end: 2091
}
]- start: 2087
- end: 2091
}- start: 2081
- end: 2091
} Declaration {...}
- type: "Declaration"
- important: false
- property: "height"
value: Value {...}
- type: "Value"
children: [...] (1)
Percentage {...}
- type: "Percentage"
- value: "95"
- start: 2105
- end: 2108
}
]- start: 2104
- end: 2108
}- start: 2097
- end: 2108
} Declaration {...}
- type: "Declaration"
- important: false
- property: "position"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "relative"
- start: 2124
- end: 2132
}
]- start: 2123
- end: 2132
}- start: 2114
- end: 2132
} Declaration {...}
- type: "Declaration"
- important: false
- property: "place-self"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 2148
- end: 2154
}
]- start: 2147
- end: 2154
}- start: 2136
- end: 2154
}
]- start: 2075
- end: 2159
}- start: 2070
- end: 2159
} Rule {...}
- type: "Rule"
selector: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
IdSelector {...}
- type: "IdSelector"
- name: "title"
- start: 2163
- end: 2169
}
]- start: 2163
- end: 2169
}
]- start: 2163
- end: 2169
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "margin"
value: Value {...}
- type: "Value"
children: [...] (3)
Dimension {...}
- type: "Dimension"
- value: "5"
- unit: "px"
- start: 2182
- end: 2185
} WhiteSpace {...}
- type: "WhiteSpace"
- loc: null
- value: " "
} Dimension {...}
- type: "Dimension"
- value: "10"
- unit: "px"
- start: 2186
- end: 2190
}
]- start: 2181
- end: 2190
}- start: 2174
- end: 2190
}
]- start: 2170
- end: 2194
}- start: 2163
- end: 2194
}
]content: {...}
- start: 1720
- end: 2195
- styles: "\n :global(body) {\n margin: 0px;\n\t\tpadding: 0px;\n }\n\n :global(*) {\n box-sizing: border-box;\n }\n\t\n\theader {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n padding: 1rem 0.5rem;\n }\n\n #app {\n width: 100vw;\n height: 100vh;\n display: grid;\n\t\tgrid-template-rows: 2.5rem 1fr;\n }\n\n main {\n width: 95%;\n height: 95%;\n position: relative;\n\t\tplace-self: center;\n }\n\t\n\t#title {\n\t\tmargin: 5px 10px;\n\t}\n"
}
}instance: Script {...}
- type: "Script"
- start: 0
- end: 1711
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 1702
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 75
- column: 0
}
}body: [...] (8)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 301
- end: 342
loc: {...}
start: {...}
- line: 8
- column: 1
}end: {...}
- line: 8
- column: 42
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 310
- end: 314
loc: {...}
start: {...}
- line: 8
- column: 10
}end: {...}
- line: 8
- column: 14
}
}imported: Identifier {...}
- type: "Identifier"
- start: 310
- end: 314
loc: {...}
start: {...}
- line: 8
- column: 10
}end: {...}
- line: 8
- column: 14
}
}- name: "fade"
}local: Identifier {...}
- type: "Identifier"
- start: 310
- end: 314
loc: {...}
start: {...}
- line: 8
- column: 10
}end: {...}
- line: 8
- column: 14
}
}- name: "fade"
}
}
]source: Literal {...}
- type: "Literal"
- start: 322
- end: 341
loc: {...}
start: {...}
- line: 8
- column: 22
}end: {...}
- line: 8
- column: 41
}
}- value: "svelte/transition"
- raw: "'svelte/transition'"
}leadingComments: [...] (1)
Block {...}
- type: "Block"
- value: "\n\tThanks for checking this out! This is a demo of github.com/dimfeld/svelte-zoomable. \n\tAlso see the grid example at https://svelte.dev/repl/32bf500c4b8b4b718daee1fae74b6a51?version=3.32.0\n\tAnd if you have any questions or comments, feel free to ping me at @dimfeld on Twitter. \n"
- start: 10
- end: 297
- has_trailing_newline: true
}
]
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 345
- end: 410
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 10
- column: 66
}
}specifiers: [...] (2)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 354
- end: 371
loc: {...}
start: {...}
- line: 10
- column: 10
}end: {...}
- line: 10
- column: 27
}
}imported: Identifier {...}
- type: "Identifier"
- start: 354
- end: 371
loc: {...}
start: {...}
- line: 10
- column: 10
}end: {...}
- line: 10
- column: 27
}
}- name: "ZoomableContainer"
}local: Identifier {...}
- type: "Identifier"
- start: 354
- end: 371
loc: {...}
start: {...}
- line: 10
- column: 10
}end: {...}
- line: 10
- column: 27
}
}- name: "ZoomableContainer"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 373
- end: 384
loc: {...}
start: {...}
- line: 10
- column: 29
}end: {...}
- line: 10
- column: 40
}
}imported: Identifier {...}
- type: "Identifier"
- start: 373
- end: 384
loc: {...}
start: {...}
- line: 10
- column: 29
}end: {...}
- line: 10
- column: 40
}
}- name: "zoomPresets"
}local: Identifier {...}
- type: "Identifier"
- start: 373
- end: 384
loc: {...}
start: {...}
- line: 10
- column: 29
}end: {...}
- line: 10
- column: 40
}
}- name: "zoomPresets"
}
}
]source: Literal {...}
- type: "Literal"
- start: 392
- end: 409
loc: {...}
start: {...}
- line: 10
- column: 48
}end: {...}
- line: 10
- column: 65
}
}- value: "svelte-zoomable"
- raw: "\"svelte-zoomable\""
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 413
- end: 448
loc: {...}
start: {...}
- line: 11
- column: 2
}end: {...}
- line: 11
- column: 37
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 420
- end: 425
loc: {...}
start: {...}
- line: 11
- column: 9
}end: {...}
- line: 11
- column: 14
}
}local: Identifier {...}
- type: "Identifier"
- start: 420
- end: 425
loc: {...}
start: {...}
- line: 11
- column: 9
}end: {...}
- line: 11
- column: 14
}
}- name: "Items"
}
}
]source: Literal {...}
- type: "Literal"
- start: 431
- end: 447
loc: {...}
start: {...}
- line: 11
- column: 20
}end: {...}
- line: 11
- column: 36
}
}- value: "./Items.svelte"
- raw: "\"./Items.svelte\""
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 452
- end: 1413
loc: {...}
start: {...}
- line: 13
- column: 2
}end: {...}
- line: 62
- column: 4
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 458
- end: 1412
loc: {...}
start: {...}
- line: 13
- column: 8
}end: {...}
- line: 62
- column: 3
}
}id: Identifier {...}
- type: "Identifier"
- start: 458
- end: 462
loc: {...}
start: {...}
- line: 13
- column: 8
}end: {...}
- line: 13
- column: 12
}
}- name: "data"
}init: ArrayExpression {...}
- type: "ArrayExpression"
- start: 465
- end: 1412
loc: {...}
start: {...}
- line: 13
- column: 15
}end: {...}
- line: 62
- column: 3
}
}elements: [...] (2)
ObjectExpression {...}
- type: "ObjectExpression"
- start: 471
- end: 773
loc: {...}
start: {...}
- line: 14
- column: 4
}end: {...}
- line: 29
- column: 5
}
}properties: [...] (3)
Property {...}
- type: "Property"
- start: 479
- end: 490
loc: {...}
start: {...}
- line: 15
- column: 6
}end: {...}
- line: 15
- column: 17
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 479
- end: 481
loc: {...}
start: {...}
- line: 15
- column: 6
}end: {...}
- line: 15
- column: 8
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 483
- end: 490
loc: {...}
start: {...}
- line: 15
- column: 10
}end: {...}
- line: 15
- column: 17
}
}- value: "fruit"
- raw: "\"fruit\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 498
- end: 513
loc: {...}
start: {...}
- line: 16
- column: 6
}end: {...}
- line: 16
- column: 21
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 498
- end: 503
loc: {...}
start: {...}
- line: 16
- column: 6
}end: {...}
- line: 16
- column: 11
}
}- name: "title"
}value: Literal {...}
- type: "Literal"
- start: 505
- end: 513
loc: {...}
start: {...}
- line: 16
- column: 13
}end: {...}
- line: 16
- column: 21
}
}- value: "Fruits"
- raw: "\"Fruits\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 521
- end: 766
loc: {...}
start: {...}
- line: 17
- column: 6
}end: {...}
- line: 28
- column: 7
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 521
- end: 529
loc: {...}
start: {...}
- line: 17
- column: 6
}end: {...}
- line: 17
- column: 14
}
}- name: "children"
}value: ArrayExpression {...}
- type: "ArrayExpression"
- start: 531
- end: 766
loc: {...}
start: {...}
- line: 17
- column: 16
}end: {...}
- line: 28
- column: 7
}
}elements: [...] (2)
ObjectExpression {...}
- type: "ObjectExpression"
- start: 541
- end: 642
loc: {...}
start: {...}
- line: 18
- column: 8
}end: {...}
- line: 22
- column: 9
}
}properties: [...] (3)
Property {...}
- type: "Property"
- start: 553
- end: 564
loc: {...}
start: {...}
- line: 19
- column: 10
}end: {...}
- line: 19
- column: 21
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 553
- end: 555
loc: {...}
start: {...}
- line: 19
- column: 10
}end: {...}
- line: 19
- column: 12
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 557
- end: 564
loc: {...}
start: {...}
- line: 19
- column: 14
}end: {...}
- line: 19
- column: 21
}
}- value: "apple"
- raw: "\"apple\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 576
- end: 590
loc: {...}
start: {...}
- line: 20
- column: 10
}end: {...}
- line: 20
- column: 24
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 576
- end: 581
loc: {...}
start: {...}
- line: 20
- column: 10
}end: {...}
- line: 20
- column: 15
}
}- name: "title"
}value: Literal {...}
- type: "Literal"
- start: 583
- end: 590
loc: {...}
start: {...}
- line: 20
- column: 17
}end: {...}
- line: 20
- column: 24
}
}- value: "Apple"
- raw: "\"Apple\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 602
- end: 631
loc: {...}
start: {...}
- line: 21
- column: 10
}end: {...}
- line: 21
- column: 39
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 602
- end: 609
loc: {...}
start: {...}
- line: 21
- column: 10
}end: {...}
- line: 21
- column: 17
}
}- name: "content"
}value: ArrayExpression {...}
- type: "ArrayExpression"
- start: 611
- end: 631
loc: {...}
start: {...}
- line: 21
- column: 19
}end: {...}
- line: 21
- column: 39
}
}elements: [...] (1)
Literal {...}
- type: "Literal"
- start: 612
- end: 630
loc: {...}
start: {...}
- line: 21
- column: 20
}end: {...}
- line: 21
- column: 38
}
}- value: "Apples are good!"
- raw: "\"Apples are good!\""
}
]
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 652
- end: 757
loc: {...}
start: {...}
- line: 23
- column: 8
}end: {...}
- line: 27
- column: 9
}
}properties: [...] (3)
Property {...}
- type: "Property"
- start: 664
- end: 676
loc: {...}
start: {...}
- line: 24
- column: 10
}end: {...}
- line: 24
- column: 22
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 664
- end: 666
loc: {...}
start: {...}
- line: 24
- column: 10
}end: {...}
- line: 24
- column: 12
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 668
- end: 676
loc: {...}
start: {...}
- line: 24
- column: 14
}end: {...}
- line: 24
- column: 22
}
}- value: "banana"
- raw: "\"banana\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 688
- end: 703
loc: {...}
start: {...}
- line: 25
- column: 10
}end: {...}
- line: 25
- column: 25
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 688
- end: 693
loc: {...}
start: {...}
- line: 25
- column: 10
}end: {...}
- line: 25
- column: 15
}
}- name: "title"
}value: Literal {...}
- type: "Literal"
- start: 695
- end: 703
loc: {...}
start: {...}
- line: 25
- column: 17
}end: {...}
- line: 25
- column: 25
}
}- value: "Banana"
- raw: "\"Banana\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 715
- end: 746
loc: {...}
start: {...}
- line: 26
- column: 10
}end: {...}
- line: 26
- column: 41
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 715
- end: 722
loc: {...}
start: {...}
- line: 26
- column: 10
}end: {...}
- line: 26
- column: 17
}
}- name: "content"
}value: ArrayExpression {...}
- type: "ArrayExpression"
- start: 724
- end: 746
loc: {...}
start: {...}
- line: 26
- column: 19
}end: {...}
- line: 26
- column: 41
}
}elements: [...] (1)
Literal {...}
- type: "Literal"
- start: 725
- end: 745
loc: {...}
start: {...}
- line: 26
- column: 20
}end: {...}
- line: 26
- column: 40
}
}- value: "Bananas are yellow"
- raw: "\"Bananas are yellow\""
}
]
}- kind: "init"
}
]
}
]
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 779
- end: 1407
loc: {...}
start: {...}
- line: 30
- column: 4
}end: {...}
- line: 61
- column: 5
}
}properties: [...] (3)
Property {...}
- type: "Property"
- start: 787
- end: 797
loc: {...}
start: {...}
- line: 31
- column: 6
}end: {...}
- line: 31
- column: 16
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 787
- end: 789
loc: {...}
start: {...}
- line: 31
- column: 6
}end: {...}
- line: 31
- column: 8
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 791
- end: 797
loc: {...}
start: {...}
- line: 31
- column: 10
}end: {...}
- line: 31
- column: 16
}
}- value: "meat"
- raw: "\"meat\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 805
- end: 818
loc: {...}
start: {...}
- line: 32
- column: 6
}end: {...}
- line: 32
- column: 19
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 805
- end: 810
loc: {...}
start: {...}
- line: 32
- column: 6
}end: {...}
- line: 32
- column: 11
}
}- name: "title"
}value: Literal {...}
- type: "Literal"
- start: 812
- end: 818
loc: {...}
start: {...}
- line: 32
- column: 13
}end: {...}
- line: 32
- column: 19
}
}- value: "Meat"
- raw: "\"Meat\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 826
- end: 1400
loc: {...}
start: {...}
- line: 33
- column: 6
}end: {...}
- line: 60
- column: 7
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 826
- end: 834
loc: {...}
start: {...}
- line: 33
- column: 6
}end: {...}
- line: 33
- column: 14
}
}- name: "children"
}value: ArrayExpression {...}
- type: "ArrayExpression"
- start: 836
- end: 1400
loc: {...}
start: {...}
- line: 33
- column: 16
}end: {...}
- line: 60
- column: 7
}
}elements: [...] (3)
ObjectExpression {...}
- type: "ObjectExpression"
- start: 846
- end: 932
loc: {...}
start: {...}
- line: 34
- column: 8
}end: {...}
- line: 38
- column: 9
}
}properties: [...] (3)
Property {...}
- type: "Property"
- start: 858
- end: 868
loc: {...}
start: {...}
- line: 35
- column: 10
}end: {...}
- line: 35
- column: 20
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 858
- end: 860
loc: {...}
start: {...}
- line: 35
- column: 10
}end: {...}
- line: 35
- column: 12
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 862
- end: 868
loc: {...}
start: {...}
- line: 35
- column: 14
}end: {...}
- line: 35
- column: 20
}
}- value: "beef"
- raw: "\"beef\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 880
- end: 893
loc: {...}
start: {...}
- line: 36
- column: 10
}end: {...}
- line: 36
- column: 23
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 880
- end: 885
loc: {...}
start: {...}
- line: 36
- column: 10
}end: {...}
- line: 36
- column: 15
}
}- name: "title"
}value: Literal {...}
- type: "Literal"
- start: 887
- end: 893
loc: {...}
start: {...}
- line: 36
- column: 17
}end: {...}
- line: 36
- column: 23
}
}- value: "Beef"
- raw: "\"Beef\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 905
- end: 921
loc: {...}
start: {...}
- line: 37
- column: 10
}end: {...}
- line: 37
- column: 26
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 905
- end: 912
loc: {...}
start: {...}
- line: 37
- column: 10
}end: {...}
- line: 37
- column: 17
}
}- name: "content"
}value: ArrayExpression {...}
- type: "ArrayExpression"
- start: 914
- end: 921
loc: {...}
start: {...}
- line: 37
- column: 19
}end: {...}
- line: 37
- column: 26
}
}elements: [...] (1)
Literal {...}
- type: "Literal"
- start: 915
- end: 920
loc: {...}
start: {...}
- line: 37
- column: 20
}end: {...}
- line: 37
- column: 25
}
}- value: "Moo"
- raw: "\"Moo\""
}
]
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 942
- end: 1296
loc: {...}
start: {...}
- line: 39
- column: 8
}end: {...}
- line: 54
- column: 9
}
}properties: [...] (3)
Property {...}
- type: "Property"
- start: 954
- end: 967
loc: {...}
start: {...}
- line: 40
- column: 10
}end: {...}
- line: 40
- column: 23
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 954
- end: 956
loc: {...}
start: {...}
- line: 40
- column: 10
}end: {...}
- line: 40
- column: 12
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 958
- end: 967
loc: {...}
start: {...}
- line: 40
- column: 14
}end: {...}
- line: 40
- column: 23
}
}- value: "poultry"
- raw: "\"poultry\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 979
- end: 995
loc: {...}
start: {...}
- line: 41
- column: 10
}end: {...}
- line: 41
- column: 26
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 979
- end: 984
loc: {...}
start: {...}
- line: 41
- column: 10
}end: {...}
- line: 41
- column: 15
}
}- name: "title"
}value: Literal {...}
- type: "Literal"
- start: 986
- end: 995
loc: {...}
start: {...}
- line: 41
- column: 17
}end: {...}
- line: 41
- column: 26
}
}- value: "Poultry"
- raw: "\"Poultry\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 1007
- end: 1285
loc: {...}
start: {...}
- line: 42
- column: 10
}end: {...}
- line: 53
- column: 11
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 1007
- end: 1015
loc: {...}
start: {...}
- line: 42
- column: 10
}end: {...}
- line: 42
- column: 18
}
}- name: "children"
}value: ArrayExpression {...}
- type: "ArrayExpression"
- start: 1017
- end: 1285
loc: {...}
start: {...}
- line: 42
- column: 20
}end: {...}
- line: 53
- column: 11
}
}elements: [...] (2)
ObjectExpression {...}
- type: "ObjectExpression"
- start: 1031
- end: 1145
loc: {...}
start: {...}
- line: 43
- column: 12
}end: {...}
- line: 47
- column: 13
}
}properties: [...] (3)
Property {...}
- type: "Property"
- start: 1047
- end: 1060
loc: {...}
start: {...}
- line: 44
- column: 14
}end: {...}
- line: 44
- column: 27
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 1047
- end: 1049
loc: {...}
start: {...}
- line: 44
- column: 14
}end: {...}
- line: 44
- column: 16
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 1051
- end: 1060
loc: {...}
start: {...}
- line: 44
- column: 18
}end: {...}
- line: 44
- column: 27
}
}- value: "chicken"
- raw: "\"chicken\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 1076
- end: 1092
loc: {...}
start: {...}
- line: 45
- column: 14
}end: {...}
- line: 45
- column: 30
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 1076
- end: 1081
loc: {...}
start: {...}
- line: 45
- column: 14
}end: {...}
- line: 45
- column: 19
}
}- name: "title"
}value: Literal {...}
- type: "Literal"
- start: 1083
- end: 1092
loc: {...}
start: {...}
- line: 45
- column: 21
}end: {...}
- line: 45
- column: 30
}
}- value: "Chicken"
- raw: "\"Chicken\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 1108
- end: 1130
loc: {...}
start: {...}
- line: 46
- column: 14
}end: {...}
- line: 46
- column: 36
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 1108
- end: 1115
loc: {...}
start: {...}
- line: 46
- column: 14
}end: {...}
- line: 46
- column: 21
}
}- name: "content"
}value: Literal {...}
- type: "Literal"
- start: 1117
- end: 1130
loc: {...}
start: {...}
- line: 46
- column: 23
}end: {...}
- line: 46
- column: 36
}
}- value: "Bok bok bok"
- raw: "\"Bok bok bok\""
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 1159
- end: 1272
loc: {...}
start: {...}
- line: 48
- column: 12
}end: {...}
- line: 52
- column: 13
}
}properties: [...] (3)
Property {...}
- type: "Property"
- start: 1175
- end: 1187
loc: {...}
start: {...}
- line: 49
- column: 14
}end: {...}
- line: 49
- column: 26
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 1175
- end: 1177
loc: {...}
start: {...}
- line: 49
- column: 14
}end: {...}
- line: 49
- column: 16
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 1179
- end: 1187
loc: {...}
start: {...}
- line: 49
- column: 18
}end: {...}
- line: 49
- column: 26
}
}- value: "turkey"
- raw: "\"turkey\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 1203
- end: 1218
loc: {...}
start: {...}
- line: 50
- column: 14
}end: {...}
- line: 50
- column: 29
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 1203
- end: 1208
loc: {...}
start: {...}
- line: 50
- column: 14
}end: {...}
- line: 50
- column: 19
}
}- name: "title"
}value: Literal {...}
- type: "Literal"
- start: 1210
- end: 1218
loc: {...}
start: {...}
- line: 50
- column: 21
}end: {...}
- line: 50
- column: 29
}
}- value: "Turkey"
- raw: "\"Turkey\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 1234
- end: 1257
loc: {...}
start: {...}
- line: 51
- column: 14
}end: {...}
- line: 51
- column: 37
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 1234
- end: 1241
loc: {...}
start: {...}
- line: 51
- column: 14
}end: {...}
- line: 51
- column: 21
}
}- name: "content"
}value: Literal {...}
- type: "Literal"
- start: 1243
- end: 1257
loc: {...}
start: {...}
- line: 51
- column: 23
}end: {...}
- line: 51
- column: 37
}
}- value: "Baste often!"
- raw: "\"Baste often!\""
}- kind: "init"
}
]
}
]
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 1306
- end: 1391
loc: {...}
start: {...}
- line: 55
- column: 8
}end: {...}
- line: 59
- column: 9
}
}properties: [...] (3)
Property {...}
- type: "Property"
- start: 1318
- end: 1328
loc: {...}
start: {...}
- line: 56
- column: 10
}end: {...}
- line: 56
- column: 20
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 1318
- end: 1320
loc: {...}
start: {...}
- line: 56
- column: 10
}end: {...}
- line: 56
- column: 12
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 1322
- end: 1328
loc: {...}
start: {...}
- line: 56
- column: 14
}end: {...}
- line: 56
- column: 20
}
}- value: "pork"
- raw: "\"pork\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 1340
- end: 1353
loc: {...}
start: {...}
- line: 57
- column: 10
}end: {...}
- line: 57
- column: 23
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 1340
- end: 1345
loc: {...}
start: {...}
- line: 57
- column: 10
}end: {...}
- line: 57
- column: 15
}
}- name: "title"
}value: Literal {...}
- type: "Literal"
- start: 1347
- end: 1353
loc: {...}
start: {...}
- line: 57
- column: 17
}end: {...}
- line: 57
- column: 23
}
}- value: "Pork"
- raw: "\"Pork\""
}- kind: "init"
} Property {...}
- type: "Property"
- start: 1365
- end: 1380
loc: {...}
start: {...}
- line: 58
- column: 10
}end: {...}
- line: 58
- column: 25
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 1365
- end: 1372
loc: {...}
start: {...}
- line: 58
- column: 10
}end: {...}
- line: 58
- column: 17
}
}- name: "content"
}value: Literal {...}
- type: "Literal"
- start: 1374
- end: 1380
loc: {...}
start: {...}
- line: 58
- column: 19
}end: {...}
- line: 58
- column: 25
}
}- value: "Oink"
- raw: "\"Oink\""
}- kind: "init"
}
]
}
]
}- kind: "init"
}
]
}
]
}
}
]- kind: "const"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 1417
- end: 1433
loc: {...}
start: {...}
- line: 64
- column: 2
}end: {...}
- line: 64
- column: 18
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 1421
- end: 1432
loc: {...}
start: {...}
- line: 64
- column: 6
}end: {...}
- line: 64
- column: 17
}
}id: Identifier {...}
- type: "Identifier"
- start: 1421
- end: 1432
loc: {...}
start: {...}
- line: 64
- column: 6
}end: {...}
- line: 64
- column: 17
}
}- name: "zoomManager"
}- init: null
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 1437
- end: 1480
loc: {...}
start: {...}
- line: 66
- column: 1
}end: {...}
- line: 66
- column: 44
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 1441
- end: 1479
loc: {...}
start: {...}
- line: 66
- column: 5
}end: {...}
- line: 66
- column: 43
}
}id: Identifier {...}
- type: "Identifier"
- start: 1441
- end: 1453
loc: {...}
start: {...}
- line: 66
- column: 5
}end: {...}
- line: 66
- column: 17
}
}- name: "zoomPresetId"
}init: Literal {...}
- type: "Literal"
- start: 1456
- end: 1479
loc: {...}
start: {...}
- line: 66
- column: 20
}end: {...}
- line: 66
- column: 43
}
}- value: "mergeSiblingsParallel"
- raw: "'mergeSiblingsParallel'"
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 1483
- end: 1655
loc: {...}
start: {...}
- line: 67
- column: 2
}end: {...}
- line: 72
- column: 4
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 1489
- end: 1654
loc: {...}
start: {...}
- line: 67
- column: 8
}end: {...}
- line: 72
- column: 3
}
}id: Identifier {...}
- type: "Identifier"
- start: 1489
- end: 1502
loc: {...}
start: {...}
- line: 67
- column: 8
}end: {...}
- line: 67
- column: 21
}
}- name: "zoomPresetIds"
}init: ObjectExpression {...}
- type: "ObjectExpression"
- start: 1505
- end: 1654
loc: {...}
start: {...}
- line: 67
- column: 24
}end: {...}
- line: 72
- column: 3
}
}properties: [...] (4)
Property {...}
- type: "Property"
- start: 1511
- end: 1549
loc: {...}
start: {...}
- line: 68
- column: 4
}end: {...}
- line: 68
- column: 42
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 1511
- end: 1532
loc: {...}
start: {...}
- line: 68
- column: 4
}end: {...}
- line: 68
- column: 25
}
}- name: "mergeSiblingsParallel"
}value: Literal {...}
- type: "Literal"
- start: 1534
- end: 1549
loc: {...}
start: {...}
- line: 68
- column: 27
}end: {...}
- line: 68
- column: 42
}
}- value: "Sibling Merge"
- raw: "'Sibling Merge'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 1555
- end: 1577
loc: {...}
start: {...}
- line: 69
- column: 4
}end: {...}
- line: 69
- column: 26
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 1555
- end: 1564
loc: {...}
start: {...}
- line: 69
- column: 4
}end: {...}
- line: 69
- column: 13
}
}- name: "crossfade"
}value: Literal {...}
- type: "Literal"
- start: 1566
- end: 1577
loc: {...}
start: {...}
- line: 69
- column: 15
}end: {...}
- line: 69
- column: 26
}
}- value: "Crossfade"
- raw: "'Crossfade'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 1583
- end: 1602
loc: {...}
start: {...}
- line: 70
- column: 4
}end: {...}
- line: 70
- column: 23
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 1583
- end: 1587
loc: {...}
start: {...}
- line: 70
- column: 4
}end: {...}
- line: 70
- column: 8
}
}- name: "fade"
}value: Literal {...}
- type: "Literal"
- start: 1589
- end: 1602
loc: {...}
start: {...}
- line: 70
- column: 10
}end: {...}
- line: 70
- column: 23
}
}- value: "Simple Fade"
- raw: "'Simple Fade'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 1608
- end: 1649
loc: {...}
start: {...}
- line: 71
- column: 4
}end: {...}
- line: 71
- column: 45
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 1608
- end: 1624
loc: {...}
start: {...}
- line: 71
- column: 4
}end: {...}
- line: 71
- column: 20
}
}- name: "zoomExperimental"
}value: Literal {...}
- type: "Literal"
- start: 1626
- end: 1649
loc: {...}
start: {...}
- line: 71
- column: 22
}end: {...}
- line: 71
- column: 45
}
}- value: "Experimental WIP Zoom"
- raw: "'Experimental WIP Zoom'"
}- kind: "init"
}
]
}
}
]- kind: "const"
} LabeledStatement {...}
- type: "LabeledStatement"
- start: 1659
- end: 1701
loc: {...}
start: {...}
- line: 74
- column: 2
}end: {...}
- line: 74
- column: 44
}
}body: ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 1662
- end: 1701
loc: {...}
start: {...}
- line: 74
- column: 5
}end: {...}
- line: 74
- column: 44
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 1662
- end: 1700
loc: {...}
start: {...}
- line: 74
- column: 5
}end: {...}
- line: 74
- column: 43
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 1662
- end: 1672
loc: {...}
start: {...}
- line: 74
- column: 5
}end: {...}
- line: 74
- column: 15
}
}- name: "zoomPreset"
}right: MemberExpression {...}
- type: "MemberExpression"
- start: 1675
- end: 1700
loc: {...}
start: {...}
- line: 74
- column: 18
}end: {...}
- line: 74
- column: 43
}
}object: Identifier {...}
- type: "Identifier"
- start: 1675
- end: 1686
loc: {...}
start: {...}
- line: 74
- column: 18
}end: {...}
- line: 74
- column: 29
}
}- name: "zoomPresets"
}property: Identifier {...}
- type: "Identifier"
- start: 1687
- end: 1699
loc: {...}
start: {...}
- line: 74
- column: 30
}end: {...}
- line: 74
- column: 42
}
}- name: "zoomPresetId"
}- computed: true
- optional: false
}
}
}label: Identifier {...}
- type: "Identifier"
- start: 1659
- end: 1660
loc: {...}
start: {...}
- line: 74
- column: 2
}end: {...}
- line: 74
- column: 3
}
}- name: "$"
}
}
]- sourceType: "module"
}
}- module: undefined
}
The AST is not public API and may change at any point in time