Post

🎅🎄🎁 ADVENT OF SVELTE 🎅🎄🎁 We're going to ship one thing a day every day from now until Christmas. Wish us luck! svelte.dev/blog/advent-... First up...

Day 1 — error boundaries! Wrap your code in a <svelte:boundary> and you can isolate and recover from unexpected errors. 🎁 docs svelte.dev/docs/svelte/... 🎁 tutorial svelte.dev/tutorial/sve...

Day 2 — `each` without `as`, for when you just want lots of one thing - docs svelte.dev/docs/svelte/... - demo svelte.dev/playground/e...

Day 3 — you can now export snippets from a <script module> (terms and conditions apply) - docs svelte.dev/docs/svelte/... - demo svelte.dev/playground/1...

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...

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 5, part two — the MediaQuery stuff is powered by createSubscriber, which is an advanced feature mainly for library authors. It makes it easy for you to build your own reactive classes that set up event listeners when something is read inside an effect. - docs svelte.dev/docs/svelte/...

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 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

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 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 10 — a lot of you wanted a place to put asynchronous setup work that happens before your SvelteKit app starts up. You can now export an `init` function from `hooks.server.js` and `hooks.client.js` that will be awaited before any other stuff happens 🎁 docs svelte.dev/docs/kit/hoo...

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 <svelte:window> but with less boilerplate 🎁 docs svelte.dev/docs/svelte/... 🎁 demo svelte.dev/playground/8...

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 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 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 16 — `$app/state`, a modern Svelte 5 state-based replacement for SvelteKit's `$app/stores` module. No more clunky `$` prefix when reading values, just fine-grained state that works everywhere, even outside component files! 🎁 docs svelte.dev/docs/kit/$ap... 🎁 tutorial svelte.dev/tutorial/kit...