Svelte compiler learning resources
jimafisk opened this issue · comments
Li Hau's Compile Svelte in your head series:
- Outline: https://lihautan.com/compile-svelte-in-your-head/
- Creating, updating, removing elements: https://lihautan.com/compile-svelte-in-your-head-part-1/
- How $$invalidate works: https://lihautan.com/compile-svelte-in-your-head-part-2/
- How event handlers (on: bind: use:) work: https://lihautan.com/compile-svelte-in-your-head-part-3/
- How logic / conditionals work (e.g. {#if} block): https://lihautan.com/compile-svelte-in-your-head-part-4/
- How loops work (e.g. {#each} block): https://lihautan.com/compile-svelte-in-your-head-part-5/
See Li Hau's full outline for the "compile Svelte in your head" series
Part 1 - The Foundation
Part 2 - $$invalidate and Reactivity
Part 3 - Directives - on:, bind:, use:
Part 4 - Logic blocks - {#if}
Part 5 - Logic blocks - {#each}
Part 6 - Logic blocks - {#await}
Part 7 - Directives - bind:group
Part 8 - Directives - <select bind:value />
Part 9 - Spread props - <element {...props} />
Part 10 - Svelte Components
Part 11 - Svelte Context
Part 12 - Slots
Part 13 - Svelte Stores
Part 14 - Svelte Motion
Part 15 - Special elements
Part 16 - Transitions
Part 17 - Animations
Part 18 - Lifecycles
Part 19 - Module context
Part 20 - Server-side Rendering
Part 21 - Hydration
Other blog posts:
- Svelte compiler handbook: https://lihautan.com/the-svelte-compiler-handbook/
- Manipulating AST with JavaScript: https://lihautan.com/manipulating-ast-with-javascript/
- Svelte compiler under the hood: https://dev.to/joshnuss/svelte-compiler-under-the-hood-4j20
Videos:
- Original "Compile Svelte in your head" by Swyx: https://youtu.be/FNmvcswdjV8
- Looking into the Svelte compiler (CityJS conf): https://youtu.be/zVfd4ou9qaw
- Looking into the Svelte compiler (MMT Tech Meetup): https://youtu.be/tT1altUaaJU
- Compile Svelte in your head (SingaporeJS): https://youtu.be/eGHGJyxJAMk
- Svelte Compiler at Svelte Summit 2020: https://youtu.be/e2pGS1eqja8
- Rewriting the Svelte Compiler in Go: https://youtu.be/Ql6cZJ-Udkg
- Journey into the Svelte Compiler playlist
- Svelte Tutorial for Beginners: Svelte Compiler API: https://youtu.be/sEAzEXyTRT4
Li Hau has a great new series on building your own Svelte compiler:
- Build your own Svelte: https://youtu.be/mwvyKGw2CzU
- Support more expressions: https://youtu.be/5zR1F7NiLUU
- Reactive declarations: https://youtu.be/dTPW0zwibHc