"What's new in Svelte: December 2020"

Better tooling, export maps and improvements to slots and context

Dani Sandoval Dec 1 2020

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

• u/loopcake got SSR working in Java Spring Boot for all the Java shops out there looking to render Svelte server-side.
• svelte-liquid-swipe shows off a fancy interaction pattern using svg paths.
• Crossfade Link Animation demonstrates how to animate between navigation links using a crossfade (made by Blu, from the Discord community)
• Clip-Path Transitions showcases how to use clip paths and custom transitions to create magical in-and-out transitions (made by Faber, from the Discord community)

Learning Resources

• lihautan has been making easy-to-follow videos to share his in-depth knowledge of Svelte.
• Lessons From Building a Static Site Generator shares the backstory and thinking behind Elder.js - and the design decision made along the way.
• Svelte Tutorial and Projects Course is a udemy course by John Smilga where students learn Svelte.js by building interesting projects.
• Building Pastebin on IPFS - with FastAPI, Svelte, and IPFS explains how to make a distributed pastebin-like application.

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 😎