What's new in Svelte: July 1, 2020

Better bindings, reducing boilerplate, and an emoji-picker built with Svelte

New features

1. Media elements now have a two-way binding for the muted attribute. Example

2. The A11y linter will now warn you if you use an onChange without (or instead of) an onBlur (no-onchange was released in 3.23.0)

Want to help with Svelte Accessibility? Check out this good first issue to get started!

Impactful bug fixes

1. bind statements in {#each} blocks now update reactive (e.g. $: ) contexts (released in 3.23.0) and can be changed from inside the each block (released in 3.23.1, with further fixes coming in the next release) . Example

2. <select multiple> components can now be set with spread props (released in 3.23.0). Example

3. <select> values with bind:value are now correctly updated when the available <option>s change . Example

Coming up

• The nullish coalescing (??) and optional chaining (?.) operators will soon be supported thanks to an update to a dependency (acornjs/acorn).

• First Production Release of Svelte Language Tools is out now (including Typescript Support). Keep an eye on svelte/language-tools for the latest bits. Official announcement of the VS Code extension is coming soon.

• Hot Module Reloading (“In Review”). Check out the experimental version at rixo/svelte-template-hot

See the Roadmap for more details. And the CHANGELOG for a full list of features and bugfixes.

---

Svelte showcase

• Rich Harris taught a full-day workshop that covered everything from first time setup and compilation to writing tests and animations.

• Svelte Navigator is an accessible and relatively lightweight Single Page App Router inspired by react-router and @reach/router.

• External Libraries in Svelte Using Actions explains how Svelte can be used to glue together UI libraries across the Javascript ecosystem.

• HousesOf.World is a Sapper site built with Svelte, Anime.js and CSS transitions. It’s already been awarded Site of the Day and the author has been very kind answering questions on Reddit.

• PodLP is a user-friendly podcast service for the smart feature phone platform, KaiOS. The entire app was built using Svelte and is running on low-end feature phones!

• A Better Emoji Picker was built by Nolan Lawson in Svelte to make picking emojis easy (and less wasteful). Check out his blog post breaking down the tech!

See you next month!

That’s all for this month’s roundup. If you know someone who might be interested in reading this newsletter, please feel free to forward it along 😁 I’m excited be able to highlight the amazing work of the Svelte community!

Is there something you’d like to see that I didn’t cover? Want to add your own site to the Showcase? Send me a message!

Until next time,
Dani