iiinova — where your digital self keeps evolving

Svelte @svelte.dev · 24/12/2024

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

screenshot of svelte.dev/playground showing the new `class` attribute handling

61329

Svelte @svelte.dev · 23/12/2024

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

screenshot of svelte.dev/playground showing the new 'download app' option

1655

Svelte @svelte.dev · 22/12/2024

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

Downloadable Snake game built with SvelteKit and the new `bundleStrategy: 'inline'` option

7848

Svelte @svelte.dev · 20/12/2024

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

6847

Svelte @svelte.dev · 19/12/2024

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

a screenshot showing the new `output.bundleStrategy` option in SvelteKit. On the left, the updated svelte.config.js; on the right, a look at the resulting HTML

5794

Svelte @svelte.dev · 18/12/2024

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

3797

Svelte @svelte.dev · 17/12/2024

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

611211

Svelte @svelte.dev · 15/12/2024

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

screenshot of svelte.dev/playground showing the new $inspect.trace(...) debugging superpowers

4787

Svelte @svelte.dev · 14/12/2024

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

2948

Svelte @svelte.dev · 12/12/2024

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

screenshot of a stackblitz app showing the new custom type transport feature in sveltekit

48810

Svelte @svelte.dev · 11/12/2024

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

screenshot of svelte.dev/playground showing the new svelte/reactivity/window module

21239

Svelte @svelte.dev · 09/12/2024

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

screenshot of svelte.dev/playground showing the new links-in-warnings feature

1854

Svelte @svelte.dev · 08/12/2024

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

screenshot of svelte.dev/playground showing the new function bindings feature

812114

Svelte @svelte.dev · 07/12/2024

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

screenshot of the new navigation dropdown on svelte.dev/tutorial

5785

Svelte @svelte.dev · 06/12/2024

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

A screenshot of svelte.dev/playground showing the generated code for a component with a static if condition

The result of running the output of the Svelte compiler through treeshaking, using rollupjs.org/repl

21152

Svelte @svelte.dev · 06/12/2024

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

3996

Svelte @svelte.dev · 05/12/2024

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!

210515

Svelte @svelte.dev · 04/12/2024

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

a screenshot of svelte.dev/playground showing the new defaultValue support

3853

Svelte @svelte.dev · 03/12/2024

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

Screenshot of https://svelte.dev/playground/16b7dd7105c248e59ec8a437697f588d, showing the new exported snippet feature

1013711

Svelte @svelte.dev · 02/12/2024

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

screenshot of a svelte.dev/playground demo that uses the new each-without-as feature to render a chessboard

21658

Svelte @svelte.dev · 01/12/2024

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

Screenshot of the new <svelte:boundary> feature in Svelte 5.3

320313