Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
GridGallery.svelte
<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
/* 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: ,
});
.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