Svelte compiler learning resources

[jimafisk]

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

[jimafisk]

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