Background
A while ago, @swyx came back to Singapore and visited us in Shopee Singapore (We're hiring!).
He gave an amazing sharing on Compile Svelte in Your Head (video) in the ReactKnowledgeable Originals.
I love his presentation and the title is so catchy, so I begged him to use the catchy title as this series of articles about the Svelte compiler. It will be about how Svelte sees your code and compiles it down to plain JavaScript.
Compile Svelte in your Head
The incomplete outline:
- 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