Day 24 — Svelte now handles `class` attributes with github.com/lukeed/clsx. Much more powerful than the `class:` directive, but since this is Svelte you still get dead code elimination of unused styles!

🎁 docs svelte.dev/docs/svelte/...
🎁 demo svelte.dev/playground/6...

Day 23 — you can now download your playground creations as SvelteKit apps! It'll even include any dependencies you've imported

🎁 svelte.dev/playground

Day 22 — you can now use the `bundleStrategy: 'inline'` option to build an entire SvelteKit app — code, styles, fonts, images, audio, and so on — into a single `.html` file that you can share on a floppy disk

🎁 docs svelte.dev/docs/kit/con...
🎁 demo svelte-snek.vercel.app (needs keyboard for now!)

Day 20 — Vim mode! You can enable it in the playground and tutorial and it will remember your preference between visits. Don't worry, you can always quit by turning it off again (or closing the tab)

🎁 svelte.dev/playground

Day 19 — single-file bundles for SvelteKit. By default, your apps use code-splitting to ensure that you only load the code for the current page. But sometimes you need a single bundle for the whole app, and you can now do that with the new `bundleStrategy` option

🎁 docs svelte.dev/docs/kit/con...

Day 18 — we've upgraded the playground so you can better understand how the compiler transforms your code. We plan to use this tool ourselves to improve the sourcemaps that Svelte generates

🎁 svelte.dev/playground

Day 17 — until today, intellisense would often fail when you were in the middle of writing components, because Svelte's parser crashed on syntax errors.

We just fixed that. Install svelte@latest, make sure your extensions are up to date, and feel the wind in your hair as you write your components

Day 15 — the new `$inspect.trace(...)` rune gives you debugging superpowers. Add it to a function that runs inside a derived or effect, and you'll see detailed information about what caused it to re-run

🎁 docs svelte.dev/docs/svelte/...
🎁 demo svelte.dev/playground/d...

Day 14 — if you need to programmatically mount and unmount a component, you can now pass an `outro: true` option to `unmount` to play transitions before it is removed from the DOM

🎁 docs svelte.dev/docs/svelte/...
🎁 demo svelte.dev/playground/a...

Day 12 — send custom types across the network boundary in SvelteKit, whether it's a class containing reactive state, a class used by your database ORM library, or whatever. Just export a `transport` object from your `hooks.js`

🎁 docs svelte.dev/docs/kit/hoo...
🎁 demo stackblitz.com/edit/sveltej...

Day 11 — a whole new module, for getting reactive views of window properties like innerWidth, innerHeight, scrollX, scrollY and so on. Like the bindings on but with less boilerplate

🎁 docs svelte.dev/docs/svelte/...
🎁 demo svelte.dev/playground/8...

Day 9 — warnings and errors emitted by the compiler, or while your app is running, are now accompanied by links to the docs. Over time, we'll flesh out these docs with more details about what caused the error in question

🎁 demo svelte.dev/playground/8...

Day 8 — we're calling this 'function bindings'. You know how you can do `bind:value={value}`? You can now do this...

bind:value={getValue, setValue}

...which lets you transform and validate data

🎁 docs svelte.dev/docs/svelte/...
🎁 demo svelte.dev/playground/1...

Day 7 — the first of a few planned improvements to the site. A lot of you (rightly!) disliked the tutorial dropdown navigation, so we fixed it. You can even navigate the tutorial with JS disabled, if you're so inclined

🎁 svelte.dev/tutorial

Aside from Advent of Svelte, we've also been shipping a bunch of minor bugfixes and improvements. For example, `if` blocks are now treeshakeable — if you have a condition that can be known statically, like `{#if BROWSER}`, then dead code will be eliminated by a minifier

Day 6 — we now have modern state-based Spring and Tween classes for adding motion to your UI, replacing the `spring`/`tweened` stores of old. Smooth!

🎁 tutorial svelte.dev/tutorial/sve...
🎁 docs svelte.dev/docs/svelte/...
🎁 demo svelte.dev/playground/8...

Day 5 — it's a three-in-one kind of day! `new MediaQuery(...)` lets you use media queries reactively. prefersReducedMotion is an instance of MediaQuery that makes it easier to respect users' accessibility preferences

- docs svelte.dev/docs/svelte/...
- demo svelte.dev/playground/8...

there's more!

Day 4 — specify a `defaultValue` on form inputs, and it will be used when the form is reset

- docs svelte.dev/docs/svelte/...
- demo svelte.dev/playground/b...