Looking into the Svelte compiler

@lihautan

👨🏻‍💻 Frontend engineer at Shopee Singapore
🇲🇾 Grew up in Penang, Malaysia
🛠 Svelte Maintainer

Are you ready?

Jon,Margeret

App.svelte

Component.svelte

Hello World

The Svelte Compiler

How does compiler work?

How does Svelte compiler work?

1. Parsing Svelte code

Svelte implements its own parser
- HTML syntax
- Logic blocks
Svelte uses acorn to parse JavaScript
- tag
- Curly brakcets
Svelte uses css-tree to parse CSS
- tag

2. Static Analysis

Traverse the script
Traverse the template
Traverse the script again (for optimisation)
Traverse the style
- Add to selectors

3. Rendering

2 different targets:

generate: dom
generate: ssr

3.1. generate: dom

3.2. generate: ssr

4. Output as js + css

Summary

Parsing Svelte code
Static Analysis
Rendering

3.1. generate: dom

3.2. generate: ssr
Output as js + css

Thank you

@lihautan