Post

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 13 — a gift for the robot friend in your life. We now publish llms.txt files containing up-to-the-minute documentation for Svelte, SvelteKit and the CLI in AI-digestible form 🎁 docs svelte.dev/docs/llms 🎁 demo (a snake game made by Sonnet 3.5) svelte.dev/playground/0...

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

note: you can migrate automatically using the following command npx sv migrate app-state

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

Does it generate CSP hashes?

for scripts, yes. i forgot to account for styles though — good catch! opened github.com/sveltejs/kit...

So with this and hash-based routing gives a very much SPA

If you got a server, you can also use this bsky.app/profile/svel...

okay, kinda fixed mobile — you can tap the edges of the screen to control the snek. it'll do for now! going to go and do some christmas shopping

Rich does his Christmas shopping like he does his talks - last minute

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