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
Thing.svelte
<script>
import Thing from './Thing.svelte';

let things = $state([
{ id: 1, color: 'darkblue' },
{ id: 2, color: 'indigo' },
{ id: 3, color: 'deeppink' },
{ id: 4, color: 'salmon' },
{ id: 5, color: 'gold' }
]);

function handleClick() {
things = things.slice(1);
}
</script>

<button onclick={handleClick}> Remove first thing </button>

<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em">
<div>
<h2>Keyed</h2>
{#each things as thing (thing.id)}
<Thing current={thing.color} />
{/each}
</div>

<div>
<h2>Unkeyed</h2>
{#each things as thing}
<Thing current={thing.color} />
{/each}
</div>
</div>

Error compiling component

WebAssembly.instantiateStreaming(): value type opcode @+13
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';
import Thing from './Thing.svelte';

function handleClick(_, things) {
$.set(things, $.proxy($.get(things).slice(1)));
}

var root = $.template(`<button>Remove first thing</button> <div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em"><div><h2>Keyed</h2> <!></div> <div><h2>Unkeyed</h2> <!></div></div>`, 1);

export default function App($$anchor) {
let things = $.state($.proxy([
{ id: 1, color: 'darkblue' },
{ id: 2, color: 'indigo' },
{ id: 3, color: 'deeppink' },
{ id: 4, color: 'salmon' },
{ id: 5, color: 'gold' }
]));

var fragment = root();
var button = $.first_child(fragment);

button.__click = [handleClick, things];

var div = $.sibling(button, 2);
var div_1 = $.child(div);
var node = $.sibling($.child(div_1), 2);

$.each(node, 17, () => $.get(things), (thing) => thing.id, ($$anchor, thing) => {
Thing($$anchor, {
get current() {
return $.get(thing).color;
}
});
});

result = svelte.compile(source, {
generate: ,
});
/* Add a <style> tag to see the CSS output */
		
			
				
  • Root {
    • css: null
    • js: []
    • start: 295
    • end: 657
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (4)
        • Text {...}
          • type: "Text"
          • start: 293
          • end: 295
          • raw: "\n\n"
          • data: "\n\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 295
          • end: 354
          • name: "button"
          • attributes: [...] (1)
            • Attribute {...}
              • type: "Attribute"
              • start: 303
              • end: 324
              • name: "onclick"
              • value: ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 311
                • end: 324
                • expression: Identifier {...}
                  • type: "Identifier"
                  • start: 312
                  • end: 323
                  • loc: {...}
                    • start: {...}
                      • line: 17
                      • column: 17
                      }
                    • end: {...}
                      • line: 17
                      • column: 28
                      }
                    }
                  • name: "handleClick"
                  }
                }
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (1)
              • Text {...}
                • type: "Text"
                • start: 325
                • end: 345
                • raw: "Remove first thing"
                • data: "Remove first thing"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 354
          • end: 356
          • raw: " "
          • data: " "
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 356
          • end: 657
          • name: "div"
          • attributes: [...] (1)
            • Attribute {...}
              • type: "Attribute"
              • start: 361
              • end: 429
              • name: "style"
              • value: [...] (1)
                • Text {...}
                  • start: 368
                  • end: 428
                  • type: "Text"
                  • raw: "display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em"
                  • data: "display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em"
                  }
                ]
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (5)
              • Text {...}
                • type: "Text"
                • start: 430
                • end: 432
                • raw: "\n\t"
                • data: "\n\t"
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 432
                • end: 544
                • name: "div"
                • attributes: []
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (5)
                    • Text {...}
                      • type: "Text"
                      • start: 437
                      • end: 440
                      • raw: "\n\t\t"
                      • data: "\n\t\t"
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 440
                      • end: 454
                      • name: "h2"
                      • attributes: []
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • Text {...}
                            • type: "Text"
                            • start: 444
                            • end: 449
                            • raw: "Keyed"
                            • data: "Keyed"
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 454
                      • end: 457
                      • raw: " "
                      • data: " "
                      }
                    • EachBlock {...}
                      • type: "EachBlock"
                      • start: 457
                      • end: 536
                      • expression: Identifier {...}
                        • type: "Identifier"
                        • start: 464
                        • end: 470
                        • loc: {...}
                          • start: {...}
                            • line: 22
                            • column: 9
                            }
                          • end: {...}
                            • line: 22
                            • column: 15
                            }
                          }
                        • name: "things"
                        }
                      • body: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (3)
                          • Text {...}
                            • type: "Text"
                            • start: 491
                            • end: 495
                            • raw: "\n\t\t\t"
                            • data: "\n\t\t\t"
                            }
                          • Component {...}
                            • type: "Component"
                            • start: 495
                            • end: 526
                            • name: "Thing"
                            • attributes: [...] (1)
                              • Attribute {...}
                                • type: "Attribute"
                                • start: 502
                                • end: 523
                                • name: "current"
                                • value: ExpressionTag {...}
                                  • type: "ExpressionTag"
                                  • start: 510
                                  • end: 523
                                  • expression: MemberExpression {...}
                                    • type: "MemberExpression"
                                    • start: 511
                                    • end: 522
                                    • loc: {...}
                                      • start: {...}
                                        • line: 23
                                        • column: 19
                                        }
                                      • end: {...}
                                        • line: 23
                                        • column: 30
                                        }
                                      }
                                    • object: Identifier {...}
                                      • type: "Identifier"
                                      • start: 511
                                      • end: 516
                                      • loc: {...}
                                        • start: {...}
                                          • line: 23
                                          • column: 19
                                          }
                                        • end: {...}
                                          • line: 23
                                          • column: 24
                                          }
                                        }
                                      • name: "thing"
                                      }
                                    • property: Identifier {...}
                                      • type: "Identifier"
                                      • start: 517
                                      • end: 522
                                      • loc: {...}
                                        • start: {...}
                                          • line: 23
                                          • column: 25
                                          }
                                        • end: {...}
                                          • line: 23
                                          • column: 30
                                          }
                                        }
                                      • name: "color"
                                      }
                                    • computed: false
                                    • optional: false
                                    }
                                  }
                                }
                              ]
                            • fragment: Fragment {...}
                              • type: "Fragment"
                              • nodes: []
                              }
                            }
                          • Text {...}
                            • type: "Text"
                            • start: 526
                            • end: 529
                            • raw: "\n\t\t"
                            • data: "\n\t\t"
                            }
                          ]
                        }
                      • context: Identifier {...}
                        • type: "Identifier"
                        • name: "thing"
                        • start: 474
                        • loc: {...}
                          • start: {...}
                            • line: 22
                            • column: 19
                            • character: 474
                            }
                          • end: {...}
                            • line: 22
                            • column: 24
                            • character: 479
                            }
                          }
                        • end: 479
                        • typeAnnotation: undefined
                        }
                      • index: undefined
                      • key: MemberExpression {...}
                        • type: "MemberExpression"
                        • start: 481
                        • end: 489
                        • loc: {...}
                          • start: {...}
                            • line: 22
                            • column: 26
                            }
                          • end: {...}
                            • line: 22
                            • column: 34
                            }
                          }
                        • object: Identifier {...}
                          • type: "Identifier"
                          • start: 481
                          • end: 486
                          • loc: {...}
                            • start: {...}
                              • line: 22
                              • column: 26
                              }
                            • end: {...}
                              • line: 22
                              • column: 31
                              }
                            }
                          • name: "thing"
                          }
                        • property: Identifier {...}
                          • type: "Identifier"
                          • start: 487
                          • end: 489
                          • loc: {...}
                            • start: {...}
                              • line: 22
                              • column: 32
                              }
                            • end: {...}
                              • line: 22
                              • column: 34
                              }
                            }
                          • name: "id"
                          }
                        • computed: false
                        • optional: false
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 536
                      • end: 538
                      • raw: "\n\t"
                      • data: "\n\t"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 544
                • end: 547
                • raw: " "
                • data: " "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 547
                • end: 650
                • name: "div"
                • attributes: []
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: [...] (5)
                    • Text {...}
                      • type: "Text"
                      • start: 552
                      • end: 555
                      • raw: "\n\t\t"
                      • data: "\n\t\t"
                      }
                    • RegularElement {...}
                      • type: "RegularElement"
                      • start: 555
                      • end: 571
                      • name: "h2"
                      • attributes: []
                      • fragment: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (1)
                          • Text {...}
                            • type: "Text"
                            • start: 559
                            • end: 566
                            • raw: "Unkeyed"
                            • data: "Unkeyed"
                            }
                          ]
                        }
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 571
                      • end: 574
                      • raw: " "
                      • data: " "
                      }
                    • EachBlock {...}
                      • type: "EachBlock"
                      • start: 574
                      • end: 642
                      • expression: Identifier {...}
                        • type: "Identifier"
                        • start: 581
                        • end: 587
                        • loc: {...}
                          • start: {...}
                            • line: 29
                            • column: 9
                            }
                          • end: {...}
                            • line: 29
                            • column: 15
                            }
                          }
                        • name: "things"
                        }
                      • body: Fragment {...}
                        • type: "Fragment"
                        • nodes: [...] (3)
                          • Text {...}
                            • type: "Text"
                            • start: 597
                            • end: 601
                            • raw: "\n\t\t\t"
                            • data: "\n\t\t\t"
                            }
                          • Component {...}
                            • type: "Component"
                            • start: 601
                            • end: 632
                            • name: "Thing"
                            • attributes: [...] (1)
                              • Attribute {...}
                                • type: "Attribute"
                                • start: 608
                                • end: 629
                                • name: "current"
                                • value: ExpressionTag {...}
                                  • type: "ExpressionTag"
                                  • start: 616
                                  • end: 629
                                  • expression: MemberExpression {...}
                                    • type: "MemberExpression"
                                    • start: 617
                                    • end: 628
                                    • loc: {...}
                                      • start: {...}
                                        • line: 30
                                        • column: 19
                                        }
                                      • end: {...}
                                        • line: 30
                                        • column: 30
                                        }
                                      }
                                    • object: Identifier {...}
                                      • type: "Identifier"
                                      • start: 617
                                      • end: 622
                                      • loc: {...}
                                        • start: {...}
                                          • line: 30
                                          • column: 19
                                          }
                                        • end: {...}
                                          • line: 30
                                          • column: 24
                                          }
                                        }
                                      • name: "thing"
                                      }
                                    • property: Identifier {...}
                                      • type: "Identifier"
                                      • start: 623
                                      • end: 628
                                      • loc: {...}
                                        • start: {...}
                                          • line: 30
                                          • column: 25
                                          }
                                        • end: {...}
                                          • line: 30
                                          • column: 30
                                          }
                                        }
                                      • name: "color"
                                      }
                                    • computed: false
                                    • optional: false
                                    }
                                  }
                                }
                              ]
                            • fragment: Fragment {...}
                              • type: "Fragment"
                              • nodes: []
                              }
                            }
                          • Text {...}
                            • type: "Text"
                            • start: 632
                            • end: 635
                            • raw: "\n\t\t"
                            • data: "\n\t\t"
                            }
                          ]
                        }
                      • context: Identifier {...}
                        • type: "Identifier"
                        • name: "thing"
                        • start: 591
                        • loc: {...}
                          • start: {...}
                            • line: 29
                            • column: 19
                            • character: 591
                            }
                          • end: {...}
                            • line: 29
                            • column: 24
                            • character: 596
                            }
                          }
                        • end: 596
                        • typeAnnotation: undefined
                        }
                      • index: undefined
                      • key: undefined
                      }
                    • Text {...}
                      • type: "Text"
                      • start: 642
                      • end: 644
                      • raw: "\n\t"
                      • data: "\n\t"
                      }
                    ]
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 650
                • end: 651
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 293
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 284
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 15
            • column: 0
            }
          }
        • body: [...] (3)
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 10
            • end: 45
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 2
                • column: 36
                }
              }
            • specifiers: [...] (1)
              • ImportDefaultSpecifier {...}
                • type: "ImportDefaultSpecifier"
                • start: 17
                • end: 22
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 8
                    }
                  • end: {...}
                    • line: 2
                    • column: 13
                    }
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 17
                  • end: 22
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 8
                      }
                    • end: {...}
                      • line: 2
                      • column: 13
                      }
                    }
                  • name: "Thing"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 28
              • end: 44
              • loc: {...}
                • start: {...}
                  • line: 2
                  • column: 19
                  }
                • end: {...}
                  • line: 2
                  • column: 35
                  }
                }
              • value: "./Thing.svelte"
              • raw: "'./Thing.svelte'"
              }
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 48
            • end: 225
            • loc: {...}
              • start: {...}
                • line: 4
                • column: 1
                }
              • end: {...}
                • line: 10
                • column: 4
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 52
                • end: 224
                • loc: {...}
                  • start: {...}
                    • line: 4
                    • column: 5
                    }
                  • end: {...}
                    • line: 10
                    • column: 3
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 52
                  • end: 58
                  • loc: {...}
                    • start: {...}
                      • line: 4
                      • column: 5
                      }
                    • end: {...}
                      • line: 4
                      • column: 11
                      }
                    }
                  • name: "things"
                  }
                • init: CallExpression {...}
                  • type: "CallExpression"
                  • start: 61
                  • end: 224
                  • loc: {...}
                    • start: {...}
                      • line: 4
                      • column: 14
                      }
                    • end: {...}
                      • line: 10
                      • column: 3
                      }
                    }
                  • callee: Identifier {...}
                    • type: "Identifier"
                    • start: 61
                    • end: 67
                    • loc: {...}
                      • start: {...}
                        • line: 4
                        • column: 14
                        }
                      • end: {...}
                        • line: 4
                        • column: 20
                        }
                      }
                    • name: "$state"
                    }
                  • arguments: [...] (1)
                    • ArrayExpression {...}
                      • type: "ArrayExpression"
                      • start: 68
                      • end: 223
                      • loc: {...}
                        • start: {...}
                          • line: 4
                          • column: 21
                          }
                        • end: {...}
                          • line: 10
                          • column: 2
                          }
                        }
                      • elements: [...] (5)
                        • ObjectExpression {...}
                          • type: "ObjectExpression"
                          • start: 72
                          • end: 100
                          • loc: {...}
                            • start: {...}
                              • line: 5
                              • column: 2
                              }
                            • end: {...}
                              • line: 5
                              • column: 30
                              }
                            }
                          • properties: [...] (2)
                            • Property {...}
                              • type: "Property"
                              • start: 74
                              • end: 79
                              • loc: {...}
                                • start: {...}
                                  • line: 5
                                  • column: 4
                                  }
                                • end: {...}
                                  • line: 5
                                  • column: 9
                                  }
                                }
                              • method: false
                              • shorthand: false
                              • computed: false
                              • key: Identifier {...}
                                • type: "Identifier"
                                • start: 74
                                • end: 76
                                • loc: {...}
                                  • start: {...}
                                    • line: 5
                                    • column: 4
                                    }
                                  • end: {...}
                                    • line: 5
                                    • column: 6
                                    }
                                  }
                                • name: "id"
                                }
                              • value: Literal {...}
                                • type: "Literal"
                                • start: 78
                                • end: 79
                                • loc: {...}
                                  • start: {...}
                                    • line: 5
                                    • column: 8
                                    }
                                  • end: {...}
                                    • line: 5
                                    • column: 9
                                    }
                                  }
                                • value: 1
                                • raw: "1"
                                }
                              • kind: "init"
                              }
                            • Property {...}
                              • type: "Property"
                              • start: 81
                              • end: 98
                              • loc: {...}
                                • start: {...}
                                  • line: 5
                                  • column: 11
                                  }
                                • end: {...}
                                  • line: 5
                                  • column: 28
                                  }
                                }
                              • method: false
                              • shorthand: false
                              • computed: false
                              • key: Identifier {...}
                                • type: "Identifier"
                                • start: 81
                                • end: 86
                                • loc: {...}
                                  • start: {...}
                                    • line: 5
                                    • column: 11
                                    }
                                  • end: {...}
                                    • line: 5
                                    • column: 16
                                    }
                                  }
                                • name: "color"
                                }
                              • value: Literal {...}
                                • type: "Literal"
                                • start: 88
                                • end: 98
                                • loc: {...}
                                  • start: {...}
                                    • line: 5
                                    • column: 18
                                    }
                                  • end: {...}
                                    • line: 5
                                    • column: 28
                                    }
                                  }
                                • value: "darkblue"
                                • raw: "'darkblue'"
                                }
                              • kind: "init"
                              }
                            ]
                          }
                        • ObjectExpression {...}
                          • type: "ObjectExpression"
                          • start: 104
                          • end: 130
                          • loc: {...}
                            • start: {...}
                              • line: 6
                              • column: 2
                              }
                            • end: {...}
                              • line: 6
                              • column: 28
                              }
                            }
                          • properties: [...] (2)
                            • Property {...}
                              • type: "Property"
                              • start: 106
                              • end: 111
                              • loc: {...}
                                • start: {...}
                                  • line: 6
                                  • column: 4
                                  }
                                • end: {...}
                                  • line: 6
                                  • column: 9
                                  }
                                }
                              • method: false
                              • shorthand: false
                              • computed: false
                              • key: Identifier {...}
                                • type: "Identifier"
                                • start: 106
                                • end: 108
                                • loc: {...}
                                  • start: {...}
                                    • line: 6
                                    • column: 4
                                    }
                                  • end: {...}
                                    • line: 6
                                    • column: 6
                                    }
                                  }
                                • name: "id"
                                }
                              • value: Literal {...}
                                • type: "Literal"
                                • start: 110
                                • end: 111
                                • loc: {...}
                                  • start: {...}
                                    • line: 6
                                    • column: 8
                                    }
                                  • end: {...}
                                    • line: 6
                                    • column: 9
                                    }
                                  }
                                • value: 2
                                • raw: "2"
                                }
                              • kind: "init"
                              }
                            • Property {...}
                              • type: "Property"
                              • start: 113
                              • end: 128
                              • loc: {...}
                                • start: {...}
                                  • line: 6
                                  • column: 11
                                  }
                                • end: {...}
                                  • line: 6
                                  • column: 26
                                  }
                                }
                              • method: false
                              • shorthand: false
                              • computed: false
                              • key: Identifier {...}
                                • type: "Identifier"
                                • start: 113
                                • end: 118
                                • loc: {...}
                                  • start: {...}
                                    • line: 6
                                    • column: 11
                                    }
                                  • end: {...}
                                    • line: 6
                                    • column: 16
                                    }
                                  }
                                • name: "color"
                                }
                              • value: Literal {...}
                                • type: "Literal"
                                • start: 120
                                • end: 128
                                • loc: {...}
                                  • start: {...}
                                    • line: 6
                                    • column: 18
                                    }
                                  • end: {...}
                                    • line: 6
                                    • column: 26
                                    }
                                  }
                                • value: "indigo"
                                • raw: "'indigo'"
                                }
                              • kind: "init"
                              }
                            ]
                          }
                        • ObjectExpression {...}
                          • type: "ObjectExpression"
                          • start: 134
                          • end: 162
                          • loc: {...}
                            • start: {...}
                              • line: 7
                              • column: 2
                              }
                            • end: {...}
                              • line: 7
                              • column: 30
                              }
                            }
                          • properties: [...] (2)
                            • Property {...}
                              • type: "Property"
                              • start: 136
                              • end: 141
                              • loc: {...}
                                • start: {...}
                                  • line: 7
                                  • column: 4
                                  }
                                • end: {...}
                                  • line: 7
                                  • column: 9
                                  }
                                }
                              • method: false
                              • shorthand: false
                              • computed: false
                              • key: Identifier {...}
                                • type: "Identifier"
                                • start: 136
                                • end: 138
                                • loc: {...}
                                  • start: {...}
                                    • line: 7
                                    • column: 4
                                    }
                                  • end: {...}
                                    • line: 7
                                    • column: 6
                                    }
                                  }
                                • name: "id"
                                }
                              • value: Literal {...}
                                • type: "Literal"
                                • start: 140
                                • end: 141
                                • loc: {...}
                                  • start: {...}
                                    • line: 7
                                    • column: 8
                                    }
                                  • end: {...}
                                    • line: 7
                                    • column: 9
                                    }
                                  }
                                • value: 3
                                • raw: "3"
                                }
                              • kind: "init"
                              }
                            • Property {...}
                              • type: "Property"
                              • start: 143
                              • end: 160
                              • loc: {...}
                                • start: {...}
                                  • line: 7
                                  • column: 11
                                  }
                                • end: {...}
                                  • line: 7
                                  • column: 28
                                  }
                                }
                              • method: false
                              • shorthand: false
                              • computed: false
                              • key: Identifier {...}
                                • type: "Identifier"
                                • start: 143
                                • end: 148
                                • loc: {...}
                                  • start: {...}
                                    • line: 7
                                    • column: 11
                                    }
                                  • end: {...}
                                    • line: 7
                                    • column: 16
                                    }
                                  }
                                • name: "color"
                                }
                              • value: Literal {...}
                                • type: "Literal"
                                • start: 150
                                • end: 160
                                • loc: {...}
                                  • start: {...}
                                    • line: 7
                                    • column: 18
                                    }
                                  • end: {...}
                                    • line: 7
                                    • column: 28
                                    }
                                  }
                                • value: "deeppink"
                                • raw: "'deeppink'"
                                }
                              • kind: "init"
                              }
                            ]
                          }
                        • ObjectExpression {...}
                          • type: "ObjectExpression"
                          • start: 166
                          • end: 192
                          • loc: {...}
                            • start: {...}
                              • line: 8
                              • column: 2
                              }
                            • end: {...}
                              • line: 8
                              • column: 28
                              }
                            }
                          • properties: [...] (2)
                            • Property {...}
                              • type: "Property"
                              • start: 168
                              • end: 173
                              • loc: {...}
                                • start: {...}
                                  • line: 8
                                  • column: 4
                                  }
                                • end: {...}
                                  • line: 8
                                  • column: 9
                                  }
                                }
                              • method: false
                              • shorthand: false
                              • computed: false
                              • key: Identifier {...}
                                • type: "Identifier"
                                • start: 168
                                • end: 170
                                • loc: {...}
                                  • start: {...}
                                    • line: 8
                                    • column: 4
                                    }
                                  • end: {...}
                                    • line: 8
                                    • column: 6
                                    }
                                  }
                                • name: "id"
                                }
                              • value: Literal {...}
                                • type: "Literal"
                                • start: 172
                                • end: 173
                                • loc: {...}
                                  • start: {...}
                                    • line: 8
                                    • column: 8
                                    }
                                  • end: {...}
                                    • line: 8
                                    • column: 9
                                    }
                                  }
                                • value: 4
                                • raw: "4"
                                }
                              • kind: "init"
                              }
                            • Property {...}
                              • type: "Property"
                              • start: 175
                              • end: 190
                              • loc: {...}
                                • start: {...}
                                  • line: 8
                                  • column: 11
                                  }
                                • end: {...}
                                  • line: 8
                                  • column: 26
                                  }
                                }
                              • method: false
                              • shorthand: false
                              • computed: false
                              • key: Identifier {...}
                                • type: "Identifier"
                                • start: 175
                                • end: 180
                                • loc: {...}
                                  • start: {...}
                                    • line: 8
                                    • column: 11
                                    }
                                  • end: {...}
                                    • line: 8
                                    • column: 16
                                    }
                                  }
                                • name: "color"
                                }
                              • value: Literal {...}
                                • type: "Literal"
                                • start: 182
                                • end: 190
                                • loc: {...}
                                  • start: {...}
                                    • line: 8
                                    • column: 18
                                    }
                                  • end: {...}
                                    • line: 8
                                    • column: 26
                                    }
                                  }
                                • value: "salmon"
                                • raw: "'salmon'"
                                }
                              • kind: "init"
                              }
                            ]
                          }
                        • ObjectExpression {...}
                          • type: "ObjectExpression"
                          • start: 196
                          • end: 220
                          • loc: {...}
                            • start: {...}
                              • line: 9
                              • column: 2
                              }
                            • end: {...}
                              • line: 9
                              • column: 26
                              }
                            }
                          • properties: [...] (2)
                            • Property {...}
                              • type: "Property"
                              • start: 198
                              • end: 203
                              • loc: {...}
                                • start: {...}
                                  • line: 9
                                  • column: 4
                                  }
                                • end: {...}
                                  • line: 9
                                  • column: 9
                                  }
                                }
                              • method: false
                              • shorthand: false
                              • computed: false
                              • key: Identifier {...}
                                • type: "Identifier"
                                • start: 198
                                • end: 200
                                • loc: {...}
                                  • start: {...}
                                    • line: 9
                                    • column: 4
                                    }
                                  • end: {...}
                                    • line: 9
                                    • column: 6
                                    }
                                  }
                                • name: "id"
                                }
                              • value: Literal {...}
                                • type: "Literal"
                                • start: 202
                                • end: 203
                                • loc: {...}
                                  • start: {...}
                                    • line: 9
                                    • column: 8
                                    }
                                  • end: {...}
                                    • line: 9
                                    • column: 9
                                    }
                                  }
                                • value: 5
                                • raw: "5"
                                }
                              • kind: "init"
                              }
                            • Property {...}
                              • type: "Property"
                              • start: 205
                              • end: 218
                              • loc: {...}
                                • start: {...}
                                  • line: 9
                                  • column: 11
                                  }
                                • end: {...}
                                  • line: 9
                                  • column: 24
                                  }
                                }
                              • method: false
                              • shorthand: false
                              • computed: false
                              • key: Identifier {...}
                                • type: "Identifier"
                                • start: 205
                                • end: 210
                                • loc: {...}
                                  • start: {...}
                                    • line: 9
                                    • column: 11
                                    }
                                  • end: {...}
                                    • line: 9
                                    • column: 16
                                    }
                                  }
                                • name: "color"
                                }
                              • value: Literal {...}
                                • type: "Literal"
                                • start: 212
                                • end: 218
                                • loc: {...}
                                  • start: {...}
                                    • line: 9
                                    • column: 18
                                    }
                                  • end: {...}
                                    • line: 9
                                    • column: 24
                                    }
                                  }
                                • value: "gold"
                                • raw: "'gold'"
                                }
                              • kind: "init"
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  • optional: false
                  }
                }
              ]
            • kind: "let"
            }
          • FunctionDeclaration {...}
            • type: "FunctionDeclaration"
            • start: 228
            • end: 283
            • loc: {...}
              • start: {...}
                • line: 12
                • column: 1
                }
              • end: {...}
                • line: 14
                • column: 2
                }
              }
            • id: Identifier {...}
              • type: "Identifier"
              • start: 237
              • end: 248
              • loc: {...}
                • start: {...}
                  • line: 12
                  • column: 10
                  }
                • end: {...}
                  • line: 12
                  • column: 21
                  }
                }
              • name: "handleClick"
              }
            • expression: false
            • generator: false
            • async: false
            • params: []
            • body: BlockStatement {...}
              • type: "BlockStatement"
              • start: 251
              • end: 283
              • loc: {...}
                • start: {...}
                  • line: 12
                  • column: 24
                  }
                • end: {...}
                  • line: 14
                  • column: 2
                  }
                }
              • body: [...] (1)
                • ExpressionStatement {...}
                  • type: "ExpressionStatement"
                  • start: 255
                  • end: 280
                  • loc: {...}
                    • start: {...}
                      • line: 13
                      • column: 2
                      }
                    • end: {...}
                      • line: 13
                      • column: 27
                      }
                    }
                  • expression: AssignmentExpression {...}
                    • type: "AssignmentExpression"
                    • start: 255
                    • end: 279
                    • loc: {...}
                      • start: {...}
                        • line: 13
                        • column: 2
                        }
                      • end: {...}
                        • line: 13
                        • column: 26
                        }
                      }
                    • operator: "="
                    • left: Identifier {...}
                      • type: "Identifier"
                      • start: 255
                      • end: 261
                      • loc: {...}
                        • start: {...}
                          • line: 13
                          • column: 2
                          }
                        • end: {...}
                          • line: 13
                          • column: 8
                          }
                        }
                      • name: "things"
                      }
                    • right: CallExpression {...}
                      • type: "CallExpression"
                      • start: 264
                      • end: 279
                      • loc: {...}
                        • start: {...}
                          • line: 13
                          • column: 11
                          }
                        • end: {...}
                          • line: 13
                          • column: 26
                          }
                        }
                      • callee: MemberExpression {...}
                        • type: "MemberExpression"
                        • start: 264
                        • end: 276
                        • loc: {...}
                          • start: {...}
                            • line: 13
                            • column: 11
                            }
                          • end: {...}
                            • line: 13
                            • column: 23
                            }
                          }
                        • object: Identifier {...}
                          • type: "Identifier"
                          • start: 264
                          • end: 270
                          • loc: {...}
                            • start: {...}
                              • line: 13
                              • column: 11
                              }
                            • end: {...}
                              • line: 13
                              • column: 17
                              }
                            }
                          • name: "things"
                          }
                        • property: Identifier {...}
                          • type: "Identifier"
                          • start: 271
                          • end: 276
                          • loc: {...}
                            • start: {...}
                              • line: 13
                              • column: 18
                              }
                            • end: {...}
                              • line: 13
                              • column: 23
                              }
                            }
                          • name: "slice"
                          }
                        • computed: false
                        • optional: false
                        }
                      • arguments: [...] (1)
                        • Literal {...}
                          • type: "Literal"
                          • start: 277
                          • end: 278
                          • loc: {...}
                            • start: {...}
                              • line: 13
                              • column: 24
                              }
                            • end: {...}
                              • line: 13
                              • column: 25
                              }
                            }
                          • value: 1
                          • raw: "1"
                          }
                        ]
                      • optional: false
                      }
                    }
                  }
                ]
              }
            }
          ]
        • sourceType: "module"
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time
Keyed each blocks • Playground • Svelte