Skip to main content

What's new in Svelte: December 2020

Better tooling, export maps and improvements to slots and context

It's the last "What's new in Svelte" of the year and there's lots to celebrate! This month's coverage includes updates from rollup-plugin-svelte, Sapper and SvelteKit and a bunch of showcases from the Svelte community!

New features & impactful bug fixes

  1. $$props, $$restProps, and $$slots are all now supported in custom web components (3.29.5, Example) and slot components now support spread props: <slot {...foo} /> (3.30.0)
  2. A new hasContext lifecycle function makes it easy to check whether a key has been set in the context of a parent component (3.30.0 & 3.30.1, Docs)
  3. There is now a new SvelteComponentTyped class which makes it easier to add strongly typed components that extend base Svelte components. Component library and framework authors rejoice! An example: export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {} (3.31.0, RFC)
  4. Transitions within {:else} blocks should now complete successfully (3.29.5, Example)
  5. Svelte now includes an export map, which explicitly states which files can be imported from its npm package (3.29.5 with some fixes in 3.29.6, 3.29.7 and 3.30.0)
  6. rollup-plugin-svelte had a new 7.0.0 release. The biggest change is that the css option was removed. Users who were using that option should add another plugin like rollup-plugin-css-only as demonstrated in the template

What's going on in Sapper?

Lots of new TypeScript definition improvements to make editing Sapper apps even easier! CSS for dynamic imports also should now work in client.js files. (Unreleased)

What's the deal with SvelteKit?

We're glad you asked! If you didn't catch Rich's blog post from early last month, you can find it here!

For all the features and bugfixes see the CHANGELOGs for Svelte and Sapper.


Community Showcase

Apps & Sites

  • narration.studio (Chrome Only) is an automatic in-browser audio recording & editing platform for voice over narration.
  • Vippet is a video recording and editing tool for the browser.
  • Pattern Monster is a simple online pattern generator to create repeatable SVG patterns.
  • Plant-based diets is a website from the World Wildlife Foundation (WWF) built with Svelte.
  • johnells.se is a Swedish fashion e-commerce site, built with Crown - a Svelte-powered framework.
  • sentence-length is a learning and analysis tool to show how some authors play with different lengths, while others stick with one.
  • svelte-presenter lets you quickly make good looking presentations using Svelte and mdsvex.

Demos

Learning Resources

Components, Libraries & Tools

  • svelte-crossword is a customizable crossword puzzle component for Svelte.
  • svelte-cloudinary makes it easy to integrate Cloudinary with Svelte (including TypeScript and SSR support)
  • Svelte Nova extends the new Nova editor to support Svelte
  • saos is a small svelte component to animate your elements on scroll.
  • Svelte-nStore is a general purpose store replacement that fulfills the Svelte store contract and adds getter and calculation features.
  • svelte-slimscroll is a Svelte Action that transforms any div into a scrollable area with a nice scrollbar.
  • svelte-typewriter is a simple and reusable typewriter effect for your Svelte applications
  • svelte-store-router is a store-based router for Svelte that suggests that routing is just another global state and History API changes are just an optional side-effects of this state.
  • Routify just released version 2 of its Svelte router.
  • svelte-error-boundary provides a simple error boundary component for Svelte that can be can be used with both DOM and SSR targets.
  • svelte2dts generates d.ts files from svelte files, creating truly shareable and well typed components.

See you next month!

Got an idea for something to add to the Showcase? Want to get involved more with Svelte? We're always looking for maintainers, contributors and fanatics... Check out the Svelte Society, Reddit and Discord to get involved!

That's all for the year, folks! See you in January 😎

We stand with Ukraine. Donate → We stand with Ukraine. Petition your leaders. Show your support.